feat: 审批弹窗，待审批按钮弹窗

src/views/approve/components/consentOrRefuseDialog.vue

@@ -1,9 +1,7 @@
 <template>
 	<!-- 同意 拒绝 弹窗 -->
 	<el-dialog v-model="operaVisibleDialog" title="同意/拒绝审批" width="700" destroy-on-close>
-		<el-form
-			label-position="top"
-			ref="formRef" v-loading="uploadLoading" element-loading-text="图片上传中..." :model="form" label-width="80px">
+		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="审批意见" prop="review" :rules="[{ required: true, message: '审批意见不能为空' }]">
 				<el-input v-model="form.review" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
 			</el-form-item>

src/views/approve/components/reviewDialog.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 评论弹窗 -->
 	<el-dialog v-model="reviewVisibleDialog" title="评论内容" width="700" destroy-on-close>
-		<el-form label-position="top" ref="formRef" v-loading="uploadLoading" element-loading-text="图片上传中..." :model="form" label-width="80px">
+		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
 			<el-form-item label="评论" prop="review" :rules="[{ required: true, message: '评论内容不能为空' }]">
 				<el-input v-model="form.review" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
 			</el-form-item>

src/views/approve/pendingApproval/detail.vue

@@ -59,18 +59,18 @@
 
 			<template #footer>
 				<div class="flow-actions">
-					<el-button :icon="ChatLineSquare" @click="openComment">评论</el-button>
-					<el-button :icon="Check" type="success">同意</el-button>
-					<el-button :icon="Close" type="danger">拒绝</el-button>
+					<el-button :icon="ChatLineSquare" @click="openComment('reviewVisible')">评论</el-button>
+					<el-button :icon="Check" type="success" @click="openComment('consentOrRefuseVisible')">同意</el-button>
+					<el-button :icon="Close" type="danger" @click="openComment('consentOrRefuseVisible')">拒绝</el-button>
 					<el-dropdown style="margin-left: 12px">
 						<el-button :icon="More">更多</el-button>
 						<template #dropdown>
 							<el-dropdown-menu>
-								<el-dropdown-item>
+								<el-dropdown-item @click.native="openComment('deliverToReviewVisible')">
 									<el-icon><DArrowLeft /></el-icon>
 									转交
 								</el-dropdown-item>
-								<el-dropdown-item>
+								<el-dropdown-item @click.native="openComment('rollbackVisible')">
 									<el-icon><Switch /></el-icon>
 									回退
 								</el-dropdown-item>
@@ -78,7 +78,7 @@
 									<el-icon><Plus /></el-icon>
 									加签
 								</el-dropdown-item>
-								<el-dropdown-item>
+								<el-dropdown-item @click.native="openComment('loseSignVisible')">
 									<el-icon><Minus /></el-icon>
 									减签
 								</el-dropdown-item>
@@ -88,6 +88,24 @@
 				</div>
 			</template>
 		</el-drawer>
+
+		<!-- 评论弹窗-->
+		<review-dialog v-if="reviewVisible" v-model="reviewVisible"></review-dialog>
+
+		<!-- 加签弹窗 -->
+		<add-sign-dialog v-if="addSignVisible" v-model="addSignVisible"></add-sign-dialog>
+
+		<!-- 同意或拒绝弹窗 -->
+		<consent-or-refuse-dialog v-if="consentOrRefuseVisible" v-model="consentOrRefuseVisible"></consent-or-refuse-dialog>
+
+		<!-- 转交审批弹窗 -->
+		<deliver-to-review-dialog v-if="deliverToReviewVisible" v-model="deliverToReviewVisible"></deliver-to-review-dialog>
+
+		<!-- 减签弹窗 -->
+		<lose-sign-dialog v-if="loseSignVisible" v-model="loseSignVisible"></lose-sign-dialog>
+
+		<!-- 回退弹窗 -->
+		<rollback-dialog v-if="rollbackVisible" v-model="rollbackVisible"></rollback-dialog>
 	</div>
 </template>
 
@@ -100,6 +118,12 @@ import FlowTypeDot from '@/components/Flow/FlowTypeDot.vue'
 import { ChatLineSquare, Check, Close, Switch, DArrowLeft, Plus, Minus, More } from '@element-plus/icons-vue'
 import { processTaskListHisTaskApi } from '@/api/flow/processTask'
 import { formatTimestamp } from '@/utils/datetime'
+import ReviewDialog from '../components/reviewDialog'
+import AddSignDialog from '../components/addSignDialog'
+import ConsentOrRefuseDialog from '../components/consentOrRefuseDialog'
+import DeliverToReviewDialog from '../components/deliverToReviewDialog'
+import LoseSignDialog from '../components/loseSignDialog'
+import RollbackDialog from '../components/rollbackDialog'
 
 const props = defineProps({
 	modelValue: {
@@ -111,19 +135,17 @@ const props = defineProps({
 		default: undefined
 	}
 })
+const emit = defineEmits(['update:modelValue', 'successFn'])
 
-onMounted(() => {
-	processTaskListHisTaskApi(props.messageId).then(data => {
-		activeData.value = data
-	})
-})
-
-// 弹窗显示隐藏
-const visible = ref(false)
+// 各种操作弹窗显示隐藏
+const reviewVisible = ref(false)
+const addSignVisible = ref(false)
+const consentOrRefuseVisible = ref(false)
+const deliverToReviewVisible = ref(false)
+const loseSignVisible = ref(false)
+const rollbackVisible = ref(false)
 const activeData = ref([])
 
-const emit = defineEmits(['update:modelValue', 'successFn'])
-
 // 关闭按钮
 const closeDrawer = () => {
 	emit('successFn')
@@ -143,33 +165,35 @@ const visibleDialog = computed({
 	}
 })
 
-const formsDialog = [
-	{
-		prop: 'username',
-		label: '评论',
-		itemType: 'input',
-		placeholder: '请输入评论',
-		rules: [{ required: true, message: '请输入评论', trigger: 'blur' }]
+// 操作按钮
+const openComment = type => {
+	switch (type) {
+		case 'reviewVisible':
+			reviewVisible.value = !reviewVisible.value
+			break
+		case 'addSignVisible':
+			addSignVisible.value = !addSignVisible.value
+			break
+		case 'consentOrRefuseVisible':
+			consentOrRefuseVisible.value = !consentOrRefuseVisible.value
+			break
+		case 'deliverToReviewVisible':
+			deliverToReviewVisible.value = !deliverToReviewVisible.value
+			break
+		case 'loseSignVisible':
+			loseSignVisible.value = !loseSignVisible.value
+			break
+		case 'rollbackVisible':
+			rollbackVisible.value = !rollbackVisible.value
+			break
 	}
-]
+}
 
-const formOptions = computed(() => {
-	return {
-		forms: formsDialog,
-		labelWidth: 120,
-		span: 30,
-		formConfig: {
-			showCancelBtn: true,
-			submitLoading: false
-		}
-	}
+onMounted(() => {
+	processTaskListHisTaskApi(props.messageId).then(data => {
+		activeData.value = data
+	})
 })
-
-const submitHandler = () => {}
-
-const openComment = () => {
-	visible.value = !visible.value
-}
 </script>
 
 <style scoped lang="scss">

src/views/approve/pendingClaim/detail.vue

@@ -141,6 +141,7 @@ const visibleDialog = computed({
 const openComment = () => {
 	debugger
 	reviewVisible.value = !reviewVisible.value
+	debugger
 }
 </script>