Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

董国庆

2025-04-30 15afdc145d08f07be62c2ae618c7ffd9f359161e

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory

 culture/src/router/index.js

@@ -23,8 +23,7 @@
    }
 */

const routes = [
    {
const routes = [{
        path: "/",
        redirect: "/projectList/list",
    },
@@ -43,8 +42,7 @@
            title: "项目组管理",
        },
        component: Layouts,
        children: [
            {
        children: [{
                path: "list",
                name: "ProjectList",
                meta: {
@@ -70,8 +68,7 @@
            title: "系统管理",
        },
        component: Layouts,
        children: [
            {
        children: [{
                path: "user",
                name: "User",
                meta: {
@@ -129,15 +126,13 @@
        meta: {
            title: "菌种库",
        },
        children: [
            {
        children: [{
                path: "/strain-library",
                component: Parent,
                meta: {
                   title: "菌种库管理",
                },
                children: [
                   {
                children: [{
                       path: "strain-library-manage",
                       name: "StrainLibraryManage",
                       meta: {
@@ -223,8 +218,7 @@
        meta: {
            title: "实验室数据管理",
        },
        children: [
            {
        children: [{
                path: "approvalPlan",
                meta: {
                    title: "项目课题方案审批",
@@ -282,8 +276,7 @@
                    // keepAlive: true,
                },
                component: Parent,
                children: [
                    {
                children: [{
                        path: "manage",
                        meta: {
                            title: "样品管理",
@@ -418,8 +411,7 @@
        meta: {
            title: "专业报告库审批",
        },
        children: [
            {
        children: [{
                path: "feasibilityStudy",
                meta: {
                    title: "可研报告库",
@@ -469,122 +461,103 @@
                component: () => import("../views/reportLibrary/projectProposalLibrary/index.vue"),
            },
        ],
    }, {
        path: "/strainReportLibrary",
        component: Layouts,
        meta: {
            title: "菌种报告库",
        },
        children: [{
                path: "reportLibraryOne",
                meta: {
                    title: "报告库一",
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOne/index.vue"),
            },
            {
                path: "add",
                meta: {
                    title: "新增报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOne/add.vue"),
            },
            {
                path: "reportLibraryTwo",
                meta: {
                    title: "报告库二",
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneTWO/index.vue"),
            },
            {
                path: "addTwo",
                meta: {
                    title: "新增报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneTWO/add.vue"),
            },
            {
                path: "reportLibraryThree",
                meta: {
                    title: "报告库三",
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneThree/index.vue"),
            },
            {
                path: "addThree",
                meta: {
                    title: "新增报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneThree/add.vue"),
            },
            {
                path: "reportLibraryFour",
                meta: {
                    title: "报告库四",
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneFour/index.vue"),
            },
            {
                path: "addFour",
                meta: {
                    title: "新增报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/strainReportLibrary/reportLibraryOneFour/add.vue"),
            },
           
        ],
    },
    {
        path: "/deliveryAssessment",
        component: Layouts,
        meta: {
            title: "工作交付评定",
            title: "菌种报告评定",
        },
        children: [
            {
        children: [{
                path: "projectTeamIntegral",
                meta: {
                    title: "项目组总积分",
                    title: "菌种项目组评定表",
                },
                component: () => import("../views/deliveryAssessment/projectTeamIntegral"),
            },
            {
                path: "projectTeamIntegral-detail",
                meta: {
                    title: "积分详情",
                    title: "评定详情",
                    hide: true
                },
                component: () => import("../views/deliveryAssessment/projectTeamIntegral/detail.vue"),
            },
            {
                // 超级管理员
                path: "taskList",
                meta: {
                    title: "课题列表",
                },
                component: () => import("../views/deliveryAssessment/taskList"),
            },
            {
                // 工艺工程师 审批人 实验员 超级管理员
                path: "restsTask",
                meta: {
                    title: "实验员其他任务",
                },
                component: () => import("../views/deliveryAssessment/restsTask"),
            },
            {
                // 超级管理员 工艺工程师
                path: "clinicalTrial",
                meta: {
                    title: "临床试验积分列表",
                },
                component: () => import("../views/deliveryAssessment/clinicalTrial"),
            },
            {
                // 化验师 审批人
                path: "testingAndEvaluation",
                meta: {
                    title: "检测项评定列表",
                },
                component: () => import("../views/deliveryAssessment/testingAndEvaluation"),
            },
            {
                // 化验师 实验员
                path: "experimentResults",
                meta: {
                    title: "实验结果评定",
                },
                component: () => import("../views/deliveryAssessment/experimentResults"),
            },
            {
                // 化验师 工艺工程师 审批人
                path: "assayTaskList",
                meta: {
                    title: "课题评定列表",
                },
                component: () => import("../views/deliveryAssessment/assayTaskList"),
            },
            {
                // 工艺工程师
                path: "processEngineerEvaluate",
                meta: {
                    title: "工艺工程师工作评定详情",
                },
                component: () => import("../views/deliveryAssessment/processEngineerEvaluate"),
            },
            {
                // 工艺工程师
                path: "testerWorkerEvaluate",
                meta: {
                    title: "实验员工作评定",
                },
                component: () => import("../views/deliveryAssessment/testerWorkerEvaluate"),
            },
            {
                // 工艺工程师
                path: "addTesterWorkerEvaluate",
                name: 'AddTesterWorkerEvaluate',
                meta: {
                    title: "新增实验员工作评定",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/testerWorkerEvaluate/add"),
            },
            {
                // 工艺工程师
                path: "chemistEvaluate",
                meta: {
                    title: "化验师工作评定",
                },
                component: () => import("../views/deliveryAssessment/chemistEvaluate"),
            },
            {
                // 工艺工程师
                path: "addchemistEvaluate",
                name: 'AddchemistEvaluate',
                meta: {
                    title: "新增化验师工作评定",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/chemistEvaluate/add"),
            },
        ]
    }

 culture/src/views/deliveryAssessment/chemistEvaluate/add.vue

File was deleted

 culture/src/views/deliveryAssessment/chemistEvaluate/index.vue

File was deleted

 culture/src/views/deliveryAssessment/clinicalTrial/components/detail.vue

File was deleted

 culture/src/views/deliveryAssessment/clinicalTrial/index.vue

File was deleted

 culture/src/views/deliveryAssessment/experimentResults/components/detail.vue

File was deleted

 culture/src/views/deliveryAssessment/processEngineerEvaluate/index.vue

File was deleted

 culture/src/views/deliveryAssessment/projectTeamIntegral/detail.vue

@@ -9,11 +9,11 @@
                </div>
            </div>
            <div class="top-box-integral">
                <div :style="{ backgroundColor: ['rgba(232, 250, 246, 1)', 'rgba(255, 243, 213, 1)', 'rgba(254, 237, 220, 1)', 'rgba(239, 248, 255, 1)', 'rgba(255, 237, 238, 1)'][item - 1] }"
                    v-for="item in 5" :key="item" class="top-box-integral-card">
                    <div class="top-box-integral-card-title">{{ ['项目组总积分', '工艺工程师积分', '化验师积分', '实验员积分', '实验终止次数'][item -
                <div :style="{ backgroundColor: ['rgba(232, 250, 246, 1)', 'rgba(254, 237, 220, 1)', 'rgba(239, 248, 255, 1)', 'rgba(255, 237, 238, 1)'][item - 1] }"
                    v-for="item in 4" :key="item" class="top-box-integral-card">
                    <div class="top-box-integral-card-title">{{ ['项目组总积分', '化验师积分', '实验员积分', '实验终止次数'][item -
                        1] }}</div>
                    <div :style="{ color: ['rgba(4, 156, 154, 1)', 'rgba(255, 197, 61, 1)', 'rgba(255, 147, 0, 1)', 'rgba(23, 119, 213, 1)', 'rgba(255, 73, 85, 1)'][item - 1] }"
                    <div :style="{ color: ['rgba(4, 156, 154, 1)', 'rgba(255, 147, 0, 1)', 'rgba(23, 119, 213, 1)', 'rgba(255, 73, 85, 1)'][item - 1] }"
                        class="top-box-integral-card-num">99.9</div>
                </div>
            </div>
@@ -22,9 +22,8 @@
            <div class="integral-content-box">
                <div class="integral-content-box-left">
                    <div @click="changeActiveItem(item)" class="integral-content-box-left-item"
                        :class="actionsLeftTab == item && 'activeItem'" v-for="item in 3" :key="item">
                        <div>{{ ['工艺工程师', '化验师', '实验员'][item - 1] }}</div>
                        <div>工作内容评定</div>
                        :class="actionsLeftTab == item && 'activeItem'" v-for="item in 2" :key="item">
                        <div>{{ ['菌种工程师', '菌种实验员'][item - 1] }}</div>
                    </div>
                </div>
                <div class="integral-content-box-right">
@@ -36,7 +35,6 @@
                        <div>评定情况</div>
                        <div>开始时间</div>
                        <div>结束时间</div>
                        <div>操作</div>
                    </div>
                    <div class="integral-content-box-right-body">
                        <div v-for="item in itemList" :key="item" class="integral-content-box-right-body-item">
@@ -47,9 +45,6 @@
                            </div>
                            <div></div>
                            <div></div>
                            <div>
                                <el-button type="text">修改</el-button>
                            </div>
                        </div>
                    </div>
                </div>
@@ -67,109 +62,28 @@
            actionspPersonnel: null,
            craftList: [
                {
                    gainer: '1、项目可研报告',
                    gainer: '1、创新型课题',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目可行报告',
                    gainer: '2、规程型课题',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目实验室开发阶段',
                    situationOne: '实验数：',
                    gainer: '3、实验操作评定',
                    situationOne: '考核数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '5、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '6、工艺开发工具',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '7、验证与开发',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '8、立项报告',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '9、临床实验积分',
                    situationTwo: '积分数：',
                },
            ],//工艺工程师-工作内容评定
            ],//菌种工程师
            assayList: [
                {
                    gainer: '1、项目开发阶段',
                    situationOne: '实验数：',
                    gainer: '1、实验操作评定',
                    situationOne: '考核数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、项目检测项、检验包评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '5、中试、生产验证试验检验分析报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '6、原辅料、包材、竞品检验分析报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '7、产品报批及项目工作总结报告评定',
                    situationOne: '课题数：',
                    situationTwo: '积分数：',
                },
            ],//化验师-工作内容评定
            experimentList: [
                {
                    gainer: '1、项目实验室开发阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '2、项目中试试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '3、项目生产验证试验阶段',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
                {
                    gainer: '4、其他任务',
                    situationOne: '实验数：',
                    situationTwo: '积分数：',
                },
            ],//实验员-工作内容评定
            ],//菌种实验员
        }
    },
    computed: {
@@ -179,8 +93,6 @@
                    return this.craftList
                case 2:
                    return this.assayList
                case 3:
                    return this.experimentList
                default:
                    return this.craftList
            }

 culture/src/views/deliveryAssessment/restsTask/components/detail.vue

File was deleted

 culture/src/views/deliveryAssessment/restsTask/index.vue

File was deleted

 culture/src/views/deliveryAssessment/taskList/components/AssessmentDialog.vue

File was deleted

 culture/src/views/deliveryAssessment/taskList/index.vue

File was deleted

 culture/src/views/deliveryAssessment/testerWorkerEvaluate/add.vue

File was deleted

 culture/src/views/deliveryAssessment/testerWorkerEvaluate/index.vue

File was deleted

 culture/src/views/deliveryAssessment/testingAndEvaluation/components/AssessmentDialog.vue

File was deleted

 culture/src/views/deliveryAssessment/testingAndEvaluation/index.vue

File was deleted

 culture/src/views/strainReportLibrary/reportLibraryOne/add.vue

New file
@@ -0,0 +1,173 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告编号</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告名称</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn{
    display: flex;
    align-items: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOne/components/approval/index.vue

New file
@@ -0,0 +1,393 @@
<template>
    <el-dialog :title="dialogTitle"  :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告编号</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告名称</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告正文</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
                          
        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOne/index.vue

New file
@@ -0,0 +1,232 @@
<template>
    <div class="list">
        <el-card class="header-box">
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon"> <span>设立课题规则</span>
            </div>
            <div class="header-content">
                <p>1、根据可研报告、产品构思设计的工艺研究路线，一条工艺路线设立一个课题。如果一个课题中有多个化合物需要开发研究，则每个化合物作为一个分题；分题归集到该课题中，最终形成课题报告。不同课题报告中的分题不能重复使用。
                </p>
                <p>2、在可行研究阶段，工艺开发升级，重新规划工艺研究路线，则以新规划的工艺路线方案来设定课题。</p>
            </div>
        </el-card>
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告名称：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增可研报告</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        可研报告库
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">待审核</el-tag>
                        <el-tag v-else-if="row.status == 0" type="success">已通过</el-tag>
                        <el-tag v-else type="danger">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">审核</el-button>
                        <el-button type="text">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/reportLibrary/add')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneFour/add.vue

New file
@@ -0,0 +1,173 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告编号</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告名称</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn{
    display: flex;
    align-items: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneFour/components/approval/index.vue

New file
@@ -0,0 +1,393 @@
<template>
    <el-dialog :title="dialogTitle"  :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告编号</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告名称</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告正文</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
                          
        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneFour/index.vue

New file
@@ -0,0 +1,232 @@
<template>
    <div class="list">
        <el-card class="header-box">
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon"> <span>设立课题规则</span>
            </div>
            <div class="header-content">
                <p>1、根据可研报告、产品构思设计的工艺研究路线，一条工艺路线设立一个课题。如果一个课题中有多个化合物需要开发研究，则每个化合物作为一个分题；分题归集到该课题中，最终形成课题报告。不同课题报告中的分题不能重复使用。
                </p>
                <p>2、在可行研究阶段，工艺开发升级，重新规划工艺研究路线，则以新规划的工艺路线方案来设定课题。</p>
            </div>
        </el-card>
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告名称：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增可研报告</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        可研报告库
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">待审核</el-tag>
                        <el-tag v-else-if="row.status == 0" type="success">已通过</el-tag>
                        <el-tag v-else type="danger">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">审核</el-button>
                        <el-button type="text">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/reportLibrary/add')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneTWO/add.vue

New file
@@ -0,0 +1,173 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告编号</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告名称</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn{
    display: flex;
    align-items: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneTWO/components/approval/index.vue

New file
@@ -0,0 +1,393 @@
<template>
    <el-dialog :title="dialogTitle"  :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告编号</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告名称</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告正文</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
                          
        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneTWO/index.vue

New file
@@ -0,0 +1,232 @@
<template>
    <div class="list">
        <el-card class="header-box">
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon"> <span>设立课题规则</span>
            </div>
            <div class="header-content">
                <p>1、根据可研报告、产品构思设计的工艺研究路线，一条工艺路线设立一个课题。如果一个课题中有多个化合物需要开发研究，则每个化合物作为一个分题；分题归集到该课题中，最终形成课题报告。不同课题报告中的分题不能重复使用。
                </p>
                <p>2、在可行研究阶段，工艺开发升级，重新规划工艺研究路线，则以新规划的工艺路线方案来设定课题。</p>
            </div>
        </el-card>
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告名称：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增可研报告</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        可研报告库
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">待审核</el-tag>
                        <el-tag v-else-if="row.status == 0" type="success">已通过</el-tag>
                        <el-tag v-else type="danger">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">审核</el-button>
                        <el-button type="text">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/reportLibrary/add')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneThree/add.vue

New file
@@ -0,0 +1,173 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告编号</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告名称</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn{
    display: flex;
    align-items: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneThree/components/approval/index.vue

New file
@@ -0,0 +1,393 @@
<template>
    <el-dialog :title="dialogTitle"  :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告编号</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告名称</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>报告正文</div>
                                </div>
                            </div>
                            <form-item prop="name" style="margin-top: 38px">
                                <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                            </form-item>

                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
                          
        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 culture/src/views/strainReportLibrary/reportLibraryOneThree/index.vue

New file
@@ -0,0 +1,232 @@
<template>
    <div class="list">
        <el-card class="header-box">
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon"> <span>设立课题规则</span>
            </div>
            <div class="header-content">
                <p>1、根据可研报告、产品构思设计的工艺研究路线，一条工艺路线设立一个课题。如果一个课题中有多个化合物需要开发研究，则每个化合物作为一个分题；分题归集到该课题中，最终形成课题报告。不同课题报告中的分题不能重复使用。
                </p>
                <p>2、在可行研究阶段，工艺开发升级，重新规划工艺研究路线，则以新规划的工艺路线方案来设定课题。</p>
            </div>
        </el-card>
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告名称：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：">
                        <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增可研报告</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        可研报告库
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="创建时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <el-tag v-if="row.status == 1" type="success">待审核</el-tag>
                        <el-tag v-else-if="row.status == 0" type="success">已通过</el-tag>
                        <el-tag v-else type="danger">已驳回</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">审核</el-button>
                        <el-button type="text">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/reportLibrary/add')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 laboratory/src/layouts/index.vue

@@ -3,7 +3,7 @@
    <!-- 判断是否在空白页打开 -->
    <template v-if="!isOneself">
      <div class="app-wrapper">
        <div class="left" :style="{ width: isFold ? '0px' : '258px' }">
        <div class="left" :style="{ width: isFold ? '0px' : '298px' }">
          <!-- 系统标题 -->
          <div v-if="!isFold" class="system-title">
            <div class="image">
@@ -19,7 +19,7 @@
          <div v-if="!isFold" class="sidebar-bottom-bg"></div>
        </div>
        <!-- 右侧展示内容 -->
        <div class="main-container" :style="{ width: isFold ? '100%' : 'calc(100% - 258px)' }">
        <div class="main-container" :style="{ width: isFold ? '100%' : 'calc(100% - 298px)' }">
          <HeaderNav class="header-main" />
          <AppContent class="app-main" />
        </div>

 laboratory/src/router/index.js

@@ -403,6 +403,92 @@
        ],
    },
    {
        path: "/chemistQa",
        component: Layouts,
        meta: {
            title: "化验师QA专题报告",
        },
        children: [
            {
                path: "projectTesting",
                meta: {
                    title: "项目检测项、检验包列表",
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/projectTesting/index.vue"),
            },
            {
                path: "add",
                meta: {
                    title: "新增检测项",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/projectTesting/add.vue"),
            },
            {
                path: "addDetectionReport",
                meta: {
                    title: "新增报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/projectTesting/addDetectionReport.vue"),
            },
            {
                path: "pilotAndProduction",
                meta: {
                    title: "中试、生产验证试验检验分析报告",
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/pilotAndProduction/index.vue"),
            },
            {
                path: "addPilot",
                meta: {
                    title: "新增中试、生产验证试验检验分析报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/pilotAndProduction/add.vue"),
            },
            {
                path: "rawMaterials",
                meta: {
                    title: "原辅料、包材、竞品检验分析报告",
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/rawMaterials/index.vue"),
            },
            {
                path: "addRawMaterials",
                meta: {
                    title: "新增原辅料、包材、竞品检验分析报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/rawMaterials/add.vue"),
            },
            {
                path: "productApproval",
                meta: {
                    title: "产品报批及项目工作总计报告",
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/productApproval/index.vue"),
            },
            {
                path: "addProductApproval",
                meta: {
                    title: "新增产品报批及项目工作总计报告",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/chemistQa/productApproval/add.vue"),
            },
        ],
    },
    {
        path: "/deliveryAssessment",
        component: Layouts,
        meta: {
@@ -441,7 +527,7 @@
                component: () => import("../views/deliveryAssessment/restsTask"),
            },
            {
                // 超级管理员 工艺工程师
                // 超级管理员 工艺工程师 审批人
                path: "clinicalTrial",
                meta: {
                    title: "临床试验积分列表",
@@ -449,7 +535,7 @@
                component: () => import("../views/deliveryAssessment/clinicalTrial"),
            },
            {
                // 化验师 审批人
                // 化验师 审批人 工艺工程师
                path: "testingAndEvaluation",
                meta: {
                    title: "检测项评定列表",
@@ -473,7 +559,7 @@
                component: () => import("../views/deliveryAssessment/assayTaskList"),
            },
            {
                // 工艺工程师
                // 工艺工程师 审批人
                path: "processEngineerEvaluate",
                meta: {
                    title: "工艺工程师工作评定详情",
@@ -518,6 +604,46 @@
                },
                component: () => import("../views/deliveryAssessment/chemistEvaluate/add"),
            },
            {
                // 工艺工程师
                path: "QAList",
                name: 'QAList',
                meta: {
                    title: "化验师QA专题报告评定",
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/QA"),
            },
            {
                // 审批人
                path: "experimenterJobEvaluation",
                name: 'ExperimenterJobEvaluation',
                meta: {
                    title: "实验员工作评定详情",
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/experimenterJobEvaluation"),
            },
            {
                // 审批人
                path: "technicianJobEvaluation",
                name: 'TechnicianJobEvaluation',
                meta: {
                    title: "化验师工作评定详情",
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/technicianJobEvaluation"),
            },
            {
                // 审批人
                path: "reportEvaluation",
                name: 'ReportEvaluation',
                meta: {
                    title: "专业报告库评定",
                    keepAlive: true,
                },
                component: () => import("../views/deliveryAssessment/reportEvaluation"),
            },
        ]
    }
];

 laboratory/src/views/chemistQa/pilotAndProduction/add.vue

New file
@@ -0,0 +1,172 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <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>
                        <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                        </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>
                        <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>
                    </el-col>

                </el-row>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </el-form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    button {
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 laboratory/src/views/chemistQa/pilotAndProduction/components/approval/index.vue

New file
@@ -0,0 +1,397 @@
<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <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>
                                    <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                                    </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>
                                    <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>
                                </el-col>

                            </el-row>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <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>
                            <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>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;

        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 laboratory/src/views/chemistQa/pilotAndProduction/index.vue

New file
@@ -0,0 +1,211 @@
<template>
    <div class="list">
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告标题">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        中试、生产验证试验检验分析报告
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="制定日期" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="showApproval = true">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/chemistQa/addPilot')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    // width: 166px;1
    height: 50px;
    padding: 0 29px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 laboratory/src/views/chemistQa/productApproval/add.vue

New file
@@ -0,0 +1,172 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <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>
                        <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                        </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>
                        <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>
                    </el-col>

                </el-row>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </el-form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    button {
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 laboratory/src/views/chemistQa/productApproval/components/approval/index.vue

New file
@@ -0,0 +1,397 @@
<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <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>
                                    <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                                    </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>
                                    <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>
                                </el-col>

                            </el-row>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <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>
                            <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>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;

        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 laboratory/src/views/chemistQa/productApproval/index.vue

New file
@@ -0,0 +1,211 @@
<template>
    <div class="list">
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告标题">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        原辅料、包材、竞品检验分析报告
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="制定日期" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="showApproval = true">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/chemistQa/addPilot')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    // width: 166px;1
    height: 50px;
    padding: 0 29px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 laboratory/src/views/chemistQa/projectTesting/add.vue

New file
@@ -0,0 +1,173 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>检测项名称</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入检测项名称" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>检测项编号</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" style="width: 100%;" placeholder="请输入检测项编号" />
                </form-item>

                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>备注内容</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <el-input v-model="form.name" type="textarea" :rows="4" style="width: 100%;" placeholder="请输入备注内容" />
                </form-item>
                <!-- <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div> -->
                <!-- <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>
                    </el-upload>
                </form-item> -->

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn{
    display: flex;
    align-items: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 laboratory/src/views/chemistQa/projectTesting/addDetectionReport.vue

New file
@@ -0,0 +1,172 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <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>
                        <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                        </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>
                        <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>
                    </el-col>

                </el-row>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </el-form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    button {
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 laboratory/src/views/chemistQa/projectTesting/components/approval/index.vue

New file
@@ -0,0 +1,391 @@
<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <el-form-item prop="name" label="报告内容">
                                <el-select v-model="form.name" placeholder="请选择报告内容">
                                    <el-option label="报告内容1" value="1"></el-option>
                                    <el-option label="报告内容2" value="2"></el-option>
                                </el-select>
                            </el-form-item>

                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <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>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <div>附件</div>
                                </div>
                            </div>
                            <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>
                                </el-upload>
                            </el-form-item>

                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;

        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 laboratory/src/views/chemistQa/projectTesting/index.vue

New file
@@ -0,0 +1,308 @@
<template>
    <div class="list">
        <TableCustom :queryForm="queryForm" :tableData="dataList" :total="total"  @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="检测项名称：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="检测项编号：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告内容：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增检测项</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        项目检测项、检验包列表
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #tableCustom>
                <Table :data="tableData" :total="0" @row-click="handleRowClick" row-key="id"
                    :expand-row-keys="expandRowKeys">
                    <el-table-column type="expand" width="1">
                        <template #default="{ row }">
                            <div class="expand-box">
                                <div style="display: flex;align-items: center;"><div class="expand-box-title">报告列表 </div>  <el-button style="margin-left: 10px;" @click="handleAdd" class="el-icon-plus" type="primary">
                                    新增报告 </el-button> </div>
                                
                                <Table :total="0" :height="null">
                                    <el-table-column prop="name" label="报告内容" />
                                    <el-table-column prop="name" label="制订人" />
                                    <el-table-column prop="name" label="制订日期" />
                                    <el-table-column prop="name" label="审批人" />
                                    <el-table-column prop="name" label="审批时间" />
                                    <el-table-column prop="age" label="状态">
                                        <template #default="{ row }">
                                            <el-tag v-if="row.status == 0" type="info" color="#fff">待审核</el-tag>
                                            <el-tag v-if="row.status == 1" type="success" color="#fff">已通过</el-tag>
                                            <el-tag v-else type="danger">未通过</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="age" label="操作">
                                        <template #default="{ row }">
                                            <el-button type="text">详情</el-button>
                                        </template>
                                    </el-table-column>
                                </Table>
                            </div>
                        </template>
                    </el-table-column>
                    <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="age" label="创建人" />
                    <el-table-column prop="age" label="创建时间" />
                    <el-table-column prop="age" label="审批时间" />
                    <el-table-column prop="age" label="状态">
                        <template #default="{ row }">
                            <el-tag v-if="row.status == 1" type="info" color="#fff">已评定</el-tag>
                            <el-tag v-else type="success">待评定</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="age" label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="showApproval = true">详情</el-button>
                        </template>
                    </el-table-column>
                </Table>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            tableData: [
                {
                    name: '项目组1',
                    age1: '检测项名称1',
                    age2: '检测项编号1',
                    age3: '报告内容1',
                    age4: '创建人1',
                    age5: '创建时间1',
                    age6: '审批时间1',
                    age7: '状态1'
                }
            ],
            expandRowKeys: [],
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/chemistQa/add')
        },
        handleAdd() {
            this.$router.push('/chemistQa/addDetectionReport')
        },
        handleRowClick(row, column, event) {
            if (column.label === '操作') return
            if (this.expandRowKeys.includes(row.id)) {
                this.expandRowKeys = this.expandRowKeys.filter(key => key !== row.id);
            } else {
                this.expandRowKeys.push(row.id);
            }
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    // width: 166px;1
    height: 50px;
    padding: 0 29px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}


.table-title {
    width: 220px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.expand-box {
    padding: 20px;
    background: linear-gradient(180deg, #049C9A 0%, #0ACBCA 100%);
    border-radius: 20px;

    &-title {
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 24px;
        margin-bottom: 20px;
    }
}
</style>

 laboratory/src/views/chemistQa/rawMaterials/add.vue

New file
@@ -0,0 +1,172 @@
<template>
    <div>
        <Card>
            <div class="header-title" style="width: 100%;">
                <div class="header-title-left">
                    <img src="@/assets/public/headercard.png" />
                    <div>所属项目组</div>
                </div>
                <div class="header-title-right">
                    <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
                        选择项目组</el-button>
                </div>

            </div>
            <Table :height="null" :queryForm="queryForm" :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="创建时间" />
                </template>
            </Table>
            <el-form ref="form" :model="form" :rules="rules" inline label-position="top" style="margin-top: 38px">
                <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>
                        <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                        </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>
                        <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>
                    </el-col>

                </el-row>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>报告正文</div>
                    </div>
                </div>
                <form-item prop="name" style="margin-top: 38px">
                    <ai-editor v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                </form-item>
                <div class="header-title" style="width: 100%;">
                    <div class="header-title-left">
                        <img src="@/assets/public/headercard.png" />
                        <div>附件</div>
                    </div>
                </div>
                <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>
                    </el-upload>
                </el-form-item>

                <div class="end-btn" style="margin-top: 38px">
                    <el-button type="primary">发送</el-button>
                    <el-button type="default">存草稿</el-button>
                </div>
            </el-form>
        </Card>
    </div>

</template>
<script>
import { Card } from 'element-ui';
import AiEditor from '@/components/AiEditor'
export default {
    components: { AiEditor },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            fileList: [], // 附件列表
            showChoose: false,
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
            queryForm: {

            }
        }
    }
}

</script>

<style lang="less" scoped>
.header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.end-btn {
    display: flex;
    align-items: center;
    gap: 10px;

    button {
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
</style>

 laboratory/src/views/chemistQa/rawMaterials/components/approval/index.vue

New file
@@ -0,0 +1,397 @@
<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" po :close-on-click-modal="false"
        @close="handleClose">
        <div class="approval-dialog">
            <!-- 左侧审批内容 -->
            <div class="approval-content">
                <Card class="approval-content-card">
                    <template style="position: relative">
                        <div class="header-title" style="width: 100%;">
                            <div class="header-title-left">
                                <img src="@/assets/public/headercard.png" />
                                <div>所属项目组</div>
                            </div>
                        </div>
                        <Table :height="null" :queryForm="queryForm" :total="0" @currentChange="handleCurrentChange"
                            @sizeChange="handleSizeChange">
                            <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="创建时间" />
                            </template>
                        </Table>


                        <el-form ref="form" :model="form" :rules="rules" inline label-position="top"
                            style="margin-top: 38px">
                            <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>
                                    <el-form-item prop="name" label="报告编号" style="margin-left: 100px;">
                                        <el-input v-model="form.name" style="width: 100%;" placeholder="请输入报告编号" />
                                    </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>
                                    <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>
                                </el-col>

                            </el-row>
                            <div class="header-title" style="width: 100%;">
                                <div class="header-title-left">
                                    <img src="@/assets/public/headercard.png" />
                                    <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>
                            <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>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- <SelectMember ref="selectMember" /> -->
                </Card>
            </div>
            <!-- 右侧审批流程 -->
            <div class="approval-flow">
                <div class="flow-content">
                    <approval-process :status="form.status" :submit-time="form.createTime" :approver="form.approver"
                        :approve-time="form.approveTime" />
                </div>
            </div>
        </div>
        <div class="approval-dialog-approve">
            <el-row :span="24">
                <el-col :span="12">
                    <div class="status">
                        <div class="status-title">审批结果</div>
                        <div class="status-content">
                            <div class="resolve" :class="status == '1' && 'activeStatus'" @click.stop="status = 1">
                                通过
                            </div>
                            <div class="reject" :class="status == '2' && 'activeStatus'" @click.stop="status = 2">
                                驳回
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="remark">
                        <div class="remark-title">审批意见</div>
                        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见" />
                    </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>
        </div>
    </el-dialog>
</template>

<script>
import ApprovalProcess from '@/components/approvalProcess'
import AiEditor from '@/components/AiEditor'

export default {
    name: "ApprovalDialog",
    components: {
        ApprovalProcess,
        AiEditor
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "approve", // approve-审批，view-查看
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            form: {
                planName: "",
                planCode: "",
                stage: "",
                creator: "",
                createTime: "",
                approvalComment: "",
                status: "pending",
                approver: "",
                approveTime: ""
            },
            radio1: 1,
            rules: {},
            status: "1",
            remark: "",
        };
    },
    computed: {
        dialogTitle() {
            return this.type === "approve" ? "审批" : "审批详情";
        },
    },
    watch: {
        data: {
            handler(val) {
                if (val) {
                    this.form = { ...val };
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleClose() {
            this.$emit("close");
            this.form.approvalComment = "";
        },
        handleApprove() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("approve", {
                ...this.form,
                status: "approved",
            });
        },
        handleReject() {
            if (!this.form.approvalComment) {
                this.$message.warning("请输入审批意见");
                return;
            }
            this.$emit("reject", {
                ...this.form,
                status: "rejected",
            });
        },
    },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
}

.approval-dialog {
    display: flex;
    height: 40vh;

    .approval-content {
        flex: 3;
        margin-right: 20px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
    }

    .approval-flow {
        padding: 40px 20px;
        // width: 405px;
        flex: 2;
        background: #ffffff;
        box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
        border-radius: 10px;

        .flow-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #303133;
        }

        .flow-content {
            height: calc(100% - 40px);
            overflow-y: auto;

            .el-form--inline .el-form-item {
                margin-right: 83px;
            }
        }
    }
}

.approval-content-card {
    height: calc(100% - 100px) !important;
    box-shadow: none !important;
}

.header-title {
    // display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 13px;

    .header-title-left {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 38px;

        img {
            width: 12px;
            height: 19px;
        }

        div {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";

            &:before {
                content: "*";
                color: #f56c6c;
                margin-right: 4px;
            }
        }

        span {
            flex-shrink: 0;
            font-weight: bold;
            font-size: 18px;
            color: #222222;
            line-height: 27px;
            font-family: "Source Han Sans CN Bold Bold";
        }
    }

    .header-title-left :first-child {
        margin-top: 0;
    }
}

.header-title:first-child {
    .header-title-left {
        margin-top: 0;
    }
}

.item-title {
    padding-left: 25px;

    span {
        flex-shrink: 0;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 27px;
        font-family: "Source Han Sans CN Bold Bold";
        margin: 18px 0;

        &:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
}

.approval-dialog-approve {
    padding: 38px 20px;
    // display: flex;
    align-content: center;

    .status {
        margin-right: 40px;
        max-width: 60%;
    }

    //   align-items: center;
    .status-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }

    .status-content {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(4, 156, 154, 0.5);

        .resolve {
            border-radius: 10px;
            flex: 1;
            font-size: 16px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            line-height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .reject {
            flex: 1;
            border-radius: 10px;
            font-size: 16px;
            line-height: 32px;
            // padding: 5px 55px;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .activeStatus {
            background: #ebfefd;
            color: #049c9a;
            box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
            border-radius: 10px;
        }
    }

    .remark-title {
        color: #222222;
        font-family: "SourceHanSansCN-Medium";
        line-height: 14px;
        margin-bottom: 16px;
    }
}

.dialog-footer {
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 20px;

    button {
        width: 150px;
    }
}
</style>

 laboratory/src/views/chemistQa/rawMaterials/index.vue

New file
@@ -0,0 +1,211 @@
<template>
    <div class="list">
        <TableCustom :queryForm="queryForm" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告标题">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="报告编号">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已通过" value="0"></el-option>
                            <el-option label="已驳回" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" style="margin-left: 63px;">
                        <el-button type="default" style="margin-right: 10px;">重置</el-button>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增</el-button>
                <div class="table-setting">
                    <div class="table-title">
                        原辅料、包材、竞品检验分析报告
                    </div>
                    <div class="table-tit">
                        草稿箱
                    </div>
                </div>

            </template>
            <template #table>
                <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="age" label="制定日期" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="showApproval = true">详情</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Approval :visible="showApproval" @close="showApproval = false" />
        <ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
        <ShowDelConfirm :title="changeStatusTitle" :tip="changeStatusTip" :show="changeStatus"
            @close="changeStatus = false" @confirm="handleChangeStatusConfirm" />
    </div>
</template>

<script>
import Approval from './components/approval'

export default {
    name: 'ProjectList',
    components: {
        Approval
    },
    data() {
        return {
            form: {
                name: ''
            },
            showDelConfirm: false,
            rowId: '',
            changeStatus: false,
            showApproval: false,
            changeStatusTitle: '',
            changeStatusTip: '',
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 0
        }
    },
    methods: {
        handleAddProject() {
            this.$router.push('/chemistQa/addPilot')
        },
        handleDel(row) {
            this.rowId = row.id
            this.showDelConfirm = true
        },
        handleDelConfirm() {
            this.showDelConfirm = false
            this.msgsuccess('删除成功')
            this.rowId = ''
            this.getList()
        },
        handleChangeStatus(row, status) {
            this.rowId = row.id
            this.changeStatusTitle = status == 1 ? '确认要封存这个项目组吗？' : '确认要解封该项目组吗？'
            this.changeStatusTip = status == 1 ? '封存后项目组内人员看不到数据，审批人仍然可见数据。' : '解封后项目组内人员数据恢复。'
            this.changeStatus = true
        },
        handleChangeStatusConfirm() {
            this.changeStatus = false
            this.msgsuccess('操作成功')
            this.rowId = ''
            this.changeStatusTitle = ''
            this.changeStatusTip = ''
            this.getList()
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            this.getList()
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            this.getList()
        },
        getList() {

        }
    }
}
</script>

<style scoped lang="less">
.el-icon-plus{
    margin-bottom: 20px;
}
.header-content {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-left: 30px;
}

.box-title {
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    line-height: 27px;
    display: flex;
    align-items: center;
}

.header-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.header-box {
    border-radius: 16px;
    margin-bottom: 30px;
}

.table-setting {
    display: flex;
    gap: 14px;
}

.table-tit {
    background: #FAFAFC;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #DCDFE6;
    width: 166px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}

.list {
    height: 100%;
}

.table-title {
    // width: 166px;1
    height: 50px;
    padding: 0 29px;
    background: #FFFFFF;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049C9A;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-bottom: 21px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 18px;
    color: #049C9A;
    line-height: 27px;
}
</style>

 laboratory/src/views/deliveryAssessment/QA/components/AssessmentDialog.vue

File was renamed from culture/src/views/deliveryAssessment/assayTaskList/components/AssessmentDialog.vue
@@ -27,7 +27,7 @@
                                <el-input-number v-model="row.score" :min="0" :max="row.fullScore" :step="1" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="rule" label="创新型课题报告评分规则">
                        <el-table-column label="创新型课题报告评分规则">
                            <template>
                                <div>
                                    <div>1、规程型课题评定总分的满分为5分。</div>
@@ -43,10 +43,11 @@
                </el-col>
            </el-row>
        </div>
        <div class="assessed">
            <div>评定时间：2025-2-20 11:08:00</div>
            <div>评定人：张三</div>
        </div>
        <template #footer>
            <span class="select-member-footer">
                <el-button type="primary">提交评定结果</el-button>
            </span>
        </template>
    </el-dialog>
</template>

@@ -196,13 +197,5 @@
            line-height: 23px;
        }
    }
}

.assessed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
}
</style>

 laboratory/src/views/deliveryAssessment/QA/index.vue

copy from culture/src/views/deliveryAssessment/assayTaskList/index.vue
copy to laboratory/src/views/deliveryAssessment/QA/index.vue
File was copied from culture/src/views/deliveryAssessment/assayTaskList/index.vue
@@ -4,16 +4,16 @@
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="140px" inline>
                    <el-form-item label="项目组名称：">
                    <el-form-item label="所属项目组：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="课题类型：">
                    <el-form-item label="检测项名称：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="课题名称：">
                    <el-form-item label="检测项编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="提交人：">
                    <el-form-item label="报告内容：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="状态：">
@@ -26,22 +26,19 @@
                </el-form>
            </template>
            <template #setting>
                <div class="top-box-integral">
                    <div style="background-color:rgba(232, 250, 246, 1)" v-for="item in 3" :key="item"
                        class="top-box-integral-card">
                        <div class="top-box-integral-card-title">{{ ['课题合计数量', '待评定', '已评定'][item - 1] }}</div>
                        <div style="color:rgba(4, 156, 154, 1)" class="top-box-integral-card-num">99.9</div>
                    </div>
                <div class="tableTitle">
                    <div class="title active">
                        化验师QA专题报告列表</div>
                </div>
            </template>
            <template #table>
                <el-table-column prop="name" label="报告类型" />
                <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="age" label="提交人" />
                <el-table-column prop="age" label="评定结果" />
                <el-table-column prop="age" label="累积分值" />
                <el-table-column prop="age" label="报告编号" />
                <el-table-column prop="age" label="制定人" />
                <el-table-column prop="age" label="制定日期" />
                <el-table-column prop="age" label="评定人" />
                <el-table-column prop="age" label="评定时间" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
@@ -57,23 +54,18 @@
            </template>
        </TableCustom>

        <!-- 化验师 审批人 -->
        <AssessmentDialog :modelValue="assessmentVisible" :reportData="currentReport" />

        <!-- 工艺工程师 -->
        <CraftDialog :modelValue="craftVisible" :reportData="currentReport" />
        <AssessmentDialog :modelValue="assessmentVisible" :reportData="currentReport" />
    </div>
</template>

<script>
import AssessmentDialog from './components/AssessmentDialog.vue'
import CraftDialog from './components/CraftDialog.vue'

export default {
    name: 'AssayTaskList',
    name: 'QAList',
    components: {
        AssessmentDialog,
        CraftDialog
    },
    data() {
        return {
@@ -85,9 +77,8 @@
                pageNum: 1
            },
            total: 0,
            assessmentVisible: false,
            assessmentVisible: true,
            currentReport: {},
            craftVisible: false,
        }
    },
    methods: {
@@ -151,4 +142,27 @@
        }
    }
}

.tableTitle {
    display: flex;

    .title {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        padding: 16px 29px;
        font-weight: bold;
        font-size: 18px;
        color: #606266;
        width: unset;
        cursor: pointer;
    }

    .active {
        color: #049c9a;
        background: #ffffff;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #049c9a;
    }
}
</style>

 laboratory/src/views/deliveryAssessment/chemistEvaluate/index.vue

@@ -179,7 +179,6 @@

.tableTitle {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: center;


 laboratory/src/views/deliveryAssessment/experimenterJobEvaluation/index.vue

File was renamed from culture/src/views/deliveryAssessment/experimentResults/index.vue
@@ -4,13 +4,10 @@
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="140px" inline>
                    <el-form-item label="项目课题方案名称：">
                    <el-form-item label="所属项目课题方案：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="所属实验编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="实验名称：">
                    <el-form-item label="实验编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="创建时间：">
@@ -18,7 +15,7 @@
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="项目阶段：">
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
@@ -32,37 +29,34 @@
            </template>
            <template #table>
                <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="age" label="工艺工程师" />
                <el-table-column prop="age" label="化验师" />
                <el-table-column prop="age" label="实验员" />
                <el-table-column prop="age" label="是否评定">
                <el-table-column prop="age" label="创建日期" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <span :style="{ color: ['green', 'red'][row.status - 1] }">{{ ['是', '否'][row.status - 1]
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="创建日期" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">评定详情</el-button>
                        <el-button type="text">详情</el-button>
                        <el-button type="text">评定</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Detail :modelValue="assessmentVisible" :reportData="currentReport" />
    </div>
</template>

<script>
import Detail from './components/detail.vue'

export default {
    name: 'ExperimentResults',
    name: 'ExperimenterJobEvaluation',
    components: {
        Detail
    },
    data() {
        return {
@@ -74,8 +68,6 @@
                pageNum: 1
            },
            total: 0,
            assessmentVisible: false,
            currentReport: {}
        }
    },
    methods: {

 laboratory/src/views/deliveryAssessment/reportEvaluation/components/CraftDialog.vue

File was renamed from culture/src/views/deliveryAssessment/assayTaskList/components/CraftDialog.vue
@@ -55,6 +55,11 @@
            <div>评定时间：2025-2-20 11:08:00</div>
            <div>评定人：张三</div>
        </div>
        <template #footer>
            <span class="select-member-footer">
                <el-button type="primary">提交评定结果</el-button>
            </span>
        </template>
    </el-dialog>
</template>


 laboratory/src/views/deliveryAssessment/reportEvaluation/index.vue

File was renamed from culture/src/views/deliveryAssessment/assayTaskList/index.vue
@@ -52,27 +52,23 @@
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">详情</el-button>
                        <el-button type="text">评定</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <!-- 化验师 审批人 -->
        <AssessmentDialog :modelValue="assessmentVisible" :reportData="currentReport" />

        <!-- 工艺工程师 -->
        <!-- 审批人 -->
        <CraftDialog :modelValue="craftVisible" :reportData="currentReport" />
    </div>
</template>

<script>
import AssessmentDialog from './components/AssessmentDialog.vue'
import CraftDialog from './components/CraftDialog.vue'

export default {
    name: 'AssayTaskList',
    name: 'ReportEvaluation',
    components: {
        AssessmentDialog,
        CraftDialog
    },
    data() {
@@ -85,7 +81,6 @@
                pageNum: 1
            },
            total: 0,
            assessmentVisible: false,
            currentReport: {},
            craftVisible: false,
        }

 laboratory/src/views/deliveryAssessment/technicianJobEvaluation/index.vue

copy from culture/src/views/deliveryAssessment/experimentResults/index.vue
copy to laboratory/src/views/deliveryAssessment/technicianJobEvaluation/index.vue
File was copied from culture/src/views/deliveryAssessment/experimentResults/index.vue
@@ -4,13 +4,10 @@
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="140px" inline>
                    <el-form-item label="项目课题方案名称：">
                    <el-form-item label="所属项目课题方案：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="所属实验编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="实验名称：">
                    <el-form-item label="实验编号：">
                        <el-input v-model="form.name" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="创建时间：">
@@ -18,7 +15,7 @@
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="项目阶段：">
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
@@ -32,37 +29,34 @@
            </template>
            <template #table>
                <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="age" label="工艺工程师" />
                <el-table-column prop="age" label="化验师" />
                <el-table-column prop="age" label="实验员" />
                <el-table-column prop="age" label="是否评定">
                <el-table-column prop="age" label="创建日期" />
                <el-table-column prop="age" label="状态">
                    <template #default="{ row }">
                        <span :style="{ color: ['green', 'red'][row.status - 1] }">{{ ['是', '否'][row.status - 1]
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="创建日期" />
                <el-table-column prop="age" label="操作">
                    <template #default="{ row }">
                        <el-button type="text">评定详情</el-button>
                        <el-button type="text">详情</el-button>
                        <el-button type="text">评定</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>

        <Detail :modelValue="assessmentVisible" :reportData="currentReport" />
    </div>
</template>

<script>
import Detail from './components/detail.vue'

export default {
    name: 'ExperimentResults',
    name: 'TechnicianJobEvaluation',
    components: {
        Detail
    },
    data() {
        return {
@@ -74,8 +68,6 @@
                pageNum: 1
            },
            total: 0,
            assessmentVisible: false,
            currentReport: {}
        }
    },
    methods: {

 laboratory/src/views/deliveryAssessment/testingAndEvaluation/components/AssessmentDialog.vue

@@ -43,10 +43,17 @@
                </el-col>
            </el-row>
        </div>
        <!-- 化验师 审批人 -->
        <div class="assessed">
            <div>评定时间：2025-2-20 11:08:00</div>
            <div>评定人：张三</div>
        </div>
        <!-- 工艺工程师 -->
        <!-- <template #footer>
            <span class="select-member-footer">
                <el-button type="primary">提交评定结果</el-button>
            </span>
        </template> -->
    </el-dialog>
</template>


 laboratory/src/views/deliveryAssessment/testingAndEvaluation/index.vue

@@ -70,6 +70,8 @@
                    </el-table-column>
                    <el-table-column prop="age" label="操作">
                        <template #default="{ row }">
                            <!-- 工艺工程师 -->
                            <!-- <el-button type="text" @click="assessmentVisible = true">评定</el-button> -->
                            <el-button type="text" @click="assessmentVisible = true">详情</el-button>
                        </template>
                    </el-table-column>
@@ -111,7 +113,7 @@
            if (this.expandRowKeys.includes(row.id)) {
                this.expandRowKeys = this.expandRowKeys.filter(key => key !== row.id);
            } else {
                this.expandRowKeys.push(row.id);
                this.expandRowKeys = [row.id];
            }
        },
        handleCurrentChange(page) {