| | |
| | | * @version: |
| | | * @Date: 2024-06-20 12:13:27 |
| | | * @LastEditors: Ben Lin |
| | | * @LastEditTime: 2024-06-27 00:39:37 |
| | | * @LastEditTime: 2024-10-06 16:55:15 |
| | | --> |
| | | <template> |
| | | <Card :title="GetTitle()['navTitle']"> |
| | | <Card :title="GetTitle(props.configType)['navTitle']"> |
| | | <CardGrid |
| | | v-for="item in GetNavItems()" |
| | | v-for="item in GetNavItems(props.configType)" |
| | | :key="item.title" |
| | | @click="navChangeItem(item.action, useModalData[item.action][1].openModal)" |
| | | @click=" |
| | | navChangeItem( |
| | | item.action, |
| | | !item.isCustEl ? useModalData[item.action][1].openModal : null, |
| | | openRvModal, |
| | | selectedNodes, |
| | | keyCode, |
| | | ) |
| | | " |
| | | > |
| | | <span class="flex flex-col items-center"> |
| | | <Form class="properties-body" label-align="left" layout="vertical" v-if="item.isCustEl"> |
| | | <FormItem label="是否默认" name="是否默认"> |
| | | <Switch |
| | | v-model:checked="isDefault[selectedNodes[0]['code']]" |
| | | @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" |
| | | v-if="!item.isStep && !item.isCustEl" |
| | | @register="useModalData[item.action][0]" |
| | | @success="(d, u) => handleSuccess(d, u, item.action, objParams, refreshPage)" |
| | | ></GeneralModal> |
| | |
| | | /> |
| | | </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 } from 'ant-design-vue'; |
| | | 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, ref, watch } from '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'; |
| | | |
| | | 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 isDefault = ref({}); |
| | | isDefault[selectedNodes.value[0]['code']] = false; |
| | | const custImport = ref<any[]>([]); |
| | | const EntityCustFunction = ref([ |
| | | { |
| | | GetTitle() {}, |
| | | GetNavItems() {}, |
| | | 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 }] = isNullOrUnDef( |
| | | custImport.value['default'], |
| | | ) |
| | | 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( |
| | | // () => Prod_Code, |
| | | // (v) => { |
| | | // if (v !== Prod_Code.value) { |
| | | // Prod_Code.value = isNullOrEmpty(v) ? Prod_Code.value : v; |
| | | // } |
| | | // }, |
| | | // { deep: true }, |
| | | // ); |
| | | 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: 弹出选择框成功返回方法 |
| | |
| | | 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) { |
| | | CustFunc({ |
| | | ctype: 'isDefault', |
| | | others: { ...d, ...{ isDefault: e } }, |
| | | keyCode: keyCode.value, |
| | | }).then((res) => { |
| | | console.log(res,isDefault); |
| | | if(res.IsSuccessed){ |
| | | if(e){ |
| | | |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | </script> |