NurseStationOperateUI/src/views/system/StationDepartment/index.vue
2022-11-09 18:25:04 +08:00

820 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">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item
label="护理站"
prop="nurseStationId"
v-if="nurseStationlist.find((e) => e.isAdmin == '1')"
>
<el-select
v-model="queryParams.nurseStationId"
placeholder="请选择护理站"
v-loadmore="loadMore"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in nurseStationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="护理站" prop="nurseStationId" v-else>
<el-select
v-model="queryParams.nurseStationId"
placeholder="请选择护理站"
v-loadmore="loadMore"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="item in nurseStationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="科室编码" prop="departmentCode">
<el-input
v-model="queryParams.departmentCode"
placeholder="请输入科室编码"
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>
<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="['system:StationDepartment: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:StationDepartment: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:StationDepartment:remove']"
>删除</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="StationDepartmentList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="护理站名称"
align="center"
prop="nurseStationName"
/>
<el-table-column label="科室编码" align="center" prop="departmentCode" />
<el-table-column label="科室名称" align="center" prop="departmentName" />
<el-table-column label="联系电话" align="center" prop="phone" />
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="创建人" align="center" prop="createBy" />
<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:StationDepartment:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:StationDepartment:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加护理站部门信息对话框 -->
<el-dialog
:title="title"
:visible.sync="addopen"
width="800px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
:inline="true"
>
<div
v-for="(item, index) in form.nurseStationDepartmentList"
:key="index"
style="margin-top: 20px; border-bottom: 1px solid #f3f3f3"
>
<el-form-item
label="所属护理站"
:rules="rules.nurseStationDepartmentList.nurseStationId"
:prop="`nurseStationDepartmentList.${index}.nurseStationId`"
>
<el-button
type=""
v-if="item.nurseStationName == '请选择所属护理站'"
@click="clickinnerVisible(item, index)"
style="
width: 250px;
text-align: left;
height: 36px;
color: #c0c4cc;
overflow: hidden;
"
>{{ item.nurseStationName }}</el-button
>
<!-- @click="clickinnerVisible(item, index)" -->
<el-button
@click="clickinnerVisible(item, index)"
type=""
v-else
style="
width: 250px;
text-align: left;
height: 36px;
padding-left: -10px;
overflow: hidden;
"
>{{ item.nurseStationName }}</el-button
>
<!-- <el-select
v-model="item.nurseStationId"
clearable
placeholder="请选择护理站"
v-loadmore="loadMore"
style="width: 250px"
@click="nurseinfo"
>
<el-option
v-for="item in nurseStationlist"
:key="item.id"
:label="item.nurseStationName"
:value="item.id"
>
</el-option>
</el-select> -->
</el-form-item>
<el-form-item
label="科室名称"
:rules="rules.nurseStationDepartmentList.departmentName"
:prop="`nurseStationDepartmentList.${index}.departmentName`"
>
<el-input
v-model="item.departmentName"
placeholder="请输入科室名称"
style="width: 250px"
maxlength="15"
/>
</el-form-item>
<el-form-item
label="科室负责人"
:rules="rules.nurseStationDepartmentList.departmentPerson"
:prop="`nurseStationDepartmentList.${index}.departmentPerson`"
>
<el-input
v-model="item.departmentPerson"
placeholder="请输入科室负责人"
style="width: 250px"
/>
</el-form-item>
<el-form-item
label="联系电话"
:rules="rules.nurseStationDepartmentList.phone"
:prop="`nurseStationDepartmentList.${index}.phone`"
>
<el-input
v-model="item.phone"
placeholder="请输入联系电话"
maxlength="11"
style="width: 250px"
/>
</el-form-item>
<el-button
type="primary"
circle
plain
icon="el-icon-circle-plus-outline"
@click="adddisease"
v-if="index == 0"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
circle
plain
@click="deldisease(index)"
v-if="index != 0"
></el-button>
</div>
</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="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属护理站" prop="nurseStationId">
<el-input
v-model="form.nurseStationName"
placeholder="请选择所属护理站"
style="width: 250px"
disabled
/>
</el-form-item>
<el-form-item label="科室名称" prop="departmentName">
<el-input
v-model="form.departmentName"
placeholder="请输入科室名称"
style="width: 250px"
maxlength="15"
/>
</el-form-item>
<el-form-item label="科室负责人" prop="departmentPerson">
<el-input
v-model="form.departmentPerson"
placeholder="请输入科室负责人"
style="width: 250px"
/>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入联系电话"
maxlength="11"
style="width: 250px"
/>
</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="innerVisible"
width="1000px"
append-to-body
:before-close="innerVisiblecancel"
>
<el-form
ref="queryForm"
:model="nurseStationqueryParams"
:rules="rules"
label-width="80px"
:inline="true"
>
<el-form-item
label="护理站编码"
prop="nurseStationCode"
label-width="120"
>
<el-input
v-model="nurseStationqueryParams.nurseStationCode"
placeholder="请输入护理站编码"
clearable
@keyup.enter.native="addhd"
/>
</el-form-item>
<el-form-item
label="护理站名称"
prop="nurseStationName"
label-width="120"
>
<el-input
v-model="nurseStationqueryParams.nurseStationName"
placeholder="请输入护理站名称"
clearable
@keyup.enter.native="addhd"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="addhd"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="addresetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table :data="nurseStationlist" @cell-dblclick="nurseclick">
<el-table-column label="请选择" width="100" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
v-if="stationid == 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="nurseStationCode"
label="护理站编码"
align="center"
>
</el-table-column>
<el-table-column
property="nurseStationName"
label="护理站名称"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column property="phone" label="联系电话" align="center">
</el-table-column>
<el-table-column
property="address"
label="护理站地址"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
</el-table>
<pagination
v-show="total2 > 0"
:total="total2"
:page.sync="nurseStationqueryParams.pageNum"
:limit.sync="nurseStationqueryParams.pageSize"
@pagination="info"
/>
</el-dialog>
</div>
</template>
<script>
import {
listStationDepartment,
getStationDepartment,
delStationDepartment,
addStationDepartment,
updateStationDepartment,
} from "@/api/system/StationDepartment";
import { getListByUser } from "@/api/system/userlist.js";
export default {
name: "StationDepartment",
data() {
// 验证手机号的规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile =
/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/;
if (regMobile.test(value)) {
return cb();
}
cb(new Error("请输入正确的联系电话"));
};
return {
nurseStationlist: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
total2: 0,
// 护理站部门信息表格数据
StationDepartmentList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
addopen: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
nurseStationId: null,
departmentCode: null,
departmentName: null,
departmentPerson: null,
phone: null,
nurseStationName: null,
nurseStationDepartmentList: [
{
nurseStationId: "",
departmentCode: "",
departmentName: "",
departmentPerson: "",
phone: "",
},
],
},
nurseStationqueryParams: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {},
// 表单校验
rules: {
nurseStationDepartmentList: {
nurseStationId: [
{
required: true,
message: "请选择所属护理站",
trigger: "blur",
},
],
departmentName: [
{
required: true,
message: "请选择科室名称",
trigger: "blur",
},
],
departmentPerson: [
{
required: true,
message: "请选择科室负责人",
trigger: "blur",
},
],
phone: [
{
required: true,
validator: checkMobile,
trigger: "blur",
message: "",
},
],
},
nurseStationId: [
{
required: true,
message: "请选择所属护理站",
trigger: "blur",
},
],
departmentName: [
{
required: true,
message: "请选择科室名称",
trigger: "blur",
},
],
departmentPerson: [
{
required: true,
message: "请选择科室负责人",
trigger: "blur",
},
],
phone: [
{
required: true,
validator: checkMobile,
trigger: "blur",
message: "",
},
],
},
index: "",
stationid: "",
innerVisible: false,
};
},
created() {
this.getList();
// this.listinfo();
this.info();
},
methods: {
// add点击护理站名称
nurseclick(row) {
console.log(row);
this.stationid = row.id;
this.innerVisible = false;
this.form.nurseStationDepartmentList[this.index].nurseStationName =
row.nurseStationName;
this.form.nurseStationDepartmentList[this.index].nurseStationId = row.id;
},
// 新增护理站按钮
clickinnerVisible(item, index) {
this.stationid = item.nurseStationId;
this.innerVisible = true;
this.index = index;
},
//删除deldisease
deldisease(index) {
this.form.nurseStationDepartmentList.splice(index, 1);
console.log(this.form.nurseStationDepartmentList);
},
adddisease() {
var obj = {
nurseStationId: "",
departmentCode: "",
departmentName: "",
departmentPerson: "",
phone: "",
nurseStationName: "请选择所属护理站",
};
if (this.form.nurseStationDepartmentList.length == 5) {
this.$message.error("最多只能5条");
} else {
this.form.nurseStationDepartmentList.push(obj);
}
},
//添加
getList() {
this.loading = true;
listStationDepartment(this.queryParams).then((response) => {
this.nurseStationDepartmentList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//滑动下拉框
loadMore() {
var a = Math.ceil(this.total2 / 10);
if (this.nurseStationlist.length + 1 >= this.total2) {
} else {
if (this.nurseStationqueryParams.pageNum >= a) {
} else {
this.nurseStationqueryParams.pageNum++;
console.log(this.nurseStationqueryParams.pageNum);
getListByUser(this.nurseStationqueryParams).then((res) => {
console.log(res);
res.rows.forEach((e) => {
this.nurseStationlist.push(e);
});
});
}
}
},
/** 查询护理站部门信息列表 */
getList() {
this.loading = true;
listStationDepartment(this.queryParams).then((response) => {
this.StationDepartmentList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.addopen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
nurseStationId: null,
departmentCode: null,
departmentName: null,
departmentPerson: null,
phone: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
nurseStationName: null,
nurseStationId: null,
nurseStationDepartmentList: [
{
nurseStationId: "",
departmentCode: "",
departmentName: "",
departmentPerson: "",
phone: "",
nurseStationName: "请选择所属护理站",
},
],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
innerVisiblecancel() {
this.innerVisible = false;
this.addresetQuery();
},
/** 重置按钮操作 */
resetQuery() {
if (this.nurseStationlist[0].isAdmin == "1") {
this.resetForm("queryForm");
this.queryParams = {
pageNum: 1,
pageSize: 10,
nurseStationId: null,
departmentCode: null,
departmentName: null,
departmentPerson: null,
phone: null,
nurseStationName: null,
};
this.handleQuery();
} else {
console.log(1);
this.queryParams.departmentCode = null;
this.queryParams.pageSize = 10;
this.queryParams.pageNum = 1;
this.queryParams.departmentName = null;
this.handleQuery();
}
},
addhd() {
getListByUser(this.nurseStationqueryParams).then((res) => {
this.total2 = res.total;
this.nurseStationlist = res.rows;
});
},
addresetQuery() {
this.nurseStationqueryParams = {
pageNum: 1,
pageSize: 10,
};
this.addhd();
},
//权限列表
info() {
getListByUser(this.nurseStationqueryParams).then((res) => {
if (res.rows[0].isAdmin == "1") {
this.nurseStationlist = res.rows;
this.total2 = res.total;
} else {
this.total2 = res.total;
this.nurseStationlist = res.rows;
this.queryParams.nurseStationId = res.rows[0].id;
this.handleQuery();
}
});
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.addopen = true;
// this.nurseStationName="",
this.title = "添加护理站部门信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getStationDepartment(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改护理站部门信息";
});
},
/** 提交按钮 */
submitForm() {
console.log(this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateStationDepartment(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addStationDepartment(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.addopen = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm("是否确认删除护理站部门信息的数据项")
.then(function () {
return delStationDepartment(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/StationDepartment/export",
{
...this.queryParams,
},
`StationDepartment_${new Date().getTime()}.xlsx`
);
},
},
};
</script>