normalProductDetailModal.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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...">
  13. <a-form-model
  14. id="normalProduct-modal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="活动简称">
  20. {{ form.description||'--' }}
  21. </a-form-model-item>
  22. <a-form-model-item label="促销规则">
  23. <span>{{ form.accrualFlag==='1'?'数量叠加;':'' }}</span>
  24. <div v-if="form.giveRuleList&&form.giveRuleList.length>0">
  25. <span v-for="item in form.giveRuleList" :key="item.scopeLevel">{{ form.giveRuleList.length>1?item.scopeLevel+'、' :'' }}{{ item.regularSameFlag==='1'?'同款':'不同款' }}产品购买满 {{ item.regularUnit==='YUAN'?toThousands(item.regularValue):item.regularValue }} {{ item.regularUnit==='YUAN'?'元':'个' }}正价产品,送 {{ item.promotionValue }} 个促销产品</span>
  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.flagVal"
  47. id="normalProduct-flagVal"
  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. :pageSize="10"
  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 { accumulatedProductsList } from '@/api/salesDetailNew'
  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. },
  89. data () {
  90. const _this = this
  91. return {
  92. isShow: this.openModal, // 打开弹窗
  93. spinning: false, // 页面加载动画
  94. disabled: false, // 阻止查询重置按钮多次点击事件
  95. // label 布局设置
  96. formItemLayout: {
  97. labelCol: { span: 2 },
  98. wrapperCol: { span: 20 }
  99. },
  100. // 查询参数
  101. queryParam: {
  102. productCode: '',
  103. flagVal: undefined
  104. },
  105. form: {
  106. description: undefined,
  107. giveRuleList: []
  108. },
  109. loadData: parameter => {
  110. this.disabled = true
  111. this.spinning = true
  112. return accumulatedProductsList(Object.assign(parameter, this.queryParam)).then(res => {
  113. let data
  114. if (res.status == 200) {
  115. data = res.data
  116. const no = (data.pageNo - 1) * data.pageSize
  117. for (var i = 0; i < data.list.length; i++) {
  118. data.list[i].no = no + i + 1
  119. }
  120. }
  121. this.disabled = false
  122. this.spinning = false
  123. return data
  124. })
  125. },
  126. columns: [
  127. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  128. { title: '产品编码', dataIndex: 'productCode', width: '16%', align: 'center', customRender: function (text) { return text || '--' } },
  129. { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  130. { title: '售价', dataIndex: 'price', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  131. { title: '售价小计', dataIndex: 'totalPrice', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  132. { title: '累计售价', dataIndex: 'qty', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  133. { title: '累计金额', dataIndex: 'totalAmount', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  134. { title: '合计金额', dataIndex: 'buyerName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  135. { title: '差额', dataIndex: 'warehouseName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  136. ]
  137. }
  138. },
  139. methods: {
  140. cancel () {
  141. this.isShow = false
  142. },
  143. // 重置
  144. resetSearchForm () {
  145. this.queryParam.productCode = ''
  146. this.queryParam.flagVal = undefined
  147. this.$refs.table.refresh(true)
  148. }
  149. },
  150. watch: {
  151. // 父页面传过来的弹框状态
  152. openModal (newValue, oldValue) {
  153. this.isShow = newValue
  154. },
  155. isShow (newValue, oldValue) {
  156. if (!newValue) {
  157. this.$emit('close')
  158. }
  159. }
  160. }
  161. }
  162. </script>