一些更新

Ben Lin

2024-05-01 532e24e6c347c56757124f627945b73c5c637ff5

 src/views/tigerprojects/mes/eng/route/index.vue

@@ -3,11 +3,12 @@
    <Layout class="h-full">
      <LayoutContent :style="{ overflow: 'initial' }">
        <FlowChart
          :data="demoData"
          :data="routeData"
          @save-data="handleSave"
          @add-lf="handleAddlf"
          @select-node="handleSelect"
          @click-blank="clickBlank"
          @init="init"
        />
      </LayoutContent>
      <LayoutSider
@@ -37,10 +38,10 @@
<script lang="ts" setup>
  import { FlowChart } from '/@/components/FlowChart';
  import { PageWrapper } from '/@/components/Page';
  import { SaveRouteData } from '/@/api/tigerapi/mes/router';
  import { SaveRouteData, getRouteData } from '/@/api/tigerapi/mes/router';
  import { useModal } from '/@/components/Modal';
  import RouteModal from './RouteModal.vue';
  import { ref, unref, Ref, provide, reactive } from 'vue';
  import { onMounted, ref, unref, Ref, provide, reactive, nextTick } from 'vue';
  import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
  import {
    RouteData,
@@ -52,7 +53,6 @@
    MES_ROUTE,
  } from '/@/api/tigerapi/model/router';
  import { useUserStore } from '/@/store/modules/user';
  import { buildUUID } from '/@/utils/uuid';
  import RouteDrawer from './RouteDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  import PropsPanel from './components/PropsPanel.vue';
@@ -60,10 +60,14 @@
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { isNullOrEmpty } from '/@/utils/is';
  import { useRoute } from 'vue-router';
  import { useTabs } from '/@/hooks/web/useTabs';

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerModal, { openModal }] = useModal();
  const { t } = useI18n();
  const route = useRoute();
  const { setTitle } = useTabs();
  const { notification, createErrorModal } = useMessage();
  const routeConfig = reactive({
    // 表单配置
@@ -77,183 +81,16 @@
    activeKey: 1,
  } as IRouteConfig);
  const currRoute = ref({} as MES_ROUTE);
  // const schemas: FormSchema[] = [
  //   {
  //     field: 'func_type',
  //     label: '属性页',
  //     component: 'RadioButtonGroup',
  //     defaultValue: '0',
  //     componentProps: {
  //       options: [
  //         { label: '工艺流程', value: '0' },
  //         { label: '工序', value: '1' },
  //       ],
  //     },
  //     colProps: { lg: 24, md: 24 },
  //   },
  //   {
  //     field: 'OPER_CODE',
  //     component: 'ApiSelect',
  //     label: '选择工序',
  //     componentProps: {
  //       api: getOperAllList,
  //       // params: {
  //       //   id: 1,
  //       // },
  //       resultField: 'items',
  //       labelField: 'OPER_NAME',
  //       valueField: 'OPER_CODE',
  //       // not request untill to select
  //       immediate: false,
  //       onChange: (e) => {
  //         console.log('selected:', e);
  //       },
  //       // atfer request callback
  //       onOptionsChange: (options) => {
  //         console.log('get options', options.length, options);
  //       },
  //     },
  //     ifShow: ({ values }) => isOper(values.func_type),
  //   },
  //   {
  //     field: 'field2',
  //     component: 'Input',
  //     label: '工序类型',
  //     // componentProps:{},
  //     // can func
  //     componentProps: ({ schema, formModel }) => {
  //       console.log('form:', schema);
  //       console.log('formModel:', formModel);
  //       return {
  //         placeholder: '测试',
  //         onChange: (e: any) => {
  //           console.log(e);
  //         },
  //       };
  //     },
  //     renderComponentContent: () => {
  //       return {
  //         prefix: () => '工序',
  //         suffix: () => '类型',
  //       };
  //     },
  //     ifShow: ({ values }) => isOper(values.func_type),
  //   },
  //   {
  //     field: 'field3',
  //     component: 'Select',
  //     label: '工序行为',
  //     componentProps: {
  //       options: [
  //         {
  //           label: '存储过程',
  //           value: '1',
  //           key: '1',
  //         },
  //         {
  //           label: '条码规则',
  //           value: '2',
  //           key: '2',
  //         },
  //         {
  //           label: '行为一',
  //           value: '3',
  //           key: '3',
  //         },
  //         {
  //           label: '行为二',
  //           value: '4',
  //           key: '4',
  //         },
  //         {
  //           label: '行为三',
  //           value: '5',
  //           key: '5',
  //         },
  //       ],
  //     },
  //     ifShow: ({ values }) => isOper(values.func_type),
  //   },
  //   {
  //     field: 'field4',
  //     component: 'Switch',
  //     label: '是否计算直通率',
  //     colProps: {
  //       span: 16,
  //     },
  //     labelWidth: 200,
  //     ifShow: ({ values }) => isOper(values.func_type),
  //   },
  //   {
  //     field: 'field5',
  //     component: 'Switch',
  //     label: '是否可跳站',
  //     colProps: {
  //       span: 16,
  //     },
  //     labelWidth: 200,
  //     ifShow: ({ values }) => isOper(values.func_type),
  //   },
  //   {
  //     field: 'ROT_CODE',
  //     label: '工艺路线编码',
  //     required: true,
  //     component: 'Input',
  //     colProps: { span: 16 },
  //     ifShow: ({ values }) => isRute(values.func_type),
  //   },
  //   {
  //     field: 'ROT_NAME',
  //     label: '工艺路线名称',
  //     required: true,
  //     component: 'Input',
  //     colProps: { span: 16 },
  //     ifShow: ({ values }) => isRute(values.func_type),
  //   },
  //   {
  //     field: 'ROT_TYPE',
  //     label: '工艺路线类型',
  //     required: true,
  //     component: 'Input',
  //     colProps: { span: 16 },
  //     ifShow: ({ values }) => isRute(values.func_type),
  //   },
  //   {
  //     field: 'ROT_VER',
  //     label: '工艺路线版本',
  //     required: true,
  //     component: 'Input',
  //     colProps: { span: 16 },
  //     ifShow: ({ values }) => isRute(values.func_type),
  //   },
  //   {
  //     field: 'IS_ACTIVE',
  //     label: '是否启用',
  //     required: true,
  //     component: 'Select',
  //     colProps: { span: 16 },
  //     componentProps: {
  //       options: [
  //         {
  //           label: '是',
  //           value: 'Y',
  //           key: 'Y',
  //         },
  //         {
  //           label: '否',
  //           value: 'N',
  //           key: 'N',
  //         },
  //       ],
  //     },
  //     ifShow: ({ values }) => isRute(values.func_type),
  //   },
  // ];
  const demoData = ref({});
  const routeData = ref({
    nodes: [],
    edges: [],
  });
  provide<Ref<IRouteConfig>>('routeConfig', routeConfig);
  provide<Ref<MES_ROUTE>>('mesRoute', currRoute);
  const selectnode = ref({} as node);
  const currRotId = ref(route.params?.id);

  console.log(currRotId.value);
  // const demoData1 = ref({
  //   nodes: [
  //     {
