postdischarge-ui/src/views/manage/template/index.vue
2024-06-17 10:32:48 +08:00

745 lines
25 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="left" 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="wechatTemplateName" label-width="100px">
<el-input v-model="queryParams.wechatTemplateName" placeholder="请输入微信模版名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="模板ID" prop="templateId">
<el-input v-model="queryParams.templateId" placeholder="请输入模板ID" clearable
@keyup.enter.native="handleQuery" />
</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="wechatTemplateName" />
<el-table-column label="模板ID" align="center" prop="templateId" />
<el-table-column label="模板来源" align="center" prop="templateSource">
<template slot-scope="scope">
{{ scope.row.templateSource == "WE_CHAT_APPLET" ? "小程序" : "" }}
{{ scope.row.templateSource == "WE_CHAT_OFFICIAL_ACCOUNT" ? "公众号" : "" }}
</template>
</el-table-column>
<el-table-column label="适用任务类型" align="center" prop="suitTaskTypeName" :show-overflow-tooltip="true" />
<el-table-column label="病种名称" align="center" prop="diseaseTypeName" />
<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="wechatTemplateName">
<el-input v-model="form.wechatTemplateName" placeholder="请输入微信模板名称" />
</el-form-item>
<el-form-item label="模板ID" prop="templateId" v-if="title == '修改微信模板'">
<el-input v-model="form.templateId" placeholder="请输入模板ID" onKeyUp="value=value.replace(/[\W]/g,'')"
disabled />
</el-form-item>
<el-form-item label="微信排序" prop="templateSort">
<el-input-number v-model="form.templateSort" controls-position="right" :min="0" placeholder="请输入微信排序"
style="width: 350px" />
</el-form-item>
<el-form-item label="模板内容" prop="templateContent">
<el-input v-model="form.templateContent" placeholder="请输入模板内容" type="textarea" maxlength="300" />
<!-- <editor v-model="form.templateContent" :min-height="192"/> -->
</el-form-item>
<el-form-item label="模板来源" prop="templateSource">
<el-select v-model="form.templateSource" 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="suitTaskTypeId">
<el-select v-model="form.suitTaskTypeIds" placeholder="请选择" style="width: 350px" multiple>
<el-option v-for="item in type" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode">
</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 { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, listWechatTemplateNum, typelist } from "@/api/manage/template";
import { department, listDisease } from "@/api/manage/script";
export default {
name: "Template",
data() {
//验证身份证
var isCardId = (rule, value, callback) => {
// console.log(value.length,rule)
// console.log(this.form.templateSort.length,'90')
if (value == null) {
callback(new Error("微信排序不能为空"));
} else {
const regex = /^\d{1,10}$/; // 正则表达式,限制最多十位数字
const isValid = regex.test(this.inputValue);
// const reg =
// /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
// const card = reg.test(value);
if (!isValid) {
callback(new Error("输入不合法请输入最多十位数字"));
} else {
callback();
}
}
};
return {
obj: null,
count: '',//全部
maxTableHeight: undefined,
itemname: null,
departmentName: null,
diseaseTypeName: null,
name: '',
departmentId: null,
DepartmentoList: [],//左侧数组
// 左侧传值
querydepartmen: {
departmentName: "",
// pageNum: 1,
// pageSize: 10,
},
options: [{
value: 'WE_CHAT_APPLET',
label: '小程序'
}, {
value: 'WE_CHAT_OFFICIAL_ACCOUNT',
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,
},
listdisease: [],
diseasetotal: 0,
optionsDisease: [],
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 微信模板信息表格数据
templateList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
wechatTemplateName: null,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
templateId: null,
templateContent: null,
templateSource: null,
templateSort: null,
templateRemark: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
templateSort: [
{ required: true, message: "111111111111", trigger: "blur", }
],
wechatTemplateName: [
{ required: true, message: "微信模板名称不能为空", trigger: "blur" }
],
// templateId: [
// { required: true, message: "模板ID不能为空", trigger: "blur" }
// ],
templateSource: [
{ required: true, message: "模板来源不能为空", trigger: "blur" }
],
dictCode: [
{ required: true, message: "适用数据类型不能为空", trigger: "blur" }
],
departmentId: [
{ required: true, message: "所属科室名称不能为空", trigger: "blur" }
],
}
};
},
watch: {
name(val) {
this.querydepartmen.departmentName = val
this.Departmentlist();
},
'form.templateSort'(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();
},
mounted() {
this.getMaxTableHeight()
this.screenChange()
},
methods: {
/** 查询微信模板信息列表 */
getList() {
this.loading = true;
listTemplate(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;
listWechatTemplateNum(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) {
this.itemname = item.id
this.departmentName = item.departmentName
this.loading = true;
this.queryParams.departmentId = this.itemname
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 = '请选择病种';
this.innerVisibleshow = false;
},
// 病种列表
infodisease() {
listDisease(this.querydisease).then((response) => {
this.listdisease = response.rows;
this.diseasetotal = response.total;
this.loading = false;
});
},
// 点击病种
clickdisease() {
if (this.departmentName == '请选择科室') {
this.$modal.msgError("请先选择科室");
} else {
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;
},
// 重置
resetdisease() {
querydisease = {
pageNum: 1,
pageSize: 10,
};
this.infodisease()
},
canceldiseases() {
this.diseaseshowst = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
templateSort: undefined,
departmentId: null,
dictCode: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
templateId: null,
templateContent: null,
templateSource: null,
templateRemark: 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();
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();
this.typelistdata();
getTemplate(id).then(response => {
this.form = response.data;
this.form.suitTaskTypeIds = response.data.suitTaskTypeIds
if (!response.data.diseaseTypeName || response.data.diseaseTypeName == "") {
this.diseaseTypeName = "请选择病种"
} else {
this.diseaseTypeName = response.data.diseaseTypeName
}
this.departmentName = response.data.departmentName
if (!this.form.templateSort) {
this.form.templateSort = undefined
}
this.open = true;
this.title = "修改微信模板";
});
},
/** 提交按钮 */
submitForm() {
console.log(this.form)
// return
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
this.form.diseaseTypeName = this.diseaseTypeName
if (this.diseaseTypeName == "请选择病种") {
this.form.diseaseTypeName = null
} else {
this.form.diseaseTypeName = this.diseaseTypeName
}
console.log(this.form, 'this.form')
// return
updateTemplate(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.Departmentlist();
});
} 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
}
addTemplate(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 delTemplate(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;
}
.left {
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;
}
.app-container {
padding: 20px 0 0 20px !important;
}
::v-deep .el-row {
height: 100% !important;
}
</style>