Merge branch 'master' of http://36.137.93.232:3000/hf/byte-sailing-new

package.json

@@ -16,7 +16,16 @@
   },
   "dependencies": {
     "@antv/x6": "^2.9.4",
-    "@element-plus/icons-vue": "2.0.10",
+    "@antv/x6-plugin-clipboard": "^2.1.5",
+    "@antv/x6-plugin-dnd": "^2.0.4",
+    "@antv/x6-plugin-history": "^2.1.2",
+    "@antv/x6-plugin-keyboard": "^2.2.0",
+    "@antv/x6-plugin-selection": "^2.1.5",
+    "@antv/x6-plugin-snapline": "^2.1.6",
+    "@antv/x6-plugin-stencil": "^2.0.2",
+    "@antv/x6-plugin-transform": "^2.1.6",
+    "@vue-flow/additional-components": "^1.3.3",
+    "@vue-flow/core": "^1.18.2",
     "@vueuse/core": "9.5.0",
     "axios": "0.27.2",
     "echarts": "5.4.0",
@@ -30,9 +39,11 @@
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "typescript": "^5.0.4",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue-super-flow": "^1.3.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/components/byTable/demo.vue

@@ -261,6 +261,7 @@ const formOption = reactive({
   rules: [],
 });
 const formConfig = computed(() => {
+<<<<<<< Updated upstream
   return [
     {
       type: "input",
@@ -337,6 +338,86 @@ const formConfig = computed(() => {
     },
   ];
 });
+=======
+	return [
+		{
+			type: 'input',
+			prop: 'name',
+			label: 'label名称',
+			required: true,
+			itemWidth: 100,
+			//disabled:true,
+			itemType: 'textarea',
+			//配置隐藏显示
+			isShow:formData.userType === 1,
+		},
+		{
+			type: 'select',
+			prop: 'xiala',
+			label: '下拉框',
+			multiple: true,
+			style: {
+				width: '300px',
+			},
+			isLoad: {
+				url: '/getRouters',
+				resUrl: 'data',
+				//如果接口回来为stringArray，可以把labelkey和labelval都设置为stringArray
+				labelKey: 'name',
+				labelVal: 'path',
+			},
+			//所有组件的change事件监听
+			fn: (e) => {
+				console.log(e)
+			},
+		},
+		{
+			type: 'date',
+			prop: 'date',
+			label: '时间',
+			itemType: 'date',
+		},
+		{
+			type: 'radio',
+			prop: 'radio',
+			label: '单选',
+		},
+		{
+			type: 'slot',
+			slotName: 'slot',
+			label: '插槽',
+		},
+		
+		{
+			//使用此功能需要初始化prop数据至少是对象
+			type: 'json',
+			prop: 'standardJson',
+			json: [
+				{
+					type: 'input',
+					prop: 'englishName',
+					label: '英文名',
+				},
+				{
+					type: 'input',
+					prop: 'code',
+					label: '备注',
+				},
+				{
+					type: 'input',
+					prop: 'netWeight',
+					label: '净重',
+				},
+				{
+					type: 'input',
+					prop: 'customhouse',
+					label: '海关编码',
+				},
+			],
+		},
+	]
+})
+>>>>>>> Stashed changes
 
 const sleep = (time = 1000) => {
   return new Promise((resolve) => setTimeout(resolve, time));

src/components/byTable/index.vue

@@ -28,7 +28,7 @@
           style="margin-right: 10px"
         >
           <div class="by-dropdown-title">
-            {{ i.label }}<i class="el-icon-caret-bottom el-icon--right"></i>
+            {{ i.label }}<i style="margin-left:5px" class="iconfont icon-iconm_xialan1"></i>
           </div>
           <ul class="by-dropdown-lists">
             <li
@@ -450,7 +450,7 @@ export default defineComponent({
   margin-bottom: 10px;
 }
 .by-dropdown {
-  width: 106px;
+  
   position: relative;
   text-align: left;
   height: 32px;

src/views/login.vue

@@ -71,10 +71,10 @@ const router = useRouter()
 const { proxy } = getCurrentInstance()
 
 const loginForm = ref({
-	username: 'admin',
-	password: 'admin123',
+	username: '',
+	password: '',
 	rememberMe: false,
-	tenantId:'000000',
+	tenantId:'',
 	code: '',
 	uuid: '',
 })

src/views/process/processConfig/Sidebar.vue

@@ -0,0 +1,22 @@
+<script setup>
+function onDragStart(event, nodeType) {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/vueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane.</div>
+
+    <div class="nodes">
+      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
+
+      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">Default Node</div>
+
+      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
+    </div>
+  </aside>
+</template>

src/views/process/processConfig/index.vue

@@ -295,12 +295,16 @@ const getDept = () => {
 	})
 }
 
-
+const router = useRouter();
 const getDtl = (row) => {
 	formData.data = { ...row }
-	modalType.value = 'edit'
-	console.log(modalType.value)
-	dialogVisible.value = true
+	
+	router.push({
+		path: 'processChart',
+		query: {
+			id: row.id,
+		},
+	})
 }
 getTreeList()
 getList()

src/views/process/processConfig/processChart.vue

@@ -1,19 +1,24 @@
 <template>
-    <div class="processChart">
-        <div class="from">
-            <div class="commons-title">基础配置</div>
-        </div>
-        <div class="content">
-            <div class="commons-title">基础配置</div>
-            <div class="chart-warp">
-
-            </div>
-        </div>
-    </div>
+	<div class="processChart">
+		<div class="from">
+			<div class="commons-title">基础配置</div>
+		</div>
+		<div class="content">
+			<div class="commons-title">基础配置</div>
+			<div class="chart-warp">
+				<vueFlow></vueFlow>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script lang="setup">
-    
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import vueFlow from '@/views/process/processConfig/vueFlow.vue'
+
+onMounted(() => {
+	
+})
 </script>
 
 <style lang="scss" scoped>
@@ -28,4 +33,7 @@
 		width: calc(100% - 320px);
 	}
 }
-</style>
+.chart-warp {
+	height: calc(100vh - 180px);
+}
+</style>

src/views/process/processConfig/vueFlow.vue

@@ -0,0 +1,436 @@
+<template lang="">
+	<div class="vueFlow">
+		<div id="container"></div>
+		<div id="stencil"></div>
+		<div id="graph-container"></div>
+
+	</div>
+</template>
+<script lang="ts" setup>
+import {
+	defineComponent,
+	ref,
+	onMounted,
+	onUnmounted,
+	watch,
+	reactive,
+	toRefs,
+	computed,
+	nextTick,
+} from 'vue'
+import { Graph, Shape } from '@antv/x6'
+import { Stencil } from '@antv/x6-plugin-stencil'
+import { Transform } from '@antv/x6-plugin-transform'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Snapline } from '@antv/x6-plugin-snapline'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Clipboard } from '@antv/x6-plugin-clipboard'
+import { History } from '@antv/x6-plugin-history'
+const aaa = (port: any) => {
+	console.log(port)
+}
+const antvInit = () => {
+	const graph = new Graph({
+		height:700,
+		container: document.getElementById('graph-container')!,
+		grid: true,
+		onPortRendered:aaa,
+		mousewheel: {
+			enabled: true,
+			zoomAtMousePosition: true,
+			modifiers: 'ctrl',
+			minScale: 0.5,
+			maxScale: 3,
+		},
+		connecting: {
+			router: 'manhattan',
+			connector: {
+				name: 'rounded',
+				args: {
+					radius: 8,
+				},
+			},
+			anchor: 'center',
+			connectionPoint: 'anchor',
+			allowBlank: false,
+			snap: {
+				radius: 20,
+			},
+			createEdge() {
+				return new Shape.Edge({
+					attrs: {
+						line: {
+							stroke: '#A2B1C3',
+							strokeWidth: 2,
+							targetMarker: {
+								name: 'block',
+								width: 12,
+								height: 8,
+							},
+						},
+					},
+					zIndex: 0,
+				})
+			},
+			validateConnection({ targetMagnet }) {
+				return !!targetMagnet
+			},
+		},
+		highlighting: {
+			magnetAdsorbed: {
+				name: 'stroke',
+				args: {
+					attrs: {
+						fill: '#5F95FF',
+						stroke: '#5F95FF',
+					},
+				},
+			},
+		},
+	})
+	const stencil = new Stencil({
+		title: '流程图',
+		target: graph,
+		stencilGraphWidth: 200,
+		stencilGraphHeight: 180,
+		collapsable: true,
+		groups: [
+			{
+				title: '基础流程图',
+				name: 'group1',
+			},
+			
+		],
+		layoutOptions: {
+			columns: 2,
+			columnWidth: 80,
+			rowHeight: 55,
+		},
+	})
+	document.getElementById('stencil')!.appendChild(stencil.container)
+	// #region 使用插件
+	graph
+		.use(
+			new Transform({
+				resizing: true,
+				rotating: true,
+			})
+		)
+		.use(
+			new Selection({
+				enabled: true,
+				rubberband: true,
+				showNodeSelectionBox: true,
+			})
+		)
+		.use(
+			new Snapline({
+				enabled: true,
+			})
+		)
+		.use(
+			new Keyboard({
+				enabled: true,
+			})
+		)
+		.use(
+			new Clipboard({
+				enabled: true,
+			})
+		)
+		.use(
+			new History({
+				enabled: true,
+			})
+		)
+
+
+	// 控制连接桩显示/隐藏
+	const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
+		for (let i = 0, len = ports.length; i < len; i += 1) {
+			ports[i].style.visibility = show ? 'visible' : 'hidden'
+		}
+	}
+	graph.on('node:mouseenter', () => {
+		const container = document.getElementById('graph-container')!
+		const ports = container.querySelectorAll(
+			'.x6-port-body'
+		) as NodeListOf<SVGElement>
+		showPorts(ports, true)
+	})
+	graph.on('node:mouseleave', () => {
+		const container = document.getElementById('graph-container')!
+		const ports = container.querySelectorAll(
+			'.x6-port-body'
+		) as NodeListOf<SVGElement>
+		showPorts(ports, false)
+	})
+	// #endregion
+
+	// #region 初始化图形
+	const ports = {
+		groups: {
+			top: {
+				position: 'top',
+				attrs: {
+					circle: {
+						r: 4,
+						magnet: true,
+						stroke: '#5F95FF',
+						strokeWidth: 1,
+						fill: '#fff',
+						style: {
+							visibility: 'hidden',
+						},
+					},
+				},
+			},
+			right: {
+				position: 'right',
+				attrs: {
+					circle: {
+						r: 4,
+						magnet: true,
+						stroke: '#5F95FF',
+						strokeWidth: 1,
+						fill: '#fff',
+						style: {
+							visibility: 'hidden',
+						},
+					},
+				},
+			},
+			bottom: {
+				position: 'bottom',
+				attrs: {
+					circle: {
+						r: 4,
+						magnet: true,
+						stroke: '#5F95FF',
+						strokeWidth: 1,
+						fill: '#fff',
+						style: {
+							visibility: 'hidden',
+						},
+					},
+				},
+			},
+			left: {
+				position: 'left',
+				attrs: {
+					circle: {
+						r: 4,
+						magnet: true,
+						stroke: '#5F95FF',
+						strokeWidth: 1,
+						fill: '#fff',
+						style: {
+							visibility: 'hidden',
+						},
+					},
+				},
+			},
+		},
+		items: [
+			{
+				group: 'top',
+			},
+			{
+				group: 'right',
+			},
+			{
+				group: 'bottom',
+			},
+			{
+				group: 'left',
+			},
+		],
+	}
+	Graph.registerNode(
+		'custom-rect',
+		{
+			inherit: 'rect',
+			width: 66,
+			height: 36,
+			attrs: {
+				body: {
+					strokeWidth: 1,
+					stroke: '#5F95FF',
+					fill: '#EFF4FF',
+				},
+				text: {
+					fontSize: 12,
+					fill: '#262626',
+				},
+			},
+			ports: { ...ports },
+		},
+		true
+	)
+
+	Graph.registerNode(
+		'custom-polygon',
+		{
+			inherit: 'polygon',
+			width: 66,
+			height: 36,
+			attrs: {
+				body: {
+					strokeWidth: 1,
+					stroke: '#5F95FF',
+					fill: '#EFF4FF',
+				},
+				text: {
+					fontSize: 12,
+					fill: '#262626',
+				},
+			},
+			ports: {
+				...ports,
+				items: [
+					{
+						group: 'top',
+					},
+					{
+						group: 'bottom',
+					},
+				],
+			},
+		},
+		true
+	)
+
+	Graph.registerNode(
+		'custom-circle',
+		{
+			inherit: 'circle',
+			width: 45,
+			height: 45,
+			attrs: {
+				body: {
+					strokeWidth: 1,
+					stroke: '#5F95FF',
+					fill: '#EFF4FF',
+				},
+				text: {
+					fontSize: 12,
+					fill: '#262626',
+				},
+			},
+			ports: { ...ports },
+		},
+		true
+	)
+
+	Graph.registerNode(
+		'custom-image',
+		{
+			inherit: 'rect',
+			width: 52,
+			height: 52,
+			markup: [
+				{
+					tagName: 'rect',
+					selector: 'body',
+				},
+				{
+					tagName: 'image',
+				},
+				{
+					tagName: 'text',
+					selector: 'label',
+				},
+			],
+			attrs: {
+				body: {
+					stroke: '#5F95FF',
+					fill: '#5F95FF',
+				},
+				image: {
+					width: 26,
+					height: 26,
+					refX: 13,
+					refY: 16,
+				},
+				label: {
+					refX: 3,
+					refY: 2,
+					textAnchor: 'left',
+					textVerticalAnchor: 'top',
+					fontSize: 12,
+					fill: '#fff',
+				},
+			},
+			ports: { ...ports },
+		},
+		true
+	)
+	const r1 = graph.createNode({
+		shape: 'custom-rect',
+		label: '开始',
+		attrs: {
+			body: {
+				rx: 20,
+				ry: 26,
+			},
+		},
+	})
+	const r2 = graph.createNode({
+		shape: 'custom-rect',
+		label: '办理',
+	})
+	const r3 = graph.createNode({
+		shape: 'custom-rect',
+		attrs: {
+			body: {
+				rx: 6,
+				ry: 6,
+			},
+		},
+		label: '分支',
+	})
+	const r4 = graph.createNode({
+		shape: 'custom-polygon',
+		attrs: {
+			body: {
+				refPoints: '0,10 10,0 20,10 10,20',
+			},
+		},
+		label: '结束',
+	})
+	stencil.load([r1, r2, r3, r4], 'group1')
+
+	
+	
+}
+onMounted(() => {
+	antvInit()
+})
+</script>
+<style lang="scss">
+.vueFlow {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	#stencil {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 100;
+		width: 200px;
+		height: 500px;
+		background: #fff;
+		border-right: 1px solid #e8e8e8;
+	}
+	#container {
+		height: 800px;
+		width: 800px;
+	}
+	#graph-container{
+		width: 100%;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+</style>

