| | |
|---|
| | | <!-- |
|---|
| | | * @Description: 通用组合页面，左边是树，右边是配置 |
|---|
| | | * @Author: Ben Lin |
|---|
| | | * @version: |
|---|
| | | * @Date: 2024-06-18 23:30:30 |
|---|
| | | * @LastEditors: Ben Lin |
|---|
| | | * @LastEditTime: 2024-08-04 17:50:50 |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <PageWrapper |
|---|
| | | :dense="dense" |
|---|
| | |
|---|
| | | :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" @deletenode="delCallback" /> |
|---|
| | | </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" |
|---|
| | | :OtherTableName="OtherTableName" |
|---|
| | | @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> |
|---|
| | | </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 { 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 { setTitle, refreshPage } = useTabs(); |
|---|
| | | // const objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); //ref(JSON.parse(history.state.obj)) |
|---|
| | | const routeParams = ref(JSON.parse(decodeURI(route.params?.id as string))); |
|---|
| | | // 从sessionStorage中读取参数并转换回对象 |
|---|
| | | const savedParams = sessionStorage.getItem(`${routeParams.value.sName}_params`); |
|---|
| | | const objParams = savedParams ? ref(JSON.parse(decodeURI(savedParams))) : ref({}); |
|---|
| | | const entityName = ref(routeParams.value.Name); |
|---|
| | | 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 colSlots = ref<any>(objParams.value.colSlots); |
|---|
| | | const selectedNodes = ref([]); |
|---|
| | | const isMounted = ref(false); |
|---|
| | | const showNav = ref(false); |
|---|
| | | const showConfig = ref(false); |
|---|
| | | const showOtherTable = ref(false); |
|---|
| | | const configType = ref(''); |
|---|
| | | const OtherTableName = 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: 页面左侧点击返回链接时的操作 |
|---|
| | |
|---|
| | | if (!isNullOrUnDef(custImport.value)) { |
|---|
| | | const [{ GetHomeUrl }] = custImport.value['default'](); |
|---|
| | | // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页 |
|---|
| | | go(GetHomeUrl(entityName.value)); |
|---|
| | | go(GetHomeUrl({ colSlots: colSlots.value })); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | // 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; |
|---|
| | | /* 动态import实体名.ts的自定义方法 */ |
|---|
| | | try { |
|---|
| | | custImport.value = await import(/* @vite-ignore */ `../entityts/${entityName.value}`); |
|---|
| | | await fetch(entityName.value); |
|---|
| | | 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); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | 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, objParams.value.rotType); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 取消选择时事件返回方法 |
|---|
| | | * @description: 选择节点时根据返回的事件参数显示隐藏相应组件 |
|---|
| | | * @param {*} e |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | function NodeSelect(e) { |
|---|
| | | showConfig.value = e.showConfig; |
|---|
| | | showOtherTable.value = e.showOtherTable; |
|---|
| | | showNav.value = e.showNav; |
|---|
| | | configType.value = e.type; |
|---|
| | | OtherTableName.value = objParams.value.OtherTableName; |
|---|
| | | nodes.value = e.nodes; |
|---|
| | | routeData.value = { |
|---|
| | | nodes: [], |
|---|
| | | edges: [], |
|---|
| | | }; |
|---|
| | | /* 自定义内容，只有显示工艺路线的组合页面会进来 */ |
|---|
| | | if (e.nodes[0].type == 'Route') { |
|---|
| | | let _rotId = e.nodes[0].code; |
|---|
| | | if (objParams.value.rotType == 'Wo') { |
|---|
| | | _rotId = e.nodes[0].wo; |
|---|
| | | } |
|---|
| | | initRoute(currlf, _rotId, routeData, currlf, objParams.value.rotType); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 删除节点后回调 |
|---|
| | | * @param {*} node |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | function UnSelect(node) { |
|---|
| | | prodCode.value = ''; |
|---|
| | | rotType.value = ''; |
|---|
| | | // reload(); |
|---|
| | | function delCallback(node) { |
|---|
| | | refreshPage(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 保存配置成功返回方法 |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | function configSuccess() { |
|---|
| | | notification.success({ message: '成功保存行为配置数据' }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | function handleEntSuccess(d, u, item) { |
|---|
| | | /* 动态import实体名.ts的自定义方法 */ |
|---|
| | | try { |
|---|
| | | import(/* @vite-ignore */ `../entityts/${cType.value}`).then((m) => { |
|---|
| | | 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]; |
|---|
| | | d.returnFieldName.map((x) => { |
|---|
| | | _val[x] = values[x]; |
|---|
| | | }); |
|---|
| | | useFormData.value[item][1].setFieldsValue(_val); |
|---|
| | | }); |
|---|
| | | } catch (e) {} |
|---|
