选着人员

src/api/displayboardapi/indexapi.ts

@@ -1,6 +1,6 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser } from './types';
+import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser,orgAndPeople } from './types';
 /**
  * 获取离职率
  */
@@ -61,3 +61,12 @@ import { dimissionRateQuery,publicId,eduStruCont,sendOrgCont,outputOrgAndUser }
 	  data: data
 	});
 }
+
+//获取组织及成员(新版)
+export const getOrgEveryonePeople = (data?: publicId): AxiosPromise<orgAndPeople[]> => {
+    return request({
+        url: '/org/get_org_everyone_people',
+        method: 'post',
+        data: data
+    })
+}

src/api/displayboardapi/types.ts

@@ -57,11 +57,11 @@ export interface eduStruCont{
  * 面包屑
  */
 export interface breadCrumbs{
-	departmentId:string // "309",
-	id:string // "309",
-	departmentKey:string // "GK00",
-	departmentName:string // "山东恒信高科能源有限公司",
-	parentId:string // "313",
+	departmentId:string // "309";
+	id:string // "309";
+	departmentKey:string // "GK00";
+	departmentName:string // "山东恒信高科能源有限公司";
+	parentId:string // "313";
 	departmentNames:string // "山东恒信高科能源有限公司"
 }
 /**
@@ -73,26 +73,48 @@ export interface outputOrgAndUser{
 	titleDepartments:breadCrumbs[];
 }
 export interface employeesCont{
-	id:string //"95196156539179008",
-	employeeName:string //"胡齐帅",
-	isLeave:string //"0",
-	open:boolean //"false",
-	icon:string //"",
-	iconToBase64:string //"",
-	wechat:string //"",
-	departmentid:number //102,
-	departmentname:string //"企管部",
-	postid:number //798,
-	postname:string //"岗监员",
-	tema:number //0,
+	id:string //"95196156539179008";
+	employeeName:string //"胡齐帅";
+	isLeave:string //"0";
+	open:boolean //"false";
+	icon:string //"";
+	iconToBase64:string //"";
+	wechat:string //"";
+	departmentid:number //102;
+	departmentname:string //"企管部";
+	postid:number //798;
+	postname:string //"岗监员";
+	tema:number //0;
 	temaname:string //""
 	ispick:boolean //
 }
 export interface childDepartmentsCont{
-	id:string; //"103",
-	departmentKey:string; //"GK0302",
-	departmentName:string; //"IT",
-	parentId:string; //"102",
+	id:string; //"103";
+	departmentKey:string; //"GK0302";
+	departmentName:string; //"IT";
+	parentId:string; //"102";
 	departmentNames:string; //"IT"
 	isActiveItem:boolean; //
 }
+
+//行政组织树及相关人员(新版) 结构体
+export interface orgAndPeople{
+	id: string;
+	orgid: number;
+	number: string;
+	name: string;
+	superior: string;
+	icon: string;
+	icon_photo: string;
+	type: number;
+	key: string;
+	sort: number;
+	wechat: string;
+	departmentid: number;
+	departmentname: string;
+	postid: number;
+	postname: string;
+	tema: number;
+	temaname: string;
+	child:orgAndPeople[];
+}

src/components/workflow/addNode.vue

@@ -13,7 +13,7 @@ let props = defineProps({
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
 //添加节点
-const addType = (type)=> {
+const addType = (type:any)=> {
     visible.value = false;
     if (type != 4) {
         var data;

src/components/workflow/dialog/common.ts

@@ -0,0 +1,19 @@
+import $func from '@/utils/workflow/index'
+
+import { outputOrgAndUser } from '@/api/displayboardapi/types'
+import { getBasisOrgChiled } from '@/api/displayboardapi/indexapi'
+
+
+export let searchVal = ref<any>('')
+export let departments = ref<outputOrgAndUser>()
+export let roles = ref({})
+
+//获取行政组织及人员
+export let getDepartmentList = async (parentId:any = 0) => {
+	if(parentId == 0){
+		parentId = 309
+	}
+	let { data } = await getBasisOrgChiled({ id:parentId.toString() })
+	console.log("data---->",data)
+	departments.value = data;
+}

src/components/workflow/dialog/employeesDialog.vue

@@ -4,6 +4,14 @@
 @ 备注: 人员选择
 -->
 <script lang='ts' setup>
+import { departments, getDepartmentList,searchVal } from '@/components/workflow/dialog/common'
+import $func from '@/utils/workflow/index'
+//引入样式
+import '@/styles/workflowcss/dialog.scss'
+//引入页面
+import selectBox from '@/components/workflow/selectBox.vue'
+import selectResult from '@/components/workflow/selectResult.vue'
+
 let props = defineProps({
   visible: {
     type: Boolean,
@@ -28,19 +36,100 @@ let visibleDialog = computed({
   }
 });
 let checkedDepartmentList = ref([])
-let checkedEmployessList = ref([])
-let saveDialog = ()=> {
+let checkedEmployessList = ref<any>([])
+//被选择项列表
+let list = computed(()=> {
+  return [{
+    isDepartment: props.isDepartment,
+    type: 'department', 
+    data: departments.value.childDepartments, 
+    isActive: (item)=> $func.toggleClass(checkedDepartmentList.value, item),
+    change: (item)=> $func.toChecked(checkedDepartmentList.value, item),
+    next: (item)=> getDepartmentList(item.id)
+  },{
+    type: 'employee', 
+    data: departments.value.employees, 
+    isActive: (item)=> $func.toggleClass(checkedEmployessList.value, item),
+    change: (item)=> $func.toChecked(checkedEmployessList.value, item),
+  }]
+})
+let resList = computed(()=>{
+  let data = [{
+    type: 'employee', 
+    data: checkedEmployessList.value, 
+    cancel: (item)=> $func.removeEle(checkedEmployessList.value, item)
+  }]
+  if(props.isDepartment){
+    data.unshift({
+      type: 'department',
+      data: checkedDepartmentList.value,
+      cancel: (item)=> $func.removeEle(checkedDepartmentList.value, item)
+    })
+  }
+  return data
+})
 
+let saveDialog = ()=> {
+	let checkedList = [
+    ...checkedDepartmentList.value,
+    ...checkedEmployessList.value
+  ].map(item=>({
+    type: item.employeeName ? 1: 3,
+    targetId: item.id,
+    name: item.employeeName || item.departmentName
+  }))
+  emits('change',checkedList)
 }
 const closeDialog = ()=> {
   emits('update:visible', false)
 }
+
+watch(()=> props.visible, (val)=>{
+  if(val){
+    getDepartmentList();
+    searchVal.value = "";
+		console.log("props.data:",props.data)
+		if(props.data){
+			checkedEmployessList.value = props.data.filter(item=>item.type===1).map(({name,targetId})=>({
+				employeeName: name,
+				id: targetId
+			}));
+			checkedDepartmentList.value = props.data.filter(item=>item.type===3).map(({name,targetId})=>({
+				departmentName: name,
+				id: targetId
+			}));
+		}
+    
+  }
+})
+onMounted(()=> {
+	getDepartmentList();
+})
+let total = computed(()=> checkedDepartmentList.value.length + checkedEmployessList.value.length)
+const delList = ()=> {
+  checkedDepartmentList.value = [];
+  checkedEmployessList.value = []
+}
 </script>
 <template>
 	<el-dialog v-model="visibleDialog" title="选择成员" :width="600" append-to-body class="promoter_person">
 		<div class="person_body clear">
+			
+			<el-row>
+				<el-col :span="12">
 					<div class="person_tree l">
+						<input v-model="searchVal"  type="text" placeholder="搜索成员" @input="getDebounceData($event)">
+						<p v-if="!searchVal" class="ellipsis tree_nav">
+							<span class="ellipsis" @click="getDepartmentList(0)">全部</span>
+							<span v-for="(item,index) in departments.titleDepartments" :key="index+'a'" class="ellipsis" @click="getDepartmentList(item.id)">{{item.departmentName}}</span>   
+						</p>
+						<selectBox :list="list"/>
 					</div>
+				</el-col>
+				<el-col :span="12">
+					<selectResult :list="resList" :total="total" @del="delList"/>
+				</el-col>
+			</el-row>
 			
 			
 		</div>

src/components/workflow/dialog/errorDialog.vue

@@ -15,7 +15,6 @@ let props = defineProps({
   }
 })
 let emits = defineEmits(['update:visible'])
-
 let visibleDialog = computed({
   get() {
     return props.visible

src/components/workflow/drwer/approverDrawer.vue

@@ -14,15 +14,15 @@ let props = defineProps({
         default: 0
     }
 });
-let approverConfig = ref({})
+let approverConfig = ref<any>({})
 let approverVisible = ref(false)
 let approverRoleVisible = ref(false)
-let checkedRoleList = ref([])
-let checkedList = ref([])
+let checkedRoleList = ref<any[]>([])
+let checkedList = ref<any[]>([])
 let store = useStore()
 let { setApproverConfig, setApprover } = store
-let approverConfig1 = computed(()=> store.approverConfig1)
-let approverDrawer = computed(()=> store.approverDrawer)
+let approverConfig1 = computed(():any=> store.approverConfig1)
+let approverDrawer = computed(():any=> store.approverDrawer)
 let visible = computed({
     get(){
         return approverDrawer.value
@@ -31,13 +31,13 @@ let visible = computed({
         closeDrawer()
     }
 }) 
-watch(approverConfig1, (val)=>{
+watch(approverConfig1, (val:any)=>{
     approverConfig.value = val.value
 })
 let changeRange = ()=> {
     approverConfig.value.nodeUserList = [];
 }
-const changeType = (val)=> {
+const changeType = (val:any)=> {
     approverConfig.value.nodeUserList = [];
     approverConfig.value.examineMode = 1;
     approverConfig.value.noHanderAction = 2;
@@ -58,11 +58,11 @@ const addRoleApprover = ()=> {
     approverRoleVisible.value = true;
     checkedRoleList.value = approverConfig.value.nodeUserList
 }
-const sureApprover = (data)=> {
+const sureApprover = (data:any)=> {
     approverConfig.value.nodeUserList = data;
     approverVisible.value = false;
 }
-const sureRoleApprover = (data)=> {
+const sureRoleApprover = (data:any)=> {
     approverConfig.value.nodeUserList = data;
     approverRoleVisible.value = false;
 }

src/components/workflow/drwer/conditionDrawer.vue

@@ -32,7 +32,7 @@ let visible = computed({
         closeDrawer()
     }
 })
-watch(conditionsConfig1, (val) => {
+watch(conditionsConfig1, (val:any) => {
 	console.log("val.priorityLevel",val.priorityLevel)
     conditionsConfig.value = val.value;
     PriorityLevel.value = val.priorityLevel
@@ -163,7 +163,7 @@ const sureConditionRole = (data) => {
     conditionConfig.value.nodeUserList = data;
     conditionRoleVisible.value = false;
 }
-const closeDrawer = (val) => {
+const closeDrawer = (val?:any) => {
     setCondition(false)
 }
 </script>

src/components/workflow/nodeWrap.vue

@@ -1,3 +1,5 @@
+
+import { loginApi } from '@/api/auth';
 <!--
 @ 作者: 秦东
 @ 时间: 2023-10-10 11:30:42
@@ -56,14 +58,14 @@ const resetConditionNodesErr = () => {
     }
 }
 
-const clickEvent = (index) => {
+const clickEvent = (index:any) => {
     if (index || index === 0) {
         isInputList.value[index] = true;
     } else {
         isInput.value = true;
     }
 };
-const blurEvent = (index) => {
+const blurEvent = (index:any) => {
     if (index || index === 0) {
         isInputList.value[index] = false;
         // eslint-disable-next-line vue/no-mutating-props
@@ -93,7 +95,7 @@ const addTerm = () => {
     resetConditionNodesErr()
     emits("update:nodeConfig", props.nodeConfig);
 };
-const delTerm = (index) => {
+const delTerm = (index:any) => {
     // eslint-disable-next-line vue/no-mutating-props
     props.nodeConfig.conditionNodes.splice(index, 1);
     props.nodeConfig.conditionNodes.map((item, index) => {
@@ -114,14 +116,14 @@ const delTerm = (index) => {
         emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
     }
 };
-const reData = (data, addData) => {
+const reData = (data:any, addData:any) => {
     if (!data.childNode) {
         data.childNode = addData;
     } else {
         reData(data.childNode, addData);
     }
 };
-const setPerson = (priorityLevel) => {
+const setPerson = (priorityLevel:any) => {
     var { type } = props.nodeConfig;
     if (type == 0) {
         setPromoter(true);
@@ -157,7 +159,7 @@ const setPerson = (priorityLevel) => {
         });
     }
 };
-const arrTransfer = (index, type = 1) => {
+const arrTransfer = (index:any, type = 1) => {
     //向左-1,向右1
     // eslint-disable-next-line vue/no-mutating-props
     props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
@@ -212,11 +214,14 @@ onMounted(() => {
 		<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
 			<!--标签头部-->
 			<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">	
-				<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
+				<span v-if="nodeConfig.type == 0" class="iconfont"><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span>
 				<template v-else>
-					<span class="iconfont">{{nodeConfig.type == 1?'':''}}</span>
+					<span v-if="nodeConfig.type==1" class="iconfont"><el-icon class="nodeIcon"><Stamp /></el-icon></span>
+					<span v-if="nodeConfig.type==2" class="iconfont"><i class="fa fa-send"></i></span>
+					<span v-if="nodeConfig.type==3" class="iconfont"><i class="fa fa-pencil-square-o"></i></span>
 					<!--eslint-disable-next-line vue/no-mutating-props-->
 					<input v-if="isInput" v-model="nodeConfig.nodeName" v-focus:placeholder="defaultText" type="text" class="ant-input editable-title-input" @blur="blurEvent()" @focus="$event.currentTarget.select()" />
+					
 					<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
 					<i class="anticon anticon-close close" @click="delNode"></i>
 				</template>
@@ -291,5 +296,8 @@ onMounted(() => {
 	<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"/>
 </template>
 <style  lang='scss' scoped>
-
+.nodeIcon{
+	font-size: 20px;
+	margin-top: 5px;
+}
 </style>

src/components/workflow/selectBox.vue

@@ -0,0 +1,83 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-10-13 08:48:13
+@ 备注: 选在人员或角色通用模块
+-->
+<script lang='ts' setup>
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+<template>
+	<ul class="select-box">
+		<template v-for="(elem, i) in list" :key="i">
+			<template v-if="elem.type === 'role'">
+				<li v-for="item in elem.data" :key="item.roleId" 
+				class="check_box"
+				:class="{active: elem.isActive && elem.isActive(item), not: elem.not}" 
+				@click="elem.change(item)">
+					<a :title="item.description" :class="{active: elem.isActiveItem && elem.isActiveItem(item)}">
+						<img src="@/assets/images/icon_role.png">{{item.roleName}}
+					</a>
+				</li>
+			</template>
+			<template v-if="elem.type === 'department'">
+				<li v-for="item in elem.data" :key="item.id" class="check_box" :class="{not: !elem.isDepartment}">
+				<a v-if="elem.isDepartment" 
+					:class="elem.isActive(item) && 'active'" 
+					@click="elem.change(item)">
+					<img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
+				<a v-else><img src="@/assets/images/icon_file.png">{{item.departmentName}}</a>
+				<i @click="elem.next(item)">下级</i>
+				</li>
+			</template>
+			<template v-if="elem.type === 'employee'">
+				<li v-for="item in elem.data" :key="item.id" class="check_box">
+					<a :class="elem.isActive(item) && 'active'" 
+					@click="elem.change(item)" 
+					:title="item.departmentNames">
+					<img v-if="item.icon != ''" :src="item.icon">
+					<img v-if="item.icon == '' && item.iconToBase64 != ''" :src="item.iconToBase64">
+					<img v-if="item.icon == '' && item.iconToBase64 == ''" src="@/assets/images/icon_people.png">{{item.employeeName}}
+					</a>
+				</li>
+			</template>
+		</template>
+	</ul>
+</template>
+<style lang="less">
+.select-box {
+  height: 420px;
+  overflow-y: auto;
+
+  li {
+    padding: 5px 0;
+
+    i {
+      float: right;
+      padding-left: 24px;
+      padding-right: 10px;
+      color: #3195f8;
+      font-size: 12px;
+      cursor: pointer;
+      background: url('../../assets/images/next_level_active.png') no-repeat 10px center;
+      border-left: 1px solid rgb(238, 238, 238);
+    }
+
+    a.active+i {
+      color: rgb(197, 197, 197);
+      background-image: url('../../assets/images/next_level.png');
+      pointer-events: none;
+    }
+
+    img {
+      width: 14px;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+  }
+}
+</style>

src/components/workflow/selectResult.vue

@@ -0,0 +1,98 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-10-13 09:48:27
+@ 备注: 已选择得内容
+-->
+<script lang='ts' setup>
+defineProps({
+  total: {
+    type: Number,
+    default: 0
+  },
+  list: {
+    type: Array,
+    default: () => [{ type: 'role', data, cancel }]
+  }
+})
+let emits = defineEmits(['del'])
+</script>
+<template>
+	<div class="select-result l">
+		<p class="clear">已选（{{total}}）
+			<a @click="emits('del')">清空</a>
+		</p>
+		<ul>
+			<template v-for="({type, data, cancel}) in list" :key="type">
+				<template v-if="type === 'role'">
+					<li v-for="item in data" :key="item.roleId">
+						<img src="@/assets/images/icon_role.png">
+						<span>{{item.roleName}}</span>
+						<img src="@/assets/images/cancel.png" @click="cancel(item)">
+					</li>
+				</template>
+				<template v-if="type === 'department'">
+					<li v-for="item in data" :key="item.id">
+						<img src="@/assets/images/icon_file.png">
+						<span>{{item.departmentName}}</span>
+						<img src="@/assets/images/cancel.png" @click="cancel(item)">
+					</li>
+				</template>
+				<template v-if="type === 'employee'">
+					<li v-for="item in data" :key="item.id">
+						<img v-if="item.icon != ''" :src="item.icon">
+						<img v-if="item.icon == '' && item.iconToBase64 != ''" :src="item.iconToBase64">
+						<img v-if="item.icon == '' && item.iconToBase64 == ''"  src="@/assets/images/icon_people.png">
+						<span>{{item.employeeName}}</span>
+						<img src="@/assets/images/cancel.png" @click="cancel(item)">
+					</li>
+				</template>
+			</template>
+		</ul>
+	</div>
+</template>
+<style lang="less">
+.select-result {
+  width: 276px;
+  height: 100%;
+  font-size: 12px;
+
+  ul {
+    height: 460px;
+    overflow-y: auto;
+
+    li {
+      margin: 11px 26px 13px 19px;
+      line-height: 17px;
+
+      span {
+        vertical-align: middle;
+      }
+
+      img {
+        &:first-of-type {
+          width: 14px;
+          vertical-align: middle;
+          margin-right: 5px;
+        }
+
+        &:last-of-type {
+          float: right;
+          margin-top: 2px;
+          width: 14px;
+        }
+      }
+    }
+  }
+
+  p {
+    padding-left: 19px;
+    padding-right: 20px;
+    line-height: 37px;
+    border-bottom: 1px solid #f2f2f2;
+
+    a {
+      float: right;
+    }
+  }
+}
+</style>

src/main.ts

@@ -21,7 +21,7 @@ import 'element-plus/es/components/message/style/css';
 import 'element-plus/theme-chalk/dark/css-vars.css';
 import '@/styles/index.scss';
 import 'uno.css';
-import '@/styles/workflowcss/override-element-ui.css'
+import '@/styles/workflowcss/override-element-ui.scss'
 
 import ComComponents from '@/components/DesignForm/index'
 
@@ -39,7 +39,11 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 	app.component(key, component)
 }
 
-
+app.directive('focus', {
+	mounted(el) {
+	  el.focus();
+	}
+});
 
 app.use(router).use(i18n).use(ComComponents).use(ElementPlus, {
     locale: zhCn

src/styles/workflowcss/dialog.scss

@@ -0,0 +1,41 @@
+.person_body {
+	border: 1px solid #f5f5f5;
+	height: 500px;
+  }
+  .tree_nav span {
+	display: inline-block;
+	padding-right: 10px;
+	margin-right: 5px;
+	max-width: 6em;
+	color: #38adff;
+	font-size: 12px;
+	cursor: pointer;
+	background: url(~@/assets/images/jiaojiao.png) no-repeat right center;
+	background: url("../../assets/images/jiaojiao.png") no-repeat right center;
+  }
+  .tree_nav span:last-of-type {
+	background: none;
+  }
+  .person_tree {
+	padding: 10px 12px 0 8px;
+	width: 280px;
+	height: 100%;
+	border-right: 1px solid #f5f5f5;
+  }
+  .person_tree input {
+	padding-left: 22px;
+	width: 210px;
+	height: 30px;
+	font-size: 12px;
+	border-radius: 2px;
+	border: 1px solid #d5dadf;
+	background: url(~@/assets/images/list_search.png) no-repeat 10px center;
+	background: url("../../assets/images/list_search.png")  no-repeat 5px center;
+	background-size: 14px 14px;
+	margin-bottom: 14px;
+  }
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/views/sysworkflow/flow/index.vue

@@ -4,7 +4,7 @@
 @ 备注: 
 -->
 <script lang='ts' setup>
-import '@/styles/workflowcss/workflow.css'
+import '@/styles/workflowcss/workflow.scss'
 
 import { useStore } from '@/store/workflow/index' 
 import { tipListStrucr } from '@/api/workflowapi/types'