<!--
|
* @Description: 导航页面
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-06-20 12:13:27
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-10-16 00:34:34
|
-->
|
<template>
|
<Card :title="GetTitle(props.configType)['navTitle']">
|
<CardGrid
|
v-for="item in GetNavItems(props.configType)"
|
:key="item.title"
|
@click="
|
navChangeItem(
|
item.action,
|
!item.isCustEl ? useModalData[item.action][1].openModal : null,
|
openRvModal,
|
selectedNodes,
|
keyCode,
|
)
|
"
|
>
|
<Form class="properties-body" label-align="left" layout="vertical" v-if="item.isCustEl">
|
<FormItem label="是否默认" name="是否默认">
|
<Switch
|
v-model:checked="selectedNodes[0]['isDefault']"
|
@change="(e) => switchChange(e, selectedNodes[0])"
|
/>
|
</FormItem>
|
</Form>
|
<span v-if="!item.isCustEl" class="flex flex-col items-center">
|
<Icon :icon="item.icon" :color="item.color" size="20" />
|
<span class="text-md mt-2 truncate">{{ item.title }}</span>
|
</span>
|
<GeneralModal
|
v-if="!item.isStep && !item.isCustEl"
|
@register="useModalData[item.action][0]"
|
@success="(d, u) => handleSuccess(d, u, item.action, objParams, refreshPage)"
|
></GeneralModal>
|
<StepModal
|
v-if="item.isStep"
|
@register="useModalData[item.action][0]"
|
@success="(d, u) => handleSuccess(d, u, item.action, objParams, refreshPage)"
|
/>
|
</CardGrid>
|
</Card>
|
<!-- 其他自定义卡片内容 -->
|
<a-card
|
:title="item.title"
|
:bordered="false"
|
class="!mt-2"
|
v-for="(item, index) in otherSlots"
|
:key="item.name"
|
>
|
<slot :name="item.name" :index="index"></slot>
|
</a-card>
|
<RouteViewModal @register="registerRv" @success="RvItemSuccess" />
|
</template>
|
<script lang="ts" setup>
|
import { Card, CardGrid, Switch, Form, FormItem } from 'ant-design-vue';
|
import Icon from '@/components/Icon/Icon.vue';
|
import GeneralModal from '/@/views/components/GeneralModal.vue';
|
import RouteViewModal from '/@/views/components/RouteViewModal.vue';
|
import StepModal from '/@/views/components/StepModal.vue';
|
import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
|
import { isNullOrUnDef } from '/@/utils/is';
|
import { useTabs } from '/@/hooks/web/useTabs';
|
import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
|
import { useModal } from '/@/components/Modal';
|
import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
|
import { useProdRouteStore } from '/@/store/modules/prodRoute';
|
import { useUserStore } from '/@/store/modules/user';
|
|
const ACard = Card;
|
const objParams = inject('objParams') as Ref<any>;
|
const selectedNodes = inject('selectedNodes') as Ref<any>;
|
const props = defineProps({
|
configType: { type: String },
|
nodes: { type: Array as PropType<any[]> },
|
});
|
const keyCode = ref(objParams.value['CODE']);
|
const useProdRoute = useProdRouteStore();
|
const custImport = ref<any[]>([]);
|
const EntityCustFunction = ref([
|
{
|
GetTitle(type: string | undefined) {},
|
GetNavItems(type: string) {},
|
navChangeItem(action: any, ...args) {},
|
GetUseModals() {},
|
GetBaseCards(type: string | undefined) {},
|
GetSelectSuccess(d, u, ...args) {},
|
GenerateHtml(ype: string | null) {},
|
CustFunc(param: CustModalParams) {},
|
} as EntityCustFunctionType,
|
]);
|
/* 动态import实体名.ts的自定义方法 */
|
try {
|
custImport.value = await import(`../entityts/${objParams.value['Name']}.ts`);
|
} catch (e) {}
|
const [
|
{
|
GetTitle,
|
GetNavItems,
|
navChangeItem,
|
GetUseModals,
|
GetSelectSuccess,
|
GetBaseCards,
|
GenerateHtml,
|
CustFunc,
|
},
|
] = isNullOrUnDef(custImport.value['default'])
|
? EntityCustFunction.value
|
: custImport.value['default']();
|
|
const useModalData = ref(GetUseModals());
|
const otherSlots = ref<any[]>(GetBaseCards(props.configType));
|
const { refreshPage } = useTabs();
|
const [registerRv, { openModal: openRvModal }] = useModal();
|
|
watch(
|
[() => props.configType, () => props.nodes],
|
(v) => {
|
otherSlots.value = GetBaseCards(v[0]);
|
nextTick(() => {
|
// var div = document.getElementById('container') as HTMLElement;
|
// div.innerHTML = '';
|
// div.appendChild(GenerateHtml(v[0]));
|
// setTimeout(() => {
|
// if (!isNullOrUnDef(v[1])) {
|
// CustFunc(v[0], v[1][0]['id'], '#lfContainer');
|
// }
|
// }, 100);
|
});
|
},
|
{ deep: true },
|
);
|
|
onMounted(() => {
|
nextTick(() => {
|
// var div = document.getElementById('container') as HTMLElement;
|
// if (!isNullOrUnDef(div)) {
|
// div.innerHTML = '';
|
// div.appendChild(GenerateHtml(props.configType));
|
// setTimeout(() => {
|
// if (!isNullOrUnDef(props.nodes) && props.nodes.length > 0) {
|
// CustFunc(props.configType, props.nodes[0]['id'], '#lfContainer');
|
// }
|
// }, 100);
|
// }
|
});
|
});
|
|
/**
|
* @description: 弹出选择框成功返回方法
|
* @param {*} d
|
* @param {*} u
|
* @return {*}
|
*/
|
async function handleSuccess(d, u, item, objParams, refreshPage) {
|
GetSelectSuccess(d, u, item, objParams, refreshPage);
|
}
|
|
function RvItemSuccess(d, u) {}
|
|
/**
|
* @description: 开关改变事件
|
* @param {*} d
|
* @return {*}
|
*/
|
function switchChange(e, d) {
|
const p = useProdRoute.getParent(d.tid);
|
if (p.code == `DefaultRoute_${useUserStore().getUserInfo.orgCode as string}_${keyCode.value}`) {
|
CustFunc({
|
ctype: 'isDefault',
|
others: { ...d, ...{ isDefault: e } },
|
keyCode: keyCode.value,
|
}).then((res) => {
|
if (res.IsSuccessed) {
|
if (e) {
|
}
|
}
|
});
|
}
|
}
|
</script>
|
