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="500" 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: ''
        },
        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
          }
        });
      },

      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.$loading()
        this.$http.post(`/app/appclapeventinfo/addOrUpdate`, {
          ...this.form,
          files: this.form.files,
          groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
        }).then(res => {
          this.$hideLoading()
          this.$u.toast('上报成功')
          this.flag = false
          if (res.code == 0) {
            uni.$emit('update')
            setTimeout(() => {
              uni.navigateTo({
                url: './List'
              })
            }, 600)
          }
          this.$hideLoading()
        })
      }
    }
  }
</script>

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

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

    .limit {
      text-align: right;
      font-size: 16px;
    }

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