eta_front/src/views/knowledge_manage/components/importFileDia.vue

<template>
   <el-dialog
      :visible.sync="show"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="cancelHandle"
      custom-class="knowledge-import-dialog"
      top="10vh"
      v-dialogDrag
      title="事件信息"
      width="650px"
    >
      <el-form
        ref="formRef"
        hide-required-asterisk
        :model="eventForm"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item prop="title" label="标题">
          <el-input 
            v-model="eventForm.title" 
            placeholder="请输入标题"
            style="width:80%"
          />
        </el-form-item>
        <el-form-item prop="classifyId" label="分类">
          <el-cascader
              :options="classifyOptions"
              v-model="eventForm.classifyId"
              :props="{
                value: 'ClassifyId',
                label: 'ClassifyName',
                children: 'Child',
                emitPath:false
              }"
              clearable
              placeholder="请选择分类"
              style="width:80%"
          ></el-cascader>
        </el-form-item>

        <el-form-item prop="source" label="来源">
          <el-input 
            v-model="eventForm.source" 
            placeholder="请输入来源"
            style="width:80%"
            clearable
          />
        </el-form-item>
        <el-form-item prop="tagId" label="标签">
          <el-select
              v-model="eventForm.tagId"
              placeholder="请选择标签"
              size="medium"
              clearable
              style="width:80%"
          >
              <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="开始时间">
          <el-date-picker
            v-model="eventForm.startTime"
            :value-format="formatTime"
            :format="formatTime"
            :type="[2,3,4].includes(ResourceType)?'date':'datetime'"
            placeholder="请选择开始时间"
            style="width:80%"
          />
        </el-form-item>
        <el-form-item prop="endTime" v-if="![2,3,4].includes(ResourceType)" label="结束时间">
          <el-date-picker
            v-model="eventForm.endTime"
            :value-format="formatTime"
            :format="formatTime"
            :type="[2,3,4].includes(ResourceType)?'date':'datetime'"
            placeholder="请选择结束时间"
            style="width:80%"
          />
        </el-form-item>
      </el-form>

      <div class="btn-bottom">
        <el-button type="primary" plain @click="cancelHandle">取消</el-button>
        <el-button type="primary" @click="handleConfirmEvent">确定</el-button>
      </div>
  </el-dialog>  
</template>
<script>
import { eventInterface } from '@/api/modules/knowledge';
export default {
  props: {
    show: {
      type: Boolean
    },
    ResourceType: {
      type: Number
    },
    importFileUrl: {
      type: String
    },
    fileName: {
      type: String
    },
  },
  computed: {
    formatTime() {
      return [2,3,4].includes(this.ResourceType) ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'
    }
  },
  watch: {
    show(nval) {
      if(!nval) return 
      this.eventForm.title=this.fileName
      this.getClassifyList();
      this.getTagsList();
    }
  },
  data() {
    return {
      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:[],
    }
  },
  mounted(){

  },
  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 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: '',
        SourceFrom: source,
        TagId: tagId || 0,
        StartTime: startTime,
        EndTime: endTime || '',
        FileUrl: this.importFileUrl ? [this.importFileUrl] : [],
      }
      const res = await eventInterface.addEvent(params)

      if(res.Ret !== 200) return 

      this.$message.success('添加成功')

      this.$emit('confirm')
      this.cancelHandle()
    },

    cancelHandle() {
      this.$refs.formRef.resetFields()
      this.$emit('update:show',false)
    }
  },
}
</script>
<style scoped lang='scss'>
.el-form {
  padding: 0 40px;
}
.btn-bottom {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  .el-button {
    width: 130px;
  }
}
</style>