原始检验记录

董国庆

2025-04-21 b9b6091e37eeb038a772ab7be3d735ef59787f6e

原始检验记录

 pages/index/index.vue

New file
@@ -0,0 +1,65 @@
<view class="image-box">
    <template v-for="(item, index) in banner" :key="index">
        <!-- 平铺图 -->
        <view v-if="item.position === 3" class="full-row">
            <image :src="item.fileUrl" mode="widthFix" class="image" />
        </view>
        
        <!-- 左图 -->
        <view v-else-if="item.position === 1" class="row">
            <view class="left-half">
                <image :src="item.fileUrl" mode="widthFix" class="image" />
            </view>
            <!-- 如果下一个是右图，则显示右图 -->
            <view v-if="index + 1 < banner.length && banner[index + 1].position === 2" class="right-half">
                <image :src="banner[index + 1].fileUrl" mode="widthFix" class="image" />
            </view>
            <!-- 如果下一个不是右图，则显示空白 -->
            <view v-else class="right-half empty"></view>
        </view>
        
        <!-- 右图（只有当它不是左图的配对时才显示） -->
        <view v-else-if="item.position === 2 && (index === 0 || banner[index - 1].position !== 1)" class="row">
            <view class="left-half empty"></view>
            <view class="right-half">
                <image :src="item.fileUrl" mode="widthFix" class="image" />
            </view>
        </view>
    </template>
</view>

<style>
.image-box {
    width: 100%;
}

.full-row {
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
}

.left-half, .right-half {
    width: 50%;
}

.left-half {
    padding-right: 5px;
}

.right-half {
    padding-left: 5px;
}

.image {
    width: 100%;
    display: block;
}

.empty {
    background-color: transparent;
}
</style> 

 src/router/index.js

@@ -262,6 +262,24 @@
                },
                component: () => import("../views/dataManagement/SampleDeliveryRecord/deliveryRecord"),
            },
            {
                path: "originalRecordTest",
                meta: {
                    title: "原始记录检测",
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/originalRecordTest/list.vue"),
            },
            {
                path: "originalRecordTest/detail",
                name: "OriginalRecordTestDetail",
                meta: {
                    title: "原始记录检测详情",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/originalRecordTest/detail.vue"),
            },
        ],
    },
    {

 src/views/dataManagement/dispatching/addDispatch.vue

@@ -340,6 +340,7 @@
}

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

 src/views/dataManagement/originalRecordTest/components/addDialog.vue

