chooseProductsModal.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <template>
  2. <a-drawer
  3. :zIndex="zIndex"
  4. title="选择产品"
  5. placement="right"
  6. :visible="isShow"
  7. width="80%"
  8. :get-container="false"
  9. :wrap-style="{ position: 'absolute' }"
  10. :headerStyle="{ padding: '10px' }"
  11. @close="onClose"
  12. wrapClassName="chooseProducts-modal">
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="products-con">
  15. <!-- 搜索条件 -->
  16. <div class="table-page-search-wrapper">
  17. <a-form-model
  18. ref="ruleForm"
  19. class="form-model-con"
  20. layout="inline"
  21. :model="queryParam"
  22. :label-col="formItemLayout.labelCol"
  23. :wrapper-col="formItemLayout.wrapperCol">
  24. <a-row :gutter="15">
  25. <a-col :md="8" :sm="24">
  26. <a-form-model-item label="产品编码">
  27. <a-input id="chooseProducts-code" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
  28. </a-form-model-item>
  29. </a-col>
  30. <a-col :md="8" :sm="24">
  31. <a-form-model-item label="原厂编码">
  32. <a-input id="chooseProducts-code" v-model.trim="queryParam.origCode" allowClear placeholder="请输入原厂编码"/>
  33. </a-form-model-item>
  34. </a-col>
  35. <a-col :md="8" :sm="24">
  36. <a-form-model-item label="产品名称">
  37. <a-input id="chooseProducts-name" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
  38. </a-form-model-item>
  39. </a-col>
  40. <a-col :md="8" :sm="24">
  41. <a-form-model-item label="产品分类">
  42. <productTypeAll placeholder="请选择产品分类" @change="changeProductType" v-model="queryParam.productType" id="chooseProducts-productType"></productTypeAll>
  43. </a-form-model-item>
  44. </a-col>
  45. <a-col :md="8" :sm="24">
  46. <a-form-model-item label="产品品牌">
  47. <ProductBrand id="chooseProducts-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
  48. </a-form-model-item>
  49. </a-col>
  50. <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
  51. <a-button type="primary" @click="$refs.table.refresh()" :disabled="disabled" id="chooseProducts-refresh">查询</a-button>
  52. <a-button style="margin-left: 5px" @click="resetData" :disabled="disabled" id="chooseProducts-reset">重置</a-button>
  53. </a-col>
  54. </a-row>
  55. </a-form-model>
  56. </div>
  57. <div style="margin-bottom: 10px">
  58. <a-button type="primary" ghost :loading="loading" @click="handleSave">批量添加</a-button>
  59. <span style="margin-left: 5px">
  60. <template v-if="selectCount"> {{ `已选 ${selectCount} 项` }} </template>
  61. </span>
  62. </div>
  63. <!-- 列表 -->
  64. <s-table
  65. class="sTable"
  66. ref="table"
  67. size="small"
  68. :rowKey="(record) => record.productSn"
  69. rowKeyName="productSn"
  70. :row-selection="{ columnWidth: 40, getCheckboxProps: record => ({ props: { disabled: !record.terminalPrice } })}"
  71. @rowSelection="rowSelectionFun"
  72. :columns="columns"
  73. :pagination="{pageSizeOptions: ['20','50','100','200','500']}"
  74. :data="loadData"
  75. :defaultLoadData="false"
  76. style="max-height:700px;"
  77. :scroll="{ y: 550 }"
  78. bordered>
  79. <!-- 产品分类 -->
  80. <template slot="productType" slot-scope="text, record">
  81. <span v-if="record.productTypeName2 || record.productTypeName3">{{ record.productTypeName2 }} {{ record.productTypeName3 ? '>' : '' }} {{ record.productTypeName3 }}</span>
  82. <span v-else>--</span>
  83. </template>
  84. <!-- 包装数 -->
  85. <template slot="productQty" slot-scope="text, record">
  86. <span v-if="record.packQty">
  87. {{ record.packQty }}{{ record.unit }}/{{ record.packQtyUnit?record.packQtyUnit:'--' }}
  88. </span>
  89. <span v-else>--</span>
  90. </template>
  91. </s-table>
  92. </div>
  93. </a-spin>
  94. </a-drawer>
  95. </template>
  96. <script>
  97. import { commonMixin } from '@/utils/mixin'
  98. import { STable } from '@/components'
  99. import { queryWaitingProductPage } from '@/api/promoActive'
  100. import ProductBrand from '@/views/common/productBrand.js'
  101. import productTypeAll from '@/views/common/productTypeAll.js'
  102. export default {
  103. name: 'ChooseProductsModal',
  104. components: { STable, ProductBrand, productTypeAll },
  105. mixins: [commonMixin],
  106. props: {
  107. openModal: { // 弹框显示状态
  108. type: Boolean,
  109. default: false
  110. },
  111. chooseData: {// 隐藏选择的产品
  112. type: Array,
  113. default: () => {
  114. return []
  115. }
  116. },
  117. chooseType: {// 选中的分类
  118. type: Array,
  119. default: () => {
  120. return []
  121. }
  122. },
  123. chooseProduct: {// 当前行选中的数据
  124. type: Array,
  125. default: () => {
  126. return []
  127. }
  128. },
  129. itemSn: {
  130. type: String,
  131. default: ''
  132. },
  133. zIndex: { // 层级
  134. type: [String, Number],
  135. default: 1000
  136. }
  137. },
  138. data () {
  139. const _this = this
  140. return {
  141. spinning: false,
  142. isShow: this.openModal, // 是否打开弹框
  143. formItemLayout: {
  144. labelCol: { span: 4 },
  145. wrapperCol: { span: 20 }
  146. },
  147. queryParam: { // 查询条件
  148. productName: '', // 产品名称
  149. productCode: '', // 产品编码
  150. origCode: '', // 原厂编码
  151. productBrandSn: undefined, // 产品品牌
  152. productType: [],
  153. productTypeSn1: '', // 产品一级分类
  154. productTypeSn2: '', // 产品二级分类
  155. productTypeSn3: '', // 产品三级分类
  156. hideProductSnList: [],
  157. productTypeSnList: []
  158. },
  159. chooseDataList: [],
  160. disabled: false, // 查询、重置按钮是否可操作
  161. loading: false, // 表格加载中
  162. columns: [
  163. { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  164. { title: '产品编码', dataIndex: 'code', align: 'center', width: '12%' },
  165. { title: '产品名称', dataIndex: 'name', align: 'left', width: '18%', ellipsis: true, customRender: function (text) { return text || '--' } },
  166. { title: '原厂编码', dataIndex: 'origCode', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } },
  167. { title: '终端价', dataIndex: 'terminalPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  168. // { title: '市级价', dataIndex: 'cityPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  169. // { title: '特约价', dataIndex: 'specialPrice', width: '6%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  170. { title: '品牌', dataIndex: 'productBrandName', align: 'center', width: '8%', ellipsis: true, customRender: function (text) { return text || '--' } },
  171. { title: '产品分类', scopedSlots: { customRender: 'productType' }, align: 'center' },
  172. { title: '包装数', scopedSlots: { customRender: 'productQty' }, width: '6%', align: 'center' },
  173. { title: '单位', dataIndex: 'unit', align: 'center', width: '6%', ellipsis: true, customRender: function (text) { return text || '--' } }
  174. ],
  175. // 加载数据方法 必须为 Promise 对象
  176. loadData: parameter => {
  177. this.disabled = true
  178. this.spinning = true
  179. const params = Object.assign(parameter, this.queryParam)
  180. params.hideProductSnList = this.chooseData
  181. params.productTypeSnList = this.chooseType
  182. params.promoActiveSn = this.itemSn
  183. return queryWaitingProductPage(params).then(res => {
  184. let data
  185. if (res.status == 200) {
  186. data = res.data
  187. const no = (data.pageNo - 1) * data.pageSize
  188. for (var i = 0; i < data.list.length; i++) {
  189. data.list[i].no = no + i + 1
  190. }
  191. this.disabled = false
  192. const _this = this
  193. // 选中回显
  194. if (_this.chooseProduct && _this.chooseProduct.length > 0) {
  195. const selectedRows = []
  196. let selectedRowKeys = []
  197. data.list.forEach(item => {
  198. const flag = _this.chooseProduct.includes(item.productSn)
  199. if (flag) {
  200. selectedRows.push(item)
  201. }
  202. })
  203. selectedRowKeys = _this.chooseProduct
  204. _this.$nextTick(() => { // 页面渲染完成后的回调
  205. _this.$refs.table.setTableSelected(selectedRowKeys, selectedRows) // 设置表格选中项
  206. })
  207. }
  208. }
  209. _this.spinning = false
  210. return data
  211. })
  212. },
  213. rowSelectionInfo: null
  214. }
  215. },
  216. computed: {
  217. selectCount () {
  218. return this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length
  219. }
  220. },
  221. methods: {
  222. // 表格选中项
  223. rowSelectionFun (obj) {
  224. this.rowSelectionInfo = obj || null
  225. },
  226. // 重置数据
  227. resetData () {
  228. this.queryParam.productName = ''
  229. this.queryParam.productCode = ''
  230. this.queryParam.origCode = ''
  231. this.queryParam.productBrandSn = undefined
  232. this.queryParam.productTypeSn1 = ''
  233. this.queryParam.productTypeSn2 = ''
  234. this.queryParam.productTypeSn3 = ''
  235. this.queryParam.productType = []
  236. this.$nextTick(() => {
  237. this.$refs.table.refresh(true)
  238. })
  239. },
  240. // 清空选项
  241. resetSearchForm () {
  242. this.$refs.table.clearSelected()
  243. },
  244. // 批量添加
  245. handleSave () {
  246. if (!this.rowSelectionInfo || (this.rowSelectionInfo && this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  247. this.$message.warning('请在列表勾选后再进行操作!')
  248. return
  249. }
  250. const resultList = JSON.parse(JSON.stringify(this.rowSelectionInfo && this.rowSelectionInfo.selectedRows))
  251. this.$emit('ok', resultList)
  252. this.isShow = false
  253. },
  254. // 关闭弹框
  255. onClose () {
  256. this.isShow = false
  257. this.$emit('close')
  258. },
  259. // 产品分类 change
  260. changeProductType (val, opt) {
  261. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  262. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  263. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  264. }
  265. },
  266. watch: {
  267. // 父页面传过来的弹框状态
  268. openModal (newValue, oldValue) {
  269. this.isShow = newValue
  270. },
  271. // 重定义的弹框状态
  272. isShow (newValue, oldValue) {
  273. if (!newValue) {
  274. this.resetSearchForm()
  275. this.rowSelectionInfo = null
  276. this.$emit('close')
  277. } else {
  278. const _this = this
  279. _this.resetData()
  280. }
  281. }
  282. }
  283. }
  284. </script>
  285. <style lang="less" scoped>
  286. .chooseProducts-modal{
  287. .products-con{
  288. .btn-con{
  289. text-align: center;
  290. margin: 30px 0 20px;
  291. .button-cancel{
  292. font-size: 12px;
  293. }
  294. }
  295. }
  296. }
  297. </style>