postdischarge-ui/src/views/manage/message/index.vue
2024-07-24 14:21:10 +08:00

738 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">
<DepartmentList ref="DepartmentList" @clickdepartment="clickdepartment" :methods="'listMessageNum'">
</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="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"
: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="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">
<el-tag v-if="scope.row.textMessageStatus == 'GROUNDING'" type="success"> 上架 </el-tag>
<el-tag v-if="scope.row.textMessageStatus == 'OFF_SHELF'" type="danger"> 下架 </el-tag>
</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']" v-if="!scope.row.sourceTemplateId ||scope.row.sourceTemplateId==0">修改</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="textMessageName">
<el-input v-model="form.textMessageName" placeholder="请输入短信模板名称" />
</el-form-item>
<el-form-item label="短信通道" prop="textMessageChannel">
<el-select v-model="form.textMessageChannel" 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="textMessageId">
<el-input v-model="form.textMessageId" placeholder="请输入短信ID" onKeyUp="value=value.replace(/[\W]/g,'')"
:disabled="title == '修改短信模板信息'" />
</el-form-item>
<el-form-item label="短信状态" prop="textMessageStatus">
<el-select v-model="form.textMessageStatus" placeholder="请选择短信状态" style="width:206px">
<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="textMessageSort">
<el-input-number v-model="form.textMessageSort" controls-position="right" :min="0" placeholder="请输入短信排序" />
</el-form-item>
<el-form-item label="适用任务类型" prop="suitTaskTypeIds">
<el-select v-model="form.suitTaskTypeIds" placeholder="请选择适用任务类型" multiple style="width:206px">
<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="textMessageContent">
<el-input v-model="form.textMessageContent" placeholder="请输入短信内容" type="textarea" maxlength="300"
:rows="10" />
</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">
<messageexport @submit="submit" ref="childComponent"></messageexport>
<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 { listMessage, getMessage, delMessage, addMessage, updateMessage, listMessageNum } from "@/api/manage/message";
import { typelist } from "@/api/manage/template";
import { department, listDisease } from "@/api/manage/script";
import DepartmentList from '../../components/DepartmentList.vue'
import messageexport from '@/views/manage/components/messageexport.vue'
import { copyBaselnfo } from "@/api/system/exportinfo";
export default {
components: { DepartmentList, messageexport },
name: "Template",
data() {
return {
// 导入弹框
innerexport: false,
exportlist: [],
obj: null,
departmentName: null,
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: {
'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.typelistdata();
},
methods: {
submit(e) {
this.exportlist = e
},
// 导入确定按钮
submitexport() {
var obj = {
departmentId: this.queryParams.departmentId,
departmentName: this.departmentName,
type: 'MESSAGE',
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();
}
this.Nameinfo = this.departmentName
} 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;
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
},
// 点击科室
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,
};
this.informationInfoinfo();
},
innerVisiblecancel() {
this.innerVisibleshow = false;
},
// 科室名称圆点按钮
nurseclick(row) {
this.form.departmentId = row.id;
this.departmentName = row.departmentName;
this.form.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.diseaseshowst = true;
this.querydisease.departmentId = this.form.departmentId
this.infodisease()
}
},
// 病种名称圆点按钮
nurseclickdisease(row) {
this.form.diseaseTypeId = row.id;
this.form.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,
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.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();
this.form.diseaseTypeName = "请选择病种"
if (this.queryParams.departmentId) {
this.form.departmentName = this.departmentName
this.form.departmentId = this.queryParams.departmentId
} else {
this.form.departmentName = '请选择科室'
}
this.title = "新增短信模版";
this.open = true;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
// this.getDisease();
getMessage(id).then(response => {
this.form = response.data;
this.departmentName = response.data.departmentName
if (!this.form.textMessageSort) {
this.form.textMessageSort = undefined
}
this.open = true;
this.title = "修改短信模板信息";
});
},
/** 提交按钮 */
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) {
updateMessage(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.$refs.DepartmentList.Departmentlist()
});
} else {
addMessage(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 delMessage(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`)
},
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();
},
// 获取表格最高高度
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-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>