New file
@@ -0,0 +1,424 @@
<template>
  <el-dialog
    title="新增检测数据"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="sample-dialog">
      <div class="sample-content">
        <div class="form-content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="检测样编号" prop="sampleCode">
                  <el-input
                    v-model="form.sampleCode"
                    placeholder="请输入检测样编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测数据" prop="testData">
                  <el-input
                    v-model="form.testData"
                    placeholder="请输入检测数据"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测类型" prop="testTypes">
                  <el-checkbox-group v-model="form.testTypes">
                    <el-checkbox label="photo">拍照</el-checkbox>
                    <el-checkbox label="spectrum">图谱</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="showPhotoUpload" :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测拍照" prop="photos">
                  <div v-if="isIPad">
                    <el-button type="primary" @click="handleIPadPhoto">拍照</el-button>
                    <el-button type="primary" @click="handleIPadUpload">上传</el-button>
                  </div>
                  <el-upload
                    v-else
                    class="upload-demo"
                    action="#"
                    :file-list="photoList"
                    :auto-upload="false"
                    list-type="picture-card"
                    :on-change="handlePhotoChange"
                  >
                    <i class="el-icon-plus"></i>
                    <!-- <div class="el-upload__tip" slot="tip">支持 jpg、png 格式文件</div> -->
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="showSpectrumUpload" :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测图谱" prop="spectrums">
                  <div v-if="isIPad">
                    <el-button type="primary" @click="handleIPadSpectrum">选择图谱</el-button>
                  </div>
                  <el-upload
                    v-else
                    class="upload-file"
                    action="#"
                    :file-list="spectrumList"
                    :auto-upload="false"
                    :on-change="handleSpectrumChange"
                    :on-remove="handleSpectrumRemove"
                  >
                    <el-button type="primary">
                      <i class="el-icon-upload"></i> 选择文件
                    </el-button>
                    <div class="el-upload__tip" slot="tip">支持 jpg、png、pdf 格式文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer select-member-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isIPad: /iPad/i.test(navigator.userAgent),
      form: {
        sampleCode: "",
        testData: "",
        testTypes: ["photo"], // 默认选中拍照
        photos: [],
        spectrums: []
      },
      rules: {
        sampleCode: [
          { required: true, message: "请输入检测样编号", trigger: "blur" }
        ],
        testData: [
          { required: true, message: "请输入检测数据", trigger: "blur" }
        ],
        testTypes: [
          { 
            type: 'array',
            required: true, 
            message: "请至少选择一种检测类型", 
            trigger: "change" 
          }
        ],
        photos: [
          { 
            required: true, 
            message: "请上传检测照片", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.testTypes.includes('photo') && (!this.photoList || !this.photoList.length)) {
                callback(new Error('请上传检测照片'));
              } else {
                callback();
              }
            }
          }
        ],
        spectrums: [
          { 
            required: true, 
            message: "请上传检测图谱", 
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.testTypes.includes('spectrum') && (!this.spectrumList || !this.spectrumList.length)) {
                callback(new Error('请上传检测图谱'));
              } else {
                callback();
              }
            }
          }
        ]
      },
      photoList: [],
      spectrumList: []
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    },
    showPhotoUpload() {
      return this.form.testTypes.includes('photo');
    },
    showSpectrumUpload() {
      return this.form.testTypes.includes('spectrum');
    }
  },
  methods: {
    setFormData(data) {
      // 设置基础表单数据
      this.form.sampleCode = data.sampleCode;
      this.form.testData = data.testData;
      this.form.testTypes = data.testTypes;

      // 设置照片列表
      if (data.photos && data.photos.length) {
        this.photoList = data.photos.map(photo => ({
          name: photo.name,
          url: photo.url,
          status: 'success'
        }));
      } else {
        this.photoList = [];
      }

      // 设置图谱列表
      if (data.spectrums && data.spectrums.length) {
        this.spectrumList = data.spectrums.map(spectrum => ({
          name: spectrum.name,
          url: spectrum.url,
          status: 'success'
        }));
      } else {
        this.spectrumList = [];
      }

      // 重置表单校验状态
      this.$nextTick(() => {
        this.$refs.form?.clearValidate();
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form?.resetFields();
      this.photoList = [];
      this.spectrumList = [];
      this.form = {
        sampleCode: "",
        testData: "",
        testTypes: ["photo"],
        photos: [],
        spectrums: []
      };
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const submitData = {
            ...this.form,
            photos: this.photoList,
            spectrums: this.spectrumList
          };
          this.$emit("success", submitData);
        }
      });
    },
    handlePhotoChange(file, fileList) {
      this.photoList = fileList;
      this.$refs.form.validateField('photos');
    },
    handleSpectrumChange(file, fileList) {
      this.spectrumList = fileList;
      this.$refs.form.validateField('spectrums');
    },
    handleSpectrumRemove(file) {
      // 处理文件移除逻辑
    },
    // iPad 相关方法
    handleIPadPhoto() {
      // TODO: 调用 iPad 拍照功能
      console.log('调用 iPad 拍照功能');
    },
    handleIPadUpload() {
      // TODO: 调用 iPad 上传功能
      console.log('调用 iPad 上传功能');
    },
    handleIPadSpectrum() {
      // TODO: 调用 iPad 选择图谱功能
      console.log('调用 iPad 选择图谱功能');
    }
  }
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__body {
  padding: 0;
  max-height: calc(100vh - 200px);  // 设置最大高度
}

