dvcp_v2_webapp/packages/wechat/AppPressCenter/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="policyType" label="类型：">
              <ai-select
                  v-model="articInfo.policyType"
                  placeholder="选择新闻类型"
                  :selectList="dict.getDict('newsCenterPolicyType')">
              </ai-select>
            </el-form-item>
            <el-form-item label="发布地区：" prop="areaId">
              <ai-area-get v-model="articInfo.areaId" :instance="instance" :root="areaId"/>
            </el-form-item>
            <el-form-item prop="content" label="正文：">
              <ai-editor v-model="articInfo.content" :instance="instance"/>
            </el-form-item>
            <el-form-item prop="coverFile" label="封面：">
              <ai-uploader :instance="instance" v-model="articInfo.coverFile" :limit="1" :isShowTip="true"
                           @change="$refs['ruleForm'].clearValidate('coverFile')" :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 type="primary" class="footer_btn" @click="handleSubmit('1')" v-if="!isEdit">发布</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,
    areaId: String,
    detail: Object,
  },
  data() {
    return {
      articInfo: {
        areaId: '',
        title: "",
        content: "",
        policyType: '',
        coverFile: [],
      },
      rules: {
        title: {required: true, message: '请输入标题', trigger: 'blur'},
        areaId: {required: true, message: '请选择 发布地区', trigger: 'blur'},
        policyType: {required: true, message: '请选择类型', trigger: 'change'},
        content: {required: true, message: '请填写内容', trigger: 'blur'},
        coverFile: {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) {
      const msg = +status ? '发布成功' : this.isEdit ? '编辑成功' : '保存成功';
      this.instance.post(`/app/appnewscenterinfo/addOrUpdate`, {
        ...this.articInfo,
        coverFile: {
          id: this.articInfo.coverFile[0].id
        },
        type: 0,
        id: this.$route.query.id,
        status: 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/appnewscenterinfo/queryDetailById`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.articInfo = res.data
          this.articInfo.areaId = res.data.areaId
          this.articInfo.title = res.data.title;
          this.articInfo.content = res.data.content;
          this.articInfo.policyType = res.data.policyType
          this.articInfo.coverFile = [{...res.data.coverFile, url: res.data.coverFile.accessUrl}];
        }
      })
    }
  },
  created() {
    if (this.isEdit) {
      this.getDetail();
    }
  }
}
</script>

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

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