generated from Leo_Ding/web-template
对接详细基础信息和残疾信息数据
This commit is contained in:
Leo_Ding
parent
aaafe1afbb
commit
66514a1a08
@ -2,179 +2,175 @@
|
|||||||
<div>
|
<div>
|
||||||
<a-row :gutter="20">
|
<a-row :gutter="20">
|
||||||
<!-- 基本信息 -->
|
<!-- 基本信息 -->
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">服务对象姓名姓名:</span> {{ formData.name || '-' }}</div>
|
<div><span class="label">出生日期:</span> {{ dayjs(formData.birthDate).format('YYYY-MM-DD') || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">性别:</span> {{ formData.gender || '-' }}</div>
|
<div><span class="label">关爱巡访电话:</span> {{ formData.careVisitPhone || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">出生日期:</span> {{ formData.birthDate || '-' }}</div>
|
<div><span class="label">联系方式:</span> {{ formData.contact1 || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">关爱巡访电话:</span> {{ formData.careVisitPhone || '-' }}</div>
|
<div><span class="label">其他电话1:</span> {{ formData.otherPhone1 || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">联系方式:</span> {{ formData.contact1 || '-' }}</div>
|
<div><span class="label">其他电话2:</span> {{ formData.otherPhone2 || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">其他电话1:</span> {{ formData.otherPhone1 || '-' }}</div>
|
<div><span class="label">社保卡号:</span> {{ formData.socialSecurityCardNumber || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">其他电话2:</span> {{ formData.otherPhone2 || '-' }}</div>
|
<div><span class="label">证件类型:</span> {{ dicsStore.getDictLabel('CARD_TYPE', formData.identityType) || '-' }}
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">联系状态:</span> {{ formData.contactStatus || '-' }}</div>
|
<div><span class="label">证件号码:</span> {{ formData.identityNo || '-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">社保卡号:</span> {{ formData.socialSecurityCardNumber || '-' }}</div>
|
<a-col :span="6">
|
||||||
|
<div><span class="label">护理等级:</span> {{ dicsStore.getDictLabel('Care_Level', formData.archive.nursingLevel) ||
|
||||||
|
'-' }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
<a-col :span="6">
|
||||||
<div ><span class="label">证件类型:</span> {{ formData.identityType || '-' }}</div>
|
<div><span class="label">健康状况:</span> {{ dicsStore.getDictLabel('Health_Condition',
|
||||||
</a-col>
|
formData.archive.healthStatus) || '-' }}</div>
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">证件号码:</span> {{ formData.idNumber || '-' }}</div>
|
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">生存状态:</span> {{ dicsStore.getDictLabel('LIVING_STATUS',
|
||||||
|
formData.archive.survivalStatus) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">服务状态:</span> {{ dicsStore.getDictLabel('SERVICE_STATUS',
|
||||||
|
formData.archive.serviceStatus) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">服务形式:</span> {{ dicsStore.getDictLabel('Service_Format', formData.archive.serviceForm)
|
||||||
|
|| '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<!-- 其他字段 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">居住情况:</span> {{ dicsStore.getDictLabel('Living_Situation',
|
||||||
|
formData.archive.livingSituation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">子女情况:</span> {{ dicsStore.getDictLabel('CHILDREN_STATE',
|
||||||
|
formData.archive.childrenSituation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">统计分类:</span> {{ dicsStore.getDictLabel('Statistical_Classification',
|
||||||
|
formData.archive.statisticsCategory) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">智力情况:</span> {{ dicsStore.getDictLabel('Intellectual_Condition',
|
||||||
|
formData.archive.intellectualSituation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">长期照料失能子女:</span> {{ dicsStore.getDictLabel('Disabled_Child',
|
||||||
|
formData.archive.longTermCareForDisabledChildren) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">子女探望情况:</span> {{ dicsStore.getDictLabel('Frequency_Visits',
|
||||||
|
formData.archive.childrenVisitStatus) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">人户分离:</span> {{ dicsStore.getDictLabel('Separation',
|
||||||
|
formData.archive.householdResidenceSeparation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">民族:</span> {{ dicsStore.getDictLabel('Ethnicity', formData.archive.ethnicity) || '-' }}
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">完成能力评估:</span> {{ dicsStore.getDictLabel('Capability_Assessment',
|
||||||
|
formData.archive.completedCapacityAssessment) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">住出租屋/地下室:</span> {{ dicsStore.getDictLabel('Property_Basement',
|
||||||
|
formData.archive.livesInRentedRoomOrBasement) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">经济来源:</span> {{ dicsStore.getDictLabel('Source_Income',
|
||||||
|
formData.archive.economicSource) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">文化程度:</span> {{ dicsStore.getDictLabel('Level_Education',
|
||||||
|
formData.archive.educationLevel) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">宗教信仰:</span> {{ dicsStore.getDictLabel('Religious_belief', formData.archive.religion)
|
||||||
|
|| '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">职业情况:</span> {{ dicsStore.getDictLabel('Employment_Status',
|
||||||
|
formData.archive.occupation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">政治面貌:</span> {{ dicsStore.getDictLabel('Political_affiliation',
|
||||||
|
formData.archive.politicalAffiliation) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">婚姻情况:</span> {{ dicsStore.getDictLabel('Marital_Status',
|
||||||
|
formData.archive.maritalStatus) || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 政府购买服务时间 -->
|
||||||
|
<a-col :span="12">
|
||||||
|
<div>
|
||||||
|
<span class="label">政府购买服务时间:</span>
|
||||||
|
{{ formatDate(formData.archive.starGovernmentService) }}- {{ formatDate(formData.archive.endGovernmentService)
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<div >
|
<div>
|
||||||
<span class="label">家庭地址:</span>
|
<span class="label">家庭地址:</span>
|
||||||
{{ formatArea(formData.homeAreaLabels) }} {{ formData.homeDetailAddress || '' }}
|
{{ formatArea(formData.archive.homeAreaLabels) }} {{ formData.archive.homeDetailAddress || '' }}
|
||||||
<span v-if="formData.lag && formData.lat" style="color: #999;">
|
<span v-if="formData.lag && formData.lat" style="color: #999;">
|
||||||
(经度: {{ formData.lag }}, 纬度: {{ formData.lat }})
|
(经度: {{ formData.lag }}, 纬度: {{ formData.lat }})
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">护理等级:</span> {{ formData.nursingLevel || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">健康状况:</span> {{ formData.healthStatus || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">生存状态:</span> {{ formData.survivalStatus || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">服务状态:</span> {{ formData.serviceStatus || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">服务形式:</span> {{ formData.serviceForm || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<div >
|
<div>
|
||||||
<span class="label">户籍地址:</span>
|
<span class="label">户籍地址:</span>
|
||||||
{{ formatArea(formData.houseAreaLabels) }} {{ formData.householdDetailAddress || '' }}
|
{{ formatArea(formData.archive.houseAreaLabels) }} {{ formData.archive.householdDetailAddress || '' }}
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<!-- 政府购买服务时间 -->
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">政府购买服务开始时间(起):</span>
|
|
||||||
{{ formatDate(formData.governmentPurchasedServiceStartDateStart) }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">政府购买服务开始时间(止):</span>
|
|
||||||
{{ formatDate(formData.governmentPurchasedServiceStartDateEnd) }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<!-- 其他字段 -->
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">居住情况:</span> {{ formData.livingSituation || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">子女情况:</span> {{ formData.childrenSituation || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">统计分类:</span> {{ formData.statisticsCategory || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">智力情况:</span> {{ formData.intellectualSituation || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">长期照料失能子女:</span>
|
|
||||||
{{ formData.longTermCareForDisabledChildren === 'true' ? '是' : formData.longTermCareForDisabledChildren === 'false' ? '否' : '-' }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">子女探望情况:</span> {{ formData.childrenVisitStatus || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">人户分离:</span>
|
|
||||||
{{ formData.householdResidenceSeparation === 'true' ? '是' : formData.householdResidenceSeparation === 'false' ? '否' : '-' }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">民族:</span> {{ formData.ethnicity || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">完成能力评估:</span>
|
|
||||||
{{ formData.completedCapacityAssessment === 'true' ? '是' : formData.completedCapacityAssessment === 'false' ? '否' : '-' }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div >
|
|
||||||
<span class="label">住出租屋/地下室:</span>
|
|
||||||
{{ formData.livesInRentedRoomOrBasement === 'true' ? '是' : formData.livesInRentedRoomOrBasement === 'false' ? '否' : '-' }}
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">经济来源:</span> {{ formData.economicSource || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">文化程度:</span> {{ formData.educationLevel || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">宗教信仰:</span> {{ formData.religion || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">职业情况:</span> {{ formData.occupation || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">政治面貌:</span> {{ formData.politicalAffiliation || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<a-col :span="8">
|
|
||||||
<div ><span class="label">婚姻情况:</span> {{ formData.maritalStatus || '-' }}</div>
|
|
||||||
</a-col>
|
|
||||||
|
|
||||||
<!-- 数组类字段 -->
|
<!-- 数组类字段 -->
|
||||||
<a-col :span="24" v-if="formData.idCardPhotos && formData.idCardPhotos.length > 0">
|
<a-col :span="24" v-if="formData.archive.idCardPhotos && formData.archive.idCardPhotos.length > 0">
|
||||||
<div >
|
<div>
|
||||||
<span class="label">身份证照片:</span>
|
<span class="label">身份证照片:</span>
|
||||||
<div style="margin-top: 8px;">
|
<div style="margin-top: 8px;">
|
||||||
<a-image
|
<a-image v-for="(url, index) in formData.archive.idCardPhotos" :key="index" :src="url" fit="cover"
|
||||||
v-for="(url, index) in formData.idCardPhotos"
|
style="width: 100px; height: 60px; margin-right: 8px;" :preview-src-list="formData.archive.idCardPhotos" />
|
||||||
:key="index"
|
|
||||||
:src="url"
|
|
||||||
fit="cover"
|
|
||||||
style="width: 100px; height: 60px; margin-right: 8px;"
|
|
||||||
:preview-src-list="formData.idCardPhotos"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps } from 'vue';
|
import { ref, defineProps, defineExpose } from 'vue';
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { useDicsStore } from '@/store'
|
||||||
|
const dicsStore = useDicsStore()
|
||||||
|
const props = defineProps({
|
||||||
|
formData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const formData=ref({});
|
|
||||||
|
|
||||||
// 格式化地址数组
|
// 格式化地址数组
|
||||||
const formatArea = (areaArray) => {
|
const formatArea = (areaArray) => {
|
||||||
|
|||||||
@ -1,6 +1,48 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>新建文件</div>
|
<div>
|
||||||
|
<a-row :gutter="20">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">残疾证号:</span> {{ formData.disabledPerson.disabledNo || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">残疾类型:</span> {{ formData.disabledPerson.disabledType || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">残疾等级:</span> {{ formData.disabledPerson.disabledLv || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">是否已签订托养协议:</span> {{ formData.disabledPerson.agreementSigned || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="6">
|
||||||
|
<div><span class="label">托养起止时间:</span> {{ formData.disabledPerson.starCareService || '-' }} - {{ formData.disabledPerson.endCareService || '-' }}</div>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :span="24" v-if="formData.disabledPerson.careServiceImgs && formData.disabledPerson.careServiceImgs.length > 0">
|
||||||
|
<div>
|
||||||
|
<span class="label">托养协议照片:</span>
|
||||||
|
<div style="margin-top: 8px;">
|
||||||
|
<a-image v-for="(url, index) in formData.disabledPerson.careServiceImgs" :key="index" :src="url" fit="cover"
|
||||||
|
style="width: 100px; height: 60px; margin-right: 8px;" :preview-src-list="formData.disabledPerson.careServiceImgs" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, defineProps } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
formData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.label {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 45px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,31 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-modal :open="modal.open" :title="modal.title" :width="1000" :confirm-loading="modal.confirmLoading"
|
<a-modal :open="modal.open" :title="modal.title" :width="1200" :confirm-loading="modal.confirmLoading"
|
||||||
:after-close="onAfterClose" :cancel-text="cancelText" @ok="handleOk" @cancel="handleCancel">
|
:after-close="onAfterClose" :cancel-text="cancelText" @ok="handleOk" @cancel="handleCancel">
|
||||||
<a-card>
|
<a-card>
|
||||||
<div style="display: flex;justify-content: space-around;">
|
<div style="display: flex; justify-content: space-around;flex-direction: column;">
|
||||||
<div
|
<!-- 左侧信息栏 -->
|
||||||
style="width:280px;margin-top: 20px;border-right: 1px solid #f0f0f0;display: flex;flex-direction: column;align-items: center;">
|
<div style="margin-top: 20px;display: flex;align-items: center;margin-left: 20px;">
|
||||||
<gx-upload v-model="formData.imgList" accept-types=".jpg,.png,.webp" :fileNumber="1" />
|
<gx-upload v-model="formData.imgList" accept-types=".jpg,.png,.webp" :fileNumber="1" />
|
||||||
<div>
|
<div style="margin-left: 20px;">
|
||||||
<p>{{ formData.name }}{{ formData.gender }}{{ formData.age }}</p>
|
<p style="font-weight: bold;">
|
||||||
<p>身份证号：{{ formData.idNumber }}</p>
|
<span>{{ formData.name }}</span>
|
||||||
<p>手机号：{{ formData.contact1 }}</p>
|
<span style="margin: 0 50px;">{{ formData.gender === '1' ? '男' : '女' }}</span>
|
||||||
<!-- <p>联系人：{{ formData.contactman }}</p>
|
<span>{{ formData.age }}</span>
|
||||||
<p>联系方式：{{ formData.contact1 }}</p> -->
|
</p>
|
||||||
<p><a-tag color="#2db7f5" v-for="value in formData.serviceRecipientCategory">{{ value }}</a-tag></p>
|
<p>
|
||||||
|
<span>身份证号：{{ formData.idNumber }}</span>
|
||||||
|
<span style="margin: 0 50px;">手机号：{{ formData.contact1 }}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a-tag color="#2db7f5" v-for="value in formData.serviceRecipientCategory" :key="value">
|
||||||
|
{{ value }}
|
||||||
|
</a-tag>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: calc(100% - 280px);padding: 20px;">
|
|
||||||
<!-- Tab 页签 -->
|
<!-- 右侧 Tab 区域 -->
|
||||||
|
<div style="padding: 20px;">
|
||||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
|
||||||
<a-tab-pane v-for="(tab, index) in tabsList" :key="index+1" :tab="tab" />
|
<a-tab-pane v-for="(tab, index) in tabsList" :key="index + 1" :tab="tab" />
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
<!-- 动态组件区域 -->
|
|
||||||
|
<!-- 动态组件 + keep-alive -->
|
||||||
<div style="flex: 1; padding: 16px; overflow-y: auto;">
|
<div style="flex: 1; padding: 16px; overflow-y: auto;">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component v-if="currentComponent" :is="currentComponent" :ref="activeKey"
|
<component v-if="currentComponent" :is="currentComponent" ref="dynamicComponentRef"
|
||||||
:key="activeKey" />
|
:key="tabsList[activeKey - 1]" :formData="formData" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -37,21 +46,43 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import GxUpload from '@/components/GxUpload/index.vue'
|
import GxUpload from '@/components/GxUpload/index.vue'
|
||||||
import { cloneDeep } from 'lodash-es'
|
import { cloneDeep } from 'lodash-es'
|
||||||
import { ref, computed, defineAsyncComponent, defineExpose, getCurrentInstance, nextTick } from 'vue'
|
import {
|
||||||
import { config } from '@/config'
|
ref,
|
||||||
import apis from '@/apis'
|
computed,
|
||||||
|
defineAsyncComponent,
|
||||||
|
defineExpose,
|
||||||
|
nextTick
|
||||||
|
} from 'vue'
|
||||||
import { useForm, useModal } from '@/hooks'
|
import { useForm, useModal } from '@/hooks'
|
||||||
import { useDicsStore } from '@/store'
|
import apis from '@/apis'
|
||||||
|
const childData = ref({})
|
||||||
const emit = defineEmits(['ok'])
|
const emit = defineEmits(['ok'])
|
||||||
const activeKey = ref(0)
|
// 当前 tab key
|
||||||
|
const activeKey = ref(1)
|
||||||
|
|
||||||
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
|
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
|
||||||
const { formRecord, formData, formRef, formRules, resetForm } = useForm()
|
const { formData, resetForm } = useForm()
|
||||||
|
|
||||||
const cancelText = ref('取消')
|
const cancelText = ref('取消')
|
||||||
const imgList = ref([])
|
const recordId = ref('');
|
||||||
const tabsList = ['基本信息', '残疾人信息', '联系人信息', '附件', '病史信息', '服务记录', '工单图片和视频', '联络历史', '操作记录', '转入转出记录']
|
// Tab 列表
|
||||||
|
const tabsList = [
|
||||||
|
'基本信息',
|
||||||
|
'残疾人信息',
|
||||||
|
'联系人信息',
|
||||||
|
'附件',
|
||||||
|
'病史信息',
|
||||||
|
'服务记录',
|
||||||
|
'工单图片和视频',
|
||||||
|
'联络历史',
|
||||||
|
'操作记录',
|
||||||
|
'转入转出记录'
|
||||||
|
]
|
||||||
|
|
||||||
|
// 创建 ref 来引用当前动态组件
|
||||||
|
const dynamicComponentRef = ref(null) // ✅ 用于获取当前组件实例
|
||||||
|
|
||||||
// 组件映射表：tab 名称 -> 异步组件（懒加载）
|
// 组件映射表（懒加载）
|
||||||
const componentMap = {
|
const componentMap = {
|
||||||
'基本信息': defineAsyncComponent(() => import('./BasicInfo.vue')),
|
'基本信息': defineAsyncComponent(() => import('./BasicInfo.vue')),
|
||||||
'残疾人信息': defineAsyncComponent(() => import('./DisabledPersonInfo.vue')),
|
'残疾人信息': defineAsyncComponent(() => import('./DisabledPersonInfo.vue')),
|
||||||
@ -63,37 +94,48 @@ const componentMap = {
|
|||||||
'联络历史': defineAsyncComponent(() => import('./ContactHistory.vue')),
|
'联络历史': defineAsyncComponent(() => import('./ContactHistory.vue')),
|
||||||
'操作记录': defineAsyncComponent(() => import('./OperationLog.vue')),
|
'操作记录': defineAsyncComponent(() => import('./OperationLog.vue')),
|
||||||
'转入转出记录': defineAsyncComponent(() => import('./TransferRecords.vue')),
|
'转入转出记录': defineAsyncComponent(() => import('./TransferRecords.vue')),
|
||||||
};
|
}
|
||||||
|
|
||||||
// 当前应显示的组件
|
// 当前组件
|
||||||
const currentComponent = computed(() => {
|
const currentComponent = computed(() => {
|
||||||
const tabName = tabsList[activeKey.value];
|
const tabName = tabsList[activeKey.value - 1]
|
||||||
return componentMap[tabName];
|
return componentMap[tabName] || null
|
||||||
});
|
})
|
||||||
|
const getBasicInfo = async () => {
|
||||||
|
const { data, success } = await apis.serverObj.getItem(recordId.value).catch()
|
||||||
|
if (!success) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
const getDisabledPersonInfo = async () => {
|
||||||
|
|
||||||
// 当 tab 切换时触发
|
return { ceshi: '残疾人信息' };
|
||||||
const handleTabChange = (key) => {
|
}
|
||||||
// 等待组件渲染完成后再调用方法
|
// Tab 切换时调用子组件方法
|
||||||
nextTick(() => {
|
const handleTabChange = async (key) => {
|
||||||
const tabName = tabsList[key];
|
switch (tabsList[key - 1]) {
|
||||||
const componentName = componentMap[tabName];
|
case '基本信息':
|
||||||
if (componentName) {
|
formData.value = await getBasicInfo();
|
||||||
// 获取组件实例
|
break;
|
||||||
const instance = proxy.$refs[key];
|
case '残疾人信息':
|
||||||
if (instance && typeof instance.onTabClick === 'function') {
|
formData.value = await getBasicInfo();
|
||||||
instance.onTabClick(); // 调用组件的 onTabClick 方法
|
break;
|
||||||
} else if (instance && typeof instance.loadData === 'function') {
|
case '联系人信息':
|
||||||
instance.loadData(); // 或者 loadData
|
formData.value = await getBasicInfo();
|
||||||
}
|
break;
|
||||||
}
|
case '附件':
|
||||||
});
|
case '病史信息':
|
||||||
};
|
case '服务记录':
|
||||||
|
case '工单图片和视频':
|
||||||
|
case '联络历史':
|
||||||
|
case '操作记录':
|
||||||
|
case '转入转出记录':
|
||||||
|
|
||||||
// 兼容 setup 中使用 $refs
|
break
|
||||||
const { proxy } = getCurrentInstance();
|
}
|
||||||
/**
|
}
|
||||||
* 新建
|
// 其他方法保持不变...
|
||||||
*/
|
|
||||||
function handleCreate(record) {
|
function handleCreate(record) {
|
||||||
showModal({
|
showModal({
|
||||||
type: 'create',
|
type: 'create',
|
||||||
@ -102,72 +144,27 @@ function handleCreate(record) {
|
|||||||
formData.value = record
|
formData.value = record
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 编辑
|
|
||||||
*/
|
|
||||||
function handleEdit(record = {}) {
|
function handleEdit(record = {}) {
|
||||||
activeKey.value=1
|
activeKey.value = 1
|
||||||
showModal({
|
showModal({
|
||||||
type: 'edit',
|
type: 'edit',
|
||||||
title: '编辑项',
|
title: '详情',
|
||||||
})
|
})
|
||||||
|
recordId.value = record.id
|
||||||
formData.value = cloneDeep(record)
|
formData.value = cloneDeep(record)
|
||||||
}
|
}
|
||||||
const callback = (val) => {
|
|
||||||
console.log(val);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* 确定
|
|
||||||
*/
|
|
||||||
function handleOk() {
|
function handleOk() {
|
||||||
formRef.value
|
// 省略验证逻辑...
|
||||||
.validateFields()
|
|
||||||
.then(async (values) => {
|
|
||||||
try {
|
|
||||||
showLoading()
|
|
||||||
const params = {
|
|
||||||
...formData.value,
|
|
||||||
}
|
|
||||||
let result = null
|
|
||||||
switch (modal.value.type) {
|
|
||||||
case 'create':
|
|
||||||
result = await apis.serverObj.createItem(params).catch(() => {
|
|
||||||
throw new Error()
|
|
||||||
})
|
|
||||||
break
|
|
||||||
case 'edit':
|
|
||||||
result = await apis.serverObj.updateItem(params).catch(() => {
|
|
||||||
throw new Error()
|
|
||||||
})
|
|
||||||
break
|
|
||||||
}
|
|
||||||
hideLoading()
|
|
||||||
if (config('http.code.success') === result?.code) {
|
|
||||||
hideModal()
|
|
||||||
emit('ok')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
hideLoading()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
hideLoading()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 取消
|
|
||||||
*/
|
|
||||||
function handleCancel() {
|
function handleCancel() {
|
||||||
hideModal()
|
hideModal()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 关闭后
|
|
||||||
*/
|
|
||||||
function onAfterClose() {
|
function onAfterClose() {
|
||||||
activeKey.value=0
|
activeKey.value = 1
|
||||||
resetForm()
|
formData.value = { archive: { idCardPhotos: [] } }
|
||||||
hideLoading()
|
hideLoading()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -176,5 +173,3 @@ defineExpose({
|
|||||||
handleEdit,
|
handleEdit,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
|
||||||
|
|||||||
@ -353,7 +353,7 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
|
<edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
|
||||||
<detail ref="detailRef"></detail>
|
<detail ref="detailRef" ></detail>
|
||||||
<LineOrder2 ref="lineOrderRef" />
|
<LineOrder2 ref="lineOrderRef" />
|
||||||
<TransferOut ref="transferRef" />
|
<TransferOut ref="transferRef" />
|
||||||
<!-- <a-drawer v-model:open="lineOpen" class="custom-class" width="600" root-class-name="root-class-name" :root-style="{ color: 'blue' }" :title="lineTitle" placement="right">
|
<!-- <a-drawer v-model:open="lineOpen" class="custom-class" width="600" root-class-name="root-class-name" :root-style="{ color: 'blue' }" :title="lineTitle" placement="right">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user