productRange.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <div class="productRange-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 操作按钮 -->
  5. <div class="table-operator">
  6. <a-button id="productRange-brand" type="primary" class="button-error" @click="choosePModal('PRODUCT_BRAND')">选择产品品牌</a-button>
  7. <a-button id="productRange-type" type="primary" class="button-info" @click="choosePModal('PRODUCT_TYPE')">选择产品分类</a-button>
  8. <a-button id="productRange-product" type="primary" class="button-success" @click="choosePModal('SUPPLIER')">选择供应商</a-button>
  9. </div>
  10. <!-- 选择产品品牌 -->
  11. <chooseBrandModal :openModal="openBrandModal" :chooseData="chooseBrand" @close="openBrandModal=false" @ok="handleBrandOk" />
  12. <!-- 选择产品分类 -->
  13. <chooseTypeModal :openModal="openTypeModal" :chooseData="chooseType" @close="openTypeModal=false" @ok="handleTypeOk" />
  14. <!-- 选择供应商 -->
  15. <chooseSupplierModal :openModal="openSupplierModal" :chooseData="chooseSupplier" @close="openSupplierModal=false" @ok="handleSupplierOk" />
  16. <!-- 列表 -->
  17. <s-table
  18. class="sTable"
  19. ref="table"
  20. size="small"
  21. :rowKey="(record) => record.id"
  22. :columns="columns"
  23. :data="loadData"
  24. :showPagination="false"
  25. :scroll="{ y: tableHeight }"
  26. bordered>
  27. <!-- 操作 -->
  28. <template slot="action" slot-scope="text, record">
  29. <a-button
  30. size="small"
  31. type="link"
  32. class="button-error"
  33. @click="handleDel(record)"
  34. id="productRange-del-btn">删除</a-button>
  35. </template>
  36. </s-table>
  37. </a-spin>
  38. </div>
  39. </template>
  40. <script>
  41. import { STable } from '@/components'
  42. import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
  43. import ChooseTypeModal from '@/views/common/chooseTypeModal.vue'
  44. import ChooseSupplierModal from '@/views/common/chooseSupplierModal.vue'
  45. import { predictRangeList, predictRangeDel } from '@/api/predict'
  46. export default {
  47. components: { STable, ChooseBrandModal, ChooseTypeModal, ChooseSupplierModal },
  48. props: {
  49. itemSn: {
  50. type: [String, Number],
  51. default: ''
  52. },
  53. tableHeight: {
  54. type: [String, Number],
  55. default: 400
  56. }
  57. },
  58. data () {
  59. return {
  60. spinning: false,
  61. openBrandModal: false, // 选择产品品牌
  62. openTypeModal: false, // 选择产品分类
  63. openSupplierModal: false, // 选择供应商
  64. chooseBrand: [], // 所选品牌
  65. chooseType: [], // 所选分类
  66. chooseSupplier: [], // 所选供应商
  67. columns: [
  68. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  69. { title: '类型', dataIndex: 'rangeTypeName', align: 'center', customRender: function (text) { return text || '--' } },
  70. { title: '类型名称', dataIndex: 'rangeDataName', align: 'center', customRender: function (text) { return text || '--' } },
  71. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  72. ],
  73. // 加载数据方法 必须为 Promise 对象
  74. loadData: parameter => {
  75. return predictRangeList({ 'sn': this.itemSn }).then(res => {
  76. let data
  77. if (res.status == 200) {
  78. data = res.data
  79. for (var i = 0; i < data.length; i++) {
  80. data[i].no = i + 1
  81. }
  82. this.listData = data
  83. }
  84. return data
  85. })
  86. },
  87. listData: []
  88. }
  89. },
  90. methods: {
  91. // 选择
  92. choosePModal (type) {
  93. const brandList = []
  94. const typeList = []
  95. const supplierList = []
  96. this.listData.map(item => {
  97. if (item.rangeType == 'PRODUCT_BRAND') {
  98. brandList.push(Object.assign(item, { goodsSn: item.rangeDataSn, brandSn: item.rangeDataSn }))
  99. } else if (item.rangeType == 'PRODUCT_TYPE') {
  100. typeList.push(Object.assign(item, { goodsSn: item.rangeDataSn, productTypeSn: item.rangeDataSn }))
  101. } else if (item.rangeType == 'SUPPLIER') {
  102. supplierList.push(Object.assign(item, { supplierSn: item.rangeDataSn }))
  103. }
  104. })
  105. if (type == 'PRODUCT_BRAND') { // 选择品牌
  106. this.chooseBrand = brandList
  107. this.openBrandModal = true
  108. } else if (type == 'PRODUCT_TYPE') { // 选择分类
  109. this.chooseType = typeList
  110. this.openTypeModal = true
  111. } else if (type == 'SUPPLIER') {
  112. this.chooseSupplier = supplierList
  113. this.openSupplierModal = true
  114. }
  115. },
  116. // 品牌
  117. handleBrandOk (obj) {
  118. this.chooseBrand = obj
  119. this.changeData('PRODUCT_BRAND')
  120. },
  121. // 分类
  122. handleTypeOk (obj) {
  123. this.chooseType = obj
  124. this.changeData('PRODUCT_TYPE')
  125. },
  126. // 供应商
  127. handleSupplierOk (obj) {
  128. this.chooseSupplier = obj
  129. this.changeData('SUPPLIER')
  130. },
  131. changeData (type) {
  132. const _this = this
  133. const dataList = []
  134. if (type == 'PRODUCT_BRAND') { // 选择品牌
  135. if (_this.chooseBrand.length > 0) {
  136. _this.chooseBrand.map(item => {
  137. dataList.push({
  138. rangeType: type,
  139. rangeDataSn: item.brandSn,
  140. stockPredictSn: this.itemSn
  141. })
  142. })
  143. }
  144. } else if (type == 'PRODUCT_TYPE') { // 选择分类
  145. if (_this.chooseType.length > 0) {
  146. _this.chooseType.map(item => {
  147. dataList.push({
  148. rangeType: type,
  149. rangeDataSn: item.productTypeSn,
  150. stockPredictSn: this.itemSn
  151. })
  152. })
  153. }
  154. } else if (type == 'SUPPLIER') { // 选择供应商
  155. if (_this.chooseSupplier.length > 0) {
  156. _this.chooseSupplier.map(item => {
  157. dataList.push({
  158. rangeType: type,
  159. rangeDataSn: item.supplierSn,
  160. stockPredictSn: this.itemSn
  161. })
  162. })
  163. }
  164. }
  165. console.log('----------------选择', dataList)
  166. this.$emit('ok', dataList)
  167. },
  168. // 删除
  169. handleDel (row) {
  170. const _this = this
  171. this.$confirm({
  172. title: '提示',
  173. content: '删除后不可恢复,确定要进行删除吗?',
  174. centered: true,
  175. onOk () {
  176. _this.spinning = true
  177. predictRangeDel({ stockPredictSn: row.stockPredictSn, rangeDataSn: row.rangeDataSn }).then(res => {
  178. if (res.status == 200) {
  179. _this.$message.success(res.message)
  180. _this.$refs.table.refresh()
  181. _this.spinning = false
  182. } else {
  183. _this.spinning = false
  184. }
  185. })
  186. }
  187. })
  188. },
  189. // 刷新数据
  190. refreshList () {
  191. this.$refs.table.refresh()
  192. }
  193. }
  194. }
  195. </script>