aizuda-web-vue3/src/views/approve/components/consentOrRefuseDialog.vue

<template>
	<!-- 同意 拒绝 弹窗  同意/拒绝审批 -->
	<el-dialog v-model="operaVisibleDialog" class="le-dialog" :title="currentTip + '审批'" width="700" destroy-on-close :close-on-click-modal="false">
		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
			<el-form-item label="审批意见" prop="content" :rules="[{ required: true, message: '审批意见不能为空' }]">
				<el-input v-model="form.content" type="textarea" placeholder="请输入内容" maxlength="64" show-word-limit> </el-input>
			</el-form-item>
			<el-form-item v-if="currentType === 'reject'" prop="termination">
				<el-checkbox v-model="form.termination" label="终止流程" />
			</el-form-item>
			<el-form-item v-if="false" prop="attachment" label="附件" class="example-img-box">
				<!--'.docx', '.doc', '.pptx', '.ppt', '.xlsx', '.xls', '.zip', '.csv', '.pdf', '.png', '.jpg'  因前端不支持图片以外格式,所以注释 -->
				<FileUpload
					v-model="form.attachment"
					source="project"
					return="array"
					:limit="5"
					:file-size="10"
					:accept="['.png', '.jpg']"
					@success="clearValidate"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button :loading="btnDisabled" class="dialog-btn" @click="closeDialog">取 消</el-button>
				<el-button type="primary" :loading="btnDisabled" class="dialog-btn" @click="submitForm">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import FileUpload from '@/components/FileUpload.vue'
import { processConsentTaskApi, processRejectionTaskApi } from '@/api/flow/processTask'
import { ElMessage } from 'element-plus'
import {debounce} from "lodash-es";

const props = defineProps({
	// 弹窗是否显示
	modelValue: {
		type: Boolean,
		default: false
	},
	// 审核id
	taskId: {
		type: String,
		default: undefined
	},
	// 审核类型 同意(agree) or 拒绝(reject)
	currentType: {
		type: String,
		default: 'agree'
	},
	// 额外 表单数据
	formData: {
		type: Object,
		default: () => ({})
	}
})
const btnDisabled = ref(false)
const form = reactive({
	content: ''
	// attachment: []
})
const formRef = ref(null)
const uploadLoading = ref(false)

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)
}

const operaVisibleDialog = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})

const currentTip = computed(() => {
	return props.currentType === 'agree' ? '同意' : '拒绝'
})

const clearValidate = () => {}
</script>

<style scoped lang="scss">
.example-img-box {
	width: 100% !important;
}

.example-img-box .el-form-item__content {
	display: block;
}
</style>