增加组织架构层级树，用于计算流程处理人

src/pages/sys/org/tier/node.vue

@@ -0,0 +1,98 @@
+<template>
+	<Wrap>
+		<div class='p-left'>
+			<NodeTree @node-click='nodeClick'/>
+		</div>
+		<div class='p-right'>
+			<el-card class='box-card'>
+				<template #header>
+					<el-row>
+						<el-col :span='14'>
+							<el-input v-model='state.form.name' placeholder='输入名称回车查询' clearable class='list-search'
+												@keyup.enter='listQuery(state)'/>
+							<el-button type='primary' @click='listQuery(state)' :icon="Search" plain>查询</el-button>
+							<el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
+						</el-col>
+						<el-col :span='10' style='text-align: right'>
+							<el-button type='success' :icon='Plus' @click='drawer.open({pid:state.pid})' plain>新增</el-button>
+							<el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
+						</el-col>
+					</el-row>
+					<div v-show='state.moreParams' class='more-params'>
+						<el-form :inline='true' label-width='100px'>
+							<el-form-item label='更多参数1'>
+								<el-input v-model='state.form.notes'  placeholder='更多参数1'/>
+							</el-form-item>
+							<el-form-item label='更多参数2'>
+								<el-input v-model='state.form.xx'  placeholder='更多参数2'/>
+							</el-form-item>
+							<el-form-item/>
+						</el-form>
+					</div>
+				</template>
+
+				<el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}" v-loading='state.loading' :data='state.list'
+									border stripe @selection-change='listSelect($event,state)'>
+					<el-table-column type='selection' width='55' align='center'/>
+					<el-table-column label='序号' type='index' width='55' align='center'/>
+					<el-table-column label='层级节点名称' width='180'>
+						<template #default='scope'>
+							<span style='cursor:pointer;color: #3e9ece' @click='drawer.open({id:scope.row.id,pid:state.pid})'>{{ scope.row.name }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label='备注' prop='notes'/>
+					<el-table-column label='创建时间' prop='crtim' width='160'/>
+					<el-table-column label='更新时间' prop='uptim' width='160'/>
+				</el-table>
+
+				<el-pagination
+					@size-change='listQuery(state)' @current-change='listQuery(state)'
+					class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
+					:total='state.total' v-model:current-page='state.form.page' v-model:page-size='state.form.pageSize'
+					layout='total, sizes, prev, pager, next, jumper'
+				/>
+			</el-card>
+		</div>
+		<NodeEdit ref='drawer' @nodeRefresh='nodeRefresh'/>
+	</Wrap>
+</template>
+<script lang='ts'>
+export default {name: 'SysOrgTierNode'};
+</script>
+<script lang='ts' setup>
+import {Search,Plus, Delete, ArrowDown, ArrowUp} from '@element-plus/icons-vue';
+import { onMounted, reactive, ref } from 'vue';
+import {listQuery, listDelete, listSelect} from '/@/comps/page/index';
+import Wrap from '/@/comps/page/Wrap.vue';
+import NodeTree from './node_tree.vue';
+import NodeEdit from './node_edit.vue';
+
+const state = reactive({
+	url: '/sys/org/tnode', loading: true, ids: [], moreParams: false,
+	form: {} as any, single: true, multiple: true, list: [], total: 0,
+});
+
+onMounted(() => {
+	listQuery(state);
+});
+
+
+//region a 左侧层级树点击
+const nodeClick = async (node: any) => {
+	state.form.pid = node.id;
+	state.form.pname = node.name;
+	await listQuery(state);
+};
+//endregion
+
+const drawer = ref();
+
+const nodeRefresh=async ()=>{
+	await listQuery(state);
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/pages/sys/org/tier/node_edit.vue

@@ -0,0 +1,169 @@
+<template>
+	<el-drawer v-model='state.show' size='70%'>
+		<template #title>
+			<h4>层级节点编辑</h4>
+		</template>
+		<template #default>
+			<div style='padding: 20px;border-top: 1px solid #ccc'>
+				<el-form ref='formRef' :model='form' label-width='160px'>
+					<el-row style='height: 48px'>
+						<el-col :span='12'>
+							<el-form-item label='名称：' prop='name' :rules="[{ required: true, message: '名称不能为空'}]">
+								<el-input v-model='form.name'></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span='12'>
+							<el-form-item label='上一节点：'>
+								<el-input v-model='form.parna' readonly :suffix-icon='Search' @click='openParentModal'></el-input>
+								<ParentModal url='/sys/org/tnode/tree' :maInit="true" ref='parentModal' @close='closeParentModal'/>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row style='height: 48px'>
+						<el-col :span='12'>
+							<el-form-item label='节点成员：'>
+								<el-input v-model='form.memna' @click='openOrgModal' readonly :suffix-icon='Search'/>
+								<OrgModal ref='orgModal' @close='closeOrgModal'/>
+							</el-form-item>
+						</el-col>
+						<el-col :span='6'>
+							<el-form-item label='排序号：'>
+								<el-input-number v-model='form.ornum' controls-position='right' style='width: 100%'/>
+							</el-form-item>
+						</el-col>
+						<el-col :span='6'>
+							<el-form-item label='是否启用：'>
+								<el-switch v-model='form.avtag'>
+								</el-switch>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row style='height: 48px' v-show='form.crtim'>
+						<el-col :span='12'>
+							<el-form-item label='创建时间：'>
+								{{ form.crtim }}
+							</el-form-item>
+						</el-col>
+						<el-col :span='12'>
+							<el-form-item label='更新时间：'>
+								{{ form.uptim }}
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-row style='height: 48px'>
+						<el-col :span='24'>
+							<el-form-item label='备注：'>
+								<el-input v-model='form.notes' type='textarea'/>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>
+		</template>
+		<template #footer>
+			<div style='flex: auto;margin: 20px'>
+				<el-button type='primary' @click='confirm'>确认</el-button>
+				<el-button @click='state.show = false'>取消</el-button>
+			</div>
+		</template>
+	</el-drawer>
+</template>
+
+<script lang='ts' setup>
+import {onMounted, reactive, ref, toRefs} from 'vue';
+import {Search} from '@element-plus/icons-vue';
+import {drawerOpen, drawerSave} from '/@/comps/page/edit';
+import {FormInstance} from "element-plus";
+import ParentModal from '/@/comps/gen/GenModal.vue';
+import OrgModal from '/@/comps/sys/OrgModal.vue';
+
+const formRef = ref<FormInstance>();
+
+const state = reactive({
+	url: '/sys/org/tnode', show: false,
+	form: {
+		avtag: true,
+		catag: true,
+		shtag: true,
+	} as any,
+});
+
+const {form} = toRefs(state);
+
+//暴露open方法给父组件调用
+const open = async (data: any) => {
+	if (!data.id) {
+		if (data.pid) {
+			state.form = {
+				avtag: true,
+				pid: data.pid,
+			};
+			state.show = true;
+		} else {
+			state.form = {
+				avtag: true,
+			};
+			state.show = true;
+		}
+	} else if (data.id) {
+		await drawerOpen({state, id:data.id});
+		if(state.form.member){
+			state.form.memid=state.form.member.id;
+			state.form.memna=state.form.member.name;
+		}
+	}
+};
+defineExpose({open});
+
+//取得父组件listQuery方法的调用权
+const emits = defineEmits(['nodeRefresh']);
+const confirm = async () => {
+	await drawerSave({formRef:formRef.value, state});
+	emits('nodeRefresh');
+};
+
+
+//页面初始化
+
+onMounted(() => {
+
+});
+
+
+//region -----上级节点选择逻辑-----
+const parentModal = ref();
+
+const openParentModal = () => {
+	parentModal.value.openModal({reload:true,params:{treid:state.form.treid}});
+};
+
+const closeParentModal = (node: any) => {
+	form.value.pid = node.id;
+	form.value.parna = node.name;
+	form.value.parent = node;
+};
+//endregion
+
+
+//region a 部门选择逻辑
+const orgModal = ref();
+
+const openOrgModal = () => {
+	orgModal.value.openModal({orgType: 15});
+};
+
+const closeOrgModal = (data: any) => {
+	if (data.orgs && data.orgs.length > 0) {
+		form.value.member = {id: data.orgs[0].id, name: data.orgs[0].name};
+		form.value.memna = data.orgs[0].name;
+		form.value.memid = data.orgs[0].id;
+	}
+};
+//endregion
+
+
+
+</script>
+
+<style scoped>
+</style>

src/pages/sys/org/tier/node_tree.vue

@@ -0,0 +1,138 @@
+<template>
+	<el-card class='box-card' style='height: 100%;' body-style='height: 100%;overflow: auto'>
+		<template #header>
+			<div class='card-header'>
+				<div class='tree-h-flex'>
+					<div class='tree-h-left'>
+						<el-input :prefix-icon='Search' v-model='filterText' placeholder='节点名称' />
+					</div>
+					<div class='tree-h-right'>
+						<el-dropdown @command='handleCommand'>
+              <el-button style='margin-left: 8px;width: 34px'>
+								<el-icon class='el-icon--center'>
+									<more-filled />
+								</el-icon>
+							</el-button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item command='expandAll'>全部展开</el-dropdown-item>
+									<el-dropdown-item command='collapseAll'>全部折叠</el-dropdown-item>
+                  <el-dropdown-item command='rootNode'>根节点</el-dropdown-item>
+									<el-dropdown-item command='refresh'>刷新</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+			</div>
+		</template>
+		<div style='margin-bottom: 45px'>
+			<el-tree ref='treeRef' class='filter-tree' :data='state.data' :props='defaultProps' :filter-node-method='filterNode' @node-click="nodeClick"/>
+		</div>
+	</el-card>
+</template>
+
+<script lang='ts' setup>
+import { defineExpose, onMounted, reactive, ref, watch } from 'vue';
+import type { ElTree } from 'element-plus';
+import { Search, MoreFilled } from '@element-plus/icons-vue';
+import request from '/@/utils/request';
+
+
+interface Tree {
+	id: number;
+	name: string;
+	children?: Tree[];
+}
+
+const filterText = ref('');
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+
+const defaultProps = {
+	children: 'children',
+	label: 'name',
+};
+
+watch(filterText, (val) => {
+	treeRef.value!.filter(val);
+});
+
+const filterNode = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.name.includes(value);
+};
+
+
+const state = reactive({
+	data: [] as any,
+	willInit:true
+});
+
+
+const handleCommand =async (command: string | number | object) => {
+	if ('expandAll' == command) {
+		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
+			treeRef.value!.store._getAllNodes()[i].expanded = true;
+		}
+	} else if ('collapseAll' == command) {
+		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
+			treeRef.value!.store._getAllNodes()[i].expanded = false;
+		}
+	}else if('refresh' == command){
+    await initTreeData();
+  }else if('rootNode' == command){
+    emits('node-click', { id: '', name: '' });
+  }
+};
+
+
+// // 初始化表格数据
+const initTreeData = async () => {
+	state.data = await request({
+		url: '/sys/org/tnode/tree',
+		method: 'get',
+	});
+
+};
+
+const props = defineProps({
+	maInit: Boolean,
+});
+
+onMounted(() => {
+	if(props.maInit==false){
+		initTreeData();
+	}
+});
+
+
+//region 与父组件的交互逻辑
+const emits = defineEmits(['node-click']);
+const nodeClick = (node:any) => {
+	emits('node-click', { id: node.id, name: node.name });
+};
+
+const init = async () => {
+	await initTreeData();
+};
+defineExpose({ init });
+
+
+//endregion
+</script>
+<style scoped>
+.tree-h-flex {
+	display: flex;
+}
+
+.tree-h-left {
+	flex: 1;
+	width: 100%;
+}
+
+.tree-h-right {
+  width: 42px;
+  min-width: 42px;
+}
+</style>

