NurseStationOperateUI/src/views/system/patientArchives/index.vue
2023-03-03 15:24:19 +08:00

919 lines
25 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
>
<el-button
size="mini"
type="text"
icon="el-icon-key"
@click="handleResetPwd(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="请输入客户姓名"
maxlength="20"
:disabled="true"
/>
</el-form-item>
<el-form-item label="所属区域" prop="areaCode" :disabled="true">
<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="phone">
<el-input
v-model="form.phone"
placeholder="请输入手机号码"
maxlength="11"
:disabled="true"
/>
</el-form-item>
<el-form-item label="出生日期" prop="birthDate">
<el-input
v-model="form.birthDate"
placeholder="请输入出生日期"
maxlength="11"
:disabled="true"
/>
</el-form-item>
<el-form-item label="会员积分" prop="integral">
<el-input
v-model="form.integral"
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="cardNo">
<el-select
v-model="form.sex"
clearable
placeholder="请选择性别"
:disabled="true"
style="width: 100px"
>
<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="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"
type="number"
oninput=" if(value.length>10){value=value.slice(0,20)}"
/>
</el-form-item>
<el-form-item label="居住住址纬度" prop="homeLatitude">
<el-input
v-model="form.homeLatitude"
placeholder="请输入住址纬度"
maxlength="11"
type="number"
oninput=" if(value.length>10){value=value.slice(0,20)}"
/>
</el-form-item>
<el-form-item label="头像" prop="headPictureUrl">
<img
:src="baseUrl + form.headPictureUrl"
style="width: 200px; height: 200px"
/>
<!-- <el-input v-model="form.headPictureUrl" placeholder="请输入个人头像地址" /> -->
</el-form-item>
</el-form>
<div
slot="footer"
class="dialog-footer"
style="margin-top: -50px; 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,
updatePassword,
} 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: process.env.VUE_APP_BASE_API,
// baseurl: "http://192.168.16.85:8080",
// 遮罩层
loading: true,
// 选中数组
ids: [],
options: [
{
value: "MALE",
label: "男",
},
{
value: "FEMALE",
label: "女",
},
],
// 非单个禁用
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: {
// 重置密码
handleResetPwd(row) {
console.log(row);
const id = row.id;
console.log(id);
// const id=row.userId
this.$prompt("请输入新的密码", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.{5,20}$/,
inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
})
.then((res) => {
console.log(res);
const params = {
id,
password: res.value,
};
updatePassword(params).then((response) => {
this.$modal.msgSuccess("修改成功,新密码是:" + res.value);
});
})
.catch(() => {});
},
// 查询省事件
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>