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 | 295 +++++++++++++++++++++++++--------------------------------- 1 files changed, 126 insertions(+), 169 deletions(-) diff --git a/src/views/tigerprojects/system/lowcode/composition/index.vue b/src/views/tigerprojects/system/lowcode/composition/index.vue index 079bbf6..78cb0db 100644 --- a/src/views/tigerprojects/system/lowcode/composition/index.vue +++ b/src/views/tigerprojects/system/lowcode/composition/index.vue @@ -1,16 +1,38 @@ +<!-- + * @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 contentFullHeight fixedHeight contentClass="flex"> - <CustTree - class="w-1/4 xl:w-1/5" - @select="handleSelect" - :title="title" - :treeData="treeData" - :create-icon="createIcon" - :fieldNames="fieldNames" - /><!-- - add - @handle-add="handleAdd" --> - <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable"> + <PageWrapper + :dense="dense" + contentFullHeight + fixedHeight + contentClass="flex" + :title="pageTitle" + :content="pageContent" + @back="goBack" + > + <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> </template> @@ -19,8 +41,8 @@ <TableAction :actions="createActions(record)" /> </template> </template> - </BasicTable> - <normalDrawer @register="registerDrawer" @success="handleSuccess" /> + </BasicTable> --> + <!-- <normalDrawer @register="registerDrawer" @success="handleSuccess" /> --> <CustModal @register="registerCust" @success="custSuccess" @@ -38,7 +60,7 @@ @click="handleCustClick(field)" :preIcon="item.preIcons[name]" /> - <NormalModal + <GeneralModal @register="useModalData[name][0]" @success="(d, u) => handleEntSuccess(d, u, item.name)" /> @@ -50,191 +72,120 @@ </PageWrapper> </template> <script lang="ts" setup> - import { BasicTable, useTable, TableAction } from '@/components/Table'; - import { getEntity, getRoleListByPage, convertToTree } from '@/api/tigerapi/system'; import { PageWrapper } from '@/components/Page'; - import CustTree from './CustTree.vue'; import { useModal } from '@/components/Modal'; - import normalDrawer from '../normalDrawer.vue'; - import NormalModal from '/@/views/components/NormalModal.vue'; + import GeneralModal from '/@/views/components/GeneralModal.vue'; + import CarGridNav from './CarGridNav.vue'; + import Config from './Config.vue'; + import LeftTree from './LeftTree.vue'; import CustModal from '/@/views/components/CustModal.vue'; - import { columns, searchFormSchema } from './dept.data'; - import { - GetActionsData, - GetSelectSuccess, - OpenCustModal, - fetchTreeData, - getFormSchema, - getOthersValues, - } from '../data'; - import { onMounted, 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 { createIconByType } from '../data'; -import { RouteToProd } from '/@/api/tigerapi/mes/router'; + 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 objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); + 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 others = ref(getOthersValues(entityName.value, objParams.value.CODE, objParams.value.ID)); - const [registerCust, { openModal: openCustomModal, closeModal }] = useModal(); - const [registerItemAdd, { openModal: openItemModal }] = useModal(); - const [registerDrawer, { openDrawer }] = useDrawer(); - const [registerTable, { reload }] = useTable({ - title: '鍒楄〃淇℃伅', - api: getRoleListByPage, - columns, - formConfig: { - labelWidth: 120, - schemas: searchFormSchema, - }, - pagination: false, - striped: false, - useSearchForm: true, - showTableSetting: true, - bordered: true, - showIndexColumn: false, - canResize: false, - actionColumn: { - width: 80, - title: '鎿嶄綔', - dataIndex: 'action', - // slots: { customRender: 'action' }, - fixed: undefined, - }, + 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 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<any>>('objParams', objParams); + provide<Ref<any>>('selectedNodes', nodes); + setTitle(objParams.value.Title); //璁剧疆鏍囩椤垫爣棰� /** - * @description: 鑾峰彇鏍戝舰鏁版嵁 - * @param {*} type + * @description: 椤甸潰宸︿晶鐐瑰嚮杩斿洖閾炬帴鏃剁殑鎿嶄綔 * @return {*} - */ - async function fetch(type: string) { - //鏍规嵁type鑾峰彇鏍戝舰鏁版嵁 - const data = await fetchTreeData(type); - title.value = data.title; - treeData.value = data.treeData; - fieldNames.value = data.fieldNames; + */ + function goBack() { + if (!isNullOrUnDef(custImport.value)) { + const [{ GetHomeUrl }] = custImport.value['default'](); + // 鏈緥鐨勬晥鏋滄椂鐐瑰嚮杩斿洖濮嬬粓璺宠浆鍒拌处鍙峰垪琛ㄩ〉锛屽疄闄呭簲鐢ㄦ椂鍙繑鍥炰笂涓�椤� + go(GetHomeUrl(entityName.value)); + } } // function handleAdd(){ // console.log('handleAdd'); // } - /** - * @description: 鏍戝舰鑺傜偣鍥炬爣 - * @param {*} params - * @param {*} type - * @return {*} - */ - function createIcon(params: Recordable<any>) { - return createIconByType(params, entityName.value); - } - - onMounted(() => { - fetch(entityName.value); + onMounted(async () => { + isMounted.value = false; + /* 鍔ㄦ�乮mport瀹炰綋鍚�.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) { + console.log(e); + } }); + const currlf = ref(null) as Ref<LogicFlow | null>; /** - * @description: 鐢熸垚鍒楄〃涓搷浣滈」鐨勬寜閽� - * @param {*} record + * @description: 宸ヨ壓璺嚎鍒濆鍖� + * @param {*} lf * @return {*} */ - function createActions(record) { - return GetActionsData( - { - record, - isUpdate: true, - ifSave: true, - entityName: entityName.value, - formJson: getFormSchema(`${entityName.value}_Crud`), - cType, - dtlSlots, - useModalData, - useFormData, - crudColSlots, - }, - openDrawer, - reload, - openCustomModal, - useForm, - useModal, - ); + async function init(lf, rotId) { + initRoute(lf, rotId, routeData, currlf); } /** - * @description: 楠岃瘉琛ㄥ崟 + * @description: 閫夋嫨鑺傜偣鏃舵牴鎹繑鍥炵殑浜嬩欢鍙傛暟鏄剧ず闅愯棌鐩稿簲缁勪欢 + * @param {*} e * @return {*} */ - async function validate() { - let validates = {}; - const Keys = Object.getOwnPropertyNames(useFormData.value); - let i; - for (i = 0; i < Keys.length; i++) { - validates[Keys[i]] = await useFormData.value[Keys[i]][1].validate(); - } - return validates; + 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); } - function handleCreate() { - // validate().then((res) => { - // const Keys = Object.getOwnPropertyNames(useFormData.value); - // let i; - // for (i = 0; i < Keys.length; i++) { - // others.value[objParams.value.pCode] = objParams.value.IsID - // ? res[Keys[i]]['ID'] - // : res[Keys[i]][objParams.value.pCode]; - // } - // openDrawer(true, { - // isUpdate: false, - // ifSave: true, - // entityName: entityName.value, - // formJson: getFormSchema(`${entityName.value}_Crud`), - // crudColSlots, - // others: others.value, - // }); - // }); - RouteToProd({rotId: 'e4712192f75b465585107fdcd13d8003', prodCode: 'K5019AA013517'}).then(() => { - - }); - } - - // function handleEdit(record: Recordable) { - // openModal(true, { - // record, - // isUpdate: true, - // }); - // } - - // function handleDelete(record: Recordable) { - // console.log(record); - // } - - function handleSelect(deptId = '') { - searchInfo.deptId = deptId; - reload(); - } - - function handleSuccess() { - reload(); + /** + * @description: 淇濆瓨閰嶇疆鎴愬姛杩斿洖鏂规硶 + * @return {*} + */ + function configSuccess() { + notification.success({ message: '鎴愬姛淇濆瓨琛屼负閰嶇疆鏁版嵁' }); } /** @@ -243,7 +194,7 @@ * @return {*} */ function custSuccess(d) { - reload(); + // reload(); } /** @@ -254,11 +205,17 @@ * @return {*} */ function handleEntSuccess(d, u, item) { - var values = GetSelectSuccess(d, u, cType.value); - selectVals.value = values; //淇濆瓨寮瑰嚭妗嗛�夋嫨鐨勭粨鏋� - let _val = {}; - _val[d.returnFieldName] = values[d.returnFieldName]; - useFormData.value[item][1].setFieldsValue(_val); + /* 鍔ㄦ�乮mport瀹炰綋鍚�.ts鐨勮嚜瀹氫箟鏂规硶 */ + try { + import(`../entityts/${cType.value}.ts`).then((m) => { + const [{ GetSelectSuccess }] = m.default(); + var values = GetSelectSuccess(d, u); + selectVals.value = values; //淇濆瓨寮瑰嚭妗嗛�夋嫨鐨勭粨鏋� + let _val = {}; + _val[d.returnFieldName] = values[d.returnFieldName]; + useFormData.value[item][1].setFieldsValue(_val); + }); + } catch (e) {} } /** -- Gitblit v1.9.3