397 lines
12 KiB
Vue
397 lines
12 KiB
Vue
<template>
|
||
<el-form ref="patientRef" :model="form" :rules="rules" label-width="100px">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="姓名" prop="name">
|
||
<el-input v-model="form.name" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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="6">
|
||
<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="6">
|
||
<el-form-item label="联系方式" prop="phone">
|
||
<el-input v-model="form.phone" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="年龄" prop="age">
|
||
<el-input
|
||
v-model="form.age"
|
||
:disabled="isViewMode"
|
||
@input="(value) => (form.age = value.replace(/[^0-9]/g, ''))"
|
||
>
|
||
<template #suffix>岁</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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="6">
|
||
<el-form-item label="证件号码" prop="idCard">
|
||
<el-input v-model="form.idCard" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="就诊卡号" prop="identifierNo">
|
||
<el-input v-model="form.identifierNo" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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-row>
|
||
<!-- <el-col :span="6">
|
||
<el-form-item label="年龄" prop="age">
|
||
<el-input v-model="form.age" clearable :disabled="isViewMode">
|
||
<template #suffix>岁</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col> -->
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="国家编码" prop="countryCode">
|
||
<el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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="6">
|
||
<el-form-item label="工作单位" prop="workCompany">
|
||
<el-input v-model="form.workCompany" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item label="联系人" prop="linkName">
|
||
<el-input v-model="form.linkName" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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="6">
|
||
<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="6">
|
||
<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="12">
|
||
<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="6">
|
||
<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="6">
|
||
<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-col :span="6">
|
||
<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="6">
|
||
<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>
|
||
|
||
<script setup>
|
||
import { watch } from 'vue';
|
||
import pcas from 'china-division/dist/pcas-code.json';
|
||
import { patientFormInit } from './api';
|
||
|
||
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 emits = defineEmits(['submit']); // 声明自定义事件
|
||
|
||
const data = reactive({
|
||
isViewMode: false,
|
||
form: {
|
||
typeCode: '01',
|
||
},
|
||
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' }],
|
||
},
|
||
});
|
||
|
||
const { queryParams, form, rules, isViewMode } = toRefs(data);
|
||
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
required: false,
|
||
},
|
||
});
|
||
|
||
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));
|
||
|
||
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;
|
||
}
|
||
}
|
||
);
|
||
getList();
|
||
/** 查询菜单列表 */
|
||
function getList() {
|
||
patientFormInit().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;
|
||
});
|
||
}
|
||
|
||
//地址选择
|
||
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 reset() {
|
||
form.value = {
|
||
name: undefined,
|
||
nameJson: undefined,
|
||
menuName: undefined,
|
||
age: undefined,
|
||
genderEnum: undefined,
|
||
typeCode: '01',
|
||
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,
|
||
};
|
||
proxy.resetForm('patientRef');
|
||
}
|
||
defineExpose({ form });
|
||
</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>
|