dvcp_v2_wxcp_app/src/saas/AppConflictMediation/add.vue

<template>
  <div class="album">
    <div class="form-item__group">
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>事件描述</h2>
          </div>
          <div class="form-item__right">
            <textarea v-model="form.content" :maxlength="200" placeholder="请简要描述事件…"></textarea>
          </div>
          <div class="limit">{{ form.content.length }}/200</div>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item form-item__imgs">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i style="opacity: 0">*</i>
            <h2>图片上传</h2>
            <span>(最多9张)</span>
          </div>
          <div class="form-item__right">
            <!-- <AiUploader :def.sync="form.files" :limit="9"  action="/admin/file/add2"></AiUploader> -->
            <AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>事件类型</h2>
          </div>
          <div class="form-item__right">
            <AiSelect :list="dictList" v-model="form.groupId"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>发生地点</h2>
          </div>
          <div class="form-item__right" @click="chooseAddress">
            <span v-if="form.address">{{ form.address }}</span>
            <i v-else>点击定位</i>
            <u-icon name="arrow-right" color="#ddd" />
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>上报网格</h2>
          </div>
          <div class="form-item__right" @click="showSelect = true">
            <span v-if="form.girdName">{{ form.girdName }}</span>
            <i v-else>请选择</i>
            <u-icon name="arrow-right" color="#ddd" />
          </div>
        </div>
      </div>
      <div class="form-item form-flow">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>处理流程</h2>
          </div>
        </div>
        <div class="flow-option">
          <div class="byself" :class="!form.opts ? 'current' : ''" @click="form.opts = 0">自己办结</div>
          <div class="report" :class="form.opts ? 'current' : ''" @click="form.opts = 1">上报处理</div>
        </div>
      </div>
    </div>

    <div v-if="this.form.opts == 0">
      <div class="form-item__group">
        <div class="form-item form-item__textarea">
          <div class="form-item__wrapper">
            <div class="form-item__title">
              <i>*</i>
              <h2>办理结果</h2>
            </div>
            <div class="form-item__right">
              <textarea v-model="form.result" :maxlength="500" placeholder="请输入办理结果信息"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item__group">
        <div class="form-item form-item__imgs">
          <div class="form-item__wrapper">
            <div class="form-item__title">
              <i style="opacity: 0">*</i>
              <h2>图片上传</h2>
              <span>(最多9张)</span>
            </div>
            <div class="form-item__right">
              <AiUploader :def.sync="form.resultFiles" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="submit">上报</div>

    <u-select v-model="showSelect" :list="girdList" label-name="girdName" value-name="id" @confirm="confirmSelect" />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  appName: '矛盾调解',
  data() {
    return {
      isShowType: false,
      form: {
        content: '',
        files: [],
        groupId: '',
        address: '',
        girdName: '',
        flow: '',
        girdId: '',
        flag: false,
        result: '',
        resultFiles: [],
        opts: 1,
        name: '',
        lat: '',
        lng: '',
      },
      dictList: [],
      arr: [],
      showSelect: false,
      girdList: [],
    }
  },

  computed: {
    ...mapState(['user']),
  },

  onLoad() {
    this.getDict()
    this.form.phone = this.user.phone
    this.form.name = this.user.name || ''
    this.getGirdList()
  },

  methods: {
    chooseAddress() {
      uni.chooseLocation({
        success: (res) => {
          this.form.address = res.address
          this.form.lat = res.latitude
          this.form.lng = res.longitude
        },
      })
    },

    confirmSelect(e) {
      this.form.girdId = e[0].value
      this.girdList.map((item) => {
        if (item.id == this.form.girdId) {
          this.form.girdName = item.girdName
        }
      })
    },

    getDict() {
      this.$http.post(`/app/appclapeventgroup/list`).then((res) => {
        if (res.code == 0) {
          this.dictList = res.data.records.map((v) => {
            return {
              value: v.id,
              label: v.groupName,
            }
          })
        }
      })
    },

    getGirdData(x) {
      if (x > -1) {
        this.$set(this.gridList, '1', this.arr[0].girdList[x].girdList)
      }
    },

    getGirdList() {
      this.$http.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`).then((res) => {
        if (res.code == 0) {
          this.arr = res.data
          this.girdList = res.data
        }
      })
    },

    onColumnChange(e) {
      const column = e.detail.column
      const value = e.detail.value

      if (column === column) {
        this.getGirdData(value)
      }
    },

    onChange(e) {
      const v = e.detail.value[1]
      if (this.gridList[1][v]) {
        this.form.girdName = this.gridList[1][v].girdName
        this.form.girdId = this.gridList[1][v].id
      } else {
        return this.$u.toast('所属网格必须选第三级网格')
      }
    },

    submit() {
      if (!this.form.content) {
        return this.$u.toast('请输入事件描述')
      }
      if (!this.form.groupId) {
        return this.$u.toast('请选择事件类型')
      }
      if (!this.form.address) {
        return this.$u.toast('请选择发生地点')
      }
      if (!this.form.girdName) {
        return this.$u.toast('请选择上报网格')
      }
      if (this.form.opts == 0) {
        if (!this.form.result) {
          return this.$u.toast('请输入事件办理结果')
        }
      }

      if (this.flag) return
      this.flag = true

      this.$http
        .post(`/app/appclapeventinfo/addOrUpdate?`, {
          ...this.form,
          files: this.form.files,
          groupName: this.dictList.filter((v) => v.value === this.form.groupId)[0].label,
          eventStatus: this.form.opts == 0 ? '2' : '0',
        })
        .then((res) => {
          this.$u.toast('上报成功')
          this.flag = false
          if (res.code == 0) {
            uni.$emit('update')
            this.$forceUpdate()
            setTimeout(() => {
              uni.navigateBack()
            }, 600)
          }
        })
    },
  },
}
</script>

<style lang="scss">
.album {
  padding-bottom: 140px;

  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
  }

  .limit {
    text-align: right;
    font-size: 28px;
    color: #999;
  }

  .form-item {
    padding-left: 32px;

    .form-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 128px;
      padding-right: 28px;
      border-bottom: 1px solid #dddddd;

      input {
        flex: 1;
        height: 100%;
        text-align: right;
        padding-right: 10px;
      }

      .form-item__right {
        display: flex;
        align-items: center;
        font-size: 32px;

        span {
          max-width: 400px;
          margin-right: 8px;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        i {
          font-style: normal;
          margin-right: 8px;
          color: #999999;
          font-size: 30px;
        }
      }
    }

    &:last-child {
      .form-item__wrapper {
        border-bottom: none;
      }
    }

    .form-item__title {
      display: flex;
      align-items: center;

      i {
        font-size: 30px;
        color: #ff4466;
      }

      span {
        font-size: 28px;
        color: #999999;
      }

      h2 {
        padding: 0 4px;
        font-weight: 600;
        font-size: 32px;
        color: #333333;
      }
    }

    &.form-item__imgs,
    &.form-item__textarea {
      .form-item__wrapper {
        display: block;
        height: auto;
        padding-bottom: 32px;
      }

      textarea {
        width: 100%;
        height: 160px;
      }

      .form-item__title {
        padding: 32px 0;
      }

      .form-item__right {
        padding-left: 18px;
      }
    }
  }

  .form-flow {
    height: 280px;
    padding-right: 40px;
  }

  .flow-option {
    display: flex;
    justify-content: space-between;

    .byself,
    .report {
      height: 112px;
      width: 45%;
      background: #f5f5f5;
      line-height: 112px;
      text-align: center;
      font-size: 30px;
      color: #333333;
    }
    .current {
      color: #1174fe;
      background: #e7f1fe !important;
      position: relative;
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: #3975c6;
    line-height: 120px;
    text-align: center;
    color: #ffffff;
  }
  ::v-deep AiUploader {
    width: 80px;
    height: 80px;
  }
}
</style>