新网格版本提测

src/project/beta/AppGridManagement/SetGird.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="setGird">
+    <AiGroup>
+      <AiItem :label="detail.girdName" :border="false" labelBold>
+        <u-icon name="arrow-right" label="查看网格成员" label-pos="left" label-color="#3F8DF5" @click="showGirdInfo()"/>
+      </AiItem>
+    </AiGroup>
+    <AiGroup>
+      <AiItem label="下级网格" top-label :border="false" labelBold>
+        <div v-if="treeList.length > 0">
+          <div class="cards" v-for="(item, index) in treeList" :key="index">
+            <div class="rightes fill" flex>
+              <img src="./components/img/gird--select-icon.png" alt="" class="avatras"/>
+              <div class="applicationNames fill" @click="showGirdInfo(item)">{{ item.girdName }}</div>
+              <u-icon v-if="item.hasChildren" @click="itemClick(item)" name="arrow-right" color="#ddd"/>
+            </div>
+          </div>
+        </div>
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+      </AiItem>
+    </AiGroup>
+    <div class="subBtn" v-if="detail.girdRight==1">
+      <div @click="toAddGird">添加下级网格</div>
+      <div @click="handleDelete">编辑网格</div>
+      <div class="delete" @click="toAddGird">删除网格</div>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex"
+
+export default {
+  name: 'setGird',
+  data() {
+    return {
+      detail: {},
+      treeList: [],
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  onShow() {
+    this.getAllGrids()
+    document.title = '网格配置'
+  },
+  methods: {
+    getAllGrids() {
+      let {id: parentGirdId} = this.$route.query
+      this.$http.post(`/app/appgirdinfo/listByInfo`, null, {
+        params: {parentGirdId}
+      }).then(res => {
+        if (res?.data) {
+          let parents = [...new Set(res.data.map(e => e.parentGirdId))]
+          this.detail = res.data.find(e => e.id == parentGirdId) || {}
+          this.treeList = res.data.filter(e => e.parentGirdId == parentGirdId).map(e => ({...e, hasChildren: parents.includes(e.id)}))
+        }
+      })
+    },
+
+    itemClick(row) {
+      uni.navigateTo({url: `./SetGird?id=${row.id}`})
+    },
+    showGirdInfo(row = {id: this.$route.query.id}) {
+      uni.navigateTo({url: `./gridMembers?id=${row.id}`})
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
+    toAddGird() {
+      uni.navigateTo({url: `./AddGird?id=${this.detail.id}&fromType=add`})
+    },
+    edit() {
+      uni.navigateTo({url: `./AddGird?id=${this.detail.id}&fromType=edit`})
+    },
+    handleDelete() {
+      this.$confirm('删除网格后，会清除网格内网格员和责任家庭信息，如有下级网格，会同步删除下级网格所有数据', `您确认要删除该网格？`).then(() => {
+        this.$http.post(`/app/appgirdinfo/delete?ids=${this.detail.id}`).then((res) => {
+          if (res?.code == 0) {
+            this.$u.toast('删除成功!')
+            this.getDetail()
+          }
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.setGird {
+  min-height: 100vh;
+  background: #F5F6F7;
+  padding-bottom: 140px;
+  box-sizing: border-box;
+
+  .empty-div {
+    height: 16px;
+    background: #f5f5f5;
+  }
+
+  .cards {
+    display: flex;
+    align-items: center;
+    height: 120px;
+    line-height: 120px;
+    // background: pink;
+
+    .avatras {
+      width: 74px;
+      height: 74px;
+      border-radius: 8px;
+      margin-right: 20px;
+    }
+
+    img {
+      width: 74px;
+      height: 74px;
+      border-radius: 8px;
+    }
+
+    .rightes {
+      display: flex;
+      border-bottom: 1px solid #e4e5e6;
+      padding-right: 16px;
+
+      .applicationNames {
+        display: inline-block;
+        font-size: 36px;
+        font-weight: 500;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: bottom;
+      }
+
+      .imgs {
+        width: 40px;
+        height: 40px;
+        margin-right: 0;
+        vertical-align: middle;
+      }
+
+      .u-icon {
+        padding: 0 16px;
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+    font-family: PingFangSC-Medium, PingFang SC;
+
+    div {
+      padding: 0 32px;
+      height: 88px;
+      line-height: 88px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 8px;
+      font-size: 32px;
+      color: #fff;
+      margin-left: 22px;
+      float: right;
+      border: 2px #1365dd solid;
+
+      &.delete {
+        background: #fff;
+        color: #f46;
+        border-color: #f46;
+      }
+
+      &:first-of-type {
+        margin-right: 32px;
+      }
+    }
+  }
+}
+</style>