NurseStationUI/src/views/system/patientArchives/index.vue
2022-09-28 09:54:37 +08:00

728 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="areaCode">
<el-select
v-model="queryParams.province"
clearable
placeholder="请选择省"
>
<el-option
v-for="item in arealist"
:key="item.id"
:label="item.areaName"
:value="item.id"
@click.native="province(item)"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.city"
clearable
placeholder="请选择市"
style="margin-left: 10px"
>
<el-option
v-for="item in citylist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickcity(item)"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.area"
clearable
placeholder="请选择区"
style="margin-left: 10px"
>
<el-option
v-for="item in arealists"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickarea(item)"
>
</el-option>
</el-select>
<el-select
v-model="queryParams.areaCode"
clearable
placeholder="请选择街道"
style="margin-left: 10px"
>
<el-option
v-for="item in streetlist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickstreet(item)"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="居住小区" prop="communityAliasName">
<el-input
v-model="queryParams.communityAliasName"
placeholder="请输入居住小区"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="姓名" prop="patientName">
<el-input
v-model="queryParams.patientName"
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:patientArchives: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:patientArchives: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:patientArchives: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:patientArchives:export']"
>导出</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="patientArchivesList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="姓名" align="center" prop="patientName" />
<el-table-column label="所属区域" align="center" prop="area" width="300"/>
<el-table-column label="居住小区" align="center" prop="communityAliasName" />
<el-table-column label="身份证号" align="center" prop="cardNo" />
<el-table-column label="联系电话" align="center" prop="phone" />
<el-table-column label="居住地址" align="center" prop="address" />
<el-table-column label="创建人" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" />
<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:patientArchives:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:patientArchives: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="liststationinfo"
/>
<!-- 添加或修改被护理人基本信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1040px" append-to-body >
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true">
<el-form-item label="姓名" prop="patientName">
<el-input v-model="form.patientName" placeholder="请输入姓名" :disabled="true"/>
</el-form-item>
<!-- <el-form-item label="所属区域" prop="areaName">
<el-input v-model="form.areaName" placeholder="请输入所属区域" :disabled="true"/>
</el-form-item> -->
<el-form-item
label="所属区域"
prop="areaCode"
:disabled="true"
>
<!-- <el-input v-model="form.province" placeholder="请输入姓名" :disabled="true"/> -->
<!-- <el-input v-model="form.city" placeholder="请输入姓名" :disabled="true" style="width:100px"/> -->
<!-- <input type="text"> -->
<el-select v-model="form.province" clearable placeholder="请选择省" :disabled="true" style="width:100px">
<el-option
v-for="item in arealist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="province3(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.city"
clearable
placeholder="请选择市"
:disabled="true"
style="margin-left: 10px;width:100px"
>
<el-option
v-for="item in citylist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickcity3(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.area"
clearable
placeholder="请选择区"
:disabled="true"
style="margin-left: 10px;width:100px"
>
<el-option
v-for="item in arealists"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickarea3(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.code"
clearable
placeholder="请选择街道"
:disabled="true"
style="margin-left: 10px;width:200px"
>
<el-option
v-for="item in streetlist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户编号" prop="patientCode">
<el-input v-model="form.patientCode" placeholder="请输入客户编号" :disabled="true"/>
</el-form-item>
<el-form-item label="客户姓名" prop="patientName">
<el-input v-model="form.patientName" placeholder="请输入客户姓名" maxlength="20" :disabled="true"/>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" :disabled="true"/>
</el-form-item>
<el-form-item label="身份证号" prop="cardNo">
<el-input v-model="form.cardNo" placeholder="请输入身份证号" maxlength="18"/>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input v-model="form.address" placeholder="请输入居住地址" maxlength="100"/>
</el-form-item>
<el-form-item label="居住小区" prop="communityAliasName">
<el-input v-model="form.communityAliasName" placeholder="请输入居住小区" maxlength="100"/>
</el-form-item>
<el-form-item label="紧急联系人" prop="urgentContactName" >
<el-input v-model="form.urgentContactName" placeholder="请输入紧急联系人名称" maxlength="20"/>
</el-form-item>
<el-form-item label="紧急联系电话" prop="urgentContactPhone" label-width="80" style="margin-left:15px">
<el-input v-model="form.urgentContactPhone" placeholder="请输入紧急联系人电话" maxlength="11"/>
</el-form-item>
<el-form-item label="居住住址经度" prop="homeLongitude">
<el-input v-model="form.homeLongitude" placeholder="请输入住址经度" maxlength="20"/>
</el-form-item>
<el-form-item label="居住住址纬度" prop="homeLatitude">
<el-input v-model="form.homeLatitude" placeholder="请输入住址纬度" maxlength="11"/>
</el-form-item>
<el-form-item label="头像" prop="headPictureUrl">
<!-- <img src="/profile/avatar/2022/09/08/1662624067718_20220908160250A001.jpg" alt=""> -->
<img :src="baseUrl + form.headPictureUrl" style="width: 350px;height: 350px">
<img slot="reference" :src="baseUrl + form.headPictureUrl" style="width: 300px;height: 300px">
<!-- <el-input v-model="form.headPictureUrl" placeholder="请输入个人头像地址" /> -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="margin-right:40%">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listPatientArchives, getPatientArchives, delPatientArchives, addPatientArchives, updatePatientArchives,FirstLevel,SecondaryLevelInfo,getSubordinateRegions,} from "@/api/system/patientArchives";
export default {
name: "PatientArchives",
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("请输入正确的联系电话"));
};
var checkMobile2 = (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 (!value) { //所以当没有值的时候我们直接callback让他不校验直接执行下一步
return cb()
}else{
if (regMobile.test(value)) {
return cb();
}else{
cb(new Error("请输入正确的紧急联系电话"));
}
}
};
//验证身份证
var isCardId = (rule, value, callback) => {
if (!value) {
return new Error("请输入身份证号)");
} else {
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 (!card) {
callback(new Error("身份证号格式有误!"));
} else {
callback();
}
}
};
return {
baseUrl:"http://192.168.16.85:8080",
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
total2:0,
total3:0,
value3: "",
value2: "",
value1: "",
value: "",
arealist: [],
citylist: [],
arealists: [],
streetlist: [],
// 被护理人基本信息表格数据
patientArchivesList: [
{
sysAreaVOList: [
{
provinceName: null,
cityName: null,
streetName: null,
},
],
},
],
// 所属区域
arealist:[],
// 查询市
SecondaryLevelInfolist:[],
citylist: [],
arealists:[],
streetlist:[],
city: "",
area: "",
areaCode: "",
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
communityCode: null,
areaCode: null,
patientCode: null,
patientName: null,
cardNo: null,
userId: null,
unionid: null,
openid: null,
phone: null,
address: null,
urgentContactName: null,
urgentContactPhone: null,
homeLongitude: null,
homeLatitude: null,
headPictureUrl: null,
},
getProvincequeryParams: {
pageNum: 1,
pageSize: 10,
},
SecondaryLevelInfoqueryParams: {
pageNum: 1,
pageSize: 10,
id:null,
},
// 表单参数
form: {},
// 表单校验
rules: {
patientName: [
{ required: true, message: "姓名不能为空", trigger: "blur" }
],
areaName: [
{ required: true, message: "所属区域不能为空", trigger: "blur" }
],
communityAliasName: [
{ required: true, message: "居住不能为空", trigger: "blur" }
],
patientCode: [
{ required: true, message: "客户编号不能为空", trigger: "blur" }
],
patientName: [
{ required: true, message: "客户姓名不能为空", trigger: "blur" }
],
cardNo: [
{ required: true,validator: isCardId, message: "", trigger: "blur" }
],
phone: [
{ required: true,validator: checkMobile, message: "", trigger: "blur", }
],
address: [
{ required: true, message: "居住地址不能为空", trigger: "blur" }
],
// urgentContactName: [
// { required: true, message: "紧急联系人不能为空", trigger: "blur" }
// ],
urgentContactPhone: [
{ validator: checkMobile2,trigger: "blur"}
],
// homeLongitude: [
// { required: true, message: "居住地址经度不能为空", trigger: "blur" }
// ],
// homeLatitude: [
// { required: true, message: "居住地址维度不能为空", trigger: "blur" }
// ],
// headPictureUrl: [
// { required: true, message: "头像不能为空", trigger: "blur" }
// ],
}
};
},
created() {
this.getList();
this.Provincelist();
// this.areas();
},
methods: {
// 查询省事件
province(item){
console.log(item)
this.queryParams.city = "";
this.queryParams.area = "";
this.queryParams.areaCode = "";
// this.value1 = "";
// this.value2 = "";
// this.value3 = "";
SecondaryLevelInfo(item.id).then((res) => {
console.log(res);
this.SecondaryLevelInfolist = res.data;
// console.log(this.SecondaryLevelInfolist);
this.citylist = res.data;
});
},
// 点击市
clickcity(item) {
this.queryParams.area = "";
this.queryParams.areaCode = "";
// this.value2 = "";
// this.value3 = "";
console.log(item);
SecondaryLevelInfo(item.id).then((res) => {
console.log(res);
this.arealists = res.data;
});
},
//点击区县城
clickarea(item) {
// this.value3 = "";
console.log(item);
SecondaryLevelInfo(item.id).then((res) => {
console.log(res);
this.streetlist = res.data;
});
},
//点击街道
clickstreet(item) {
this.form.areaCode = item.areaCode;
console.log(this.form);
},
// 所属省下拉框
loadMore() {
console.log("1");
var a = Math.ceil(this.total2 / 10);
console.log(this.arealist.length);
if (this.arealist.length + 1 >= this.total2) {
} else {
if (this.getProvincequeryParams.pageNum >= a) {
} else {
this.getProvincequeryParams.pageNum++;
FirstLevel(this.getProvincequeryParams).then((res) => {
console.log(res);
res.rows.forEach((e) => {
this.arealist.push(e);
console.log(this.arealist)
});
});
}
}
},
Provincelist() {
FirstLevel(this.getProvincequeryParams).then((res) => {
console.log(res);
this.arealist = res.data;
this.total2 = res.total;
console.log(this.arealist);
});
},
/** 查询被护理人基本信息列表 */
getList() {
this.liststationinfo();
this.loading = true;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
communityCode: null,
areaCode: null,
patientCode: null,
patientName: null,
cardNo: null,
userId: null,
unionid: null,
openid: null,
phone: null,
address: null,
urgentContactName: null,
urgentContactPhone: null,
homeLongitude: null,
homeLatitude: null,
headPictureUrl: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
patientArchivesList: [
{
province: "",
city: "",
area: "",
areaCode: "",
communityCode: "",
communityName: "",
communityLongitude: "",
communityLatitude: "",
},
],
};
this.resetForm("form");
},
/** 搜索按钮操作 */
liststationinfo() {
listPatientArchives(this.queryParams).then(response => {
response.rows.forEach((e) => {
if (e.sysAreaVOList == []) {
} else if (e.sysAreaVOList == null) {
} else if (!e.sysAreaVOList) {
} else if (e.sysAreaVOList.length == 0) {
} else if (e.sysAreaVOList.length > 0) {
e.area =
e.sysAreaVOList[0].provinceName +
"-" +
e.sysAreaVOList[0].cityName +
"-" +
e.sysAreaVOList[0].regionName +
"-" +
e.sysAreaVOList[0].streetName;
}
});
this.patientArchivesList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleQuery() {
this.queryParams.pageNum = 1;
this.liststationinfo();
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.arealists="",
this.streetlist="",
this.citylist="",
this.resetForm("queryForm");
(this.queryParams = {
pageNum: 1,
pageSize: 10,
searchValue: null,
province: null,
city: null,
area: null,
areaCode: null,
areaName: null,
areaLevel: null,
// sort: null,
}),
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;
this.title = "添加被护理人基本信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getPatientArchives(id).then(response => {
this.form = response.data;
this.title = "修改被护理人基本信息";
getSubordinateRegions(response.data.areaCode).then((res) => {
if(res.data!==null){
this.form.province= String(res.data.provinceCode);
// this.form.province = res.data.provinceCode;
this.form.city = res.data.cityName;
this.form.area = res.data.regionName;
this.form.code = res.data.streetName;
this.open = true;
}
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// this.form.areaCode = Number(item.areaCode);
if (this.form.id != null) {
updatePatientArchives(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPatientArchives(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除被护理人基本信息的数据项?').then(function() {
return delPatientArchives(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/patientArchives/export', {
...this.queryParams
}, `patientArchives_${new Date().getTime()}.xlsx`)
}
}
};
</script>