dvcp_v2_webapp/packages/jianping/AppPublicizeInformation/Add.vue

<template>
  <section class="Add">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-form :model="form" ref="ruleForm" :rules="rules" label-width="130px" label-position="right" size="small">
          <ai-card title="基本信息">
            <template #content>
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题" :maxlength="50" />
              </el-form-item>
              <el-form-item label="发布地区" prop="areaId">
                <ai-area-get :instance="instance" v-model="form.areaId" :root="rootArea" valueLevel="5"/>
              </el-form-item>
              <el-form-item label="文章类型" prop="moduleId" style="width:50%;">
                <ai-select v-model="form.moduleId" :selectList="dict.getDict('sex')"/>
              </el-form-item>
              <el-form-item label="分类" prop="categoryId"  style="width:50%;">
                <ai-select v-model="form.categoryId" :selectList="dict.getDict('sex')"/>
              </el-form-item>
              <el-form-item label="正文" prop="content" style="width: 100%;">
                <ai-editor v-model="form.content" :instance="instance"/>
              </el-form-item>
              <el-form-item label="封面图片（最多1张）" >
                <ai-uploader
                  :isShowTip="true"
                  :instance="instance"
                  v-model="form.pictureUrlList"
                  fileType="img"
                  acceptType=".png,.jpg,.jpeg"
                  :limit="1">
                  <template slot="tips">最多上传1张图片,单张图片最大10MB<br/>支持.png,.jpg,.jpeg格式</template>
                </ai-uploader>
              </el-form-item>
              <el-form-item label="附件附件" prop="fileList">
                <el-upload
                    class="upload-demo"
                    action
                    multiple
                    accept=".zip,.rar,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,.jpg,.png"
                    :http-request="uploadFile"
                    :on-exceed="()=>$message.error('最多只能上传9个附件!')"
                    :on-remove="handleRemove"
                    :on-change="handleChange"
                    :limit="9"
                    :file-list="form.files">
                  <el-button size="mini"> 添加附件</el-button>
                  <div slot="tip" class="el-upload__tip">
                    <p style="line-height: 0;">最多上传9个附件,单个文件最大10MB </p>
                    <p style="line-height: 40px;">
                      支持.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式</p>
                  </div>
                </el-upload>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "Add",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    isEdit() {
      return !!this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? "编辑新闻发布" : "添加新闻发布"
    },
    rules() {
      return {
        title: [{required: true, message: "请输入标题"}],
        areaId: [{required: true, message: "请选择发布地区"}],
        moduleId: [{required: true, message: "请选择文章类型"}],
        categoryId: [{required: true, message: "选择分类"}],
      }
    },
    rootArea() {
      return this.user.info?.areaId?.replace(/(\d{6})\d+/g, '$1' + Array(7).join("0")) || ""
    }
  },
  data() {
    return {
      form: {
        householdRelation: "",
        healthyStatus: [],
        file: []
      },
    }
  },
  methods: {
    // 上传附件
    uploadFile: function (file) {
      const isLt10M = file.file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("附件大小不超过10mb!");
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].uid == file.file.uid) {
            this.fileList.splice(i, 1);
          }
        }
        return;
      }
      let formData = new FormData();
      formData.append("file", file.file);
      this.instance.post(`/admin/file/add`, formData, {withCredentials: false}).then(res => {
        if (res && res.code == 0) {
          let img = res.data[0].split(';');
          this.fileList.forEach((item, index) => {
            if (item.uid == file.file.uid) {
              this.fileList[index].id = img[1];
            }
          })
        }
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    back() {
      this.$router.push({})
    },
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/app/apppreventionreturntopoverty/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    submit() {
      this.$refs.ruleForm.validate(v => {
        if (v) {
          if (this.form.isHousehold == 1) {
            this.form.householdIdNumber = this.form.idNumber
          }
          this.instance.post(`/app/apppreventionreturntopoverty/addOrUpdate`, this.form).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功!');
              this.back()
            }
          })
        }
      })
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.Add {
  height: 100%;

  .half {
    align-items: flex-start;

    & > .el-form-item, & > div {
      width: 50%;

      .el-form-item {
        width: 100%;
      }
    }
  }

  .el-date-editor {
    width: 100%;
  }
}
</style>