| | |
| | | <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: [ |
| | |
| | | }; |
| | | return { |
| | | demoData, |
| | | schemas, |
| | | handleReset: () => {}, |
| | | handleSubmit: (_values: any) => {}, |
| | | }; |
| | | }, |
| | | }; |