初始化

packages/wechat/AppPressCenter/components/addArticle.vue

@@ -0,0 +1,154 @@
+<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>