postdischarge-ui/src/views/manage/template/index.vue
2024-08-13 13:59:46 +08:00

773 lines
26 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">
<DepartmentList ref="DepartmentList" @clickdepartment="clickdepartment" :methods="'listWechatTemplateNum'">
</DepartmentList>
</el-col>
<el-col :span="19" :xs="24">
<div ref="topform" class="form">
<el-form :model="queryParams" ref="queryForms" 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"
:disabled="queryParams.hospitalAgencyId ? false : true"
v-hasPermi="['manage:template:add']"
>新增微信模版</el-button
>
<el-button
type="warning"
plain
icon="el-icon-upload2"
size="mini"
@click="handleUpload"
>导入</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="48" 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 prop="templateContent" label="模板内容" align="center" :show-overflow-tooltip="true">
</el-table-column>
<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" /> -->
<myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
:indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
</el-col>
</el-row>
<!-- 添加或修改微信模板信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="730px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline=true>
<el-form-item label="微信模板名称" prop="wechatTemplateName">
<el-input v-model="form.wechatTemplateName" placeholder="请输入微信模板名称" />
</el-form-item>
<el-form-item label="模板来源" prop="templateSource">
<el-select v-model="form.templateSource" placeholder="请选择" style="width:206px">
<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="departmentId">
<el-button type="" @click="clickinnerVisible()"
:style="form.departmentName == '请选择科室' ? 'color: #c0c4cc;' : ''" style="
width: 206px;
text-align: left;
height: 36px;
overflow: hidden;
">{{ form.departmentName }}</el-button>
</el-form-item>
<el-form-item label="病种名称" prop="diseaseTypeName">
<el-button type="" @click="clickdisease()" :style="form.diseaseTypeName == '请选择病种' ? 'color: #c0c4cc;' : ''"
style="
width:206px;
text-align: left;
height: 36px;
overflow: hidden;
">{{ form.diseaseTypeName }}</el-button>
</el-form-item>
<el-form-item label="模板ID" prop="templateId">
<el-input v-model="form.templateId" placeholder="请输入模板ID" onKeyUp="value=value.replace(/[\W]/g,'')"
/>
</el-form-item>
<el-form-item label="微信排序" prop="templateSort">
<el-input-number v-model="form.templateSort" controls-position="right" :min="0" placeholder="请输入微信排序" style="width:206px"
/>
</el-form-item>
<el-form-item label="适用数据类型" prop="suitTaskTypeId">
<el-select v-model="form.suitTaskTypeIds" placeholder="请选择" multiple style="width:206px">
<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="templateContent">
<el-input v-model="form.templateContent" placeholder="请输入模板内容" type="textarea" maxlength="300" :rows="10" />
<!-- <editor v-model="form.templateContent" :min-height="192"/> -->
</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">
<div style="padding-bottom: 23px;">
<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>
</div>
<myPagination v-show="totaldepartment > 0" :total="totaldepartment" :pageSize="informationqueryParams.pageSize"
:indexFromWrap="informationqueryParams.pageNum" @updateCPage="updateCPagetwo"></myPagination>
<!-- <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">
<div style="padding-bottom: 23px;">
<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>
</div>
<!-- <pagination v-show="diseasetotal > 0" :total="diseasetotal" :page.sync="querydisease.pageNum"
:limit.sync="querydisease.pageSize" @pagination="infodisease" /> -->
<myPagination
v-show="diseasetotal > 0"
:total="diseasetotal"
:pageSize="querydisease.pageSize"
:indexFromWrap="querydisease.pageNum"
@updateCPage="updateCPagethree"
></myPagination>
</el-dialog>
<!-- 导入弹框 -->
<el-dialog
title=""
:visible.sync="innerexport"
width="1000px"
append-to-body
:before-close="exportcancel"
>
<templateexport @submit="submit" ref="childComponent"></templateexport>
<div slot="footer" class="dialog-footer" style="margin-top:20px">
<el-button type="primary" @click="submitexport">确 定</el-button>
<el-button @click="innerexport = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listTemplate,
getTemplate,
delTemplate,
addTemplate,
updateTemplate,
typelist,
} from "@/api/manage/template";
import { department, listDisease } from "@/api/manage/script";
import DepartmentList from '../../components/DepartmentList.vue'
import templateexport from "@/views/manage/components/templateexport.vue"
import { copyBaselnfo } from "@/api/system/exportinfo";
export default {
components: { DepartmentList, templateexport },
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 {
// 导入弹框
innerexport: false,
exportlist: [],
obj: null,
maxTableHeight: undefined,
departmentName: null,
diseaseTypeName: null,
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,
// 遮罩层
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: "微信排序不能为空", 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: {
"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.typelistdata();
},
mounted() {
this.getMaxTableHeight();
this.screenChange();
},
methods: {
submit(e) {
this.exportlist = e
},
// 导入确定按钮
submitexport() {
var obj = {
departmentId: this.queryParams.departmentId,
departmentName: this.departmentName,
type: 'WECHAT',
sourceTemplateIds: this.exportlist,
}
copyBaselnfo(obj).then(response => {
this.$modal.msgSuccess("导入成功");
this.innerexport = false
this.$refs.DepartmentList.Departmentlist()
this.getList();
});
},
// 导入按钮
handleUpload() {
if (this.queryParams.departmentId) {
this.innerexport = true
if (this.exportlist.length > 0) {
this.$refs.childComponent.resetTable();
}
} else {
this.$modal.msgError("请先选择左侧科室");
}
},
// 弹框取消
exportcancel() {
this.innerexport = false
},
//接收科室列表传值
clickdepartment(item) {
this.queryParams.hospitalAgencyId = item.hospitalAgencyId
this.queryParams.hospitalAgencyName = item.hospitalAgencyName
this.queryParams.departmentId = item.itemid
this.departmentName = item.itemName
this.informationqueryParams.hospitalAgencyId = item.hospitalAgencyId
if (item.hospitalAgencyId) {
this.handleQuery();
}
this.$forceUpdate()
},
/** 查询微信模板信息列表 */
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
},
// 点击科室
clickinnerVisible() {
this.innerVisibleshow = true;
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,
hospitalAgencyId: this.queryParams.hospitalAgencyId
};
this.informationInfoinfo();
},
innerVisiblecancel() {
this.innerVisibleshow = false;
},
// 科室名称圆点按钮
nurseclick(row) {
this.form.departmentId = row.id;
this.form.departmentName = row.departmentName;
this.departmentName = row.departmentName;
this.form.diseaseTypeId = '';
this.form.diseaseTypeName = '请选择病种';
this.innerVisibleshow = false;
},
// 病种列表
infodisease() {
listDisease(this.querydisease).then((response) => {
this.listdisease = response.rows;
this.diseasetotal = response.total;
this.loading = false;
});
},
// 点击病种
clickdisease() {
if (this.form.departmentName == "请选择科室") {
this.$modal.msgError("请先选择科室");
} else {
this.querydisease.departmentId = this.form.departmentId;
this.infodisease();
this.diseaseshowst = true;
}
},
// 病种名称圆点按钮
nurseclickdisease(row) {
this.form.diseaseTypeId = row.id;
this.form.diseaseTypeName = row.diseaseTypeName;
this.diseaseshowst = false;
},
// 重置
resetdisease() {
this.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.informationqueryParams.hospitalAgencyId = JSON.parse(localStorage.getItem('user')).hospitalAgencyId
this.queryParams.hospitalAgencyId = JSON.parse(localStorage.getItem('user')).hospitalAgencyId
this.resetForm("queryForms");
this.$refs.DepartmentList.resetQuery()
// 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.queryParams.departmentId) {
this.form.departmentName = this.departmentName
this.form.departmentId = this.queryParams.departmentId
} else {
this.form.departmentName = '请选择科室'
}
this.form.diseaseTypeName = "请选择病种";
this.title = "新增微信模板";
this.open = true;
},
/** 修改按钮操作 */
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;
this.departmentName = response.data.departmentName
if (!this.form.templateSort) {
this.form.templateSort = undefined;
}
this.open = true;
this.title = "修改微信模板";
});
},
updateCPage(index, size) {
this.queryParams.pageNum = index;
this.queryParams.pageSize = size;
this.getList();
},
updateCPagetwo(index, size) {
this.informationqueryParams.pageNum = index;
this.informationqueryParams.pageSize = size;
this.informationInfoinfo();
},
updateCPagethree(index, size) {
this.querydisease.pageNum = index;
this.querydisease.pageSize = size;
this.infodisease();
},
/** 提交按钮 */
submitForm() {
this.form.hospitalAgencyId = this.queryParams.hospitalAgencyId
this.form.hospitalAgencyName = this.queryParams.hospitalAgencyName
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.obj.length > 10) {
this.$message({
type: "error",
message: "微信排序最大长度为十位,请正确输入!",
});
} else {
if (!this.form.diseaseTypeId) {
this.form.diseaseTypeName = ''
}
if (this.form.id != null) {
updateTemplate(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.$refs.DepartmentList.Departmentlist()
});
} else {
addTemplate(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.$refs.DepartmentList.Departmentlist()
});
}
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm("是否确认删除微信模板信息?")
.then(function () {
return delTemplate(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
this.$refs.DepartmentList.Departmentlist()
})
.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-textarea__inner{
width: 533px !important;
height: 100px;
}
::v-deep.el-table td.el-table__cell div {
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::v-deeep.el-textarea__inner {
height: 200px;
}
::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>