随手拍调整无级网格

src/components/AiPagePicker/AiPagePicker.vue

@@ -14,20 +14,28 @@ export default {
   name: "AiPagePicker",
   model: {
     prop: "value",
-    event: "change"
+    event: "input"
   },
   props: {
     value: {default: ""},
     type: {default: "resident"},
     nodeKey: {default: "idNumber"},
     selected: {default: () => []},
-    placeholder: {default: "选择人员"}
+    placeholder: {default: "选择人员"},
+    ops: {default: () => ({})},
+    valueObj: Boolean,
+    params: {default: () => ({})},
+    multiple: Boolean
   },
   data() {
     return {
       configList: {
         resident: {url: "/components/pages/selectResident", label: "name"},
-        gird: {url: "/components/pages/selectGird", label: "girdName"}
+        sysUser: {url: "/components/pages/selectSysUser", label: "name"},
+        gird: {url: "/components/pages/selectGird", label: "girdName"},
+        party: {url: "/components/pages/selectParty", label: "name"},
+        dept: {url: "/components/pages/selectDept", label: "name"},
+        custom: {...this.ops}
       },
     }
   },
@@ -42,16 +50,18 @@ export default {
   },
   methods: {
     handleJump() {
-      let {config, nodeKey} = this,
+      let {config, nodeKey, valueObj, multiple} = this,
-          selected = this.value || this.selected?.map(e => e[nodeKey])
+          selected = (valueObj ? this.value[nodeKey] : this.value) || this.selected?.map(e => e[nodeKey])
-      uni.$once('pagePicker', data => {
+      uni.$once('pagePicker:' + this.type, data => {
+        console.log('发送', data)
         this.$emit("update:selected", data)
         this.$emit("select", data)
-        this.$emit("change", data.map(e => e[nodeKey]))
+        this.$emit("input", valueObj ? data :
+            data ? (multiple ? [data].flat()?.map(e => e[nodeKey]) : data[nodeKey]) : "")
       })
       let url = `${config.url}`,
           qsstr = qs.stringify({
-            selected, ...this.$attrs
+            selected, nodeKey, multiple, ...this.params
           })
       if (!!qsstr) {
         url += `?${qsstr}`

src/components/pages/selectGird.vue

@@ -1,213 +1,188 @@
 <template>
-  <div class="selectGird">
+  <div class="SelectGird">
-    <AiTopFixed>
-      <u-search placeholder="搜索" v-model="name" :show-action="false"/>
-      <div class="hint">
-        <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
-            style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
-      </div>
-    </AiTopFixed>
     <div class="header-middle">
+      <div class="hint">
+        <span v-for="(item, index) in selectList" :key="index">
+          <span v-if="index" style="margin:0 4px;" v-text="`/`"/>
+          <span style="color:#3F8DF5" @click="girdNameClick(item, index)" v-text="item.girdName"/>
+        </span>
+      </div>
       <div class="showTypes">
         <div v-if="options.length > 0">
           <div class="cards" v-for="(item, index) in options" :key="index" @click="itemClick(item)">
             <div class="imges">
               <img src="./img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
                    @click.stop="girdClick(item, index)"/>
-              <img src="./img/xz.png" alt="" class="imgselect" v-else
+              <img src="./img/xz.png" alt="" class="imgselect" v-else @click.stop="girdClick(item, index)"/>
-                   @click.stop="girdClick(item, index)"/>
               <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
             </div>
-            <div class="rightes">
+            <div class="rightes fill">
               <div class="applicationNames fill">{{ item.girdName }}</div>
-              <u-icon v-if="item.girdLevel != 2" name="arrow-right" color="#ddd"/>
             </div>
           </div>
         </div>
-        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+        <AiEmpty :description="isGridMember?`暂无数据`:`当前人员不是网格员或网格长`" class="emptyWrap" v-else/>
       </div>
     </div>
-    <div class="pad-b118"/>
+    <div class="subBtn flex">
-    <div class="footer">
+      <div v-if="clearable" class="cancel" @click="cancel">清空</div>
-      <div class="btn" @click="confirm">确定选择</div>
+      <div @click="submit">确定选择</div>
     </div>
   </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'selectGird',
   appName: "网格选择",
   data() {
     return {
-      current: 1,
-      name: '',
-      list: [],
-      selected: [],
       SelectGird: {},
       allData: null,
-      treeList: [],
+      options: [],
       selectList: [],
-      userGird: {},
-      userList: [],
-      girdLevel: 0,
       parentGirdId: '',
-      isMyGird: false, //是否只查询当前户对应的网格员管理的三级网格
+      query: {}
     }
   },
   computed: {
-    options() {
+    ...mapState(['user']),
-      return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
+    isGridMember() {
-    }
+      return this.user.girdCheckType > 0
     },
-  onLoad(params) {
+    //是否展示所有网格(随手拍)
-    console.log(params)
+    isApply: v => v.query?.formType == 2,
-    if (params.girdLevel) {
+    clearable: v => v.query?.clearable,
-      this.girdLevel = params.girdLevel
+    isMyGirds: v => v.query?.self == true,
-    }
+    selected: v => [v.query?.selected].flat(),
-    if (params.isMyGird) {
+    isFormMap: v => v.query?.isFormMap || 0
-      this.isMyGird = params.isMyGird
+  },
-    }
+  onLoad(query) {
-    this.isGirdUser()
+    this.query = query
+    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
   },
   methods: {
-    isGirdUser() {
+    getAllGrids() {
-      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
-        if (res?.data) {
-          if (res.data.checkType) {
-            this.userGird = res.data
-            if (this.isMyGird) {
-              this.getMyGird()
-            } else {
-              this.getTree()
-            }
-
-          } else {
-            this.$u.toast('当前人员不是网格员或网格管理员')
-          }
-        }
-      })
-    },
-    getMyGird() {
       this.selectList = []
-      this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
+      let {girdMemberId} = this.user,
-        if (res.code == 0) {
+          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
-          this.allData = res.data
+          params = {girdMemberId}
+      if (this.isApply) {
+        url = `/app/appgirdinfo/listByInfo`
+        params = {}
+      }
+      if (this.isMyGirds) {
+        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
+      }
+      this.$instance.post(url, null, {params}).then((res) => {
+        if (res?.data) {
+          let parents = res.data?.map(e => e.parentGirdId)
+          this.allData = res.data?.map(e => ({...e, hasChildren: parents.includes(e.id)}))
           this.treeInit()
         }
       })
     },
-    getTree() {
+    treeInit(isClick) {
-      this.selectList = []
+      let last = uni.getStorageSync("lastSelectedGrid")
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
+      if (!isClick && last && !this.isApply) {
+        this.$instance.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+          params: {girdId: last}
+        }).then(res => {
           if (res?.data) {
-          this.allData = res.data
+            this.selectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
-          this.treeInit()
+            this.getGridsByGridMemberAndParent({id: last})
           }
         })
-    },
+      } else {
-
+        this.options = this.allData.filter((e, i, arr) => !arr?.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
-    treeInit() {
+        this.options?.map((item) => item.isChecked = this.selected.includes(item.id))
-      this.treeList = this.allData
+        let obj = {girdName: '可选范围', id: ''}
-      this.treeList.map((item) => {
-        item.isChecked = false
-      })
-      let obj = {
-        girdName: '可选范围',
-        id: '',
-        girdLevel: ''
-      }
         this.selectList.push(obj)
+      }
     },
-
     itemClick(row) {
-      if (row.girdLevel == 2) return
+      if (row.hasChildren) {
-      const obj = {
+        let obj = {
           girdName: row.girdName,
           id: row.id,
-        girdLevel: row.girdLevel
-      };
-      this.selectList.push(obj)
-      this.searckGird(row)
-    },
-
-    searckGird(row) {
-      if (row.girdLevel == 2) return
-      const girdLevel = Number(row.girdLevel) + 1;
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
-        if (res?.data) {
-          this.treeList = res.data
         }
-      })
+        this.selectList.push(obj)
+        this.getGridsByGridMemberAndParent(row)
+      }
+    },
+    getGridsByGridMemberAndParent(row) {
+      let {id: parentGirdId} = row
+      this.options = this.allData.filter(e => e.parentGirdId == parentGirdId)
+      this.options?.map((item) => item.isChecked = this.selected.includes(item.id))
     },
-
     girdNameClick(row, index) {
-      this.userList = []
       if (!index) { //第一级别
         this.selectList = []
-        this.treeInit()
+        this.treeInit(true)
       } else {
-        const list = [];
+        this.selectList.splice(index, 8)
-        this.selectList.map((item, i) => {
+        this.getGridsByGridMemberAndParent(row)
-          if (i <= index) {
-            list.push(item)
-          }
-        })
-        this.selectList = list
-        this.searckGird(row)
       }
     },
-
-
     girdClick(row, index) {
-      if (this.treeList[index].isChecked) {//取消
+      if (this.options[index].isChecked) {//取消
-        this.treeList[index].isChecked = false
+        this.options[index].isChecked = false
         this.SelectGird = {}
       } else {
-        this.treeList.map((item) => {
+        this.options?.map((item) => {
           item.isChecked = false
         })
-        this.treeList[index].isChecked = true
+        this.options[index].isChecked = true
         this.SelectGird = row
       }
       this.$forceUpdate()
     },
-    confirm() {
+    submit() {
       if (this.SelectGird.id != null) {
+        if (!this.isApply && !this.isMyGirds) {
+          uni.setStorageSync("lastSelectedGrid", this.SelectGird.parentGirdId)
+        }
         uni.navigateBack({
           success: () => {
-            uni.$emit("pagePicker", [this.SelectGird])
+            uni.$emit("pagePicker:gird", this.SelectGird)
           }
         })
       } else {
         return this.$u.toast('请选择网格')
       }
     },
+    cancel() {
+      this.SelectGird = {}
+      uni.navigateBack({
+        success: () => {
+          uni.$emit("pagePicker:gird", this.SelectGird)
+        }
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.selectGird {
+.SelectGird {
-  height: 100%;
+  min-height: 100vh;
   background: #fff;
   padding-bottom: 140px;
+  box-sizing: border-box;
 
+  .header-middle {
     .hint {
-    padding-bottom: 28px;
+      padding: 28px 20px 28px 32px;
       line-height: 56px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
       font-size: 30px;
       font-weight: 500;
       word-break: break-all;
     }
 
-  .header-middle {
     .showTypes {
-      .empty-div {
-        height: 16px;
-        background: #f5f5f5;
-      }
-
       .cards {
         display: flex;
         align-items: center;
@@ -241,22 +216,19 @@ export default {
         }
 
         .rightes {
-          width: calc(100% - 188px);
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-left: 32px;
           border-bottom: 1px solid #e4e5e6;
-          padding-right: 16px;
+          padding: 0 16px;
-          box-sizing: border-box;
 
           .applicationNames {
+            display: inline-block;
             font-size: 36px;
             font-weight: 500;
             color: #333333;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            vertical-align: bottom;
           }
         }
       }
@@ -270,42 +242,25 @@ export default {
     width: 100%;
     height: 118px;
     background: #f4f8fb;
+    justify-content: flex-end;
 
     div {
       width: 192px;
       height: 80px;
       line-height: 80px;
       text-align: center;
+      border: 2px solid #1365dd;
       background: #1365dd;
       border-radius: 4px;
       font-size: 32px;
       color: #fff;
-      margin: 20px 34px 0 0;
+      margin-right: 32px;
-      float: right;
-    }
-  }
 
-  .footer {
+      &.cancel {
-    width: 100%;
+        color: #333;
-    height: 118px;
+        background: #fff;
-    background: #F4F8FB;
+        border-color: #ddd;
-    position: fixed;
+      }
-    left: 0;
-    bottom: 0;
-    text-align: right;
-
-    .btn {
-      display: inline-block;
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      background: #1365DD;
-      border-radius: 4px;
-      text-align: center;
-      font-size: 32px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #FFF;
-      margin: 20px 34px 0 0;
     }
   }
 }

src/mods/conv/AppPhotoReport/PhotoForm.vue

@@ -45,14 +45,11 @@
             <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>
+            <AiPagePicker type="gird" v-model="form.girdId" :params="{formType:2}" @select="handleSelectGrid" nodeKey="id">
-              <i v-else>请选择</i>
+              <AiMore v-model="form.girdName"/>
-              <u-icon name="arrow-right" color="#ddd"/>
+            </AiPagePicker>
           </div>
-          </picker>
         </div>
       </div>
     </div>
@@ -105,7 +102,6 @@ export default {
   appName: "上报随手拍",
   data() {
     return {
-      isShowType: false,
       form: {
         content: '',
         lat: '',
@@ -120,8 +116,6 @@ export default {
         files: []
       },
       dictList: [],
-      arr: [],
-      gridList: [[], []],
       flag: false
     }
   },
@@ -134,7 +128,6 @@ export default {
     this.getDict()
     this.form.phone = this.user.phone
     this.form.name = this.user.realName || ''
-    this.getGirdList()
   },
 
   methods: {
@@ -170,7 +163,6 @@ export default {
         }
       })
     },
-
     getDict() {
       this.$instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
         if (res.code == 0) {
@@ -183,45 +175,6 @@ export default {
         }
       })
     },
-
-    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 === 0) {
-        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.$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.groupId) {
         return this.$toast('请选择事件类型')
@@ -267,6 +220,9 @@ export default {
         }
         this.$hideLoading()
       })
+    },
+    handleSelectGrid(v) {
+      this.form.girdName = v.girdName
     }
   }
 }

src/pages/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="home">
     <div class="header-bg">
       <div class="header-info">
         <div class="wrap" @click="handleLogin()">
@@ -21,14 +21,13 @@
           </div>
         </div>
         <input class="codeText" v-model="search" placeholder="搜索要查找的应用"/>
-        <div class="appsPane flex">
+      </div>
+    </div>
+    <div class="appsPane">
       <div v-for="app in appsList" :key="app.id" @tap="handleGotoApp(app)" class="appItem flex">
         <b v-text="app.label"/>
-            (
+        <u-tag v-if="app.project" :text="app.project" mode="dark" shape="circle" size="mini"/>
-            <div v-text="app.name"/>
+        <div class="appName fill" v-text="app.name"/>
-            )
-          </div>
-        </div>
       </div>
     </div>
     <AiLogin ref="login" @success="getAuth()"/>
@@ -69,10 +68,15 @@ export default {
     },
     getApps() {
       this.$instance.post("/node/wechatapps/list", null, {
-        baseURL: "http://192.168.1.87:12525", params: {size: 999,type:'mp'}
+        baseURL: "http://192.168.1.87:12525", params: {size: 999, type: 'mp'}
       }).then(res => {
         if (res?.data) {
-          this.apps = res.data.records.map(e => ({...e, path: e.libPath}))
+          this.apps = res.data.records.map(e => {
+            if (/\/project\//.test(e.libPath)) {
+              e.project = e.libPath.replace(/.*project\/([^\/]+)\/.+/, '$1')
+            }
+            return {...e, path: e.libPath}
+          })
         }
       })
     },
@@ -89,8 +93,8 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.page {
+.home {
-  width: 100%;
+  width: 100vw;
   min-height: 100vh;
   background-color: #F3F6F9;
   position: relative;
@@ -101,7 +105,6 @@ export default {
 
     .header-info {
       width: 100vw;
-      height: 100vh;
       box-sizing: border-box;
       padding: 36px;
       display: flex;
@@ -184,20 +187,29 @@ export default {
   }
 
   .appsPane {
-    flex-wrap: wrap;
+    padding: 0 36px;
-    justify-content: center;
+    width: 100%;
-    margin-top: 16px;
+    box-sizing: border-box;
-    padding: 0 16px;
 
     .appItem {
+      width: 100%;
+      font-size: 28px;
+      padding: 0 16px;
+      height: 64px;
+
+      &:nth-of-type(2n) {
+        background: rgba(#26f, .05);
+      }
+
+      .appName {
+        text-align: right;
+      }
+
+      b {
         cursor: pointer;
-      font-size: 24px;
+        margin-right: 16px;
-      background: $uni-color-primary;
+        display: block;
-      color: #fff;
+      }
-      padding: 8px;
-      margin: 4px;
-      border-radius: 8px;
-      font-weight: normal;
     }
   }
 }