dvcp_v2_wxcp_app/library/project/qujing/AppConflictMediation/add.vue

<template>
  <div class="album">
    <AiGroup>
      <AiItem required label="事件描述" top-label labelBold :border="false">
        <textarea v-model="form.content" :maxlength="200" placeholder="请简要描述事件…"></textarea>
      </AiItem>
    </AiGroup>
    <AiGroup>
      <AiItem label="图片上传" top-label labelBold :border="false">
        <span class="color-999" slot="sub">(最多9张)</span>
        <AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"/>
      </AiItem>
    </AiGroup>
    <AiGroup>
      <AiItem label="事件类型" required labelBold>
        <AiSelect :list="dictList" v-model="form.groupId"/>
      </AiItem>
      <AiItem label="发生地点" required labelBold>
        <AiMore placeholder="点击定位" v-model="form.address" @click="chooseAddress"/>
      </AiItem>
      <AiItem label="上报网格" required labelBold>
        <AiPagePicker type="gird" @select="handleSelectGrid" self>
          <AiMore v-model="form.girdName"/>
        </AiPagePicker>
      </AiItem>
      <AiItem label="处理流程" required labelBold top-label>
        <div class="flow-option">
          <div class="fill" :class="{current:form.opts=='0'}" @click="form.opts=0">自己办结</div>
          <div class="fill mar-l16" :class="{current:form.opts==1}" @click="form.opts=1">上报处理</div>
        </div>
      </AiItem>
    </AiGroup>
    <AiGroup v-if="form.opts==0">
      <AiItem label="办理结果" required top-label labelBold>
        <textarea v-model="form.finishContent" :maxlength="200" placeholder="请输入办理结果信息"/>
      </AiItem>
      <AiItem label="图片上传" top-label labelBold :border="false">
        <span class="color-999" slot="sub">(最多9张)</span>
        <AiUploader :def.sync="form.finishFiles" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"/>
      </AiItem>
    </AiGroup>
    <AiBottomBtn text="上报" @click="submit"/>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  appName: '新增事件',
  data() {
    return {
      isShowType: false,
      form: {
        content: '',
        files: [],
        groupId: '',
        address: '',
        girdName: '',
        flow: '',
        girdId: '',
        flag: false,
        finishContent: '',
        finishFiles: [],
        opts: 1,
        name: '',
        lat: '',
        lng: '',
      },
      dictList: [],
      arr: [],
      girdList: [],
    }
  },

  computed: {
    ...mapState(['user']),
  },
  onShow() {
    document.title = '新增事件'
  },
  onLoad() {
    this.getDict()
    this.form.phone = this.user.phone
    this.form.name = this.user.name || ''
    this.getGirdList()
  },
  methods: {
    handleSelectGrid(v) {
      this.form.girdId = v?.id
      this.form.girdName = v?.girdName || ""
    },
    chooseAddress() {
      uni.chooseLocation({
        success: (res) => {
          this.form.address = res.address
          this.form.lat = res.latitude
          this.form.lng = res.longitude
        },
      })
    },

    getDict() {
      this.$http.post(`/app/appconflicteventgroup/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.finishContent) {
          return this.$u.toast('请输入事件办理结果')
        }
      }

      if (this.flag) return
      this.flag = true
      this.$http.post(`/app/appconflicteventinfo/addOrUpdate`, {
        ...this.form,
        files: this.form.files,
        finishFiles: this.form.finishFiles,
        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;

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

    & > * {
      height: 112px;
      background: #f5f5f5;
      line-height: 112px;
      text-align: center;
      font-size: 30px;
      color: #333333;

      &.current {
        color: #1174fe;
        background: #e7f1fe !important;
      }
    }
  }

  ::v-deep .ai-uploader .fileList .default {
    width: 160px;
    height: 160px;
  }
}
</style>