董国庆
2025-05-26 f90eb2159fc4aa79d7cd28e0f30b7e82a2cea779
laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue
@@ -1,5 +1,5 @@
<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :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">
            <!-- 左侧审批内容 -->
@@ -12,38 +12,39 @@
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                        <Table :height="null" :total="0">
                            <template>
                                <el-table-column prop="name" label="项目组名称" />
                                <el-table-column prop="age" label="项目负责人" />
                                <el-table-column prop="age" label="项目组成员" />
                                <el-table-column prop="age" label="创建时间" />
                                <el-table-column prop="teamName" label="项目组名称" />
                                <el-table-column prop="personCharge" label="项目负责人" />
                                <el-table-column prop="staffName" label="项目组成员" />
                                <el-table-column prop="createTime" label="创建时间" />
                            </template>
                        </Table>
                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            style="margin-top: 18px">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item prop="name" label="报告内容">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告内容" />
                                    <el-form-item prop="reportTitle" label="报告标题">
                                        <el-input v-model="form.reportTitle" style="width: 100%;" placeholder="请输入报告标题"
                                            disabled />
                                    </el-form-item>
                                    <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                                    <el-form-item prop="reportCode" label="报告编号" style="margin-left: 100px;">
                                        <el-input v-model="form.reportCode" style="width: 100%;" placeholder="请输入报告编号"
                                            disabled />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item prop="name" label="制定人">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入制定人" />
                                    <el-form-item prop="developPerson" label="制定人">
                                        <el-input v-model="form.developPerson" style="width: 100%;" placeholder="请输入制定人"
                                            disabled />
                                    </el-form-item>
                                    <el-form-item prop="name" label="制定日期" style="margin-left: 100px;">
                                        <el-date-picker :prefix-icon="null" v-model="form.createTime" type="date"
                                            placeholder="请选择日期" />
                                    <el-form-item prop="developDate" label="制定日期" style="margin-left: 100px;">
                                        <el-date-picker :prefix-icon="null" v-model="form.developDate" type="date"
                                            disabled placeholder="请选择日期" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
@@ -51,12 +52,19 @@
                                    <div>报告正文</div>
                                </div>
                            </div>
                            <el-form-item prop="name" style="margin-top: 38px">
                                <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            <el-form-item prop="reportText" style="margin-top: 18px">
                                <ai-editor :value="form.reportText" style="width: 100%;" placeholder="请输入报告正文"
                                    :readOnly="true" />
                            </el-form-item>
                            <el-form-item prop="name" style="margin-top: 38px">
                                <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <span class="noRequire">附件</span>
                                </div>
                            </div>
                            <el-form-item prop="name" style="margin-top: 18px">
                                <el-upload action="#" :file-list="fileList" disabled>
                                    <el-button size="small" type="primary" disabled>点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                        </el-form>
@@ -67,12 +75,11 @@
            <!-- 右侧审批流程 -->
            <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="form.processData" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
        <div class="approval-dialog-approve" v-if="type == 'approve'">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
@@ -94,12 +101,10 @@
                    </div>
                </el-col>
            </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleApprove" v-if="type === 'approve'">通过</el-button>
            <el-button type="primary" @click="handleApprove" v-if="type == 'approve'">确 定</el-button>
        </div>
    </el-dialog>
</template>
@@ -107,6 +112,7 @@
<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'
import { getDetail,audit } from '../../service'
export default {
    name: "ApprovalDialog",
@@ -130,18 +136,23 @@
    },
    data() {
        return {
            dialogVisible: false,
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
                reportCode: "",
                reportTitle: "",
                reportText: "",
                developPerson: "",
                developPersonName: "",
                developDate: "",
                reportType: 2,
                status: 1,
                teamId: "",
                qaReportFiles: [],
                commitPersonId: null,
                processData:[]
            },
            radio1: 1,
            tableData: [],
            fileList: [], // 附件列表
            rules: {},
            status: "1",
            remark: "",
@@ -149,32 +160,116 @@
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
            return this.type == "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
        visible: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                this.dialogVisible = val;
                if (val && this.data.id) {
                    this.getDetail();
                }
            },
            immediate: true,
        },
            immediate: true
        }
    },
    methods: {
        getDetail() {
            getDetail(this.data.id).then(res => {
                if (res) {
                    this.form = { ...res, processData: [] };
                    // 组装流程数据
                    let processData = [];
                    // 提交节点
                    processData.push({
                        type: "primary",
                        mode: "list",
                        fields: [
                            { label: "提交人:", value: res.updateBy || "" },
                            { label: "提交时间:", value: res.createTime || "" },
                        ],
                    });
                    if (res.status == 2 || res.status == 4) {
                        processData.push({
                            type:
                                res.status == 2
                                    ? "primary"
                                    : res.status == 4
                                        ? "primary"
                                        : "warning",
                            mode: "list",
                            fields: [
                                {
                                    label: "审核结果:",
                                    value:
                                        res.status == 2
                                            ? "通过"
                                            : res.status == 4
                                                ? "驳回"
                                                : "待审批",
                                },
                                { label: "审批意见:", value: res.auditRemark || "" },
                                { label: "审核人:", value: res.auditPersonName || res.auditPersonId||"" },
                                { label: "审核时间:", value: res.auditTime || "" },
                            ],
                        });
                    } else {
                        processData.push({
                            type: "warning",
                            mode: "list",
                            fields: [
                                { label: "等待审核" },
                            ],
                        });
                    }
                    // this.form = res;
                    this.tableData = [{ ...res.projectTeam, staffName: res.staffNames }];
                    this.fileList = res.qaReportFileList.map(item => {
                        return {
                            ...item,
                            name: item.fileName,
                            url: item.fileUrl
                        }
                    }) || [];
                    this.$nextTick(() => {
              this.form.processData = processData;
            })
                } else {
                    this.$message.error(res.message || '获取详情失败');
                }
            }).catch(err => {
                console.error('获取详情失败:', err);
                this.$message.error('获取详情失败');
            });
        },
        handleClose() {
            // this.$emit("update:visible", false);
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
            if (this.status == "2" && !this.remark) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            const params = {
                id: this.data.id,
                auditStatus: this.status == "1" ? 2 : 4, // 1=通过(2),2=驳回(4)
                auditRemark: this.remark
            };
            audit(params).then(res => {
                if (res) {
                    this.$message.success("审批成功");
                    this.$emit("close");
                    // this.$emit("refresh");
                } else {
                    this.$message.error(res.message || "审批失败");
                }
            }).catch(err => {
                console.error("审批失败:", err);
                this.$message.error("审批失败");
            });
        },
        handleReject() {
@@ -201,7 +296,7 @@
    height: 40vh;
    .approval-content {
        flex: 3;
        flex: 2.5;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
@@ -211,7 +306,7 @@
    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        flex: 1;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
@@ -250,7 +345,7 @@
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;
        margin-top: 18px;
        img {
            width: 12px;