<!-- 软件评审报告详情 --> <script name="ReviewReportDetail" lang="ts" setup> import { ElLoading, ElMessage, ElMessageBox, dayjs } from 'element-plus' import type { IRevisionApply } from '../revision/software-revision' import type { IReviewReport, IReviewStaff } from './software-review' import ApprovalDialog from '@/views/resource/common/approvalDialog.vue' import FilterRegistedStaff from '@/views/resource/common/filterRegistedStaff.vue' import FilterSoftwareRevision from '@/views/resource/common/filterSoftwareRevision.vue' import type { IDictType } from '@/commonInterface/resource-interface' import type { IStaffBasicInfo } from '@/views/resource/person/register/person-regitster' import { SCHEDULE } from '@/utils/scheduleDict' import { deleteRevoked, detailReviewReport, draftUpdate, failUpdateReport, refuseApproval, revokeApproval, saveDraft, submitDraft } from '@/api/resource/softwareReport' import ApprovalRecordTable from '@/components/ApprovalRecord/ApprovalRecordTable.vue' import useUserStore from '@/store/modules/user' import { getDictByCode } from '@/api/system/dict' // 变量 // 从路由中传过来的参数 const type = ref<string>('') const id = ref<string>('') const status = ref<string>('') // 关键字段是否可以编辑 const keyFieldsDisable = ref<boolean>(true) const userInfo = useUserStore() const route = useRoute() const router = useRouter() const title = ref('') const radioItems = ref([ { name: '基本信息', value: 'review-report-basic' }, { name: '审批详情', value: 'review-report-approval' }, ]) const current = ref('') const currentLabel = ref('') // 子组件 const approvalDialog = ref() const reviewReportFormRef = ref() const reviewStaffFilterRef = ref() const softwareFilterRef = ref() const revisionFilterRef = ref() const reviewReport = ref<IReviewReport>({ id: '', labCode: '', groupCode: '', reportNo: '', reportName: '软件评审报告', beforeSoftwareId: '', beforeSoftwareName: '', beforeSoftwareVersion: '', softwareName: '', softwareVersion: '', reviewContent: '', reviewType: '1', createDept: '', createDeptId: '', staffList: [], approvalStatus: '', approvalStatusName: '', processId: '', taskId: '', createUserId: '', createUserName: '', createTime: '', revisionApplyNo: '', }) const reviewStaffList = ref<Array<IReviewStaff>>([]) const staffColumns = [ { text: '人员编号', value: 'staffNo', align: 'center', width: '180', required: true }, { text: '姓名', value: 'staffName', align: 'center', required: true }, { text: '部门', value: 'deptName', align: 'center' }, { text: '职称', value: 'titleExperience', align: 'center' }, ] // 表头 const formRules = ref({ labCode: [{ required: true, message: '实验室不能为空', trigger: ['change', 'blur'] }], groupCode: [{ required: true, message: '部门不能为空', trigger: ['change', 'blur'] }], reviewType: [{ required: true, message: '评审类型不能为空', trigger: ['change', 'blur'] }], beforeSoftwareName: [{ required: true, message: '原软件名称不能为空', trigger: 'blur' }], softwareName: [{ required: true, message: '软件名称不能为空', trigger: 'blur' }], softwareVersion: [{ required: true, message: '软件版本号不能为空', trigger: 'blur' }], reviewContent: [{ required: true, message: '评审内容不能为空', trigger: 'blur' }], }) // 表单验证规则 // 是否显示相关按钮 const saveButtVisable = ref<boolean>(false) // 是否显示 保存 按钮 const submitButtVisable = ref<boolean>(false) // 是否显示 提交 按钮 const flowButtsVisable = ref<boolean>(false) // 是否显示 同意和拒绝 按钮 const cancelButtVisable = ref<boolean>(false) // 是否显示 取消 按钮 const deleteButtVisable = ref<boolean>(false) // 是否显示 删除 按钮 const editButtVisable = ref<boolean>(false) // 是否显示 编辑 按钮 // 字典值 const labCodeDict = ref<IDictType[]>([]) const groupCodeDict = ref<IDictType[]>([]) const reviewTypeDict = ref<IDictType[]>([]) const recordSelected = ref<IReviewStaff[]>([]) // 详情页的各个tab切换操作 const radioChangeHandler = (newVal: string | number | boolean) => { const radioTarget = radioItems.value.filter(item => item.name === newVal) if (radioTarget.length > 0) { currentLabel.value = radioTarget[0].name current.value = radioTarget[0].value } else { currentLabel.value = radioItems.value[0].name current.value = radioItems.value[0].value } } // 将所有流程操作的按钮隐藏 const hideAllOpterationButtons = () => { saveButtVisable.value = false submitButtVisable.value = false flowButtsVisable.value = false cancelButtVisable.value = false deleteButtVisable.value = false editButtVisable.value = false } // 根据审批状态显示对应的流程操作按钮 const showOperationButtonByStatus = () => { switch (status.value) { case '0': // 全部:保存按钮可见 if (type.value === 'update') { saveButtVisable.value = true } else { saveButtVisable.value = false } break case '1': // 草稿箱:保存、提交按钮可见 saveButtVisable.value = true submitButtVisable.value = true break case '2': // 待审批:同意、拒绝按钮可见 flowButtsVisable.value = true break case '3': // 审批中:取消按钮可见 cancelButtVisable.value = true break case '5': // 未通过:编辑 按钮可见 editButtVisable.value = true break case '6': // 已取消:编辑 删除按钮可见 editButtVisable.value = true deleteButtVisable.value = true break default: // 默认不显示所有的操作按钮 hideAllOpterationButtons() break } } // 关闭 const resetForm = () => { sessionStorage.removeItem('reviewReportTaskId') // 返回列表时 将缓存中的数据删除 router.go(-1) } // ---------------------------------------评审人员------------------------------------------------ // 新增 const addEditableRow = () => { reviewStaffFilterRef.value.showOrHideFilterDialog(true, 100) } const deleteRecords = () => { if (recordSelected.value.length === 0) { ElMessage.warning('请至少选择一行') return } reviewStaffList.value = reviewStaffList.value.filter(item => recordSelected.value.includes(item) === false) } const recordMultiSelect = (e: any) => { recordSelected.value = e } // 选定人员返回 const appendToContentList = (rows: IStaffBasicInfo[]) => { rows.forEach((row) => { const existList = reviewStaffList.value.filter(item => item.staffId === row.id) if (existList.length === 0) { reviewStaffList.value.push({ staffId: row.id!, staffNo: row.staffNo, staffName: row.staffName, deptName: row.deptName, titleExperience: row.titleExperience, }) } }) reviewStaffFilterRef.value.showOrHideFilterDialog(false) } // --------------------------------------------------------------------------------------- // 保存至草稿箱---新建 const saveDraftReport = () => { reviewReport.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 创建时间改为提交时间 const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) saveDraft(reviewReport.value).then((res) => { if (res.code === 200) { // 提示保存成功 ElMessage.success('保存成功') // 设置返回的id和编号 reviewReport.value.reportNo = res.data.reportNo reviewReport.value.id = res.data.id id.value = res.data.id type.value = 'update' status.value = '1' // 保存成功后进入草稿箱 为了不显示审批详情 } else { // 提示失败信息 ElMessage.error(`保存失败:${res.message}`) } loading.close() }) } // 编辑草稿箱(不走流程审批)--草稿箱编辑 const updateDraftReport = () => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) draftUpdate(reviewReport.value).then((res) => { if (res.code === 200) { // 提示保存成功 ElMessage.success('保存成功') } else { // 提示失败信息 ElMessage.error(`保存失败:${res.message}`) } loading.close() }) } // 编辑按钮点击事件处理函数 const editClickedHandler = () => { type.value = 'update' title.value = '软件评审报告(编辑)' // 隐藏编辑按钮 显示提交按钮 editButtVisable.value = false submitButtVisable.value = true } // 新建时保存后的处理 获取返回的id const saveButtonHandler = async () => { if (!reviewReportFormRef) { return } if (reviewStaffList.value.length === 0) { ElMessage.warning('评审人员列表不能为空') return } await reviewReportFormRef.value.validate((valid: boolean) => { if (valid === true) { reviewReport.value.staffList = reviewStaffList.value ElMessageBox.confirm( '确认保存吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { if (type.value === 'create') { saveDraftReport() } else if (type.value === 'update') { updateDraftReport() } }) } }) } // 提交按钮 const submitButtonHandler = async () => { if (reviewReport.value === null || reviewReport.value.processId === undefined || reviewReport.value.processId === '') { // 流程id为空 表示还未进入流程中 直接提交 ElMessageBox.confirm(`是否提交软件评审报告 ${reviewReport.value.reportNo}`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) submitDraft({ formId: SCHEDULE.SOFTWARE_REVIEW_REPORT_APPROVAL, id: reviewReport.value.id, }).then((res) => { if (res.code === 200) { ElMessage.success('提交成功') type.value = 'detail' hideAllOpterationButtons() } else { ElMessage.error(`提交失败:${res.message}`) } loading.close() }) }) } else { // 之前已经在流程中的表单 保存提交 if (reviewStaffList.value.length === 0) { ElMessage.warning('评审人员列表不能为空') return } await reviewReportFormRef.value.validate((valid: boolean) => { if (valid === true) { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) failUpdateReport(reviewReport.value).then((res) => { if (res.code === 200) { // 提示保存成功 ElMessage.success('保存成功') type.value = 'detail' hideAllOpterationButtons() } else { // 提示失败信息 ElMessage.error(`保存失败:${res.message}`) } loading.close() }) } }) } } // 根据id查询详情 const detailById = async (id: string) => { await detailReviewReport({ id }).then((res) => { if (res.code === 200) { reviewReport.value = res.data reviewReport.value.reviewType = res.data.reviewType.toString() reviewStaffList.value = reviewReport.value.staffList if (reviewReport.value.taskId === '') { reviewReport.value.taskId = sessionStorage.getItem('reviewReportTaskId')! } } }) } const filterFormerSoftware = () => { revisionFilterRef.value.showOrHideFilterDialog(true) } // ------------------------------------------审批------------------------------------------- // 流程审批-拒绝 const approvalRefuseHandler = () => { approvalDialog.value.initDialog('refuse', reviewReport.value.id, reviewReport.value.taskId || route.query.taskId, '') } // 流程审批-同意 const approvalAgreeHandler = () => { approvalDialog.value.initDialog('agree', reviewReport.value.id, reviewReport.value.taskId || route.query.taskId, '') } // 取消流程 const revokeClickedHandler = () => { const params = { processInstanceId: route.query.processId!, comments: '', id: id.value, } ElMessageBox.confirm( '确认取消该审批吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) revokeApproval(params).then((res) => { loading.close() ElMessage({ type: 'success', message: '已取消', }) cancelButtVisable.value = false }) }) } // 删除评审报告 const deleteClickedHandler = () => { ElMessageBox.confirm(`是否删除评审报告 ${reviewReport.value.reportNo}`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }).then(() => { deleteRevoked({ id: id.value, taskId: reviewReport.value.taskId || route.query.taskId }).then((res) => { if (res.code === 200) { ElMessage.success(`评审报告 ${reviewReport.value.reportNo} 删除成功`) resetForm() } else { ElMessage.error(`评审报告 ${reviewReport.value.reportNo} 删除失败: ${res.message}`) } }) }) } // 流程审批(同意、拒绝、取消)结束后的操作 将按钮都隐藏(本身就不能编辑了) const approvalSuccessHandler = (type: string) => { if (type === 'agree' || type === 'refuse') { flowButtsVisable.value = false } else if (type === 'revoke') { cancelButtVisable.value = false } } // 拒绝 const refuseHandler = (param: any) => { const loading = ElLoading.service({ lock: true, text: '加载中...', background: 'rgba(255, 255, 255, 0.6)', }) refuseApproval(param).then((res) => { if (res.code === 200) { ElMessage.success('拒绝审批完成') } else { ElMessage.error(`拒绝审批失败:${res.message}`) } // 关闭弹窗 approvalDialog.value.handleClose() flowButtsVisable.value = false loading.close() }) } // 选定原软件 const revisionSelected = (row: IRevisionApply) => { reviewReport.value.beforeSoftwareId = row.softwareId reviewReport.value.beforeSoftwareName = row.softwareName reviewReport.value.beforeSoftwareVersion = row.softwareVersion reviewReport.value.revisionApplyNo = row.applyNo revisionFilterRef.value.showOrHideFilterDialog(false) } // -------------------------------------字典----------------------------------------------------------------- const getLabCodeDict = async () => { // 先从缓存中获取 if (sessionStorage.getItem('bizLabCode') === null || sessionStorage.getItem('bizLabCode') === undefined) { // 缓存中没有则调用接口查询 await getDictByCode('bizLabCode').then((res) => { if (res.code === 200) { labCodeDict.value = res.data } }) } else { labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCode')!) } } const getGroupCodeDict = async () => { // 先从缓存中获取 if (sessionStorage.getItem('bizGroupCode') === null || sessionStorage.getItem('bizLabbizGroupCodeCode') === undefined) { // 缓存中没有则调用接口查询 await getDictByCode('bizGroupCode').then((res) => { if (res.code === 200) { groupCodeDict.value = res.data } }) } else { groupCodeDict.value = JSON.parse(sessionStorage.getItem('bizGroupCode')!) } } const getReviewTypeDict = async () => { // 先从缓存中获取 if (sessionStorage.getItem('bizReviewType') === null || sessionStorage.getItem('bizReviewType') === undefined) { // 缓存中没有则调用接口查询 await getDictByCode('bizReviewType').then((res) => { if (res.code === 200) { reviewTypeDict.value = res.data } }) } else { reviewTypeDict.value = JSON.parse(sessionStorage.getItem('bizReviewType')!) } } const initDict = async () => { await getLabCodeDict() await getGroupCodeDict() await getReviewTypeDict() } const initDialog = (params: any) => { // 从路由中获取参数 type.value = params.type id.value = params.id !== undefined ? params.id : '' status.value = params.status // 默认显示第一个tab内容 current.value = radioItems.value[0].value currentLabel.value = radioItems.value[0].name switch (params.type) { case 'create' : title.value = '软件评审报告(新增)' saveButtVisable.value = true submitButtVisable.value = true reviewReport.value.createUserId = userInfo.id reviewReport.value.createUserName = userInfo.name reviewReport.value.createDeptId = userInfo.deptId reviewReport.value.createDept = userInfo.deptName reviewReport.value.createTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') keyFieldsDisable.value = false break case 'update': title.value = '软件评审报告(编辑)' detailById(id.value) // 判断显示哪些流程操作按钮 showOperationButtonByStatus() keyFieldsDisable.value = true break case 'detail': title.value = '软件评审报告(详情)' id.value = params.id detailById(id.value) // 查看详情时所有的操作按钮都隐藏 showOperationButtonByStatus() keyFieldsDisable.value = true break default: title.value = '' break } } watch(() => status.value, (val) => { if (val === '1' || type.value === 'create') { // 草稿箱把审批详情删了review-report-approval if (radioItems.value[radioItems.value.length - 1].value === 'review-report-approval') { radioItems.value.pop() } console.log(radioItems.value) } else { // 非全部和草稿箱把审批详情加上 if (radioItems.value[radioItems.value.length - 1].value !== 'review-report-approval') { radioItems.value.push({ name: '审批详情', value: 'review-report-approval' }) } } }) onMounted(() => { initDict() initDialog(route.query) }) </script> <template> <app-container class="resource-software-review"> <el-form ref="reviewReportFormRef" :model="reviewReport" :rules="formRules" label-position="right" label-width="110px" border stripe> <detail-page :title="`${title}`"> <template #btns> <el-button v-if="editButtVisable" type="primary" @click="editClickedHandler()"> 编辑 </el-button> <template v-if="flowButtsVisable"> <el-button type="primary" @click="approvalAgreeHandler"> 同意 </el-button> <el-button type="danger" @click="approvalRefuseHandler"> 拒绝 </el-button> </template> <el-button v-if="submitButtVisable" :disabled="id === ''" type="primary" @click="submitButtonHandler"> {{ status === '5' || status === '6' ? '保存' : '提交' }} </el-button> <el-button v-if="saveButtVisable" type="primary" @click="saveButtonHandler"> 保存 </el-button> <el-button v-if="deleteButtVisable" type="danger" @click="deleteClickedHandler"> 删除 </el-button> <el-button v-if="cancelButtVisable" type="info" @click="revokeClickedHandler"> 取消 </el-button> <el-button type="info" @click="resetForm()"> 关闭 </el-button> </template> <el-radio-group v-model="currentLabel" @change="radioChangeHandler"> <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" :disabled="id === ''" /> </el-radio-group> </detail-page> <detail-block v-if="current === 'review-report-basic'" title=""> <el-row :gutter="24"> <el-col :span="6"> <el-form-item label="实验室" prop="labCode"> <el-select v-model="reviewReport.labCode" placeholder="请选择实验室" :disabled="type === 'detail'" style="width: 100%;"> <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="申请单位"> <el-input v-model="reviewReport.createDept" :disabled="true" /> <el-input v-model="reviewReport.createDeptId" type="hidden" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="部门" prop="groupCode"> <el-select v-model="reviewReport.groupCode" placeholder="请选择部门" :disabled="type === 'detail'" style="width: 100%;"> <el-option v-for="dict in groupCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="申请人"> <el-input v-model="reviewReport.createUserName" :disabled="true" /> <el-input v-model="reviewReport.createUserId" type="hidden" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="文件编号"> <el-input v-model="reviewReport.reportNo" placeholder="系统自动生成" :disabled="true" /> </el-form-item> <el-form-item label="申请时间"> <el-input v-model="reviewReport.createTime" :disabled="true" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="文件名称"> <el-input v-model="reviewReport.reportName" placeholder="文件名称" :disabled="true" /> </el-form-item> </el-col> </el-row> </detail-block> <detail-block v-if="current === 'review-report-basic'" title=""> <el-row :gutter="24"> <el-col :span="12"> <el-form-item label="评审类型" prop="reviewType"> <el-radio-group v-model="reviewReport.reviewType"> <el-radio v-for="item in reviewTypeDict" :key="item.id" :label="item.value" :disabled="type === 'detail'"> {{ item.name }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row v-if="reviewReport.reviewType === '2'" :gutter="24"> <el-col :span="6"> <el-form-item label="原软件名称" prop="beforeSoftwareName"> <el-input v-model="reviewReport.beforeSoftwareName" :disabled="true"> <template v-if="type !== 'detail'" #append> <el-button :disabled="type === 'detail'" @click="filterFormerSoftware"> 选择 </el-button> </template> </el-input> <el-input v-model="reviewReport.beforeSoftwareId" type="hidden" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="原版本号"> <el-input v-model="reviewReport.beforeSoftwareVersion" :disabled="true" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="6"> <el-form-item id="softwareNameRef" :label="reviewReport.reviewType === '2' ? '新软件名称' : '软件名称'" prop="softwareName"> <el-input v-model="reviewReport.softwareName" :disabled="type === 'detail'" /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item id="versionRef" :label="reviewReport.reviewType === '2' ? '新版本号' : '版本号'" prop="softwareVersion"> <el-input v-model="reviewReport.softwareVersion" :disabled="type === 'detail'" /> </el-form-item> </el-col> </el-row> <el-row :gutter="24"> <el-col :span="18"> <el-form-item label="评审内容" prop="reviewContent"> <el-input v-model="reviewReport.reviewContent" type="textarea" :rows="5" :disabled="type === 'detail'" /> </el-form-item> </el-col> </el-row> </detail-block> <detail-block v-if="current === 'review-report-basic'" title=""> <table-container title="评审人员"> <template v-if="type !== 'detail'" #btns-right> <el-button type="primary" @click="addEditableRow"> 增加行 </el-button> <el-button type="info" @click="deleteRecords"> 删除行 </el-button> </template> <!-- 表格区域 --> <el-table :data="reviewStaffList" border style="width: 100%;" @selection-change="recordMultiSelect"> <el-table-column v-if="type !== 'detail'" type="selection" align="center" width="38" /> <el-table-column align="center" label="序号" width="55" type="index" /> <el-table-column v-for="item in staffColumns" :key="item.value" :prop="item.value" :label="item.text" :width="item.width" align="center" > <template #header> <span v-show="item.required && type !== 'detail'" style="color: red;">*</span><span>{{ item.text }}</span> </template> </el-table-column> </el-table> </table-container> </detail-block> </el-form> <approval-dialog ref="approvalDialog" @on-success="approvalSuccessHandler" @on-refuse="refuseHandler" /> <filter-registed-staff ref="reviewStaffFilterRef" :show-score="false" @record-selected="appendToContentList" /> <filter-software-revision ref="revisionFilterRef" @record-selected="revisionSelected" /> <template v-if="current === 'review-report-approval' && status !== '1'"> <approval-record-table :process-id="reviewReport.processId" /> </template> </app-container> </template> <style lang="scss"> .resource-software-review { .el-radio__label { display: block !important; } } </style>