editRuleModal.vue 15 KB

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