normalProductDetailModal.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <a-modal
  3. v-model="isShow"
  4. title="正价产品明细"
  5. centered
  6. class="view-normal-product-modal"
  7. :maskClosable="false"
  8. width="860px"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading..." v-if="buyGiftsInfo">
  13. <a-form-model
  14. id="normalProduct-modal-form"
  15. ref="ruleForm"
  16. :model="buyGiftsInfo"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="活动简称">
  20. {{ buyGiftsInfo.description||'--' }}
  21. </a-form-model-item>
  22. <a-form-model-item label="促销规则">
  23. <span>{{ buyGiftsInfo.accrualFlag==='1'?'数量叠加;':'' }}</span>
  24. <div v-if="buyGiftsInfo.giveRuleList&&buyGiftsInfo.giveRuleList.length">
  25. <div v-for="item in buyGiftsInfo.giveRuleList" :key="item.scopeLevel">{{ buyGiftsInfo.giveRuleList.length>1?item.scopeLevel+'、' :'' }}{{ item.regularSameFlag==='1'?'同款':'不同款' }}产品购买满 {{ item.regularUnit==='YUAN'?toThousands(item.regularValue):item.regularValue }} {{ item.regularUnit==='YUAN'?'元':'个' }}正价产品,送 {{ item.promotionValue }} 个促销产品</div>
  26. </div>
  27. <span v-else>--</span>
  28. </a-form-model-item>
  29. </a-form-model>
  30. <!-- 筛选条件 -->
  31. <div class="table-page-search-wrapper">
  32. <a-form
  33. layout="inline"
  34. id="normalProduct-modal-search"
  35. @keyup.enter.native="$refs.table.refresh(true)"
  36. >
  37. <a-row :gutter="15">
  38. <a-col :md="8" :sm="24">
  39. <a-form-item label="产品编码">
  40. <a-input id="normalProduct-productCode" v-model.trim="queryParam.productCode" placeholder="请输入产品编码" allowClear />
  41. </a-form-item>
  42. </a-col>
  43. <a-col :md="8" :sm="24">
  44. <a-form-item label="符合规则">
  45. <v-select
  46. v-model="queryParam.regularRuleResult"
  47. id="normalProduct-regularRuleResult"
  48. code="FLAG"
  49. placeholder="请选择是否符合规则"
  50. allowClear></v-select>
  51. </a-form-item>
  52. </a-col>
  53. <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
  54. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="normalProduct-search">查询</a-button>
  55. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="normalProduct-reset">重置</a-button>
  56. </a-col>
  57. </a-row>
  58. </a-form>
  59. </div>
  60. <s-table
  61. class="sTable"
  62. ref="table"
  63. size="small"
  64. :scroll="{ y: 200 }"
  65. :rowKey="(record) => record.id"
  66. :columns="columns"
  67. :data="loadData"
  68. :showPagination="false"
  69. :defaultLoadData="false"
  70. bordered>
  71. </s-table>
  72. </a-spin>
  73. </a-modal>
  74. </template>
  75. <script>
  76. import { commonMixin } from '@/utils/mixin'
  77. import { STable, VSelect } from '@/components'
  78. import { queryRegularProductShortfallList } from '@/api/salesNew'
  79. export default {
  80. name: 'TotalProductDetailModal',
  81. mixins: [commonMixin],
  82. components: { STable, VSelect },
  83. props: {
  84. openModal: { // 弹框显示状态
  85. type: Boolean,
  86. default: false
  87. },
  88. buyGiftsInfo: {
  89. type: Object,
  90. default: null
  91. }
  92. },
  93. data () {
  94. return {
  95. isShow: this.openModal, // 打开弹窗
  96. spinning: false, // 页面加载动画
  97. disabled: false, // 阻止查询重置按钮多次点击事件
  98. // label 布局设置
  99. formItemLayout: {
  100. labelCol: { span: 2 },
  101. wrapperCol: { span: 20 }
  102. },
  103. // 查询参数
  104. queryParam: {
  105. productCode: '',
  106. regularRuleResult: undefined
  107. },
  108. loadData: parameter => {
  109. this.disabled = true
  110. this.spinning = true
  111. this.queryParam.salesPromoSn = this.buyGiftsInfo.salesPromoSn
  112. return queryRegularProductShortfallList(Object.assign(parameter, this.queryParam)).then(res => {
  113. let data
  114. if (res.status == 200) {
  115. data = res.data
  116. for (var i = 0; i < data.length; i++) {
  117. data[i].no = i + 1
  118. }
  119. }
  120. this.disabled = false
  121. this.spinning = false
  122. return data
  123. })
  124. }
  125. }
  126. },
  127. computed: {
  128. columns () {
  129. const _this = this
  130. let newArr = null
  131. const arr = [
  132. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  133. { title: '产品编码', dataIndex: 'productCode', width: '16%', align: 'center', customRender: function (text) { return text || '--' } }
  134. ]
  135. // 买赠产品类型 ge按数量累计 yuan按金额累计
  136. if (_this.buyGiftsInfo.regularUnit === 'GE') {
  137. newArr = [
  138. { title: '销售数量', dataIndex: 'qty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  139. { title: '累计数量', dataIndex: 'borrowQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  140. { title: '合计数量', dataIndex: 'totalQty', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  141. { title: '差额', dataIndex: 'shortfall', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  142. ]
  143. } else {
  144. newArr = [
  145. { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  146. { title: '售价', dataIndex: 'promotionPrice', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  147. { title: '售价小计', dataIndex: 'promotionAmount', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  148. { title: '累计售价', dataIndex: 'borrowPrice', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  149. { title: '累计金额', dataIndex: 'borrowAmount', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  150. { title: '合计金额', dataIndex: 'totalAmount', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  151. { title: '差额', dataIndex: 'subtract', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  152. ]
  153. }
  154. return arr.concat(newArr)
  155. }
  156. },
  157. methods: {
  158. cancel () {
  159. this.isShow = false
  160. },
  161. // 重置
  162. resetSearchForm () {
  163. this.queryParam.productCode = ''
  164. this.queryParam.regularRuleResult = undefined
  165. this.$refs.table.refresh(true)
  166. }
  167. },
  168. watch: {
  169. // 父页面传过来的弹框状态
  170. openModal (newValue, oldValue) {
  171. this.isShow = newValue
  172. },
  173. isShow (newValue, oldValue) {
  174. if (!newValue) {
  175. this.$emit('close')
  176. }
  177. }
  178. }
  179. }
  180. </script>