saas研发配置及网格调整

project/sass/apps/AppGridBlock/components/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-grid-block">
+  <section class="app-grid-block">
     <ai-list>
       <template slot="title">
         <ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
@@ -100,30 +100,12 @@
             ref="aitableex"
             :current.sync="page.current"
             :size.sync="page.size"
-            @selection-change="(v) => (ids = v.map((e) => e.id))"
+            @selection-change="v=>ids=v.map((e) => e.id)"
             @getList="getList()"
-            :dict="dict"
-        >
-          <el-table-column
-              slot="selectId"
-              type="selection"
-              align="center"
-              width="40"
-          >
-          </el-table-column>
-          <el-table-column
-              label="网格员"
-              slot="user"
-              align="center"
-              fixed="right"
-              width="160">
+            :dict="dict">
+          <el-table-column label="网格成员" slot="user" align="center" width="160">
             <template slot-scope="{ row }">
-              <div class="flex-box">
-                <div v-for="(item, index) in row.girdMemberNames" v-show="index < 3" :key="index">
-                  <AiOpenData type="userName" :openid="item"></AiOpenData>
-                  <span v-if="index < 2 && index < row.girdMemberNames.length - 1">、</span>
-                </div>
-              </div>
+              <el-button type="text" @click="showGridMembers(row)">{{ row.girdMemberNumber || 0 }}</el-button>
             </template>
           </el-table-column>
           <el-table-column
@@ -196,7 +178,21 @@
         >
       </div>
     </ai-dialog>
-  </div>
+    <ai-dialog :title="`${gridInfo.girdName}网格成员`" :visible.sync="dialog" customFooter @closed="gridInfo={}"
+               width="700px">
+      <ai-table :tableData="gridInfo.tableData" :colConfigs="gridMemberColConfigs" :dict="dict"
+                :isShowPagination="false" :show-header="false">
+        <el-table-column slot="tags">
+          <template slot-scope="{row}">
+            <el-tag v-if="row.tags" effect="dark">{{ row.tags || '标签' }}</el-tag>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <template #footer>
+        <el-button @click="dialog=false">关闭</el-button>
+      </template>
+    </ai-dialog>
+  </section>
 </template>
 
 <script>
@@ -245,27 +241,31 @@ export default {
       isEdit: false,
       searchId: "",
       fileList: [],
-      location: {}
+      location: {},
+      dialog: false,
+      gridInfo: {},
+      gridMemberColConfigs: [
+        {prop: "wxUserId", openType: 'userName'},
+        {prop: "girdMemberType", dict: "girdMemberType"},
+        {slot: "tags"}
+      ]
     };
   },
   created() {
     this.getTreeList();
     this.getList();
     this.getCorpLocation()
-    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
+    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus", "girdMemberType");
   },
   computed: {
     colConfigs() {
-      let _ = this;
       return [
         {type: 'selection'},
         {prop: "girdName", align: "left", label: "网格名称",},
-        {prop: "girdCode", align: "center", label: "网格编码",},
-        {prop: "girdType", align: "center", label: "网格类型", dict: "girdType"},
-        {prop: "girdLevel", align: "center", label: "网格层级", dict: "girdLevel"},
+        {slot: 'user'},
         {prop: "plottingStatus", align: "center", label: "标绘状态", dict: "plottingStatus"},
         {prop: "createTime", align: "center", label: "创建时间", dateFormat: "YYYY-MM-DD"},
-        {prop: "girdMemberNames", align: "center", slot: 'user', width: 200, label: "网格员"},
+        {slot: "options"}
       ];
     },
   },
@@ -283,12 +283,9 @@ export default {
       this.getList();
     },
     getTreeList() {
-      this.instance
-      .post("/app/appgirdinfo/listByTop", null, null)
-      .then((res) => {
-        if (res.code == 0) {
-          this.treeObj.treeList = [...res.data];
-
+      this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
+        if (res?.data) {
+          this.treeObj.treeList = [res.data];
           this.$nextTick(() => {
             if (this.treeObj.treeList.length && !this.info.girdLevel) {
               this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
@@ -347,15 +344,13 @@ export default {
       });
     },
     getList() {
-      this.instance
-      .post("/app/appgirdinfo/list", null, {
+      this.instance.post("/app/appgirdinfo/list", null, {
         params: {
           ...this.searchObj,
           ...this.page,
           parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
         },
-      })
-      .then((res) => {
+      }).then((res) => {
         if (res?.data) {
           this.tableData = res.data.records.map(v => {
             return {
@@ -556,6 +551,19 @@ export default {
       });
       this.getList();
     },
+    showGridMembers(row) {
+      if (row.girdMemberNumber > 0) {
+        this.gridInfo = this.$copy(row)
+        this.instance.post("/app/appgirdmemberinfo/listByGirdIdByThree", null, {
+          params: {girdId: row.id}
+        }).then(res => {
+          if (res?.data) {
+            this.gridInfo.tableData = res.data
+            this.dialog = true
+          }
+        })
+      } else this.$message.warning("当前网格无成员")
+    }
   },
 };
 </script>
@@ -660,6 +668,10 @@ export default {
     }
   }
 
+  ::v-deep.ai-list__content--right {
+    overflow: visible !important;
+  }
+
   ::v-deep .treePanel {
     display: flex;
     flex-direction: column;