editRuleModal.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. <template>
  2. <a-modal
  3. centered
  4. class="promotionRules-rule-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="itemSn ? '编辑':'新增'"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="960">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="promotionRules-rule-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="促销类型" prop="promoRuleType" :extra="extra">
  21. <v-select
  22. code="PROMO_RULE_TYPE"
  23. id="promotionRules-rule-promoRuleType"
  24. v-model="form.promoRuleType"
  25. allowClear
  26. @change="changeType"
  27. placeholder="请选择促销类型"
  28. ></v-select>
  29. </a-form-model-item>
  30. <!-- 买产品送产品 -->
  31. <div v-if="form.promoRuleType == 'BUY_PROD_GIVE_PROD'">
  32. <a-form-model-item label="促销设置" required>
  33. 购买满
  34. <a-form-model-item prop="orderGoodsQty" :label-col="{span: 0}" style="display: inline-block;">
  35. <a-input-number
  36. id="promotionRules-rule-orderGoodsQty"
  37. v-model="form.orderGoodsQty"
  38. :precision="0"
  39. :min="1"
  40. :max="999999"
  41. placeholder="请输入数量"
  42. style="width: 100%;" />
  43. </a-form-model-item>
  44. 个正价产品,送
  45. <a-form-model-item prop="promoQty" :label-col="{span: 0}" style="display: inline-block;">
  46. <a-input-number
  47. id="promotionRules-rule-promoQty"
  48. v-model="form.promoQty"
  49. :precision="0"
  50. :min="1"
  51. :max="999999"
  52. placeholder="请输入数量"
  53. style="width: 100%;" />
  54. </a-form-model-item>
  55. 个促销品
  56. </a-form-model-item>
  57. <a-form-model-item label="正价产品" prop="normalGoodsList">
  58. <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
  59. </a-form-model-item>
  60. <a-form-model-item label="促销品" prop="promoGoodsList">
  61. <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
  62. </a-form-model-item>
  63. </div>
  64. <!-- 买产品送采购额 -->
  65. <div v-if="form.promoRuleType == 'BUY_PROD_GIVE_MONEY'">
  66. <a-form-model-item label="促销设置" prop="promoType">
  67. <a-radio-group v-model="form.promoType" @change="radioChange">
  68. <a-radio value="promo_amount" style="margin-bottom: 10px;">
  69. 购买满
  70. <a-form-model-item prop="orderAmounts" :label-col="{span: 0}" style="display: inline-block;">
  71. <a-input-number
  72. id="promotionRules-rule-orderAmounts"
  73. v-model="form.orderAmounts"
  74. :precision="2"
  75. :min="0.1"
  76. :max="999999"
  77. placeholder="请输入金额"
  78. style="width: 100%;" />
  79. </a-form-model-item>
  80. 元正价产品,送
  81. <a-form-model-item prop="promoAmount" :label-col="{span: 0}" style="display: inline-block;">
  82. <a-input-number
  83. id="promotionRules-rule-promoAmount"
  84. v-model="form.promoAmount"
  85. :precision="2"
  86. :min="0.1"
  87. :max="999999"
  88. placeholder="请输入金额"
  89. style="width: 100%;" />
  90. </a-form-model-item>
  91. 元采购额可用于购买促销品
  92. </a-radio>
  93. <a-radio value="promo_amount_per">
  94. 购买满
  95. <a-form-model-item prop="orderAmount" :label-col="{span: 0}" style="display: inline-block;">
  96. <a-input-number
  97. id="promotionRules-rule-orderAmount"
  98. v-model="form.orderAmount"
  99. :precision="2"
  100. :min="0.1"
  101. :max="999999"
  102. placeholder="请输入金额"
  103. style="width: 100%;" />
  104. </a-form-model-item>
  105. 元正价产品可以返正价产品采购额的
  106. <a-form-model-item prop="promoAmountPer" :label-col="{span: 0}" style="display: inline-block;">
  107. <a-input-number
  108. id="promotionRules-rule-promoAmountPer"
  109. v-model="form.promoAmountPer"
  110. :precision="2"
  111. :min="0.1"
  112. :max="100"
  113. placeholder="请输入比例"
  114. style="width: 100%;" />
  115. </a-form-model-item>
  116. %用于购买促销品
  117. </a-radio>
  118. </a-radio-group>
  119. </a-form-model-item>
  120. <a-form-model-item label="正价产品" prop="normalGoodsList">
  121. <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
  122. </a-form-model-item>
  123. <a-form-model-item label="促销品" prop="promoGoodsList">
  124. <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
  125. </a-form-model-item>
  126. </div>
  127. <!-- 特价产品销售 -->
  128. <div v-if="form.promoRuleType == 'PROMO_PROD'">
  129. <a-form-model-item label="特价产品" prop="promoGoodsList">
  130. <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
  131. </a-form-model-item>
  132. </div>
  133. <!-- 加价换购 -->
  134. <div v-if="form.promoRuleType == 'ADD_PRICE_PURCH'">
  135. <a-form-model-item label="加价规则" prop="orderGoodsQty">
  136. 购买满
  137. <a-input-number
  138. id="promotionRules-rule-orderGoodsQty"
  139. v-model="form.orderGoodsQty"
  140. :precision="0"
  141. :min="1"
  142. :max="999999"
  143. placeholder="请输入数量"
  144. style="width: 30%;" />
  145. 个正价产品,可以以换购价购买任意1个换购产品
  146. </a-form-model-item>
  147. <a-form-model-item label="正价产品" prop="normalGoodsList">
  148. <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
  149. </a-form-model-item>
  150. <a-form-model-item label="换购产品" prop="promoGoodsList">
  151. <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
  152. </a-form-model-item>
  153. </div>
  154. </a-form-model>
  155. <div class="btn-cont">
  156. <a-button type="primary" id="promotionRules-rule-modal-save" @click="handleSave">保存</a-button>
  157. <a-button id="promotionRules-rule-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  158. </div>
  159. </a-spin>
  160. <!-- 选择产品 -->
  161. <choose-price-products-modal
  162. :openModal="openPriceProductsModal"
  163. :nowData="nowData"
  164. :ruleType="form.promoRuleType"
  165. :goodsType="nowChooseGoodsType"
  166. @ok="handleOk"
  167. @close="closePriceProducts" />
  168. </a-modal>
  169. </template>
  170. <script>
  171. import { commonMixin } from '@/utils/mixin'
  172. import { VSelect } from '@/components'
  173. import ChoosePriceProductsModal from './choosePriceProductsModal.vue'
  174. import { promoRuleSave, promoRuleDetailD } from '@/api/promoRule'
  175. export default {
  176. name: 'EditRuleModalModal',
  177. mixins: [commonMixin],
  178. components: { VSelect, ChoosePriceProductsModal },
  179. props: {
  180. openModal: {
  181. // 弹框显示状态
  182. type: Boolean,
  183. default: false
  184. },
  185. itemSn: {
  186. type: String || Number,
  187. default: ''
  188. }
  189. },
  190. data () {
  191. return {
  192. isShow: this.openModal, // 是否打开弹框
  193. formItemLayout: {
  194. labelCol: { span: 3 },
  195. wrapperCol: { span: 21 }
  196. },
  197. form: {
  198. promoRuleType: undefined, // 促销类型
  199. orderGoodsQty: '', // 正价品数量
  200. promoQty: '', // 促销品数量
  201. promoType: undefined, // 促销设置(买产品送采购额(定额)、买产品送采购额(定比例))
  202. orderAmounts: '', // 正价品金额 金额
  203. orderAmount: '', // 正价品金额 百分比
  204. promoAmount: '', // 采购额
  205. promoAmountPer: '', // 百分比
  206. normalGoodsList: '', // 已选正价品
  207. promoGoodsList: '' // 已选促销品
  208. },
  209. rules: {
  210. promoRuleType: [{ required: true, message: '请选择促销类型', trigger: 'change' }],
  211. orderGoodsQty: [{ required: true, message: '请输入正价品数量', trigger: 'blur' }],
  212. promoQty: [{ required: true, message: '请输入促销品数量', trigger: 'blur' }],
  213. promoType: [{ required: true, message: '请选择促销方式', trigger: 'change' }],
  214. orderAmounts: [ { validator: this.orderAmountsValidator } ],
  215. orderAmount: [ { validator: this.orderAmountValidator } ],
  216. promoAmount: [ { validator: this.promoAmountValidator } ],
  217. promoAmountPer: [ { validator: this.promoAmountPerValidator } ],
  218. normalGoodsList: [{ required: true, message: '请选择正价品', trigger: 'change' }],
  219. promoGoodsList: [{ required: true, message: '请选择促销品', trigger: 'change' }]
  220. },
  221. openPriceProductsModal: false,
  222. normalGoodsList: [], // 当前已选正价产品
  223. promoGoodsList: [], // 当前已选促销品
  224. nowChooseGoodsType: '', // 当前选择产品的类型(正价产品/促销品)
  225. nowData: [], // 选择产品
  226. spinning: false
  227. }
  228. },
  229. computed: {
  230. extra () {
  231. let str = ''
  232. if (this.form.promoRuleType == 'BUY_PROD_GIVE_PROD') { // 买产品送产品
  233. str = '(即买正价产品送促销品,例如买刹车片送滤芯)'
  234. } else if (this.form.promoRuleType == 'BUY_PROD_GIVE_MONEY') { // 买产品送采购额
  235. str = '(即买正价产品送对应促销品的采购额,例如买1000元刹车片送200元滤清器采购额)'
  236. } else if (this.form.promoRuleType == 'PROMO_PROD') { // 特价产品销售
  237. str = '(即将产品按设置的特惠价格进行促销)'
  238. } else if (this.form.promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购
  239. str = '(即购买其它产品时,以设置的金额可购买换购产品)'
  240. }
  241. return str
  242. }
  243. },
  244. methods: {
  245. // 详情
  246. getDetail () {
  247. promoRuleDetailD({ sn: this.itemSn }).then(res => {
  248. if (res.status == 200) {
  249. const data = res.data
  250. this.form = Object.assign(this.form, data)
  251. if (data.normalGoodsList) {
  252. data.normalGoodsList.map(item => {
  253. delete item.id
  254. item.name = item.goodsName
  255. })
  256. }
  257. if (data.promoGoodsList) {
  258. data.promoGoodsList.map(item => {
  259. delete item.id
  260. item.name = item.goodsName
  261. })
  262. }
  263. if (data.promoRuleType == 'BUY_PROD_GIVE_MONEY' && data.promoType == 'promo_amount') { // 买产品送采购额 金额
  264. this.form.orderAmounts = data.orderAmount ? data.orderAmount : null
  265. this.form.promoAmount = data.promoAmount ? data.promoAmount : null
  266. this.form.promoAmountPer = ''
  267. this.form.orderAmount = ''
  268. } else if (data.promoRuleType == 'BUY_PROD_GIVE_MONEY' && data.promoType == 'promo_amount_per') { // 买产品送采购额 百分比
  269. this.form.orderAmount = data.orderAmount ? data.orderAmount : null
  270. this.form.promoAmountPer = Number(data.promoAmountPer) * 100
  271. this.form.orderAmounts = ''
  272. this.form.promoAmount = ''
  273. }
  274. this.normalGoodsList = data.normalGoodsList || []
  275. this.promoGoodsList = data.promoGoodsList || []
  276. }
  277. })
  278. },
  279. // 采购金额自定义校验 金额
  280. orderAmountsValidator (rule, value, callback) {
  281. if (this.form.promoType == 'promo_amount' && !value) {
  282. callback(new Error('请输入正价品金额'))
  283. } else {
  284. callback()
  285. }
  286. },
  287. // 采购金额自定义校验 百分比
  288. orderAmountValidator (rule, value, callback) {
  289. if (this.form.promoType == 'promo_amount_per' && !value) {
  290. callback(new Error('请输入正价品金额'))
  291. } else {
  292. callback()
  293. }
  294. },
  295. // 采购额百分比自定义校验
  296. promoAmountValidator (rule, value, callback) {
  297. if (this.form.promoType == 'promo_amount' && !value) {
  298. callback(new Error('请输入采购额'))
  299. } else {
  300. callback()
  301. }
  302. },
  303. // 采购额百分比自定义校验
  304. promoAmountPerValidator (rule, value, callback) {
  305. if (this.form.promoType == 'promo_amount_per' && !value) {
  306. callback(new Error('请输入百分比'))
  307. } else {
  308. callback()
  309. }
  310. },
  311. // 保存
  312. handleSave () {
  313. const _this = this
  314. // 处理表单校验
  315. _this.form.normalGoodsList = this.normalGoodsList.length > 0 ? 'a' : ''
  316. _this.form.promoGoodsList = this.promoGoodsList.length > 0 ? 'a' : ''
  317. this.$refs.ruleForm.validate(valid => {
  318. if (valid) {
  319. const form = JSON.parse(JSON.stringify(_this.form))
  320. form.normalGoodsList = this.normalGoodsList
  321. form.promoGoodsList = this.promoGoodsList
  322. form.promoActiveSn = this.$route.params.sn
  323. if (form.promoRuleType == 'BUY_PROD_GIVE_MONEY' && form.promoType == 'promo_amount_per') { // 买产品送采购额 百分比
  324. form.promoAmountPer = Number(form.promoAmountPer) / 100
  325. form.orderAmounts = ''
  326. form.promoAmount = ''
  327. } else if (form.promoRuleType == 'BUY_PROD_GIVE_MONEY' && form.promoType == 'promo_amount') { // 买产品送采购额 金额
  328. form.orderAmount = form.orderAmounts
  329. form.promoAmountPer = ''
  330. }
  331. if (!_this.itemSn) { delete form.id }
  332. _this.spinning = true
  333. promoRuleSave(form).then(res => {
  334. if (res.status == 200) {
  335. _this.$message.success(res.message)
  336. setTimeout(() => {
  337. _this.$emit('ok')
  338. _this.isShow = false
  339. _this.spinning = false
  340. }, 1000)
  341. } else {
  342. _this.spinning = false
  343. }
  344. })
  345. } else {
  346. console.log('error submit!!')
  347. return false
  348. }
  349. })
  350. },
  351. handleOk (obj) {
  352. if (this.nowChooseGoodsType == 'normal') { // 正价品
  353. this.normalGoodsList = obj
  354. } else if (this.nowChooseGoodsType == 'promo') { // 促销品
  355. this.promoGoodsList = obj
  356. }
  357. },
  358. // 选择产品
  359. chooseProduct (type) {
  360. this.nowChooseGoodsType = type
  361. if (type == 'normal') { // 正价品
  362. this.nowData = this.normalGoodsList || []
  363. } else if (type == 'promo') { // 促销品
  364. this.nowData = this.promoGoodsList || []
  365. }
  366. this.openPriceProductsModal = true
  367. },
  368. // 关闭选择产品弹框
  369. closePriceProducts () {
  370. this.openPriceProductsModal = false
  371. },
  372. radioChange (e) {
  373. if (e.target.value == 'promo_amount') {
  374. this.form.orderAmount = null
  375. this.form.promoAmountPer = null
  376. } else if (e.target.value == 'promo_amount_per') {
  377. this.form.orderAmounts = null
  378. this.form.promoAmount = null
  379. }
  380. },
  381. // 促销类型 change
  382. changeType (val) {
  383. this.form.promoRuleType = val
  384. this.form.orderGoodsQty = ''
  385. this.form.promoQty = ''
  386. this.form.promoType = undefined
  387. this.form.orderAmounts = ''
  388. this.form.orderAmount = ''
  389. this.form.promoAmount = ''
  390. this.form.promoAmountPer = ''
  391. this.form.normalGoodsList = ''
  392. this.form.promoGoodsList = ''
  393. this.normalGoodsList = []
  394. this.promoGoodsList = []
  395. }
  396. },
  397. watch: {
  398. // 父页面传过来的弹框状态
  399. openModal (newValue, oldValue) {
  400. this.isShow = newValue
  401. },
  402. // 重定义的弹框状态
  403. isShow (newValue, oldValue) {
  404. if (!newValue) {
  405. this.$emit('close')
  406. this.$refs.ruleForm.resetFields()
  407. }
  408. },
  409. itemSn (newValue, oldValue) {
  410. if (this.isShow && newValue) {
  411. this.getDetail()
  412. }
  413. }
  414. }
  415. }
  416. </script>
  417. <style lang="less">
  418. .promotionRules-rule-modal {
  419. .ant-modal-body {
  420. padding: 40px 40px 24px;
  421. }
  422. .btn-cont {
  423. text-align: center;
  424. margin: 35px 0 10px;
  425. }
  426. .ant-radio + span{
  427. line-height: 40px;
  428. }
  429. }
  430. </style>