::v-deep .el-dialog {
  margin-top: 5vh !important;  // 调整弹窗位置
  max-height: 90vh;  // 设置弹窗最大高度
  display: flex;
  flex-direction: column;
  
  .el-dialog__body {
    flex: 1;
    overflow: hidden;  // 防止出现双滚动条
  }
}

.sample-dialog {
  height: 100%;
  
  .sample-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .form-content {
      flex: 1;
      overflow-y: auto;
      padding: 0 10px;
      max-height: calc(90vh - 250px);  // 设置内容区域最大高度
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f5f7fa;
      }
    }
  }
}

.dialog-footer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 15px 20px;
  border-top: 1px solid #e4e7ed;
  margin-top: auto;  // 保持在底部
  
  button {
    width: 150px;
  }
}

.upload-demo {
  ::v-deep {
    .el-upload--picture-card {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
    
    .el-upload-list--picture-card {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .el-upload-list__item {
        width: 120px;
        height: 120px;
        margin: 0;
      }
    }
    
    // 让上传按钮始终显示在列表最后
    .el-upload--picture-card {
      order: 9999;
      margin: 0;
    }
  }
  
  // 包裹容器也使用flex布局
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.el-row {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;  // 最后一行不要margin
  }
}

::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0;
}

::v-deep .el-form-item__label {
  padding-bottom: 8px;
}

// 优化表单布局
::v-deep .el-form {
  .el-form-item {
    margin-bottom: 15px;  // 减小表单项间距
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 优化上传区域布局
::v-deep .el-upload-list--picture-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;  // 设置图片间距
}

.upload-file {
  ::v-deep {
    .el-upload-list {
      margin-top: 10px;
    }
    .el-upload-list__item {
      transition: all .3s;
      &:hover {
        background-color: #f5f7fa;
      }
    }
    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style> 

 src/views/dataManagement/originalRecordTest/detail.vue

New file
@@ -0,0 +1,388 @@
<template>
  <Card>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      inline
      label-position="top"
    >
      <div style="padding-left: 25px">
        <el-form-item prop="recordNo" label="原始检验记录编号">
          <el-input v-model="form.recordNo" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>检测项信息</span>
        </div>
      </div>
      <div style="padding-left: 25px">
        <el-form-item prop="testItemName" label="检测项名字">
          <el-input v-model="form.testItemName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="testItemNo" label="检测项编号">
          <el-input v-model="form.testItemNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="testMethodName" label="检测方法名字">
          <el-input v-model="form.testMethodName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="testMethodNo" label="检测方法编号">
          <el-input v-model="form.testMethodNo" placeholder="请输入" />
        </el-form-item>
      </div>

      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>一 、检测标准</span>
        </div>
      </div>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>二 、检测仪器</span>
        </div>
      </div>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>三 、检测试剂</span>
        </div>
      </div>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>四 、检测步骤</span>
        </div>
      </div>

      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>五 、检测数据及参照</span>
        </div>
        <el-button type="primary" class="el-icon-plus" @click="handleAddTask">添加检测数据</el-button>
      </div>

      <Table :data="taskTableData" :total="0" :height="null" class="rwuTable">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="sampleCode" label="检测样编号"></el-table-column>
        <el-table-column prop="testData" label="检测数据"></el-table-column>
        <el-table-column label="检测图片" width="200">
          <template slot-scope="scope">
            <div class="image-preview" v-if="scope.row.photos && scope.row.photos.length">
              <el-image
                v-for="(photo, index) in scope.row.photos"
                :key="index"
                :src="photo.url"
                :preview-src-list="getPhotoUrls(scope.row.photos)"
                fit="cover"
                class="preview-image"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="检测图谱" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.spectrums && scope.row.spectrums.length">
              <el-link 
                v-for="(spectrum, index) in scope.row.spectrums" 
                :key="index"
                type="primary"
                :href="spectrum.url"
                target="_blank"
                class="spectrum-link"
              >
                {{ spectrum.name }}
              </el-link>
            </div>
            <span v-else>无图谱</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="180"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEditTask(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDeleteTask(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </Table>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>六 、检测结果预算</span>
        </div>
      </div>
      <Table :data="taskTableData" :total="0" :height="null" class="rwuTable">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="sampleCode" label="检测样编号"></el-table-column>
        <el-table-column prop="testData" label="检测数据"></el-table-column>
        <el-table-column label="检测结果" >
          <template slot-scope="scope">
            <el-input v-model="scope.row.testResult" placeholder="请输入检测结果"></el-input>
          </template>
        </el-table-column>
      </Table>

      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">发送</el-button>
        <el-button>存草稿</el-button>
      </div>
    </el-form>
    <!-- 添加检测数据弹窗 -->
    <add-dialog 
      ref="addDialog"
      :visible.sync="dialogVisible" 
      @success="handleTaskSubmit" 
    />
  </Card>
</template>
  
<script>
import AddDialog from './components/addDialog.vue'
import moment from 'moment'

export default {
  name: "AddProject",
  components: {
    AddDialog
  },
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      currentEditIndex: -1,
      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: []
    };
  },
  methods: {
    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);
    }
  }
};
</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;
  
  .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";
    }
  }
}

