eta_front/src/views/knowledge_manage/edit.vue

<template>
  <div class="knowledge-edit-box">
    <header>
      <el-form
        ref="formRef"
        label-position="left"
        hide-required-asterisk
        inline
        label-width="0"
        :model="eventForm"
        :rules="formRules"
        :disabled="!isEdit"
      >
        <el-form-item prop="title">
          <el-input 
            v-model="eventForm.title" 
            placeholder="请输入标题"
            />
        </el-form-item>
        <el-form-item prop="classifyId">
          <el-cascader
              :options="classifyOptions"
              v-model="eventForm.classifyId"
              :props="{
                value: 'Id',
                label: 'ClassifyName',
                children: 'Child'
              }"
              clearable
              placeholder="请选择分类"
              style="width:100%;"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="source">
          <el-select
              v-model="eventForm.source"
              placeholder="请选择来源"
              size="medium"
              clearable
              style="width:100%;"
          >
              <el-option 
                v-for="item in sourcesOptions" 
                :key="item"
                :label="item" 
                :value="item" 
              />
          </el-select>
        </el-form-item>
        <el-form-item prop="tag">
          <el-select
              v-model="eventForm.tags"
              placeholder="请选择标签"
              size="medium"
              clearable
              style="width:100%;"
              multiple
              @change="filterChange"
          >
              <el-option 
                v-for="item in tagsOptions" 
                :key="item"
                :label="item" 
                :value="item" 
              />
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime">
          <label>开始时间</label>
          <el-date-picker
            v-model="eventForm.startTime"
            type="datetime"
            placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item prop="startTime">
          <label>结束时间</label>
          <el-date-picker
            v-model="eventForm.endTime"
            type="datetime"
            placeholder="请选择结束时间"
          />
        </el-form-item>
        
        <el-form-item v-if="!isEdit">
          <el-button type="primary" @click="handleSaveTarget">编辑</el-button>
        </el-form-item>
      </el-form>
    </header>
    <div class="main">
      <template v-if="isEdit">
        <editor 
          ref="editorRef"
        />

        <div class="btn-bottom">
          <el-button type="primary" plain @click="$router.replace({path: ''})">取消</el-button>
          <el-button type="primary" @click="">确定</el-button>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import editor from '@/views/semantics_manage/summery/components/editor.vue';
export default {
  components: { editor },
  computed: {
    isEdit() {
      return this.$route.path==='/knowledgeEdit'
    }
  },
  data() {
    return {
      eventForm: {
        title: '',
        classifyId: 0,
        source:'',
        tags:[],
        startTime:'',
        endTime:''
      },
      formRules:[],

      sourcesOptions:[],
      tagsOptions:[],
    }
  },
  mounted(){

  },
  methods:{

  },
}
</script>
<style scoped lang='scss'>
  .knowledge-edit-box {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    header,.main{
      padding: 20px;
      background: #fff;
      border: 1px solid #C8CDD9;
      border-radius: 4px;
    }
    .main {
      flex: 1;
      margin-top: 20px;
      overflow-y: auto;
      .btn-bottom {
        display: flex;
        gap: 20px;
        justify-content: flex-end;
        margin-top: 20px;
        .el-button {
          width: 130px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .knowledge-edit-box {
    .fr-element {
      height: calc(100vh - 500px);
    }
  }
</style>