工艺路线，工序行为更新

Ben Lin

2024-06-15 45a3c06adfa25476b91acdce7bb1b73c05e675c6

 src/components/FlowChart/src/FlowChart.vue

@@ -1,25 +1,16 @@
<template>
  <div class="h-full" :class="prefixCls">
    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" 
    <FlowChartToolbar
      :prefixCls="prefixCls"
      v-if="toolbar"
      @view-data="handlePreview"
      @save-data="handleSave"
      @add-data="handleAdd"/>
      <a-layout style="min-height: 100vh">
      <a-layout-content>
        <div ref="lfElRef" class="h-full"></div>
      </a-layout-content>
      <a-layout-sider
        width="450"
        style="background: #fafafa; border-left: 1px solid #d9d9d9; padding: 20px"
        ><BasicForm
          autoFocusFirstItem
          :labelWidth="80"
          :schemas="schemas"
          :actionColOptions="{ span: 24 }"
          :submitButtonOptions="{ text: '确定' }"
          @submit="handleSubmit"
          @reset="handleReset"
      /></a-layout-sider>
    </a-layout>
      @add-data="handleAdd"
      @addlf="handleAddlf"
      @undo="handleUndo"
      @redo="handleRedo"
    />
    <div ref="lfElRef" class="h-full"></div>
    <BasicModal @register="register" title="流程数据" width="50%">
      <JsonPreview :data="graphData" />
    </BasicModal>
@@ -41,135 +32,23 @@
  import { configDefaultDndPanel } from './config';
  import '@logicflow/core/dist/style/index.css';
  import '@logicflow/extension/lib/style/index.css';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { getOperAllList } from '/@/api/tigerapi/mes/oper';
  import { useGlobSetting } from '/@/hooks/setting';
  import customEdge from './customEdge';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import actionRect from './actionRect';
  import TestNode from './TestNode';
  import CollectNode from './CollectNode';
  import AssemblyNode from './AssemblyNode';
  import PackingNode from './PackingNode';
  import RepairNode from './RepairNode';

  const isRuter = (type: string) => type === '0';
  const isOper = (type: string) => type === '1';
  const schemas: FormSchema[] = [
    // {
    //   field: 'divider-basic',
    //   component: 'Divider',
    //   label: '属性页',
    // },
    {
      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: () => '类型',
        };
      },
    },
    {
      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',
          },
        ],
      },
    },
    {
      field: 'field4',
      component: 'Switch',
      label: '是否计算直通率',
      colProps: {
        span: 16,
      },
      labelWidth: 200,
    },
    {
      field: 'field5',
      component: 'Switch',
      label: '是否可跳站',
      colProps: {
        span: 16,
      },
      labelWidth: 200,
    },
  ];
  const { notification } = useMessage();
  const { t } = useI18n();

  export default defineComponent({
    name: 'FlowChart',
    components: { BasicModal, FlowChartToolbar, JsonPreview, BasicForm },
    components: { BasicModal, FlowChartToolbar, JsonPreview },
    props: {
      flowOptions: {
        type: Object as PropType<Definition>,
@@ -189,7 +68,17 @@
        type: Array,
      },
    },
    setup(props) {
    emits: [
      'view-data',
      'save-data',
      'add-lf',
      'select-node',
      'click-blank',
      'init',
      'undo',
      'redo',
    ],
    setup(props, { emit }) {
      const globSetting = useGlobSetting();
      const lfElRef = ref(null);
      const graphData = ref({});
@@ -273,6 +162,12 @@
        });
        const lf = unref(lfInstance)!;
        // lf?.setDefaultEdgeType('line');
        lf.register(actionRect);
        lf.register(TestNode);
        lf.register(CollectNode);
        lf.register(AssemblyNode);
        lf.register(PackingNode);
        lf.register(RepairNode);
        onRender();
        lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
      }
@@ -287,18 +182,41 @@
        // const lFData = toLogicFlowData(props.data);
        lf.render(props.data);

        if (globSetting.apiUrl == 'http://localhost:9528/api') {
          lf.on('anchor:drop', (data) => {
            const nodeData = data.nodeModel.getData();
            if (nodeData.properties.isReturn === true) {
              data.nodeModel.graphModel.edges.forEach((element) => {
                if (element.sourceNodeId === data.nodeModel.id) {
                  lf.changeEdgeType(element.id, 'custom-edge');
                }
              });
            }
          });
        }
        lf.on('anchor:drop', (data) => {
          const nodeData = data.nodeModel.getData();
          if (nodeData.properties.isReturn === true) {
            console.log(11, nodeData.properties.isReturn);
            data.nodeModel.graphModel.edges.forEach((element) => {
              if (element.sourceNodeId === data.nodeModel.id) {
                lf.changeEdgeType(element.id, 'custom-edge');
              }
            });
          }
        });
        lf.on('node:click,edge:click', (data) => {
          if (data.isSelected) {
            console.log(data.data.text.value, data.isSelected);
            // notification.success({
            //   message: t('点击了节点'),
            //   description: `${data.data.text.value}: ${data.isSelected}`,
            //   duration: 3,
            // });
            emit('select-node', data, lf);
          } else {
            console.log(data.data.type);
          }
        });

        lf.on('blank:mousedown', (e) => {
          emit('click-blank');
        });

        lf.on('node:dnd-add', (data, e) => {
          console.log('node:dnd-add', data);
          emit('select-node', data, lf);
        });

        emit('init', lf);
      }

      function handlePreview() {
@@ -311,11 +229,12 @@
      }

      function handleSave() {
        console.log('handleSave');
        // console.log('handleSave');
        const lf = unref(lfInstance);
        if (!lf) {
          return;
        }
        emit('save-data', lf);
      }

      function handleAdd() {
@@ -328,6 +247,30 @@
        lf.render({});
      }

      function handleAddlf() {
        const lf = unref(lfInstance);
        if (!lf) {
          return;
        }
        emit('add-lf', lf);
      }

      function handleUndo() {
        const lf = unref(lfInstance);
        if (!lf) {
          return;
        }
        emit('undo', lf);
      }

      function handleRedo() {
        const lf = unref(lfInstance);
        if (!lf) {
          return;
        }
        emit('redo', lf);
      }

      onMounted(init);

      return {
@@ -336,12 +279,13 @@
        lfElRef,
        handlePreview,
        graphData,
        schemas,
        handleReset: () => {},
        handleSubmit: (_values: any) => {},
        handleSave,
        handleAdd,
        handleAddlf,
        handleUndo,
        handleRedo,
      };
    },
  });
</script>
./TestNode