src/pages/sys/org/tier/tree.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <el-card class='box-card'>
+      <template #header>
+        <el-row>
+          <el-col :span='14'>
+            <el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)'/>
+            <el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
+            <el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
+          </el-col>
+          <el-col :span='10' style='text-align: right'>
+            <el-button type='success' :icon='Plus' @click='tabAdd(state.url)' plain>新增</el-button>
+            <el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
+          </el-col>
+        </el-row>
+        <div v-show='state.moreParams' class='more-params'>
+          <el-form :inline='true' label-width='100px'>
+            <el-form-item label='更多参数1'>
+              <el-input v-model='state.form.xxx' placeholder='更多参数1'/>
+            </el-form-item>
+            <el-form-item label='更多参数2'>
+              <el-input v-model='state.form.yyy' placeholder='更多参数2'/>
+            </el-form-item>
+            <el-form-item/>
+          </el-form>
+        </div>
+      </template>
+
+      <el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
+                v-loading='state.loading' :data='state.list'
+                border stripe @selection-change='listSelect($event,state)'>
+        <el-table-column type='selection' width='55' align='center'/>
+        <el-table-column label='序号' type='index' width='55' align='center'/>
+        <el-table-column label='层级树名称' width='160'>
+          <template #default='scope'>
+						<span style='cursor:pointer;color: #3e9ece' @click='editNode(scope.row.id)'>
+							{{ scope.row.name }}
+						</span>
+          </template>
+        </el-table-column>
+        <el-table-column label='备注' prop='notes'/>
+        <el-table-column label='创建时间' prop='crtim' width='160'/>
+        <el-table-column label='更新时间' prop='uptim' width='160'/>
+				<el-table-column label='操作' prop='notes' width='46' align='center'>
+					<template #default='scope'>
+						<el-icon :size='18' style='top:3px;color: #972fcb;cursor: pointer' @click='tabEdit(state.url,scope.row.id)' title="修改">
+							<Edit/>
+						</el-icon>
+					</template>
+				</el-table-column>
+      </el-table>
+
+      <el-pagination
+          @size-change='listQuery(state)' @current-change='listQuery(state)'
+          class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
+          :total='state.total' v-model:current-page='state.form.page'
+          v-model:page-size='state.form.pageSize'
+          layout='total, sizes, prev, pager, next, jumper'
+      />
+    </el-card>
+  </div>
+</template>
+
+<script lang='ts' setup>
+import {Plus, Delete, ArrowDown, ArrowUp,Edit} from '@element-plus/icons-vue';
+import {onMounted, reactive} from 'vue';
+import {listQuery, listDelete, tabAdd, tabEdit, listSelect} from '/@/comps/page';
+import router from '/@/router';
+
+const state = reactive({
+  url: '/sys/org/ttree', loading: true, ids: [],
+  form: {}, single: true, multiple: true, list: [], total: 0,
+});
+
+onMounted(() => {
+  listQuery(state);
+});
+
+const editNode=async (id:string)=>{
+	await router.push({
+		path: '/sys/org/tnode',
+		query: { id: id },
+	});
+}
+</script>

