实验结果汇报列表

董国庆

2025-04-21 2d3207495e609946f5838da3b12e78e3046ada7f

实验结果汇报列表

 src/components/EvaluateTable/index.vue

@@ -149,12 +149,20 @@
            },
            deep: true
        },
        isReadonly: {
        viewJson: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.activeIndex = JSON.parse(this.viewJson)
                console.log("viewJson changed:", newVal)
                if (newVal && this.isReadonly) {
                    try {
                        const parsedData = JSON.parse(newVal)
                        this.activeIndex = parsedData
                        console.log("activeIndex updated:", this.activeIndex)
                    } catch (e) {
                        console.error("Failed to parse viewJson:", e)
                    }
                }
            },
            immediate: true
        }
    },
    data() {

 src/router/index.js

@@ -298,6 +298,24 @@
                },
                component: () => import("../views/dataManagement/inspectionReport/detail.vue"),
            },
            {
                path: "testResultReport",
                meta: {
                    title: "实验结果汇报",
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/testResultReport/list.vue"),
            },
            {
                path: "testResultReport/detail",
                name: "testResultReportDetail",
                meta: {
                    title: "实验结果详情",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/testResultReport/detail.vue"),
            },
        ],
    },
    {

 src/views/dataManagement/testResultReport/components/checkout-result.vue

New file
@@ -0,0 +1,108 @@
<template>
    <el-dialog
      title="检验数据结果汇总"
      :visible.sync="visible"
      width="80%"
      :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">
                <div class="header-title-left">
                  <img src="@/assets/public/headercard.png" />
                  <span>本次检验结果总表</span>
                </div>
              </div>
              
              <div class="header-title">
                <div class="header-title-left">
                  <img src="@/assets/public/headercard.png" />
                  <span>本次检验说明</span>
                </div>
              </div>
            </template>
          </Card>
        </div>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name: "CheckoutResult",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      content: {
        type: Object,
        default: () => ({}),
      },
    },
    methods: {
      handleClose() {
        this.$emit("update:visible", false);
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
  }
  
  .approval-dialog {
    display: flex;
    height: 300px;
  
    .approval-content {
      flex: 1;
      margin-right: 20px;
      background: #ffffff;
      border-radius: 10px;
    }
  }
  
  .approval-content-card {
    box-shadow: none !important;
  }
  
  .header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
  
    .header-title-left {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: 38px;
  
      img {
        width: 12px;
        height: 19px;
      }
  
      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:first-child {
    .header-title-left {
      margin-top: 0;
    }
  }
  </style>

 src/views/dataManagement/testResultReport/components/evaluation-dialog.vue

New file
@@ -0,0 +1,84 @@
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    width="79.17%"
    @close="handleClose"
  >
    <EvaluateTable ref="evaluateTable" />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit" class="submit-btn">确认评定结果</el-button>
    </div>
  </el-dialog>
</template>

<script>
const EVALUATION_TYPES = ['labTechnician', 'experimenter'];

export default {
  name: "EvaluationDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'labTechnician'
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    dialogTitle() {
      return this.type === 'labTechnician' ? '化验师工作评定' : '实验员工作评定';
    }
  },
  watch: {
    modelValue: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
      if (!val) {
        this.$emit('update:modelValue', false);
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:modelValue', false);
    },
    handleSubmit() {
      const evaluateTable = this.$refs.evaluateTable;
      if (!evaluateTable) {
        this.$message.warning('评价表格未加载完成');
        return;
      }

      const evaluateData = {
        type: this.type,
        activeIndex: evaluateTable.activeIndex
      };
      
      this.$emit('submit', evaluateData);
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  padding: 20px;
  border-top: 1px solid #eee;

  .submit-btn {
    min-width: 80px;
  }
}
</style>

 src/views/dataManagement/testResultReport/components/experimental-scheduling.vue

New file
@@ -0,0 +1,75 @@
<template>
    <div>
        <el-dialog title="选择实验调度" :visible.sync="show" width="80%">
            <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
                <template #search>
                    <el-form :model="form" label-width="140px" inline>
                        <el-form-item label="所属项目课题方案：">
                            <el-input v-model="form.planName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验编号：">
                            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验名称：">
                            <el-input v-model="form.creator" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="通知时间：">
                            <el-date-picker v-model="form.createTime" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option label="待确认" value="待确认"></el-option>
                                <el-option label="已确认" value="已确认"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" class="search-btn-box">
                            <el-button type="default" @click="resetForm">重置</el-button>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                        </el-form-item>
                    </el-form>
                </template>
                
                <template #table>
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="通知时间"></el-table-column>
                    <el-table-column prop="stage" label="实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="试验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="参加人员"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                </template>
            </TableCustom>
            <span slot="footer" class="select-member-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['show'],
    data() {
        return {
            form: {},
            tableData: [],
            total: 0
        }
    },
    methods: {
        resetForm() {

        },
        handleSearch() {
            
        }
    }
}
</script>

<style lang="less" scoped>
</style>

 src/views/dataManagement/testResultReport/detail.vue

New file
@@ -0,0 +1,774 @@
<template>
  <Card>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      inline
      label-position="top"
    >
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>一 、所属实验调度</div>
        </div>
        <el-button
          type="primary"
          class="el-icon-plus"
          @click="handleSelectScheduling"
          >选择实验调度</el-button
        >
      </div>

      <Table
        :data="[selectedScheduling].filter(Boolean)"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="planCode"
          label="实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentName"
          label="实验名称"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="noticeTime"
          label="通知时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="startTime"
          label="实验开始时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="实验结束时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="participants"
          label="参加人员"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
        ></el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>一 、实验结果</div>
        </div>
      </div>
      <Table
        :data="experimentResultData"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="experimentCode"
          label="实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentName"
          label="实验名称"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimentDate"
          label="实验日期"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="experimenter"
          label="实验员"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="当前状态"
          min-width="120"
        ></el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleViewDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>二 、检验结果</div>
        </div>
      </div>
      <Table
        :data="inspectionResultData"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column
          prop="planName"
          label="所属项目课题方案"
          min-width="180"
        ></el-table-column>
        <el-table-column
          prop="experimentCode"
          label="所属实验编号"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="100"
        ></el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleViewInspectionDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>三 、实验数据分析及结论</div>
        </div>
      </div>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>四 、化验师工作评定</div>
        </div>
      </div>

      <div class="evaluate-card">
        <div class="evaluate-card-people">
          <div
            v-for="technician in labTechnicians"
            :key="technician.id"
            class="evaluate-card-people-item"
            :class="{ 'active-people': selectedLabTechnician?.id === technician.id }"
            @click="handleSelectLabTechnician(technician)"
          >
            {{ technician.name }}
          </div>
        </div>
        <div class="evaluate-card-cotent">
          <template v-if="selectedLabTechnician">
            <template v-if="selectedLabTechnician.data">
              <EvaluateTable 
                class="evaluate-table" 
                :isReadonly="true"
                :type="1"
                :viewJson="JSON.stringify(selectedLabTechnician.data)" 
              />
            </template>
            <template v-else>
              <div class="no-data">暂未评定</div>
              <div class="to-evaluate" @click="handleEvaluate('labTechnician')">去评价</div>
            </template>
          </template>
        </div>
      </div>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>五 、实验员工作评定</div>
        </div>
      </div>

      <div class="evaluate-card">
        <div class="evaluate-card-people">
          <div
            v-for="experimenter in experimenters"
            :key="experimenter.id"
            class="evaluate-card-people-item"
            :class="{ 'active-people': selectedExperimenter?.id === experimenter.id }"
            @click="handleSelectExperimenter(experimenter)"
          >
            {{ experimenter.name }}
          </div>
        </div>
        <div class="evaluate-card-cotent">
          <template v-if="selectedExperimenter">
            <template v-if="selectedExperimenter.data">
              <EvaluateTable 
                ref="experimenterEvaluateTable" 
                class="evaluate-table" 
                :isReadonly="true"
                :viewJson="JSON.stringify(selectedExperimenter.data)" 
              />
            </template>
            <template v-else>
              <div class="no-data">暂未评定</div>
              <div class="to-evaluate" @click="handleEvaluate('experimenter')">去评价</div>
            </template>
          </template>
        </div>
      </div>

      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">发送</el-button>
        <el-button>存草稿</el-button>
      </div>
    </el-form>
    <!-- 选择实验调度弹窗 -->
    <experimental-scheduling
      :show.sync="schedulingDialogVisible"
      @select="handleSchedulingSelect"
    />
    <!-- 评价弹窗 -->
    <evaluation-dialog
      :modelValue="evaluationDialogVisible"
      :type="currentEvaluationType"
      @update:modelValue="updateEvaluationDialogVisible"
      @submit="handleEvaluationSubmit"
    />
    <!-- 检验结果详情弹窗 -->
    <checkout-result
      :visible.sync="checkoutResultVisible"
      :data="currentCheckoutResult"
    />
  </Card>
</template>

<script>
import ExperimentalScheduling from "./components/experimental-scheduling.vue";
import moment from "moment";
import EvaluationDialog from "./components/evaluation-dialog.vue";
import CheckoutResult from "./components/checkout-result.vue";

export default {
  name: "AddProject",
  components: {
    ExperimentalScheduling,
    EvaluationDialog,
    CheckoutResult
  },
  data() {
    return {
      dialogVisible: false,
      schedulingDialogVisible: false,
      isEdit: false,
      currentEditIndex: -1,
      selectedScheduling: null,
      form: {
        recordNo: "",
        testItemName: "",
        testItemNo: "",
        testMethodName: "",
        testMethodNo: "",
      },
      rules: {
        recordNo: [
          {
            required: true,
            message: "请输入原始检验记录编号",
            trigger: "blur",
          },
        ],
        testItemName: [
          { required: true, message: "请输入检测项名字", trigger: "blur" },
        ],
        testItemNo: [
          { required: true, message: "请输入检测项编号", trigger: "blur" },
        ],
        testMethodName: [
          { required: true, message: "请输入检测方法名字", trigger: "blur" },
        ],
        testMethodNo: [
          { required: true, message: "请输入检测方法编号", trigger: "blur" },
        ],
      },
      taskTableData: [],
      experimentResultData: [
        {
          planName: "名称名称名称",
          experimentCode: "3814763",
          experimentName: "名称名称22",
          experimentDate: "2024-05-28",
          experimenter: "刘大大",
          createTime: "2025-1-2 16:27:17",
          creator: "周乐心",
          status: "实验员已提交",
        },
      ],
      inspectionResultData: [
        {
          planName: "名称名称名称",
          experimentCode: "31423764",
          createTime: "",
          creator: "",
          status: "已提交",
        },
        {
          planName: "名称名称名称",
          experimentCode: "31423764",
          createTime: "",
          creator: "",
          status: "已提交",
        },
      ],
      // 化验师数据
      labTechnicians: [
        { 
          id: 1, 
          name: '张三', 
          role: '化验师',
          data: null // 评定数据，null 表示未评定
        },
        { 
          id: 2, 
          name: '李四', 
          role: '化验师',
          data: null
        }
      ],
      selectedLabTechnician: null,

      // 实验员数据
      experimenters: [
        { 
          id: 1, 
          name: '王五', 
          role: '实验员',
          data: null
        },
        { 
          id: 2, 
          name: '赵六', 
          role: '实验员',
          data: null
        }
      ],
      selectedExperimenter: null,

      // 弹窗控制
      evaluationDialogVisible: false,
      currentEvaluationType: '',
      checkoutResultVisible: false,
      currentCheckoutResult: null
    };
  },
  watch: {
    selectedLabTechnician: {
      handler(newVal) {
        console.log("selectedLabTechnician", newVal);
      },
    },
  },
  created() {
    // 默认选中第一个人员
    this.selectedLabTechnician = this.labTechnicians[0];
    this.selectedExperimenter = this.experimenters[0];
  },
  methods: {
    handleSelectScheduling() {
      this.schedulingDialogVisible = true;
    },
    handleSchedulingSelect(selectedData) {
      if (selectedData && selectedData.length > 0) {
        this.selectedScheduling = selectedData[0];
        this.$message.success("选择成功");
      }
    },
    handleAddTask() {
      this.isEdit = false;
      this.currentEditIndex = -1;
      this.dialogVisible = true;
    },
    handleEditTask(row) {
      this.isEdit = true;
      this.currentEditIndex = this.taskTableData.findIndex(
        (item) => item === row
      );

      const editData = {
        sampleCode: row.sampleCode,
        testData: row.testData,
        testTypes: [],
        photos: [],
        spectrums: [],
      };

      if (row.photos && row.photos.length > 0) {
        editData.testTypes.push("photo");
        editData.photos = row.photos.map((photo) => ({
          name: photo.name,
          url: photo.url,
          raw: null,
        }));
      }
      if (row.spectrums && row.spectrums.length > 0) {
        editData.testTypes.push("spectrum");
        editData.spectrums = row.spectrums.map((spectrum) => ({
          name: spectrum.name,
          url: spectrum.url,
          raw: null,
        }));
      }

      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs.addDialog.setFormData(editData);
      });
    },
    handleDeleteTask(row) {
      this.$confirm("确认删除该检测数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.taskTableData.findIndex((item) => item === row);
          if (index > -1) {
            const item = this.taskTableData[index];
            if (item.photos) {
              item.photos.forEach((photo) => {
                if (photo.url.startsWith("blob:")) {
                  URL.revokeObjectURL(photo.url);
                }
              });
            }
            if (item.spectrums) {
              item.spectrums.forEach((spectrum) => {
                if (spectrum.url.startsWith("blob:")) {
                  URL.revokeObjectURL(spectrum.url);
                }
              });
            }

            this.taskTableData.splice(index, 1);
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    handleTaskSubmit(formData) {
      const photos = formData.photos.map((file) => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw),
      }));

      const spectrums = formData.spectrums.map((file) => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw),
      }));

      const newData = {
        sampleCode: formData.sampleCode,
        testData: formData.testData,
        testResult: "",
        photos,
        spectrums,
        createTime: this.isEdit
          ? this.taskTableData[this.currentEditIndex].createTime
          : moment().format("YYYY-MM-DD HH:mm:ss"),
      };

      if (this.isEdit && this.currentEditIndex > -1) {
        const oldData = this.taskTableData[this.currentEditIndex];
        if (oldData.photos) {
          oldData.photos.forEach((photo) => {
            if (
              photo.url.startsWith("blob:") &&
              !photos.find((p) => p.url === photo.url)
            ) {
              URL.revokeObjectURL(photo.url);
            }
          });
        }
        if (oldData.spectrums) {
          oldData.spectrums.forEach((spectrum) => {
            if (
              spectrum.url.startsWith("blob:") &&
              !spectrums.find((s) => s.url === spectrum.url)
            ) {
              URL.revokeObjectURL(spectrum.url);
            }
          });
        }

        this.taskTableData.splice(this.currentEditIndex, 1, newData);
        this.$message.success("更新成功");
      } else {
        this.taskTableData.push(newData);
        this.$message.success("添加成功");
      }

      this.dialogVisible = false;
      this.isEdit = false;
      this.currentEditIndex = -1;
    },
    getPhotoUrls(photos) {
      return photos.map((photo) => photo.url);
    },
    handleViewDetail(row) {
      console.log("查看详情", row);
    },
    handleViewInspectionDetail(row) {
      this.currentCheckoutResult = row;
      this.checkoutResultVisible = true;
    },
    // 选择化验师
    handleSelectLabTechnician(technician) {
      this.selectedLabTechnician = technician;
    },
    // 选择实验员
    handleSelectExperimenter(experimenter) {
      this.selectedExperimenter = experimenter;
    },
    // 去评价
    handleEvaluate(type) {
      this.currentEvaluationType = type;
      this.evaluationDialogVisible = true;
    },
    // 处理评价提交
    handleEvaluationSubmit(evaluationData) {
      const { type, activeIndex } = evaluationData;
      
      if (type === 'labTechnician') {
        // 更新化验师列表中的数据
        const labTechnician = this.labTechnicians.find(item => item.id === this.selectedLabTechnician.id);
        if (labTechnician) {
          labTechnician.data = activeIndex;
          // 更新当前选中的化验师数据
          this.selectedLabTechnician = { ...labTechnician };
        }
      } else if (type === 'experimenter') {
        // 更新实验员列表中的数据
        const experimenter = this.experimenters.find(item => item.id === this.selectedExperimenter.id);
        if (experimenter) {
          experimenter.data = activeIndex;
          // 更新当前选中的实验员数据
          this.selectedExperimenter = { ...experimenter };
        }
      }

      // 这里可以添加数据持久化的逻辑，比如调用API保存到后端
      // this.saveEvaluationData(type, activeIndex);

      this.$message.success('评价提交成功');
      this.evaluationDialogVisible = false;
    },
    // 更新弹窗显示状态
    updateEvaluationDialogVisible(value) {
      this.evaluationDialogVisible = value;
    }
  },
};
</script>

