choosePriceProductsModal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <template>
  2. <a-modal
  3. centered
  4. class="choosePosPriceProducts-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="80%">
  11. <div class="table-operator">
  12. <a-button v-if="!(ruleType=='PROMO_PROD') && !((ruleType=='ADD_PRICE_PURCH') && (goodsType == 'promo'))" id="choosePosPriceProducts-brand" type="primary" class="button-error" @click="choosePModal('BRAND')">选择产品品牌</a-button>
  13. <a-button v-if="!(ruleType=='PROMO_PROD') && !((ruleType=='ADD_PRICE_PURCH') && (goodsType == 'promo'))" id="choosePosPriceProducts-type" type="primary" class="button-info" @click="choosePModal('CATEGORY')">选择产品分类</a-button>
  14. <a-button id="choosePosPriceProducts-product" type="primary" class="button-success" @click="choosePModal('PRODUCT')">选择产品</a-button>
  15. </div>
  16. <!-- 参与产品 -->
  17. <div class="products-con">
  18. <!-- 标题栏 -->
  19. <div class="products-header">
  20. <div class="header-con">
  21. <div class="products-tit">
  22. 参与产品:
  23. <!-- <a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="openGuideModal=true">导入产品</a-button> -->
  24. </div>
  25. <div class="products-operation" v-if="goodsType=='normal'">
  26. <a-row :gutter="15">
  27. <a-col :span="9">
  28. <v-select
  29. code="ORDER_GOODS_UNIT"
  30. id="choosePosPriceProducts-orderGoodsUnit"
  31. v-model="orderGoodsUnit"
  32. allowClear
  33. placeholder="请选择"
  34. style="width: 100%;"
  35. ></v-select>
  36. </a-col>
  37. <a-col :span="10">
  38. <a-input-number
  39. v-if="orderGoodsUnit=='PROD_UNIT'"
  40. id="choosePosPriceProducts-orderGoodsQty"
  41. v-model="orderGoodsQty"
  42. :min="1"
  43. :max="999999"
  44. :precision="0"
  45. style="width: 85%;margin-right: 5px;"
  46. placeholder="请输入限制数量(1~999999)"
  47. allowClear />
  48. </a-col>
  49. <a-col :span="5">
  50. <a-button id="choosePosPriceProducts-import" type="primary" class="button-info" @click="handlerBulkCopy">批量复制</a-button>
  51. </a-col>
  52. </a-row>
  53. </div>
  54. </div>
  55. <!-- <p><a-icon type="exclamation-circle" style="color: #f90;margin-right: 5px;" />提示:导入时会清空下方已选内容,只展示导出成功的产品,请谨慎使用。</p> -->
  56. </div>
  57. <!-- 表格 -->
  58. <a-table
  59. class="sTable"
  60. ref="table"
  61. size="small"
  62. :rowKey="(record, index) => index"
  63. :columns="nowColumns"
  64. :dataSource="loadData"
  65. :scroll="{ x: goodsType == 'normal' ? 1380 : null, y: 500 }"
  66. :pagination="false"
  67. bordered>
  68. <!-- 序号 -->
  69. <template slot="no" slot-scope="text, record, index">
  70. {{ index+1 }}
  71. </template>
  72. <!-- 起订量限制 -->
  73. <template slot="orderGoodsUnit" slot-scope="text, record">
  74. <v-select
  75. code="ORDER_GOODS_UNIT"
  76. id="choosePosPriceProducts-orderGoodsUnit"
  77. v-model="record.orderGoodsUnit"
  78. allowClear
  79. placeholder="请选择"
  80. style="width: 40%;"
  81. ></v-select>
  82. <a-input-number
  83. v-if="record.orderGoodsUnit=='PROD_UNIT'"
  84. id="choosePosPriceProducts-orderGoodsQty"
  85. v-model="record.orderGoodsQty"
  86. :precision="0"
  87. :min="1"
  88. :max="999999"
  89. placeholder="请输入限制数量(1~999999)"
  90. style="width: 50%;margin-left: 5px;" />
  91. </template>
  92. <!-- 特惠单价 / 换购单价 -->
  93. <template slot="goodsPrice" slot-scope="text, record">
  94. <a-input-number
  95. id="choosePosPriceProducts-goodsPrice"
  96. v-model="record.goodsPrice"
  97. :precision="2"
  98. :min="0.1"
  99. :max="999999"
  100. placeholder="请输入限制数量(0.1~999999)"
  101. style="width: 100%;" />
  102. </template>
  103. <!-- 操作 -->
  104. <template slot="action" slot-scope="text, record, index">
  105. <a-button size="small" type="primary" class="button-error" @click="handleDel(record, index)" id="choosePosPriceProducts-del-btn">删除</a-button>
  106. </template>
  107. </a-table>
  108. <!-- 按钮 -->
  109. <div class="btn-con">
  110. <a-button
  111. type="primary"
  112. id="choosePosPriceProducts-submit"
  113. size="large"
  114. class="button-primary"
  115. @click="handleSave"
  116. style="padding: 0 60px;">保存</a-button>
  117. <a-button
  118. id="choosePosPriceProducts-cancel"
  119. size="large"
  120. class="button-cancel"
  121. @click="isShow=false"
  122. style="padding: 0 60px;margin-left: 15px;">取消</a-button>
  123. </div>
  124. </div>
  125. <!-- 选择产品品牌 -->
  126. <chooseBrandModal :openModal="openBrandModal" :chooseData="chooseBrand" @close="openBrandModal=false" @ok="handleBrandOk" />
  127. <!-- 选择产品分类 -->
  128. <chooseTypeModal :openModal="openTypeModal" :chooseData="chooseType" @close="openTypeModal=false" @ok="handleTypeOk" />
  129. <!-- 选择产品 -->
  130. <chooseProductsModal :openModal="openProductsModal" :chooseData="chooseProducts" @close="openProductsModal=false" @ok="handleProductsOk" />
  131. <!-- 导入产品 -->
  132. <importGuideModal :openModal="openGuideModal" @close="openGuideModal=false" />
  133. </a-modal>
  134. </template>
  135. <script>
  136. import ChooseProductsModal from '@/views/common/chooseProductsModal.vue'
  137. import ChooseBrandModal from '@/views/common/chooseBrandModal.vue'
  138. import ChooseTypeModal from '@/views/common/chooseTypeModal.vue'
  139. import ImportGuideModal from './importGuideModal.vue'
  140. import { VSelect } from '@/components'
  141. export default {
  142. name: 'ChoosePriceProductsModal',
  143. components: { VSelect, ChooseProductsModal, ChooseBrandModal, ChooseTypeModal, ImportGuideModal },
  144. props: {
  145. openModal: { // 弹框显示状态
  146. type: Boolean,
  147. default: false
  148. },
  149. ruleType: { // 买产品送产品...
  150. type: String,
  151. default: ''
  152. },
  153. goodsType: { // 正价/促销
  154. type: String,
  155. default: ''
  156. },
  157. nowData: {
  158. type: Array,
  159. default: () => {
  160. return []
  161. }
  162. }
  163. },
  164. data () {
  165. return {
  166. isShow: this.openModal, // 是否打开弹框
  167. orderGoodsUnit: undefined, // 起订量限制 批量
  168. orderGoodsQty: '', // 限制数量
  169. // 表头
  170. columns: [ // 正品
  171. { title: '序号', scopedSlots: { customRender: 'no' }, width: 80, align: 'center' },
  172. { title: '类型', dataIndex: 'goodsTypeName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  173. { title: '类型名称', dataIndex: 'goodsName', width: 220, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  174. { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  175. { title: '产品编码', dataIndex: 'goodsCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  176. { title: '起订量限制', scopedSlots: { customRender: 'orderGoodsUnit' }, width: 400, align: 'center' },
  177. { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
  178. ],
  179. promoColumns: [ // 促销品
  180. { title: '序号', scopedSlots: { customRender: 'no' }, width: 80, align: 'center' },
  181. { title: '类型', dataIndex: 'goodsTypeName', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
  182. { title: '类型名称', dataIndex: 'goodsName', width: 220, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  183. { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  184. { title: '产品编码', dataIndex: 'goodsCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  185. { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
  186. ],
  187. promoSpecialColumns: [ // 特价产品/加价促销品
  188. { title: '序号', scopedSlots: { customRender: 'no' }, width: 80, align: 'center' },
  189. { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  190. { title: '产品编码', dataIndex: 'goodsCode', width: 220, align: 'center', customRender: function (text) { return text || '--' } },
  191. { title: this.ruleType == 'PROMO_PROD' ? '特惠单价(¥)' : '换购单价(¥)', scopedSlots: { customRender: 'goodsPrice' }, width: 200, align: 'center' },
  192. { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center', fixed: 'right' }
  193. ],
  194. loadData: [],
  195. openBrandModal: false, // 选择产品品牌
  196. openTypeModal: false, // 选择产品分类
  197. openProductsModal: false, // 选择产品
  198. openGuideModal: false, // 导入产品引导
  199. chooseBrand: [], // 所选品牌
  200. chooseProducts: [], // 所选产品
  201. chooseType: [] // 所选分类
  202. }
  203. },
  204. computed: {
  205. nowColumns () {
  206. let columns = this.columns
  207. if ((this.ruleType == 'BUY_PROD_GIVE_PROD') || (this.ruleType == 'BUY_PROD_GIVE_MONEY')) { // 买产品送产品/买产品送采购额
  208. if (this.goodsType == 'normal') { // 正品
  209. columns = this.columns
  210. } else if (this.goodsType == 'promo') { // 促销
  211. columns = this.promoColumns
  212. }
  213. } else if (this.ruleType == 'PROMO_PROD') { // 特价产品
  214. if (this.goodsType == 'promo') { // 促销
  215. columns = this.promoSpecialColumns
  216. }
  217. } else if (this.ruleType == 'ADD_PRICE_PURCH') { // 加价换购
  218. if (this.goodsType == 'normal') { // 正品
  219. columns = this.columns
  220. } else if (this.goodsType == 'promo') { // 促销
  221. columns = this.promoSpecialColumns
  222. }
  223. }
  224. return columns
  225. }
  226. },
  227. methods: {
  228. // 选择产品
  229. choosePModal (type) {
  230. const productList = []
  231. const brandList = []
  232. const typeList = []
  233. this.loadData.map(item => {
  234. if (item.goodsType == 'PRODUCT') {
  235. productList.push(item)
  236. } else if (item.goodsType == 'BRAND') {
  237. brandList.push(item)
  238. } else if (item.goodsType == 'CATEGORY') {
  239. typeList.push(item)
  240. }
  241. })
  242. if (type == 'PRODUCT') { // 选择产品
  243. this.chooseProducts = productList
  244. this.openProductsModal = true
  245. } else if (type == 'BRAND') { // 选择品牌
  246. this.chooseBrand = brandList
  247. this.openBrandModal = true
  248. } else if (type == 'CATEGORY') { // 选择分类
  249. this.chooseType = typeList
  250. this.openTypeModal = true
  251. }
  252. },
  253. // 品牌
  254. handleBrandOk (obj) {
  255. this.chooseBrand = obj
  256. this.changeData()
  257. },
  258. // 产品
  259. handleProductsOk (obj) {
  260. this.chooseProducts = obj
  261. this.changeData()
  262. },
  263. // 分类
  264. handleTypeOk (obj) {
  265. this.chooseType = obj
  266. this.changeData()
  267. },
  268. // 保存
  269. handleSave () {
  270. const _this = this
  271. const arr = []
  272. if (this.goodsType == 'normal') { // 正品
  273. _this.loadData.map((item, index) => {
  274. if ((item.orderGoodsUnit == 'PROD_UNIT') && (!item.orderGoodsQty)) {
  275. arr.push(index)
  276. }
  277. })
  278. if (arr.length > 0) {
  279. this.$message.warning('请完善起订量限制后再保存!')
  280. return
  281. }
  282. } else if (this.goodsType == 'promo') { // 促销
  283. let num = 0
  284. if ((this.ruleType == 'PROMO_PROD') || (this.ruleType == 'ADD_PRICE_PURCH')) { // 特价产品 / 加价换购
  285. _this.loadData.map((item, index) => {
  286. if (!item.goodsPrice) {
  287. num++
  288. }
  289. })
  290. if (num > 0) {
  291. this.$message.warning('存在未填写的内容,请填写完整后再提交!')
  292. return
  293. }
  294. }
  295. }
  296. this.$emit('ok', this.loadData)
  297. this.isShow = false
  298. },
  299. changeData () {
  300. const _this = this
  301. _this.loadData = []
  302. if (_this.chooseBrand.length > 0) {
  303. _this.chooseBrand.map(item => {
  304. const obj = {
  305. goodsType: 'BRAND',
  306. goodsTypeName: '品牌',
  307. goodsName: item.brandName,
  308. goodsSn: item.brandSn,
  309. orderGoodsUnit: undefined,
  310. orderGoodsQty: ''
  311. }
  312. delete item.id
  313. _this.loadData.push(Object.assign(obj, item))
  314. })
  315. }
  316. if (_this.chooseType.length > 0) {
  317. _this.chooseType.map(item => {
  318. const obj = {
  319. goodsType: 'CATEGORY',
  320. goodsTypeName: '分类',
  321. goodsName: item.productTypeName,
  322. goodsSn: item.productTypeSn,
  323. orderGoodsUnit: undefined,
  324. orderGoodsQty: ''
  325. }
  326. delete item.id
  327. _this.loadData.push(Object.assign(obj, item))
  328. })
  329. }
  330. if (_this.chooseProducts.length > 0) {
  331. _this.chooseProducts.map(item => {
  332. const obj = {
  333. goodsType: 'PRODUCT',
  334. goodsTypeName: '产品',
  335. goodsName: item.name,
  336. name: item.name,
  337. goodsCode: item.code,
  338. goodsSn: item.productSn,
  339. orderGoodsUnit: undefined,
  340. orderGoodsQty: ''
  341. }
  342. delete item.id
  343. _this.loadData.push(Object.assign(obj, item))
  344. })
  345. }
  346. },
  347. // 批量复制
  348. handlerBulkCopy () {
  349. const _this = this
  350. if ((!this.orderGoodsUnit) || ((this.orderGoodsUnit == 'PROD_UNIT') && !this.orderGoodsQty)) {
  351. this.$message.warning('请选择需要批量复制的选项值后再操作!')
  352. return
  353. }
  354. if (this.loadData.length == 0) {
  355. this.$message.warning('请先添加产品后再批量复制起订限制规则!')
  356. return
  357. }
  358. this.$confirm({
  359. title: '提示',
  360. content: '批量复制会覆盖原单独设置的规则,确定要批量复制吗?',
  361. centered: true,
  362. onOk () {
  363. _this.loadData.map(item => {
  364. item.orderGoodsUnit = _this.orderGoodsUnit
  365. item.orderGoodsQty = _this.orderGoodsQty
  366. })
  367. }
  368. })
  369. },
  370. // 删除
  371. handleDel (record, ind) {
  372. this.loadData.splice(ind, 1)
  373. }
  374. },
  375. watch: {
  376. // 父页面传过来的弹框状态
  377. openModal (newValue, oldValue) {
  378. this.isShow = newValue
  379. },
  380. // 重定义的弹框状态
  381. isShow (newValue, oldValue) {
  382. if (!newValue) {
  383. this.chooseBrand = []
  384. this.chooseProducts = []
  385. this.chooseType = []
  386. this.orderGoodsUnit = undefined // 起订量限制 批量
  387. this.orderGoodsQty = '' // 限制数量
  388. this.$emit('close')
  389. }
  390. },
  391. nowData: {
  392. handler (newValue, oldValue) {
  393. if (this.isShow && newValue) {
  394. this.loadData = newValue
  395. }
  396. },
  397. deep: true
  398. }
  399. }
  400. }
  401. </script>
  402. <style lang="less" scoped>
  403. .choosePosPriceProducts-modal{
  404. // 参与产品
  405. .products-con{
  406. .products-header{
  407. padding: 10px 15px;
  408. color: rgba(0,0,0,.85);
  409. background-color: #fafafa;
  410. border-radius: 6px;
  411. margin: 10px 0;
  412. .header-con{
  413. display: flex;
  414. justify-content: space-between;
  415. align-items: center;
  416. .products-operation{
  417. width: 50%;
  418. }
  419. }
  420. p{
  421. margin: 8px 0 0;
  422. color: #909399;
  423. font-size: 12px;
  424. }
  425. }
  426. .btn-con{
  427. text-align: center;
  428. margin: 30px 0 20px;
  429. .button-cancel{
  430. font-size: 12px;
  431. }
  432. }
  433. }
  434. }
  435. </style>