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

13404089107

2025-04-30 3b9a9dd2316b3ef19a7ba2f0e1d9ae7bd0f85391

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

 laboratory/src/App.vue

@@ -61,17 +61,17 @@
    width: 6px;
    height: 6px;
  }
  

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  

  ::-webkit-scrollbar-thumb {
    background: #009688;
    border-radius: 3px;
  }
  

  ::-webkit-scrollbar-thumb:hover {
    background: #00796b;
  }
@@ -92,6 +92,12 @@
.el-button--primary {
  background-color: #009688 !important;
  border-color: #009688 !important;
}
.el-radio-button--small.is-active {
  .el-radio-button__inner {
    background-color: #009688 !important;
    border-color: #009688 !important;
  }
}

.el-button--text {
@@ -150,6 +156,11 @@
    overflow: hidden;
  }
}
//  .pagination{
//   .el-input__inner {
//     width: unset !important;
//   }
// }

.el-input__inner:focus,
.el-select .el-input__inner:focus,

 laboratory/src/assets/public/delete.png

 laboratory/src/assets/public/edit.png

 laboratory/src/components/AddComponentDialog/index.vue

@@ -78,7 +78,7 @@
      this.selectedType = item.type
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
      this.selectedType = ''
    },
    handleConfirm() {

 laboratory/src/components/DynamicComponent/addTableData.vue

New file
@@ -0,0 +1,537 @@
<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="updateTime">
                  <el-input
                    v-model="form.updateTime"
                    placeholder="更新时间"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-for="(header, index) in headerList"
                :key="index"
              >
                <el-form-item
                  :label="header.name"
                  :prop="header.name"
                  :rules="{
                    required: header.required === true || header.required === 'true',
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change']
                  }"
                  v-if="header.type == 'text'"
                >
                  <el-input
                    v-model="form[header.name]"
                    :placeholder="'请输入' + header.name"
                  />
                </el-form-item>
                <el-form-item
                  :label="header.name"
                  :prop="header.name"
                  :rules="{
                    required: header.required === true || header.required === 'true',
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change']
                  }"
                  v-if="header.type == 'image'"
                >
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :file-list="spectrumList"
                    :auto-upload="false"
                    list-type="picture-card"
                    :on-change="handleSpectrumChange"
                    :on-remove="handleSpectrumRemove"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item
                  :label="header.name"
                  :prop="header.name"
                  :rules="{
                    required: header.required === true || header.required === 'true',
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change']
                  }"
                  v-if="header.type == 'date'"
                >
                  <el-date-picker
                    v-model="form[header.name]"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="{
                      shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                          picker.$emit('pick', new Date());
                        }
                      }, {
                        text: '昨天',
                        onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          picker.$emit('pick', date);
                        }
                      }, {
                        text: '一周前',
                        onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', date);
                        }
                      }]
                    }"
                  />
                </el-form-item>
                <el-form-item
                  :label="header.name"
                  :prop="header.name"
                  :rules="{
                    required: header.required === true || header.required === 'true',
                    message: header.message || `请输入${header.name}`,
                    trigger: ['blur', 'change']
                  }"
                  v-if="header.type == 'user'"
                >
                  <el-select
                    v-model="form[header.name]"
                    multiple
                    filterable
                    placeholder="请选择用户"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </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,
    },
    headerList: {
      type: Array,
      default: () => [],
    },
    editData: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      isIPad: /iPad/i.test(navigator.userAgent),
      showHeaderList: [{"name":"sd","type":"text","required":true,"message":"请输入表头名称","role":[]}],
      form: {},
      rules: {},
      photoList: [],
      spectrumList: [],
      userOptions: [
        { value: '1', label: '用户1' },
        { value: '2', label: '用户2' },
        { value: '3', label: '用户3' },
        { value: '4', label: '用户4' },
        { value: '5', label: '用户5' }
      ]
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    visible: {
      handler(newVal) {
        if (newVal) {
          console.log('弹窗打开，初始化数据');
          this.showHeaderList = JSON.parse(JSON.stringify(this.headerList));
          this.$forceUpdate();
          if (this.isEdit && this.editData) {
            // 编辑模式：设置回显数据
            this.setFormData(this.editData);
          } else {
            // 新增模式：初始化空表单
            this.initFormData();
          }
          this.initRules();
          console.log('初始化后的表单数据:', this.form);
          console.log('初始化后的校验规则:', this.rules);
        }
      },
    },
    headerList: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.length) {
          console.log('headerList变化，重新初始化');
          if (this.isEdit && this.editData) {
            this.setFormData(this.editData);
          } else {
            this.initFormData();
          }
          this.initRules();
        }
      },
    },
    showHeaderList: {
      immediate: true,
      handler(newVal) {
        if (newVal ) {
         
          console.log("222222222222222222", JSON.stringify(newVal));
          
        }
      },
    },
  },
  methods: {
    initRules() {
      // 初始化校验规则
      const rules = {};
      if (this.headerList && this.headerList.length) {
        this.headerList.forEach(header => {
          // 处理required可能是字符串的情况
          const isRequired = header.required === true || header.required === 'true';
          if (isRequired) {
            rules[header.name] = [{
              required: true,
              message: header.message || `请输入${header.name}`,
              trigger: ['blur', 'change']
            }];
          }
        });
      }
      console.log('生成的校验规则:', rules);
      this.rules = rules;
    },
    initFormData() {
      // 初始化基础表单数据
      const formData = {
        updateTime: this.formatDateTime(new Date()),
      };
      
      // 根据headerList初始化表单数据
      if (this.headerList && this.headerList.length) {
        this.headerList.forEach(header => {
          if (header.type === 'user') {
            formData[header.name] = [];
          } else {
            formData[header.name] = '';
          }
        });
      }
      
      // 使用Vue.set确保响应式
      Object.keys(formData).forEach(key => {
        this.$set(this.form, key, formData[key]);
      });
      
      console.log('初始化后的表单数据:', this.form);
    },
    setFormData(data) {
      // 设置基础表单数据
      const formData = {
        updateTime: this.formatDateTime(new Date()),
      };

      // 根据headerList设置表单数据
      if (this.headerList && this.headerList.length) {
        this.headerList.forEach(header => {
          if (header.type === 'user') {
            formData[header.name] = data[header.name] || [];
          } else {
            formData[header.name] = data[header.name] || '';
          }
        });
      }

      // 使用Vue.set确保响应式
      Object.keys(formData).forEach(key => {
        this.$set(this.form, key, formData[key]);
      });

      // 设置照片列表
      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();
      });
    },
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form?.resetFields();
      this.photoList = [];
      this.spectrumList = [];
      this.initFormData();
    },
    handleSubmit() {
      console.log('开始提交表单');
      console.log('表单数据:', this.form);
      console.log('校验规则:', this.rules);
      
      this.$refs.form.validate((valid) => {
        console.log('表单验证结果:', valid);
        if (valid) {
          const submitData = {
            ...this.form,
            photos: this.photoList,
            spectrums: this.spectrumList,
          };
          console.log('提交数据:', submitData);
          this.$emit("success", submitData);
          this.handleClose();
        } else {
          console.log('表单验证失败');
          this.$message.error('请填写必填项');
        }
      });
    },
    handlePhotoChange(file, fileList) {
      this.photoList = fileList;
      this.$refs.form.validateField("photos");
    },
    handleSpectrumChange(file, fileList) {
      this.spectrumList = fileList;
      this.$refs.form.validateField("spectrums");
    },
    handleSpectrumRemove(file) {
      // 处理文件移除逻辑
    },

    handleIPadSpectrum() {
      // TODO: 调用 iPad 选择图谱功能
      console.log("调用 iPad 选择图谱功能");
    },
  },
  mounted() {
    console.log("初始headerList:", this.headerList);
  },
};
</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 0.3s;
      &:hover {
        background-color: #f5f7fa;
      }
    }
    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style> 

 laboratory/src/components/DynamicComponent/addTableHeader.vue

