feat: ScWorkflow 审核人/发起人自选/新增 候选人&候选角色功能 调整 select 参数传递

src/components/scWorkflow/index.vue

@@ -8,7 +8,13 @@
 		<div class="box-scale" :style="`transform: scale(${zoom / 100})`">
 			<node-wrap v-if="nodeConfig" v-model="nodeConfig" :disabled="disabled"></node-wrap>
 		</div>
-		<use-select v-if="selectVisible" ref="useselect" @update:selected="update_activeSelected" @closed="selectVisible = false"></use-select>
+		<use-select
+			v-if="selectVisible"
+			v-bind="active_selectOpts"
+			ref="useselect"
+			@update:selected="update_activeSelected"
+			@closed="selectVisible = false"
+		></use-select>
 	</div>
 </template>
 
@@ -47,6 +53,10 @@ export default {
 			zoom: 100,
 			nodeConfig: this.modelValue,
 			selectVisible: false,
+			active_selectOpts: {
+				// maxSelected
+				// minSelected
+			},
 			activeSelected: [] /*,
 			end_nodeConfig: {
 				nodeName: '结束'
@@ -75,11 +85,13 @@ export default {
 		update_activeSelected(newSelected) {
 			this.activeSelected.splice(0, this.activeSelected.length, ...newSelected)
 		},
-		selectHandle(type, data) {
+		selectHandle(type, params) {
+			// params: { assignees:{name, id}[], maxSelected: number, minSelected: number, ...others}
+			this.active_selectOpts = params
+			this.activeSelected = params.assignees
 			this.selectVisible = true
-			this.activeSelected = data
 			this.$nextTick(() => {
-				this.$refs.useselect.open(type, data)
+				this.$refs.useselect.open(type, params.assignees)
 			})
 		},
 		onZoom(n) {

src/components/scWorkflow/nodes/addNode.vue

@@ -74,6 +74,8 @@ export default {
 					type: 1, //节点类型
 					setType: 1, //审核人类型
 					nodeAssigneeList: [], //审核人成员 & 角色
+					// {type: (1用户,2角色,3部门), assignees: 同nodeAssigneeList}
+					nodeCandidate: { type: 1, assignees: [] }, //审核人-发起人自选-候选人 & 候选角色
 					examineLevel: 1, //指定主管层级
 					directorLevel: 1, //自定义连续主管审批层级
 					selectMode: 1, //发起人自选类型

src/components/scWorkflow/nodes/approver.vue

@@ -68,7 +68,7 @@
 												<span>审批人员类型</span>
 											</div>
 											<div class="main-content">
-												<el-radio-group v-model="form.setType" class="main-content-radio">
+												<el-radio-group :modelValue="form.setType" @change="setTypeChange" class="main-content-radio">
 													<el-radio v-for="v of setTypeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
 												</el-radio-group>
 											</div>
@@ -97,11 +97,34 @@
 								</div>
 							</el-form-item>
 
-							<el-form-item v-if="form.setType === 4" label="发起人自选">
-								<el-radio-group v-model="form.selectMode">
-									<el-radio v-for="v of selectModeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
-								</el-radio-group>
-							</el-form-item>
+							<template v-if="form.setType === 4">
+								<el-form-item label="发起人自选">
+									<el-radio-group :modelValue="form.selectMode" @change="selectModeChange">
+										<el-radio v-for="v of selectModeOptions" :key="v.value" :label="v.value">{{ v.label }}</el-radio>
+									</el-radio-group>
+								</el-form-item>
+								<el-form-item v-if="[1, 2].includes(form.selectMode)" label="候选人">
+									<el-button type="primary" icon="plus" round @click="selectHandle_nodeCandidate(form.nodeCandidate)">选择人员</el-button>
+									<div class="tags-list">
+										<el-tag v-for="(user, index) in form.nodeCandidate?.assignees" :key="user.id" closable @close="delAssigneeItem(index)">{{
+											user.name
+										}}</el-tag>
+									</div>
+								</el-form-item>
+								<el-form-item v-else label="候选角色">
+									<el-button type="primary" icon="plus" round @click="selectHandle_nodeCandidate(form.nodeCandidate)">选择角色</el-button>
+									<div class="tags-list">
+										<el-tag
+											v-for="(role, index) in form.nodeCandidate?.assignees"
+											:key="role.id"
+											type="info"
+											closable
+											@close="delAssigneeItem(index)"
+											>{{ role.name }}</el-tag
+										>
+									</div>
+								</el-form-item>
+							</template>
 
 							<el-form-item v-if="form.setType === 6" label="连续主管审批终点">
 								<el-radio-group v-model="form.directorMode">
@@ -230,12 +253,14 @@ import {
 	rejectStart_options,
 	setTypeOptions,
 	selectModeOptions,
+	selectModeOptions_config,
 	approveSelfOptions,
 	directorModeOptions,
 	examineModeOptions,
 	setTypeOptions_config
 } from './config'
 import { ElMessage } from 'element-plus'
+
 export default {
 	components: {
 		addNode,
@@ -273,19 +298,6 @@ export default {
 	watch: {
 		modelValue() {
 			this.nodeConfig = this.modelValue
-		},
-		'form.setType': {
-			handler(type, oldType) {
-				// console.error(type, 'type, oldType', oldType)
-				if ([1, 3].includes(oldType)) {
-					// 上次setType 为 选择成员 or 角色时 对 nodeAssigneeList 重置
-					this.form.nodeAssigneeList = []
-				}
-				if ([5].includes(oldType)) {
-					// 上次setType 为 选择成员 or 角色时 对 nodeAssigneeList 重置
-					this.form.actionUrl = []
-				}
-			}
 		}
 	},
 	mounted() {
@@ -363,6 +375,19 @@ export default {
 			} else if (_form.setType === 3) {
 				// 选择角色
 				if (!_form.nodeAssigneeList || !_form.nodeAssigneeList.length) return this.$message.warning('请选择角色')
+			} else if (_form.setType === 4) {
+				// 发起人自选
+				const config = selectModeOptions_config[this.form.selectMode] || {} // limit: {minSelected, maxSelected}
+				const assignees = _form.nodeCandidate.assignees
+				if (assignees && assignees.length) {
+					// 自选一个人
+					if (_form.selectMode === 1) {
+						if (assignees.length && assignees.length > 1) return this.$message.warning('自选一个人,只能选一个')
+					} else {
+						// 自选多人/自选角色 需要2人以上
+						if (assignees.length && assignees.length < 2) return this.$message.warning(`${config.label},只能选两个以上`)
+					}
+				}
 			}
 			if (_form.actionUrl && _form.actionUrl.length) {
 				// _form.actionUrl = _form.actionUrl[0]
@@ -383,12 +408,51 @@ export default {
 		delRole(index) {
 			this.form.nodeAssigneeList.splice(index, 1)
 		},
+		delAssigneeItem(index) {
+			this.form.nodeCandidate.assignees.splice(index, 1)
+		},
 		delFormTemplate(index) {
 			this.form.actionUrl.splice(index, 1)
 		},
-		selectHandle(type, data) {
+		selectHandle(type, assignees) {
+			// type: 1人员, 3角色 5子表单
+			this.select(type, { assignees })
+		},
+		selectHandle_nodeCandidate(nodeCandidate) {
+			// form.nodeCandidate: {type: 1|2, assignees: {name, id}[]}
+			const limit = selectModeOptions_config[this.form.selectMode]?.limit || {} // {minSelected, maxSelected}
 			// type: 1人员, 3角色 5子表单
-			this.select(type, data)
+			this.select(nodeCandidate.type, { ...nodeCandidate, ...limit })
+		},
+		selectModeChange(mode) {
+			const oldMode = this.form.selectMode
+			this.form.selectMode = mode
+			// console.error(mode, oldMode, 'mode, oldMode')
+			if (!this.form.nodeCandidate) {
+				this.form.nodeCandidate = {}
+			}
+			// 1:用户 2:角色 (3:部门)
+			this.form.nodeCandidate.type = [1, 2].includes(mode) ? 1 : 2
+			const isSameMode = [1, 2].includes(mode) && [1, 2].includes(oldMode)
+			if (!isSameMode) {
+				// selectMode 变化 对 assignees 重置
+				this.form.nodeCandidate.assignees = []
+			}
+		},
+		setTypeChange(setType) {
+			// console.error(type, 'type, oldType', oldType)
+			const oldType = this.form.setType
+			this.form.setType = setType
+			if ([1, 3].includes(oldType)) {
+				// 上次setType 为  1:选择成员 or 3:角色 对 nodeAssigneeList 重置
+				this.form.nodeAssigneeList = []
+			} else if (oldType === 4) {
+				// 4: 发起人自选 重置
+				this.form.nodeCandidate = {}
+			} else if ([5].includes(oldType)) {
+				// 发起人自己 对 actionUrl 重置
+				this.form.actionUrl = []
+			}
 		},
 		toText(nodeConfig) {
 			const type = nodeConfig.setType

src/components/scWorkflow/nodes/config.ts

@@ -93,16 +93,30 @@ export const setTypeOptions_config = setTypeOptions.reduce((res: { [key: string]
 export const selectModeOptions = [
 	{
 		label: '自选一个人',
-		value: 1
+		value: 1,
+		limit: {
+			minSelected: 1,
+			maxSelected: 1
+		}
 	},
 	{
 		label: '自选多个人',
-		value: 2
+		value: 2,
+		limit: {
+			minSelected: 2
+		}
+	},
+	{
+		label: '自选角色',
+		value: 3,
+		limit: {
+			minSelected: 2
+		}
 	}
 ]
 
-export const selectModeOptions_config = selectModeOptions.reduce((res: { [key: string]: any }, { label, value }) => {
-	res[value] = label
+export const selectModeOptions_config = selectModeOptions.reduce((res: { [key: string]: any }, obj) => {
+	res[obj.value] = obj
 	return res
 }, {})
 

src/components/scWorkflow/nodes/promoter.vue

@@ -129,8 +129,8 @@ export default {
 		saveTitle() {
 			this.isEditTitle = false
 		},
-		selectHandle(type, data) {
-			this.select(type, data)
+		selectHandle(type, assignees) {
+			this.select(type, { assignees })
 		},
 		delRole(index) {
 			this.form.nodeAssigneeList.splice(index, 1)

src/components/scWorkflow/nodes/send.vue

@@ -128,8 +128,8 @@ export default {
 		delUser(index) {
 			this.form.nodeAssigneeList.splice(index, 1)
 		},
-		selectHandle(type, data) {
-			this.select(type, data)
+		selectHandle(type, assignees) {
+			this.select(type, { assignees })
 		},
 		toText(nodeConfig) {
 			if (nodeConfig.nodeAssigneeList && nodeConfig.nodeAssigneeList.length > 0) {

src/todo.txt

@@ -1,2 +0,0 @@
-1/ 刷新 时 调用 获取用户接口 更新用户信息系
-2/ 更新动态路由