feat: 审批加入下一节点审批人

src/views/approve/components/consentOrRefuseDialog.vue

@@ -17,9 +17,17 @@
 				<el-input v-model="form.content" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
 			</el-form-item>
 
-			<el-form-item label="下一节点审批人" prop="assigneeMap" v-if="nodeModels.length">
-				<div v-for="(item, index) in nodeModels" :key="index">
-					<FlowNodeAvatar v-for="(childItem, childIndex) in item.nodeAssigneeList" :key="childIndex" :name="childItem.name" style="margin-top: 5px" />
+			<el-form-item v-if="nodeModelsData.length" label="下一节点审批人" prop="assigneeMap" required :rules="[{ required: true, message: '请选择下一节点审批人' }]">
+				<div v-for="(item, index) in nodeModelsData" :key="index" class="flex">
+					<div v-if="item.selectMode" class="mr-2">
+						<el-tooltip content="添加用户" placement="bottom">
+							<el-button style="width: 32px" @click="selectHandler(item, 1)">
+								<svg-icon style="font-size: 18px" icon-class="flow-user-add" />
+							</el-button>
+						</el-tooltip>
+					</div>
+
+					<FlowNodeAvatar v-for="(childItem, childIndex) in item.nodeAssigneeList" :key="childIndex" :name="childItem.name" />
 				</div>
 			</el-form-item>
 
@@ -50,16 +58,25 @@
 				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
 			</span>
 		</template>
+
+		<!--  选择人员/角色-->
+		<use-select
+			ref="useSelectRef"
+			v-bind="active_selectOpts"
+			:max-selected="maxSelectedLength"
+			@update:selected="updateActive_assigneeMap"
+		></use-select>
 	</el-dialog>
 </template>
 
 <script setup>
-import { computed, reactive, ref, watch, toRefs } from 'vue'
+import { computed, reactive, watch, toRefs } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import { nextNodesApi, processConsentTaskApi, processPreviousNodeNameApi, processRejectionTaskApi } from '@/api/flow/processTask'
 import { ElMessage } from 'element-plus'
 import { debounce } from 'lodash-es'
+import UseSelect from '@/components/scWorkflow/select.vue'
 
 const props = defineProps({
 	// 弹窗是否显示
@@ -95,7 +112,8 @@ const props = defineProps({
 const buttonLabels = ['同意', '已阅', '收到', '已核对', '合格', '情况属实', '确认', '已复核', '知悉', '辛苦了', '已安排']
 const form = reactive({
 	nodeKey: undefined,
-	content: ''
+	content: '',
+	assigneeMap: null
 	// attachment: []
 })
 const datas = reactive({
@@ -103,46 +121,25 @@ const datas = reactive({
 	uploadLoading: false,
 	rollbackOptions: [],
 	btnDisabled: false,
-	nodeModels: []
+	nodeModelsData: [],
+	active_selectOpts: {},
+	useSelectRef: null,
+	active_assigneeKey: null,
+	maxSelectedLength: 1
 })
-const { formRef, uploadLoading, rollbackOptions, btnDisabled, nodeModels } = toRefs(datas)
-
+const {
+	formRef,
+	uploadLoading,
+	rollbackOptions,
+	btnDisabled,
+	nodeModelsData,
+	active_selectOpts,
+	useSelectRef,
+	active_assigneeKey,
+	maxSelectedLength
+} = toRefs(datas)
 const $myEmit = defineEmits(['update:modelValue', 'successCb'])
 
-const submitForm = debounce(() => {
-	const formData = { taskId: props.taskId, ...props.formData, ...form }
-	formRef.value
-		.validate()
-		.then(async valid => {
-			if (valid) {
-				btnDisabled.value = true
-				const isAgree = props.currentType === 'agree'
-				let data = null
-				if (isAgree) {
-					// 同意
-
-					data = await processConsentTaskApi(formData)
-				} else {
-					// 拒绝
-					data = await processRejectionTaskApi(formData)
-				}
-				if (!data) {
-					ElMessage({
-						message: '执行失败',
-						type: 'error'
-					})
-					return false
-				}
-				$myEmit('successCb')
-				closeDialog()
-				btnDisabled.value = false
-			}
-		})
-		.catch(err => {
-			btnDisabled.value = false
-		})
-})
-
 const closeDialog = () => {
 	$myEmit('update:modelValue', false)
 }
@@ -174,7 +171,7 @@ const appendToApprovalComments = label => {
 
 const getNextNodesEv = async params => {
 	const { nodeModels } = await nextNodesApi(params)
-	nodeModels.value = (nodeModels.length && nodeModels) || []
+	nodeModelsData.value = nodeModels || []
 	/**
 	 * "nodeModels": [
             {
@@ -192,6 +189,67 @@ const getNextNodesEv = async params => {
         "nodeType": 1
 	 */
 }
+const findNodeByKey = nodeKey => {
+	return nodeModelsData.value.find(node => node.nodeKey === nodeKey)
+}
+
+const validateNodeAssigneeLists = () => {
+	return nodeModelsData.value.every(node => node.nodeAssigneeList.length > 0)
+}
+
+const updateActive_assigneeMap = assignees => {
+	const _cur = findNodeByKey(active_assigneeKey.value)
+	if (_cur) {
+		_cur.nodeAssigneeList = assignees
+	}
+}
+const selectHandler = (item, type) => {
+	// selectMode: 1 自选一人 2 自选两人
+	// nodeModelsData.value数组中查找和nodeKey相匹配的对象值
+	const foundNode = findNodeByKey(item.nodeKey)
+	let config = foundNode ? { assignees: foundNode.nodeAssigneeList, type } : { assignees: [], type }
+	active_assigneeKey.value = item.nodeKey
+	active_selectOpts.value = config.selectOpts || {}
+	maxSelectedLength.value = item.selectMode
+	useSelectRef.value.open(type, config.assignees)
+}
+
+const submitForm = debounce(() => {
+	const isAgree = props.currentType === 'agree'
+	if (isAgree) {
+		const areAllAssigneeListsValid = validateNodeAssigneeLists()
+		form.assigneeMap = !areAllAssigneeListsValid ? null : nodeModelsData.value
+	}
+	const formData = { taskId: props.taskId, ...props.formData, ...form }
+	formRef.value
+		.validate()
+		.then(async valid => {
+			if (valid) {
+				btnDisabled.value = true
+				let data = null
+				if (isAgree) {
+					// 同意
+					data = await processConsentTaskApi(formData)
+				} else {
+					// 拒绝
+					data = await processRejectionTaskApi(formData)
+				}
+				if (!data) {
+					ElMessage({
+						message: '执行失败',
+						type: 'error'
+					})
+					return false
+				}
+				$myEmit('successCb')
+				closeDialog()
+				btnDisabled.value = false
+			}
+		})
+		.catch(err => {
+			btnDisabled.value = false
+		})
+})
 
 // 驳回 && rejectStrategy === 3
 watch(