.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;
  }
}
</style>

 src/views/dataManagement/originalRecordTest/list.vue

New file
@@ -0,0 +1,186 @@
<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.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-input v-model="form.approver" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle">
          <div class="flex a-center">
            <div class="title active">原始记录检测列表</div>
          </div>
        </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="creator" label="创建人"></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="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
  </div>
</template>

<script>
export default {
  name: "OriginalRecordTest",
  data() {
    return {
      form: {
        planCode: "",
        creator: "",
        createTime: [],
        approver: ""
      },
      tableData: [
        {
          id: '1',
          projectPlan: 'DD250218-JL01',
          experimentNo: '31423764',
          experimentName: '化学成分分析实验',
          creator: '张三',
          createTime: '2025-1-8 17:56:11',
          status: '未填写'
        },
        {
          id: '2',
          projectPlan: 'DD250218-JL02',
          experimentNo: '31423765',
          experimentName: '物理性能测试实验',
          creator: '李四',
          createTime: '2025-1-8 18:00:00',
          status: '未填写'
        },
        {
          id: '3',
          projectPlan: 'DD250218-JL03',
          experimentNo: '31423766',
          experimentName: '材料强度测试',
          creator: '王五',
          createTime: '2025-1-8 18:30:00',
          status: '已填写'
        },
        {
          id: '4',
          projectPlan: 'DD250218-JL04',
          experimentNo: '31423767',
          experimentName: '耐久性测试实验',
          creator: '赵六',
          createTime: '2025-1-8 19:00:00',
          status: '已填写'
        },
        {
          id: '5',
          projectPlan: 'DD250218-JL05',
          experimentNo: '31423768',
          experimentName: '环境适应性测试',
          creator: '孙七',
          createTime: '2025-1-8 19:30:00',
          status: '未填写'
        }
      ],
      total: 5
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        planCode: "",
        creator: "",
        createTime: [],
        approver: ""
      };
    },
    handleSearch() {
      this.getTableData();
    },
    handleEdit(row) {
      console.log("编辑数据：", row);
    },
    handleDetail(id) {
      this.$router.push({
        path: "/dataManagement/originalRecordTest/detail",
        query: { id }
      });
    },
    getTableData() {
      // TODO: 调用接口获取数据
    //   this.tableData = [];
    //   this.total = 0;
    }
  }
};
</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;
  }
  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
  }
}
</style>