cfc/cfc-web/src/components/KnowledgeDialog/index.vue

<template>
  <el-dialog
    :title="isEdit ? '编辑知识' : '新增知识'"
    :visible="visible"
    width="760px"
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="来源方式">
        <el-radio-group v-model="form.sourceType" @change="onSourceTypeChange">
          <el-radio label="manual">手动输入</el-radio>
          <el-radio label="file">上传文件</el-radio>
          <el-radio label="url">网址获取</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="form.sourceType === 'manual'">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="知识标题" maxlength="200" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="知识内容"
            maxlength="5000"
            show-word-limit
          />
        </el-form-item>
      </template>

      <template v-else-if="form.sourceType === 'file'">
        <el-form-item label="文件">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :limit="1"
            accept=".txt,.pdf,.doc,.docx,.md"
            :file-list="fileList"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" style="color:#999;font-size:12px;margin-top:4px">支持 .txt .pdf .doc .docx .md 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="form.fileName" label="已选文件">
          <span>{{ form.fileName }}</span>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="知识标题" maxlength="200" />
        </el-form-item>
      </template>

      <template v-else-if="form.sourceType === 'url'">
        <el-form-item label="网址">
          <el-input v-model="form.sourceUrl" placeholder="请输入网址，如 https://..." style="margin-bottom:8px">
            <el-button slot="append" :loading="fetching" @click="handleFetchUrl">获取内容</el-button>
          </el-input>
        </el-form-item>
        <el-form-item v-if="form.title || form.content" label="标题">
          <span>{{ form.title }}</span>
        </el-form-item>
      </template>

      <el-form-item label="维度">
        <dimension-selector v-model="form.dimensionIds" :multiple="true" />
      </el-form-item>
      <el-form-item label="标签">
        <tag-selector v-model="form.tagIds" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.sort" :min="0" :max="9999" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="500" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import DimensionSelector from '@/components/DimensionSelector'
import TagSelector from '@/components/TagSelector'
import { uploadKnowledgeFile, fetchUrlContent } from '@/api/dimension'

export default {
  name: 'KnowledgeDialog',
  components: { DimensionSelector, TagSelector },
  props: {
    visible: { type: Boolean, default: false },
    knowledge: { type: Object, default: () => null }
  },
  data() {
    return {
      submitting: false,
      fetching: false,
      fileList: [],
      form: this.initForm(),
      rules: {
        title: [{ required: true, message: '请输入知识标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入知识内容', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isEdit() {
      return !!this.knowledge
    }
  },
  watch: {
    knowledge(val) {
      if (val) {
        this.form = {
          id: val.id,
          title: val.title || '',
          content: val.content || '',
          dimensionIds: val.dimensionIds || [],
          tagIds: val.tagIds || [],
          sort: val.sort || 0,
          status: val.status !== undefined ? val.status : 1,
          remark: val.remark || '',
          fileUrl: val.fileUrl || '',
          fileName: val.fileName || '',
          sourceUrl: val.sourceUrl || '',
          sourceType: val.sourceType || 'manual'
        }
        if (this.form.fileUrl) {
          this.fileList = [{ name: this.form.fileName || '已上传文件' }]
        }
      } else {
        this.form = this.initForm()
      }
    }
  },
  methods: {
    initForm() {
      return {
        id: null,
        title: '',
        content: '',
        dimensionIds: [],
        tagIds: [],
        sort: 0,
        status: 1,
        remark: '',
        fileUrl: '',
        fileName: '',
        sourceUrl: '',
        sourceType: 'manual'
      }
    },
    onSourceTypeChange() {
      if (this.form.sourceType !== 'file') {
        this.fileList = []
      }
    },
    handleFileChange(file, files) {
      this.fileList = files.slice(-1)
    },
    handleFileRemove() {
      this.fileList = []
      this.form.fileUrl = ''
      this.form.fileName = ''
    },
    async handleUploadFile() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择文件')
        return
      }
      const file = this.fileList[0].raw
      try {
        const res = await uploadKnowledgeFile(file)
        if (res.code === 200 && res.data) {
          this.form.fileUrl = res.data.fileUrl
          this.form.fileName = res.data.fileName
          this.$message.success('文件上传成功')
        } else {
          this.$message.error(res.message || '上传失败')
        }
      } catch (e) {
        this.$message.error(e.message || '上传失败')
      }
    },
    async handleFetchUrl() {
      if (!this.form.sourceUrl) {
        this.$message.warning('请输入网址')
        return
      }
      this.fetching = true
      try {
        const res = await fetchUrlContent(this.form.sourceUrl)
        if (res.code === 200 && res.data) {
          this.form.title = res.data.title || '未获取到标题'
          this.form.content = res.data.content || ''
          this.form.sourceType = 'url'
          this.$message.success('内容获取成功')
        } else {
          this.$message.error(res.message || '获取失败')
        }
      } catch (e) {
        this.$message.error(e.message || '获取失败')
      } finally {
        this.fetching = false
      }
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.fileList = []
      this.$emit('update:visible', false)
    },
    async handleSubmit() {
      if (this.form.sourceType === 'manual') {
        try {
          await this.$refs.form.validateField(['title', 'content'])
        } catch {
          return
        }
      } else if (this.form.sourceType === 'file') {
        if (!this.form.title) {
          this.$message.warning('请填写标题')
          return
        }
      } else if (this.form.sourceType === 'url') {
        if (!this.form.sourceUrl) {
          this.$message.warning('请输入网址')
          return
        }
        if (!this.form.content) {
          this.$message.warning('请先点击"获取内容"')
          return
        }
      }
      this.submitting = true
      try {
        await this.$store.dispatch('dimension/saveKnowledge', this.form)
        this.$message.success('保存成功')
        this.handleClose()
        this.$emit('saved')
      } catch (e) {
        this.$message.error('保存失败: ' + (e.message || '未知错误'))
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>