@@ -374,6 +211,32 @@
  //   ],
  // });

  if (!isNullOrEmpty(currRotId.value)) {
    setTitle('设计：工艺路线' + currRotId.value);
  }

  async function init(lf) {
    //通过工艺路线ID获取图形数据，并渲染
    var _data = await getRouteData(currRotId.value);
    console.log('组件已挂载', _data);
    currRoute.value = _data.Data.route;
    _data.Data.nodes.forEach((n) => {
      n.node.properties = JSON.parse(n.node.properties);
      routeData.value.nodes.push(n.node);
    });
    console.log('111', routeData.value);
    _data.Data.edges.forEach((e) => {
      e.edge.properties = JSON.parse(e.edge.properties);
      routeData.value.edges.push(e.edge);
    });
    _data.Data.acts.forEach((act) => {
      act.node.properties = JSON.parse(act.node.properties);
      routeData.value.nodes.push(act.node);
    });
    console.log('init', unref(lf).getGraphData(), JSON.parse(JSON.stringify(routeData.value)));
    unref(lf).render(routeData.value);
  }

  async function handleSave(lf) {
    console.log('handleSave', unref(lf).getGraphData().nodes[0]);
    if (isNullOrEmpty(currRoute.value.ROT_CODE)) {
@@ -385,7 +248,7 @@
    } else {
      var _routeData: RouteData = {
        route: {
          ID: buildUUID(),
          ID: currRoute.value.ID,
          CREATE_TIME: new Date(),
          CREATE_USER: useUserStore().getUserInfo.userId as string,
          UPDATE_TIME: new Date(),
@@ -446,6 +309,14 @@
            SAPL_CODE: '',
            LABEL_CODE: '',
          };
          var pnode = [n];
          while (pnode[0].properties.operType == 'Action') {
            pnode = unref(lf).getNodeIncomingNode(pnode[0].id);
            if (pnode[0].properties.operType != 'Action') {
              act.NODE_ID = pnode[0].id;
              break;
            }
          }
          _routeData.acts.push(act);
        } else {
          var node: MES_ROUTE_NODE = {
@@ -569,8 +440,9 @@
    routeConfig.activeKey = 1;
  }

  function modalSuccess(lfInstance, route) {
  async function modalSuccess(lfInstance, route) {
    unref(lfInstance).render({});
    currRoute.value = route;
    currRotId.value = currRoute.value.ID;
  }
</script>