引入富文本框

董国庆

2025-04-21 0857d4bcee5e4201a117b87caa94a6629af035de

引入富文本框

 src/components/AiEditor/index.vue

@@ -54,7 +54,7 @@
  watch: {
    value: {
      handler(newVal) {
        if (this.editor && newVal !== this.editor.getContent()) {
        if (this.editor && newVal !== this.editor.getHtml()) {
          this.editor.setContent(newVal)
        }
      },
@@ -95,7 +95,9 @@
        // 禁用 AI 功能
        ai: false,
        // 禁用调整大小功能
        resize: false
        resize: false,
        // 添加唯一标识
        id: `editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
      }

      try {
@@ -112,7 +114,7 @@
    },
    // 获取编辑器内容
    getContent() {
      return this.editor ? this.editor.getContent() : ''
      return this.editor ? this.editor.getHtml() : ''
    },
    // 设置编辑器内容
    setContent(content) {

 src/views/dataManagement/approvalPlan/addPlan.vue

@@ -31,6 +31,12 @@
          <div>一 、实验目的</div>
        </div>
      </div>
      <AiEditor
        ref="purposeEditor"
        v-model="editorContents.purpose"
        height="200px"
        placeholder="请输入实验目的..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
@@ -40,43 +46,84 @@
      <div class="item-title">
        <span>1.实验材料</span>
      </div>
      <AiEditor
        ref="materialEditor"
        v-model="editorContents.material"
        height="200px"
        placeholder="请输入实验材料..."
      />
      <div class="item-title">
        <span>2.实验设备</span>
      </div>

      <AiEditor
        ref="equipmentEditor"
        v-model="editorContents.equipment"
        height="200px"
        placeholder="请输入实验设备..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>三 、检测方法及开发</div>
        </div>
      </div>
      <AiEditor
        ref="methodEditor"
        v-model="editorContents.method"
        height="200px"
        placeholder="请输入检测方法及开发..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>四 、实验步骤</div>
        </div>
      </div>
      <AiEditor
        ref="stepsEditor"
        v-model="editorContents.steps"
        height="200px"
        placeholder="请输入实验步骤..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>五 、数据采集及分析</div>
        </div>
      </div>
      <AiEditor
        ref="dataAnalysisEditor"
        v-model="editorContents.dataAnalysis"
        height="200px"
        placeholder="请输入数据采集及分析..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>六 、结果评估</div>
        </div>
      </div>
      <AiEditor
        ref="evaluationEditor"
        v-model="editorContents.evaluation"
        height="200px"
        placeholder="请输入结果评估..."
      />
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>注意事项</span>
        </div>
      </div>
      <AiEditor
        ref="notesEditor"
        v-model="editorContents.notes"
        height="200px"
        placeholder="请输入注意事项..."
      />
      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">保存</el-button>
        <el-button>存草稿</el-button>
        <el-button type="primary" class="save-btn" @click="handleSave">保存</el-button>
        <el-button @click="handleSaveDraft">存草稿</el-button>
      </div>
    </template>
    <SelectMember ref="selectMember" />
@@ -84,11 +131,38 @@
</template>

<script>
import AiEditor from '@/components/AiEditor'
// import { savePlan, saveDraft } from '@/api/approvalPlan'

export default {
  name: "AddProject",
  components: {
    AiEditor
  },
  data() {
    return {
      form: {},
      form: {
        name: '',
        description: '',
        purpose: '',
        material: '',
        equipment: '',
        method: '',
        steps: '',
        dataAnalysis: '',
        evaluation: '',
        notes: ''
      },
      editorContents: {
        purpose: '',
        material: '',
        equipment: '',
        method: '',
        steps: '',
        dataAnalysis: '',
        evaluation: '',
        notes: ''
      },
      rules: {
        name: [
          { required: true, message: "请输入项目组名称", trigger: "blur" },
@@ -96,33 +170,69 @@
        description: [
          { required: true, message: "请输入项目组描述", trigger: "blur" },
        ],
        purpose: [
          { required: true, message: "请输入实验目的", trigger: "blur" },
        ],
        material: [
          { required: true, message: "请输入实验材料", trigger: "blur" },
        ],
        equipment: [
          { required: true, message: "请输入实验设备", trigger: "blur" },
        ],
        method: [
          { required: true, message: "请输入检测方法及开发", trigger: "blur" },
        ],
        steps: [
          { required: true, message: "请输入实验步骤", trigger: "blur" },
        ],
        dataAnalysis: [
          { required: true, message: "请输入数据采集及分析", trigger: "blur" },
        ],
        evaluation: [
          { required: true, message: "请输入结果评估", trigger: "blur" },
        ],
        notes: [
          { required: true, message: "请输入注意事项", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
    // 获取所有编辑器的内容
    getAllEditorContent() {
      return {
        purpose: this.$refs.purposeEditor.getContent(),
        material: this.$refs.materialEditor.getContent(),
        equipment: this.$refs.equipmentEditor.getContent(),
        method: this.$refs.methodEditor.getContent(),
        steps: this.$refs.stepsEditor.getContent(),
        dataAnalysis: this.$refs.dataAnalysisEditor.getContent(),
        evaluation: this.$refs.evaluationEditor.getContent(),
        notes: this.$refs.notesEditor.getContent()
      }
    },
    // 保存
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("submit!");
          const formData = {
            ...this.form,
            ...this.getAllEditorContent()
          }
          console.log('保存数据：', formData)
          this.$message.success('保存成功')
        }
      });
      })
    },
    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;
    // 保存草稿
    handleSaveDraft() {
      const formData = {
        ...this.form,
        ...this.getAllEditorContent(),
        status: 'draft'
      }
      console.log('草稿数据：', formData)
      this.$message.success('草稿保存成功')
    },
  },
};
@@ -212,4 +322,12 @@
    margin-right: 20px;
  }
}

.ai-editor-container {
  width: 75%;
  margin: 20px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
}
</style>

 src/views/dataManagement/testResultReport/detail.vue

@@ -614,12 +614,7 @@
    // 更新弹窗显示状态
    updateEvaluationDialogVisible(value) {
      this.evaluationDialogVisible = value;
    },
    // 处理新增组件
    handleAddComponent(type) {
      console.log('选择的组件类型：', type);
      // TODO: 根据type处理不同类型组件的添加逻辑
    },
    }
  },
};
</script>