<template>
|
<a-modal
|
:title="title"
|
:width="drawerWidth"
|
:visible="visible"
|
@cancel="close"
|
@ok="handleSubmit"
|
style="overflow: auto; padding-bottom: 53px"
|
>
|
<a-spin :spinning="confirmLoading">
|
<div>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="客户类型">
|
<a-input
|
style="width: 300px"
|
:disabled="clientConfigsList.id == 1 || clientConfigsList.id == 2"
|
placeholder="请输入客户类型"
|
v-model="clientConfigsList.clientName"
|
></a-input>
|
</a-form-item>
|
<div v-if="!clientConfigsList.clientConfigs || clientConfigsList.clientConfigs.length === 0" style="text-align: center">
|
<a-button type="primary" @click="addConditions"> 添加规则 </a-button>
|
</div>
|
<div v-for="(subItem, subIndex) in clientConfigsList.clientConfigs" :key="subIndex">
|
<div style="display: flex">
|
<div>条件{{ subIndex + 1 }}：</div>
|
<a-popconfirm
|
v-show="clientConfigsList.clientConfigs.length > 1"
|
title="确定删除?"
|
ok-text="确认"
|
cancel-text="取消"
|
@confirm="delConditions(subIndex)"
|
>
|
<a style="color: red" href="#">删除</a>
|
</a-popconfirm>
|
</div>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="时间范围">
|
<a-select
|
style="width: 300px"
|
v-model="subItem.timeStr"
|
@change="timeChange($event, subIndex)"
|
placeholder="请选择"
|
>
|
<a-select-option value="7,DAYS"> 近7天 </a-select-option>
|
<a-select-option value="30,DAYS"> 近30天 </a-select-option>
|
<a-select-option value="3,MONTHS"> 近3月 </a-select-option>
|
<a-select-option value="6,MONTHS"> 近6月 </a-select-option>
|
<a-select-option value="1,YEARS"> 近1年 </a-select-option>
|
</a-select>
|
</a-form-item>
|
<!-- 规则类型选择：加油频次 OR 加油趋势 -->
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则类型">
|
<a-select
|
style="width: 300px"
|
v-model="subItem.ruleType"
|
placeholder="请选择"
|
@change="ruleTypeChange($event, subIndex)"
|
>
|
<a-select-option :value="1"> 加油频次 </a-select-option>
|
<a-select-option :value="2"> 加油趋势 </a-select-option>
|
</a-select>
|
</a-form-item>
|
<!-- 加油频次配置（ruleType=1时显示） -->
|
<div v-show="subItem.ruleType == 1">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="加油频次">
|
<a-select
|
:disabled="subItem.timeStr == '7,DAYS' || subItem.timeStr == '30,DAYS'"
|
style="width: 300px"
|
v-model="subItem.countType"
|
placeholder="请选择"
|
>
|
<a-select-option :value="1"> 累计 </a-select-option>
|
<a-select-option :value="2"> 每月 </a-select-option>
|
</a-select>
|
<div style="display: flex">
|
<a-select style="width: 150px" v-model="subItem.countRef" placeholder="请选择">
|
<a-select-option :value="1"> 大于 </a-select-option>
|
<a-select-option :value="0"> 等于 </a-select-option>
|
<a-select-option :value="-1"> 小于 </a-select-option>
|
</a-select>
|
<a-input
|
style="width: 150px"
|
placeholder="请输入次数"
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
|
v-model="subItem.countNum"
|
></a-input>
|
</div>
|
</a-form-item>
|
</div>
|
<!-- 加油趋势配置（ruleType=2时显示） -->
|
<div v-show="subItem.ruleType == 2">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="加油趋势">
|
<a-select
|
style="width: 300px"
|
v-model="subItem.countTrend"
|
placeholder="请选择"
|
>
|
<a-select-option :value="1"> 稳定 </a-select-option>
|
<a-select-option :value="2"> 减少 </a-select-option>
|
</a-select>
|
<div v-if="subItem.countTrend == 1" style="color: #999; font-size: 12px; margin-top: 5px;">
|
稳定：历史月加油次数≥次数 且 近期月加油次数≥次数
|
</div>
|
<div v-if="subItem.countTrend == 2" style="color: #999; font-size: 12px; margin-top: 5px;">
|
减少：历史月加油次数≥次数 但 近期月加油次数<次数
|
</div>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="历史月数">
|
<a-select
|
style="width: 140px"
|
v-model="subItem.historyMonths"
|
placeholder="历史月数"
|
>
|
<a-select-option :value="3"> 3个月 </a-select-option>
|
<a-select-option :value="6"> 6个月 </a-select-option>
|
<a-select-option :value="9"> 9个月 </a-select-option>
|
<a-select-option :value="12"> 12个月 </a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="近期月数">
|
<a-select
|
style="width: 140px"
|
v-model="subItem.recentMonths"
|
placeholder="近期月数"
|
>
|
<a-select-option :value="1"> 1个月 </a-select-option>
|
<a-select-option :value="2"> 2个月 </a-select-option>
|
<a-select-option :value="3"> 3个月 </a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="固定加油次数">
|
<a-input
|
style="width: 150px"
|
placeholder="每月固定次数"
|
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
|
onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"
|
v-model="subItem.countNum"
|
></a-input>
|
</a-form-item>
|
</div>
|
<div style="text-align: center" v-if="subIndex === clientConfigsList.clientConfigs.length - 1">
|
<a-button type="primary" @click="addConditions"> 增加条件 </a-button>
|
</div>
|
</div>
|
</div>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { postAction, putAction } from '@tievd/cube-block/lib/api/manage'
|
import moment from 'moment'
|
|
export default {
|
name: 'ActivityModal',
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
drawerWidth: 700,
|
model: {},
|
validatorRules: {
|
clientName: {
|
rules: [{ required: true, message: '活动名称不能为空' }],
|
},
|
},
|
clientConfigsList: [
|
{
|
clientName: '',
|
clientConfigs: [],
|
},
|
],
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 },
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 },
|
},
|
orgCodes: '',
|
confirmLoading: false,
|
}
|
},
|
|
methods: {
|
moment,
|
buildCondition(condition = {}) {
|
return Object.assign(
|
{
|
ruleType: 1,
|
timeStr: '3,MONTHS',
|
countType: 2,
|
countRef: 1,
|
countNum: 3,
|
countTrend: null,
|
historyMonths: null,
|
recentMonths: null,
|
},
|
condition
|
)
|
},
|
//删除条件
|
delConditions(index) {
|
console.log(index)
|
this.clientConfigsList.clientConfigs.splice(index, 1)
|
},
|
timeChange(e, index) {
|
if (e == '7,DAYS' || e == '30,DAYS') {
|
this.clientConfigsList.clientConfigs[index].countType = 1
|
}
|
},
|
trendChange(e, index) {
|
// 选择趋势时，设置默认值
|
if (e > 0) {
|
this.clientConfigsList.clientConfigs[index].historyMonths = 3
|
this.clientConfigsList.clientConfigs[index].recentMonths = 3
|
} else {
|
// 清除趋势配置
|
this.clientConfigsList.clientConfigs[index].historyMonths = null
|
this.clientConfigsList.clientConfigs[index].recentMonths = null
|
}
|
},
|
ruleTypeChange(e, index) {
|
let target = this.clientConfigsList.clientConfigs[index]
|
// 切换规则类型时，清空对应的配置
|
if (e == 1) {
|
// 加油频次：清除趋势配置
|
Object.assign(target, {
|
ruleType: 1,
|
countTrend: null,
|
historyMonths: null,
|
recentMonths: null,
|
countType: target.countType || 2,
|
countRef: target.countRef || 1,
|
})
|
} else if (e == 2) {
|
// 加油趋势：清除频次配置，设置默认值
|
Object.assign(target, {
|
ruleType: 2,
|
countType: 2,
|
countRef: 1,
|
countTrend: target.countTrend || 1,
|
historyMonths: target.historyMonths || 3,
|
recentMonths: target.recentMonths || 3,
|
})
|
}
|
},
|
//新增条件
|
addConditions(index) {
|
console.log(index)
|
this.clientConfigsList.clientConfigs.push(this.buildCondition())
|
},
|
disabledDate(current) {
|
// Can not select days before today and today
|
|
return current && current < moment().startOf('day')
|
},
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
add() {
|
this.edit({
|
clientName: '',
|
clientConfigs: [this.buildCondition()],
|
})
|
},
|
edit(record) {
|
console.log(record)
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
// if (record.id !== undefined) {
|
// // 新增编辑的特殊操作写在这里
|
// }
|
this.visible = true
|
this.model = Object.assign({}, record)
|
this.clientConfigsList = Object.assign({}, record, {
|
clientConfigs: (record.clientConfigs || []).length
|
? record.clientConfigs.map((item) => this.buildCondition(item))
|
: [],
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
this.model = {}
|
this.orgCodes = ''
|
},
|
handleSubmit() {
|
console.log(this.clientConfigsList)
|
if (this.clientConfigsList.clientName.length == 0) {
|
this.$message.error('请填写客户类型')
|
return
|
}
|
var isEmpty = false
|
this.clientConfigsList.clientConfigs.map((el) => {
|
if (JSON.stringify(el) == '{}') {
|
isEmpty = true
|
}
|
// 根据规则类型校验
|
if (el.ruleType == 1) {
|
// 加油频次：检查时间范围、次数类型、关系、次数
|
if (!el.timeStr || !el.countRef || !el.countType || !el.countNum) {
|
isEmpty = true
|
}
|
} else if (el.ruleType == 2) {
|
// 加油趋势：检查时间范围、趋势、历史月数、近期月数、次数
|
if (!el.timeStr || !el.countTrend || !el.historyMonths || !el.recentMonths || !el.countNum) {
|
isEmpty = true
|
}
|
} else {
|
// 未选择规则类型
|
isEmpty = true
|
}
|
})
|
if (isEmpty) {
|
this.$message.error('请完整填写数据')
|
return
|
}
|
|
// 触发表单验证
|
this.form.validateFields(async (err, values) => {
|
if (!err) {
|
try {
|
this.confirmLoading = true
|
let formData = Object.assign(this.clientConfigsList, values)
|
let res = null
|
if (!this.model.id) {
|
// 新增
|
res = await postAction('/jyz/clientConfig/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/clientConfig/edit', formData)
|
}
|
if (res.success) {
|
this.$message.success(res.message)
|
this.$emit('ok')
|
}
|
} catch (err) {
|
this.$message.error(err.message)
|
} finally {
|
this.confirmLoading = false
|
this.close()
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
