productTable.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <div class="veTableCon">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <s-table
  5. class="sTable"
  6. ref="table"
  7. size="small"
  8. :rowKey="(record) => record.id"
  9. :columns="columns"
  10. :data="loadData"
  11. :row-selection="{ columnWidth: 40 }"
  12. @rowSelection="rowSelectionFun"
  13. :defaultLoadData="false"
  14. :style="{ maxHeight: 300+'px' }"
  15. :scroll="{ y:230 }"
  16. bordered>
  17. <!-- 买 -->
  18. <template slot="conditionValue" slot-scope="text,record">
  19. <a-input-number
  20. :min="1"
  21. :step="1"
  22. :precision="0"
  23. :max="99999999"
  24. style="width:90%;"
  25. @blur="editProductVal(record,'conditionValue')"
  26. placeholder="请输入"
  27. v-model="record.conditionValue"
  28. :id="'productTable-conditionValue'+record.id "
  29. size="small"/>
  30. </template>
  31. <!-- 赠 -->
  32. <template slot="resultValue" slot-scope="text,record">
  33. <a-input-number
  34. :min="1"
  35. :step="1"
  36. :precision="0"
  37. :max="99999999"
  38. style="width:90%;"
  39. @blur="editProductVal(record,'resultValue')"
  40. placeholder="请输入"
  41. v-model="record.resultValue"
  42. :id="'productTable-resultValue'+record.id "
  43. size="small"/>
  44. </template>
  45. <!-- 买产品送代金券 返券金额 -->
  46. <template slot="priceValue" slot-scope="text,record">
  47. <a-input-number
  48. :min="0.01"
  49. :step="1"
  50. :precision="2"
  51. :max="99999999"
  52. style="width:90%;"
  53. @blur="editProductVal(record,'resultValue')"
  54. placeholder="请输入"
  55. v-model="record.resultValue"
  56. :id="'productTable-resultValue'+record.id "
  57. size="small"/>
  58. </template>
  59. <!-- 特价价格-->
  60. <template slot="specialOffer" slot-scope="text,record">
  61. <a-input-number
  62. :step="1"
  63. :precision="2"
  64. :max="99999999"
  65. style="width:90%;"
  66. @blur="editProductVal(record,'conditionValue')"
  67. placeholder="请输入"
  68. v-model="record.conditionValue"
  69. :id="'productTable-conditionValue'+record.id "
  70. size="small"/>
  71. <!-- 直降 -->
  72. <!-- <span v-if="discountType==='STRAIGHT_DOWN'">{{ (record.resultValue&&record.shopProductPrice)?(record.shopProductPrice-record.resultValue).toFixed(2):'--' }}</span> -->
  73. <!-- 折扣 -->
  74. <!-- <span v-else>{{ (record.resultValue&&record.shopProductPrice)?(record.shopProductPrice*record.resultValue/100).toFixed(2):'--' }}</span> -->
  75. </template>
  76. <!-- 操作 -->
  77. <template slot="action" slot-scope="text,record">
  78. <a-button
  79. size="small"
  80. type="link"
  81. class="button-error"
  82. :id="'productTable-del-btn'+record.id "
  83. @click="handleDel(record)"
  84. >删除</a-button>
  85. </template>
  86. </s-table>
  87. </a-spin>
  88. </div>
  89. </template>
  90. <script>
  91. import { commonMixin } from '@/utils/mixin'
  92. // 组件
  93. import { STable } from '@/components'
  94. // 接口
  95. import { chooseProductList, delChooseProduct, modifyChooseProduct, clearProductByPromoSn } from '@/api/shopPromo'
  96. export default {
  97. name: 'ProductTable',
  98. mixins: [commonMixin],
  99. components: { STable },
  100. props: {
  101. promoActiveSn: {// 活动sn
  102. type: String,
  103. default: ''
  104. },
  105. activeType: {// 促销活动类型
  106. type: String,
  107. default: ''
  108. },
  109. discountType: {// 特价产品时,优惠方式
  110. type: String,
  111. default: ''
  112. }
  113. },
  114. data () {
  115. return {
  116. spinning: false,
  117. rowSelectionInfo: null, // 已选数据
  118. queryParam: {}, // 查询条件
  119. chooseProductNum: 0, // 列表数据个数
  120. // 加载数据方法 必须为 Promise 对象
  121. loadData: parameter => {
  122. this.disabled = true
  123. this.spinning = true
  124. const params = Object.assign(parameter, this.queryParam)
  125. params.promoSn = this.promoActiveSn
  126. return chooseProductList(params).then(res => {
  127. let data
  128. if (res.status == 200) {
  129. data = res.data
  130. const no = (data.pageNo - 1) * data.pageSize
  131. for (var i = 0; i < data.list.length; i++) {
  132. data.list[i].no = no + i + 1
  133. if (this.activeType === 'PROMO_PROD') {
  134. data.list[i].conditionValue = data.list[i].conditionValue ? data.list[i].conditionValue : data.list[i].shopProductPrice
  135. }
  136. }
  137. this.chooseProductNum = data.count
  138. this.disabled = false
  139. }
  140. this.spinning = false
  141. return data
  142. })
  143. }
  144. }
  145. },
  146. computed: {
  147. columns () {
  148. const _this = this
  149. const arr = [
  150. { title: '序号', dataIndex: 'no', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  151. { title: '产品编码', dataIndex: 'productCode', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
  152. { title: '产品名称', dataIndex: 'productName', width: '25%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  153. { title: '原厂编码', dataIndex: 'productOrigCode', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  154. { title: '商城售价', dataIndex: 'shopProductPrice', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  155. { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  156. ]
  157. if (_this.activeType === 'BUY_PROD_GIVE_PROD') {
  158. arr.splice(4, 0, { title: '买', scopedSlots: { customRender: 'conditionValue' }, width: '10%', align: 'center' })
  159. arr.splice(5, 0, { title: '赠', scopedSlots: { customRender: 'resultValue' }, width: '10%', align: 'center' })
  160. } else if (_this.activeType === 'PROMO_PROD') {
  161. arr.splice(5, 0, { title: '特价价格', width: '10%', align: 'right', scopedSlots: { customRender: 'specialOffer' } })
  162. } else {
  163. arr.splice(5, 0, { title: '返券金额', scopedSlots: { customRender: 'priceValue' }, width: '10%', align: 'center' })
  164. }
  165. return arr
  166. },
  167. // 计算列表选中数据条数
  168. selectCount () {
  169. return this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length
  170. }
  171. },
  172. methods: {
  173. // 表格选中项
  174. rowSelectionFun (obj) {
  175. this.rowSelectionInfo = obj || null
  176. this.$emit('changeSel', this.selectCount)
  177. },
  178. // 批量已选产品信息
  179. editProductVal (row, typeName) {
  180. let ajaxData = []
  181. row.resultValue = this.activeType === 'PROMO_PROD' ? undefined : row.resultValue
  182. if (typeName != 'all') {
  183. ajaxData.push({
  184. id: row.id,
  185. promoSn: this.promoActiveSn,
  186. productPrice: typeName === 'productPrice' ? row.productPrice : undefined,
  187. conditionValue: typeName === 'conditionValue' ? row.conditionValue : undefined,
  188. resultValue: typeName === 'resultValue' ? row.resultValue : undefined
  189. })
  190. if (this.activeType === 'PROMO_PROD' && this.discountType === 'DISCOUNT') {
  191. ajaxData[0].resultValue = row.resultValue ? row.resultValue / 100 : ''
  192. }
  193. } else {
  194. ajaxData = row || []
  195. }
  196. modifyChooseProduct(ajaxData).then(res => {
  197. if (res.status == 200) {
  198. this.$refs.table.refresh(true)
  199. this.$refs.table.clearSelected() // 清空表格选中项
  200. }
  201. })
  202. },
  203. // 修改产品活动价、返券金额
  204. editMorePrice (oldObjInfo) {
  205. if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRows && this.rowSelectionInfo.selectedRows.length === 0)) {
  206. this.$message.warning('请选择要修改的产品!')
  207. return
  208. }
  209. let ajaxArr = []
  210. const objInfo = JSON.parse(JSON.stringify(oldObjInfo))
  211. if (this.activeType === 'PROMO_PROD') {
  212. if (this.discountType === 'STRAIGHT_DOWN') {
  213. ajaxArr = this.rowSelectionInfo.selectedRows.map(item => { return { id: item.id, promoSn: this.promoActiveSn, productPrice: item.shopProductPrice, conditionValue: (item.shopProductPrice - objInfo.resultValue), resultValue: objInfo.resultValue } })
  214. } else {
  215. ajaxArr = this.rowSelectionInfo.selectedRows.map(item => { return { id: item.id, promoSn: this.promoActiveSn, conditionValue: (item.shopProductPrice * (objInfo.resultValue / 100)), resultValue: objInfo.resultValue / 100 } })
  216. }
  217. } else {
  218. ajaxArr = this.rowSelectionInfo.selectedRows.map(item => { return { id: item.id, promoSn: this.promoActiveSn, conditionValue: objInfo.conditionValue, resultValue: objInfo.resultValue } })
  219. }
  220. this.editProductVal(ajaxArr, 'all')
  221. },
  222. // 删除
  223. handleDel (row) {
  224. const _this = this
  225. _this.spinning = true
  226. delChooseProduct([{ id: row.id, promoSn: _this.promoActiveSn }]).then(res => {
  227. if (res.status == 200) {
  228. _this.$message.success(res.message)
  229. _this.$refs.table.refresh()
  230. _this.spinning = false
  231. } else {
  232. _this.spinning = false
  233. }
  234. })
  235. },
  236. // 清空表格
  237. clearTable () {
  238. this.spinning = true
  239. clearProductByPromoSn({ promoSn: this.promoActiveSn }).then(res => {
  240. this.spinning = false
  241. this.pageInit()
  242. })
  243. },
  244. getChooseProductNum () {
  245. return this.chooseProductNum
  246. },
  247. // 初始化
  248. pageInit () {
  249. this.$refs.table.refresh(true)
  250. }
  251. }
  252. }
  253. </script>