postdischarge-ui/src/views/manage/message/index.vue
2024-06-16 15:31:29 +08:00

806 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container" ref="layout">
<el-row :gutter="20">
<el-col :span="5">
<div class="leftmessage" ref="box">
<div class="name">科室名称</div>
<div>
<el-input v-model="name" placeholder="请输入科室名称" clearable @keyup.enter.native="handleQuery" />
</div>
<div class="listitem">
<div :class="itemname == null ? 'allactive' : 'all'" @click="itemdata()">
全部
</div>
<span class="count">{{ count }}</span>
</div>
<div class="listitem" v-for="(item, index) in DepartmentoList" :key="index" @click="itemdata(item)">
<div :class="itemname == item.id ? 'allactive' : 'all'">
{{ item.departmentName }}
</div>
<span class="count">{{ item.countNum }}</span>
</div>
</div>
</el-col>
<el-col :span="19" :xs="24">
<div ref="topform" class="form">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px">
<el-form-item label="短信模板名称" prop="textMessageName" label-width="100px">
<el-input v-model="queryParams.textMessageName" placeholder="请输入微信模版名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="模板ID" prop="textMessageId">
<el-input v-model="queryParams.textMessageId" placeholder="请输入模板ID" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="短信状态" prop="textMessageStatus">
<el-select v-model="queryParams.textMessageStatus" placeholder="请选择短信通道">
<el-option v-for="item in optionstext" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<div ref="mb8" class="mb8">
<el-row :gutter="10" class="">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['manage:template:add']">新增短信模版</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</div>
<div ref="table">
<el-table :max-height="maxTableHeight" v-loading="loading" :data="templateList"
@selection-change="handleSelectionChange">
<el-table-column type="index" width="55" align="center" label="序号" />
<el-table-column label="短信模板名称" align="center" prop="textMessageName" :show-overflow-tooltip="true" />
<el-table-column label="短信ID" align="center" prop="textMessageId" :show-overflow-tooltip="true" />
<el-table-column label="短信内容" align="center" prop="textMessageContent" :show-overflow-tooltip="true" />
<el-table-column :show-overflow-tooltip="true" label="适用任务类型" align="center" prop="suitTaskTypeName">
<template slot-scope="scope">
{{
scope.row.suitTaskTypeName != "null"
? scope.row.suitTaskTypeName
: ""
}}
</template>
</el-table-column>
<el-table-column label="短信通道" align="center" prop="textMessageChannel">
<template slot-scope="scope">
{{
scope.row.textMessageChannel == "WATER_DROPLET_PLATFORM"
? "水滴平台"
: ""
}}
</template>
</el-table-column>
<el-table-column label="短信状态" align="right" prop="textMessageStatus" width="90px">
<!-- <template slot-scope="scope">
{{ scope.row.textMessageStatus == "GROUNDING" ? "上架" : "" }}
{{ scope.row.textMessageStatus == "OFF_SHELF" ? "下架" : "" }}
</template> -->
<template slot-scope="scope">
<span slot="reference" v-if="scope.row.textMessageStatus == 'GROUNDING'">
<i class="dotClass" style="background-color: springgreen"></i>上架
</span>
<span slot="reference" v-if="scope.row.textMessageStatus == 'OFF_SHELF'">
<i class="dotClass" style="background-color: red"></i>下架
</span>
</template>
</el-table-column>
<el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
<!-- <el-table-column
label="短信排序"
align="center"
prop="textMessageSort"
/> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['manage:template:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['manage:template:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
</el-col>
</el-row>
<!-- 添加或修改短信模板信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-form-item label="短信模板名称" prop="textMessageName">
<el-input v-model="form.textMessageName" placeholder="请输入短信模板名称" />
</el-form-item>
<el-form-item label="短信ID" prop="textMessageId" v-if="title == '修改短信模板信息'">
<el-input v-model="form.textMessageId" placeholder="请输入短信ID" onKeyUp="value=value.replace(/[\W]/g,'')"
disabled />
</el-form-item>
<el-form-item label="短信排序" prop="textMessageSort">
<el-input-number v-model="form.textMessageSort" controls-position="right" :min="0" placeholder="请输入短信排序"
style="width: 350px" />
</el-form-item>
<el-form-item label="短信内容" prop="textMessageContent">
<el-input v-model="form.textMessageContent" placeholder="请输入短信内容" type="textarea" maxlength="300" />
</el-form-item>
<el-form-item label="适用任务类型" prop="suitTaskTypeIds">
<el-select v-model="form.suitTaskTypeIds" placeholder="请选择适用任务类型" style="width: 350px" multiple>
<el-option v-for="item in type" :key="item.id" :label="item.dictLabel" :value="item.dictCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="短信通道" prop="textMessageChannel">
<el-select v-model="form.textMessageChannel" placeholder="请选择短信通道" style="width: 350px">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="短信状态" prop="textMessageStatus">
<el-select v-model="form.textMessageStatus" placeholder="请选择短信状态" style="width: 350px">
<el-option v-for="item in optionstext" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室名称" prop="departmentId">
<el-button type="" v-if="departmentName == '请选择科室'" @click="clickinnerVisible()" style="
width: 350px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
">{{ departmentName }}</el-button>
<el-button @click="clickinnerVisible()" type="" v-else style="
width: 350px;
text-align: left;
height: 36px;
padding-left: -10px;
overflow: hidden;
">{{ departmentName }}</el-button>
</el-form-item>
<el-form-item label="病种名称" prop="diseaseTypeName">
<el-button type="" v-if="diseaseTypeName == '请选择病种'" @click="clickdisease()" style="
width: 350px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
">{{ diseaseTypeName }}</el-button>
<el-button @click="clickdisease()" type="" v-else style="
width: 350px;
text-align: left;
height: 36px;
padding-left: -10px;
overflow: hidden;
">{{ diseaseTypeName }}</el-button>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 科室弹框 -->
<el-dialog title="" :visible.sync="innerVisibleshow" width="1000px" append-to-body
:before-close="innerVisiblecancel">
<el-form ref="queryForm" :model="informationqueryParams" :rules="rules" label-width="80px" :inline="true">
<el-form-item label="科室名称" prop="departmentName" label-width="120">
<el-input v-model="informationqueryParams.departmentName" placeholder="请输入科室名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="informationInfoinfo">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="addresetQuerylist">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="infolist" @cell-dblclick="nurseclick" v-loading="loading">
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button type="primary" style="width: 15px; height: 15px" v-if="form.departmentId == scope.row.id" circle
@click="nurseclick(scope.row)"></el-button>
<el-button v-else style="width: 15px; height: 15px" circle @click="nurseclick(scope.row)"></el-button>
</template>
</el-table-column>
<el-table-column property="departmentName" label="科室名称" align="center" :show-overflow-tooltip="true">
</el-table-column>
</el-table>
<pagination v-show="totaldepartment > 0" :total="totaldepartment" :page.sync="informationqueryParams.pageNum"
:limit.sync="informationqueryParams.pageSize" @pagination="informationInfoinfo" />
</el-dialog>
<!-- 病种弹框 -->
<el-dialog title="" :visible.sync="diseaseshowst" width="1000px" append-to-body :before-close="canceldiseases">
<el-form ref="queryForm" :model="querydisease" :rules="rules" label-width="80px" :inline="true">
<el-form-item label="病种名称" prop="diseaseTypeName" label-width="120">
<el-input v-model="querydisease.diseaseTypeName" placeholder="请输入病种名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="infodisease">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetdisease">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="listdisease" @cell-dblclick="nurseclickdisease" v-loading="loading">
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button type="primary" style="width: 15px; height: 15px" v-if="form.diseaseTypeId == scope.row.id" circle
@click="nurseclickdisease(scope.row)"></el-button>
<el-button v-else style="width: 15px; height: 15px" circle
@click="nurseclickdisease(scope.row)"></el-button>
</template>
</el-table-column>
<el-table-column property="diseaseTypeName" label="病种名称" align="center" :show-overflow-tooltip="true">
</el-table-column>
</el-table>
<pagination v-show="diseasetotal > 0" :total="diseasetotal" :page.sync="querydisease.pageNum"
:limit.sync="querydisease.pageSize" @pagination="infodisease" />
</el-dialog>
</div>
</template>
<script>
import { listMessage, getMessage, delMessage, addMessage, updateMessage, listMessageNum } from "@/api/manage/message";
import { typelist } from "@/api/manage/template";
import { department, listDisease } from "@/api/manage/script";
export default {
name: "Template",
data() {
return {
obj: null,
itemname: null,
departmentName: null,
diseaseTypeName: null,
name: '',
departmentId: null,
count: '',//全部
DepartmentoList: [],//左侧数组
// 左侧传值
querydepartmen: {
departmentName: "",
// pageNum: 1,
// pageSize: 10,
},
optionstext: [{
value: 'GROUNDING',
label: '上架'
},
{
value: 'OFF_SHELF',
label: '下架'
}],
options: [{
value: 'WATER_DROPLET_PLATFORM',
label: '水滴平台'
},],
type: [],//类型
innerVisibleshow: false, //科室弹框
// 科室
informationqueryParams: {
pageNum: 1,
pageSize: 10,
departmentName: null,
},
infolist: [],
totaldepartment: 0,
diseaseshowst: false,//病种弹框
querydisease: {
pageNum: 1,
pageSize: 10,
diseaseTypeName: null,
departmentId: null,
},
maxTableHeight: undefined,
listdisease: [],
diseasetotal: 0,
optionsDisease: [],
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 微信模板信息表格数据
templateList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
textMessageId: null,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
textMessageName: null,
textMessageContent: null,
textMessageChannel: null,
textMessageStatus: null,
textMessageSort: null,
textMessageRemark: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
textMessageSort: [
{ required: true, message: "短信排序不能为空", trigger: "blur" }
],
textMessageName: [
{ required: true, message: "短信模板名称不能为空", trigger: "blur" }
],
// textMessageId: [
// { required: true, message: "短信ID不能为空", trigger: "blur" }
// ],
textMessageContent: [
{ required: true, message: "短信内容不能为空", trigger: "blur" }
],
textMessageChannel: [
{ required: true, message: "短信通道不能为空", trigger: "blur" }
],
textMessageStatus: [
{ required: true, message: "短信状态不能为空", trigger: "blur" }
],
departmentId: [
{ required: true, message: "所属科室名称不能为空", trigger: "blur" }
],
}
};
},
mounted() {
this.getMaxTableHeight()
this.screenChange()
},
watch: {
name(val) {
this.querydepartmen.departmentName = val
this.Departmentlist();
},
'form.textMessageSort'(val) {
if (val) {
var name = ''
name = val.toString()
this.obj = name.split('')
// if (this.obj.length > 10) {
// this.$message({
// type: "error",
// message: "手术排序最大长度为十位请正确输入"
// });
// }
}
}
},
created() {
this.getList();
this.Departmentlist();
this.typelistdata();
},
methods: {
/** 查询微信模板信息列表 */
getList() {
this.loading = true;
listMessage(this.queryParams).then(response => {
this.templateList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 适用任务类型
typelistdata() {
var dictType = "suit_task_type"
typelist(dictType).then(response => {
this.type = response.data
})
},
// 类型点击事件
change(e) {
// this.form.suitTaskTypeName = this.type.find(f => f.dictCode == e).dictLabel
},
// 左侧科室列表
Departmentlist() {
this.loading = true;
listMessageNum(this.querydepartmen).then(response => {
this.DepartmentoList = response.data;
let sum = 0;
this.DepartmentoList.forEach((item) => {
if (item.countNum != null) {
console.log(item.countNum)
sum += item.countNum;
}
this.count = sum;
});
this.loading = false;
});
},
// 左侧科室
itemdata(item) {
if (item) {
console.log(item, '9999')
this.itemname = item.id
this.departmentName = item.departmentName
this.loading = true;
this.queryParams.departmentId = item.id
this.getList()
} else {
this.queryParams.departmentId = ''
this.itemname = null
this.getList()
}
},
// 点击科室
clickinnerVisible() {
this.innerVisibleshow = true;
if (this.itemname) {
this.informationqueryParams.departmentId = this.itemname
} else {
this.informationqueryParams.departmentId = null
}
this.informationInfoinfo();
},
// 科室列表
informationInfoinfo() {
department(this.informationqueryParams).then((response) => {
this.infolist = response.rows;
this.totaldepartment = response.total;
this.loading = false;
});
// this.informationqueryParams.page = 1;
},
// 科室名称重置
addresetQuerylist() {
this.informationqueryParams = {
pageNum: 1,
pageSize: 10,
};
this.informationInfoinfo();
},
innerVisiblecancel() {
this.innerVisibleshow = false;
},
// 科室名称圆点按钮
nurseclick(row) {
this.form.departmentId = row.id;
this.departmentName = row.departmentName;
this.form.diseaseTypeId = '';
this.diseaseTypeName = '请选择病种';
console.log(this.departmentName, '0000')
this.innerVisibleshow = false;
},
// 病种列表
infodisease() {
listDisease(this.querydisease).then((response) => {
this.listdisease = response.rows;
this.diseasetotal = response.total;
this.loading = false;
});
},
// 点击病种
clickdisease() {
console.log(this.form)
if (this.departmentName == '请选择科室') {
this.$modal.msgError("请先选择科室");
} else {
console.log(this.departmentName, '00000')
this.diseaseshowst = true;
this.querydisease.departmentId = this.form.departmentId
this.infodisease()
}
},
// 病种名称圆点按钮
nurseclickdisease(row) {
this.form.diseaseTypeId = row.id;
this.diseaseTypeName = row.diseaseTypeName;
this.diseaseshowst = false;
console.log(this.diseaseTypeName, '1121000')
},
// 重置
resetdisease() {
querydisease = {
pageNum: 1,
pageSize: 10,
};
this.infodisease()
},
canceldiseases() {
this.diseaseshowst = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
textMessageName: null,
textMessageId: null,
textMessageContent: null,
textMessageChannel: null,
textMessageStatus: null,
textMessageSort: undefined,
textMessageRemark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
suitTaskTypeIds: [],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.departmentId = null;
this.itemname = null;
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
console.log(this.form)
if (this.itemname) {
this.form.departmentName = this.departmentName
this.form.departmentId = this.itemname
} else if (this.itemname == null) {
this.departmentName = "请选择科室"
}
else {
this.departmentName = "请选择科室"
}
this.diseaseTypeName = "请选择病种"
this.open = true;
this.title = "新增短信模版";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
// this.getDisease();
getMessage(id).then(response => {
this.form = response.data;
if (!response.data.diseaseTypeName || response.data.diseaseTypeName == "") {
this.diseaseTypeName = "请选择病种"
} else {
this.diseaseTypeName = response.data.diseaseTypeName
}
this.departmentName = response.data.departmentName
this.form.suitTaskTypeIds = response.data.suitTaskTypeIds
if (!this.form.textMessageSort) {
this.form.textMessageSort = undefined
}
this.open = true;
this.title = "修改短信模板信息";
});
},
/** 提交按钮 */
submitForm() {
console.log(this.form)
this.$refs["form"].validate(valid => {
if (valid) {
if (this.obj.length > 10) {
this.$message({
type: "error",
message: "短信排序最大长度为十位请正确输入"
});
} else {
if (this.form.id != null) {
this.form.departmentName = this.departmentName
if (this.diseaseTypeName == "请选择病种") {
this.form.diseaseTypeName = null
} else {
this.form.diseaseTypeName = this.diseaseTypeName
}
updateMessage(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
if (this.diseaseTypeName == "请选择病种") {
this.form.diseaseTypeName = null
} else {
this.form.diseaseTypeName = this.diseaseTypeName
}
if (this.itemname) {
this.form.departmentName = this.departmentName
this.form.departmentId = this.itemname
} else {
this.form.departmentName = this.departmentName
}
addMessage(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.Departmentlist();
});
}
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除短信模板信息?').then(function () {
return delMessage(ids);
}).then(() => {
this.getList();
this.Departmentlist();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('manage/template/export', {
...this.queryParams
}, `template_${new Date().getTime()}.xlsx`)
},
// 获取表格最高高度
getMaxTableHeight() {
const windowInnerHeight = window.innerHeight // 屏幕可视高度
const layoutDiv = this.$refs.layout
const formDiv = this.$refs.topform
const mb8Div = this.$refs.mb8
this.maxTableHeight =
windowInnerHeight - 134 -
this.getBoxPadding(layoutDiv) -
this.getBoxHeight(mb8Div) -
this.getBoxHeight(formDiv)
},
// 屏幕resize监听
screenChange() {
// 屏幕resize监听事件一旦屏幕宽高发生变化就会执行resize
window.addEventListener('resize', this.getMaxTableHeight, true)
// 将屏幕监听事件移除
// 这步是必须的。离开页面时不移除,再返回,或者进入到别的有相同元素的页面会报错
// 或者将这里的方法直接写在beforeDestroy函数中也可以
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.getMaxTableHeight, true)
})
},
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
text-align: left;
}
.leftmessage {
height: calc(100vh - 119px);
overflow: auto;
.name {
font-weight: 700;
margin-bottom: 10px;
}
.listitem {
width: 100%;
height: 50px;
border-bottom: 1px solid #dcdfe6;
.count {
display: inline-block;
position: relative;
// right: -172px;
left: 210px;
color: #a4a6aa;
top: -35px;
font-size: 13px;
}
.all {
height: 50px;
line-height: 50px;
padding-left: 13px;
}
.allactive {
background: #e8f4ff;
height: 50px;
line-height: 50px;
padding-left: 13px;
border-left: 3px solid #4d9de7;
}
}
}
.button {
display: inline-block;
position: relative;
left: 20px;
top: -11px;
}
.dotClass {
width: 10px;
height: 10px;
border-radius: 50%;
display: block;
// margin-left: 10px; //这个用于圆点居中
position: relative;
top: 16px;
left: 25px;
}
.app-container {
padding: 20px 0 0 20px !important;
}
::v-deep .el-row {
height: 100% !important;
}
</style>