| | |
| | | <template> |
| | | <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" :close-on-click-modal="false" |
| | | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" |
| | | @close="handleClose"> |
| | | <div class="approval-dialog"> |
| | | <!-- 左侧审批内容 --> |
| | |
| | | </div> |
| | | </div> |
| | | <Table :data="groupTableData" :total="0" :height="null" class="groupTable"> |
| | | <el-table-column type="index" label="所属项目课题方案" width="80"></el-table-column> |
| | | <el-table-column prop="groupName" label="实验编号"></el-table-column> |
| | | <el-table-column prop="stage" label="实验名称"></el-table-column> |
| | | <el-table-column prop="creator" label="通知时间"></el-table-column> |
| | | <el-table-column prop="createTime" label="实验开始时间"></el-table-column> |
| | | <el-table-column prop="approver" label="实验结束时间"></el-table-column> |
| | | <el-table-column prop="approveTime" label="参加人员"></el-table-column> |
| | | <el-table-column type="index" label="序号" width="80"></el-table-column> |
| | | <el-table-column prop="projectName" label="所属项目课题方案"></el-table-column> |
| | | <el-table-column prop="experimentCode" label="实验编号"></el-table-column> |
| | | <el-table-column prop="experimentName" label="实验名称"></el-table-column> |
| | | <el-table-column prop="experimentDate" label="通知时间"></el-table-column> |
| | | <el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column> |
| | | <el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column> |
| | | <el-table-column prop="participantsName" label="参加人员"></el-table-column> |
| | | <el-table-column prop="status" label="状态"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getStatusType(scope.row.status)"> |
| | | {{ getStatusText(scope.row.status) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | </Table> |
| | | |
| | |
| | | <div>中止原因说明</div> |
| | | </div> |
| | | </div> |
| | | <AiEditor ref="purposeEditor" v-model="form.purpose" height="200px" placeholder="请输入文字" /> |
| | | <AiEditor ref="purposeEditor" :readOnly="true" :value="form.stopReason" height="200px" placeholder="请输入文字" /> |
| | | |
| | | </template> |
| | | </Card> |
| | |
| | | <!-- 右侧审批流程 --> |
| | | <div class="approval-flow"> |
| | | <div class="flow-content"> |
| | | <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver" |
| | | :approve-time="form.approveTime" /> |
| | | <approval-process :processData="approvalProcessData" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="approval-dialog-approve"> |
| | | <div class="approval-dialog-approve" v-if="type === 'approve'"> |
| | | <div class="status"> |
| | | <div class="status-title">审批结果</div> |
| | | <div class="status-content"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="remark"> |
| | | <div class="remark" style="flex:1"> |
| | | <div class="remark-title">审批意见</div> |
| | | <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" /> |
| | | </div> |
| | |
| | | <script> |
| | | import ApprovalProcess from '@/components/approvalProcess' |
| | | import AiEditor from '@/components/AiEditor' |
| | | import { audit, getDetail } from '../service' |
| | | export default { |
| | | name: "ApprovalDialog", |
| | | components: { |
| | |
| | | default: () => ({}), |
| | | }, |
| | | }, |
| | | computed: { |
| | | dialogVisible: { |
| | | get() { |
| | | return this.visible; |
| | | }, |
| | | set(val) { |
| | | this.$emit('update:visible', val); |
| | | } |
| | | }, |
| | | dialogTitle() { |
| | | return this.type === "approve" ? "审批实验中止申请" : "实验中止申请审批详情"; |
| | | }, |
| | | }, |
| | | watch: { |
| | | visible: { |
| | | handler(val) { |
| | | if (val && this.data && this.data.id) { |
| | | // this.form = { ...val }; |
| | | this.getDialogDetail(this.data.id) |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | form: { |
| | |
| | | approver: "", |
| | | approveTime: "" |
| | | }, |
| | | groupTableData: [], |
| | | approvalProcessData: [], |
| | | radio1: 1, |
| | | rules: {}, |
| | | status: "1", |
| | | remark: "", |
| | | }; |
| | | }, |
| | | computed: { |
| | | dialogTitle() { |
| | | return this.type === "approve" ? "审批实验中止申请" : "实验中止申请审批详情"; |
| | | methods: { |
| | | async getDialogDetail(id) { |
| | | try { |
| | | const res = await getDetail({ id }); |
| | | if (!res) { |
| | | this.$message.error('获取方案详情失败'); |
| | | this.handleClose(); |
| | | return; |
| | | } |
| | | if(res.stopReason){ |
| | | this.showApprovalFlow = true; |
| | | //中止实验申请 |
| | | let processData = []; |
| | | processData.push({ |
| | | type: "primary", |
| | | mode: "list", |
| | | fields: [ |
| | | { label: "提交人:", value: res.updateBy || "" }, |
| | | { label: "提交时间:", value: res.createTime || "" }, |
| | | ], |
| | | }); |
| | | if(res.status==4||res.status==3){ |
| | | processData.push({ |
| | | type:'primary', |
| | | mode: "list", |
| | | fields: [ |
| | | { |
| | | label: "审核结果:", |
| | | value: |
| | | res.status ==3 |
| | | ? "通过" |
| | | : res.status ==4 |
| | | ? "驳回" |
| | | : "待审批", |
| | | }, |
| | | }, |
| | | watch: { |
| | | data: { |
| | | handler(val) { |
| | | if (val) { |
| | | this.form = { ...val }; |
| | | { label: "审批意见:", value: res.auditRemark || "" }, |
| | | { label: "审核人:", value: res.auditPersonName || "" }, |
| | | { label: "审核时间:", value: res.auditTime || "" }, |
| | | ], |
| | | }); |
| | | }else{ |
| | | processData.push({ |
| | | type: "warning", |
| | | mode: "list", |
| | | fields: [ |
| | | { label: "等待审核"}, |
| | | ], |
| | | }); |
| | | } |
| | | this.approvalProcessData = processData; |
| | | } |
| | | |
| | | // 填充基本表单数据 |
| | | this.form = { |
| | | ...this.form, |
| | | stopReason: res.stopReason, |
| | | }; |
| | | |
| | | // 构建实验调度数据 |
| | | if (res.experimentDispatch) { |
| | | this.groupTableData = [res.experimentDispatch]; |
| | | } |
| | | |
| | | } catch (error) { |
| | | console.error("获取方案详情失败:", error); |
| | | this.$message.error("获取方案详情失败"); |
| | | this.handleClose(); |
| | | } |
| | | }, |
| | | immediate: true, |
| | | getStatusType(status) { |
| | | const statusMap = { |
| | | "-1": "info", |
| | | "1": "warning", |
| | | "2": "success", |
| | | "3": "info" |
| | | }; |
| | | return statusMap[status] || "info"; |
| | | }, |
| | | getStatusText(status) { |
| | | const statusMap = { |
| | | "-1": "草稿箱", |
| | | "1": "待确认", |
| | | "2": "已确认", |
| | | "3": "已封存" |
| | | }; |
| | | return statusMap[status] || "未知"; |
| | | }, |
| | | methods: { |
| | | handleClose() { |
| | | this.$emit("update:visible", false); |
| | | this.form.approvalComment = ""; |
| | | this.$emit('update:visible', false); |
| | | this.remark = ""; |
| | | }, |
| | | handleApprove() { |
| | | if (!this.form.approvalComment) { |
| | | if (!this.remark) { |
| | | this.$message.warning("请输入审批意见"); |
| | | return; |
| | | } |
| | | this.$emit("approve", { |
| | | ...this.form, |
| | | status: "approved", |
| | | }); |
| | | this.handleSubmit(); |
| | | }, |
| | | handleReject() { |
| | | if (!this.form.approvalComment) { |
| | | this.$message.warning("请输入审批意见"); |
| | | return; |
| | | async handleSubmit() { |
| | | try { |
| | | const params = { |
| | | id: this.data.id, |
| | | auditRemark: this.remark, |
| | | status: this.status === '1' ? 3 : 4 // 1表示通过(status=3),2表示拒绝(status=4) |
| | | }; |
| | | console.log('params params',params) |
| | | const res = await audit(params); |
| | | console.log('res res',res) |
| | | if (res) { |
| | | this.$message.success('审批成功'); |
| | | this.handleClose(); |
| | | } |
| | | this.$emit("reject", { |
| | | ...this.form, |
| | | status: "rejected", |
| | | }); |
| | | } catch (error) { |
| | | console.error('审批失败:', error); |
| | | this.$message.error('审批失败'); |
| | | } |
| | | }, |
| | | }, |
| | | }; |