593 lines
18 KiB
Vue
593 lines
18 KiB
Vue
<template>
|
||
<!-- <div class="app-container"> -->
|
||
<!-- 添加或修改对话框 -->
|
||
<el-dialog :title="title" v-model="visible" width="980px" append-to-body>
|
||
<el-form ref="patientRef" :model="form" :rules="rules" label-width="100px">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="姓名" prop="name">
|
||
<el-input v-model="form.name" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="性别" prop="genderEnum">
|
||
<el-radio-group v-model="form.genderEnum" :disabled="isViewMode">
|
||
<el-radio
|
||
v-for="item in administrativegenderList"
|
||
:key="item.value"
|
||
:label="item.value"
|
||
>
|
||
{{ item.info }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <el-col :span="8">
|
||
<el-form-item label="活动标识" prop="tempFlag">
|
||
<el-radio-group v-model="form.tempFlag" :disabled="isViewMode">
|
||
<el-radio v-for="dict in patient_temp_flag" :key="dict.value" :label="dict.value">
|
||
{{ dict.label }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<el-col :span="8">
|
||
<el-form-item label="联系方式" prop="phone">
|
||
<el-input v-model="form.phone" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="证件号码" prop="idCard">
|
||
<el-input v-model="form.idCard" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="民族" prop="nationalityCode">
|
||
<el-select v-model="form.nationalityCode" clearable filterable :disabled="isViewMode">
|
||
<el-option
|
||
v-for="item in nationality_code"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="卡类别" prop="typeCode">
|
||
<el-select
|
||
v-model="form.typeCode"
|
||
placeholder="卡类别"
|
||
clearable
|
||
:disabled="isViewMode"
|
||
>
|
||
<el-option
|
||
v-for="dict in sys_idtype"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="就诊卡号" prop="identifierNo">
|
||
<el-input v-model="form.identifierNo" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="国家编码" prop="countryCode">
|
||
<el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="出生日期" prop="birthDate">
|
||
<el-date-picker
|
||
v-model="form.birthDate"
|
||
type="date"
|
||
placeholder="请选择出生日期"
|
||
format="YYYY年MM月DD日"
|
||
:disabled="isViewMode"
|
||
value-format="YYYY-MM-DD"
|
||
@change="handleBirthDateChange"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- <el-col :span="6">
|
||
<el-form-item label="年龄" prop="age">
|
||
<el-input v-model="form.age" clearable :disabled="isViewMode"/>
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="职业" prop="prfsEnum">
|
||
<el-select v-model="form.prfsEnum" placeholder="职业" clearable :disabled="isViewMode">
|
||
<el-option
|
||
v-for="item in occupationtypeList"
|
||
:key="item.value"
|
||
:label="item.info"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="工作单位" prop="workCompany">
|
||
<el-input v-model="form.workCompany" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="年龄" prop="age">
|
||
<el-input
|
||
v-model="form.age"
|
||
:disabled="isViewMode"
|
||
@input="handleAgeInput"
|
||
placeholder="请输入年龄"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="联系人" prop="linkName">
|
||
<el-input v-model="form.linkName" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="联系人关系" prop="linkRelationCode">
|
||
<el-select
|
||
v-model="form.linkRelationCode"
|
||
placeholder="联系人关系"
|
||
clearable
|
||
:disabled="isViewMode"
|
||
>
|
||
<el-option
|
||
v-for="item in familyrelationshiptypeList"
|
||
:key="item.value"
|
||
:label="item.info"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="联系人电话" prop="linkRelationCode">
|
||
<el-input v-model="form.linkTelcom" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="地址选择" prop="addressSelect">
|
||
<el-cascader
|
||
:options="options"
|
||
:props="{ checkStrictly: true, value: 'code', label: 'name' }"
|
||
v-model="selectedOptions"
|
||
@change="handleChange"
|
||
:disabled="isViewMode"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span>{{ data.name }}</span>
|
||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||
</template>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="详细地址" prop="address">
|
||
<el-input v-model="form.address" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="血型ABO" prop="bloodAbo">
|
||
<el-select
|
||
v-model="form.bloodAbo"
|
||
placeholder="血型ABO"
|
||
clearable
|
||
:disabled="isViewMode"
|
||
>
|
||
<el-option
|
||
v-for="item in bloodtypeaboList"
|
||
:key="item.value"
|
||
:label="item.info"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="血型RH" prop="bloodRh">
|
||
<el-select v-model="form.bloodRh" placeholder="血型RH" clearable :disabled="isViewMode">
|
||
<el-option
|
||
v-for="item in bloodtypearhList"
|
||
:key="item.value"
|
||
:label="item.info"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="婚姻状态" prop="maritalStatusEnum">
|
||
<el-select
|
||
v-model="form.maritalStatusEnum"
|
||
placeholder="婚姻状态"
|
||
clearable
|
||
:disabled="isViewMode"
|
||
>
|
||
<el-option
|
||
v-for="item in maritalstatusList"
|
||
:key="item.value"
|
||
:label="item.info"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="死亡时间" prop="deceasedDate">
|
||
<el-date-picker
|
||
v-model="form.deceasedDate"
|
||
type="datetime"
|
||
placeholder="请选择时间"
|
||
format="YYYY/MM/DD HH:mm:ss"
|
||
:disabled="isViewMode"
|
||
value-format="YYYY/MM/DD HH:mm:ss"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- </div> -->
|
||
</template>
|
||
|
||
<script setup name="PatientAddDialog">
|
||
import { watch } from "vue";
|
||
import pcas from 'china-division/dist/pcas-code.json';
|
||
import { addPatient, patientlLists, getOutpatientRegistrationList } from './outpatientregistration';
|
||
import { fromPairs } from 'lodash';
|
||
|
||
const router = useRouter();
|
||
const { proxy } = getCurrentInstance();
|
||
const {
|
||
patient_gender_enum,
|
||
sys_idtype,
|
||
prfs_enum,
|
||
blood_rh,
|
||
blood_abo,
|
||
marital_status_enum,
|
||
patient_temp_flag,
|
||
link_relation_code,
|
||
nationality_code,
|
||
} = proxy.useDict(
|
||
'patient_gender_enum',
|
||
'sys_idtype',
|
||
'prfs_enum',
|
||
'blood_rh',
|
||
'blood_abo',
|
||
'marital_status_enum',
|
||
'patient_temp_flag',
|
||
'link_relation_code',
|
||
'nationality_code'
|
||
);
|
||
|
||
const selectedOptions = ref([]); // v-model 绑定的选中值
|
||
const maritalstatusList = ref([]); //婚姻
|
||
const occupationtypeList = ref([]); //职业
|
||
const administrativegenderList = ref([]); //性别
|
||
const bloodtypeaboList = ref([]); //血型abo
|
||
const bloodtypearhList = ref([]); //血型RH
|
||
const familyrelationshiptypeList = ref([]); //家庭关系
|
||
// 使用 ref 定义查询所得用户信息数据
|
||
const patientInfo = ref(undefined);
|
||
const addressCom = ref(''); //地址
|
||
|
||
const options = ref(pcas); // 地区数据
|
||
|
||
const title = ref('新增患者');
|
||
const visible = ref(false);
|
||
const emits = defineEmits(['submit']); // 声明自定义事件
|
||
|
||
|
||
// 身份证号码校验函数
|
||
const validateIdCard = (rule, value, callback) => {
|
||
if (!value) {
|
||
callback();
|
||
return;
|
||
}
|
||
|
||
// 18位身份证正则
|
||
const reg = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
||
if (!reg.test(value)) {
|
||
return callback(new Error('请输入正确的18位身份证号码'));
|
||
}
|
||
|
||
// 校验码验证（第18位）
|
||
const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||
const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||
let sum = 0;
|
||
for (let i = 0; i < 17; i++) {
|
||
sum += parseInt(value.charAt(i)) * factor[i];
|
||
}
|
||
const last = parity[sum % 11];
|
||
if (last !== value.charAt(17).toUpperCase()) {
|
||
return callback(new Error('身份证校验码错误'));
|
||
}
|
||
|
||
callback(); // 校验通过
|
||
}
|
||
|
||
|
||
const data = reactive({
|
||
isViewMode: false,
|
||
form: {
|
||
typeCode: '08',
|
||
birthDate: undefined,
|
||
age: undefined,
|
||
},
|
||
rules: {
|
||
name: [{ required: true, message: '姓名不能为空', trigger: 'change' }],
|
||
genderEnum: [{ required: true, message: '请选择性别', trigger: 'change' }],
|
||
age: [{ required: true, message: '年龄不能为空', trigger: 'change' }],
|
||
phone: [{ required: true, message: '联系方式不能为空', trigger: 'change' }],
|
||
identifierNo: [{ required: true, message: '就诊卡号不能为空', trigger: 'change' }],
|
||
idCard: [
|
||
{ required: true, message: '证件号码不能为空', trigger: 'change' },
|
||
{ validator: validateIdCard, trigger: 'blur' }
|
||
],
|
||
birthDate: [{ required: false, message: '请选择出生日期', trigger: 'change' }],
|
||
},
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
const { queryParams, form, rules, isViewMode } = toRefs(data);
|
||
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
required: false,
|
||
},
|
||
});
|
||
|
||
// 处理出生日期变化，自动计算年龄
|
||
function handleBirthDateChange() {
|
||
if (form.value.birthDate) {
|
||
const birthDate = new Date(form.value.birthDate);
|
||
const today = new Date();
|
||
|
||
let age = today.getFullYear() - birthDate.getFullYear();
|
||
const monthDiff = today.getMonth() - birthDate.getMonth();
|
||
|
||
// 计算精确年龄
|
||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
|
||
age--;
|
||
}
|
||
|
||
form.value.age = age;
|
||
}
|
||
}
|
||
|
||
// 处理年龄输入，自动计算出生日期
|
||
function handleAgeInput() {
|
||
// 提取数字部分
|
||
const ageMatch = form.value.age.match(/\d+/);
|
||
if (ageMatch) {
|
||
const age = parseInt(ageMatch[0]);
|
||
// 移除非数字字符，保留数字和可能的单位
|
||
form.value.age = age ;
|
||
|
||
// 计算出生日期
|
||
const today = new Date();
|
||
const birthYear = today.getFullYear() - age;
|
||
const birthMonth = today.getMonth();
|
||
const birthDay = today.getDate();
|
||
|
||
const birthDate = new Date(birthYear, birthMonth, birthDay);
|
||
|
||
// 格式化为YYYY-MM-DD
|
||
const formattedBirthDate = birthDate.toISOString().split('T')[0];
|
||
form.value.birthDate = formattedBirthDate;
|
||
}
|
||
}
|
||
watch(
|
||
() => form.value.idCard,
|
||
(newIdCard) => {
|
||
if (newIdCard && newIdCard.length === 18) {
|
||
const birthYear = parseInt(newIdCard.substring(6, 10));
|
||
const birthMonth = parseInt(newIdCard.substring(10, 12));
|
||
const birthDay = parseInt(newIdCard.substring(12, 14));
|
||
// 设置出生日期
|
||
form.value.birthDate = `${birthYear}-${birthMonth.toString().padStart(2, '0')}-${birthDay.toString().padStart(2, '0')}`;
|
||
const today = new Date();
|
||
const currentYear = today.getFullYear();
|
||
const currentMonth = today.getMonth() + 1;
|
||
const currentDay = today.getDate();
|
||
|
||
let age = currentYear - birthYear;
|
||
|
||
// 如果当前月份小于出生月份，或者月份相同但当前日期小于出生日期，则年龄减1
|
||
if (
|
||
currentMonth < birthMonth ||
|
||
(currentMonth === birthMonth && currentDay < birthDay)
|
||
) {
|
||
age--;
|
||
}
|
||
|
||
form.value.age = age ;
|
||
}
|
||
}
|
||
);
|
||
/** 查询菜单列表 */
|
||
function getList() {
|
||
patientlLists().then((response) => {
|
||
console.log(response);
|
||
occupationtypeList.value = response.data.occupationType;
|
||
administrativegenderList.value = response.data.sex;
|
||
bloodtypeaboList.value = response.data.bloodTypeABO;
|
||
bloodtypearhList.value = response.data.bloodTypeRH;
|
||
familyrelationshiptypeList.value = response.data.familyRelationshipType;
|
||
maritalstatusList.value = response.data.maritalStatus;
|
||
});
|
||
}
|
||
|
||
/** 打开用户信息弹窗 */
|
||
function getPatientInfo(idCard) {
|
||
const param = {
|
||
searchKey: idCard,
|
||
};
|
||
getOutpatientRegistrationList(param).then((res) => {
|
||
console.log(param, 'param');
|
||
if (res.data.records.length == 1) {
|
||
patientInfo.value = res.data.records[0];
|
||
console.log(patientInfo.value, 'patientInfo.value');
|
||
// 将表单数据发送给父组件
|
||
emits('submit', patientInfo.value);
|
||
}
|
||
});
|
||
}
|
||
//地址选择
|
||
const handleChange = () => {
|
||
const checkedNodes = selectedOptions.value.map((code) => {
|
||
const node = findNodeByCode(options.value, code);
|
||
return node ? node.name : null;
|
||
});
|
||
form.value.addressProvince = checkedNodes[0] || '';
|
||
form.value.addressCity = checkedNodes[1] || '';
|
||
form.value.addressDistrict = checkedNodes[2] || '';
|
||
form.value.addressStreet = checkedNodes[3] || '';
|
||
form.value.address = '';
|
||
};
|
||
|
||
// 递归查找节点
|
||
const findNodeByCode = (data, code) => {
|
||
for (const item of data) {
|
||
if (item.code === code) return item;
|
||
if (item.children) {
|
||
const result = findNodeByCode(item.children, code);
|
||
if (result) return result;
|
||
}
|
||
}
|
||
return null;
|
||
};
|
||
// 显示弹框
|
||
function show() {
|
||
// queryParams.roleId = props.roleId;
|
||
getList();
|
||
visible.value = true;
|
||
}
|
||
|
||
/** 表单重置 */
|
||
function reset() {
|
||
form.value = {
|
||
name: undefined,
|
||
nameJson: undefined,
|
||
menuName: undefined,
|
||
age: undefined,
|
||
genderEnum: undefined,
|
||
typeCode: '08',
|
||
idCard: undefined,
|
||
phone: undefined,
|
||
prfsEnum: undefined,
|
||
address: undefined,
|
||
tempFlag: undefined,
|
||
countryCode: undefined,
|
||
bloodRh: undefined,
|
||
bloodAbo: undefined,
|
||
nationalityCode: undefined,
|
||
deceasedDate: undefined,
|
||
linkName: undefined,
|
||
linkRelationCode: undefined,
|
||
linkTelcom: undefined,
|
||
workCompany: undefined,
|
||
addressCity: undefined,
|
||
addressDistrict: undefined,
|
||
addressStreet: undefined,
|
||
addressProvince: undefined,
|
||
maritalStatusEnum: undefined,
|
||
busNo: undefined,
|
||
organizationId: undefined,
|
||
birthDate: undefined,
|
||
};
|
||
proxy.resetForm('patientRef');
|
||
}
|
||
/** 提交按钮 */
|
||
function submitForm() {
|
||
if (form.value.idCard) {
|
||
form.value.birthDate =
|
||
form.value.idCard.toString().substring(6, 10) +
|
||
'-' +
|
||
form.value.idCard.toString().substring(10, 12) +
|
||
'-' +
|
||
form.value.idCard.toString().substring(12, 14);
|
||
console.log(form.value.birthDate, 123);
|
||
}
|
||
proxy.$refs['patientRef'].validate((valid) => {
|
||
if (valid) {
|
||
// 使用
|
||
if (!form.value.identifierNo) {
|
||
form.value.typeCode = undefined;
|
||
}
|
||
form.value.address = getAddress(form);
|
||
addPatient(form.value).then((response) => {
|
||
proxy.$modal.msgSuccess('新增成功');
|
||
getPatientInfo(response.data.idCard);
|
||
visible.value = false;
|
||
reset();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// 获取完整地址字符串
|
||
function getAddress(form) {
|
||
const addressParts = [
|
||
form.value.addressProvince,
|
||
form.value.addressCity,
|
||
form.value.addressDistrict,
|
||
form.value.addressStreet,
|
||
form.value.address,
|
||
];
|
||
|
||
// 使用 reduce 方法拼接地址
|
||
return addressParts.reduce((acc, part) => {
|
||
return part ? acc + part : acc;
|
||
}, '');
|
||
}
|
||
/** 取消按钮 */
|
||
function cancel() {
|
||
visible.value = false;
|
||
reset();
|
||
}
|
||
defineExpose({
|
||
show,
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
.el-form--inline .el-form-item {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
margin-right: 10px !important;
|
||
}
|
||
|
||
/* 使用深度选择器 */
|
||
.custom-label-spacing :deep(.el-form-item__label) {
|
||
line-height: 1.2; /* 调整行间距 */
|
||
margin-bottom: 4px; /* 调整 label 和输入框之间的间距 */
|
||
}
|
||
</style>
|