productRange.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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 { commonMixin } from '@/utils/mixin'
  42. import { STable } from '@/components'
  43. import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
  44. import ChooseTypeModal from '@/views/common/chooseTypeModal.vue'
  45. import ChooseSupplierModal from '@/views/common/chooseSupplierModal.vue'
  46. import { predictRangeList, predictRangeDel } from '@/api/predict'
  47. export default {
  48. name: 'ProductRange',
  49. mixins: [commonMixin],
  50. components: { STable, ChooseBrandModal, ChooseTypeModal, ChooseSupplierModal },
  51. props: {
  52. itemSn: {
  53. type: [String, Number],
  54. default: ''
  55. },
  56. tableHeight: {
  57. type: [String, Number],
  58. default: 400
  59. }
  60. },
  61. data () {
  62. return {
  63. spinning: false,
  64. openBrandModal: false, // 选择产品品牌
  65. openTypeModal: false, // 选择产品分类
  66. openSupplierModal: false, // 选择供应商
  67. chooseBrand: [], // 所选品牌
  68. chooseType: [], // 所选分类
  69. chooseSupplier: [], // 所选供应商
  70. columns: [
  71. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  72. { title: '类型', dataIndex: 'rangeTypeName', align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '类型名称', dataIndex: 'rangeDataName', align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  75. ],
  76. // 加载数据方法 必须为 Promise 对象
  77. loadData: parameter => {
  78. return predictRangeList({ 'sn': this.itemSn }).then(res => {
  79. let data
  80. if (res.status == 200) {
  81. data = res.data
  82. for (var i = 0; i < data.length; i++) {
  83. data[i].no = i + 1
  84. }
  85. this.listData = data
  86. }
  87. return data
  88. })
  89. },
  90. listData: []
  91. }
  92. },
  93. methods: {
  94. // 选择
  95. choosePModal (type) {
  96. const brandList = []
  97. const typeList = []
  98. const supplierList = []
  99. this.listData.map(item => {
  100. if (item.rangeType == 'PRODUCT_BRAND') {
  101. brandList.push(Object.assign(item, { goodsSn: item.rangeDataSn, brandSn: item.rangeDataSn }))
  102. } else if (item.rangeType == 'PRODUCT_TYPE') {
  103. typeList.push(Object.assign(item, { goodsSn: item.rangeDataSn, productTypeSn: item.rangeDataSn }))
  104. } else if (item.rangeType == 'SUPPLIER') {
  105. supplierList.push(Object.assign(item, { supplierSn: item.rangeDataSn }))
  106. }
  107. })
  108. if (type == 'PRODUCT_BRAND') { // 选择品牌
  109. this.chooseBrand = brandList
  110. this.openBrandModal = true
  111. } else if (type == 'PRODUCT_TYPE') { // 选择分类
  112. this.chooseType = typeList
  113. this.openTypeModal = true
  114. } else if (type == 'SUPPLIER') {
  115. this.chooseSupplier = supplierList
  116. this.openSupplierModal = true
  117. }
  118. },
  119. // 品牌
  120. handleBrandOk (obj) {
  121. this.chooseBrand = obj
  122. this.changeData('PRODUCT_BRAND')
  123. },
  124. // 分类
  125. handleTypeOk (obj) {
  126. this.chooseType = obj
  127. this.changeData('PRODUCT_TYPE')
  128. },
  129. // 供应商
  130. handleSupplierOk (obj) {
  131. this.chooseSupplier = obj
  132. this.changeData('SUPPLIER')
  133. },
  134. changeData (type) {
  135. const _this = this
  136. const dataList = []
  137. if (type == 'PRODUCT_BRAND') { // 选择品牌
  138. if (_this.chooseBrand.length > 0) {
  139. _this.chooseBrand.map(item => {
  140. dataList.push({
  141. rangeType: type,
  142. rangeDataSn: item.brandSn,
  143. stockPredictSn: this.itemSn
  144. })
  145. })
  146. }
  147. } else if (type == 'PRODUCT_TYPE') { // 选择分类
  148. if (_this.chooseType.length > 0) {
  149. _this.chooseType.map(item => {
  150. dataList.push({
  151. rangeType: type,
  152. rangeDataSn: item.productTypeSn,
  153. stockPredictSn: this.itemSn
  154. })
  155. })
  156. }
  157. } else if (type == 'SUPPLIER') { // 选择供应商
  158. if (_this.chooseSupplier.length > 0) {
  159. _this.chooseSupplier.map(item => {
  160. dataList.push({
  161. rangeType: type,
  162. rangeDataSn: item.supplierSn,
  163. stockPredictSn: this.itemSn
  164. })
  165. })
  166. }
  167. }
  168. console.log('----------------选择', dataList)
  169. this.$emit('ok', dataList)
  170. },
  171. // 删除
  172. handleDel (row) {
  173. const _this = this
  174. this.$confirm({
  175. title: '提示',
  176. content: '删除后不可恢复,确定要进行删除吗?',
  177. centered: true,
  178. onOk () {
  179. _this.spinning = true
  180. predictRangeDel({ stockPredictSn: row.stockPredictSn, rangeDataSn: row.rangeDataSn }).then(res => {
  181. if (res.status == 200) {
  182. _this.$message.success(res.message)
  183. _this.$refs.table.refresh()
  184. _this.spinning = false
  185. } else {
  186. _this.spinning = false
  187. }
  188. })
  189. }
  190. })
  191. },
  192. // 刷新数据
  193. refreshList () {
  194. this.$refs.table.refresh()
  195. }
  196. }
  197. }
  198. </script>