specialOfferModal.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  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="80%">
  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="handleChange">
  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 prop="minOrderFlag">
  54. <span slot="label">
  55. <a-tooltip title="What do you want others to call you?">
  56. <a-icon type="info-circle" />
  57. </a-tooltip>
  58. 订单起订金额
  59. </span>
  60. <a-select default-value="1" v-model="form.minOrderFlag" style="width: 160px" size="small">
  61. <a-select-option value="0">
  62. 不限
  63. </a-select-option>
  64. <a-select-option value="1">
  65. 限制
  66. </a-select-option>
  67. </a-select>
  68. <a-input-number
  69. v-show="form.minOrderFlag && form.minOrderFlag=='1'"
  70. size="small"
  71. style="margin-left:10px;width:300px;"
  72. v-model="form.minOrderAmount"
  73. :min="0"
  74. :step="1"
  75. :precision="2"
  76. placeholder="请输入金额"/>
  77. </a-form-model-item>
  78. <a-form-model-item prop="upperLimitFlag">
  79. <span slot="label">
  80. <a-tooltip title="What do you want others to call you?">
  81. <a-icon type="info-circle" />
  82. </a-tooltip>
  83. 活动经费上限
  84. </span>
  85. <a-select default-value="1" v-model="form.upperLimitFlag" style="width: 160px" size="small">
  86. <a-select-option value="0">
  87. 不限
  88. </a-select-option>
  89. <a-select-option value="1">
  90. 限制
  91. </a-select-option>
  92. </a-select>
  93. <a-input-number
  94. v-show="form.upperLimitFlag&&form.upperLimitFlag=='1'"
  95. size="small"
  96. style="margin-left:10px;width:300px;"
  97. v-model="form.upperLimitAmount"
  98. :min="0"
  99. :step="1"
  100. :precision="2"
  101. placeholder="请输入金额"/>
  102. </a-form-model-item>
  103. </a-form-model>
  104. <a-card size="small" :bordered="false" class="pages-wrap">
  105. <div class="flex">
  106. <a-radio-group v-model="chooseVal" button-style="solid" size="small">
  107. <a-radio-button value="a" v-show="form.gateFlag==='1'">
  108. 门槛产品
  109. </a-radio-button>
  110. <a-radio-button value="d">
  111. 特价产品
  112. </a-radio-button>
  113. </a-radio-group>
  114. <div>
  115. <a-button
  116. size="small"
  117. type="link"
  118. class="button-info"
  119. id="promotionList-edit-btn">+导入产品</a-button>
  120. <a-button
  121. v-show="chooseVal==='d'"
  122. style="margin-left:10px;"
  123. size="small"
  124. type="link"
  125. class="button-error"
  126. id="promotionList-edit-btn"
  127. @click="openProductsModal = true">+新增产品</a-button>
  128. </div>
  129. </div>
  130. <div v-show="chooseVal=='a'"><tableType1 ref="cillProduct"></tableType1></div>
  131. <div v-show="chooseVal=='d'"><tableType3 ref="specialProduct"></tableType3></div>
  132. </a-card>
  133. <div class="btn-cont">
  134. <a-button id="promotionList-basicInfo-modal-back" @click="isShow = false">取消</a-button>
  135. <a-button style="margin-left: 15px;" type="primary" id="promotionList-modal-save" @click="handleSave">确定</a-button>
  136. </div>
  137. </a-spin>
  138. <!-- 选择产品 -->
  139. <chooseProductsModal
  140. type="dealership"
  141. :openModal="openProductsModal"
  142. :chooseData="chooseProducts"
  143. @close="openProductsModal=false"
  144. @ok="handleProductsOk" />
  145. </a-modal>
  146. </template>
  147. <script>
  148. import { commonMixin } from '@/utils/mixin'
  149. import { VSelect } from '@/components'
  150. import tableType1 from './tableType1.vue'
  151. import tableType3 from './tableType3.vue'
  152. import { promotionSave, getRuleDetail, getNewScopeSn } from '@/api/promotion'
  153. import chooseProductsModal from './chooseProductsModal.vue'
  154. export default {
  155. name: 'PromotionListBasicInfoModal',
  156. mixins: [commonMixin],
  157. components: { VSelect, tableType1, tableType3, chooseProductsModal },
  158. props: {
  159. openModal: { // 弹框显示状态
  160. type: Boolean,
  161. default: false
  162. },
  163. promotionSn: {
  164. type: [Number, String],
  165. default: ''
  166. },
  167. itemSn: {
  168. type: [Number, String],
  169. default: ''
  170. }
  171. },
  172. data () {
  173. return {
  174. isShow: this.openModal, // 是否打开弹框
  175. spinning: false,
  176. formItemLayout: {
  177. labelCol: { span: 4 },
  178. wrapperCol: { span: 17 }
  179. },
  180. form: {
  181. promotionRuleType: 'PROMO_PROD', // 特价产品
  182. gateFlag: '0', // 门槛
  183. gateType: undefined,
  184. gateAmount: '',
  185. quotaAmount: '',
  186. minOrderFlag: '1', // 起订金额
  187. minOrderAmount: '',
  188. upperLimitFlag: '1', // 活动经费上限
  189. upperLimitAmount: ''
  190. },
  191. rules: {
  192. gateFlag: [ { required: true, message: '请选择规则门槛', trigger: 'change' } ],
  193. minOrderFlag: [{ required: true, message: '请选择订单起订金额', trigger: 'change' }],
  194. upperLimitFlag: [{ required: true, message: '请选择活动经费上限', trigger: 'change' }]
  195. },
  196. chooseVal: 'a',
  197. openProductsModal: false,
  198. chooseProducts: []
  199. }
  200. },
  201. methods: {
  202. // 门槛产品
  203. handleChange (e) {
  204. if (e.target.value == '1') {
  205. this.chooseVal = 'a'
  206. } else {
  207. this.chooseVal = 'd'
  208. }
  209. },
  210. // 保存
  211. handleSave () {
  212. const _this = this
  213. // 验证必填
  214. if (_this.form.gateFlag == '1') {
  215. if (!_this.form.gateAmount || !_this.form.quotaAmount) {
  216. _this.$message.warning('规则门槛条件不能为空!')
  217. return
  218. }
  219. }
  220. if (_this.form.minOrderFlag == 1 && !_this.form.minOrderAmount) {
  221. _this.$message.warning('请输入订单起订限制金额数!')
  222. return
  223. }
  224. if (_this.form.upperLimitFlag == 1 && !_this.form.upperLimitAmount) {
  225. _this.$message.warning('请输入活动经费上限金额!')
  226. return
  227. }
  228. this.$refs.ruleForm.validate(valid => {
  229. if (valid) {
  230. const form = JSON.parse(JSON.stringify(_this.form))
  231. if (form.gateFlag == '1') {
  232. form.gateProductList = _this.$refs.cillProduct.getResultVal()
  233. } else {
  234. form.gateProductList = []
  235. }
  236. form.specialProductList = _this.$refs.specialProduct.getResultVal()
  237. form.promotionSn = _this.promotionSn
  238. _this.spinning = true
  239. promotionSave(form).then(res => {
  240. if (res.status == 200) {
  241. _this.$message.success(res.message)
  242. setTimeout(() => {
  243. _this.isShow = false
  244. _this.$emit('ok')
  245. _this.spinning = false
  246. }, 1000)
  247. } else {
  248. _this.spinning = false
  249. }
  250. })
  251. } else {
  252. return false
  253. }
  254. })
  255. },
  256. // 重置表格
  257. resetSearchForm () {
  258. this.form = {
  259. promotionRuleType: 'PROMO_PROD', // 特价产品
  260. gateFlag: '0', // 门槛
  261. gateAmount: '',
  262. quotaAmount: '',
  263. minOrderFlag: '1', // 起订金额
  264. minOrderAmount: '',
  265. upperLimitFlag: '1', // 活动经费上限
  266. upperLimitAmount: '',
  267. gateProductList: undefined,
  268. specialProductList: undefined
  269. }
  270. this.$nextTick(() => {
  271. this.$refs.ruleForm.resetFields()
  272. this.$refs.cillProduct.reSetTableData()
  273. this.$refs.specialProduct.reSetTableData()
  274. })
  275. },
  276. // 获取编辑详情
  277. getDetail () {
  278. const _this = this
  279. getRuleDetail({ sn: this.itemSn }).then(res => {
  280. if (res.status == 200) {
  281. this.chooseVal = res.data.gateFlag == '0' ? 'd' : 'a'
  282. const resultObj = res.data
  283. // 重新组成保存数据
  284. if (resultObj.gateProductList && resultObj.gateProductList.length > 0) {
  285. resultObj.gateProductList = _this.newData(resultObj.gateProductList)
  286. this.$refs.cillProduct.setTabVal(resultObj.gateProductList)
  287. }
  288. if (resultObj.specialProductList && resultObj.specialProductList.length > 0) {
  289. resultObj.specialProductList = _this.newData(resultObj.specialProductList)
  290. this.$refs.specialProduct.setSourceData(resultObj.specialProductList)
  291. }
  292. this.form = { ...this.form, ...resultObj }
  293. }
  294. })
  295. },
  296. newData (list) {
  297. list.forEach(con => {
  298. // 品牌
  299. if (con.productBrandList) {
  300. const brandList = []
  301. con.productBrandList.forEach(item => {
  302. item.brandName = item.productBrandName
  303. const brandObj = {
  304. productBrandSn: item.productBrandSn
  305. }
  306. brandList.push(brandObj)
  307. })
  308. con.productBrandArr = con.productBrandList
  309. con.productBrandList = brandList
  310. }
  311. // 分类
  312. if (con.productTypeList) {
  313. const typeList = []
  314. con.productTypeList.forEach(item => {
  315. const typeObj = {}
  316. item.title = ''
  317. const num = 3
  318. for (var i = 0; i < num; i++) {
  319. if (item['productTypeName' + (i + 1)]) {
  320. item.title += item['productTypeName' + (i + 1)] + (item['productTypeName' + (i + 1)] ? '/' : '')
  321. typeObj['productTypeSn' + (i + 1)] = item['productTypeSn' + (i + 1)] ? item['productTypeSn' + (i + 1)] : ''
  322. }
  323. }
  324. item.title = item.title.slice(0, item.title.length - 1)
  325. item.id = item.productTypeSn3 ? item.productTypeSn3 : item.productTypeSn2 ? item.productTypeSn2 : item.productTypeSn1
  326. typeList.push(typeObj)
  327. })
  328. con.productTypeArr = con.productTypeList
  329. con.productTypeList = typeList
  330. }
  331. // 产品
  332. if (con.productThisList) {
  333. const productList = []
  334. con.productThisList.forEach(item => {
  335. const productObj = {
  336. productCode: item.productCode,
  337. productSn: item.productSn
  338. }
  339. productList.push(productObj)
  340. })
  341. con.productThisList = productList
  342. }
  343. })
  344. return list
  345. },
  346. // +新增产品
  347. handleProductsOk (con) {
  348. const chooseProductsList = []
  349. const _this = this
  350. con.forEach(item => {
  351. getNewScopeSn({}).then(res => {
  352. if (res.status == 200) {
  353. const newData = {
  354. productScopeSn: res.data,
  355. dataSourceOrigin:'1',
  356. productTypeArr: [],
  357. productTypeList: [],
  358. productBrandArr: [{ brandSn: item.productBrandSn, brandName: item.productBrandName }],
  359. productBrandList: [{ brandSn: item.productBrandSn }],
  360. productThisList: [{
  361. productSn: item.productSn,
  362. productCode: item.code
  363. }],
  364. provincePrice: item.provincePrice,
  365. cityPrice: item.cityPrice,
  366. specialPrice: item.specialPrice
  367. }
  368. const obj = {}
  369. if (item.productTypeSn1) {
  370. obj.productType1 = item.productTypeSn1
  371. }
  372. if (item.productTypeSn2) {
  373. obj.productType2 = item.productTypeSn2
  374. }
  375. if (item.productTypeSn3) {
  376. obj.productType3 = item.productTypeSn3
  377. }
  378. const newObj = { ...obj, ...{} }
  379. if (Object.keys(obj).length == 1) {
  380. newObj.title = item.productTypeName1
  381. newObj.id = item.productTypeSn1
  382. } else if (Object.keys(obj).length == 2) {
  383. newObj.title = item.productTypeName1 + '/' + item.productTypeName2
  384. newObj.id = item.productTypeSn2
  385. } else {
  386. newObj.title = item.productTypeName1 + '/' + item.productTypeName2 + '/' + item.productTypeName3
  387. newObj.id = item.productTypeSn3
  388. }
  389. newData.productTypeList[0] = obj
  390. newData.productTypeArr[0] = newObj
  391. chooseProductsList.push(newData)
  392. _this.$refs.specialProduct.setSourceData(chooseProductsList)
  393. }
  394. })
  395. })
  396. }
  397. },
  398. watch: {
  399. // 父页面传过来的弹框状态
  400. openModal (newValue, oldValue) {
  401. this.isShow = newValue
  402. },
  403. // 重定义的弹框状态
  404. isShow (newValue, oldValue) {
  405. if (!newValue) {
  406. this.$emit('close')
  407. this.resetSearchForm()
  408. } else {
  409. if (this.itemSn) {
  410. this.getDetail()
  411. } else {
  412. this.chooseVal = this.form.gateFlag == '0' ? 'd' : 'a'
  413. }
  414. }
  415. }
  416. }
  417. }
  418. </script>
  419. <style lang="less" scoped>
  420. .promotionList-basicInfo-modal{
  421. /deep/.ant-modal-body {
  422. padding: 40px 40px 24px;
  423. max-height: 745px !important;
  424. overflow-y: scroll !important;
  425. }
  426. .ant-radio-button-wrapper{
  427. width:80px;
  428. text-align: center;
  429. }
  430. .ant-form-item{
  431. margin-bottom:5px;
  432. }
  433. .buyerBox{
  434. border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
  435. }
  436. .btn-cont {
  437. text-align: center;
  438. margin: 35px 0 10px;
  439. }
  440. .flex{
  441. display:flex;
  442. align-items:center;
  443. justify-content:space-between;
  444. }
  445. }
  446. </style>