New file
@@ -0,0 +1,350 @@
<template>
  <el-dialog
    title="新增表头"
    :visible.sync="dialogVisible"
    width="30%"
    :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="24">
              <el-col :span="24">
                <el-form-item label="表头名称" prop="sampleCode">
                  <el-input
                    v-model="form.name"
                    style="width: 100%"
                    placeholder="请输入表头名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="表头类型" prop="sampleCode">
                  <el-radio-group v-model="form.type" style="width: 100%">
                    <el-radio-button  label="text">文本框</el-radio-button>
                    <el-radio-button label="image">图片上传</el-radio-button>
                    <el-radio-button  label="date">日期选择</el-radio-button>
                    <el-radio-button  label="user">人员选择</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="操作权限" prop="sampleCode">
                  <el-select v-model="form.role" placeholder="请选择" style="width: 100%" multiple>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="提示文案" prop="sampleCode">
                  <el-input
                    v-model="form.message"
                    style="width: 100%"
                    placeholder="请输入提示文案"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="是否必填" prop="testTypes">
                  <el-radio-group v-model="form.required">
                    <el-radio label="true">是</el-radio>
                    <el-radio label="false">否</el-radio>
                  </el-radio-group>
                </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: {
        name: "",
        type: "",
        role: "",
        message: "",
        required: "true",
      },
      rules: {
        name: [
          { required: true, message: "请输入表头名称", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择表头类型", trigger: "blur" },
        ],
        role: [
          {
            type: "array",
            required: true,
            message: "请至少选择一种检测类型",
            trigger: "change",
          },
        ],
        message: [
          {
            required: true,
            message: "请输入提示文案",
            trigger: "blur",
          },
        ],
        required: [
          {
            required: true,
            message: "请选择是否必填",
            trigger: "change",
          },
        ],
      },
      options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        }, {
          value: '4',
          label: '龙须面'
        }, {
          value: '5',
          label: '北京烤鸭'
        }],
        value: ''
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  mounted() {
    // 组件挂载时的初始化逻辑
    console.log('组件已挂载');
  },
  methods: {
    setFormData(data) {
      // 设置基础表单数据
      this.form.name = data.name;
      this.form.type = data.type;
      this.form.role = data.role;
      this.form.message = data.message;
      this.form.required = data.required || "true";
      // 重置表单校验状态
      this.$nextTick(() => {
        this.$refs.form?.clearValidate();
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form?.resetFields();
      this.form = {
        name: "",
        type: "",
        role: "",
        message: "",
        required: "true",
      };
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const submitData = {
            ...this.form,
          };
          this.$emit("confirm", submitData);
        }
      });
    },
  },
};
</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; // 防止出现双滚动条

    .el-input__inner {
      width: 100% !important;
    }
  }
}

.sample-dialog {
  height: 100%;

  .sample-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    padding-left: 10%;
    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 {
    width: 100% !important;
    margin-bottom: 15px !important; // 减小表单项间距

    &:last-child {
      margin-bottom: 15px !important;
    }
  }
}

// 优化上传区域布局
::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 0.3s;
      &:hover {
        background-color: #f5f7fa;
      }
    }
    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style> 

 laboratory/src/components/DynamicComponent/index.vue