src/pages/sys/org/tier/tree_edit.vue

@@ -0,0 +1,133 @@
+<template>
+	<el-card class='box-card' :body-style="{padding:'2px 8px'}" shadow='never'>
+		<template #header>
+			<el-row>
+				<el-col :span='10'>
+					<div style='line-height: 32px'>层级树编辑</div>
+				</el-col>
+				<el-col :span='14' style='text-align: right'>
+					<el-button type='success' @click='tabSave({formRef,state,proxy,route})' plain>保 存</el-button>
+					<el-button type='info' @click='tabClose({proxy,route})' plain>关 闭</el-button>
+				</el-col>
+			</el-row>
+		</template>
+		<div style='margin-top: 8px;margin-bottom: 8px'>
+			<el-form ref='formRef' :inline='true' class='yform' :model='form' label-width='140px'>
+				<el-tabs type='card' v-model='activeName'>
+					<el-tab-pane label='基本信息' name='tab1'>
+						<div class='yform-div'>
+							<el-form-item label='层级树名称：' prop='name' style='width:100%' :rules="[{ required: true, message: '名称不能为空'}]">
+								<el-input v-model='form.name' />
+							</el-form-item>
+							<el-form-item label='层级角色：' style='width: 100%'>
+								<el-table size='small' border :data='form.roles' :row-style="{height: '36px'}" style='width: 100%'>
+									<el-table-column label='排序号' width='90'>
+										<template #default='scope'>
+											<el-input-number v-model='scope.row.ornum' controls-position='right' style='width: 100%' />
+										</template>
+									</el-table-column>
+									<el-table-column label='角色名称' width='200'>
+										<template #default='scope'>
+											<el-input v-model='scope.row.name' required></el-input>
+										</template>
+									</el-table-column>
+									<el-table-column label='是否有效' width='180'>
+										<template #default='scope'>
+											<el-input v-model='scope.row.avtag'></el-input>
+										</template>
+									</el-table-column>
+									<el-table-column label='角色描述'>
+										<template #default='scope'>
+											<el-input v-model='scope.row.notes' required></el-input>
+										</template>
+									</el-table-column>
+									<el-table-column fixed='right' label='操作' width='50' align='center'>
+										<template #header>
+											<el-icon :size='22' style='top: 5px;cursor: pointer' color='#666'>
+												<ele-CirclePlus @click='addItem' />
+											</el-icon>
+										</template>
+										<template #default='scope'>
+											<el-icon :size='22' style='top: 3px;cursor: pointer'>
+												<ele-CircleClose @click='form.roles.splice(scope.$index, 1)' />
+											</el-icon>
+										</template>
+									</el-table-column>
+								</el-table>
+							</el-form-item>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label='其他信息' name='tab9'>
+						<div class='yform-div'>
+							<el-form-item label='备注：' style='width: 100%'>
+								<el-input type='textarea' :rows='4' v-model='form.notes' />
+							</el-form-item>
+							<el-form-item label='创建人：' style='width: 25%'>
+								{{ form.crman ? form.crman.name : '' }}
+							</el-form-item>
+							<el-form-item label='创建时间：' style='width: 25%'>
+								<div class='zinput'> {{ form.crtim }}</div>
+							</el-form-item>
+							<el-form-item label='更新人：' style='width: 25%'>
+								{{ form.upman ? form.upman.name : '' }}
+							</el-form-item>
+							<el-form-item label='更新时间：' style='width: 25%'>
+								<div class='zinput'> {{ form.uptim }}</div>
+							</el-form-item>
+						</div>
+					</el-tab-pane>
+				</el-tabs>
+			</el-form>
+		</div>
+		<OrgModal ref='orgModal' @close='closeOrgModal' />
+		<Amap ref='amapRef' @close='closeAmap' />
+	</el-card>
+</template>
+<script lang='ts'>
+export default { name: 'SysOrgTierEdit}' };
+</script>
+<script lang='ts' setup>
+import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
+import { editInit, tabSave, tabClose } from '/@/comps/page/edit';
+import { useRoute } from 'vue-router';
+import {  FormInstance } from 'element-plus';
+import { uuid } from '/@/utils/xutil';
+
+const route = useRoute();
+const formRef = ref<FormInstance>();
+const { proxy } = getCurrentInstance() as any;
+const activeName = ref('tab1');
+
+const state = reactive({
+	url: '/sys/org/ttree', cates: [] as any, levels: [] as any,
+	params: { path: '', query: '' },
+	form: { avtag: true, roles: [] as any, }
+});
+
+const { form } = toRefs(state);
+
+onMounted(async () => {
+	await editInit({ state, route });
+});
+
+
+//region -----层级角色逻辑-----
+const addItem = () => {
+	let newOrnum = 1;
+	if (form.value.roles.length > 0) {
+		newOrnum = form.value.roles[form.value.roles.length - 1].ornum + 1;
+	}
+	if (form.value.id) {
+		form.value.roles.push({
+			id: uuid(), tieid: form.value.id, ornum: newOrnum,
+		});
+	} else {
+		form.value.roles.push({
+			id: uuid(), ornum: newOrnum,
+		});
+	}
+};
+//endregiton
+
+
+</script>

