随手拍调整无级网格

2022-06-14 18:23:20 +08:00
parent 9c90e17192
commit 56c425d1b3
4 changed files with 184 additions and 251 deletions
--- a/src/components/AiPagePicker/AiPagePicker.vue
+++ b/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,
-          selected = this.value || this.selected?.map(e => e[nodeKey])
-      uni.$once('pagePicker', data => {
+      let {config, nodeKey, valueObj, multiple} = this,
+          selected = (valueObj ? this.value[nodeKey] : this.value) || this.selected?.map(e => e[nodeKey])
+      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}`
--- a/src/components/pages/selectGird.vue
+++ b/src/components/pages/selectGird.vue
@@ -1,213 +1,188 @@
 <template>
-  <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="SelectGird">
    <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
-                   @click.stop="girdClick(item, index)"/>
+              <img src="./img/xz.png" alt="" class="imgselect" v-else @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="footer">
-      <div class="btn" @click="confirm">确定选择</div>
+    <div class="subBtn flex">
+      <div v-if="clearable" class="cancel" @click="cancel">清空</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() {
-      return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
-    }
+    ...mapState(['user']),
+    isGridMember() {
+      return this.user.girdCheckType > 0
+    },
+    //是否展示所有网格(随手拍)
+    isApply: v => v.query?.formType == 2,
+    clearable: v => v.query?.clearable,
+    isMyGirds: v => v.query?.self == true,
+    selected: v => [v.query?.selected].flat(),
+    isFormMap: v => v.query?.isFormMap || 0
  },
-  onLoad(params) {
-    console.log(params)
-    if (params.girdLevel) {
-      this.girdLevel = params.girdLevel
-    }
-    if (params.isMyGird) {
-      this.isMyGird = params.isMyGird
-    }
-    this.isGirdUser()
+  onLoad(query) {
+    this.query = query
+    this.isGridMember || this.isApply ? this.getAllGrids() : this.$u.toast('当前人员不是网格员或网格长')
  },
  methods: {
-    isGirdUser() {
-      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() {
+    getAllGrids() {
      this.selectList = []
-      this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
-        if (res.code == 0) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-    getTree() {
-      this.selectList = []
-      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
-        if (res?.data) {
-          this.allData = res.data
-          this.treeInit()
-        }
-      })
-    },
-
-    treeInit() {
-      this.treeList = this.allData
-      this.treeList.map((item) => {
-        item.isChecked = false
-      })
-      let obj = {
-        girdName: '可选范围',
-        id: '',
-        girdLevel: ''
+      let {girdMemberId} = this.user,
+          url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser`,
+          params = {girdMemberId}
+      if (this.isApply) {
+        url = `/app/appgirdinfo/listByInfo`
+        params = {}
      }
-      this.selectList.push(obj)
-    },
-
-    itemClick(row) {
-      if (row.girdLevel == 2) return
-      const 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 (this.isMyGirds) {
+        url = `/app/appgirdmemberinfo/queryMyGirdListByLevel2`
+      }
+      this.$instance.post(url, null, {params}).then((res) => {
        if (res?.data) {
-          this.treeList = res.data
+          let parents = res.data?.map(e => e.parentGirdId)
+          this.allData = res.data?.map(e => ({...e, hasChildren: parents.includes(e.id)}))
+          this.treeInit()
        }
      })
    },
-
+    treeInit(isClick) {
+      let last = uni.getStorageSync("lastSelectedGrid")
+      if (!isClick && last && !this.isApply) {
+        this.$instance.post("/app/appgirdinfo/listFatherGirdInfo", null, {
+          params: {girdId: last}
+        }).then(res => {
+          if (res?.data) {
+            this.selectList = [{girdName: '可选范围', id: ''}, res.data.filter(e => !!this.allData.find(a => a.id == e.id))].flat()
+            this.getGridsByGridMemberAndParent({id: last})
+          }
+        })
+      } else {
+        this.options = this.allData.filter((e, i, arr) => !arr?.map(e => e.id).includes(e.parentGirdId) || this.isMyGirds)
+        this.options?.map((item) => item.isChecked = this.selected.includes(item.id))
+        let obj = {girdName: '可选范围', id: ''}
+        this.selectList.push(obj)
+      }
+    },
+    itemClick(row) {
+      if (row.hasChildren) {
+        let obj = {
+          girdName: row.girdName,
+          id: row.id,
+        }
+        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.map((item, i) => {
-          if (i <= index) {
-            list.push(item)
-          }
-        })
-        this.selectList = list
-        this.searckGird(row)
+        this.selectList.splice(index, 8)
+        this.getGridsByGridMemberAndParent(row)
      }
    },
-
-
    girdClick(row, index) {
-      if (this.treeList[index].isChecked) {//取消
-        this.treeList[index].isChecked = false
+      if (this.options[index].isChecked) {//取消
+        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 {
-  height: 100%;
+.SelectGird {
+  min-height: 100vh;
  background: #fff;
  padding-bottom: 140px;
-
-  .hint {
-    padding-bottom: 28px;
-    line-height: 56px;
-    font-size: 30px;
-    font-weight: 500;
-    word-break: break-all;
-  }
+  box-sizing: border-box;

  .header-middle {
-    .showTypes {
-      .empty-div {
-        height: 16px;
-        background: #f5f5f5;
-      }
+    .hint {
+      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;
+    }

+    .showTypes {
      .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;
-          box-sizing: border-box;
+          padding: 0 16px;

          .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;
-      float: right;
-    }
-  }
+      margin-right: 32px;

-  .footer {
-    width: 100%;
-    height: 118px;
-    background: #F4F8FB;
-    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;
+      &.cancel {
+        color: #333;
+        background: #fff;
+        border-color: #ddd;
+      }
    }
  }
 }
--- a/src/mods/conv/AppPhotoReport/PhotoForm.vue
+++ b/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>
-              <i v-else>请选择</i>
-              <u-icon name="arrow-right" color="#ddd"/>
-            </div>
-          </picker>
+          <div class="form-item__right">
+            <AiPagePicker type="gird" v-model="form.girdId" :params="{formType:2}" @select="handleSelectGrid" nodeKey="id">
+              <AiMore v-model="form.girdName"/>
+            </AiPagePicker>
+          </div>
        </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
    }
  }
 }
--- a/src/pages/home.vue
+++ b/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 v-for="app in appsList" :key="app.id" @tap="handleGotoApp(app)" class="appItem flex">
-            <b v-text="app.label"/>
-            (
-            <div v-text="app.name"/>
-            )
-          </div>
-        </div>
+      </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 class="appName fill" v-text="app.name"/>
      </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 {
-  width: 100%;
+.home {
+  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;
-    justify-content: center;
-    margin-top: 16px;
-    padding: 0 16px;
+    padding: 0 36px;
+    width: 100%;
+    box-sizing: border-box;

    .appItem {
-      cursor: pointer;
-      font-size: 24px;
-      background: $uni-color-primary;
-      color: #fff;
-      padding: 8px;
-      margin: 4px;
-      border-radius: 8px;
-      font-weight: normal;
+      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;
+        margin-right: 16px;
+        display: block;
+      }
    }
  }
 }