dvcp_v2_wxcp_app/src/sass/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="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 v-model="form.files" :limit="9"></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>
            <picker :range="gridList" mode="multiSelector" range-key="girdName" @columnchange="onColumnChange" @change="onChange">
              <div class="form-item__right">
                <span v-if="form.girdName">{{ form.girdName }}</span>
                <i v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd" />
              </div>
            </picker>
        </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">自己结办</div>
          <div class="report">上报处理</div>
        </div>
      </div>
    </div>
    
    <div class="btn" @click="submit">上报</div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        isShowType: false,
        form: {
          content: '',
          files: [],
          groupId: '',
          address: '',
          girdName: '',
          flow: '',
          girdId: '',
        },
        dictList: [],
        arr: [],
        gridList: [[], []],
        flag: false
      }
    },

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

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

    methods: {
      chooseAddress () {
        uni.authorize({
          scope: 'scope.userLocation',
          success: () => {
            uni.chooseLocation({
              success: res => {
                this.form.address = res.address
                this.form.lat = res.latitude
                this.form.lng = res.longitude
              }
            })
          },
          fail: () => {
            this.$dialog.confirm({
              content: '您未授权定位权限，无法选择位置'
            }).then(() => {
              wx.openSetting({
                success: res => {
                  if (!res.authSetting['scope.userLocation']) {
                    this.$dialog.alert({
                      content: '您未授权定位权限，无法选择位置'
                    }).then(() => {
                    })
                  } else {
                    console.log('设置定位权限')
                  }
                }
              })
            })
          }
        })
      },

      getDict () {
        this.$instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).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.$instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
          if (res.code == 0) {
            this.arr = res.data
            this.gridList[0] = res.data[0].girdList
            this.gridList[1] = res.data[0].girdList[0].girdList
          }
        })
      },

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

        

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

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

      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.flow) {
          return this.$u.toast('请选择处理流程')
        }

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

        this.$loading()
        this.$instance.post(`/app/appclapeventinfo/addOrUpdate`, {
          ...this.form,
          openid: this.user.openid,
          portrait: this.user.avatarUrl,
          files: this.form.files,
          groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
        }).then(res => {
          this.$hideLoading()
          this.flag = false
          if (res.code == 0) {
            uni.$emit('update')
            setTimeout(() => {
              uni.redirectTo({
                url: '/service/photoReport/PhotoResult?id=' + res.data.id
              })
            }, 400)
          }
          this.$hideLoading()
        })
      }
    }
  }
</script>

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

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

    .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;
      }
    }

    .btn {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 120px;
      background: #3975C6;
      line-height: 120px;
      text-align: center;
      color: #FFFFFF;
    }
  }
</style>