feat: member list add rank tree

src/views/sys/member/RankTree.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      :title="t('sys.memberRank.memberRankList')"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="false"
+      :treeData="treeData"
+      :fieldNames="{ key: 'key', title: 'title' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { getMemberRankList } from '/@/api/sys/memberRank';
+
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { buildDataNode } from '/@/utils/tree';
+
+  export default defineComponent({
+    name: 'RankTree',
+    components: { BasicTree },
+
+    emits: ['select'],
+    setup(_, { emit }) {
+      const treeData = ref<TreeItem[]>([]);
+      const { t } = useI18n();
+
+      async function fetch() {
+        const deptData = await getMemberRankList({ page: 1, pageSize: 1000 });
+        const data = buildDataNode(deptData.data.data, {
+          labelField: 'trans',
+          valueField: 'id',
+          idKeyField: 'id',
+          childrenKeyField: 'children',
+          parentKeyField: 'parentId',
+        }) as TreeItem[];
+
+        treeData.value = data;
+      }
+
+      function handleSelect(keys) {
+        emit('select', keys[0]);
+      }
+
+      onMounted(() => {
+        fetch();
+      });
+      return { treeData, handleSelect, t };
+    },
+  });
+</script>

src/views/sys/member/index.vue

@@ -1,47 +1,55 @@
 <template>
-  <div>
-    <BasicTable @register="registerTable">
-      <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
-          {{ t('common.delete') }}
-        </Button>
-      </template>
-      <template #toolbar>
-        <a-button type="primary" @click="handleCreate">
-          {{ t('sys.member.addMember') }}
-        </a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                icon: 'clarity:note-edit-line',
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                icon: 'ant-design:delete-outlined',
-                color: 'error',
-                popConfirm: {
-                  title: t('common.deleteConfirm'),
-                  placement: 'left',
-                  confirm: handleDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </template>
-    </BasicTable>
+  <PageWrapper dense contentFullHeight>
+    <Row>
+      <Col :span="5">
+        <RankTree @select="handleSelect" />
+      </Col>
+      <Col :span="19">
+        <BasicTable @register="registerTable" :searchInfo="searchInfo">
+          <template #tableTitle>
+            <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
+              <template #icon><DeleteOutlined /></template>
+              {{ t('common.delete') }}
+            </Button>
+          </template>
+          <template #toolbar>
+            <a-button type="primary" @click="handleCreate">
+              {{ t('sys.member.addMember') }}
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'clarity:note-edit-line',
+                    onClick: handleEdit.bind(null, record),
+                  },
+                  {
+                    icon: 'ant-design:delete-outlined',
+                    color: 'error',
+                    popConfirm: {
+                      title: t('common.deleteConfirm'),
+                      placement: 'left',
+                      confirm: handleDelete.bind(null, record),
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </Col>
+    </Row>
     <MemberDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
-  import { createVNode, defineComponent, ref } from 'vue';
+  import { createVNode, defineComponent, reactive, ref } from 'vue';
   import { Button, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import RankTree from './RankTree.vue';
 
   import { useDrawer } from '/@/components/Drawer';
   import MemberDrawer from './MemberDrawer.vue';
@@ -50,13 +58,27 @@
 
   import { columns, searchFormSchema } from './member.data';
   import { getMemberList, deleteMember, batchDeleteMember } from '/@/api/sys/member';
+  import { PageWrapper } from '/@/components/Page';
+  import Row from 'ant-design-vue/es/grid/Row';
+  import Col from 'ant-design-vue/es/grid/Col';
 
   export default defineComponent({
     name: 'MemberManagement',
-    components: { BasicTable, MemberDrawer, TableAction, Button, DeleteOutlined },
+    components: {
+      BasicTable,
+      MemberDrawer,
+      TableAction,
+      Button,
+      PageWrapper,
+      Row,
+      Col,
+      RankTree,
+      DeleteOutlined,
+    },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();
+      const searchInfo = reactive<Recordable>({});
       const showDeleteButton = ref<boolean>(false);
 
       const [registerDrawer, { openDrawer }] = useDrawer();
@@ -146,6 +168,11 @@
         await reload();
       }
 
+      function handleSelect(rankId = '') {
+        searchInfo.rankId = rankId;
+        reload();
+      }
+
       return {
         t,
         registerTable,
@@ -155,7 +182,9 @@
         handleDelete,
         handleSuccess,
         handleBatchDelete,
+        handleSelect,
         showDeleteButton,
+        searchInfo,
       };
     },
   });

src/views/sys/member/member.data.ts

@@ -118,6 +118,7 @@ export const formSchema: FormSchema[] = [
     label: t('sys.member.rankId'),
     component: 'ApiSelect',
     required: true,
+    defaultValue: 1,
     componentProps: {
       api: getMemberRankList,
       params: {

src/views/sys/user/DeptTree.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-4 mr-0 overflow-hidden bg-white">
     <BasicTree
-      title="部门列表"
+      :title="t('sys.department.departmentList')"
       toolbar
       search
       treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
@@ -17,6 +17,7 @@
   import { getDepartmentList } from '/@/api/sys/department';
 
   import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { useI18n } from '/@/hooks/web/useI18n';
   import { buildDataNode } from '/@/utils/tree';
 
   export default defineComponent({
@@ -26,6 +27,7 @@
     emits: ['select'],
     setup(_, { emit }) {
       const treeData = ref<TreeItem[]>([]);
+      const { t } = useI18n();
 
       async function fetch() {
         const deptData = await getDepartmentList({ page: 1, pageSize: 1000 });
@@ -47,7 +49,7 @@
       onMounted(() => {
         fetch();
       });
-      return { treeData, handleSelect };
+      return { treeData, handleSelect, t };
     },
   });
 </script>