123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649 |
- <template>
- <a-modal
- class="CouponModal"
- :title="pageType == 'add' ? '新增' : pageType == 'edit' ? '编辑' : ''"
- :width="1030"
- :footer="null"
- :destroyOnClose="true"
- @cancel="isShow = false"
- v-model="isShow">
-
- <a-form-model ref="ruleForms" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
- <a-row>
- <a-col :span="24">
- <div class="c-title">
- 基本信息
- <a-divider type="vertical" class="bold-divider" />
- </div>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="优惠券名称" prop="title"><a-input v-model="form.title" :maxLength="20" placeholder="请输入优惠券名称,20个字以内" /></a-form-model-item>
- </a-col>
- <a-col :span="12">
-
- <a-form-model-item label="优惠券类型" prop="couponType">
- <v-select
- ref="couponType"
- v-model="form.couponType"
- @change="selectChange('couponType')"
- showArrow
- placeholder="请选择优惠券类型"
- code="COUPON_TYPE"
- :disabled="takeCount > 0"></v-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
- <a-form-model-item label="优惠券面额" prop="subAmount">
- <a-input-number
- v-model="form.subAmount"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="请输入优惠券面额"
- class="input-number-s" />
- <span class="unit">元</span>
- </a-form-model-item>
- </a-col>
- <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
- <a-form-model-item label="是否限额使用" class="default-form-item form-item-required">
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item prop="isLimit">
- <v-select
- ref="flag"
- v-model="isLimit"
- @change="selectChange('isLimitE')"
- showArrow
- placeholder="请选择"
- code="FLAG"
- :disabled="takeCount > 0"></v-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="isLimit == '1'">
- <a-form-model-item prop="limitAmount">
- 满<a-input-number
- v-model="form.limitAmount"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="限额数值"
- class="input-number-ms" />元使用
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12" v-if="form.couponType == 'FULLSUB'">
- <a-form-model-item label="满" class="default-form-item form-item-required">
- <a-row>
- <a-col :span="12">
- <a-form-model-item prop="limitAmount">
- <a-input-number
- v-model="form.limitAmount"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="限额数值"
- class="input-number-ls" />
- <span class="unit">减</span>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item prop="subAmount">
- <a-input-number
- v-model="form.subAmount"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="减免金额"
- class="input-number-ls" />
- <span class="unit">元</span>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="12">
- <a-form-model-item label="发放总量" class="default-form-item form-item-required">
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item label="" prop="quotaLimit">
- <v-select
- ref="limitFlag"
- v-model="form.quotaLimit"
- :disabled="takeCount > 0"
- @change="selectChange('quotaLimit')"
- showArrow
- placeholder="请选择"
- code="LIMIT_FLAG"></v-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.quotaLimit == '1'">
- <a-form-model-item label="" prop="quota">
- <a-input-number
- v-model="form.quota"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="请输入限制发放总量"
- class="input-number-s" />
- <span class="unit">份</span>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="优惠券说明" prop="ruleDesc">
- <a-textarea v-model="form.ruleDesc" :maxLength="256" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入优惠券说明,256个字以内" />
- </a-form-model-item>
- </a-col>
- <a-col :span="24">
- <div class="c-title">
- 领用规则
- <a-divider type="vertical" class="bold-divider" />
- </div>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="持卡会员" class="default-form-item form-item-required">
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item prop="cardholderCouponLimit.isLimit">
- <v-select
- ref="limitFlag"
- v-model="form.cardholderCouponLimit.isLimit"
- @change="selectChange('isLimitC')"
- showArrow
- placeholder="请选择"
- code="LIMIT_FLAG"></v-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.cardholderCouponLimit.isLimit == '1'">
- <a-row>
- <a-col :span="11">
- <a-form-model-item prop="cardholderCouponLimit.limitCount">
- <a-input-number v-model="form.cardholderCouponLimit.limitCount" :min="1" :max="999999" placeholder="限领份数" class="input-number-s" />
- </a-form-model-item>
- </a-col>
- <a-col :span="4">份/每</a-col>
- <a-col :span="9">
- <a-form-model-item prop="cardholderCouponLimit.limitCondition">
- <a-select v-model="form.cardholderCouponLimit.limitCondition" placeholder="请选择">
- <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="未持卡会员" class="default-form-item form-item-required">
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item prop="normalCouponLimit.isLimit">
- <v-select
- ref="limitFlag"
- v-model="form.normalCouponLimit.isLimit"
- @change="selectChange('isLimitN')"
- showArrow
- placeholder="请选择"
- code="LIMIT_FLAG"></v-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.normalCouponLimit.isLimit == '1'">
- <a-row>
- <a-col :span="11">
- <a-form-model-item prop="normalCouponLimit.limitCount">
- <a-input-number v-model="form.normalCouponLimit.limitCount" :min="1" :max="999999" placeholder="限领份数" class="input-number-s" />
- </a-form-model-item>
- </a-col>
- <a-col :span="4">份/每</a-col>
- <a-col :span="9">
- <a-form-model-item prop="normalCouponLimit.limitCondition">
- <a-select v-model="form.normalCouponLimit.limitCondition" placeholder="请选择">
- <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="有效期" class="default-form-item form-item-required">
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item prop="validType">
- <a-select v-model="form.validType" :disabled="takeCount > 0" @change="selectChange('validType')" placeholder="请选择">
- <a-select-option :value="item.code" v-for="(item, index) in couponValidityList" :key="index">{{ item.dispName }}</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.validType == 'ABSOLUTE'">
- <a-form-model-item prop="timeRange">
- <a-range-picker v-model="form.timeRange" :disabled="takeCount > 0" @change="validDateChange" :disabled-date="disabledDate" format="YYYY-MM-DD" />
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.validType == 'RELATIVE'">
- <a-row>
- <a-col :span="16">
- <a-form-model-item prop="validDate">
- <a-input-number
- v-model="form.validDate"
- :disabled="takeCount > 0"
- :min="1"
- :max="999999"
- placeholder="请输入"
- class="input-number-s" />
- </a-form-model-item>
- </a-col>
- <a-col :span="8">天内有效</a-col>
- </a-row>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item label="适用洗车类型" prop="couponScopeList">
- <a-select v-model="form.couponScopeList" placeholder="请选择适用洗车类型" showArrow mode="multiple">
- <a-select-option v-for="item in itemQueryList" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="12">
- <a-form-model-item class="default-form-item form-item-required">
- <div slot="label" class="form-item-label">
- <a-tooltip
- placement="right"
- arrow-point-at-center
- title="已设置的适用洗车网点再次修改(尤其是减少使用网点)后,在【优惠券统计】中会保留原适用洗车网点的统计数据。"
- >
- 适用洗车网点
- <a-icon :style="{ fontSize: '17px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
- </a-tooltip>
- </div>
- <a-row :gutter="20">
- <a-col :span="9">
- <a-form-model-item prop="isStoreLimit">
- <a-select v-model="form.isStoreLimit" @change="selectChange('isStoreLimit')" placeholder="请选择">
- <a-select-option :value="item.code" v-for="(item, index) in isAllList" :key="index">{{ item.dispName }}</a-select-option>
- </a-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="15" v-if="form.isStoreLimit == '1'">
- <a-form-model-item prop="couponStoreList">
- <a-row :gutter="20">
- <a-col :span="15">
- 已选
- <strong>{{ form.couponStoreList.length }}</strong>
- 个
- </a-col>
- <a-col :span="9"><a-button type="primary" size="small" class="small-btn" @click="openOutletsModal = true">选择</a-button></a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model-item>
- </a-col>
- <a-col :span="24">
- <a-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" class="btn-cont">
- <a-button type="primary" @click="onSubmit">保存</a-button>
- <a-button class="resetForm" @click="onCancel">取消</a-button>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model>
-
- <choose-outlets :openOutletsModal="openOutletsModal" :storeList="form.couponStoreList" @close="closeChooseOutlets" />
- </a-modal>
- </template>
- <script>
- import { VSelect } from '@/components'
- import moment from 'moment'
- import ChooseOutlets from './ChooseOutlets.vue'
- import { itemQuery } from '@/api/car-wash'
- import { couponCreate, couponToUpdate, couponUpdate } from '@/api/coupons'
- export default {
- name: 'AddCouponModal',
- components: { VSelect, ChooseOutlets },
- props: {
- openModal: {
-
- type: Boolean,
- default: false
- },
- pageType: {
-
- type: String,
- default: ''
- },
- couponId: {
- type: String,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.openModal,
- form: {
- title: '',
- quotaLimit: '0',
- quota: '',
- couponType: 'VOUCHER',
- limitAmount: '',
- subAmount: '',
- ruleDesc: '',
- normalCouponLimit: {
- isLimit: '0',
- limitCount: '',
- limitCondition: 'monthly',
- userType: 'normal'
- },
- cardholderCouponLimit: {
- isLimit: '0',
- limitCount: '',
- limitCondition: 'monthly',
- userType: 'cardholder'
- },
- validType: 'NONE',
- timeRange: [],
- startTime: '',
- endTime: '',
- validDate: '',
- isOverlay: '0',
- scopeType: 'ITEM',
- couponScopeList: [],
- isStoreLimit: '0',
- couponStoreList: []
- },
- rules: {
- title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
- quota: [{ required: true, message: '请输入限制发放总量', trigger: 'blur' }],
- couponType: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
- limitAmount: [{ required: true, message: '请输入限额数值', trigger: 'blur' }],
- subAmount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
- 'normalCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
- 'cardholderCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
- timeRange: [{ required: true, message: '请选择日期范围', trigger: 'blur' }],
- validDate: [{ required: true, message: '请输入有效时长', trigger: 'blur' }],
- couponScopeList: [{ required: true, message: '请选择适用洗车类型', trigger: 'blur' }],
- couponStoreList: [{ required: true, message: '请选择适用洗车网点', trigger: 'blur' }]
- },
- isLimit: '0',
- isUnitList: [
-
- { dispName: '自然月', code: 'monthly' }
- ],
- couponValidityList: [
-
- { dispName: '不限', code: 'NONE' },
- { dispName: '固定日期', code: 'ABSOLUTE' },
- { dispName: '领取后', code: 'RELATIVE' }
- ],
- isAllList: [
-
- { dispName: '全部', code: '0' },
- { dispName: '部分', code: '1' }
- ],
- itemQueryList: [],
- openOutletsModal: false,
- takeCount: ''
- }
- },
- methods: {
- moment,
- range (start, end) {
- const result = []
- for (let i = start; i < end; i++) {
- result.push(i)
- }
- return result
- },
-
- disabledDate (current) {
-
- return current && current < moment().subtract(1, 'days')
- },
-
- validDateChange (date, dateString) {
- this.form.startTime = dateString[0]
- this.form.endTime = dateString[1]
- },
-
- onSubmit () {
- this.$refs.ruleForms.validate(valid => {
- if (valid) {
- const formData = JSON.parse(JSON.stringify(this.form))
- delete formData.timeRange
-
- const couponScopeArr = []
- formData.couponScopeList.map(item => { couponScopeArr.push({ scopeType: 'ITEM', scopeValue: item }) })
- formData.couponScopeList = couponScopeArr
- if (this.pageType == 'add') {
- formData.id = null
- this.couponCreate(formData)
- } else if (this.pageType == 'edit') {
- formData.id = String(this.couponId)
- this.couponUpdate(formData)
- }
- } else {
- return false
- }
- })
- },
-
- couponCreate (formData) {
- couponCreate(formData).then(res => {
- if (res.status == 200) {
- this.$message.success(res.message)
- this.$emit('success')
- } else {
- this.$message.error(res.message)
- }
- })
- },
-
- couponUpdate (formData) {
- couponUpdate(formData).then(res => {
- if (res.status == 200) {
- this.$message.success(res.message)
- this.$emit('success')
- } else {
- this.$message.error(res.message)
- }
- })
- },
-
- onCancel () {
- this.resetForm()
- this.isShow = false
- },
-
- closeChooseOutlets (val) {
- this.form.couponStoreList = []
- if (val) {
- val.map(item => {
- this.form.couponStoreList.push({ storeId: item })
- })
- }
- this.openOutletsModal = false
- },
-
- getCouponInfo (id) {
- couponToUpdate({ id: id }).then(res => {
- if (res.status == 200) {
- this.setVal(res.data)
- this.takeCount = res.data.takeCount
- }
- })
- },
-
- setVal (data) {
- const arr = [ 'title', 'couponType', 'quotaLimit', 'quota', 'ruleDesc', 'validType', 'isStoreLimit' ]
- arr.map(k => { this.form[k] = data[k] })
- if (data.couponType === 'FULLSUB') {
- this.form.limitAmount = data.limitAmount
- this.form.subAmount = data.subAmount
- } else if (data.couponType === 'VOUCHER') {
- this.form.subAmount = data.subAmount
- this.isLimit = Number(data.limitAmount) > 0 ? '1' : '0'
- this.form.limitAmount = data.limitAmount
- }
-
- this.form.cardholderCouponLimit = { isLimit: data.cardholderCouponLimit.isLimit, limitCount: data.cardholderCouponLimit.limitCount, limitCondition: data.cardholderCouponLimit.limitCondition, userType: data.cardholderCouponLimit.userType }
- this.form.normalCouponLimit = { isLimit: data.normalCouponLimit.isLimit, limitCount: data.normalCouponLimit.limitCount, limitCondition: data.normalCouponLimit.limitCondition, userType: data.normalCouponLimit.userType }
- if (data.validType === 'ABSOLUTE') {
- this.form.timeRange = [moment(data.startTimeGmt8Ymd, 'YYYY-MM-DD'), moment(data.endTimeGmt8Ymd, 'YYYY-MM-DD')]
- this.form.startTime = data.startTimeGmt8Ymd
- this.form.endTime = data.endTimeGmt8Ymd
- } else if (data.validType === 'RELATIVE') {
- this.form.validDate = data.validDate
- }
- this.form.couponScopeList = data.scopeValueList
- this.form.couponStoreList = data.couponStoreList
- },
-
- getItemQuery () {
- itemQuery({
- pageNo: 1,
- pageSize: 1000
- }).then(res => {
- if (res.status == 200) {
- this.itemQueryList = res.data.list || []
- } else {
- this.itemQueryList = []
- }
- })
- },
-
- selectChange (type) {
- if (type == 'couponType') {
- this.form.subAmount = ''
- this.form.limitAmount = ''
- this.isLimit = '0'
- } else if (type === 'isLimitE') {
- this.form.limitAmount = ''
- } else if (type === 'quotaLimit') {
- this.form.quota = ''
- } else if (type === 'isLimitC') {
- this.form.cardholderCouponLimit.limitCount = ''
- } else if (type === 'isLimitN') {
- this.form.normalCouponLimit.limitCount = ''
- } else if (type === 'validType') {
- this.form.timeRange = []
- this.form.startTime = ''
- this.form.endTime = ''
- this.form.validDate = ''
- } else if (type === 'isStoreLimit') {
- this.form.couponStoreList = []
- }
- },
-
- resetForm () {
- const emptyArr = [ 'title', 'quota', 'limitAmount', 'subAmount', 'ruleDesc', 'startTime', 'endTime', 'validDate' ]
- const zeroArr = [ 'quotaLimit', 'isOverlay', 'isStoreLimit' ]
- const array = [ 'timeRange', 'couponScopeList', 'couponStoreList' ]
- emptyArr.map(item => { this.form[item] = '' })
- zeroArr.map(item => { this.form[item] = '0' })
- array.map(item => { this.form[item] = [] })
- this.form.couponType = 'VOUCHER'
- this.form.cardholderCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'cardholder' }
- this.form.normalCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'normal' }
- this.form.validType = 'NONE'
- this.form.scopeType = 'ITEM'
- this.isLimit = '0'
- this.takeCount = ''
- }
- },
- watch: {
-
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
-
- isShow (val) {
- if (!val) {
- this.$emit('close')
- } else {
- this.resetForm()
- this.getItemQuery()
- }
- },
- couponId (newValue, oldValue) {
- if (newValue && this.isShow) {
- this.getCouponInfo(newValue)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .CouponModal {
- .c-title {
- padding: 0 0 10px;
- margin-bottom: 20px;
- border-bottom: 1px solid #e8e8e8;
- .bold-divider {
- width: 3px;
- background-color: #1890ff;
- }
- }
- .input-number-s {
- width: 90%;
- }
- .input-number-ms{
- width: 66%;
- margin: 0 5px;
- }
- .input-number-ls{
- width: 80%;
- margin-right: 8px;
- }
- .input-number-mj{
- width: 40%;
- }
- .unit {
- display: inline-block;
- width: 10%;
- text-align: center;
- }
- .btn-cont {
- text-align: center;
- .resetForm {
- margin-left: 10px;
- }
- }
- .default-form-item {
- margin-bottom: 0;
- }
- .form-item-label {
- display: inline-block;
- cursor: pointer;
- }
- .form-item-required {
- .ant-form-item-label {
- label:before {
- display: inline-block;
- margin-right: 4px;
- color: #f5222d;
- font-size: 14px;
- font-family: SimSun, sans-serif;
- line-height: 1;
- content: '*';
- }
- }
- }
- }
- </style>
|