<style scoped lang="less">
.el-form--inline .el-form-item {
  margin-right: 83px;
}

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

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

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

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

    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;
      }
    }
  }
}

.rwuTable {
  width: 85%;
  padding-left: 40px;
}

.add-project-footer {
  margin-top: 43px;

  button {
    width: 220px;
  }

  .save-btn {
    margin-right: 20px;
  }
}

.image-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .preview-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
}

.spectrum-link {
  display: block;
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.evaluate-card {
  width: calc(95% - 40px);
  background: #eff8fa;
  padding: 30px;
  margin-left: 29px;

  .evaluate-card-people {
    display: flex;
    align-items: center;
    gap: 16px;

    .evaluate-card-people-item {
      width: 125px;
      background: #ffffff;
      border-radius: 6px;
      padding: 10px 5px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: center;
    }

    .active-people {
      background: #ebffff;
      border-radius: 6px;
      border: 1px solid #049c9a;
      color: rgba(4, 156, 154, 1);
    }
  }
  .evaluate-card-cotent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .no-data {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #909399;
      line-height: 28px;
      margin-top: 58px;
      margin-bottom: 30px;
    }
    .to-evaluate {
      width: 65px;
      background: #049c9a;
      border-radius: 4px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
      text-align: center;
      margin-bottom: 12px;
    }
    .evaluate-table{
      width: 100%;
      margin-top: 29px;
    }
  }
}
</style>

 src/views/dataManagement/testResultReport/list.vue

