From a745761147b17a42b4698250a170ef4c0fa0b09b Mon Sep 17 00:00:00 2001 From: Ben Lin <maobin001@msn.com> Date: 星期三, 03 七月 2024 21:18:39 +0800 Subject: [PATCH] 产品绑定工艺优化 --- src/views/tigerprojects/system/lowcode/composition/index.vue | 163 ++++++++++++++++++++++++++---------------------------- 1 files changed, 79 insertions(+), 84 deletions(-) diff --git a/src/views/tigerprojects/system/lowcode/composition/index.vue b/src/views/tigerprojects/system/lowcode/composition/index.vue index ff8005c..78cb0db 100644 --- a/src/views/tigerprojects/system/lowcode/composition/index.vue +++ b/src/views/tigerprojects/system/lowcode/composition/index.vue @@ -1,3 +1,11 @@ +<!-- + * @Description: 閫氱敤缁勫悎椤甸潰锛屽乏杈规槸鏍戯紝鍙宠竟鏄厤缃� + * @Author: Ben Lin + * @version: + * @Date: 2024-06-18 23:30:30 + * @LastEditors: Ben Lin + * @LastEditTime: 2024-07-03 19:21:09 +--> <template> <PageWrapper :dense="dense" @@ -8,22 +16,22 @@ :content="pageContent" @back="goBack" > - <GeneralTree - class="w-1/4 xl:w-1/5" - v-if="isMounted" - @select="handleSelect" - @UnSelect="UnSelect" - :title="title" - :treeData="treeData" - :create-icon="createIcon" - :fieldNames="fieldNames" - /><!-- - add - @handle-add="handleAdd" --> - <div class="w-3/4 xl:w-4/5 p-5"> - <AddRoute v-if="entityName == 'ProdRouteBinding' && rotType == 'Product'" /> - <ActionConfig v-if="entityName == 'ProdRouteBinding' && rotType == 'Action'" /> - </div> + <Suspense class="w-1/4 xl:w-1/5"> + <LeftTree @select="NodeSelect" /> + </Suspense> + <Suspense> + <div class="w-3/4 xl:w-4/5 p-5"> + <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 #toolbar> <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 鏂板 </a-button> @@ -65,73 +73,55 @@ </template> <script lang="ts" setup> import { PageWrapper } from '@/components/Page'; - import GeneralTree from '/@/views/components/GeneralTree.vue'; import { useModal } from '@/components/Modal'; import GeneralModal from '/@/views/components/GeneralModal.vue'; - import AddRoute from './AddRoute.vue'; - import ActionConfig from './ActionConfig.vue'; + import CarGridNav from './CarGridNav.vue'; + 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, reactive, 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 { useDrawer } from '/@/components/Drawer'; import { BasicForm, useForm } from '/@/components/Form/index'; - import { TreeItem } from '/@/components/TigerTree'; 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 { notification, createErrorModal } = useMessage(); const go = useGo(); const route = useRoute(); const { setTitle } = useTabs(); const objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); //ref(JSON.parse(history.state.obj)) const entityName = ref(objParams.value.Name); - const formSchemas = ref({}); //寮瑰嚭妗嗘垨楂樼骇椤甸潰澶氳〃鍗曠粨鏋� const useModalData = ref({}); //琛ㄥ崟涓彃妲芥覆鏌撴寜閽墦寮�妯℃�佹useModal鏂规硶 const useFormData = ref({}); - const colSlots = ref<any>(objParams.value.colSlots); //鎸夐挳鎻掓Ы - const crudColSlots = ref<any>(objParams.value.crudColSlots); const cType = ref(''); const dtlSlots = ref([] as any[]); + const otherSlots = ref<any[]>([]); const selectVals = ref({}); - const baseCards = ref([] as any[]); - const otherCards = ref([] as any[]); - const searchInfo = reactive<Recordable>({}); - const treeData = ref<TreeItem[]>([]); - const title = ref(''); - const fieldNames = 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 prodCode = ref(''); - const actionCode = ref(''); - const rotType = 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(); - const [registerItemAdd, { openModal: openItemModal }] = useModal(); - const [registerDrawer, { openDrawer }] = useDrawer(); - provide<Ref<string>>('prodCode', prodCode); - provide<Ref<string>>('actionCode', actionCode); + provide<Ref<any>>('objParams', objParams); + provide<Ref<any>>('selectedNodes', nodes); setTitle(objParams.value.Title); //璁剧疆鏍囩椤垫爣棰� - - /** - * @description: 鑾峰彇鏍戝舰鏁版嵁 - * @param {*} type - * @return {*} - */ - async function fetch(type: string) { - if (!isNullOrUnDef(custImport.value)) { - const [{ fetchTreeData }] = custImport.value['default'](); - //鏍规嵁type鑾峰彇鏍戝舰鏁版嵁 - const data = await fetchTreeData(type, objParams.value.CODE); - title.value = data.title; - treeData.value = data.treeData; - fieldNames.value = data.fieldNames; - } - } /** * @description: 椤甸潰宸︿晶鐐瑰嚮杩斿洖閾炬帴鏃剁殑鎿嶄綔 @@ -149,48 +139,53 @@ // console.log('handleAdd'); // } - /** - * @description: 鏍戝舰鑺傜偣鍥炬爣 - * @param {*} params - * @param {*} type - * @return {*} - */ - function createIcon(params: Recordable<any>) { - if (isNullOrUnDef(custImport.value)) { - return ''; - } else { - const [{ CreateIcon }] = custImport.value['default'](); - return CreateIcon(params); - } - } - onMounted(async () => { isMounted.value = false; /* 鍔ㄦ�乮mport瀹炰綋鍚�.ts鐨勮嚜瀹氫箟鏂规硶 */ try { custImport.value = await import(`../entityts/${entityName.value}.ts`); - await fetch(entityName.value); + if (custImport.value['default']) { + otherSlots.value = custImport.value['default']()[0]['GetSlots'](); + } isMounted.value = true; - } catch (e) {} + } catch (e) { + console.log(e); + } }); - function handleSelect(deptId = '', info) { - searchInfo.deptId = deptId; - rotType.value = info.selectedNodes[0].type; - prodCode.value =rotType.value=='Product'? info.selectedNodes[0].code: prodCode.value; - actionCode.value =rotType.value=='Action'? info.selectedNodes[0].code: actionCode.value; - // reload(); + const currlf = ref(null) as Ref<LogicFlow | null>; + /** + * @description: 宸ヨ壓璺嚎鍒濆鍖� + * @param {*} lf + * @return {*} + */ + async function init(lf, rotId) { + initRoute(lf, rotId, routeData, currlf); } /** - * @description: 鍙栨秷閫夋嫨鏃朵簨浠惰繑鍥炴柟娉� - * @param {*} node + * @description: 閫夋嫨鑺傜偣鏃舵牴鎹繑鍥炵殑浜嬩欢鍙傛暟鏄剧ず闅愯棌鐩稿簲缁勪欢 + * @param {*} e * @return {*} */ - function UnSelect(node) { - prodCode.value = ''; - rotType.value = ''; - // reload(); + function NodeSelect(e) { + showConfig.value = e.showConfig; + showNav.value = e.showNav; + 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: '鎴愬姛淇濆瓨琛屼负閰嶇疆鏁版嵁' }); } /** -- Gitblit v1.9.3