682 lines
22 KiB
Vue
682 lines
22 KiB
Vue
<template>
|
||
<!-- <div class="app-container"> -->
|
||
<!-- 添加或修改对话框 -->
|
||
<el-dialog :title="title" v-model="visible" width="1020px" append-to-body>
|
||
<el-form ref="patientRef" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||
<!-- 第一行：姓名、民族、性别 -->
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="姓名" prop="name" label-width="80px">
|
||
<el-input v-model="form.name" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="民族" prop="nationalityCode" label-width="80px">
|
||
<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="genderEnum" label-width="80px">
|
||
<el-radio-group v-model="form.genderEnum" :disabled="isViewMode">
|
||
<el-radio :label="0">男性</el-radio>
|
||
<el-radio :label="1">女性</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第二行：证件类别、证件号码、*年龄 -->
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="证件类别" prop="typeCode" label-width="80px">
|
||
<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="idCard" label-width="80px">
|
||
<el-input v-model="form.idCard" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="年龄" prop="age" label-width="80px">
|
||
<el-input
|
||
v-model="form.age"
|
||
:disabled="isViewMode"
|
||
@input="handleAgeInput"
|
||
placeholder="请输入龄"
|
||
>
|
||
<template #suffix>岁</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第三行：国家编码、*联系方式、工作单位 -->
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="国家编码" prop="countryCode" label-width="80px">
|
||
<el-input v-model="form.countryCode" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="联系方式" prop="phone" label-width="80px">
|
||
<el-input v-model="form.phone" 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-row>
|
||
<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="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-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="16">
|
||
<el-form-item label="详细地址" prop="address">
|
||
<el-input v-model="form.address" clearable :disabled="isViewMode" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第六行：血型ABO、血型RH -->
|
||
<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="16">
|
||
<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-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="监护人" prop="guardianName">
|
||
<el-input v-model="form.guardianName" clearable :disabled="isViewMode" placeholder="请输入监护人" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="监护人关系" prop="guardianRelation">
|
||
<el-select v-model="form.guardianRelation" 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="guardianPhone">
|
||
<el-input v-model="form.guardianPhone" clearable :disabled="isViewMode" placeholder="请输入监护人电话" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第九行：监护人证件类型、监护人证件号码 -->
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="监护人证件类型" prop="guardianIdType">
|
||
<el-select v-model="form.guardianIdType" placeholder="请选择" clearable :disabled="isViewMode">
|
||
<el-option label="身份证" value="id_card" />
|
||
<el-option label="护照" value="passport" />
|
||
<el-option label="其他" value="other" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-form-item label="监护人证件号码" prop="guardianIdNo">
|
||
<el-input v-model="form.guardianIdNo" clearable :disabled="isViewMode" placeholder="请输入监护人证件号码" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第十行：监护人地址 -->
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="监护人地址" prop="guardianAddress">
|
||
<el-input v-model="form.guardianAddress" clearable :disabled="isViewMode" placeholder="请输入监护人详细地址" />
|
||
</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 validateUniquePatient = (rule, value, callback) => {
|
||
const { name, idCard } = form.value;
|
||
// 确保姓名和身份证都已填写且身份证为18位
|
||
if (!name || !idCard || idCard.length !== 18) {
|
||
return callback(); // 不满足条件，不校验
|
||
}
|
||
|
||
// 使用 axios 直接请求，避免依赖 proxy.$http
|
||
import('@/utils/request').then(({ default: request }) => {
|
||
request({
|
||
url: '/patient-manage/information/check-exists',
|
||
method: 'get',
|
||
params: {
|
||
name: name,
|
||
idCardNo: idCard
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 200 && res.data === true) {
|
||
callback(new Error('该患者档案已存在！'));
|
||
} else {
|
||
callback();
|
||
}
|
||
}).catch(error => {
|
||
console.error('校验患者是否存在失败:', error);
|
||
callback(); // 出错时不阻塞表单
|
||
});
|
||
});
|
||
};
|
||
|
||
|
||
|
||
// 身份证号码校验函数
|
||
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 validateGuardianInfo = (rule, value, callback) => {
|
||
// 只有当年龄小于18岁时才验证监护人信息
|
||
if (form.value.age) {
|
||
// 提取年龄数字部分
|
||
const ageMatch = form.value.age.toString().match(/\d+/);
|
||
if (ageMatch) {
|
||
const age = parseInt(ageMatch[0]);
|
||
// 如果年龄小于18岁，监护人信息必须填写
|
||
if (age < 18 && !value) {
|
||
return callback(new Error('年龄小于18岁的患者必须填写监护人信息'));
|
||
}
|
||
}
|
||
}
|
||
// 18岁及以上患者或年龄未填写时，跳过验证
|
||
callback();
|
||
}
|
||
|
||
const data = reactive({
|
||
isViewMode: false,
|
||
form: {
|
||
typeCode: '08',
|
||
birthDate: undefined,
|
||
age: undefined,
|
||
},
|
||
rules: {
|
||
name: [{ required: true, message: '姓名不能为空', trigger: 'change' },
|
||
{ validator: validateUniquePatient, trigger: 'blur' }
|
||
],
|
||
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: false, message: '证件号码不能为空', trigger: 'change' },
|
||
{ validator: validateIdCard, trigger: 'blur' },
|
||
{ validator: validateUniquePatient, trigger: 'blur' }
|
||
],
|
||
birthDate: [{ required: false, message: '请选择出生日期', trigger: 'change' }],
|
||
// 监护人信息条件验证规则
|
||
guardianName: [{ validator: validateGuardianInfo, trigger: 'blur' }],
|
||
guardianRelation: [{ validator: validateGuardianInfo, trigger: 'blur' }],
|
||
guardianPhone: [{ validator: validateGuardianInfo, trigger: 'blur' }],
|
||
guardianIdNo: [{ validator: validateGuardianInfo, trigger: 'blur' }],
|
||
},
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
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 和输入框之间的间距 */
|
||
}
|
||
|
||
/* 防止表单标签换行 */
|
||
:deep(.el-form-item__label) {
|
||
white-space: nowrap;
|
||
overflow: visible;
|
||
text-overflow: clip;
|
||
width: 120px;
|
||
}
|
||
</style>
|