<!-- 提交审批的时候写审批意见 --> <script lang="ts" setup name="ApprovalCommentDialog"> import type { FormInstance, FormRules } from 'element-plus' import { ElMessage } from 'element-plus' import dayjs from 'dayjs' import useUserStore from '@/store/modules/user' import { getApprovalList, submitApproval } from '@/api/system/user' defineProps({ title: { type: String, default: '填写操作备注', }, }) const emit = defineEmits(['confirmRemark']) // 弹窗显示状态 const dialogVisible = ref(false) // 默认表单 const defaultFormData = { remark: '', // 审批意见 } // 表单数据对象 const formData = reactive({ ...defaultFormData }) // 保存按钮加载状态 const btnLoading = ref(false) // ---------------表单提交-------------------------------- // 表单对象 const dataFormRef = ref<FormInstance>() /** * 初始化审批弹窗 * @param type 审批类型 * @param taskId 任务id * @param id 列表id */ function initDialog(row: any, type: string) { dialogVisible.value = true } // 提交表单 function submitForm() { emit('confirmRemark', formData.remark) } // 关闭弹窗 function handleClose() { dialogVisible.value = false } // ----------------------- 以下是暴露的方法内容 ---------------------------- defineExpose({ initDialog }) </script> <template> <div class="approval-dialog"> <el-dialog v-model="dialogVisible" title="填写操作备注" width="700" :before-close="handleClose" > <el-form ref="dataFormRef" label-position="left" label-width="100px" :model="formData" > <el-row :gutter="24"> <el-col :span="24"> <el-form-item label="审批结论:" prop="remark"> <el-input v-model="formData.remark" :rows="4" show-word-limit type="textarea" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <el-button type="primary" :loading="btnLoading" @click="submitForm"> 提交 </el-button> <el-button type="info" @click="handleClose"> 取消 </el-button> </template> </el-dialog> </div> </template> <style lang="scss"> .approval-dialog { .el-radio__label { display: block !important; } } </style>