feat(mesh): department filter

src/components/service/DepartmentDrawer/index.vue

@@ -135,14 +135,5 @@ export default {
 .c-department-tree {
   height: 100%;
   padding: $spacing--xs;
-
-  ::v-deep {
-    .el-tree--highlight-current
-      .el-tree-node.is-current
-      > .el-tree-node__content {
-      color: #fff;
-      background-color: $blue;
-    }
-  }
 }
 </style>

src/scss/base/_cover.scss

@@ -55,3 +55,10 @@
     padding: $padding--sm 0;
   }
 }
+
+.el-tree--highlight-current {
+  .el-tree-node.is-current > .el-tree-node__content {
+    color: #fff;
+    background-color: $blue;
+  }
+}

src/views/external/index.vue

@@ -4,42 +4,59 @@
     margin
     padding
     background
+    horizontal
   >
+    <department-tree
+      class="c-sibling-item c-sidebar u-width--md"
+      @change="onGroupChanged"
+    />
     <schema-table
       ref="table"
+      class="c-sibling-item far"
       :schema="schema"
     />
     <confirm-dialog
       ref="editDialog"
       :title="dialogTitle"
+      size="fixed"
       @confirm="onConfirm"
     >
-      <div class="c-grid-form u-align-self--center">
-        <span class="c-grid-form__label u-required">名称</span>
-        <el-input
-          v-model.trim="mesh.name"
-          placeholder="最多30个字符"
-          maxlength="30"
-          clearable
-        />
-        <span class="c-grid-form__label u-required">地址</span>
-        <el-input
-          v-model.trim="mesh.address"
-          type="textarea"
-          placeholder="最多100个字符"
-          maxlength="100"
-          :rows="4"
-          show-word-limit
-        />
-        <span class="c-grid-form__label">坐标</span>
-        <div class="l-flex--row c-grid-form__option">
-          <span class="c-sibling-item">{{ mesh.longitude }},{{ mesh.latitude }}</span>
-          <i
-            class="c-sibling-item el-icon-edit u-color--blue has-active"
-            @click="onEditCoordinate"
+      <template #default>
+        <div class="l-flex__none c-sibling-item--v c-grid-form u-align-self--center">
+          <span class="c-grid-form__label u-required">名称</span>
+          <el-input
+            v-model.trim="mesh.name"
+            placeholder="最多30个字符"
+            maxlength="30"
+            clearable
+          />
+          <span class="c-grid-form__label u-required">地址</span>
+          <el-input
+            v-model.trim="mesh.address"
+            type="textarea"
+            placeholder="最多100个字符"
+            maxlength="100"
+            :rows="4"
+            show-word-limit
+          />
+          <span class="c-grid-form__label">坐标</span>
+          <div class="l-flex--row c-grid-form__option">
+            <span class="c-sibling-item">{{ mesh.longitude }},{{ mesh.latitude }}</span>
+            <i
+              class="c-sibling-item el-icon-edit u-color--blue has-active"
+              @click="onEditCoordinate"
+            />
+          </div>
+          <span class="c-grid-form__label">归属</span>
+        </div>
+        <div class="l-flex__fill l-flex--col c-sibling-item--v">
+          <department-tree
+            class="l-flex__fill"
+            :option="{ group: $meshGroup }"
+            @change="onMeshGroupChanged"
           />
         </div>
-      </div>
+      </template>
     </confirm-dialog>
     <coordinate-dialog
       ref="coordinateDialog"
@@ -49,6 +66,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import {
   validLongitude,
   validLatitude
@@ -66,7 +84,7 @@ export default {
     return {
       mesh: {},
       schema: {
-        list: getMeshes,
+        list: this.getMeshes,
         buttons: [
           { type: 'add', on: this.onAdd }
         ],
@@ -92,11 +110,28 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['tenant']),
     dialogTitle () {
       return this.mesh.meshId ? '编辑网点' : '新增网点'
     }
   },
   methods: {
+    onGroupChanged (group) {
+      this.$group = group
+      this.$refs.table?.pageTo(1)
+    },
+    getMeshes (params) {
+      if (!this.$group) {
+        return Promise.resolve({ data: [] })
+      }
+      if (this.$group.path === this.tenant) {
+        return getMeshes(params)
+      }
+      return getMeshes({
+        org: this.$group.path,
+        ...params
+      })
+    },
     onAdd () {
       this.mesh = {
         name: '',
@@ -104,14 +139,19 @@ export default {
         longitude: '',
         latitude: ''
       }
+      this.$meshGroup = this.$group
       this.$refs.editDialog.show()
     },
     onEdit (mesh) {
       this.$mesh = mesh
-      const { meshId, name, address, longitude, latitude } = mesh
-      this.mesh = { meshId, name, address, longitude, latitude }
+      const { meshId, name, address, longitude, latitude, org } = mesh
+      this.mesh = { meshId, name, address, longitude, latitude, org }
+      this.$meshGroup = { path: org }
       this.$refs.editDialog.show()
     },
+    onMeshGroupChanged (group) {
+      this.mesh.org = group.path
+    },
     onEditCoordinate () {
       const { longitude, latitude, address } = this.mesh
       this.$refs.coordinateDialog.show({
@@ -156,6 +196,9 @@ export default {
         })
         return
       }
+      if (!mesh.org) {
+        mesh.org = this.tenant
+      }
       if (mesh.meshId) {
         this.onConfirmEdit(mesh, done)
       } else {