New file
@@ -0,0 +1,344 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="所属项目课题方案：">
            <el-input v-model="form.projectPlan" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验编号：">
            <el-input v-model="form.experimentNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="实验名称：">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建日期：">
            <el-date-picker
              v-model="form.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="待提交" value="pending"></el-option>
              <el-option label="已提交" value="submitted"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle">
          <div class="flex a-center">
            <div
              class="title"
              :class="{ active: currentType === 'list' }"
              @click="handleTypeChange('list')"
            >
              实验结果汇报列表
            </div>
            <div
              class="drafts"
              :class="{ active: currentType === 'draft' }"
              @click="handleTypeChange('draft')"
            >
              草稿箱
            </div>
          </div>
          <el-button @click="handleAddResult" class="el-icon-plus" type="primary">
            新增实验结果
          </el-button>
        </div>
      </template>
      <template #table>
        <el-table-column prop="projectPlan" label="所属项目课题方案"></el-table-column>
        <el-table-column prop="experimentNo" label="实验编号"></el-table-column>
        <el-table-column prop="experimentName" label="实验名称"></el-table-column>
        <el-table-column prop="engineer" label="工艺工程师"></el-table-column>
        <el-table-column prop="chemist" label="化验师"></el-table-column>
        <el-table-column prop="engineerApproved" label="是否评定">
          <template slot-scope="scope">
            <el-tag :type="scope.row.engineerApproved === '是' ? 'success' : 'danger'">
              {{ scope.row.engineerApproved }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="experimenter" label="实验员"></el-table-column>
        <el-table-column prop="experimenterApproved" label="是否评定">
          <template slot-scope="scope">
            <el-tag :type="scope.row.experimenterApproved === '是' ? 'success' : 'danger'">
              {{ scope.row.experimenterApproved }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已提交' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <template v-if="currentType === 'list'">
              <!-- 待提交状态 -->
              <template v-if="scope.row.status === '待提交'">
                <el-button type="text" @click="handleSubmit(scope.row)">提交</el-button>
                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
              </template>
              <!-- 待评定状态 -->
              <template v-else-if="scope.row.status === '待评定'">
                <el-button type="text" @click="handleEvaluate(scope.row)">评定</el-button>
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              </template>
              <!-- 已提交状态 -->
              <template v-else-if="scope.row.status === '已提交'">
                <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              </template>
            </template>
            <!-- 草稿箱 -->
            <template v-else>
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
  </div>
</template>

<script>
export default {
  name: "TestResultReport",
  data() {
    return {
      currentType: "list", // 当前显示类型：list-列表，draft-草稿箱
      form: {
        projectPlan: "",
        experimentNo: "",
        experimentName: "",
        createTime: [],
        status: ""
      },
      tableData: [],
      total: 0,
      // 正式列表数据
      mockListData: [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          engineer: '李治悦',
          chemist: '刘大大',
          engineerApproved: '否',
          experimenter: '周乐心; 张瑞瑞',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:27:17',
          status: '待提交'
        },
        {
          id: '2',
          projectPlan: '高性能材料研究',
          experimentNo: '31423765',
          experimentName: '材料强度测试',
          engineer: '赵雨',
          chemist: '王泽',
          engineerApproved: '是',
          experimenter: '李明; 张华',
          experimenterApproved: '是',
          createTime: '2025-1-2 16:30:17',
          status: '已提交'
        },
        {
          id: '3',
          projectPlan: '新型合金开发',
          experimentNo: '31423766',
          experimentName: '合金性能分析',
          engineer: '杨静',
          chemist: '陈亮',
          engineerApproved: '是',
          experimenter: '王刚',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:35:17',
          status: '待评定'
        }
      ],
      // 草稿箱数据
      mockDraftData: [
        {
          id: '4',
          projectPlan: '环保材料研究',
          experimentNo: '31423767',
          experimentName: '材料降解测试',
          engineer: '张伟',
          chemist: '李强',
          engineerApproved: '否',
          experimenter: '王芳',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:40:17',
          status: '草稿'
        },
        {
          id: '5',
          projectPlan: '纳米材料开发',
          experimentNo: '31423768',
          experimentName: '纳米结构分析',
          engineer: '刘洋',
          chemist: '周杰',
          engineerApproved: '否',
          experimenter: '孙明',
          experimenterApproved: '否',
          createTime: '2025-1-2 16:45:17',
          status: '草稿'
        }
      ]
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        projectPlan: "",
        experimentNo: "",
        experimentName: "",
        createTime: [],
        status: ""
      };
    },
    handleSearch() {
      this.getTableData();
    },
    handleAddResult() {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: 'new',
          type: 'add'
        }
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: row.id,
          type: 'edit'
        }
      });
    },
    handleDetail(id) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: id,
          type: 'view'
        }
      });
    },
    handleSubmit(row) {
      this.$confirm('确认提交该实验结果？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用提交接口
        this.$message.success('提交成功');
        this.getTableData();
      }).catch(() => {});
    },
    handleDelete(row) {
      this.$confirm('确认删除该实验结果？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除接口
        this.$message.success('删除成功');
        this.getTableData();
      }).catch(() => {});
    },
    handleEvaluate(row) {
      this.$router.push({
        path: "/dataManagement/testResultReport/detail",
        query: { 
          id: row.id,
          type: 'evaluate'
        }
      });
    },
    handleTypeChange(type) {
      this.currentType = type;
      this.getTableData();
    },
    getTableData() {
      // 根据currentType获取不同的数据
      if (this.currentType === 'list') {
        this.tableData = this.mockListData;
        this.total = this.mockListData.length;
      } else {
        this.tableData = this.mockDraftData;
        this.total = this.mockDraftData.length;
      }
    }
  }
};
</script>

<style scoped lang="less">
.list {
  height: 100%;
}
.flex {
  display: flex;
  align-items: center;
}
.tableTitle {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  .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;
  }
  .drafts {
    padding: 16px 65px;
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    font-size: 18px;
    color: #606266;
    margin-left: 16px;
    cursor: pointer;
  }
  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
  }
}
</style>