工单工艺路线编辑

Ben Lin

2024-08-04 54bd2e89b8689e9aa8ab6edcda003da46065cb19

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

@@ -16,11 +16,20 @@
        collapsible
        :reverseArrow="true"
        collapsedWidth="0"
        width="300"
        style="background: #fafafa; border-left: 1px solid #d9d9d9; padding: 10px"
        width="400"
        style="padding: 10px; border-left: 1px solid #d9d9d9; background: #fafafa"
        :zeroWidthTriggerStyle="{ 'margin-top': '-70px', 'background-color': 'gray' }"
      >
        <PropsPanel ref="propsPanel" :activeKey="routeConfig.activeKey">
        <PropsPanel
          ref="propsPanel"
          :activeKey="routeConfig.activeKey"
          :IsOperation="IsOperation"
          :title="title"
          :posttitle="posttitle"
          :entityName="entityName"
          @change-name="changeName"
          @change-node-name="changeNodeName"
        >
          <!-- <template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
            <slot
              :name="`${item.component}Props`"
@@ -38,10 +47,15 @@
<script lang="ts" setup>
  import { FlowChart } from '/@/components/FlowChart';
  import { PageWrapper } from '/@/components/Page';
  import { SaveRouteData, getRouteData } from '/@/api/tigerapi/mes/router';
  import {
    SaveRouteData,
    SaveWoRouteData,
    getRouteData,
    getWoRouteData,
  } from '/@/api/tigerapi/mes/router';
  import { useModal } from '/@/components/Modal';
  import RouteModal from './RouteModal.vue';
  import { onMounted, ref, unref, Ref, provide, reactive, nextTick } from 'vue';
  import { onMounted, ref, unref, Ref, provide, reactive, nextTick, watch } from 'vue';
  import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
  import {
    RouteData,
@@ -51,6 +65,7 @@
    MES_ROUTE_EDGE,
    MES_ROUTE_NODE_ACT,
    MES_ROUTE,
    nodeText,
  } from '/@/api/tigerapi/model/router';
  import { useUserStore } from '/@/store/modules/user';
  import RouteDrawer from './RouteDrawer.vue';
