From 31b5d6cea1cc0a89391debbb1a87f54972ccfb78 Mon Sep 17 00:00:00 2001
From: Cloud Zhang <941187371@qq.com>
Date: 星期四, 16 五月 2024 14:22:33 +0800
Subject: [PATCH] 工单料站表
---
src/components/FlowChart/src/FlowChart.vue | 264 ++++++++++++++++++++--------------------------------
1 files changed, 104 insertions(+), 160 deletions(-)
diff --git a/src/components/FlowChart/src/FlowChart.vue b/src/components/FlowChart/src/FlowChart.vue
index 134da94..dde4080 100644
--- a/src/components/FlowChart/src/FlowChart.vue
+++ b/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
--
Gitblit v1.9.3