487 lines
16 KiB
Vue
487 lines
16 KiB
Vue
<template>
|
||
<div class="container_hui">
|
||
<div class="cards-change">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
|
||
<el-form-item label="" prop="notificationName">
|
||
<el-input
|
||
v-model="queryParams.notificationName"
|
||
placeholder="请输入通知名称"
|
||
clearable
|
||
style="width: 240px;"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="notificationType">
|
||
<el-select v-model="queryParams.notificationType" placeholder="请选择通知类型" clearable
|
||
style="width: 240px;">
|
||
<el-option label="到期通知" value="到期通知"></el-option>
|
||
<el-option label="库存预警" value="库存预警"></el-option>
|
||
<el-option label="其他" value="其他"></el-option>
|
||
<!-- 添加其他选项 -->
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="recipientRoles">
|
||
<el-select v-model="queryParams.recipientRoles" placeholder="请选择接收角色" clearable style="width: 240px;">
|
||
<el-option v-for="item in dutyList1" :label="item.dutyName" :value="item.dutyId"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="templateStatus">
|
||
<el-select v-model="queryParams.templateStatus" placeholder="请选择通知状态" clearable style="width: 240px;">
|
||
<el-option label="启用" value="1"></el-option>
|
||
<el-option label="禁用" value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item style="float: right;margin-right: 0px">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleAdd">新增通知模板
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="height: 68vh;overflow: auto">
|
||
|
||
<el-table :data="tableData" style="width: 100%" border>
|
||
<el-table-column align="center" type="index" label="序号"></el-table-column>
|
||
<el-table-column align="center" prop="notificationName" label="通知名称"></el-table-column>
|
||
<el-table-column align="center" prop="notificationType" label="通知类型"></el-table-column>
|
||
<el-table-column align="center" prop="templateContent" label="模板内容"></el-table-column>
|
||
<el-table-column align="center" prop="recipientRolesName" label="接收角色"></el-table-column>
|
||
<el-table-column align="center" prop="templateStatus" label="模板状态">
|
||
<template slot-scope="scope">
|
||
<el-switch v-model="scope.row.templateStatus" @change="clickSwitch(scope.row)" active-color="#13ce66"
|
||
inactive-color="#ff4949">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="createName" label="创建人"></el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
|
||
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="edit(scope.row)"
|
||
v-hasPermi="['system:notify:editTemplate']"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="del(scope.row)"
|
||
v-hasPermi="['system:notify:deleteTemplate']"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
</div>
|
||
|
||
<el-dialog center :title="title" :close-on-click-modal="false" :visible.sync="open" width="42%" append-to-body>
|
||
<el-form :model="form" label-width="80px" >
|
||
<!-- 通知名称 -->
|
||
<el-form-item label="通知名称" :required="true">
|
||
<el-input v-model="form.notificationName" placeholder="请输入通知名称" ></el-input>
|
||
</el-form-item>
|
||
|
||
<!-- 通知类型 -->
|
||
<el-form-item label="通知类型" :required="true">
|
||
<el-select v-model="form.notificationType" placeholder="请选择通知类型" style="width: 100%">
|
||
<el-option label="到期通知" value="到期通知"></el-option>
|
||
<el-option label="库存预警" value="库存预警"></el-option>
|
||
<el-option label="其他" value="其他"></el-option>
|
||
<!-- 添加其他选项 -->
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 通知模板 -->
|
||
<el-form-item label="通知模板" :required="true">
|
||
<el-input type="textarea" v-model="form.templateContent" :rows="3" placeholder="请输入通知内容"
|
||
:maxlength="200" show-word-limit ></el-input>
|
||
<div>
|
||
<span @click="insertText('{油罐名称}')">{油罐名称}</span>
|
||
<span @click="insertText('{商品名称}')">{商品名称}</span>
|
||
<span @click="insertText('{挂账单位}')">{挂账单位}</span>
|
||
<span @click="insertText('{会员手机号}')">{会员手机号}</span>
|
||
</div>
|
||
|
||
</el-form-item>
|
||
|
||
<!-- 接收角色 -->
|
||
<el-form-item label="接收角色" :required="true">
|
||
<el-select v-model="form.recipientRoles" multiple placeholder="请选择角色" style="width: 100%">
|
||
<el-option v-for="item in dutyList1" :label="item.dutyName" :value="item.dutyId"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 模板状态 -->
|
||
<el-form-item label="模板状态" :required="true">
|
||
<el-switch v-model="form.templateStatus" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
||
</el-form-item>
|
||
|
||
<!-- 发送条件 -->
|
||
<el-form-item label="发送条件" style="margin-bottom: 10px" :required="true">
|
||
<div v-for="(condition, index) in form.conditions" :key="index" class="condition-group"
|
||
style="margin-bottom: 10px">
|
||
<el-select v-model="condition.field" placeholder="请选择条件" style="width: 35%;margin-right: 10px"
|
||
@change="changeField(index)">
|
||
<el-option label="商品库存量" value="商品库存量"></el-option>
|
||
<el-option label="剩余可挂账额度" value="剩余可挂账额度"></el-option>
|
||
<el-option label="车队总余额" value="车队总余额"></el-option>
|
||
<!-- 添加其他选项 -->
|
||
</el-select>
|
||
<el-select v-model="condition.operator" placeholder="请选择" style="width: 15%;margin-right: 10px">
|
||
<el-option label=">" value="大于"></el-option>
|
||
<el-option label="=" value="等于"></el-option>
|
||
<el-option label="<" value="小于"></el-option>
|
||
<!-- 添加其他选项 -->
|
||
</el-select>
|
||
<el-input v-model="condition.value" placeholder="请输入" style="width: 35%;margin-right: 10px">
|
||
<template slot="append">{{ condition.field != '商品库存量' ? '元' : '件' }}</template>
|
||
</el-input>
|
||
<el-button @click="removeCondition(index)" type="danger" icon="el-icon-delete" circle></el-button>
|
||
</div>
|
||
<el-button @click="addCondition(index)" type="primary" icon="el-icon-plus">添加条件</el-button>
|
||
</el-form-item>
|
||
|
||
<!-- 操作按钮 -->
|
||
<!-- <el-form-item>-->
|
||
|
||
<!-- </el-form-item>-->
|
||
</el-form>
|
||
<div style="display: flex; justify-content: center; align-items: center;margin-top: 30px">
|
||
<el-button @click="handleReset">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
||
|
||
</div>
|
||
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
import {deleteAppApi} from "../../../api/sys/app";
|
||
import {dutyList} from "../../../api/duty/duty";
|
||
import {deleteSysNotifyApi, getSysNotifyList, saveSysNotifyApi, updateSysNotifyApi} from "../../../api/sys/sysNotify";
|
||
|
||
export default {
|
||
name: "notify-mode",
|
||
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
dutyList1: [],
|
||
|
||
form: {
|
||
id: null,
|
||
notificationName: '',
|
||
notificationType: '',
|
||
templateContent: '',
|
||
recipientRoles: [],
|
||
dutyList: [],
|
||
templateStatus: true,
|
||
type: 0,
|
||
conditions: []
|
||
},
|
||
// { field: '', operator: '', value: '' }
|
||
|
||
deviceInfo: {
|
||
id: null, // 自增id
|
||
notificationName: '',//通知名称，字符长度最多100，不能为空
|
||
notificationType: '',//通知类型
|
||
templateContent: '',//模板内容
|
||
recipientRoles: '', // 接收角色，字符长度最多255，不能为空
|
||
templateStatus: true //模板状态
|
||
},
|
||
dutyNames: {}, // 用于存储每行的 dutyNames
|
||
// 是否显示弹出层
|
||
open: false,
|
||
title: "",
|
||
total: 0,
|
||
// 查询参数
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
orgName: '',
|
||
legalRepresentativeContact: '',
|
||
appStatus: '',
|
||
},
|
||
roleList: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getDutyList()
|
||
},
|
||
methods: {
|
||
// 获取角色信息
|
||
getRoleList1() {
|
||
let data = {
|
||
page: 1,
|
||
pageSize: 10000,
|
||
dutyType: 3
|
||
}
|
||
dutyList(data).then(res => {
|
||
this.roleList = res.data.records
|
||
})
|
||
},
|
||
getList() {
|
||
getSysNotifyList(this.queryParams).then(res => {
|
||
this.tableData = res.data.records;
|
||
this.total = res.data.total
|
||
console.log("this.form.conditions",this.form.conditions)
|
||
})
|
||
},
|
||
changeField(index) {
|
||
console.log("123", this.form.conditions)
|
||
console.log("123", index)
|
||
let field = this.form.conditions[index].field
|
||
let sum = 0
|
||
this.form.conditions.forEach(res => {
|
||
if (res.field === field) {
|
||
sum++
|
||
}
|
||
})
|
||
if (sum > 1) {
|
||
this.form.conditions.splice(index, 1)
|
||
this.$message({
|
||
type: 'info',
|
||
message: '条件不允许重复!'
|
||
});
|
||
}
|
||
},
|
||
|
||
// submitForm(formName) {
|
||
// this.$refs[formName].validate(valid => {
|
||
// if (valid) {
|
||
// // 表单验证通过，可以提交数据
|
||
// // 示例：调用 API 提交数据
|
||
// this.submitDeviceInfo();
|
||
// } else {
|
||
// // 表单验证失败，不执行任何操作
|
||
// return false;
|
||
// }
|
||
// });
|
||
// },
|
||
|
||
handleSubmit() {
|
||
this.open = false
|
||
|
||
// 在这里调用接口提交设备信息数据
|
||
console.log('提交设备信息数据:', this.form);
|
||
if (this.form.conditions.length === 0 || this.form.conditions[0].field == '') {
|
||
this.form.conditions = ''
|
||
this.$message({
|
||
type: 'info',
|
||
message: '请选择发送条件!'
|
||
});
|
||
return
|
||
} else {
|
||
this.form.conditions = JSON.stringify(this.form.conditions)
|
||
}
|
||
this.form.recipientRoles = JSON.stringify(this.form.recipientRoles)
|
||
|
||
if (this.form.id) {
|
||
updateSysNotifyApi(this.form).then(res => {
|
||
if (res.code === 200) {
|
||
this.getList()
|
||
this.open = false
|
||
}
|
||
})
|
||
} else {
|
||
saveSysNotifyApi(this.form).then(res => {
|
||
if (res.code === 200) {
|
||
this.getList()
|
||
this.open = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
handleReset() {
|
||
this.open = false
|
||
// this.form.conditions = []
|
||
|
||
},
|
||
handleQuery() {
|
||
this.getList()
|
||
},
|
||
resetQuery() {
|
||
this.queryParams = {
|
||
page: 1,
|
||
pageSize: 10,
|
||
deviceName: '',
|
||
},
|
||
this.getList()
|
||
},
|
||
handleAdd(e) {
|
||
this.clean()
|
||
this.open = true;
|
||
this.getDutyList()
|
||
this.form.conditions = [{}]
|
||
|
||
this.title = "增加通知模板"
|
||
},
|
||
edit(e) {
|
||
this.clean()
|
||
this.open = true;
|
||
this.title = "编辑通知模板"
|
||
this.getDutyList()
|
||
|
||
this.form = e
|
||
this.form.conditions = JSON.parse(this.form.conditions)
|
||
if (!this.form.conditions) {
|
||
this.form.conditions = []
|
||
}
|
||
this.form.recipientRoles = JSON.parse(this.form.recipientRoles)
|
||
console.log('提交设备信息数据:', this.deviceInfo);
|
||
|
||
},
|
||
del(e) {
|
||
|
||
this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteSysNotifyApi(e.id).then(res => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
});
|
||
this.getList()
|
||
}
|
||
})
|
||
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
insertText(data) {
|
||
this.form.templateContent = this.form.templateContent + data
|
||
},
|
||
addCondition() {
|
||
if (this.form.conditions.length > 2) {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '最多添加3个条件!'
|
||
});
|
||
return
|
||
} else {
|
||
if (!this.form.conditions) {
|
||
this.form.conditions = []
|
||
}
|
||
this.form.conditions.push({field: '', operator: '', value: ''});
|
||
}
|
||
},
|
||
removeCondition(index) {
|
||
this.form.conditions.splice(index, 1);
|
||
},
|
||
getDutyList() {
|
||
// this.loading = true;
|
||
let queryParams1 = {
|
||
page: 1,
|
||
pageSize: 10000
|
||
}
|
||
dutyList(queryParams1).then(res => {
|
||
this.dutyList1 = res.data.records;
|
||
// this.total1 = res.data.total;
|
||
// this.loading = false;
|
||
})
|
||
console.log("this.form.conditions",this.form.conditions)
|
||
},
|
||
xunhuanbanduan() {
|
||
this.dutyList.forEach(item => {
|
||
this.form.recipientRoles.forEach(res => {
|
||
if (item.id === this.form.dutyId) {
|
||
this.form.dutyName = item.dutyName
|
||
}
|
||
})
|
||
|
||
})
|
||
},
|
||
|
||
|
||
clickSwitch(data) {
|
||
updateSysNotifyApi(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '修改成功'
|
||
});
|
||
this.getList()
|
||
this.open = false
|
||
}
|
||
})
|
||
},
|
||
clean() {
|
||
this.deviceInfo = {
|
||
id: null, // 自增id
|
||
notificationName: '',
|
||
notificationType: '',
|
||
templateContent: '',
|
||
recipientRoles: [],
|
||
dutyList1: [],
|
||
templateStatus: true,
|
||
conditions: [
|
||
{field: '商品库存量', operator: '', value: ''},
|
||
{field: '剩余可挂账额度', operator: '', value: ''},
|
||
{field: '车队总余额', operator: '', value: ''}
|
||
]
|
||
}
|
||
this.form = {
|
||
id: null,
|
||
notificationName: '',
|
||
notificationType: '',
|
||
templateContent: '',
|
||
recipientRoles: [],
|
||
dutyList: [],
|
||
templateStatus: true,
|
||
type: 0,
|
||
conditions: [
|
||
{field: '商品库存量', operator: '', value: ''},
|
||
{field: '剩余可挂账额度', operator: '', value: ''},
|
||
{field: '车队总余额', operator: '', value: ''}
|
||
]
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.common-dialog > > > .el-upload--picture-card {
|
||
width: 60px;
|
||
height: 50px;
|
||
line-height: 60px;
|
||
}
|
||
.container_hui{
|
||
background: #fff;
|
||
margin: 10px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
|
||
}
|
||
.cards-change{
|
||
height: 81vh;
|
||
}
|
||
|
||
</style>
|
||
|