src/views/process/processConfig/vueFlow2.vue

@@ -0,0 +1,107 @@
+<style lang="scss" scoped>
+.container{
+    height: 100%;
+}
+.my-flow {
+	margin: 10px;
+	height: 700px;
+
+	//   :deep(.node-light) {
+	//     background: none;
+	//   }
+	//   :deep(.node-dark) {
+	//     background: #eeeeee;
+	//   }
+}
+</style>
+<template>
+	<div class="container">
+		<el-row class="mb-4">
+			<el-button type="primary" @click="resetTransform">重置</el-button>
+		</el-row>
+
+		<VueFlow
+			fit-view-on-init
+			class="my-flow"
+			v-model="elements"
+		>
+			<Background />
+			<Panel :position="PanelPosition.TopRight">
+                <button type="button" @click="addRandomNode('办理')">办理</button>
+                <button type="button" style="margin-left:10px" @click="addRandomNode('分支')">分支</button>
+                <button type="button" style="margin-left:10px" @click="addRandomNode('结束')">结束</button>
+            </Panel>
+			<!-- <Controls /> -->
+		</VueFlow>
+	</div>
+</template>
+ 
+ 
+<script lang="ts" setup name="DemoBpmn">
+import '@vue-flow/core/dist/style.css'
+/* import the default theme (optional) */
+import '@vue-flow/core/dist/theme-default.css'
+
+import {
+	Background,
+	Panel,
+	PanelPosition,
+	Controls,
+} from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const data = [
+	{ id: '1', type: 'input', label: '开始', position: { x: 250, y: 5 } },
+	
+]
+let elements = ref(data)
+
+const isHidden = ref(false)
+
+let {
+	onPaneReady,
+	onNodeDragStop,
+	onConnect,
+	addEdges,
+	setTransform,
+	toObject,
+	nodes,
+	edges,
+    applyNodeChanges,
+    dimensions,
+    addNodes
+} = useVueFlow()
+
+function addRandomNode(_name) {
+  const nodeId = (nodes.value.length + 1).toString()
+
+  const newNode = {
+    id: nodeId,
+    label: _name,
+    position: { x: 250, y: 100 }
+  }
+
+  addNodes([newNode])
+}
+
+watch(isHidden, () => {
+	nodes.value.forEach((n) => (n.hidden = isHidden.value))
+	edges.value.forEach((e) => (e.hidden = isHidden.value))
+})
+
+onPaneReady(({ fitView }) => {
+	fitView()
+})
+onNodeDragStop((e) => {
+    
+    console.log(e.node)
+})
+onConnect((params) => addEdges([params]))
+
+const resetTransform = () => {
+	elements.value = data
+	setTransform({ x: 0, y: 0, zoom: 1 })
+}
+</script>