@@ -62,14 +77,17 @@
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { useRoute } from 'vue-router';
  import { useTabs } from '/@/hooks/web/useTabs';
  import LogicFlow from '@logicflow/core';

  defineOptions({ name: 'Route_View' });
  const { refreshPage } = 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({
  const routeConfig = reactive<IRouteConfig>({
    // 表单配置
    schemas: [],
    layout: 'horizontal',
@@ -81,33 +99,77 @@
    currentAct: {} as MES_ROUTE_NODE_ACT,
    routeData: {} as RouteData,
    activeKey: 1,
  } as IRouteConfig);
    isWorkOrder: false,
  });
  const currRoute = ref({} as MES_ROUTE);
  const routeData = ref({
    nodes: [],
    edges: [],
  });
  provide<Ref<IRouteConfig>>('routeConfig', routeConfig);
  provide<Ref<IRouteConfig>>('routeConfig', routeConfig as unknown as Ref<IRouteConfig>);
  provide<Ref<MES_ROUTE>>('mesRoute', currRoute);
  const selectnode = ref({} as node);
  const currRotId = ref(route.params?.id);
  const colSlots = ref<any>([]);
  const crudColSlots = ref<any>([]);
  const entityName = ref<any>('MES_POSITION');
  const props = defineProps({
    rotId: { type: String, default: '' },
    rotType: { type: String, default: 'Route' },
  });
  const IsOperation = ref(false);
  const title = ref('');
  const posttitle = ref('');
  let _num = 1;
  let _numEdge = 1;
  watch(
    () => props.rotId,
    (v) => {
      if (!isNullOrEmpty(v) && v !== currRotId.value) {
        currRotId.value = v;
        if (!isNullOrUnDef(unref(currlf))) {
          unref(currlf).render({});
          routeData.value = {
            nodes: [],
            edges: [],
          };
          init(currlf);
        }
      }
    },
    { deep: true },
  );

  const currlf = ref(null) as Ref<LogicFlow | null>;
  console.log(currRotId.value);

  onMounted(() => {});
  /**
   * @description: 工艺路线初始化
   * @param {*} lf
   * @return {*}
   */
  async function init(lf) {
    currlf.value = unref(lf);
    //通过工艺路线ID获取图形数据，并渲染
    var _data = await getRouteData(currRotId.value);
    routeConfig.isWorkOrder = props.rotType == 'Wo';
    var _data =
      props.rotType == 'Route'
        ? await getRouteData(currRotId.value)
        : await getWoRouteData(currRotId.value);
    console.log('组件已挂载', _data);
    //工艺路线全信息，包括Node、Edge和Act
    routeConfig.routeData = _data.Data;
    if (_data.Data != null) {
      //工艺路线主信息
      currRoute.value = _data.Data.route;
      if (!isNullOrEmpty(currRotId.value)) {
      if (!isNullOrEmpty(currRotId.value) && isNullOrEmpty(props.rotId)) {
        setTitle('设计：工艺路线-' + currRoute.value.ROT_CODE);
      }
      _data.Data.nodes.forEach((n) => {
        n.node.properties = JSON.parse(n.node.properties);
        routeData.value.nodes.push(n.node);
        n['node']['text']['value'] = n.NODE_NAME;
        routeData.value.nodes.push(n['node']);
      });
      console.log('111', routeData.value);
      _data.Data.edges.forEach((e) => {
@@ -123,6 +185,11 @@
    }
  }

  /**
   * @description: 获取工艺路线图数据
   * @param {*} lf
   * @return {*}
   */
  const GetRotData = (lf) => {
    var currRotData: RouteData = {
      route: {
@@ -138,9 +205,12 @@
        ROT_VER: currRoute.value.ROT_VER,
        IS_ACTIVE: currRoute.value.IS_ACTIVE,
        REMARK: currRoute.value.REMARK,
        AUTH_ORG: '',
        AUTH_ORG: useUserStore().getUserInfo.orgCode,
        AUTH_PROD: '',
        AUTH_WH: '',
        WORK_ORDER: currRoute.value.WORK_ORDER,
        PROD_CODE: currRoute.value.PROD_CODE,
        CUST_CODE: currRoute.value.CUST_CODE,
      },
      nodes: [],
      edges: [],
@@ -148,54 +218,67 @@
    };
    var _nodes = unref(lf).getGraphData().nodes as node[];
    var _edges = unref(lf).getGraphData().edges as edge[];
    var _num = 1;
    const diffnodes = routeConfig.routeData.nodes.filter((itemA) =>
      _nodes.some((itemB) => itemB.id === itemA.ID),
    );
    routeConfig.routeData.acts = [];
    const diffacts = routeConfig.routeData.acts.filter((itemA) =>
      _nodes.some((itemB) => itemB.id === itemA.ID),
    );
    _nodes.forEach((n) => {
      if (n.properties.operType && n.properties.operType == 'Action') {
        var act: MES_ROUTE_NODE_ACT = {
          ID: n.id,
          CREATE_TIME: routeConfig.routeData.route.CREATE_TIME,
          CREATE_USER: useUserStore().getUserInfo.userId as string,
          UPDATE_TIME: routeConfig.routeData.route.UPDATE_TIME,
          UPDATE_USER: useUserStore().getUserInfo.userId as string,
          GHOST_ROW: false,
          ROT_ID: routeConfig.routeData.route.ID,
          GPH_TYPE: n.type,
          GPH_X: n.x,
          GPH_Y: n.y,
          GPH_PROP: JSON.stringify(n.properties),
          GPH_TEXT: n.text.value,
          REMARK: '',
          AUTH_ORG: '',
          AUTH_PROD: '',
          AUTH_WH: '',
          OPTION_1: '',
          OPTION_2: '',
          OPTION_3: '',
          OPTION_4: '',
          OPTION_5: '',
          ACT_NAME: `${routeConfig.routeData.route.ROT_CODE}_${n.text.value}_${_num}`,
          NODE_ID: '',
          ACT_TYPE: 0,
          DO_TYPE: 0,
          DO_METHOD: '',
          DO_IF_PASS: '',
          DO_IF_FAIL: '',
          node: {} as node,
        };
        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;
        var _diffacts = diffacts.length > 0 ? diffacts : routeConfig.routeData.acts;
        _diffacts.forEach((a) => {
          if (a.ID == n.id) {
            var act: MES_ROUTE_NODE_ACT = {
              ID: n.id,
              CREATE_TIME: routeConfig.routeData.route.CREATE_TIME,
              CREATE_USER: useUserStore().getUserInfo.userId as string,
              UPDATE_TIME: routeConfig.routeData.route.UPDATE_TIME,
              UPDATE_USER: useUserStore().getUserInfo.userId as string,
              GHOST_ROW: false,
              ROT_ID: routeConfig.routeData.route.ID,
              GPH_TYPE: n.type,
              GPH_X: n.x,
              GPH_Y: n.y,
              GPH_PROP: JSON.stringify(n.properties),
              GPH_TEXT: n.text.value,
              REMARK: a.REMARK,
              AUTH_ORG: useUserStore().getUserInfo.orgCode,
              AUTH_PROD: '',
              AUTH_WH: '',
              OPTION_1: '',
              OPTION_2: '',
              OPTION_3: '',
              OPTION_4: '',
              OPTION_5: '',
              ACT_NAME: isNullOrEmpty(a.ACT_NAME) ? `${n.text.value}_${_num}` : a.ACT_NAME,
              ACT_CODE: a.ACT_CODE,
              NEED_SETUP: a.NEED_SETUP,
              NEED_RESET: a.NEED_RESET,
              NODE_ID: a.NODE_ID,
              ACT_TYPE: a.ACT_TYPE,
              // DO_TYPE: a.DO_TYPE,
              // DO_METHOD: a.DO_METHOD,
              // DO_IF_PASS: a.DO_IF_PASS,
              // DO_IF_FAIL: a.DO_IF_FAIL,
              node: {} as node,
              IS_ACTIVE: a.IS_ACTIVE,
              WORK_ORDER: a.WORK_ORDER,
              PROD_CODE: a.PROD_CODE,
              CUST_CODE: a.CUST_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;
              }
            }
            currRotData.acts.push(act);
          }
        }
        currRotData.acts.push(act);
        routeConfig.routeData.acts.push(act);
        });
        routeConfig.routeData.acts = _diffacts;
      } else {
        var _diffnodes = diffnodes.length > 0 ? diffnodes : routeConfig.routeData.nodes;
        _diffnodes.forEach((nd) => {
@@ -207,10 +290,10 @@
              UPDATE_TIME: currRotData.route.UPDATE_TIME,
              UPDATE_USER: useUserStore().getUserInfo.userId as string,
              GHOST_ROW: false,
              NODE_NAME: `${currRotData.route.ROT_CODE}_${n.text.value}_${_num}`,
              NODE_NAME: isNullOrEmpty(nd.NODE_NAME) ? `${n.text.value}_${_num}` : nd.NODE_NAME,
              ROT_ID: currRotData.route.ID,
              SEGMENT: '',
              OPER_CODE: '',
              SEGMENT: nd.SEGMENT,
              OPER_CODE: isNullOrEmpty(nd.OPER_CODE) ? n.type : nd.OPER_CODE,
              GPH_TYPE: n.type,
              GPH_X: n.x,
              GPH_Y: n.y,
@@ -218,9 +301,10 @@
              GPH_TEXT: n.text.value,
              IS_ACTIVE: nd.IS_ACTIVE,
              IS_CALC_FPY: nd.IS_CALC_FPY,
              ALLOW_DFT_IN: nd.ALLOW_DFT_IN,
              CAN_SKIP: nd.CAN_SKIP,
              REMARK: nd.REMARK,
              AUTH_ORG: '',
              AUTH_ORG: useUserStore().getUserInfo.orgCode,
              AUTH_PROD: '',
              AUTH_WH: '',
              IS_FIRST_NODE: 'N',
@@ -232,6 +316,9 @@
              OPTION_4: '',
              OPTION_5: '',
              node: {} as node,
              WORK_ORDER: nd.WORK_ORDER,
              PROD_CODE: nd.PROD_CODE,
              CUST_CODE: nd.CUST_CODE,
            };
            nd.GPH_TYPE = n.type;
            nd.GPH_PROP = JSON.stringify(n.properties);
@@ -270,7 +357,7 @@
        GPH_PROP: JSON.stringify(e.properties),
        GPH_POTS: JSON.stringify(e.pointsList),
        REMARK: '',
        AUTH_ORG: '',
        AUTH_ORG: useUserStore().getUserInfo.orgCode,
        AUTH_PROD: '',
        AUTH_WH: '',
        EDGE_TYPE: 0,
@@ -280,9 +367,13 @@
        OPTION_4: '',
        OPTION_5: '',
        edge: {} as edge,
        WORK_ORDER: routeConfig.routeData.route.WORK_ORDER,
        PROD_CODE: routeConfig.routeData.route.PROD_CODE,
        CUST_CODE: routeConfig.routeData.route.CUST_CODE,
      };
      routeConfig.routeData.edges.push(edge);
      currRotData.edges.push(edge);
      _numEdge++;
    });
    return currRotData;
  };
@@ -292,7 +383,10 @@
   */
  async function handleSave(lf) {
    console.log('handleSave', unref(lf).getGraphData().nodes[0]);
    if (isNullOrEmpty(currRoute.value.ROT_CODE)) {
    if (
      isNullOrEmpty(currRoute.value.ROT_CODE) ||
      (props.rotType == 'Wo' && isNullOrEmpty(currRoute.value.WORK_ORDER))
    ) {
      createErrorModal({
        title: t('未选择'),
        content: t('未选择工艺路线或者新增工艺路线'),
@@ -317,12 +411,12 @@
          getContainer: () => document.body,
        });
      } else {
        var action = await SaveRouteData(GetRotData(lf));
        var action =
          props.rotType == 'Wo'
            ? await SaveWoRouteData(GetRotData(lf))
            : await SaveRouteData(GetRotData(lf));
        if (action.IsSuccessed) {
          notification['success']({
            message: '操作成功',
            description: `保存工艺路线：${currRoute.value.ROT_CODE} 成功`,
          });
          await refreshPage();
        }
      }
    }
@@ -359,6 +453,7 @@
      //再返回具体数据
      routeConfig.routeData = GetRotData(lf);
    }

    var _node = routeConfig.routeData.nodes.filter((x) => x.ID == selectnode.value.id)[0];
    if (isNullOrUnDef(_node)) {
      _node = {
@@ -368,7 +463,7 @@
        UPDATE_TIME: currRoute.value.UPDATE_TIME,
        UPDATE_USER: useUserStore().getUserInfo.userId as string,
        GHOST_ROW: false,
        NODE_NAME: `${currRoute.value.ROT_CODE}_${selectnode.value.text.value}_0`,
        NODE_NAME: `${selectnode.value.text.value}_${_num}`,
        ROT_ID: currRoute.value.ID,
        SEGMENT: '',
        OPER_CODE: selectnode.value.type,
@@ -381,10 +476,11 @@
        IS_CALC_FPY: 'N',
        CAN_SKIP: 'N',
        REMARK: '',
        AUTH_ORG: '',
        AUTH_ORG: useUserStore().getUserInfo.orgCode,
        AUTH_PROD: '',
        AUTH_WH: '',
        IS_FIRST_NODE: '',
        ALLOW_DFT_IN: '',
        IS_INPUT: '',
        IS_OUTPUT: '',
        OPTION_1: '',
@@ -393,12 +489,108 @@
        OPTION_4: '',
        OPTION_5: '',
        node: {} as node,
        WORK_ORDER: currRoute.value.WORK_ORDER,
        PROD_CODE: currRoute.value.PROD_CODE,
        CUST_CODE: currRoute.value.CUST_CODE,
      };
      routeConfig.routeData.nodes.push(_node);
      _num++;
    }
    if (selectnode.value.properties.operType && selectnode.value.properties.operType == 'Action') {
      routeConfig.activeKey = 3;
    //是行为
    if (
      selectnode.value.properties['operType'] &&
      selectnode.value.properties['operType'] == 'Action'
    ) {
      var _act = routeConfig.routeData.acts.filter((x) => x.ID == selectnode.value.id)[0];
      routeConfig.activeKey = 2;
      IsOperation.value = false;
      title.value = '行为';
      posttitle.value = '';
      if (isNullOrUnDef(_act)) {
        _act = {
          ID: selectnode.value.id,
          CREATE_TIME: currRoute.value.CREATE_TIME,
          CREATE_USER: useUserStore().getUserInfo.userId as string,
          UPDATE_TIME: currRoute.value.UPDATE_TIME,
          UPDATE_USER: useUserStore().getUserInfo.userId as string,
          GHOST_ROW: false,
          AUTH_ORG: useUserStore().getUserInfo.orgCode,
          AUTH_PROD: '',
          AUTH_WH: '',
          ACT_NAME: `${selectnode.value.text.value}_${_numEdge}`,
          ACT_CODE: '',
          ROT_ID: currRoute.value.ID,
          NODE_ID: '',
          ACT_TYPE: 0,
          GPH_TYPE: selectnode.value.type,
          GPH_X: selectnode.value.x,
          GPH_Y: selectnode.value.y,
          GPH_PROP: JSON.stringify(selectnode.value.properties),
          GPH_TEXT: selectnode.value.text.value,
          NEED_SETUP: 'Y',
          NEED_RESET: 'N',
          // DO_TYPE: 0,
          // DO_METHOD: '',
          // DO_IF_PASS: '',
          // DO_IF_FAIL: '',
          IS_ACTIVE: '',
          OPTION_1: '',
          OPTION_2: '',
          OPTION_3: '',
          OPTION_4: '',
          OPTION_5: '',
          REMARK: '',
          node: {} as node,
          WORK_ORDER: currRoute.value.WORK_ORDER,
          PROD_CODE: currRoute.value.PROD_CODE,
          CUST_CODE: currRoute.value.CUST_CODE,
        };
        routeConfig.routeData.acts.push(_act);
        _numEdge++;
      }
      routeConfig.currentAct = {
        ID: selectnode.value.id,
        CREATE_TIME: currRoute.value.CREATE_TIME,
        CREATE_USER: useUserStore().getUserInfo.userId as string,
        UPDATE_TIME: currRoute.value.UPDATE_TIME,
        UPDATE_USER: useUserStore().getUserInfo.userId as string,
        GHOST_ROW: false,
        AUTH_ORG: _act.AUTH_ORG,
        AUTH_PROD: _act.AUTH_PROD,
        AUTH_WH: _act.AUTH_WH,
        ACT_NAME: _act.ACT_NAME,
        ACT_CODE: _act.ACT_CODE,
        ROT_ID: currRoute.value.ID,
        NODE_ID: _act.NODE_ID,
        ACT_TYPE: _act.ACT_TYPE,
        GPH_TYPE: selectnode.value.type,
        GPH_X: selectnode.value.x,
        GPH_Y: selectnode.value.y,
        GPH_PROP: JSON.stringify(selectnode.value.properties),
        GPH_TEXT: selectnode.value.text.value,
        NEED_SETUP: _act.NEED_SETUP,
        NEED_RESET: _act.NEED_RESET,
        // DO_TYPE: _act.DO_TYPE,
        // DO_METHOD: _act.DO_METHOD,
        // DO_IF_PASS: _act.DO_IF_PASS,
        // DO_IF_FAIL: _act.DO_IF_FAIL,
        IS_ACTIVE: _act.IS_ACTIVE,
        OPTION_1: '',
        OPTION_2: '',
        OPTION_3: '',
        OPTION_4: '',
        OPTION_5: '',
        REMARK: '',
        node: {} as node,
        WORK_ORDER: currRoute.value.WORK_ORDER,
        PROD_CODE: currRoute.value.PROD_CODE,
        CUST_CODE: currRoute.value.CUST_CODE,
      };
      const actModel = lf.getNodeModelById(selectnode.value.id);
      actModel.updateText(routeConfig.currentAct?.ACT_NAME);
    } else {
      //是工序
      IsOperation.value = false;
      routeConfig.currentItem = {
        ID: selectnode.value.id,
        CREATE_TIME: currRoute.value.CREATE_TIME,
@@ -406,6 +598,9 @@
        UPDATE_TIME: currRoute.value.UPDATE_TIME,
        UPDATE_USER: useUserStore().getUserInfo.userId as string,
        GHOST_ROW: false,
        AUTH_ORG: _node.AUTH_ORG,
        AUTH_PROD: _node.AUTH_PROD,
        AUTH_WH: _node.AUTH_WH,
        NODE_NAME: _node.NODE_NAME ?? '',
        ROT_ID: currRoute.value.ID,
        SEGMENT: _node.SEGMENT,
@@ -419,16 +614,29 @@
        IS_CALC_FPY: _node.IS_CALC_FPY,
        CAN_SKIP: _node.CAN_SKIP,
        IS_INPUT: _node.IS_INPUT,
        ALLOW_DFT_IN: _node.ALLOW_DFT_IN,
        IS_OUTPUT: _node.IS_OUTPUT,
        REMARK: _node.REMARK,
        WORK_ORDER: currRoute.value.WORK_ORDER,
        PROD_CODE: currRoute.value.PROD_CODE,
        CUST_CODE: currRoute.value.CUST_CODE,
        node: {} as node,
      };
      const nodeModel = lf.getNodeModelById(selectnode.value.id);
      nodeModel.updateText(_node.NODE_NAME);
      routeConfig.isCalcFpy = _node.IS_CALC_FPY == 'Y';
      routeConfig.canSkip = _node.CAN_SKIP == 'Y';
      routeConfig.isActive = _node.IS_ACTIVE == 'Y';
      routeConfig.allowDftIn = _node.ALLOW_DFT_IN == 'Y';
      routeConfig.isInput = _node.IS_INPUT == 'Y';
      routeConfig.isOutput = _node.IS_OUTPUT == 'Y';

      console.log(routeConfig.currentItem);
      routeConfig.activeKey = 2;
      setTimeout(() => {
        console.log(routeConfig.currentItem);
        routeConfig.activeKey = 2;
        IsOperation.value = true;
        title.value = '工序';
        posttitle.value = '岗位';
      }, 100);
    }
  }

@@ -441,6 +649,8 @@
   */
  function clickBlank() {
    routeConfig.activeKey = 1;
    title.value = '';
    posttitle.value = '';
  }

  /*
@@ -460,4 +670,25 @@
    //再返回具体数据
    routeConfig.routeData = GetRotData(unref(lfInstance));
  }

  /**
   * @description: 名称改变回调方法，返回后更新节点文本
   * @param {*} e
   * @return {*}
   */
  function changeName(e) {
    console.log(e.val);
    const nodeModel = unref(currlf)?.getNodeModelById(e.id);
    nodeModel?.updateText(e.val);
  }
  /**
   * @description: 名称改变回调方法，返回后更新节点文本
   * @param {*} e
   * @return {*}
   */
  function changeNodeName(e) {
    console.log(e.val);
    const nodeModel = unref(currlf)?.getNodeModelById(e.id);
    nodeModel?.updateText(e.val);
  }
</script>