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

<template>
	<!-- 转交审批弹窗 -->
	<el-dialog v-model="reviewVisibleDialog" class="le-dialog" title="转交审批" width="700" destroy-on-close>
		<el-form ref="formRef" v-loading="uploadLoading" label-position="top" element-loading-text="图片上传中..." :model="form" label-width="80px">
			<el-form-item label="转交方式" prop="type">
				<el-radio-group v-model="form.type">
					<el-radio label="0"
						>转办
						<el-tooltip effect="dark" content="A转给其B审批，B审批后，进入下一节点" placement="top">
							<el-button text :icon="QuestionFilled" style="padding: 0"></el-button>
						</el-tooltip>
					</el-radio>
					<el-radio label="1"
						>委派
						<el-tooltip effect="dark" content="A转给其B审批，B审批后，转给A，A审批后进入下一节点" placement="top">
							<el-button text :icon="QuestionFilled" style="padding: 0"></el-button>
						</el-tooltip>
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="转交给" prop="userId" :rules="[{ required: true, message: '转交人不能为空' }]">
				<el-select v-model="form.userId" placeholder="请选择转交人员">
					<el-option v-for="item in userOptList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="审批意见" prop="content">
				<el-input v-model="form.content" type="textarea" placeholder="请输入审批意见" maxlength="64" show-word-limit> </el-input>
			</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" @click="closeDialog">取 消</el-button>
				<el-button type="primary" :loading="btnDisabled" :disabled="uploadLoading" @click="submitForm">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import FileUpload from '@/components/FileUpload.vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import user from '@/api/system/user'
import { processTransferApi } from '@/api/flow/processTask'
import { ElMessage } from 'element-plus'

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	taskId: {
		type: String,
		default: undefined
	}
})
const btnDisabled = ref(false)
const form = reactive({
	content: '',
	userId: '',
	type: 0
})
const formRef = ref(null)
const uploadLoading = ref(false)
const userOptList = ref([])
const $myEmit = defineEmits(['update:modelValue', 'successCb'])

// 获取用户
const getUserList = async () => {
	var params = {
		data: {
			keyword: null,
			departmentId: null
		},
		page: 1,
		pageSize: 99999
	}
	const res = await user.userPageApi(params)
	userOptList.value = res.records.map(item => {
		return {
			value: item.id,
			label: item.username
		}
	})
}

const submitForm = () => {
	btnDisabled.value = true
	const formData = { ...form, taskId: props.taskId }
	formRef.value
		.validate()
		.then(async valid => {
			if (valid) {
				userOptList.value.forEach(item => {
					if (item.value === formData.userId) {
						formData.username = item.label
					}
				})
				console.log(formData, '===')
				await processTransferApi(formData)
				$myEmit('successCb')
				closeDialog()
				btnDisabled.value = false
			}
		})
		.catch(err => {
			console.error('挂起订单表单拦截', err)
			btnDisabled.value = false
			ElMessage({
				message: '操作失败',
				type: 'error'
			})
		})
}

const closeDialog = () => {
	$myEmit('update:modelValue', false)
}

onMounted(() => {
	getUserList()
})

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

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

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

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