sendAmountModal.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. <template>
  2. <a-modal
  3. centered
  4. class="promotionList-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="规则设置"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="70%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="promotionList-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol" >
  19. <a-form-model-item label="规则门槛" prop="gateFlag">
  20. <a-radio-group v-model="form.gateFlag" button-style="solid" size="small" @change="changeGateFlag">
  21. <a-radio-button value="1">
  22. </a-radio-button>
  23. <a-radio-button value="0">
  24. </a-radio-button>
  25. </a-radio-group>
  26. <div v-if="form.gateFlag && form.gateFlag === '1'">
  27. <v-select
  28. size="small"
  29. style="width:60%;"
  30. v-model="form.gateType"
  31. id="promotionList-gateType"
  32. code="PROMOTION_GATE_TYPE"
  33. placeholder="请选择"
  34. allowClear></v-select>
  35. <div v-if="form.gateType==='RATIO_AMOUNT'">
  36. 购买门槛产品金额 <a-input-number v-model="form.gateAmount" :min="0" :max="100" size="small"/> %作为配额
  37. <a-tooltip title="如:填写100%,则购买10000元门槛产品,可享受10000配额购买正价产品,根据门槛金额动态调整配额">
  38. <a-icon type="question-circle" theme="filled" :style="{ fontSize: '14px', color: 'gray' }"/>
  39. </a-tooltip>
  40. </div>
  41. <div v-if="form.gateType==='MIN_AMOUNT'">
  42. 购买门槛产品满最低金额 <a-input-number v-model="form.gateAmount" :min="0" :precision="2" size="small"/> 不限制配额。
  43. </div>
  44. <div class="ruleDescList" v-if="form.gateType==='FIXED_AMOUNT'">
  45. 购买满
  46. <a-input-number v-model="form.gateAmount" :min="0" :precision="2" size="small"/>
  47. 元门槛产品,可使用
  48. <a-input-number v-model="form.quotaAmount" :min="0" :precision="2" size="small"/>
  49. 元配额,采购规则中的正价商品(配额算销售额)
  50. </div>
  51. </div>
  52. </a-form-model-item>
  53. <a-form-model-item label="满赠规则" prop="regularSameFlag">
  54. <div class="ruleDescList">
  55. <a-select default-value="0" v-model="form.regularSameFlag" style="width: 100px" size="small">
  56. <a-select-option value="1">
  57. 同款
  58. </a-select-option>
  59. <a-select-option value="0">
  60. 不同款
  61. </a-select-option>
  62. </a-select>
  63. 产品购买满
  64. <a-input-number v-model="form.regularAmount" @blur="calculatePrice" :min="0" :step="1" :precision="0" size="small"/>
  65. 元正价产品,送
  66. <a-input-number v-model="form.giveAmount" @blur="calculatePrice" :min="0" :step="1" :precision="0" size="small"/>
  67. 元{{ scaleNum}}%促销品采购额
  68. </div>
  69. </a-form-model-item>
  70. <a-form-model-item label="金额叠加" prop="accrualFlag">
  71. <a-radio-group v-model="form.accrualFlag" button-style="solid" size="small">
  72. <a-radio-button value="1">
  73. </a-radio-button>
  74. <a-radio-button value="0">
  75. </a-radio-button>
  76. </a-radio-group>
  77. <span style="color:gray;">(如:满1000送200,金额叠加则:满2000送400,以此类推)</span>
  78. </a-form-model-item>
  79. <a-form-model-item prop="minOrderFlag">
  80. <span slot="label">
  81. <a-tooltip title="What do you want others to call you?">
  82. <a-icon type="info-circle" />
  83. </a-tooltip>
  84. 订单起订金额
  85. </span>
  86. <a-select default-value="1" v-model="form.minOrderFlag" style="width: 160px" size="small">
  87. <a-select-option value="0">
  88. 不限
  89. </a-select-option>
  90. <a-select-option value="1">
  91. 限制
  92. </a-select-option>
  93. </a-select>
  94. <a-input-number
  95. v-show="form.minOrderFlag && form.minOrderFlag=='1'"
  96. size="small"
  97. style="margin-left:10px;width:300px;"
  98. v-model="form.minOrderAmount"
  99. :min="0"
  100. :step="1"
  101. :precision="2"
  102. placeholder="请输入金额"/>
  103. </a-form-model-item>
  104. <a-form-model-item prop="upperLimitFlag">
  105. <span slot="label">
  106. <a-tooltip title="What do you want others to call you?">
  107. <a-icon type="info-circle" />
  108. </a-tooltip>
  109. 活动经费上限
  110. </span>
  111. <a-select default-value="1" v-model="form.upperLimitFlag" style="width: 160px" size="small">
  112. <a-select-option value="0">
  113. 不限
  114. </a-select-option>
  115. <a-select-option value="1">
  116. 限制
  117. </a-select-option>
  118. </a-select>
  119. <a-input-number
  120. v-show="form.upperLimitFlag&&form.upperLimitFlag=='1'"
  121. size="small"
  122. style="margin-left:10px;width:300px;"
  123. v-model="form.upperLimitAmount"
  124. :min="0"
  125. :step="1"
  126. :precision="2"
  127. placeholder="请输入金额"/>
  128. </a-form-model-item>
  129. <a-form-model-item label="采购额适用范围" prop="scopeFlag">
  130. <a-radio-group v-model="form.scopeFlag" button-style="solid" size="small">
  131. <a-radio-button value="0">
  132. 部分产品
  133. </a-radio-button>
  134. <a-radio-button value="1">
  135. 全部产品
  136. </a-radio-button>
  137. </a-radio-group>
  138. </a-form-model-item>
  139. </a-form-model>
  140. <a-card size="small" :bordered="false" class="pages-wrap">
  141. <div class="flex">
  142. <a-radio-group v-model="chooseVal" button-style="solid" size="small">
  143. <a-radio-button value="a" v-show="form.gateFlag==='1'">
  144. 门槛产品
  145. </a-radio-button>
  146. <a-radio-button value="b">
  147. 正价产品
  148. </a-radio-button>
  149. <a-radio-button value="c" v-show="form.scopeFlag==='0'">
  150. 促销产品
  151. </a-radio-button>
  152. </a-radio-group>
  153. <a-button
  154. size="small"
  155. type="link"
  156. class="button-info"
  157. id="promotionList-edit-btn">+导入产品</a-button>
  158. </div>
  159. <div v-show="chooseVal=='a'"><tableType1 ref="cillProduct"></tableType1></div>
  160. <div v-show="chooseVal=='b'"><tableType1 ref="normalPriceProduct"></tableType1></div>
  161. <div v-show="chooseVal=='c'"><tableType2 ref="offerProduct"></tableType2></div>
  162. </a-card>
  163. <div class="btn-cont">
  164. <a-button id="promotionList-basicInfo-modal-back" @click="isShow = false">取消</a-button>
  165. <a-button style="margin-left: 15px;" type="primary" id="promotionList-modal-save" @click="handleSave">确定</a-button>
  166. </div>
  167. </a-spin>
  168. </a-modal>
  169. </template>
  170. <script>
  171. import { commonMixin } from '@/utils/mixin'
  172. import { VSelect } from '@/components'
  173. import tableType1 from './tableType1.vue'
  174. import tableType2 from './tableType2.vue'
  175. import { promotionSave, getRuleDetail } from '@/api/promotion'
  176. export default {
  177. name: 'PromotionListBasicInfoModal',
  178. mixins: [commonMixin],
  179. components: { VSelect, tableType1, tableType2 },
  180. props: {
  181. openModal: { // 弹框显示状态
  182. type: Boolean,
  183. default: false
  184. },
  185. promotionSn: {
  186. type: [Number, String],
  187. default: ''
  188. },
  189. itemSn: {
  190. type: [Number, String],
  191. default: ''
  192. }
  193. },
  194. data () {
  195. return {
  196. isShow: this.openModal, // 是否打开弹框
  197. spinning: false,
  198. formItemLayout: {
  199. labelCol: { span: 4 },
  200. wrapperCol: { span: 17 }
  201. },
  202. form: {
  203. promotionRuleType: 'BUY_PROD_GIVE_MONEY', // 买产品送采购额
  204. gateFlag: '0', // 门槛
  205. gateType: undefined,
  206. gateAmount: '',
  207. quotaAmount: '',
  208. regularSameFlag: '0', // 满赠规则 不同款商品
  209. regularAmount: '',
  210. giveAmount: '',
  211. restrictCategory: '',
  212. accrualFlag: '1', // 数量叠加
  213. minOrderFlag: '1', // 起订金额
  214. minOrderAmount: '',
  215. upperLimitFlag: '1', // 活动经费上限
  216. upperLimitAmount: '',
  217. scopeFlag: undefined
  218. },
  219. rules: {
  220. gateFlag: [ { required: true, message: '请选择规则门槛', trigger: 'change' } ],
  221. regularSameFlag: [{ required: true, message: '请选择满赠规则', trigger: 'change' }],
  222. accrualFlag: [{ required: true, message: '请选择数量是否叠加', trigger: 'change' }],
  223. minOrderFlag: [{ required: true, message: '请选择订单起订金额', trigger: 'change' }],
  224. upperLimitFlag: [{ required: true, message: '请选择活动经费上限', trigger: 'change' }],
  225. scopeFlag: [{ required: true, message: '请选择采购额适用范围', trigger: 'change' }]
  226. },
  227. chooseVal: 'a',
  228. scaleNum:0
  229. }
  230. },
  231. methods: {
  232. // 计算百分比
  233. calculatePrice () {
  234. const _this = this
  235. if(_this.form.regularAmount&&_this.form.giveAmount){
  236. _this.scaleNum=Math.floor((( _this.form.giveAmount /_this.form.regularAmount) * 100).toFixed(2))
  237. }
  238. },
  239. // 门槛切换 tab 按钮默认显示问题
  240. changeGateFlag (e) {
  241. if (this.chooseVal != 'c') {
  242. if (e.target.value == '0') {
  243. this.chooseVal = 'b'
  244. } else {
  245. this.chooseVal = 'a'
  246. }
  247. }
  248. },
  249. // 保存
  250. handleSave () {
  251. const _this = this
  252. // 验证必填
  253. if (_this.form.gateFlag == '1') {
  254. if (!_this.form.gateType) {
  255. _this.$message.warning('请选择规则门槛设置类型!')
  256. return
  257. }
  258. if (!_this.form.gateAmount) {
  259. _this.$message.warning('规则门槛条件不能为空!')
  260. return
  261. }
  262. if (_this.form.gateType === 'FIXED_AMOUNT' && !_this.form.quotaAmount) {
  263. _this.$message.warning('规则门槛条件不能为空!')
  264. return
  265. }
  266. }
  267. if (!_this.form.regularAmount || !_this.form.giveAmount) {
  268. _this.$message.warning('满赠规则条件不能为空!')
  269. return
  270. }
  271. if (_this.form.minOrderFlag == 1 && !_this.form.minOrderAmount) {
  272. _this.$message.warning('请输入订单起订限制金额数!')
  273. return
  274. }
  275. if (_this.form.upperLimitFlag == 1 && !_this.form.upperLimitAmount) {
  276. _this.$message.warning('请输入活动经费上限金额!')
  277. return
  278. }
  279. this.$refs.ruleForm.validate(valid => {
  280. if (valid) {
  281. const form = JSON.parse(JSON.stringify(_this.form))
  282. if (form.gateFlag == '1') {
  283. form.gateProductList = this.$refs.cillProduct.getResultVal()
  284. } else {
  285. form.gateProductList = []
  286. form.gateAmount = ''
  287. form.quotaAmount = ''
  288. form.gateType = undefined
  289. }
  290. if (form.scopeFlag == '0') {
  291. form.giftProductList = this.$refs.offerProduct.getResultVal()
  292. } else {
  293. form.giftProductList = []
  294. }
  295. form.regularProductList = this.$refs.normalPriceProduct.getResultVal()
  296. form.promotionSn = _this.promotionSn
  297. _this.spinning = true
  298. promotionSave(form).then(res => {
  299. if (res.status == 200) {
  300. _this.$message.success(res.message)
  301. setTimeout(() => {
  302. _this.isShow = false
  303. _this.$emit('ok')
  304. _this.spinning = false
  305. }, 1000)
  306. } else {
  307. _this.spinning = false
  308. }
  309. })
  310. } else {
  311. return false
  312. }
  313. })
  314. },
  315. // 重置表格
  316. resetSearchForm () {
  317. this.form = {
  318. promotionRuleType: 'BUY_PROD_GIVE_MONEY', // 买产品送采购额
  319. gateFlag: '0', // 门槛
  320. gateType: undefined,
  321. gateAmount: '',
  322. quotaAmount: '',
  323. regularSameFlag: '0', // 满赠规则 不同款商品
  324. regularAmount: '',
  325. giveAmount: '',
  326. restrictCategory: '',
  327. accrualFlag: '1', // 数量叠加
  328. minOrderFlag: '1', // 起订金额
  329. minOrderAmount: '',
  330. upperLimitFlag: '1', // 活动经费上限
  331. upperLimitAmount: '',
  332. scopeFlag: undefined,
  333. gateProductList: undefined,
  334. giftProductList: undefined,
  335. regularProductList: undefined
  336. }
  337. this.$nextTick(() => {
  338. this.$refs.ruleForm.resetFields()
  339. this.$refs.cillProduct.reSetTableData()
  340. this.$refs.normalPriceProduct.reSetTableData()
  341. this.$refs.offerProduct.reSetTableData()
  342. })
  343. },
  344. // 获取编辑详情
  345. getDetail () {
  346. const _this = this
  347. getRuleDetail({ sn: this.itemSn }).then(res => {
  348. if (res.status == 200) {
  349. this.chooseVal = res.data.gateFlag == '0' ? 'b' : 'a'
  350. const resultObj = res.data
  351. // 重新组成保存数据
  352. if (resultObj.gateProductList && resultObj.gateProductList.length > 0) {
  353. resultObj.gateProductList = _this.newData(resultObj.gateProductList)
  354. this.$refs.cillProduct.setTabVal(resultObj.gateProductList)
  355. }
  356. if (resultObj.regularProductList && resultObj.regularProductList.length > 0) {
  357. resultObj.regularProductList = _this.newData(resultObj.regularProductList)
  358. this.$refs.normalPriceProduct.setTabVal(resultObj.regularProductList)
  359. }
  360. if (resultObj.giftProductList && resultObj.giftProductList.length > 0) {
  361. resultObj.giftProductList = _this.newData(resultObj.giftProductList)
  362. this.$refs.offerProduct.setTabVal(resultObj.giftProductList)
  363. }
  364. this.form = { ...this.form, ...resultObj }
  365. }
  366. })
  367. },
  368. newData (list) {
  369. list.forEach(con => {
  370. // 品牌
  371. if (con.productBrandList) {
  372. const brandList = []
  373. con.productBrandList.forEach(item => {
  374. item.brandName = item.productBrandName
  375. const brandObj = {
  376. productBrandSn: item.productBrandSn
  377. }
  378. brandList.push(brandObj)
  379. })
  380. con.productBrandArr = con.productBrandList
  381. con.productBrandList = brandList
  382. }
  383. // 分类
  384. if (con.productTypeList) {
  385. const typeList = []
  386. con.productTypeList.forEach(item => {
  387. const typeObj = {}
  388. item.title = ''
  389. const num = 3
  390. for (var i = 0; i < num; i++) {
  391. if (item['productTypeName' + (i + 1)]) {
  392. item.title += item['productTypeName' + (i + 1)] + (item['productTypeName' + (i + 1)] ? '/' : '')
  393. typeObj['productTypeSn' + (i + 1)] = item['productTypeSn' + (i + 1)] ? item['productTypeSn' + (i + 1)] : ''
  394. }
  395. }
  396. item.title = item.title.slice(0, item.title.length - 1)
  397. item.id = item.productTypeSn3 ? item.productTypeSn3 : item.productTypeSn2 ? item.productTypeSn2 : item.productTypeSn1
  398. typeList.push(typeObj)
  399. })
  400. con.productTypeArr = con.productTypeList
  401. con.productTypeList = typeList
  402. }
  403. // 产品
  404. if (con.productThisList) {
  405. const productList = []
  406. con.productThisList.forEach(item => {
  407. const productObj = {
  408. productCode: item.productCode,
  409. productSn: item.productSn
  410. }
  411. productList.push(productObj)
  412. })
  413. con.productThisList = productList
  414. }
  415. })
  416. return list
  417. }
  418. },
  419. watch: {
  420. // 父页面传过来的弹框状态
  421. openModal (newValue, oldValue) {
  422. this.isShow = newValue
  423. },
  424. // 重定义的弹框状态
  425. isShow (newValue, oldValue) {
  426. if (!newValue) {
  427. this.$emit('close')
  428. this.resetSearchForm()
  429. } else {
  430. if (this.itemSn) {
  431. this.getDetail()
  432. } else {
  433. this.chooseVal = this.form.gateFlag == '0' ? 'b' : 'a'
  434. }
  435. }
  436. }
  437. }
  438. }
  439. </script>
  440. <style lang="less" scoped>
  441. .promotionList-basicInfo-modal{
  442. /deep/.ant-modal-body {
  443. padding: 40px 40px 24px;
  444. max-height: 745px !important;
  445. overflow-y: scroll !important;
  446. }
  447. .ant-radio-button-wrapper{
  448. width:80px;
  449. text-align: center;
  450. }
  451. .ant-form-item{
  452. margin-bottom:5px;
  453. }
  454. .buyerBox{
  455. border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
  456. }
  457. .btn-cont {
  458. text-align: center;
  459. margin: 35px 0 10px;
  460. }
  461. .flex{
  462. display:flex;
  463. align-items:center;
  464. justify-content:space-between;
  465. }
  466. }
  467. </style>