totalProductDetailModal.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <a-modal
  3. v-model="opened"
  4. title="查看累计产品(正价产品)"
  5. centered
  6. class="view-total-product-modal"
  7. :maskClosable="false"
  8. width="860px"
  9. :footer="null"
  10. @cancel="cancel"
  11. >
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <!-- 筛选条件 -->
  14. <div class="table-page-search-wrapper">
  15. <a-form layout="inline" id="view-total-product-form" @keyup.enter.native="$refs.table.refresh(true)">
  16. <a-row :gutter="15">
  17. <a-col :md="6" :sm="24">
  18. <a-form-item label="产品编码">
  19. <a-input id="totalProduct-productCode" v-model.trim="queryParam.productCode" placeholder="请输入产品编码" allowClear />
  20. </a-form-item>
  21. </a-col>
  22. <a-col :md="6" :sm="24">
  23. <a-form-item label="销售单号">
  24. <a-input id="totalProduct-salesBillNo" v-model.trim="queryParam.salesBillNo" allowClear placeholder="请输入销售单号"/>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :md="6" :sm="24">
  28. <a-form-item label="客户名称">
  29. <a-input
  30. id="totalProduct-targetName"
  31. v-model.trim="queryParam.targetName"
  32. allowClear
  33. placeholder="请输入客户名称" />
  34. </a-form-item>
  35. </a-col>
  36. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  37. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="viewTotalProduct-search">查询</a-button>
  38. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="viewTotalProduct-reset">重置</a-button>
  39. </a-col>
  40. </a-row>
  41. </a-form>
  42. </div>
  43. <div class="totalProduct-delMore-btn">
  44. <a-button
  45. type="primary"
  46. id="viewTotalProduct-allbtn"
  47. style="margin-right:10px;"
  48. @click="handleDel()"
  49. > 批量删除</a-button>
  50. <span>已选{{ selectTotalInfo.selectNum }}项,数量合计{{ selectTotalInfo.selProductNum }}个,售价合计{{ selectTotalInfo.selTotalPrice }}元</span>
  51. </div>
  52. <!-- 已选累计产品列表 -->
  53. <s-table
  54. class="sTable"
  55. ref="table"
  56. size="small"
  57. :scroll="{ y: 200 }"
  58. :rowKey="(record) => record.id"
  59. :columns="columns"
  60. :data="loadData"
  61. :row-selection="{ columnWidth: 40 }"
  62. @rowSelection="rowSelectionFun"
  63. :pageSize="10"
  64. :defaultLoadData="false"
  65. bordered>
  66. <!-- 操作 -->
  67. <template slot="action" slot-scope="text, record">
  68. <a-button
  69. size="small"
  70. type="link"
  71. :loading="delLoading"
  72. class="button-error"
  73. :id="'viewTotalProduct-del-'+record.id"
  74. @click="handleDel(record)"
  75. >删除</a-button>
  76. </template>
  77. </s-table>
  78. </a-spin>
  79. </a-modal>
  80. </template>
  81. <script>
  82. import { commonMixin } from '@/utils/mixin'
  83. import { STable, VSelect } from '@/components'
  84. import { accumulatedProductsList, deleteBatchBorrow } from '@/api/salesDetailNew'
  85. export default {
  86. name: 'TotalProductDetailModal',
  87. mixins: [commonMixin],
  88. components: { STable, VSelect },
  89. props: {
  90. show: [Boolean]
  91. },
  92. data () {
  93. const _this = this
  94. return {
  95. opened: _this.show, // 是否打开累计产品弹窗
  96. spinning: false, // 页面加载动画
  97. disabled: false, // 阻止查询重置按钮多次点击事件
  98. // 查询参数
  99. queryParam: {
  100. productCode: '',
  101. salesBillNo: '',
  102. targetName: undefined
  103. },
  104. rowSelectionInfo: null,
  105. loadData: parameter => {
  106. this.disabled = true
  107. this.spinning = true
  108. return accumulatedProductsList(Object.assign(parameter, this.queryParam)).then(res => {
  109. let data
  110. if (res.status == 200) {
  111. data = res.data
  112. const no = (data.pageNo - 1) * data.pageSize
  113. for (var i = 0; i < data.list.length; i++) {
  114. data.list[i].no = no + i + 1
  115. }
  116. }
  117. this.disabled = false
  118. this.spinning = false
  119. return data
  120. })
  121. },
  122. columns: [
  123. { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
  124. { title: '销售单号', dataIndex: 'salesBillNo', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  125. { title: '客户名称', dataIndex: 'buyerName', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  126. { title: '产品编码', dataIndex: 'productCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  127. { title: '产品名称', dataIndex: 'productName', width: '12%', align: 'center', ccustomRender: function (text) { return text || '--' }, ellipsis: true },
  128. { title: '售价', dataIndex: 'qty', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  129. { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '10%', align: 'center', ccustomRender: function (text) { return text || '--' } },
  130. { title: '销售数量', dataIndex: 'buyerName1', width: '10%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  131. { title: '销售小计', dataIndex: 'warehouseName', width: '10%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  132. { title: '操作', scopedSlots: { customRender: 'action' }, width: '6%', align: 'center' }
  133. ]
  134. }
  135. },
  136. computed: {
  137. // 计算所选条数
  138. selectTotalInfo () {
  139. const selectNum = this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length || 0
  140. let selProductNum = 0
  141. let selTotalPrice = 0
  142. if (this.rowSelectionInfo && this.rowSelectionInfo.selectedRows) {
  143. this.rowSelectionInfo.selectedRows.forEach(item => {
  144. selProductNum += item.num
  145. selTotalPrice += item.price
  146. })
  147. }
  148. return { selectNum, selProductNum, selTotalPrice }
  149. }
  150. },
  151. methods: {
  152. cancel () {
  153. this.opened = false
  154. },
  155. // 表格选中项
  156. rowSelectionFun (obj) {
  157. this.rowSelectionInfo = obj || null
  158. },
  159. // 页面数据初始化
  160. pageInit (objInfo) {
  161. this.parameter = { ...objInfo, ...this.parameter }
  162. this.$nextTick(() => {
  163. this.$refs.table.refresh(true)
  164. })
  165. },
  166. // 重置
  167. resetSearchForm () {
  168. this.queryParam.productCode = ''
  169. this.queryParam.salesBillNo = ''
  170. this.queryParam.targetName = undefined
  171. this.$refs.table.refresh(true)
  172. this.$refs.table.clearSelected() // 清空表格选中项
  173. },
  174. // 删除 批量删除
  175. handleDel (row) {
  176. const ajaxData = {
  177. salesBillSn: this.parameter.salesBillSn,
  178. salesBillDetailSnList: []
  179. }
  180. if (row) {
  181. ajaxData.salesBillDetailSnList = [row.salesPromoSn]
  182. } else {
  183. if (!(this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys && this.rowSelectionInfo.selectedRowKeys.length)) {
  184. this.$message.warning('请在列表勾选后再进行批量操作!')
  185. return
  186. }
  187. ajaxData.salesBillDetailSnList = this.rowSelectionInfo.selectedRowKeys
  188. }
  189. this.confirmDel(ajaxData)
  190. },
  191. // 确定删除
  192. confirmDel (ajaxData) {
  193. this.spinning = true
  194. deleteBatchBorrow(ajaxData).then(res => {
  195. if (res.status == 200) {
  196. this.$message.success('删除成功')
  197. this.$refs.table.refresh(true)
  198. }
  199. this.spinning = false
  200. })
  201. }
  202. },
  203. watch: {
  204. show (newValue, oldValue) {
  205. this.opened = newValue
  206. if (!newValue) {
  207. this.$emit('cancel')
  208. }
  209. }
  210. }
  211. }
  212. </script>
  213. <style lang="less" scope>
  214. .view-total-product-modal{
  215. .totalProduct-delMore-btn {
  216. display: flex;
  217. align-items: center;
  218. margin-bottom:10px;
  219. }
  220. }
  221. </style>