src/views/system/tenant/index.vue

@@ -72,6 +72,8 @@
         v-model="formData.treeData"
         ref="tree"
         node-key="id"
+        @check-change="handleNodeClick"
+        :check-strictly="true"
       >
       </el-tree>
       <template #footer>
@@ -383,6 +385,13 @@ const openRoomModal = () => {
     });
 };
 const tree = ref(null);
+
+const handleNodeClick = (e) => {
+
+  
+  
+}
+
 const submitTree = () => {
   proxy
     .post("/tenantInfo/bindingMenu", {

src/views/system/user2/index.vue

@@ -324,6 +324,7 @@ const formConfig = computed(() => {
 			label: '角色',
 			prop: 'roleIds',
 			multiple: true,
+			data:[],
 			isLoad: {
 				url: `/tenantRole/list?pageNum=1&pageSize=10000&tenantId=${sourceList.value.pagination.tenantId}`,
 				labelKey: 'roleName',
@@ -395,10 +396,27 @@ const getList = async (req) => {
 		})
 }
 
+const getUserList = (() => {
+	proxy
+		.get(`/tenantRole/list?pageNum=1&pageSize=10000&tenantId=${sourceList.value.pagination.tenantId}`,)
+		.then((message) => {
+			console.log(message.rows)
+			formConfig.value[4].data = message.rows.map(item=>{
+				return {
+					...item,
+					id:item.roleId,
+					label:item.roleName,
+				}
+			})
+		})
+	
+})
+
 const treeChange = (e) => {
 	console.log(e)
 	sourceList.value.pagination.tenantId = e.id
 	getList({ tenantId: e.id })
+	getUserList()
 	getDept()
 }