<template>
|
<win-md :title="setting.title" @close="close" :width="'800px'">
|
<el-form v-loading="loading" ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
|
<el-form-item label="模板名称" prop="tempExpirationNotifyName">
|
<el-input v-model="formData.tempExpirationNotifyName" placeholder="" clearable maxlength="32" show-word-limit style="width: 400px"/>
|
</el-form-item>
|
<h1>临期前预警</h1>
|
<el-form-item label="临期前" prop="expireBefore1">
|
<el-input-number v-model="formData.expireBefore1" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.beforeManagerNotify1" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="beforeManagerNotifyUser1">
|
<el-button @click="chooseUser('beforeManagerNotifyUser1')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.beforeManagerNotifyUser1"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('beforeManagerNotifyUser1',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<el-form-item label="临期前" prop="expireBefore2">
|
<el-input-number v-model="formData.expireBefore2" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.beforeManagerNotify2" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="beforeManagerNotifyUser2">
|
<el-button @click="chooseUser('beforeManagerNotifyUser2')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.beforeManagerNotifyUser2"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('beforeManagerNotifyUser2',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<el-form-item label="临期前" prop="expireBefore3">
|
<el-input-number v-model="formData.expireBefore3" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.beforeManagerNotify3" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="beforeManagerNotifyUser3">
|
<el-button @click="chooseUser('beforeManagerNotifyUser3')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.beforeManagerNotifyUser3"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('beforeManagerNotifyUser3',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<h1>超期后预警</h1>
|
<el-form-item label="超期后" prop="expireAfter1">
|
<el-input-number v-model="formData.expireAfter1" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.afterManagerNotify1" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="afterManagerNotifyUser1">
|
<el-button @click="chooseUser('afterManagerNotifyUser1')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.afterManagerNotifyUser1"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('afterManagerNotifyUser1',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<el-form-item label="超期后" prop="expireAfter2">
|
<el-input-number v-model="formData.expireAfter2" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.afterManagerNotify2" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="afterManagerNotifyUser2">
|
<el-button @click="chooseUser('afterManagerNotifyUser2')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.afterManagerNotifyUser2"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('afterManagerNotifyUser2',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<el-form-item label="超期后" prop="expireAfter3">
|
<el-input-number v-model="formData.expireAfter3" :controls="false" :min="1" :max="10" :step="1" step-strictly style="width: 100px"></el-input-number>
|
<span style="margin-right: 10px">天</span>
|
<el-checkbox v-model="formData.afterManagerNotify3" :true-label="1" :false-label="0">通知项目经理</el-checkbox>
|
</el-form-item>
|
<el-form-item label="通知人员" prop="afterManagerNotifyUser3">
|
<el-button @click="chooseUser('afterManagerNotifyUser3')" type="primary" plain>选择人员</el-button>
|
<el-tag
|
v-for="(item,i) in formData.afterManagerNotifyUser3"
|
:key="item.id"
|
type="danger"
|
closable
|
@close="closeUser('afterManagerNotifyUser3',i)"
|
effect="plain">
|
{{ item.userName }}
|
</el-tag>
|
</el-form-item>
|
<h1>预警方式</h1>
|
<div style="margin-left: 50px;margin-bottom: 20px">
|
<el-checkbox v-model="formData.notifyWx" :true-label="1" :false-label="0">微信消息</el-checkbox>
|
<div style="margin-top: 20px">
|
<el-checkbox v-model="formData.notifyMobMsg" :true-label="1" :false-label="0">短信</el-checkbox>
|
<el-radio v-model="formData.notifyMobMsgWay" :label="0">自动发送</el-radio>
|
<el-radio v-model="formData.notifyMobMsgWay" :label="1">手动发送</el-radio>
|
</div>
|
</div>
|
<template v-if="formData.notifyMobMsg===1">
|
<el-form-item label="手机号" prop="notifyMob">
|
<el-input
|
v-model="formData.notifyMob"
|
type="textarea"
|
:rows="3"
|
maxlength="1024"
|
show-word-limit
|
/>
|
</el-form-item>
|
</template>
|
<el-form-item label="发送时间" prop="notifyTime">
|
<el-select v-model="formData.notifyTime" placeholder="">
|
<el-option
|
v-for="i in 24"
|
:key="i"
|
:label="(i-1)+'点'"
|
:value="i-1">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-form>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
<chooseUser v-if="chooseSetting.show" :setting="chooseSetting" @close="chooseSetting.show = false" @checkUsers="checkUsers"></chooseUser>
|
</win-md>
|
</template>
|
|
<script>
|
import winMd from '@/components/win/win-md'
|
import myButton from '@/components/myButton/myButton'
|
import chooseUser from "@/views/projectConfig/warningConfig/chooseUser";
|
import * as api from "@/api/projectConfig/warningConfig";
|
|
export default {
|
name: 'edit',
|
components: {winMd, myButton, chooseUser},
|
props: {
|
// setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
|
// 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
|
// 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
chooseSetting: {
|
title: '选择人员',
|
setting: [],
|
show: false
|
},
|
loading: false,
|
formData: {
|
tempExpirationNotifyName: '',
|
expireBefore1: undefined,
|
beforeManagerNotify1: '',
|
beforeManagerNotifyUser1: [],
|
expireBefore2: undefined,
|
beforeManagerNotify2: '',
|
beforeManagerNotifyUser2: [],
|
expireBefore3: undefined,
|
beforeManagerNotify3: '',
|
beforeManagerNotifyUser3: [],
|
expireAfter1: undefined,
|
afterManagerNotify1: '',
|
afterManagerNotifyUser1: [],
|
expireAfter2: undefined,
|
afterManagerNotify2: '',
|
afterManagerNotifyUser2: [],
|
expireAfter3: undefined,
|
afterManagerNotify3: '',
|
afterManagerNotifyUser3: [],
|
notifyWx: 0,
|
notifyMobMsg: 0,
|
notifyMobMsgWay: '',
|
notifyMob: '',
|
notifyTime: ''
|
},
|
rules: {
|
tempExpirationNotifyName: [
|
{required: true, message: '请输入模板名称', trigger: 'blur'},
|
],
|
notifyTime: [
|
{required: true, message: '请选择发送时间', trigger: 'blur'},
|
]
|
},
|
cur: ''
|
}
|
},
|
created() {
|
this.loading = true
|
this.getInfo()
|
},
|
methods: {
|
chooseUser(cur) {
|
this.cur = cur
|
this.chooseSetting.selections = this.formData[cur]
|
this.chooseSetting.show = true
|
},
|
closeUser(key, i) {
|
this.formData[key].splice(i, 1)
|
},
|
checkUsers(users) {
|
console.log(users)
|
this.formData[this.cur] = users
|
this.chooseSetting.show = false
|
this.cur = ''
|
},
|
getInfo() {
|
this.title = this.setting.title
|
if (this.setting.id != null) {
|
// 查询数据
|
api.getDetail({id: this.setting.id}).then(res => {
|
this.loading = false
|
this.formData = Object.assign(this.formData, res)
|
})
|
} else {
|
this.loading = false
|
}
|
},
|
close() {
|
this.formData = {
|
tempExpirationNotifyName: '',
|
expireBefore1: undefined,
|
beforeManagerNotify1: '',
|
beforeManagerNotifyUser1: [],
|
expireBefore2: undefined,
|
beforeManagerNotify2: '',
|
beforeManagerNotifyUser2: [],
|
expireBefore3: undefined,
|
beforeManagerNotify3: '',
|
beforeManagerNotifyUser3: [],
|
expireAfter1: undefined,
|
afterManagerNotify1: '',
|
afterManagerNotifyUser1: [],
|
expireAfter2: undefined,
|
afterManagerNotify2: '',
|
afterManagerNotifyUser2: [],
|
expireAfter3: undefined,
|
afterManagerNotify3: '',
|
afterManagerNotifyUser3: [],
|
notifyWx: 0,
|
notifyMobMsg: 0,
|
notifyMobMsgWay: '',
|
notifyMob: '',
|
notifyTime: ''
|
}
|
this.$emit('close')
|
},
|
save() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
const params = Object.assign({}, this.formData)
|
let check1 = ['expireBefore1','expireBefore2','expireBefore3','expireAfter1','expireAfter2','expireAfter3']
|
let check2 = ['beforeManagerNotifyUser1','beforeManagerNotifyUser2','beforeManagerNotifyUser3','afterManagerNotifyUser1','afterManagerNotifyUser2','afterManagerNotifyUser3']
|
if(!check1.some(key=>params[key])){
|
this.$message.error('请填写预警时间')
|
return
|
}
|
if(params.notifyWx===0&¶ms.notifyMobMsg===0){
|
this.$message.error('请设置预警方式')
|
return
|
}
|
if(params.notifyMobMsg===1&&!check2.some(key=>params[key].length>0)&¶ms.notifyMob===''){
|
this.$message.error('请设置通知人员')
|
return
|
}
|
if(params.notifyMobMsg===0&&!check2.some(key=>params[key].length>0)){
|
this.$message.error('请设置通知人员')
|
return
|
}
|
if(params.notifyMobMsg===1&¶ms.notifyMobMsgWay===''){
|
this.$message.error('请设置短信发送方式')
|
return
|
}
|
this.loading = true
|
api[params.id ? 'upd' : 'add'](params).then(res => {
|
this.loading = false
|
if (res) {
|
this.$message.success('保存成功！')
|
this.close()
|
this.$emit('search')
|
} else {
|
this.$message.error('保存失败')
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
} else {
|
this.$message.error('校验未通过，请检查。')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
h1 {
|
font-size: 18px;
|
color: #000;
|
font-weight: bold;
|
margin-bottom: 20px;
|
padding-left: 20px;
|
}
|
</style>
|
