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: 'ClassifyId',
                label: 'ClassifyName',
                children: 'Child',
                emitPath:false
              }"
              clearable
              placeholder="请选择分类"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="source">
          <el-input 
            v-model="eventForm.source" 
            placeholder="请输入来源"
            clearable
          />
        </el-form-item>
        <el-form-item prop="tagId">
          <el-select
              v-model="eventForm.tagId"
              placeholder="请选择标签"
              size="medium"
              clearable
          >
              <el-option 
                v-for="item in tagsOptions" 
                :key="item.TagId"
                :label="item.TagName" 
                :value="item.TagId" 
              />
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime">
          <label>开始时间</label>
          <el-date-picker
            v-model="eventForm.startTime"
            :value-format="formatTime"
            :format="formatTime"
            :type="[2,3].includes(ResourceType)?'date':'datetime'"
            placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item prop="endTime" v-if="![2,3].includes(ResourceType)">
          <label>结束时间</label>
          <el-date-picker
            v-model="eventForm.endTime"
            :value-format="formatTime"
            :format="formatTime"
            :type="[2,3].includes(ResourceType)?'date':'datetime'"
            placeholder="请选择结束时间"
          />
        </el-form-item>

      </el-form>

      <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>
    </header>
    <div class="main">
      <!-- 编辑 -->
      <template v-if="isEdit&&(!eventDetail||(eventDetail&&!eventDetail.IsFile))">
        <editor 
          ref="editorRef"
        />

        <div class="btn-bottom">
          <el-button type="primary" plain @click="handleBack">取消</el-button>
          <el-button type="primary" @click="handleConfirmEvent">确定</el-button>
        </div>
      </template>

      <!-- 详情 -->
      <template v-if="!isEdit || (eventDetail&&eventDetail.IsFile)">
        <eventPreview
          :eventDetail="eventDetail||{}"
        />

        <div class="btn-bottom" v-if="isEdit&&eventDetail.IsFile">
          <el-button type="primary" plain @click="handleBack">取消</el-button>
          <el-button type="primary" @click="handleConfirmEvent">确定</el-button>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { eventInterface } from '@/api/modules/knowledge';
import editor from '@/views/semantics_manage/summery/components/editor.vue';
import eventPreview from './components/eventPreview.vue';
export default {
  components: { editor,eventPreview },
  computed: {
    isEdit() {
      return this.$route.path==='/knowledgeEdit'
    },
    currentPath() {
      const pathMap = {
        0:'/knowledge_event',
        1:'/knowledge_policy',
        2:'/knowledge_viewpoint',
        3:'/knowledge_know',
      }

      return pathMap[this.ResourceType] && pathMap[this.ResourceType]
    },
    formatTime() {
      return [2,3].includes(this.ResourceType) ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
    }
  },
  data() {
    return {
      ResourceType: Number(this.$route.query.source),
      id: Number(this.$route.query.id),
      eventDetail: null,
      eventForm: {
        title: '',
        classifyId: 0,
        source:'',
        tagId:'',
        startTime:'',
        endTime:''
      },
      formRules:{
        title:[
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
        classifyId:[
          { required: true, message: '分类不能为空', trigger: 'blur' },
        ],
        source:[
          { required: true, message: '来源不能为空', trigger: 'blur' },
        ],
        startTime:[
          { required: true, message: '开始时间不能为空', trigger: 'blur' },
        ],
      },
      
      classifyOptions:[],
      sourcesOptions:[],
      tagsOptions:[],
    }
  },
  beforeRouteEnter(to,from,next) {
    
    if(to.query.source){
      let pathMap = {
        0: { name: '事件库',path:'knowledge_event' },
        1: { name: '政策库',path:'knowledge_policy' },
        2: { name: '观点库',path:'knowledge_viewpoint' },
        3: { name: '知识库',path:'knowledge_know' },
      }
      to.meta.pathFrom=pathMap[to.query.source].path;
      to.meta.pathName=pathMap[to.query.source].name;
    }
    next()

  },
  mounted(){
    this.getClassifyList()
    this.getTagsList()

    this.id && this.getEventDetail()
  },
  methods:{

    async getClassifyList() {
      const res = await eventInterface.getClassify({
        ResourceType: this.ResourceType
      })
      if(res.Ret !== 200) return

      this.classifyOptions = res.Data.List || []
    },

    async getSourceList() {
      const res = await eventInterface.getSourcesList({
        ResourceType: this.ResourceType
      })
      if(res.Ret !== 200) return

      this.sourcesOptions = res.Data.List || []
    },

    async getTagsList() {
      const res = await eventInterface.getTagList({ResourceType:this.ResourceType})
      if(res.Ret !== 200) return

      this.tagsOptions=res.Data.List || []
    },

    async getEventDetail() {
      const res = await eventInterface.getEventDetail({
        ResourceType: this.ResourceType,
        KnowledgeResourceId: this.id
      })

      if(res.Ret !== 200) return
      this.eventDetail = {
        ...res.Data,
        StartTime: res.Data.StartTime 
          ? this.$moment(res.Data.StartTime).format([2,3].includes(this.ResourceType)?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss') 
          : '',
        EndTime:res.Data.EndTime 
          ? this.$moment(res.Data.EndTime).format([2,3].includes(this.ResourceType)?'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss') 
          : '',
      };
      this.eventForm = {
        title: this.eventDetail.Title,
        classifyId: this.eventDetail.ClassifyId,
        source: this.eventDetail.SourceFrom,
        tagId: this.eventDetail.TagId||'',
        startTime: this.eventDetail.StartTime,
        endTime:this.eventDetail.EndTime
      }
      
      this.$refs.editorRef&&this.$refs.editorRef.initData(this.eventDetail.Content)
    },

    async handleConfirmEvent() {
      await this.$refs.formRef.validate()
      const { 
        title,
        classifyId,
        source,
        tagId,
        startTime,
        endTime
      } = this.eventForm;
      let params = {
        ResourceType: this.ResourceType,
        ClassifyId: classifyId,
        Title: title,
        Content: this.$refs.editorRef?this.$refs.editorRef.content:'',
        SourceFrom: source,
        TagId: tagId || 0,
        StartTime: startTime,
        EndTime: endTime || '',
        FileUrl: this.eventDetail?this.eventDetail.FileUrl:''
      }
      const res = this.id
        ? await eventInterface.editEvent({
          ...params,
          KnowledgeResourceId: this.id
        })
        : await eventInterface.addEvent(params)

      if(res.Ret !== 200) return 

      this.$message.success(this.id?'编辑成功':'添加成功')
      
      this.$router.replace({
        path: this.currentPath
      })
    },

    handleBack() {
      this.$router.replace({
        path: this.currentPath
      })
    },

    handleEdit() {
      this.$router.push({
        path:'/knowledgeEdit',
        query: {
          id: this.id,
          source: this.ResourceType
        }
      })
    }
  },
}
</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;
    }
    header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-button {
        width: 130px;
      }
    }
    .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);
    }
    #froala-editor-documentContent {
      display: none !important;
    }
  }
</style>