Initial commit

src/views/user/batch-recharge/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-split-layout
+        width="266px"
+        allow-collapse
+        :right-style="{ overflow: 'hidden' }"
+        :style="{ minHeight: 'calc(100vh - 152px)' }"
+      >
+        <div>
+          <ele-toolbar theme="default">
+            <a-space :size="10"> 组织机构 </a-space>
+          </ele-toolbar>
+          <div class="ele-border-split sys-organization-list">
+            <a-tree
+              :tree-data="(data as any)"
+              v-model:expanded-keys="expandedRowKeys"
+              v-model:selected-keys="selectedRowKeys"
+              @select="onTreeSelect"
+            />
+          </div>
+        </div>
+        <template #content>
+          <org-user-list
+            v-if="current"
+            :selection="selection"
+            :organization-list="data"
+            :organization-id="current.organizationId"
+          />
+        </template>
+      </ele-split-layout>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
+  import OrgUserList from './components/org-user-list.vue';
+  import { listOrganizations } from '@/api/system/organization';
+  import type { Organization } from '@/api/system/organization/model';
+
+  // 加载状态
+  const loading = ref(true);
+
+  // 树形数据
+  const data = ref<Organization[]>([]);
+
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+
+  // 选中数据
+  const current = ref<Organization | null>(null);
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+    listOrganizations()
+      .then((list) => {
+        loading.value = false;
+        const eks: number[] = [];
+        list.forEach((d) => {
+          d.key = d.organizationId;
+          d.value = d.organizationId;
+          d.title = d.organizationName;
+          if (typeof d.key === 'number') {
+            eks.push(d.key);
+          }
+        });
+        expandedRowKeys.value = eks;
+        data.value = toTreeData({
+          data: list,
+          idField: 'organizationId',
+          parentIdField: 'parentId'
+        });
+        if (list.length) {
+          if (typeof list[0].key === 'number') {
+            selectedRowKeys.value = [list[0].key];
+          }
+          current.value = list[0];
+          current.value.organizationId = 0;
+        } else {
+          selectedRowKeys.value = [];
+          current.value = null;
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  /* 选择数据 */
+  const onTreeSelect = () => {
+    eachTreeData(data.value, (d) => {
+      if (typeof d.key === 'number' && selectedRowKeys.value.includes(d.key)) {
+        current.value = d;
+        return false;
+      }
+    });
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'UserBatchRecharge'
+  };
+</script>
+
+<style lang="less" scoped>
+  .sys-organization-list {
+    padding: 12px 6px;
+    height: calc(100vh - 242px);
+    border-width: 1px;
+    border-style: solid;
+    overflow: auto;
+  }
+</style>