flowable_management/base-vue/src/views/modules/knowledge/knowledge-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? '新增知识文档' : '编辑知识文档'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%"
    top="5vh">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="small">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="dataForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="副标题" prop="subtitle">
            <el-input v-model="dataForm.subtitle" placeholder="请输入副标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

<!--      <el-row :gutter="20">-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="分类" prop="categoryId">-->
<!--            <el-input v-model.number="dataForm.categoryId" placeholder="请输入分类ID" type="number"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--&lt;!&ndash;          <el-form-item label="封面图" prop="coverImage">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input v-model="dataForm.coverImage" placeholder="请输入封面图URL">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button slot="append" icon="el-icon-upload">上传</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-input>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--        </el-col>-->
<!--      </el-row>-->

      <el-form-item label="摘要" prop="summary">
        <el-input
          v-model="dataForm.summary"
          type="textarea"
          :rows="3"
          placeholder="请输入摘要（选填）">
        </el-input>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input
          v-model="dataForm.content"
          type="textarea"
          :rows="10"
          placeholder="请输入HTML格式内容">
        </el-input>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标签" prop="tags">
            <el-input v-model="dataForm.tags" placeholder="多个标签用逗号分隔，如：Java,Spring,MySQL"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="dataForm.status" placeholder="请选择状态" style="width: 100%;">
              <el-option label="草稿" value="DRAFT"></el-option>
              <el-option label="已发布" value="PUBLISHED"></el-option>
              <el-option label="审核中" value="REVIEWING"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否置顶" prop="isTop">
            <el-switch
              v-model="dataForm.isTop"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="过期时间" prop="expireTime">
            <el-date-picker
              v-model="dataForm.expireTime"
              type="datetime"
              placeholder="选择过期时间（选填）"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="small">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" size="small" :loading="submitLoading">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      submitLoading: false,
      dataForm: {
        id: null,
        title: '',
        subtitle: '',
        content: '',
        plainContent: '',
        summary: '',
        categoryId: null,
        coverImage: '',
        status: 'DRAFT',
        tags: '',
        isTop: 0,
        expireTime: ''
      },
      dataRule: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (id) {
      this.dataForm.id = id || null
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http({
        url: this.$http.adornUrl(`/knowledge/info/${this.dataForm.id}`),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 200) {
          const knowledge = data.knowledge
          this.dataForm.title = knowledge.title
          this.dataForm.subtitle = knowledge.subtitle
          this.dataForm.content = knowledge.content
          this.dataForm.plainContent = knowledge.plainContent
          this.dataForm.summary = knowledge.summary
          this.dataForm.categoryId = knowledge.categoryId
          this.dataForm.coverImage = knowledge.coverImage
          this.dataForm.status = knowledge.status
          this.dataForm.tags = knowledge.tags
          this.dataForm.isTop = knowledge.isTop
          this.dataForm.expireTime = knowledge.expireTime
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true

          // 生成纯文本内容（去除HTML标签）
          this.dataForm.plainContent = this.dataForm.content.replace(/<[^>]+>/g, '')

          const url = !this.dataForm.id ? '/knowledge/save' : '/knowledge/update'
          const method = !this.dataForm.id ? 'post' : 'put'

          this.$http({
            url: this.$http.adornUrl(url),
            method: method,
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.submitLoading = false
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>