postdischarge-ui/src/views/manage/script/index.vue
2024-03-26 14:55:54 +08:00

1096 lines
29 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. 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">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item
label="通用话术名称"
prop="commonScriptName"
label-width="100px"
>
<el-input
v-model="queryParams.commonScriptName"
placeholder="请输入通用话术名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="话术名称" prop="scriptName">
<el-input
v-model="queryParams.scriptName"
placeholder="请输入话术名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="话术ID" prop="scriptId">
<el-input
v-model="queryParams.scriptId"
placeholder="请输入话术ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="平台ID" prop="platformId">
<el-input
v-model="queryParams.platformId"
placeholder="请输入平台ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="话术状态" prop="scriptStatus">
<el-select v-model="queryParams.scriptStatus" placeholder="请选择">
<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>
<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>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['manage:script:add']"
>新增</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-row :gutter="20">
<el-col :span="5">
<div class="leftscript" 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">
<el-table
v-loading="loading"
:data="scriptList"
@selection-change="handleSelectionChange"
>
<el-table-column
label="序号"
align="center"
prop="sort"
type="index"
/>
<el-table-column
label="通用话术名称"
align="center"
prop="commonScriptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="话术名称"
align="center"
prop="scriptName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="话术ID"
align="center"
prop="scriptId"
:show-overflow-tooltip="true"
/>
<el-table-column
label="平台ID"
align="center"
prop="platformId"
:show-overflow-tooltip="true"
/>
<el-table-column label="话术状态" align="center" prop="scriptStatus">
<template slot-scope="scope">
{{ scope.row.scriptStatus == "NORMAL" ? "正常" : "" }}
{{ scope.row.scriptStatus == "OFF_SHELF" ? "下架" : "" }}
{{ scope.row.scriptStatus == "SUSPEND" ? "暂停" : "" }}
</template>
</el-table-column>
<el-table-column
label="话术简介"
align="center"
prop="scriptIntroduction"
:show-overflow-tooltip="true"
/>
<el-table-column
label="病种名称"
align="center"
prop="diseaseTypeName"
:show-overflow-tooltip="true"
/>
<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-search"
@click="handlesee(scope.row)"
>预览</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['manage:script:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['manage:script:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改话术信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body v-if="open">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="通用话术名称" prop="commonScriptName">
<el-input
maxlength="100"
v-model="form.commonScriptName"
placeholder="请输入通用话术名称"
type="textarea"
/>
</el-form-item>
<el-form-item label="话术名称" prop="scriptName">
<el-input
v-model="form.scriptName"
placeholder="请输入话术名称"
maxlength="100"
/>
</el-form-item>
<el-form-item label="话术排序" prop="scriptSort">
<el-input-number v-model="form.scriptSort" controls-position="right" :min="0" placeholder="请输入话术排序"   style="width:380px"/>
</el-form-item>
<el-form-item label="话术ID" prop="scriptId">
<el-input
v-model="form.scriptId"
placeholder="请输入话术ID"
maxlength="100"
/>
</el-form-item>
<el-form-item label="平台ID" prop="platformId">
<el-input
v-model="form.platformId"
placeholder="请输入平台ID"
maxlength="100"
/>
</el-form-item>
<el-form-item label="话术状态" prop="platformId">
<el-select
v-model="form.scriptStatus"
placeholder="请选择"
style="width: 379px"
>
<el-option
v-for="item in optionsadd"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="话术简介" prop="scriptIntroduction">
<el-input
maxlength="200"
v-model="form.scriptIntroduction"
placeholder="请输入话术简介"
type="textarea"
/>
</el-form-item>
<el-form-item label="科室名称" prop="departmentId">
<el-button
type=""
v-if="departmentName == '请选择科室'"
@click="clickinnerVisible()"
style="
width: 379px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
"
>{{ departmentName }}</el-button
>
<el-button
@click="clickinnerVisible()"
type=""
v-else
style="
width: 379px;
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: 379px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
"
>{{ diseaseTypeName }}</el-button
>
<el-button
@click="clickdisease()"
type=""
v-else
style="
width: 379px;
text-align: left;
height: 36px;
padding-left: -10px;
overflow: hidden;
"
>{{ diseaseTypeName }}</el-button
>
</el-form-item>
<el-form-item label="图片" prop="scriptFilePath">
<stationAcatar
@imgUrl="imgUrl"
:img="form.scriptFilePath"
:type="'scriptUrl'"
/>
</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.departmentCode"
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.diseaseTypeCode"
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>
<!-- 预览弹框 -->
<el-dialog
title="预览"
:visible.sync="dialogsee"
width="30%"
:before-close="seeClose"
>
<img :src="baseUrl + form.scriptFilePath" alt="" />
<span slot="footer" class="dialog-footer">
<el-button @click="dialogsee = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { listScript, getScript, delScript, addScript, updateScript, departmentDisease, department, listDisease, listScriptNum } from "@/api/manage/script";
import stationAcatar from "../../system/stationAvatar/index.vue";
export default {
components: { stationAcatar },
name: "Script",
data() {
return {
itemname: null,
departmentName: null,
diseaseTypeName: null,
name: '',
departmentId: null,
count: '',//全部
sumcount: '',
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,
options: [{
value: 'NORMAL',
label: '正常'
}, {
value: 'OFF_SHELF',
label: '下架'
}, {
value: 'SUSPEND',
label: '暂停'
},],
optionsadd: [{
value: 'NORMAL',
label: '正常'
}, {
value: 'OFF_SHELF',
label: '下架'
}, {
value: 'SUSPEND',
label: '暂停'
},],
optionsDisease: [],
optionsadd: [{
value: 'NORMAL',
label: '正常'
}, {
value: 'OFF_SHELF',
label: '下架'
}, {
value: 'SUSPEND',
label: '暂停'
},],
baseUrl: process.env.VUE_APP_BASE_API,
//预览弹框
dialogsee: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 话术信息表格数据
scriptList: [],
DepartmentoList: [],
// 弹出层标题
title: "",
// 分类管理标题
titlemanagement: '',
// 是否显示弹出层
open: false,
//分类管理
openmanagement: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
commonScriptName: null,
scriptName: null,
scriptId: null,
platformId: null,
scriptStatus: null,
scriptIntroduction: null,
scriptSort: null,
scriptRemark: null,
},
querydepartmen: {
departmentName: "",
// pageNum: 1,
// pageSize: 10,
},
// 表单参数
form: {
id: null,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
diseaseTypeCode: null,
commonScriptName: null,
scriptName: null,
scriptId: null,
platformId: null,
scriptStatus: "",
scriptIntroduction: null,
scriptSort: null,
scriptRemark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
},
formmanagement: {
departmentId: '',
departmentName: '',
diseaseTypeId: '',
diseaseTypeName: '',
},
// 表单校验
rules: {
scriptSort:[
{ required: true, message: "话术排序不能为空", trigger: "blur" }
],
commonScriptName: [
{ required: true, message: "通用话术名称不能为空", trigger: "blur" }
],
scriptName: [
{ required: true, message: "话术名称不能为空", trigger: "blur" }
],
scriptId: [
{ required: true, message: "话术ID不能为空", trigger: "blur" }
],
platformId: [
{ required: true, message: "平台ID不能为空", trigger: "blur" }
],
scriptStatus: [
{ required: true, message: "话术状态不能为空", trigger: "blur" }
],
scriptIntroduction: [
{ required: true, message: "话术简介不能为空", trigger: "blur" }
],
departmentId: [
{ required: true, message: "科室名称不能为空", trigger: "blur" }
],
},
};
},
created() {
this.getList();
this.Departmentlist();
},
watch: {
name(val) {
this.querydepartmen.departmentName = val
this.Departmentlist();
}
},
methods: {
// 上传图片
imgUrl(imgUrl) {
this.form.scriptFilePath = imgUrl;
},
// 预览点击
handlesee(row) {
const id = row.id
getScript(id).then(response => {
this.form = response.data;
this.dialogsee = true;
});
},
// 预览关闭
seeClose() {
this.dialogsee = false;
},
// 点击科室
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.departmentCode;
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.diseaseshowst = false;
this.form.diseaseTypeId = row.diseaseTypeCode;
this.diseaseTypeName = row.diseaseTypeName;
this.diseaseshowst = false;
},
// 重置
resetdisease() {
querydisease = {
pageNum: 1,
pageSize: 10,
};
this.infodisease()
},
canceldiseases() {
this.diseaseshowst = false;
},
// 左侧科室
Departmentlist() {
this.loading = true;
listScriptNum(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.form.departmentId = item.id
this.departmentName = item.departmentName
// this.queryDisease.departmentId = this.itemname
this.loading = true;
this.queryParams.departmentId = item.id
this.getList()
} else {
this.queryParams.departmentId = ''
this.itemname = null
this.getList()
}
},
/** 查询话术信息列表 */
getList() {
this.loading = true;
listScript(this.queryParams).then(response => {
this.scriptList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 分类管理取消
cancelmanagement() {
this.openmanagement = false;
},
// 表单重置
reset() {
this.form = {
id: null,
departmentId: null,
scriptSort:undefined,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
diseaseTypeCode: null,
commonScriptName: null,
scriptFilePath:null,
scriptName: null,
scriptId: null,
platformId: null,
scriptStatus: "",
scriptIntroduction: null,
scriptRemark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.departmentId = null;
this.itemname = null;
this.queryParams = {
pageNum: 1,
pageSize: 10,
departmentId: null,
departmentName: null,
diseaseTypeId: null,
diseaseTypeName: null,
commonScriptName: null,
scriptName: null,
scriptId: null,
platformId: null,
scriptStatus: null,
scriptIntroduction: null,
scriptSort: null,
scriptRemark: null,
}
this.resetForm("queryForm");
this.getList();
},
// 多选框选中数据
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 = "添加话术信息";
// this.getDisease();
// }
},
// 病种列表
getDisease() {
departmentDisease(this.queryDisease).then(response => {
this.optionsDisease = response.rows
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
// this.getDisease();
getScript(id).then(response => {
this.form = response.data;
this.diseaseTypeName = response.data.diseaseTypeName
this.departmentName = response.data.departmentName
if(!this.form.scriptSort){
this.form.scriptSort=undefined
}
this.open = true;
this.title = "修改话术信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
this.form.departmentName = this.departmentName
this.form.diseaseTypeName = this.diseaseTypeName
updateScript(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
}
addScript(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 delScript(ids);
}).then(() => {
this.getList();
this.Departmentlist();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('manage/script/export', {
...this.queryParams
}, `script_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner{
text-align: left;
}
.leftscript {
// width: 30%;
height: 850px;
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;
}
</style>