From 7fb5329777698f7cddd06cfc9d9afcb7e6ed4333 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 8 Feb 2022 15:02:36 +0800
Subject: [PATCH] add

---
 src/sass/AppConflictMediation/add.vue | 452 ++++++++++++++++++++------
 1 file changed, 355 insertions(+), 97 deletions(-)

diff --git a/src/sass/AppConflictMediation/add.vue b/src/sass/AppConflictMediation/add.vue
index 0916a90b..bf3f45a2 100644
--- a/src/sass/AppConflictMediation/add.vue
+++ b/src/sass/AppConflictMediation/add.vue
@@ -1,131 +1,389 @@
 <template>
-  <div class="AddSet">
-    <div class="contents">
-      <div class="event">
-        <div class="event-info">
-          <span style="color: red;">*</span>
-          <span>事件描述</span>
+  <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>
-        <textarea placeholder="请输入事件描述,最多200个字" :maxlength="200" v-model="form.content" style="width: 100%;"/>
-      </div>
-      <div class="upload">
-        <div class="upload-title">图片上传<span>（最多9张）</span></div>
-        <AiUploader :def.sync="form.files" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
       </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 class="footer">上报</div>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'AddSet',
-  components: {},
-  props: {},
-  data() {
-    return {
-      form: {
-        content: '',
-        files: [],
-      },
-      flag: false,
-      show: false,
-    }
-  },
-  methods: {
-    submit() {
-      if (this.flag) return
+  import { mapState } from 'vuex'
 
-      this.$refs.uForm.validate((valid) => {
-        if (valid) {
-          if (!this.forms.title) {
-            return this.$u.toast('请输入事项分组')
-          }
+  export default {
+    data () {
+      return {
+        isShowType: false,
+        form: {
+          content: '',
+          files: [],
+          groupId: '',
+          address: '',
+          girdName: '',
+          flow: '',
+          girdId: '',
+        },
+        dictList: [],
+        arr: [],
+        gridList: [[], []],
+        flag: false
+      }
+    },
 
-          const imgs = []
-          if (this.forms.fileIds) {
-            this.forms.fileIds.map((e) => {
-              imgs.push({ url: e.url, id: e.id })
-            })
-          }
+    computed: {
+      ...mapState(['user'])
+    },
 
-          this.flag = true
-          this.$http
-            .post(`/app/appclapeventgroup/addOrUpdate`, {
-              title: this.forms.title,
-              content: this.forms.content,
-              // images: JSON.stringify(imgs) || [],
-              images: imgs || [],
+    onLoad () {
+      this.getDict()
+      this.form.phone = this.user.phone
+      this.form.name = this.user.realName || ''
+      this.getGirdList()
+    },
 
-              people: this.forms.people,
-              phone: this.forms.phone,
-              id: this.id,
-            })
-            .then((res) => {
-              if (res.code == 0) {
-                this.$u.toast('发布成功')
-                this.flag = false
-                uni.navigateTo({ url: `./AppHandSnapshot` })
+    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
               }
             })
-        } else {
-          this.$u.toast('失败')
+          },
+          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)
         }
-      })
-    },
+      },
 
-    toSelectUser() {
-      console.log(123)
-      uni.navigateTo({ url: './SelectUser' })
-    },
-  },
-}
-</script>
+      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
+          }
+        })
+      },
 
-<style scoped lang="scss">
-.AddSet {
-  height: 100%;
-  .contents {
+      onColumnChange (e) {
+        const column = e.detail.column
+        const value = e.detail.value
 
-    .event {
-      background: #FFFFFF;
-      padding: 32px;
-      margin-bottom: 16px;
+        
 
-      .event-info {
-        font-size: 32px;
-        color: #333333;
+        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.$toast('请输入事件描述')
+        }
+        if (!this.form.groupId) {
+          return this.$toast('请选择事件类型')
+        }
+        if (!this.form.address) {
+          return this.$toast('请选择发生地点')
+        }
+        if (!this.form.girdName) {
+          return this.$toast('请选择上报网格')
+        }
+        if (!this.form.flow) {
+          return this.$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>
 
-    .upload {
-      padding: 30px 32px;
-      background: #FFFFFF;
+<style lang="scss">
+  .album {
+    padding-bottom: 140px;
 
-      .upload-title {
-        font-size: 34px;
-        color: #666666;
-        margin-bottom: 30px;
+    .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;
+        }
       }
     }
-  }
 
-  .footer {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 120px;
-    line-height: 120px;
-    text-align: center;
-    font-size: 32px;
-    color: #FFFFFF;
-    background: #3975C6;
+    .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>