123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- <template>
- <a-modal
- centered
- class="promotionRules-rule-modal"
- :footer="null"
- :maskClosable="false"
- :title="itemSn ? '编辑':'新增'"
- v-model="isShow"
- @cancle="isShow = false"
- width="80%">
- <a-form-model
- id="promotionRules-rule-form"
- ref="ruleForm"
- :model="form"
- :rules="rules"
- :label-col="formItemLayout.labelCol"
- :wrapper-col="formItemLayout.wrapperCol"
- >
- <a-form-model-item label="促销类型" prop="promoRuleType" :extra="extra">
- <v-select
- code="PROMO_RULE_TYPE"
- id="promotionRules-rule-promoRuleType"
- v-model="form.promoRuleType"
- allowClear
- @change="changeType"
- placeholder="请选择促销类型"
- ></v-select>
- </a-form-model-item>
- <!-- 买产品送产品 -->
- <div v-if="form.promoRuleType == 'BUY_PROD_GIVE_PROD'">
- <a-form-model-item label="促销设置" required>
- 购买满
- <a-form-model-item prop="orderGoodsQty" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-orderGoodsQty"
- v-model="form.orderGoodsQty"
- :precision="0"
- :min="1"
- :max="999999"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- 正价产品,送
- <a-form-model-item prop="promoQty" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-promoQty"
- v-model="form.promoQty"
- :precision="0"
- :min="1"
- :max="999999"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- 促销品
- </a-form-model-item>
- <a-form-model-item label="正价产品" prop="normalGoodsList">
- <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ normalGoodsList.length }}个</span>
- </a-form-model-item>
- <a-form-model-item label="促销品" prop="promoGoodsList">
- <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ promoGoodsList.length }}个</span>
- </a-form-model-item>
- </div>
- <!-- 买产品送采购额 -->
- <div v-if="form.promoRuleType == 'BUY_PROD_GIVE_MONEY'">
- <a-form-model-item label="促销设置" prop="orderRuleType">
- <a-radio-group v-model="form.orderRuleType" @change="radioChange">
- <a-radio value="prod_qty" style="margin-bottom: 10px;">
- 购买满
- <a-form-model-item prop="orderAmount" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-orderAmount"
- v-model="form.orderAmount"
- :precision="2"
- :min="0.1"
- :max="999999"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- 元正价产品,送
- <a-form-model-item prop="promoAmount" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-promoAmount"
- v-model="form.promoAmount"
- :precision="2"
- :min="0.1"
- :max="999999"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- 元采购额可用于购买促销品
- </a-radio>
- <a-radio value="order_amount">
- 购买满
- <a-form-model-item prop="orderAmount" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-orderAmount"
- v-model="form.orderAmount"
- :precision="2"
- :min="0.1"
- :max="999999"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- 元正价产品可以返正价产品采购额的
- <a-form-model-item prop="promoAmountPer" :label-col="{span: 0}" style="display: inline-block;">
- <a-input-number
- id="promotionRules-rule-promoAmountPer"
- v-model="form.promoAmountPer"
- :precision="2"
- :min="0.1"
- :max="100"
- placeholder="请输入"
- style="width: 100%;" />
- </a-form-model-item>
- %用于购买促销品
- </a-radio>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item label="正价产品" prop="normalGoodsList">
- <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ normalGoodsList.length }}个</span>
- </a-form-model-item>
- <a-form-model-item label="促销品" prop="promoGoodsList">
- <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ promoGoodsList.length }}个</span>
- </a-form-model-item>
- </div>
- <!-- 特价产品销售 -->
- <div v-if="form.promoRuleType == 'PROMO_PROD'">
- <a-form-model-item label="特价产品" prop="promoGoodsList">
- <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ promoGoodsList.length }}个</span>
- </a-form-model-item>
- </div>
- <!-- 加价换购 -->
- <div v-if="form.promoRuleType == 'ADD_PRICE_PURCH'">
- <a-form-model-item label="加价规则" prop="orderGoodsQty">
- 购买满
- <a-input-number
- id="promotionRules-rule-orderGoodsQty"
- v-model="form.orderGoodsQty"
- :precision="0"
- :min="1"
- :max="999999"
- placeholder="请输入"
- style="width: 30%;" />
- 个正价产品,可以以换购价购买任意1个换购产品
- </a-form-model-item>
- <a-form-model-item label="正价产品" prop="normalGoodsList">
- <a-button id="promotionRules-rule-normalGoodsList" type="primary" class="button-success" @click="chooseProduct('normal')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ normalGoodsList.length }}个</span>
- </a-form-model-item>
- <a-form-model-item label="换购产品" prop="promoGoodsList">
- <a-button id="promotionRules-rule-promoGoodsList" type="primary" class="button-success" @click="chooseProduct('promo')">选择</a-button>
- <span style="font-weight: bold;margin-left: 30px;">当前已选:{{ promoGoodsList.length }}个</span>
- </a-form-model-item>
- </div>
- </a-form-model>
- <div class="btn-cont">
- <a-button type="primary" id="promotionRules-rule-modal-save" @click="handleSave">保存</a-button>
- <a-button id="promotionRules-rule-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
- </div>
- <!-- 选择产品 -->
- <choose-price-products-modal
- :openModal="openPriceProductsModal"
- :nowData="nowData"
- :ruleType="form.promoRuleType"
- :goodsType="nowChooseGoodsType"
- @ok="handleOk"
- @close="closePriceProducts" />
- </a-modal>
- </template>
- <script>
- import { VSelect } from '@/components'
- import ChoosePriceProductsModal from './choosePriceProductsModal.vue'
- import { promoRuleSave, promoRuleDetailD } from '@/api/promoRule'
- export default {
- name: 'EditRuleModalModal',
- components: { VSelect, ChoosePriceProductsModal },
- props: {
- openModal: {
- // 弹框显示状态
- type: Boolean,
- default: false
- },
- itemSn: {
- type: String || Number,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.openModal, // 是否打开弹框
- formItemLayout: {
- labelCol: { span: 3 },
- wrapperCol: { span: 21 }
- },
- form: {
- promoRuleType: undefined, // 促销类型
- orderGoodsQty: '', // 正价品数量
- promoQty: '', // 促销品数量
- orderRuleType: undefined, // 促销设置(买产品送采购额(定额)、买产品送采购额(定比例))
- orderAmount: '', // 正价品金额
- promoAmount: '', // 采购额
- promoAmountPer: '', // 百分比
- normalGoodsList: '', // 已选正价品
- promoGoodsList: '' // 已选促销品
- },
- rules: {
- promoRuleType: [{ required: true, message: '请选择促销类型', trigger: 'change' }],
- orderGoodsQty: [{ required: true, message: '请输入正价品数量', trigger: 'blur' }],
- promoQty: [{ required: true, message: '请输入促销品数量', trigger: 'blur' }],
- orderRuleType: [{ required: true, message: '请选择促销方式', trigger: 'change' }],
- orderAmount: [{ required: true, message: '请输入正价品金额', trigger: 'blur' }],
- promoAmount: [
- // { required: true, message: '请输入采购额', trigger: 'blur' },
- { validator: this.promoAmountValidator }
- ],
- promoAmountPer: [
- // { required: true, message: '请输入百分比', trigger: 'blur' }
- { validator: this.promoAmountPerValidator }
- ],
- normalGoodsList: [{ required: true, message: '请选择正价品', trigger: 'change' }],
- promoGoodsList: [{ required: true, message: '请选择促销品', trigger: 'change' }]
- },
- openPriceProductsModal: false,
- normalGoodsList: [], // 当前已选正价产品
- promoGoodsList: [], // 当前已选促销品
- nowChooseGoodsType: '', // 当前选择产品的类型(正价产品/促销品)
- nowData: [] // 选择产品
- }
- },
- computed: {
- extra () {
- let str = ''
- if (this.form.promoRuleType == 'BUY_PROD_GIVE_PROD') { // 买产品送产品
- str = '(即买正价产品送促销品,例如买刹车片送滤芯)'
- } else if (this.form.promoRuleType == 'BUY_PROD_GIVE_MONEY') { // 买产品送采购额
- str = '(即买正价产品送对应促销品的采购额,例如买1000元刹车片送200元滤清器采购额)'
- } else if (this.form.promoRuleType == 'PROMO_PROD') { // 特价产品销售
- str = '(即将产品按设置的特惠价格进行促销)'
- } else if (this.form.promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购
- str = '(即购买其它产品时,以设置的金额可购买换购产品)'
- }
- return str
- }
- },
- methods: {
- // 详情
- getDetail () {
- promoRuleDetailD({ sn: this.itemSn }).then(res => {
- if (res.status == 200) {
- const data = res.data
- this.form = Object.assign(this.form, data)
- }
- })
- },
- // 采购额百分比自定义校验
- promoAmountValidator (rule, value, callback) {
- if (this.form.orderRuleType == 'prod_qty' && !value) {
- callback(new Error('请输入采购额'))
- } else {
- callback()
- }
- },
- // 采购额百分比自定义校验
- promoAmountPerValidator (rule, value, callback) {
- if (this.form.orderRuleType == 'order_amount' && !value) {
- callback(new Error('请输入百分比'))
- } else {
- callback()
- }
- },
- // 保存
- handleSave () {
- const _this = this
- // 处理表单校验
- _this.form.normalGoodsList = this.normalGoodsList.length > 0 ? 'a' : ''
- _this.form.promoGoodsList = this.promoGoodsList.length > 0 ? 'a' : ''
- console.log(this.form)
- this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const form = JSON.parse(JSON.stringify(_this.form))
- form.normalGoodsList = this.normalGoodsList
- form.promoGoodsList = this.promoGoodsList
- form.promoActiveSn = this.$route.params.sn
- if (form.promoRuleType == 'BUY_PROD_GIVE_MONEY' && form.orderRuleType == 'order_amount') { // 买产品送采购额 百分比
- form.promoAmountPer = Number(form.promoAmountPer) / 100
- }
- promoRuleSave(form).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- setTimeout(() => {
- _this.$emit('ok')
- _this.isShow = false
- }, 1000)
- }
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- handleOk (obj) {
- if (this.nowChooseGoodsType == 'normal') { // 正价品
- this.normalGoodsList = obj
- } else if (this.nowChooseGoodsType == 'promo') { // 促销品
- this.promoGoodsList = obj
- }
- },
- // 选择产品
- chooseProduct (type) {
- this.nowChooseGoodsType = type
- if (type == 'normal') { // 正价品
- this.nowData = this.normalGoodsList || []
- } else if (type == 'promo') { // 促销品
- this.nowData = this.promoGoodsList || []
- }
- this.openPriceProductsModal = true
- },
- // 关闭选择产品弹框
- closePriceProducts () {
- this.openPriceProductsModal = false
- },
- radioChange (val) {
- },
- // 促销类型 change
- changeType (val) {
- this.$refs.ruleForm.resetFields()
- this.normalGoodsList = []
- this.promoGoodsList = []
- this.form.promoRuleType = val
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close')
- this.$refs.ruleForm.resetFields()
- }
- },
- itemSn (newValue, oldValue) {
- if (this.isShow && newValue) {
- this.getDetail()
- }
- }
- }
- }
- </script>
- <style lang="less">
- .promotionRules-rule-modal {
- .ant-modal-body {
- padding: 40px 40px 24px;
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- .ant-radio + span{
- line-height: 40px;
- }
- }
- </style>
|