postdischarge-ui/src/views/system/departmentDisease/index.vue
2024-06-20 14:04:47 +08:00

676 lines
23 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" :xs="24" style="height:calc(100vh - 124px);">
<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" 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="所属科室id" prop="departmentId">
<el-input
v-model="queryParams.departmentId"
placeholder="请输入所属科室id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属科室名称" prop="departmentName">
<el-input
v-model="queryParams.departmentName"
placeholder="请输入所属科室名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="病种名称" prop="diseaseTypeName">
<el-input maxlength="50" v-model="queryParams.diseaseTypeName" placeholder="请输入病种名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<!-- <el-form-item label="病种代码" prop="diseaseTypeCode">
<el-input
v-model="queryParams.diseaseTypeCode"
placeholder="请输入病种代码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="对应诊断信息" prop="diagnosisInfo">
<el-input
v-model="queryParams.diagnosisInfo"
placeholder="请输入对应诊断信息"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="病种概述" prop="diseaseTypeRemark">
<el-input
v-model="queryParams.diseaseTypeRemark"
placeholder="请输入病种概述"
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="['system:departmentDisease:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
v-hasPermi="['system:departmentDisease:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete" v-hasPermi="['system:departmentDisease:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['system:departmentDisease:export']">导出</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="departmentDiseaseList"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键id" align="center" prop="id" /> -->
<!-- <el-table-column
label="所属科室id"
align="center"
prop="departmentId"
/> -->
<el-table-column label="所属科室名称" align="center" prop="departmentName" />
<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="['system:departmentDisease:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:departmentDisease: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="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
<el-form-item label="所属科室" prop="departmentId">
<el-button type="" v-if="form.departmentName == '请选择科室'" @click="clickinnerVisible()" style="
width: 250px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
">{{ form.departmentName }}</el-button>
<el-button @click="clickinnerVisible()" type="" v-else style="
width: 250px;
text-align: left;
height: 36px;
padding-left: -10px;
overflow: hidden;
">{{ form.departmentName }}</el-button>
</el-form-item>
<!-- <el-form-item label="所属科室" prop="departmentId">
<el-input v-model="form.departmentId" placeholder="请输入所属科室" />
</el-form-item> -->
<!-- <el-form-item label="所属科室名称" prop="departmentName">
<el-input v-model="form.departmentName" placeholder="请输入所属科室名称" />
</el-form-item> -->
<el-form-item label="病种名称" prop="diseaseTypeName">
<el-input style="width: 250px" v-model="form.diseaseTypeName" placeholder="请输入病种名称" />
</el-form-item>
<!-- <el-form-item label="病种代码" prop="diseaseTypeCode">
<el-input v-model="form.diseaseTypeCode" placeholder="请输入病种代码" />
</el-form-item> -->
<el-form-item label="对应诊断信息" prop="diagnosisInfo">
<el-input type="textarea" maxlength="300" style="width: 610px" v-model="form.diagnosisInfo"
placeholder="请输入对应诊断信息" />
</el-form-item>
<el-form-item label="病种概述" prop="diseaseTypeRemark ">
<el-input type="textarea" maxlength="200" style="width: 610px" v-model="form.diseaseTypeRemark"
placeholder="请输入病种概述" />
</el-form-item>
<!-- <el-button
type="primary"
plain
@click="handleImport"
v-hasPermi="['system:person:importStationPerson']"
>导入</el-button
> -->
<!-- <el-form-item label="病种概述" prop="diseaseTypeRemark">
<el-input v-model="form.diseaseTypeRemark" placeholder="请输入病种概述" />
</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="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
:auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</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="150" 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" /> -->
<myPagination v-show="totaldepartment > 0" :total="totaldepartment" :pageSize="informationqueryParams.pageSize"
:indexFromWrap="informationqueryParams.pageNum" @updateCPage="updateCPagetwo"></myPagination>
</el-dialog>
</div>
</template>
<script>
import {
listDepartmentDisease,
getDepartmentDisease,
delDepartmentDisease,
addDepartmentDisease,
updateDepartmentDisease,
getDepartmentList,
selectDiseaseCount,
} from "@/api/system/departmentDisease";
import { listScript, department } from "@/api/manage/script";
// import { getDepartmentLis } from "@/api/operationInfo/operationInfo";
import { getToken } from "@/utils/auth";
export default {
name: "DepartmentDisease",
data() {
return {
departmentName: null,
innerVisibleshow: false, //科室弹框
maxTableHeight: undefined,
infolist: [],
totaldepartment: 0,
// 科室
informationqueryParams: {
pageNum: 1,
pageSize: 10,
departmentName: null,
},
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url:
process.env.VUE_APP_BASE_API +
"/system/agency/insertAgencyImportList",
},
itemname: null,
name: "",
DepartmentoList: [],
count: "", //全部
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 科室病种信息表格数据
departmentDiseaseList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
departmentId: null,
departmentName: null,
diseaseTypeName: null,
diseaseTypeCode: null,
diagnosisInfo: null,
diseaseTypeRemark: null,
},
querydepartmen: {
departmentName: "",
},
departmentName: "",
// 表单参数
form: {},
// querydepartment:{}
// 表单校验
rules: {
departmentId: [
{ required: true, message: "所属科室不能为空", trigger: "blur" },
],
diseaseTypeName: [
{ required: true, message: "病种名称不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
// this.Departmentlist();
// listScript(this.queryParams).then((response) => {
// this.count = response.total;
// });
this.infolists();
},
mounted() {
this.getMaxTableHeight()
this.screenChange()
},
watch: {
name(val) {
// this.querydepartmen.departmentName = val;
this.departmentName = val;
this.infolists();
},
},
methods: {
infolists() {
selectDiseaseCount(this.departmentName).then((res) => {
this.DepartmentoList = res.data;
console.log(res, "8888");
// res.data.forEach((e) => {
// this.count = e.countNum;
// });
});
},
// 科室名称重置
addresetQuerylist() {
this.informationqueryParams = {
pageNum: 1,
pageSize: 10,
};
this.informationInfoinfo();
},
innerVisiblecancel() {
this.innerVisibleshow = false;
},
// 科室名称圆点按钮
nurseclick(row) {
this.form.departmentId = row.id;
this.form.departmentName = row.departmentName;
this.innerVisibleshow = false;
},
// 科室列表
informationInfoinfo() {
department(this.informationqueryParams).then((response) => {
this.infolist = response.rows;
this.totaldepartment = response.total;
this.loading = false;
});
// this.informationqueryParams.page = 1;
},
// 点击科室
clickinnerVisible() {
this.innerVisibleshow = true;
if (this.itemname) {
this.informationqueryParams.departmentId = this.itemname;
} else {
this.informationqueryParams.departmentId = null;
}
this.informationInfoinfo();
},
/** 导入按钮操作 */
handleImport() {
this.upload.open = true;
this.upload.title = "诊断导入";
},
/** 下载模板操作 */
importTemplate() {
this.download(
"/system/importDownload/downloadTemplate?fileType=agency",
{},
`诊断模板.xlsx`
);
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 左侧科室
// Departmentlist() {
// this.loading = true;
// getDepartmentList(this.querydepartmen).then((response) => {
// this.DepartmentoList = response.data;
// // this.total = response.total;
// this.loading = false;
// });
// },
// 左侧科室
itemdata(item) {
if (item) {
console.log(item, "9999");
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;
listDepartmentDisease(this.queryParams).then((response) => {
this.departmentDiseaseList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
departmentId: null,
departmentName: null,
diseaseTypeName: null,
diseaseTypeCode: null,
diagnosisInfo: null,
diseaseTypeRemark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.diseaseTypeName = ''
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();
this.open = true;
// if (this.itemname == null) {
this.form.departmentName = "请选择科室";
// }
this.title = "添加科室病种信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getDepartmentDisease(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改科室病种信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateDepartmentDisease(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
this.departmentName = ''
this.infolists()
});
} else {
addDepartmentDisease(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.departmentName = ''
this.infolists()
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除科室病种信息编号为"' + ids + '"的数据项?')
.then(function () {
return delDepartmentDisease(ids);
})
.then(() => {
this.getList();
this.departmentName = ''
this.infolists()
this.$modal.msgSuccess("删除成功");
})
.catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/departmentDisease/export",
{
...this.queryParams,
},
`科室病种信息_${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();
},
// 获取表格最高高度
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">
.left {
height: calc(100vh - 119px);
// width: 30%;
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>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding-bottom: 60px !important;
}
.app-container {
padding: 20px 0 0 20px !important;
}
::v-deep .el-row {
height: 100% !important;
}
</style>