| | |
| | | * @version: |
| | | * @Date: 2024-06-18 23:30:30 |
| | | * @LastEditors: Ben Lin |
| | | * @LastEditTime: 2024-06-27 22:31:13 |
| | | * @LastEditTime: 2024-07-15 22:22:58 |
| | | --> |
| | | <template> |
| | | <PageWrapper |
| | |
| | | @back="goBack" |
| | | > |
| | | <Suspense class="w-1/4 xl:w-1/5"> |
| | | <LeftTree @select="NodeSelect"/> |
| | | <LeftTree @select="NodeSelect" /> |
| | | </Suspense> |
| | | <Suspense> |
| | | <div class="w-3/4 xl:w-4/5 p-5"> |
| | | <CarGridNav v-if="showNav" /> |
| | | <Config v-if="showConfig" :configType="configType" @success="configSuccess"/> |
| | | <CarGridNav v-if="showNav" :configType="configType" :nodes="nodes"> |
| | | <template #[item] v-for="item in otherSlots" :key="item"> |
| | | <!-- 自定义内容 --> |
| | | <div class="h-full" style="height: 400px"> |
| | | <FlowChartView :data="routeData" @init="init" /> |
| | | </div> |
| | | </template> |
| | | </CarGridNav> |
| | | <Config v-if="showConfig" :configType="configType" @success="configSuccess" /> |
| | | </div> |
| | | </Suspense> |
| | | <!-- <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable"> |
| | |
| | | </template> |
| | | </BasicTable> --> |
| | | <!-- <normalDrawer @register="registerDrawer" @success="handleSuccess" /> --> |
| | | <CustModal |
| | | @register="registerCust" |
| | | @success="custSuccess" |
| | | :type="cType" |
| | | :detailSlots="dtlSlots" |
| | | > |
| | | <!-- 用插槽自定义多表单 --> |
| | | <template #[item.name] v-for="item in dtlSlots" :key="item.name"> |
| | | <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]"> |
| | | <!-- 用插槽自定义弹出选择框 --> |
| | | <template #[name]="{ field }" v-for="name in item.slots" :key="name"> |
| | | <a-button |
| | | class="mt-1 ml-1" |
| | | size="small" |
| | | @click="handleCustClick(field)" |
| | | :preIcon="item.preIcons[name]" |
| | | /> |
| | | <GeneralModal |
| | | @register="useModalData[name][0]" |
| | | @success="(d, u) => handleEntSuccess(d, u, item.name)" |
| | | /> |
| | | </template> |
| | | </BasicForm> |
| | | <!-- 自定义内容 --> |
| | | </template> |
| | | </CustModal> |
| | | <Suspense> |
| | | <CustModal |
| | | @register="registerCust" |
| | | @success="custSuccess" |
| | | :type="cType" |
| | | :detailSlots="dtlSlots" |
| | | :entityName="entityName" |
| | | > |
| | | <!-- 用插槽自定义多表单 --> |
| | | <template #[item.name] v-for="item in dtlSlots" :key="item.name"> |
| | | <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]"> |
| | | <!-- 用插槽自定义弹出选择框 --> |
| | | <template #[name]="{ field }" v-for="name in item.slots" :key="name"> |
| | | <a-button |
| | | class="mt-1 ml-1" |
| | | size="small" |
| | | @click="handleCustClick(field)" |
| | | :preIcon="item.preIcons[name]" |
| | | /> |
| | | <GeneralModal |
| | | @register="useModalData[name][0]" |
| | | @success="(d, u) => handleEntSuccess(d, u, item.name)" |
| | | /> |
| | | </template> |
| | | </BasicForm> |
| | | <!-- 自定义内容 --> |
| | | </template> |
| | | </CustModal> |
| | | </Suspense> |
| | | </PageWrapper> |
| | | </template> |
| | | <script lang="ts" setup> |
| | |
| | | import Config from './Config.vue'; |
| | | import LeftTree from './LeftTree.vue'; |
| | | import CustModal from '/@/views/components/CustModal.vue'; |
| | | import { OpenCustModal } from '../data'; |
| | | import { Ref, onMounted, provide, ref } from 'vue'; |
| | | import { OpenCustModal, initRoute } from '../data'; |
| | | import { Ref, VNode, onMounted, provide, ref, unref } from 'vue'; |
| | | import { FlowChartView } from '/@/components/FlowChart'; |
| | | import { useRoute } from 'vue-router'; |
| | | import { BasicForm, useForm } from '/@/components/Form/index'; |
| | | import { useTabs } from '/@/hooks/web/useTabs'; |
| | | import { isNullOrUnDef } from '/@/utils/is'; |
| | | import { useGo } from '/@/hooks/web/usePage'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | import LogicFlow from '@logicflow/core'; |
| | | |
| | | defineOptions({ name: 'DeptManagement' }); |
| | | |
| | |
| | | const useFormData = ref({}); |
| | | const cType = ref(''); |
| | | const dtlSlots = ref([] as any[]); |
| | | const otherSlots = ref<any[]>([]); |
| | | const selectVals = ref({}); |
| | | const dense = isNullOrUnDef(objParams.value.dense) ? ref(false) : ref(objParams.value.dense); |
| | | const pageTitle = ref(objParams.value.pageTitle); |
| | | const pageContent = ref(objParams.value.pageContent); |
| | | const nodeType = ref(''); |
| | | const selectedNodes = ref([]); |
| | | const isMounted = ref(false); |
| | | const showNav = ref(false); |
| | | const showConfig = ref(false); |
| | | const configType = ref(''); |
| | | const nodes = ref([]); |
| | | const routeData = ref({ |
| | | nodes: [], |
| | | edges: [], |
| | | }); |
| | | const custImport = ref<any>(null); |
| | | const [registerCust, { openModal: openCustomModal, closeModal }] = useModal(); |
| | | provide<Ref<string>>('nodeType', nodeType); |
| | | provide<Ref<any>>('objParams', objParams); |
| | | provide<Ref<any>>('selectedNodes', selectedNodes); |
| | | provide<Ref<any>>('selectedNodes', nodes); |
| | | setTitle(objParams.value.Title); //设置标签页标题 |
| | | |
| | | /** |
| | |
| | | /* 动态import实体名.ts的自定义方法 */ |
| | | try { |
| | | custImport.value = await import(`../entityts/${entityName.value}.ts`); |
| | | if (custImport.value['default']) { |
| | | otherSlots.value = custImport.value['default']()[0]['GetSlots'](); |
| | | } |
| | | isMounted.value = true; |
| | | } catch (e) {} |
| | | } catch (e) { |
| | | console.log(e); |
| | | } |
| | | }); |
| | | |
| | | const currlf = ref(null) as Ref<LogicFlow | null>; |
| | | /** |
| | | * @description: 工艺路线初始化 |
| | | * @param {*} lf |
| | | * @return {*} |
| | | */ |
| | | async function init(lf, rotId) { |
| | | initRoute(lf, rotId, routeData, currlf); |
| | | } |
| | | |
| | | /** |
| | | * @description: 选择节点时根据返回的事件参数显示隐藏相应组件 |
| | | * @param {*} e |
| | | * @return {*} |
| | | */ |
| | | */ |
| | | function NodeSelect(e) { |
| | | showConfig.value = e.showConfig; |
| | | showNav.value = e.showNav; |
| | | configType.value = e.type |
| | | configType.value = e.type; |
| | | nodes.value = e.nodes; |
| | | routeData.value = { |
| | | nodes: [], |
| | | edges: [], |
| | | }; |
| | | initRoute(currlf, e.nodes[0].id, routeData, currlf); |
| | | } |
| | | |
| | | /** |
| | | * @description: 保存配置成功返回方法 |
| | | * @return {*} |
| | | */ |
| | | */ |
| | | function configSuccess() { |
| | | notification.success({ message: '成功保存行为配置数据' }); |
| | | } |