New file
@@ -0,0 +1,473 @@
<template>
  <div>
    <div class="choose-material" :class="title ? '' : 'has-title'">
      <div class="add-group">
        <div v-if="title">*</div>
        <span v-if="title">{{ title }}</span>
        <el-button
          @click="showAddDialog = true"
          class="el-icon-plus"
          type="primary"
        >
          添加组件</el-button
        >
      </div>

      <!-- 选择组件弹窗 -->
      <AddComponentDialog
        :visible="showAddDialog"
        @confirm="addComponent"
        @close="showAddDialog = false"
      />

      <!-- 动态渲染组件 -->
      <div
        v-for="(item, idx) in components"
        :key="item.id"
        class="dynamic-component"
      >
        <!-- 富文本 -->
        <div v-if="item.type == 'richText'">
          <AiEditor 
            :ref="`editor_${item.id}`"
            v-model="item.data.content" 
            height="200px"
            placeholder="请输入内容..." 
          />
        </div>
        <!-- 自定义表格 -->
        <div v-else-if="item.type == 'customTable'" style="flex: 1">
          <div class="table-actions">
            <el-button size="mini" @click="showTableHeaderDialog(idx)"
              >添加表头</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="showAddRowDialog(idx, item.data.headers)"
              >添加数据</el-button
            >
          </div>
          <Table
            :data="item.data.rows"
            :total="null"
            :height="null"
            class="groupTable"
          >
            <!-- <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column> -->
           
            <el-table-column
              v-for="(header, hidx) in item.data.headers"
              :key="hidx"
              :label="header.name"
              :prop="header.name"
            /> 
            <el-table-column
              label="更新时间"
              prop="updateTime"
              min-width="180"
            ></el-table-column>
            <el-table-column label="操作" min-width="200">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEditRow(idx, scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="handleDeleteRow(idx, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </Table>
        </div>
        <!-- 文件上传 -->
        <div v-else-if="item.type == 'fileUpload'">
          <el-upload
            action="#"
            :file-list="item.data.fileList"
            :on-change="(file, fileList) => handleFileChange(idx, fileList)"
            list-type="text"
          >
            <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
          </el-upload>
        </div>
        <!-- 图片上传 -->
        <div v-else-if="item.type == 'imageUpload'">
          <el-upload
            action="#"
            :file-list="item.data.imageList"
            :on-change="(file, fileList) => handleImageChange(idx, fileList)"
            :on-success="
              (res, file, fileList) =>
                handleImageSuccess(res, file, fileList, idx)
            "
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
            <div class="upload-text">上传图片</div>
          </el-upload>
          <div class="uploaf-notice">支持.jpg .png格式</div>
        </div>
        <img
          src="@/assets/public/delete.png"
          @click="removeComponent(idx)"
          alt="删除"
          class="delete-icon"
        />
      </div>
    </div>

    <!-- 添加表头弹窗 -->
    <el-dialog
      :visible.sync="tableHeaderDialog.visible"
      title="添加表头"
      width="300px"
    >
      <el-input
        v-model="tableHeaderDialog.header"
        placeholder="请输入表头"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableHeaderDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddHeader">确定</el-button>
      </span>
    </el-dialog>

    <addTableHeader
      :visible.sync="tableHeaderDialog.visible"
      @confirm="confirmAddHeader"
    ></addTableHeader>
    <addTableData
      :visible.sync="rowDialog.visible"
      :headerList="rowDialog.headers"
      :editData="rowDialog.form"
      :isEdit="rowDialog.isEdit"
      @success="confirmAddRow"
    >
    </addTableData>
  </div>
</template>

<script>
import AddComponentDialog from "../AddComponentDialog/index.vue";
import AiEditor from "../AiEditor/index.vue";
import Table from "../Table/index.vue";
import addTableHeader from "./addTableHeader.vue";
import addTableData from "./addTableData.vue";

export default {
  name: "DynamicComponent",
  components: {
    AddComponentDialog,
    AiEditor,
    Table,
    addTableHeader,
    addTableData,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showAddDialog: false,
      components: [],
      tableHeaderDialog: {
        visible: false,
        idx: null,
        header: "",
      },
      rowDialog: {
        visible: false,
        idx: null,
        rowIndex: null,
        isEdit: false,
        headers: [],
        form: {},
      },
      headerList: [], //编辑的表头列表
    };
  },
  methods: {
    addComponent(type) {
      this.showAddDialog = false;
      const id = Date.now() + Math.random();
      let data = {};
      if (type === "richText") data = { content: "" };
      if (type === "customTable") data = { headers: [], rows: [] };
      if (type === "fileUpload") data = { fileList: [] };
      if (type === "imageUpload") data = { imageList: [] };
      console.log(type, "111111111111111", this.components);

      this.components.push({ id, type, data });
    },
    removeComponent(idx) {
      this.components.splice(idx, 1);
    },
    showTableHeaderDialog(idx) {
      this.tableHeaderDialog.visible = true;
      this.tableHeaderDialog.idx = idx;
      this.tableHeaderDialog.header = "";
    },
    confirmAddHeader(data) {
      console.log("data", data);
      const { idx } = this.tableHeaderDialog;
      // 添加新表头
      this.components[idx].data.headers.push({ ...data });
      
      // 为已有行数据添加新表头对应的默认值
      this.components[idx].data.rows.forEach(row => {
        // 如果行数据是对象，直接添加新属性
        if (typeof row === 'object' && row !== null) {
          if (data.type === 'user') {
            this.$set(row, data.name, []);
          } else {
            this.$set(row, data.name, '');
          }
        } else {
          // 如果行数据不是对象，转换为对象
          const newRow = {};
          this.components[idx].data.headers.forEach(header => {
            if (header.name === data.name) {
              if (header.type === 'user') {
                newRow[header.name] = [];
              } else {
                newRow[header.name] = '';
              }
            } else {
              newRow[header.name] = row[header.name] || '';
            }
          });
          // 替换原行数据
          const rowIndex = this.components[idx].data.rows.indexOf(row);
          this.components[idx].data.rows.splice(rowIndex, 1, newRow);
        }
      });

      // 关闭弹窗并重置数据
      this.tableHeaderDialog.visible = false;
      this.tableHeaderDialog = {
        visible: false,
        idx: null,
        header: "",
      };
    },
    showAddRowDialog(idx, headerList) {
      this.headerList = headerList;
      this.rowDialog.visible = true;
      this.rowDialog.idx = idx;
      this.rowDialog.isEdit = false;
      this.rowDialog.headers = this.components[idx].data.headers;
      this.rowDialog.form = {};
      // 初始化表单数据
      this.rowDialog.headers.forEach((header) => {
        if (header.type === "user") {
          this.rowDialog.form[header.name] = [];
        } else {
          this.rowDialog.form[header.name] = "";
        }
      });
    },
    handleEditRow(idx, rowIndex) {
      this.rowDialog.visible = true;
      this.rowDialog.idx = idx;
      this.rowDialog.rowIndex = rowIndex;
      this.rowDialog.isEdit = true;
      this.rowDialog.headers = this.components[idx].data.headers;
      // 深拷贝行数据，避免直接修改原数据
      this.rowDialog.form = JSON.parse(
        JSON.stringify(this.components[idx].data.rows[rowIndex])
      );
    },
    handleDeleteRow(idx, rowIndex) {
      this.$confirm("确认删除该行数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.components[idx].data.rows.splice(rowIndex, 1);
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    confirmAddRow(formData) {
      const { idx, rowIndex, isEdit } = this.rowDialog;
      if (isEdit) {
        // 编辑模式：替换原有行数据
        this.components[idx].data.rows.splice(rowIndex, 1, formData);
      } else {
        // 新增模式：添加新行数据
        this.components[idx].data.rows.push(formData);
      }
      this.rowDialog.visible = false;
      // 重置对话框数据
      this.rowDialog = {
        visible: false,
        idx: null,
        rowIndex: null,
        isEdit: false,
        headers: [],
        form: {},
      };
    },
    handleFileChange(idx, fileList) {
      this.components[idx].data.fileList = fileList;
    },
    handleImageChange(idx, fileList) {
      this.components[idx].data.imageList = fileList;
    },
    handleImageSuccess(res, file, fileList, idx) {
      // 假设后端返回的图片地址在 res.url
      file.url = res.url;
      this.components[idx].data.imageList = fileList;
    },
    // 获取所有组件数据
    getComponentsData() {
      // 整理数据，图片只保留url
      const submitData = this.components.map((item) => {
        if (item.type === "richText") {
          // 获取富文本编辑器的内容
          const editorRef = this.$refs[`editor_${item.id}`];
          return {
            ...item,
            data: {
              content: editorRef ? editorRef.getContent() : item.data.content
            }
          };
        }
        if (item.type === "imageUpload") {
          return {
            ...item,
            data: {
              imageList: item.data.imageList.map((img) => ({ url: img.url })),
            },
          };
        }
        return item;
      });
      return submitData;
    },
    // 验证所有组件数据
    validateComponents() {
      // 验证富文本编辑器
      const richTextValid = this.components.every(item => {
        if (item.type === 'richText') {
          const editorRef = this.$refs[`editor_${item.id}`];
          return editorRef && editorRef.getContent().trim() !== '';
        }
        return true;
      });

      if (!richTextValid) {
        this.$message.error('请填写所有富文本内容');
        return false;
      }

      // 验证表格数据
      const tableValid = this.components.every(item => {
        if (item.type === 'customTable') {
          return item.data.rows.length > 0;
        }
        return true;
      });

      if (!tableValid) {
        this.$message.error('请至少添加一行表格数据');
        return false;
      }

      return true;
    },
    // 提交数据
    submit() {
      if (this.validateComponents()) {
        const data = this.getComponentsData();
        this.$emit('submit', data);
      }
    }
  },
};
</script>

<style scoped lang="less">
.choose-material {
  background: #eff8fa;
  padding: 20px;
  margin-top: 37px;
}
.has-title{
  margin-top: 0px !important;
}
.add-group {
  display: flex;
  align-items: center;
  margin-bottom: 19px;

  div {
    color: #f56c6c;
  }

  span {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 21px;
    margin: 0 32px 0 8px;
  }
}
.dynamic-component {
  background: #ffffff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .delete-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
::v-deep .el-upload {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .upload-text {
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    margin-top: 13px;
  }
}
.uploaf-notice {
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  margin-top: 8px;
}
.table-actions {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}
.groupTable {
  width: 100%;
  margin-top: 10px;
  ::v-deep .el-input__inner {
    width: unset !important;
  }
}

</style>

 laboratory/src/router/index.js

@@ -183,6 +183,31 @@
                component: () => import("../views/dataManagement/confirmation-sheet/components/add.vue"),
            },
            {
                path: "scheme-management",
                name: "schemeManagement",
                meta: {
                    title: "实验方案管理",
                },
                component: () => import("../views/dataManagement/schemeManagement/list.vue"),
            },
            {
                path: "scheme-management/add",
                name: "addSchemeManagement",
                meta: {
                    title: "添加实验方案",
                    hide: true,
                },
                component: () => import("../views/dataManagement/schemeManagement/addPlan.vue"),
            }, {
                path: "scheme-management/stop-experiment",
                name: "schemeManagementStopExperiment",
                meta: {
                    title: "终止实验方案",
                    hide: true,
                },
                component: () => import("../views/dataManagement/schemeManagement/stop-experiment.vue"),
            },
            {
                path: "/sampleManage",
                meta: {
                    title: "样品管理",

 laboratory/src/views/dataManagement/schemeManagement/addPlan.vue

New file
@@ -0,0 +1,761 @@
<template>
  <Card>
    <template style="position: relative">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        inline
        label-position="top"
      >
        <div class="header-title" style="margin-bottom: 38px;justify-content: space-between;">
          <div style="display: flex;align-items: center;gap: 13px;">
            <div class="header-title-left">
              <img src="@/assets/public/headercard.png" />
              <div>所属实验调度</div>
            </div>
            <el-button
              @click="showScheduling = true"
              class="el-icon-plus"
              type="primary"
            >
              选择实验调度</el-button
            >
          </div>
          <el-button
              @click="handleStopExperiment"
              type="danger"
            >
              申请终止实验</el-button
            >
        </div>
        <Table
          :data="groupTableData"
          :total="0"
          :height="null"
          class="groupTable"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="groupName" label="组别"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEditGroup(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDeleteGroup(scope.row)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </Table>

        <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="add-group">
          <span>组别列表</span>
          <!-- <el-button type="primary" class="el-icon-plus" @click="handleAddGroup">添加组别</el-button> -->
        </div>

        <Table
          :data="groupTableData"
          :total="0"
          :height="null"
          class="groupTable"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="groupName" label="组别"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </Table>

        <div style="padding-left: 25px">
          <el-form-item prop="name" label="试验日期">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </div>

        <div class="add-group">
          <div>*</div>
          <span>参加人员</span>
          <el-button type="primary" class="el-icon-plus" @click="addMember"
            >选择参加人员</el-button
          >
        </div>
        <div class="member-list">
          <div v-for="item in 3" :key="item" class="member-list-card">
            <div class="member-item">
              <div class="member-title">
                {{ ["工艺工程师", "实验员", "化验师"][item - 1] }}
              </div>
              <div
                :class="item == 1 || item == 2 ? 'member-name-box' : 'flex1'"
              >
                <div
                  :class="
                    item == 1 || item == 2
                      ? 'member-name-box'
                      : 'member-name-box-2'
                  "
                >
                  <div
                    v-for="i in memberList(item)"
                    :key="i"
                    class="member-name"
                  >
                    张三
                  </div>
                </div>
              </div>
              <div class="member-change">
                <div class="member-change-btn">修改</div>
              </div>
            </div>
          </div>
        </div>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>一、实验目的</div>
          </div>
        </div>
        <div class="content-box">
          <AiEditor
            ref="purposeEditor"
            v-model="editorContents.purpose"
            height="200px"
            placeholder="请输入实验目的..."
          />
        </div>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>二、工艺参数及路线</div>
          </div>
        </div>
        <div class="content-box">
          <AiEditor
            ref="processEditor"
            v-model="editorContents.process"
            height="200px"
            placeholder="请输入工艺参数及路线..."
          />
        </div>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>三、实验材料及设备</div>
          </div>
        </div>
        <DynamicComponent
          ref="materialComponent"
          title="实验材料"
          @submit="handleMaterialSubmit"
        />
        <DynamicComponent
          ref="equipmentComponent"
          title="实验所用设备"
          @submit="handleEquipmentSubmit"
        />

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>四、实验操作步骤记录</div>
          </div>
          <el-button @click="handleAddStep" class="el-icon-plus" type="primary">
            添加步骤</el-button
          >
        </div>

        <div class="step-list" v-for="(item, idx) in stepList" :key="idx">
          <div class="step-list-item">
            <div class="step-list-item-title">
              步骤{{ idx + 1 }}：{{ item.stepName }}
            </div>
            <div class="step-list-item-control">
              <div class="controlBtn edit" @click="handleEditStep(idx)">
                <img
                  src="@/assets/public/edit.png"
                  alt="编辑"
                  class="edit-icon"
                />
                编辑
              </div>
              <div class="controlBtn delete" @click="handleDeleteStep(idx)">
                <img
                  src="@/assets/public/delete.png"
                  alt="删除"
                  class="delete-icon"
                />
                删除
              </div>
            </div>
          </div>
          <DynamicComponent
            :ref="'stepContent' + idx"
            @submit="(content) => handleStepContentSubmit(idx, content)"
          />
        </div>

        <div class="add-project-footer">
          <el-button type="primary" class="save-btn" @click="handleSave"
            >发送</el-button
          >
          <el-button @click="handleSaveDraft">存草稿</el-button>
        </div>
      </el-form>
    </template>
    <SelectMember ref="selectMember" />
    <experimentalScheduling :show="showScheduling" />
    <AddStep ref="addStepDialog" @submit="handleStepSubmit" />
  </Card>
</template>

<script>
import SelectMember from "@/components/SelectMember";
import experimentalScheduling from "../confirmation-sheet/components/experimental-scheduling.vue";
import DynamicComponent from "@/components/DynamicComponent";
import AddStep from "./components/add-step.vue";
import AiEditor from "@/components/AiEditor";

export default {
  name: "AddProject",
  components: {
    SelectMember,
    experimentalScheduling,
    DynamicComponent,
    AddStep,
    AiEditor,
  },
  data() {
    return {
      showScheduling: false,
      form: {
        material: null,
        equipment: null,
      },
      editorContents: {
        purpose: "",
        process: "",
      },
      stepList: [],
      editingStepIndex: -1,
      rules: {
        name: [
          { required: true, message: "请输入项目组名称", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入项目组描述", trigger: "blur" },
        ],
        material: [
          { required: true, message: "请添加实验材料", trigger: "change" },
        ],
        equipment: [
          { required: true, message: "请添加实验设备", trigger: "change" },
        ],
      },
      groupTableData: [],
      taskTableData: [],
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("submit!");
        }
      });
    },
    addMember() {
      this.$refs.selectMember.open();
    },
    memberList(i) {
      switch (i) {
        case 1:
          return [1];
        case 2:
          return [1];
        case 3:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        case 4:
          return [1, 2, 3, 4, 5, 6, 7, 8];
        default:
          break;
      }
    },
    handleAddGroup() {
      this.$refs.addGroupDialog.open();
    },
    handleEditGroup(row) {
      this.$refs.addGroupDialog.open(row);
    },
    handleDeleteGroup(row) {
      this.$confirm("确认删除该组别吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.groupTableData.findIndex((item) => item === row);
          if (index > -1) {
            this.groupTableData.splice(index, 1);
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    handleGroupSubmit(form) {
      const index = this.groupTableData.findIndex(
        (item) => item.groupName === form.groupName
      );
      if (index > -1) {
        this.groupTableData.splice(index, 1, form);
      } else {
        this.groupTableData.push(form);
      }
    },
    handleAddTask() {
      this.$refs.addTaskDialog.open();
    },
    handleEditTask(row) {
      this.$refs.addTaskDialog.open(row);
    },
    handleDeleteTask(row) {
      this.$confirm("确认删除该任务吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.taskTableData.findIndex((item) => item === row);
          if (index > -1) {
            this.taskTableData.splice(index, 1);
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    handleTaskSubmit(form) {
      const index = this.taskTableData.findIndex(
        (item) => item.taskName === form.taskName
      );
      if (index > -1) {
        this.taskTableData.splice(index, 1, form);
      } else {
        this.taskTableData.push(form);
      }
    },
    handleMaterialSubmit(data) {
      this.form.material = data;
    },
    handleEquipmentSubmit(data) {
      this.form.equipment = data;
    },
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid && this.validateContent()) {
          this.$refs.materialComponent.submit();
          this.$refs.equipmentComponent.submit();

          const formData = {
            ...this.form,
            ...this.getAllEditorContent(),
            steps: this.stepList,
          };
          console.log("提交的数据：", formData);
          this.$message.success("保存成功");
        }
      });
    },
    handleSaveDraft() {
      this.$refs.materialComponent.submit();
      this.$refs.equipmentComponent.submit();

      const formData = {
        ...this.form,
        ...this.getAllEditorContent(),
        steps: this.stepList,
        status: "draft",
      };
      console.log("草稿数据：", formData);
      this.$message.success("草稿保存成功");
    },
    handleAddStep() {
      this.$refs.addStepDialog.open();
    },
    handleStepSubmit(stepData) {
      if (this.editingStepIndex > -1) {
        this.stepList[this.editingStepIndex].stepName = stepData.stepName;
        this.editingStepIndex = -1;
      } else {
        this.stepList.push({
          stepName: stepData.stepName,
          content: null,
        });
      }
    },
    handleDeleteStep(index) {
      this.$confirm("确认删除该步骤吗？删除后步骤内容将无法恢复", "警告", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirm-danger-btn",
      })
        .then(() => {
          this.stepList.splice(index, 1);
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    handleEditStep(index) {
      this.editingStepIndex = index;
      this.$refs.addStepDialog.open(true);
      this.$refs.addStepDialog.setStepName(this.stepList[index].stepName);
    },
    handleStepContentSubmit(index, content) {
      this.stepList[index].content = content;
    },
    getAllEditorContent() {
      return {
        purpose: this.$refs.purposeEditor.getContent(),
        process: this.$refs.processEditor.getContent(),
      };
    },
    validateContent() {
      const contents = this.getAllEditorContent();
      if (!contents.purpose) {
        this.$message.error("请填写实验目的");
        return false;
      }
      if (!contents.process) {
        this.$message.error("请填写工艺参数及路线");
        return false;
      }
      return true;
    },
    handleStopExperiment() {
      this.$router.push('/dataManagement/scheme-management/stop-experiment')
    },
  },
};
</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;
    }

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

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

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

.add-group {
  padding-left: 25px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 19px;

  div {
    color: #f56c6c;
  }

  span {
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 21px;
    margin: 0 32px 0 8px;
  }
}

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

.member-list {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-left: 38px;

  .member-list-card {
    width: 340px;
    height: 400px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;

    &:nth-child(1) {
      background: linear-gradient(
        to bottom,
        rgba(4, 156, 154, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
    }

    &:nth-child(2) {
      background: linear-gradient(
        to bottom,
        rgba(5, 160, 193, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
    }

    &:nth-child(3) {
      background: linear-gradient(
        to bottom,
        rgba(255, 77, 79, 0.2) 0%,
        rgba(255, 242, 194, 0) 70%
      );
    }

    &:nth-child(4) {
      background: linear-gradient(
        to bottom,
        rgba(250, 199, 20, 0.21) 0%,
        rgba(255, 242, 194, 0) 70%
      );
    }

    .member-item {
      height: 100%;
      display: flex;
      flex-direction: column;

      .member-title {
        margin-top: 20px;
        width: 100%;
        font-family: "Source Han Sans CN Bold Bold";
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        line-height: 16px;
        text-align: center;
      }
      .flex1 {
        flex: 1;
      }

      .member-name-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .member-name-box-2 {
        flex: 1;
        padding: 0 20px;
        padding-top: 40px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: center;
        align-items: start;
      }

      .member-name {
        width: 60px;
        height: 60px;
        background: #7d8b79;
        border-radius: 50%;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        margin: 0;
      }

      .member-change {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        margin-top: auto;
        cursor: pointer;
        .member-change-btn {
          background: #fff1f0;
          border-radius: 4px;
          border: 1px solid #ffccc7;
          padding: 1px 8px;
          font-weight: 400;
          font-size: 12px;
          color: #ff4d4f;
        }
      }
    }
  }
}

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

  button {
    width: 220px;
  }

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

.choose-material {
  background: #eff8fa;
  padding: 20px;
  margin-top: 37px;
}
.step-list {
  background: #eff8fa;
  padding: 20px;
  .step-list-item {
    display: flex;
    justify-content: space-between;
    padding: 25px;
    background: #ffffff;
    .step-list-item-title {
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      line-height: 20px;
      flex-wrap: wrap;
      flex: 1;
    }
    .step-list-item-control {
      display: flex;
      align-items: center;
      .controlBtn {
        height: 24px;
        background: #ffffff;
        border-radius: 4px;
        padding: 0px 8px;
        display: flex;
        align-items: center;
      }
      .edit {
        border: 1px solid #44be09;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #52c41a;
        line-height: 24px;
        margin-right: 50px;
      }
      .delete {
        border: 1px solid #ff4d4f;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #ff4d4f;
        line-height: 24px;
      }
      .edit-icon {
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }
      .delete-icon {
        width: 13px;
        height: 13px;
        margin-right: 9px;
      }
    }
  }
}

.content-box {
  padding: 0 25px;
  margin-bottom: 30px;
  width: 65%;
}
</style>

 laboratory/src/views/dataManagement/schemeManagement/components/add-step.vue

New file
@@ -0,0 +1,79 @@
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="步骤名称" prop="stepName">
        <el-input v-model="form.stepName" placeholder="请输入步骤名称"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" style="margin-left: 10px;">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddStep',
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      form: {
        stepName: ''
      },
      rules: {
        stepName: [
          { required: true, message: '请输入步骤名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑步骤' : '新增步骤'
    }
  },
  methods: {
    open(isEdit = false) {
      this.isEdit = isEdit
      this.dialogVisible = true
    },
    setStepName(name) {
      this.form.stepName = name
    },
    handleClose() {
      this.isEdit = false
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', {...this.form})
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input-number {
  width: 120px;
}
</style> 

 laboratory/src/views/dataManagement/schemeManagement/components/approvalDialog.vue

New file
@@ -0,0 +1,402 @@
<template>
  <el-dialog
    :title="dialogTitle"
    :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>
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              inline
              label-position="top"
              style="margin-top: 38px"
            >
              <el-form-item prop="name" label="项目课题方案名称">
                <el-input v-model="form.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="description" label="项目阶段">
                <el-input v-model="form.description" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="description" label="项目课题方案编号">
                <el-input v-model="form.description" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <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="item-title">
              <span>1.实验材料</span>
            </div>
            <div class="item-title">
              <span>2.实验设备</span>
            </div>

            <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="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="header-title">
              <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <span>注意事项</span>
              </div>
            </div>
          </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">
      <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>
      <div class="remark">
        <div class="remark-title">审批意见</div>
        <el-input type="textarea" v-model="remark" placeholder="请输入审批意见"   />
      </div>
    </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'

export default {
  name: "ApprovalDialog",
  components: {
    ApprovalProcess
  },
  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("update:visible", false);
      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: 300px;

  .approval-content {
    flex: 1;
    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;
    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;
  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;
  }
  //   align-items: center;
  .status-title {
    color: #222222;
    font-family: "SourceHanSansCN-Medium";
    line-height: 14px;
    margin-bottom: 16px;
  }
  .status-content {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(4, 156, 154, 0.5);
    .resolve {
      border-radius: 10px;
      font-size: 16px;
      padding: 5px 55px;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
    }
    .reject {
      border-radius: 10px;
      font-size: 16px;
      padding: 5px 55px;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
    }
    .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;
    button{
        width: 150px;
    }
}
</style>

 laboratory/src/views/dataManagement/schemeManagement/list.vue

New file
@@ -0,0 +1,328 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total">
      <template #search>
        <el-form :model="form" labelWidth="auto" 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-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" style="margin-left: 10px;">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle">
          <div class="flex a-center flex-wrap">
            <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="handleAddPlan" class="el-icon-plus" type="primary">
            新增实验方案</el-button
          >
        </div>
      </template>
      <template #table>
        <el-table-column
          prop="planName"
          label="项目课题方案名称"
        ></el-table-column>
        <el-table-column
          prop="planCode"
          label="实验编号"
        ></el-table-column>
        <el-table-column prop="stage" label="实验名称"></el-table-column>
        <el-table-column prop="testDate" label="试验日期"></el-table-column>
        <el-table-column prop="tester" label="试验员"></el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column prop="status" label="当前状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status === 'rejected'"
              type="text"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableCustom>
    <!-- 审批弹窗 -->
    <approval-dialog
      :visible.sync="approvalDialogVisible"
      :type="approvalDialogType"
      :data="currentApprovalData"
      @approve="handleApproveSubmit"
      @reject="handleRejectSubmit"
    />
  </div>
</template>

<script>
import ApprovalDialog from './components/approvalDialog.vue'

export default {
  name: "ProjectList",
  components: {
    ApprovalDialog
  },
  data() {
    return {
      currentType: 'list', // 当前显示类型：list-列表，draft-草稿箱
      form: {
        planName: "",
        planCode: "",
        creator: "",
        createTime: [],
        approver: "",
        status: "",
      },
      tableData: [],
      total: 0,
      // 模拟数据
      mockListData: [
        {
          planCode: 'PLAN-2024-001',
          planName: '2024年度实验室设备升级方案',
          stage: '设备升级实验',
          testDate: '2024-03-15',
          tester: '张三',
          creator: '张三',
          createTime: '2024-03-15',
          status: 'pending',
          approver: '李四',
          approveTime: '2024-03-16'
        },
        {
          planCode: 'PLAN-2024-002',
          planName: '实验室安全管理制度更新方案',
          stage: '安全测试实验',
          testDate: '2024-03-14',
          tester: '王五',
          creator: '王五',
          createTime: '2024-03-14',
          status: 'approved',
          approver: '赵六',
          approveTime: '2024-03-15'
        },
        {
          planCode: 'PLAN-2024-003',
          planName: '实验室人员培训计划',
          stage: '培训效果实验',
          testDate: '2024-03-13',
          tester: '孙七',
          creator: '孙七',
          createTime: '2024-03-13',
          status: 'rejected',
          approver: '周八',
          approveTime: '2024-03-14'
        }
      ],
      mockDraftData: [
        {
          planCode: 'DRAFT-2024-001',
          planName: '实验室设备采购计划（草稿）',
          stage: '规划阶段',
          creator: '张三',
          createTime: '2024-03-16',
          status: 'draft',
          approver: '',
          approveTime: ''
        },
        {
          planCode: 'DRAFT-2024-002',
          planName: '实验室改造方案（草稿）',
          stage: '准备阶段',
          creator: '李四',
          createTime: '2024-03-15',
          status: 'draft',
          approver: '',
          approveTime: ''
        }
      ],
      approvalDialogVisible: false,
      approvalDialogType: 'approve',
      currentApprovalData: null,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        planName: "",
        planCode: "",
        creator: "",
        createTime: [],
        approver: "",
        status: "",
      };
    },
    handleSearch() {
      // 实现查询逻辑
      console.log("查询条件：", this.form);
    },
    getStatusType(status) {
      const statusMap = {
        pending: "warning",
        rejected: "danger",
        approved: "success",
        archived: "info",
        draft: "info"
      };
      return statusMap[status] || "info";
    },
    getStatusText(status) {
      const statusMap = {
        pending: "待审批",
        rejected: "已驳回",
        approved: "已通过",
        archived: "已封存",
        draft: "草稿"
      };
      return statusMap[status] || "未知";
    },
    handleAddPlan() {
      this.$router.push({
        path: "/dataManagement/scheme-management/add",
      });
    },
    handleApprove(row) {
      this.currentApprovalData = row;
      this.approvalDialogType = 'approve';
      this.approvalDialogVisible = true;
    },
    handleApproveSubmit(data) {
      // 处理审批通过
      console.log('审批通过：', data);
      this.approvalDialogVisible = false;
      this.$message.success('审批通过成功');
      this.getTableData();
    },
    handleRejectSubmit(data) {
      // 处理审批驳回
      console.log('审批驳回：', data);
      this.approvalDialogVisible = false;
      this.$message.success('审批驳回成功');
      this.getTableData();
    },
    handleRevokeApprove(row) {
      // 实现撤销审批逻辑
      console.log("撤销审批数据：", row);
    },
    handleEdit(row) {
      this.$router.push({
        path: "/dataManagement/scheme-management/add",
        query: {
          id: row.planCode,
          type: 'edit'
        }
      });
    },
    handleDelete(row) {
      // 实现删除逻辑
      console.log("删除数据：", row);
    },
    handleDetail(row) {
      this.currentApprovalData = row;
      this.approvalDialogType = 'view';
      this.approvalDialogVisible = true;
    },
    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>

 laboratory/src/views/dataManagement/schemeManagement/stop-experiment.vue

New file
@@ -0,0 +1,302 @@
<template>
  <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="table-container">
        <el-table :data="experimentData" border style="width: 100%">
          <el-table-column prop="name" label="所属项目课题方案" />
          <el-table-column prop="code" label="实验编号" />
          <el-table-column prop="title" label="实验主题" />
          <el-table-column prop="startTime" label="实验开始时间" />
          <el-table-column prop="endTime" label="实验结束时间" />
          <el-table-column prop="participants" label="参加人员" />
          <el-table-column prop="status" label="状态" />
        </el-table>
      </div>

      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>申请说明</span>
        </div>
      </div>

      <div class="content-box">
        <AiEditor
          ref="reasonEditor"
          v-model="editorContent"
          height="200px"
          placeholder="请输入申请说明..."
        />
      </div>

      <div class="upload-section">
        <div class="upload-title">
          <span>上传文件</span>
        </div>
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :on-change="handleFileChange"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">支持格式：.rar .zip .doc .docx .pdf .jpg...</div>
        </el-upload>
      </div>

      <div class="footer-section">
        <div class="footer-content">
          <el-button type="primary" @click="openSignatureDialog" :disabled="!agreement">提交</el-button>
          <el-checkbox v-model="agreement">我确认，已仔细实验说明，准确描述本次实验中止全部情况及原因，特此申请中止本次实验。</el-checkbox>
        </div>
      </div>
    </template>

    <!-- 签字确认弹窗 -->
    <el-dialog
      title="实验中止确认"
      :visible.sync="signatureDialogVisible"
      width="30%"
      :close-on-click-modal="false"
      @close="handleDialogClose"
    >
      <div class="signature-dialog">
        <div class="add-group">
          <div class="required">*</div>
          <span>签字确认</span>
          <el-button type="primary" class="el-icon-plus" @click="openSignature">签名</el-button>
        </div>
        <img
          v-if="imgSrc"
          :src="imgSrc"
          alt="签名"
          class="signature-preview"
        />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!imgSrc">确 认</el-button>
      </div>
    </el-dialog>

    <SignatureCanvas
      :visible="signatureCanvasVisible"
      @confirm="handleSignatureConfirm"
    />
  </Card>
</template>

<script>
import AiEditor from '@/components/AiEditor'
import SignatureCanvas from "@/components/SignatureCanvas.vue"

export default {
  name: 'StopExperiment',
  components: {
    AiEditor,
    SignatureCanvas
  },
  data() {
    return {
      experimentData: [{
        name: '金标准研究项',
        code: 'DD-EX001',
        title: '金标准研究项',
        startTime: '2025-1-2 14:50:19',
        endTime: '2025-02-27',
        participants: '范兵, 李天霸, 张三, 李四',
        status: '已确认'
      }],
      editorContent: '',
      fileList: [],
      agreement: false,
      signatureDialogVisible: false,
      signatureCanvasVisible: false,
      imgSrc: "",
    }
  },
  methods: {
    handleFileChange(file, fileList) {
      this.fileList = fileList
    },
    getEditorContent() {
      return this.$refs.reasonEditor.getContent()
    },
    validateForm() {
      const content = this.getEditorContent()
      if (!content) {
        this.$message.error('请填写申请说明')
        return false
      }
      if (!this.agreement) {
        this.$message.error('请确认申请说明')
        return false
      }
      return true
    },
    openSignatureDialog() {
      this.signatureDialogVisible = true
    },
    handleDialogClose() {
      this.signatureDialogVisible = false
      this.imgSrc = ""
    },
    openSignature() {
      this.signatureCanvasVisible = true
    },
    handleSignatureConfirm(imageData) {
      this.signatureCanvasVisible = false
      this.imgSrc = imageData
    },
    handleConfirm() {
      if (!this.imgSrc) {
        this.$message.warning("请先完成签名确认")
        return
      }
      if (this.validateForm()) {
        const formData = {
          reason: this.getEditorContent(),
          files: this.fileList,
          experimentInfo: this.experimentData[0],
          signature: this.imgSrc
        }
        console.log('提交的数据：', formData)
        this.$message.success('提交成功')
        this.handleDialogClose()
      }
    }
  }
}
</script>

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

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

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

    span {
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";
    }
  }
}
.header-title:first-child {
  margin-top: 0;
}

.table-container {
  margin: 0 25px;
}

.content-box {
  padding: 0 25px;
  margin-bottom: 30px;
  width: 65%;
}

.upload-section {
  padding: 0 25px;
  margin-bottom: 30px;

  .upload-title {
    margin-bottom: 15px;
    span {
      font-size: 14px;
      color: #222222;
      &::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }

  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 8px;
  }
}

.footer-section {
  padding: 20px 25px;
  // border-top: 1px solid #e4e7ed;
  margin-top: 60px;

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

    .el-button {
      width: 120px;
    }
  }
}

.signature-dialog {
  padding: 0 20px;

  .add-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .required {
      color: #f56c6c;
      margin-right: 4px;
    }

    span {
      margin-right: 15px;
      font-size: 14px;
      color: #303133;
    }
  }

  .signature-preview {
    width: 200px;
    height: 100px;
    border: 2px dashed #049c9a;
    border-radius: 4px;
    object-fit: contain;
  }
}

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

  .el-button {
    width: 150px;
    margin: 0 10px;
  }
}
</style>