dvcp_v2_webapp/project/oms/apps/AppArticles/components/Add.vue

<template>
  <ai-detail showFooter class="add-detail">
    <template slot="title">
      <ai-title :title="params.id ? '编辑村务公开' : '添加村务公开'" :isShowBack="true" @onBackClick="onBack"
                :isShowBottomBorder="true"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="基础信息">
        <template #content>
          <el-form :model="form" label-width="120px" ref="form">
            <el-form-item label="类型" prop="type" :rules="[{required: true, message: '请选择类型', trigger: 'change'}]">
              <el-select size="small" placeholder="请选择" v-model="form.type" style="width: 240px;" clearable>
                <el-option
                    v-for="(item,i) in dict.getDict('villInfoType')" :key="i"
                    :label="item.dictName"
                    :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
              <el-input type="textarea" :rows="2" v-model="form.title" clearable placeholder="请输入..." maxlength="100"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="content" :rules="[{required: true, message: '请输入正文', trigger: 'blur'}]">
              <ai-editor v-model="form.content" :instance="instance"/>
            </el-form-item>
            <!-- <el-form-item label="缩略图" prop="thumbUrl" :rules="[{required: true, message: '请上次缩略图', trigger: 'change'}]">
              <ai-uploader
                :isShowTip="true"
                :instance="instance"
                v-model="form.thumbUrl"
                :limit="1"
                :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" class="footer">
      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
      <el-button type="primary" size="small" @click="onSubmit()">保存</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Add',

  props: {
    dict: Object,
    instance: Function,
    areaId: String
  },

  data() {
    return {
      form: {
        title: '',
        type: '',
        content: '',
        fileIds: [],
        thumbUrl: []
      },
      fileList: [],
      isDetail: true,
      cropOps: {
        width: "336px",
        height: "210px"
      }
    }
  },

  computed: {
    ...mapState(['user']),
    params() {
      return this.$route.query
    }
  },

  created() {
    if (this.params && this.params.id) {
      this.getInfo()
    }
  },

  methods: {
    onBack() {
      this.$router.push({})
    },

    getInfo() {
      this.instance.post(`/appvillageinfo/queryDetailById?id=${this.params.id}`).then(res => {
        if (res.code === 0) {
          this.form = {
            ...res.data
          }
          this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
          this.fileList = res.data.files || []
        }
      })
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/appvillageinfo/addOrUpdate`, {
            ...this.form,
            fileIds: this.fileList.map(v => v.id),
            thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
              url: this.form.thumbUrl[0].url
            }]) : ''
          }).then(res => {
            if (res.code === 0) {
              this.$message.success(`${this.params.id ? '编辑成功' : '提交成功'}`)
              setTimeout(() => {
                this.cancel(true)
              }, 800)
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.add-detail {
  height: 100%;
  overflow: hidden;
  background: #F2F4F6 !important;

  .map-wrapper {
    position: relative;
    width: 100%;
    height: 400px;

    .search-input {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 1111;
      width: 220px !important;
      height: 32px !important;
    }

    #map {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      height: 400px;
    }
  }

  :deep( .el-form-item__content ){
    margin-left: 140px !important;
  }

  .add-detail__form {
    display: flex;
    justify-content: space-between;

    .el-input {
      width: 328px;
    }
  }

  .add-form {
    &:first-child {
      margin-bottom: 20px;
    }
  }

  .add-form__item, .add-detail__form {
    display: flex;
    align-items: center;
    padding: 0 90px 0 50px;
  }

  :deep( .ai-detail__footer ){
    background: #fff !important;
  }

  :deep( .ai-detail ){
    div {
      box-sizing: border-box;
    }
  }

  :deep( .ai-detail__content--active ){
    padding: 20px;
    box-sizing: border-box;

    .ai-detail__content--wrapper {
      width: 100%;
    }

    .aibar {
      padding: 0 16px;
    }

    .add-form {
      background: #fff;
    }
  }

  :deep( .ai-wrapper ){
    align-items: inherit !important;
  }

  .footer-btn {
    width: 92px;
  }

  el-form {
    padding-bottom: 80px;
  }
}
</style>