994 lines
40 KiB
Vue
994 lines
40 KiB
Vue
<template>
|
|
<a-spin size="large" :spinning="loading">
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<a-row :gutter="[16, 8]">
|
|
<a-col :lg="8" :sm="24">
|
|
<a-row :wrap="false">
|
|
<a-col flex="none">
|
|
<div style="padding: 0 "><a-input flex="none" readonly value="族谱编号"
|
|
class="site-input-split" style="width: 160px;border-radius:0; border-top-left-radius: 5pt 5pt;
|
|
border-bottom-left-radius: 5pt 5pt;
|
|
pointer-events: none" /></div>
|
|
</a-col>
|
|
<a-col flex="auto">
|
|
<a-input-search :disabled="isEdit" v-model:value="treeId" flex="auto"
|
|
@search="onModalSearch" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :lg="12" :sm="24">
|
|
<a-space>
|
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileSearchOutlined)"
|
|
@click.prevent="onSearch">查询</a-button>
|
|
<a-button type="primary" :disabled="isEdit" :icon="h(ClearOutlined)"
|
|
@click.prevent="onReset">重置</a-button>
|
|
<a-button type="primary" :disabled="isEdit" :icon="h(FileAddOutlined)"
|
|
@click.prevent="onCreate">新增</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
<div class="page-main" :style="{ height: resultH }">
|
|
<a-row :gutter="[16, 8]">
|
|
<a-col :lg="8" :sm="24">
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>族谱编号:</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-input required :readonly="true"
|
|
v-model:value="data.FamilyTree.TreeId" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>族谱名称:</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-input required :readonly="!isEdit"
|
|
v-model:value="data.FamilyTree.TreeName" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
|
<a-col :lg="8" :sm="24">
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>简介:</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-input :readonly="!isEdit" v-model:value="data.FamilyTree.Brief" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>封面文件名:</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-input :readonly="!isEdit" v-model:value="data.FamilyTree.TreeCoverFilename"
|
|
flex="auto" />
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
|
<a-col :lg="8" :sm="24">
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>祖先:</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-input-group compact style="display: flex; width: 100%;">
|
|
<a-input :disabled="true"
|
|
v-model:value="data.FamilyTree.AncestorPersonGenealogyName" placeholder="族谱名"
|
|
style="width: 50%;" />
|
|
<a-input-search required :disabled="!isEdit" style="width: 50%;"
|
|
v-model:value="data.FamilyTree.AncestorPersonId"
|
|
@search="onModalPerson" />
|
|
</a-input-group>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
|
|
|
<a-row :wrap="false" align="middle">
|
|
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
|
<span>公开?</span>
|
|
</a-col>
|
|
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
|
<a-select v-model:value="data.FamilyTree.PublicIndc" :disabled="!isEdit"
|
|
style="width: 100%;min-width:124px;">
|
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
|
o.DisplayName }}</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
|
</a-divider>
|
|
<a-row :gutter="[16, 8]">
|
|
<a-col :lg="12" :sm="24">
|
|
<a-row :wrap="false">
|
|
<a-col flex="auto">
|
|
<a-input-group compact style="display: flex; width: 100%;">
|
|
<a-input readonly value="当前族员" class="site-input-split"
|
|
style="width: 160px; pointer-events: none;" />
|
|
<a-input :disabled="!isEdit"
|
|
v-model:value="data.CurrentPerson.FamilyPerson.GenealogyName" placeholder="族谱名"
|
|
style="flex: 1; min-width: 0;" />
|
|
<a-input :disabled="!isEdit"
|
|
v-model:value="data.CurrentPerson.FamilyPerson.CommonName" placeholder="常用名"
|
|
style="flex: 1; min-width: 0;" />
|
|
<a-select v-model:value="data.CurrentPerson.FamilyPerson.Gender" :disabled="!isEdit"
|
|
placeholder="性别" style="width: 140px; flex: none;">
|
|
<a-select-option v-for="o in genderOptions" :value="o.BindValue">{{
|
|
o.DisplayName }}</a-select-option>
|
|
</a-select>
|
|
<a-input-search style="flex: 1; min-width: 0;"
|
|
v-model:value="data.CurrentPerson.FamilyPerson.PersonId"
|
|
@search="onModalCurrentPerson" />
|
|
</a-input-group>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
|
</a-divider>
|
|
<a-collapse v-model:activeKey="activeKey">
|
|
<a-collapse-panel key="1" header="夫妻关系">
|
|
<a-table bordered :data-source="data.CurrentPerson.FamilyTreeSpouseMaps"
|
|
:columns="columnParents" :row-class-name="rowParentClassName" :pagination="false"
|
|
:scroll="{ x: 1200, y: 600 }">
|
|
<template #bodyCell="datas">
|
|
<template v-if="datas.column.dataIndex === 'index'">
|
|
<span>{{ datas.index + 1 }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.GENDER">
|
|
<span>{{ getPolicyText(genderOptions, datas.record.Gender) }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_DATE_TEXT">
|
|
<a-input v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.MarryDateText" placeholder="结婚日期文本" />
|
|
<span v-else>{{ datas.record.MarryDateText }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_DATE">
|
|
<a-date-picker v-if="isEdit" size="small" style="width: 100%"
|
|
:value="datas.record.MarryDate ? dayjs(datas.record.MarryDate) : null"
|
|
@change="onMarryDateChange(datas.record, $event)" />
|
|
<span v-else>{{ formatDate(datas.record.MarryDate) }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.DIVORCE_DATE_TEXT">
|
|
<a-input v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.DivorceDateText" placeholder="离婚日期文本" />
|
|
<span v-else>{{ datas.record.DivorceDateText }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.DIVORCE_DATE">
|
|
<a-date-picker v-if="isEdit" size="small" style="width: 100%"
|
|
:value="datas.record.DivorceDate ? dayjs(datas.record.DivorceDate) : null"
|
|
@change="onDivorceDateChange(datas.record, $event)" />
|
|
<span v-else>{{ formatDate(datas.record.DivorceDate) }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.MARRY_TYPE">
|
|
<a-input v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.MarryType" placeholder="婚配类型" />
|
|
<span v-else>{{ datas.record.MarryType }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.IS_CURRENT">
|
|
<a-select v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.IsCurrent">
|
|
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
|
o.DisplayName }}</a-select-option>
|
|
</a-select>
|
|
<span v-else>{{ getPolicyText(yesNoPolicy, datas.record.IsCurrent) }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === FamilyTreeSpouseMapViewEntity.REMARK">
|
|
<a-input v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.Remark" placeholder="备注" />
|
|
<span v-else>{{ datas.record.Remark }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
|
<UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
|
|
@click="upParent(datas.index)" />
|
|
<DownSquareTwoTone
|
|
:style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
|
|
@click="downParent(datas.index)" />
|
|
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
|
@click="deleteParent(datas.record.SpouseId)" />
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<template #extra
|
|
v-if="isEdit">
|
|
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addSpouse" />
|
|
</template>
|
|
</a-collapse-panel>
|
|
<a-collapse-panel key="2" header="孩子关系">
|
|
<a-table bordered :data-source="data.CurrentPerson.FamilyTreeChildrenMaps"
|
|
:columns="columnSons" :row-class-name="rowSonClassName" :pagination="false"
|
|
:scroll="{ x: 950, y: 600 }">
|
|
<template #bodyCell="datas">
|
|
<template v-if="datas.column.dataIndex === 'index'">
|
|
<span>{{ datas.index + 1 }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.GENDER">
|
|
<span>{{ getPolicyText(genderOptions, datas.record.Gender) }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.SPOUSE_ID">
|
|
<a-select v-if="isEdit" size="small" style="width: 100%" allow-clear
|
|
show-search :options="spouseOptions" v-model:value="datas.record.SpouseId"
|
|
placeholder="选择父母" />
|
|
<span v-else>{{ getSpouseName(datas.record.SpouseId) }}</span>
|
|
</template>
|
|
<template
|
|
v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.RELATION_TYPE">
|
|
<a-select v-if="isEdit" size="small" style="width: 100%" allow-clear
|
|
show-search :options="relationTypeSelectOptions"
|
|
v-model:value="datas.record.RelationType" placeholder="关系类型" />
|
|
<span v-else>{{ getPolicyText(relationTypeOptions, datas.record.RelationType) }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === FamilyTreeChildrenMapViewEntity.REMARK">
|
|
<a-input v-if="isEdit" size="small" style="width: 100%"
|
|
v-model:value="datas.record.Remark" placeholder="备注" />
|
|
<span v-else>{{ datas.record.Remark }}</span>
|
|
</template>
|
|
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
|
<UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
|
|
@click="upSon(datas.index)" />
|
|
<DownSquareTwoTone
|
|
:style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
|
|
@click="downSon(datas.index)" />
|
|
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
|
@click="deleteSon(datas.record.ChildrenId)" />
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<template #extra v-if="isEdit">
|
|
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addSon" />
|
|
</template>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</div>
|
|
<div class="page-footer">
|
|
<div style="">
|
|
<a-row :gutter="24">
|
|
<a-col :lg="24" :sm="24">
|
|
<div>
|
|
<a-row v-if="isEdit" :gutter="[16, 8]">
|
|
<a-space>
|
|
<a-popconfirm v-if="data.FamilyTree.CreatedBy" title="确定是否取消修改?"
|
|
ok-text="是" cancel-text="否" @confirm="onCancel">
|
|
<a-button type="primary" ghost :icon="h(UndoOutlined)">取消</a-button>
|
|
</a-popconfirm>
|
|
<a-button v-if="!data.FamilyTree.CreatedBy" type="primary" ghost
|
|
:icon="h(UndoOutlined)" @click.prevent="onCancel">取消</a-button>
|
|
<a-button type="primary" ghost :icon="h(SaveOutlined)"
|
|
@click.prevent="onSave">保存</a-button>
|
|
</a-space>
|
|
</a-row>
|
|
<a-row v-else :gutter="[16, 8]">
|
|
<a-space>
|
|
<a-button type="primary" :icon="h(FileSearchOutlined)"
|
|
:disabled="!hasData" >谱系</a-button>
|
|
<a-button type="primary" v-if="canAmend" :icon="h(EditOutlined)"
|
|
:disabled="!hasData" @click.prevent="onAmend">修改</a-button>
|
|
<a-popconfirm :disabled="!hasData" title="确定是否删除这条记录?" ok-text="是"
|
|
cancel-text="否" @confirm="onDelete">
|
|
<a-button type="primary" danger :icon="h(DeleteOutlined)"
|
|
:disabled="!hasData" v-if="canDelete">删除</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</a-row>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<dragModal v-model:open="modelOption.isModalTree" width="80%" title="族谱查询" @cancel="handleCance"
|
|
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelect">
|
|
<FamilyTreeEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></FamilyTreeEnquiry>
|
|
</dragModal>
|
|
<dragModal v-model:open="modelOption.isModalPerson" width="80%" title="人员查询" @cancel="handleCance"
|
|
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelectPerson">
|
|
<FamilyPersonEnquiry ref="personEnquiry"
|
|
@on-row-dblclick="handleSelectPerson"></FamilyPersonEnquiry>
|
|
</dragModal>
|
|
</a-spin>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, unref, onBeforeMount, inject, provide, h, onMounted, computed } from "vue";
|
|
import { notification } from "ant-design-vue";
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import dayjs from "dayjs";
|
|
import type { Dayjs } from "dayjs";
|
|
import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone } from "@ant-design/icons-vue";
|
|
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
|
import dragModal from "@/components/basic/DragModal.vue"
|
|
import FamilyTreeEnquiry from "./FamilyTreeEnquiry.vue";
|
|
import FamilyPersonEnquiry from "./FamilyPersonEnquiry.vue";
|
|
import { FamilyTreeData } from "@/data/auto/familyTreeData";
|
|
import { FamilyTreeSpouseMapViewEntity } from "@/data/auto/familyTreeSpouseMapViewEntity";
|
|
import { FamilyTreeChildrenMapViewEntity } from "@/data/auto/familyTreeChildrenMapViewEntity";
|
|
import familyTreeService from "@/service/master/familyTreeService";
|
|
import { useYesNoPolicy } from "@/hooks/useYesNoPolicy"
|
|
import { useLocalePolicy } from "@/hooks/useLocalePolicy"
|
|
import { SelectOption } from "@/data/auto/selectOption";
|
|
import { useWindowSize } from '@vueuse/core'
|
|
import { FamilyTreeViewEntity } from "@/data/auto/familyTreeViewEntity";
|
|
import { FamilyPersonEntity } from "@/data/auto/familyPersonEntity";
|
|
import { operationToEnquiryMethodKey, OperationToEnquiryModelOption } from "@/injections"
|
|
|
|
//================inject================
|
|
const loading = ref<boolean>(false);
|
|
//================inject================
|
|
|
|
const { width, height } = useWindowSize()
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const treeId = ref<string>(route.params.id as string)
|
|
const mode = ref<string>(route.params.mode as string)
|
|
|
|
const isEdit = ref<boolean>(false);
|
|
const canAmend = ref<boolean>(false);
|
|
const canDelete = ref<boolean>(false);
|
|
const canCreate = ref<boolean>(false);
|
|
|
|
const showModalType = ref<number>(0);
|
|
|
|
const data = ref<FamilyTreeData>(new FamilyTreeData());
|
|
const hasData = ref<boolean>(false);
|
|
|
|
const yesNoPolicy = ref<SelectOption[]>([]);
|
|
const resultH = ref('');
|
|
const oldTreeId = ref<string>(treeId.value);
|
|
|
|
|
|
interface TreeEnquiry {
|
|
keys: FamilyTreeViewEntity[],
|
|
setBindOptionValue(bindValue: string, value: string, value1: string, values: string[]): void,
|
|
}
|
|
|
|
|
|
interface PersonEnquiry {
|
|
keys: FamilyPersonEntity[],
|
|
setBindOptionValue(bindValue: string, value: string, value1: string, values: string[]): void,
|
|
}
|
|
|
|
const enquiry = ref<TreeEnquiry | null>(null)
|
|
const personEnquiry = ref<PersonEnquiry | null>(null)
|
|
|
|
const activeKey = ref(['1', '2']);
|
|
|
|
const columnParents = ref([
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
width: '8%',
|
|
align: 'center',
|
|
fixed: 'left',
|
|
sequence: 0,
|
|
hidden: 'N',
|
|
format: ''
|
|
},
|
|
{
|
|
title: "配偶姓氏",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.SPOUSE_SURNAME,
|
|
width: '10%',
|
|
sequence: 1,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "配偶谱名",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.SPOUSE_GENEALOGY_NAME,
|
|
width: '10%',
|
|
sequence: 2,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "性别",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.GENDER,
|
|
width: '8%',
|
|
sequence: 3,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "结婚日期文本",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_DATE_TEXT,
|
|
width: '11%',
|
|
sequence: 4,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "结婚日期",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_DATE,
|
|
width: '11%',
|
|
sequence: 5,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "离婚日期文本",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.DIVORCE_DATE_TEXT,
|
|
width: '11%',
|
|
sequence: 6,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "离婚日期",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.DIVORCE_DATE,
|
|
width: '11%',
|
|
sequence: 7,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "婚配类型",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.MARRY_TYPE,
|
|
width: '8%',
|
|
sequence: 8,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "当前?",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.IS_CURRENT,
|
|
width: '8%',
|
|
sequence: 9,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "备注",
|
|
dataIndex: FamilyTreeSpouseMapViewEntity.REMARK,
|
|
width: '11%',
|
|
sequence: 10,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "",
|
|
dataIndex: 'operation',
|
|
width: '12%',
|
|
sequence: 11,
|
|
hidden: 'N'
|
|
}
|
|
]);
|
|
|
|
const columnSons = ref([
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
width: '8%',
|
|
align: 'center',
|
|
fixed: 'left',
|
|
sequence: 0,
|
|
hidden: 'N',
|
|
format: ''
|
|
},
|
|
{
|
|
title: "姓氏",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.CHILDREN_SURNAME,
|
|
width: '10%',
|
|
sequence: 1,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "谱名",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.CHILDREN_GENEALOGY_NAME,
|
|
width: '10%',
|
|
sequence: 2,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "性别",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.GENDER,
|
|
width: '8%',
|
|
sequence: 3,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "父母",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.SPOUSE_ID,
|
|
width: '14%',
|
|
sequence: 4,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "关系",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.RELATION_TYPE,
|
|
width: '12%',
|
|
sequence: 5,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "备注",
|
|
dataIndex: FamilyTreeChildrenMapViewEntity.REMARK,
|
|
width: '14%',
|
|
sequence: 6,
|
|
hidden: 'N'
|
|
},
|
|
{
|
|
title: "",
|
|
dataIndex: 'operation',
|
|
width: '12%',
|
|
sequence: 7,
|
|
hidden: 'N'
|
|
}
|
|
]);
|
|
//================provide================
|
|
const modelOption = ref<OperationToEnquiryModelOption>(new OperationToEnquiryModelOption());
|
|
modelOption.value.isModalTree = false;
|
|
modelOption.value.isModalPerson = false;
|
|
|
|
modelOption.value.selectionTypeTree = 'radio';
|
|
modelOption.value.selectionTypePerson = 'radio';
|
|
|
|
modelOption.value.initBindOptionsTree = [];
|
|
modelOption.value.initBindOptionsPerson = [];
|
|
|
|
|
|
const getOperationToEnquiryModelOption = () => {
|
|
return modelOption.value
|
|
}
|
|
provide(
|
|
operationToEnquiryMethodKey,
|
|
{
|
|
getOperationToEnquiryModelOption,
|
|
}
|
|
);
|
|
//================provide================
|
|
|
|
onBeforeMount(async () => {
|
|
yesNoPolicy.value = await useYesNoPolicy().getSelectOption(false);
|
|
})
|
|
|
|
onMounted(() => {
|
|
let pContext: PermissionContext = usePermissionContext();
|
|
canAmend.value = pContext.canAmend(route.meta.permission as string);
|
|
canDelete.value = pContext.canDelete(route.meta.permission as string);
|
|
canCreate.value = pContext.canCreate(route.meta.permission as string);
|
|
computResultTableHeight();
|
|
|
|
if (treeId.value && treeId.value.trim().length > 0) {
|
|
onSearch();
|
|
}
|
|
if (mode.value && mode.value == 'create') {
|
|
onCreate();
|
|
isEdit.value = true;
|
|
}
|
|
else if (mode.value && mode.value == 'amend') {
|
|
isEdit.value = true;
|
|
}
|
|
})
|
|
|
|
const computResultTableHeight = () => {
|
|
if (width.value > 640) {
|
|
resultH.value = 'calc(100vh - 220px )';
|
|
}
|
|
else {
|
|
resultH.value = 'calc(100vh - 250px )';
|
|
}
|
|
}
|
|
|
|
const onModalSearch = (() => {
|
|
modelOption.value.isModalTree = true;
|
|
modelOption.value.selectionTypeTree = 'radio';
|
|
|
|
showModalType.value = 0;
|
|
})
|
|
|
|
|
|
const onSearch = (async () => {
|
|
|
|
if (!treeId.value || treeId.value.trim().length == 0) {
|
|
notification.info({
|
|
message: '系统提示：',
|
|
description: '请输入族谱编号',
|
|
placement: "topRight",
|
|
});
|
|
hasData.value = false;
|
|
return;
|
|
}
|
|
|
|
data.value = await familyTreeService.FindByCurrentPerson({
|
|
key: treeId.value.trim(),
|
|
personId: data.value.CurrentPerson.FamilyPerson.PersonId,
|
|
});
|
|
|
|
if (data.value.FamilyTree == null) {
|
|
notification.info({
|
|
message: '系统提示：',
|
|
description: '记录不存在',
|
|
placement: "topRight",
|
|
});
|
|
data.value = new FamilyTreeData();
|
|
hasData.value = false;
|
|
return;
|
|
}
|
|
|
|
hasData.value = true;
|
|
})
|
|
|
|
const onReset = (() => {
|
|
data.value = new FamilyTreeData();
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
treeId.value = '';
|
|
hasData.value = false;
|
|
selectedSonIndex.value = -1;
|
|
selectedParentIndex.value = -1;
|
|
})
|
|
|
|
const onCreate = (() => {
|
|
onReset();
|
|
isEdit.value = true;
|
|
})
|
|
|
|
const onAmend = (() => {
|
|
isEdit.value = true;
|
|
oldTreeId.value = unref(data.value.FamilyTree.TreeId);
|
|
})
|
|
|
|
const onSave = (async () => {
|
|
|
|
try {
|
|
loading.value = true;
|
|
|
|
if (!data.value.CurrentPerson.FamilyTreeSpouseMaps) data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
if (!data.value.CurrentPerson.FamilyTreeChildrenMaps) data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
|
|
if (data.value.FamilyTree?.CreatedBy)
|
|
data.value = await familyTreeService.Update(data.value);
|
|
else {
|
|
data.value = await familyTreeService.Insert(data.value);
|
|
}
|
|
|
|
treeId.value = data.value.FamilyTree.TreeId;
|
|
|
|
loading.value = false;
|
|
hasData.value = true;
|
|
isEdit.value = false;
|
|
selectedSonIndex.value = -1;
|
|
selectedParentIndex.value = -1;
|
|
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
|
|
})
|
|
|
|
const onCancel = (() => {
|
|
onReset();
|
|
if (oldTreeId.value && oldTreeId.value.length > 0) {
|
|
treeId.value = oldTreeId.value;
|
|
onSearch();
|
|
}
|
|
isEdit.value = false;
|
|
})
|
|
|
|
const onDelete = (async () => {
|
|
try {
|
|
loading.value = true;
|
|
|
|
await familyTreeService.Delete(data.value.FamilyTree.TreeId);
|
|
|
|
onReset();
|
|
loading.value = false;
|
|
|
|
} catch (error) {
|
|
loading.value = false;
|
|
console.log(error);
|
|
}
|
|
})
|
|
|
|
const handleCance = (async () => {
|
|
|
|
})
|
|
|
|
const addSpouse = (event: MouseEvent) => {
|
|
modelOption.value.isModalPerson = true;
|
|
modelOption.value.selectionTypePerson = 'radio';
|
|
showModalType.value = 1;
|
|
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
|
event.stopPropagation();
|
|
};
|
|
|
|
const deleteParent = (key: string) => {
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps = data.value.CurrentPerson.FamilyTreeSpouseMaps.filter(item => item.SpouseId !== key);
|
|
};
|
|
|
|
const formatDate = (value?: Date | null) => {
|
|
return value ? dayjs(value).format('YYYY-MM-DD') : '';
|
|
};
|
|
|
|
const onMarryDateChange = (record: FamilyTreeSpouseMapViewEntity, date: Dayjs | null) => {
|
|
record.MarryDate = date ? date.toDate() : null!;
|
|
record.MarryDateText = date ? date.format('YYYY-MM-DD') : '';
|
|
};
|
|
|
|
const onDivorceDateChange = (record: FamilyTreeSpouseMapViewEntity, date: Dayjs | null) => {
|
|
record.DivorceDate = date ? date.toDate() : null!;
|
|
record.DivorceDateText = date ? date.format('YYYY-MM-DD') : '';
|
|
};
|
|
|
|
const getPolicyText = (options: SelectOption[], value?: string | null) => {
|
|
const o = options.find(x => x.BindValue === value);
|
|
return o ? o.DisplayName : value;
|
|
};
|
|
|
|
const selectedParentIndex = ref<number>(-1);
|
|
|
|
const rowParentClassName = (record: FamilyTreeSpouseMapViewEntity, index: number) => {
|
|
return index === selectedParentIndex.value ? 'parent-row-selected' : '';
|
|
};
|
|
|
|
const upParent = (index: number) => {
|
|
if (index > 0) {
|
|
const item = data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index, 1)[0];
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index - 1, 0, item);
|
|
selectedParentIndex.value = index - 1;
|
|
refreshParentOrderby();
|
|
}
|
|
};
|
|
|
|
const downParent = (index: number) => {
|
|
if (index < data.value.CurrentPerson.FamilyTreeSpouseMaps.length) {
|
|
const item = data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index, 1)[0];
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps.splice(index + 1, 0, item);
|
|
selectedParentIndex.value = index + 1;
|
|
|
|
refreshParentOrderby();
|
|
}
|
|
};
|
|
|
|
const refreshParentOrderby = () => {
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps.forEach((item, idx) => {
|
|
item.Orderby = idx + 1;
|
|
});
|
|
};
|
|
|
|
const addSon = (event: MouseEvent) => {
|
|
modelOption.value.isModalPerson = true;
|
|
modelOption.value.selectionTypePerson = 'checkbox';
|
|
|
|
showModalType.value = 2;
|
|
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
|
event.stopPropagation();
|
|
};
|
|
|
|
const selectedSonIndex = ref<number>(-1);
|
|
|
|
const rowSonClassName = (record: FamilyTreeChildrenMapViewEntity, index: number) => {
|
|
return index === selectedSonIndex.value ? 'son-row-selected' : '';
|
|
};
|
|
|
|
const upSon = (index: number) => {
|
|
if (index > 0) {
|
|
const item = data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index, 1)[0];
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index - 1, 0, item);
|
|
selectedSonIndex.value = index - 1;
|
|
refreshSonOrderby();
|
|
}
|
|
};
|
|
|
|
const downSon = (index: number) => {
|
|
if (index < data.value.CurrentPerson.FamilyTreeChildrenMaps.length) {
|
|
const item = data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index, 1)[0];
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps.splice(index + 1, 0, item);
|
|
selectedSonIndex.value = index + 1;
|
|
|
|
refreshSonOrderby();
|
|
}
|
|
};
|
|
|
|
const refreshSonOrderby = () => {
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps.forEach((item, idx) => {
|
|
item.Orderby = idx + 1; // orderby从1开始，也可以用 idx
|
|
});
|
|
};
|
|
|
|
const deleteSon = (key: string) => {
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps = data.value.CurrentPerson.FamilyTreeChildrenMaps.filter(item => item.ChildrenId !== key);
|
|
};
|
|
|
|
const { getPolicyOptionsComputed, getPolicySelectOptionsComputed } = useLocalePolicy();
|
|
const relationTypeOptions = getPolicyOptionsComputed('RelationTypePolicy');
|
|
const relationTypeSelectOptions = getPolicySelectOptionsComputed('RelationTypePolicy');
|
|
const genderOptions = getPolicyOptionsComputed('GenderPolicy');
|
|
|
|
const spouseOptions = computed(() => {
|
|
return (data.value.CurrentPerson.FamilyTreeSpouseMaps || []).map(s => ({
|
|
label: (s.SpouseSurname || '') + (s.SpouseGenealogyName || ''),
|
|
value: s.SpouseId,
|
|
}));
|
|
});
|
|
|
|
const getSpouseName = (spouseId?: string) => {
|
|
if (!spouseId) return '';
|
|
const s = (data.value.CurrentPerson.FamilyTreeSpouseMaps || []).find(x => x.SpouseId === spouseId);
|
|
return s ? (s.SpouseSurname || '') + (s.SpouseGenealogyName || '') : spouseId;
|
|
};
|
|
|
|
const handleSelect = (async () => {
|
|
if (enquiry.value) {
|
|
if (enquiry.value.keys.length > 0) {
|
|
//查询弹出
|
|
if (showModalType.value == 0) {
|
|
treeId.value = enquiry.value.keys[0].TreeId;
|
|
data.value = new FamilyTreeData();
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
|
|
onSearch();
|
|
}
|
|
|
|
modelOption.value.isModalTree = false;
|
|
}
|
|
else {
|
|
notification.info({
|
|
message: '系统提示：',
|
|
description: '请选择一条记录',
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
}
|
|
})
|
|
|
|
const onModalPerson = (() => {
|
|
modelOption.value.isModalPerson = true;
|
|
modelOption.value.selectionTypePerson = 'radio';
|
|
showModalType.value = 3;
|
|
})
|
|
|
|
const onModalCurrentPerson = (() => {
|
|
modelOption.value.isModalPerson = true;
|
|
modelOption.value.selectionTypePerson = 'radio';
|
|
showModalType.value = 4;
|
|
})
|
|
|
|
const handleSelectPerson = (async () => {
|
|
if (personEnquiry.value) {
|
|
if (personEnquiry.value.keys.length > 0) {
|
|
//祖先人员选择
|
|
if (showModalType.value == 3) {
|
|
data.value.FamilyTree.AncestorPersonId = personEnquiry.value.keys[0].PersonId;
|
|
data.value.FamilyTree.AncestorPersonGenealogyName = personEnquiry.value.keys[0].GenealogyName;
|
|
}
|
|
//当前族员选择
|
|
else if (showModalType.value == 4) {
|
|
data.value.CurrentPerson.FamilyPerson.GenealogyName = personEnquiry.value.keys[0].GenealogyName;
|
|
data.value.CurrentPerson.FamilyPerson.PersonId = personEnquiry.value.keys[0].PersonId;
|
|
|
|
onSearch();
|
|
}
|
|
//添加夫妻关系
|
|
else if (showModalType.value == 1) {
|
|
if (!data.value.CurrentPerson.FamilyTreeSpouseMaps) data.value.CurrentPerson.FamilyTreeSpouseMaps = [];
|
|
let spouse: FamilyTreeSpouseMapViewEntity = new FamilyTreeSpouseMapViewEntity();
|
|
spouse.SpouseId = personEnquiry.value.keys[0].PersonId;
|
|
spouse.SpouseSurname = personEnquiry.value.keys[0].Surname;
|
|
spouse.SpouseCommonName = personEnquiry.value.keys[0].CommonName;
|
|
spouse.SpouseGenealogyName = personEnquiry.value.keys[0].GenealogyName;
|
|
|
|
data.value.CurrentPerson.FamilyTreeSpouseMaps.push(spouse);
|
|
}
|
|
//添加孩子关系
|
|
else if (showModalType.value == 2) {
|
|
if (!data.value.CurrentPerson.FamilyTreeChildrenMaps) data.value.CurrentPerson.FamilyTreeChildrenMaps = [];
|
|
personEnquiry.value.keys.forEach(element => {
|
|
let child: FamilyTreeChildrenMapViewEntity = new FamilyTreeChildrenMapViewEntity();
|
|
child.ChildrenId = element.PersonId;
|
|
child.ChildrenSurname = element.Surname;
|
|
child.ChildrenCommonName = element.CommonName;
|
|
child.ChildrenGenealogyName = element.GenealogyName;
|
|
|
|
data.value.CurrentPerson.FamilyTreeChildrenMaps.push(child);
|
|
});
|
|
}
|
|
|
|
modelOption.value.isModalPerson = false;
|
|
}
|
|
else {
|
|
notification.info({
|
|
message: '系统提示：',
|
|
description: '请选择一条记录',
|
|
placement: "topRight",
|
|
});
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
<style lang="less">
|
|
.page-container {
|
|
margin-right: 0px;
|
|
|
|
}
|
|
|
|
.page-header {
|
|
padding-top: 4px;
|
|
padding-bottom: 8px;
|
|
padding-right: 12px;
|
|
border-bottom: 1px solid silver;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.page-header .ant-input-search .ant-input {
|
|
border-radius: 0;
|
|
border-left: 0;
|
|
text-align: left
|
|
}
|
|
|
|
.page-main {
|
|
overflow-y: auto;
|
|
padding-top: 24px;
|
|
padding-bottom: 4px;
|
|
padding-right: 32px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.ant-input-search .ant-input {
|
|
border-radius: 0;
|
|
border-left: 0;
|
|
text-align: left
|
|
}
|
|
|
|
.page-footer {
|
|
z-index: 999;
|
|
padding-left: 8px;
|
|
padding-right: 18px;
|
|
padding-top: 8px;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 8px;
|
|
border-top: 1px solid silver;
|
|
}
|
|
|
|
.son-row-selected td {
|
|
border-top: 2px solid #1677ff !important;
|
|
border-bottom: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.son-row-selected td:first-child {
|
|
border-left: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.son-row-selected td:last-child {
|
|
border-right: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.son-row-selected > td {
|
|
background-color: #e6f4ff !important;
|
|
}
|
|
|
|
.parent-row-selected td {
|
|
border-top: 2px solid #1677ff !important;
|
|
border-bottom: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.parent-row-selected td:first-child {
|
|
border-left: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.parent-row-selected td:last-child {
|
|
border-right: 2px solid #1677ff !important;
|
|
}
|
|
|
|
.parent-row-selected > td {
|
|
background-color: #e6f4ff !important;
|
|
}
|
|
</style> |