<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-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>
|
<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>
|
<div style="text-align: center">
|
<a-button type="primary" @click="addConditions"> 增加条件 </a-button>
|
</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,
|
//删除条件
|
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
|
}
|
},
|
//新增条件
|
addConditions(index) {
|
console.log(index)
|
this.clientConfigsList.clientConfigs.push({})
|
},
|
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: [{}],
|
})
|
},
|
edit(record) {
|
console.log(record)
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
// if (record.id !== undefined) {
|
// // 新增编辑的特殊操作写在这里
|
// }
|
this.visible = true
|
this.model = Object.assign({}, record)
|
this.clientConfigsList = record
|
},
|
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
|
}
|
for (let k in el) {
|
if (el[k] == '' || el[k].length == '0') {
|
isEmpty = true
|
}
|
}
|
if (!el.timeStr || !el.countRef || !el.countType || !el.countNum) {
|
isEmpty = true
|
if (el.countRef == 0 || el.countNum == 0) {
|
isEmpty = false
|
}
|
}
|
})
|
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>
|
