Ben Lin
2024-04-25 fa77d6fcb0b770edc33c65ee9b947c34af2c3bf9
src/views/tigerprojects/mes/eng/router/index.vue
@@ -1,15 +1,154 @@
<template>
  <PageWrapper title="工艺流程图" content="根据生产工艺设计工艺流程" contentFullHeight fixedHeight>
    <FlowChart :data="demoData" />
    <a-layout style="min-height: 100vh">
      <a-layout-content>
        <FlowChart :data="demoData" />
      </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>
  </PageWrapper>
</template>
<script lang="ts">
  import { FlowChart } from '/@/components/FlowChart';
  import { PageWrapper } from '/@/components/Page';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { getOperAllList } from '/@/api/tigerapi/mes/oper';
  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,
    },
  ];
  export default {
    components: { FlowChart, PageWrapper },
    components: { FlowChart, PageWrapper, BasicForm },
    setup() {
      let demoData = {
        nodes: [
@@ -132,6 +271,9 @@
      };
      return {
        demoData,
        schemas,
        handleReset: () => {},
        handleSubmit: (_values: any) => {},
      };
    },
  };