src/pages/sys/portal/menu/edit.vue

@@ -1,5 +1,4 @@
 <template>
-
   <el-drawer v-model='state.show' size='70%'>
     <template #title>
       <h4>菜单信息</h4>

src/router/sysRoute.ts

@@ -153,6 +153,51 @@ export const sysRoutes: Array<RouteRecordRaw> = [
 							icon: 'iconfont icon-caidan',
 						},
 					},
+					{
+						path: '/sys/org/ttree',
+						name: 'SysOrgTtree',
+						component: () => import('/@/pages/sys/org/tier/tree.vue'),
+						meta: {
+							title: '层级管理',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'ele-Cherry',
+						},
+					},
+					{
+						path: '/sys/org/ttree/edit',
+						name: 'SysOrgTtreeEdit',
+						component: () => import('/@/pages/sys/org/tier/tree_edit.vue'),
+						meta: {
+							title: '层级树编辑',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-caidan',
+						},
+					},
+					{
+						path: '/sys/org/tnode',
+						name: 'SysOrgTnode',
+						component: () => import('/@/pages/sys/org/tier/node.vue'),
+						meta: {
+							title: '层级节点配置',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							roles: ['admin'],
+							icon: 'iconfont icon-caidan',
+						},
+					},
 				],
 			},
 			{