dvcp_v2_webapp/project/xiushan/apps/AppNewsCenter/components/addArticle.vue

<template>
  <ai-detail class="add-article">
    <template slot="title">
      <ai-title :title="isEdit?'编辑新闻':'发布新闻'" :isShowBack="true" :isShowBottomBorder="true"
                @onBackClick="$emit('goBack')"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="发布新闻">
        <template #content>
          <el-form ref="ruleForm" :model="articInfo" :rules="rules" label-width="120px" label-position="right">
            <el-form-item prop="title" label="标题：">
              <el-input v-model="articInfo.title" size="small" placeholder="请输入…" maxlength="30"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item prop="description" label="摘要：">
              <el-input type="textarea" v-model="articInfo.description" size="small" placeholder="请输入…" maxlength="255"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item prop="category" label="分类：">
              <ai-select
                  v-model="articInfo.category"
                  placeholder="选择新闻分类"
                  :selectList="dict.getDict('appNewsCategory')">
              </ai-select>
            </el-form-item>
            <el-form-item prop="content" label="正文：">
              <ai-editor v-model="articInfo.content" :instance="instance"/>
            </el-form-item>
            <el-form-item prop="thumbUrl" label="封面：">
              <ai-uploader :instance="instance" v-model="articInfo.thumbUrl" :limit="1" :isShowTip="true"
                           @change="$refs['ruleForm'].clearValidate('thumbUrl')" :cropOps="cropOps" is-crop>
                <template slot="tips">最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png<br/>格式图片比例：1.6：1</template>
              </ai-uploader>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template slot="footer">
      <el-button class="footer_btn" @click="$emit('goBack')">取消</el-button>
      <el-button class="footer_btn" @click="handleSubmit('0')">保存</el-button>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: "addArticle",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    detail: Object,
  },
  data() {
    return {
      articInfo: {
        id: "",
        title: "",
        content: "",
        description: "",
        category: '',
        thumbUrl: '',
      },
      rules: {
        title: {required: true, message: '请输入标题', trigger: 'blur'},
        description: {required: true, message: '请输入摘要', trigger: 'blur'},
        category: {required: true, message: '请选择分类', trigger: 'change'},
        content: {required: true, message: '请填写内容', trigger: 'blur'},
        thumbUrl: {required: true, message: '请上传封面', trigger: 'blur'},
      },
      cropOps: {
        fixedNumber: [1.8, 1],
        fixed: true
      }
    }
  },
  computed: {
    isEdit() {
      return !!this.$route.query.id;
    }
  },
  methods: {
    /**
     * 发布、保存新闻
     * @param status
     */
    handleSubmit(status) {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.addOrUpdate(status);
        }
      })
    },

    /**
     * 新增、修改
     * */
    addOrUpdate(status) {
      if (Array.isArray(this.articInfo.thumbUrl)) {
        this.articInfo.thumbUrl = this.articInfo.thumbUrl[0].url
      }
      const msg = +status ? '发布成功' : this.isEdit ? '编辑成功' : '保存成功';
      this.instance.post(`/app/appnews/addOrUpdate`, {
        ...this.articInfo,
        thumbUrl: this.articInfo.thumbUrl,
        category: this.articInfo.category,
        type: 0,
        id: this.articInfo.id,
        status: this.articInfo.status
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(msg);
          this.$emit("goBack");
        }
      })
    },

    /**
     * 根据id查询详情
     */
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post(`/app/appnews/getById`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.articInfo = res.data
          this.articInfo.id = res.data.id
          this.articInfo.title = res.data.title;
          this.articInfo.content = res.data.content;
          this.articInfo.category = res.data.category
          this.articInfo.thumbUrl = [{url: res.data.thumbUrl}]
        }
      })
    }
  },
  created() {
    if (this.isEdit) {
      this.getDetail();
    }
  }
}
</script>

<style lang="scss" scoped>
.add-article {
  height: 100%;
  overflow: auto;
  background: #F3F6F9;

  .footer_btn {
    width: 106px;
  }
}
</style>