chore: 🔨 用户列表左侧部门树形菜单

src/frontend/admin/src/views/sys/dept/index.vue

@@ -86,12 +86,12 @@
                 row-key="id"
                 stripe>
                 <el-table-column type="selection" width="50" />
-                <na-col-id :label="$t('部门编号')" prop="id" sortable="custom" width="170" />
                 <el-table-column :label="$t('部门名称')" min-width="150" prop="name" sortable="custom" />
+                <na-col-id :label="$t('部门编号')" prop="id" sortable="custom" width="170" />
                 <el-table-column :label="$t('用户数量')" align="right" width="100">
                     <template #default="{ row }">
                         <el-link @click.native="dialog.save = { mode: 'view', row, tabId: 'user' }"
-                            >{{ statistics.deptId?.find((x) => x.key.deptId === row.id.toString())?.value ?? '...' }}
+                            >{{ statistics.deptId?.find((x) => x.key.deptId === row.id.toString())?.value ?? '0' }}
                         </el-link>
                     </template>
                 </el-table-column>

src/frontend/admin/src/views/sys/role/save.vue

@@ -38,19 +38,23 @@
                     <div class="treeMain">
                         <el-tree
                             :data="trees.api"
-                            :props="{ label: (data) => data.summary }"
+                            :props="{ label: (data) => `${data.summary} - ${data.id}` }"
                             default-expand-all
                             node-key="id"
                             ref="api"
                             show-checkbox></el-tree>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane :label="$t('数据范围')">
+                <el-tab-pane :label="$t('数据权限')">
                     <el-form label-width="10rem">
-                        <el-form-item :label="$t('规则类型')">
+                        <el-form-item :label="$t('数据权限')">
-                            <el-select v-model="form.dataScope" :disabled="mode === 'view'">
+                            <el-radio-group v-model="form.dataScope" :disabled="mode === 'view'">
-                                <el-option v-for="(item, i) in this.$GLOBAL.enums.dataScopes" :key="i" :label="item[1]" :value="i"></el-option>
+                                <el-radio-button
-                            </el-select>
+                                    v-for="(item, i) in this.$GLOBAL.enums.dataScopes"
+                                    :key="i"
+                                    :label="item[1]"
+                                    :value="i"></el-radio-button>
+                            </el-radio-group>
                         </el-form-item>
                         <el-form-item v-show="form.dataScope === 'specificDept'" :label="$t('选择部门')">
                             <div class="treeMain" style="width: 100%">
@@ -63,16 +67,11 @@
                                     show-checkbox></el-tree>
                             </div>
                         </el-form-item>
-                    </el-form>
+                        <el-form-item :label="$t('首页视图')">
-                </el-tab-pane>
+                            <el-radio-group v-model="form.displayDashboard" :disabled="mode === 'view'">
-                <el-tab-pane :label="$t('控制台')">
+                                <el-radio-button :label="$t('仪表板')" :value="true"></el-radio-button>
-                    <el-form label-width="10rem">
+                                <el-radio-button :label="$t('工作台')" :value="false"></el-radio-button>
-                        <el-form-item :label="$t('控制台视图')">
+                            </el-radio-group>
-                            <el-select v-model="form.displayDashboard" :disabled="mode === 'view'">
-                                <el-option :label="$t('仪表板')" :value="true"></el-option>
-                                <el-option :label="$t('工作台')" :value="false"></el-option>
-                            </el-select>
-                            <div class="el-form-item-msg">{{ $t('用于控制角色登录后控制台的视图') }}</div>
                         </el-form-item>
                         <el-form-item v-if="form.displayDashboard" :label="$t('仪表板布局')">
                             <v-ace-editor
@@ -80,9 +79,9 @@
                                 :theme="this.$TOOL.data.get('APP_SET_DARK') || this.$CONFIG.APP_SET_DARK ? 'github_dark' : 'github'"
                                 lang="json"
                                 style="height: 30rem; width: 100%" />
-                            <el-button @click="form.dashboardLayout = jsonFormat(form.dashboardLayout)" type="text">{{
+                            <el-button @click="form.dashboardLayout = jsonFormat(form.dashboardLayout)" type="text"
-                                $t('JSON 格式化')
+                                >{{ $t('JSON 格式化') }}
-                            }}</el-button>
+                            </el-button>
                         </el-form-item>
                     </el-form>
                 </el-tab-pane>

src/frontend/admin/src/views/sys/user/index.vue

@@ -36,14 +36,6 @@
                             placeholder: $t('用户编号 / 用户名 / 手机号 / 邮箱 / 备注'),
                             style: 'width:25rem',
                         },
-                        {
-                            type: 'cascader',
-                            field: ['filter', 'deptId'],
-                            api: $API.sys_dept.query,
-                            props: { label: 'name', value: 'id', checkStrictly: true, expandTrigger: 'hover', emitPath: false },
-                            placeholder: $t('所属部门'),
-                            style: 'width:15rem',
-                        },
                         {
                             type: 'remote-select',
                             field: ['filter', 'roleId'],
@@ -80,6 +72,25 @@
             </div>
         </el-header>
         <el-main class="nopadding">
+            <el-row class="h100p">
+                <el-col :lg="4">
+                    <el-tree
+                        v-loading="!deptTree"
+                        :data="deptTree"
+                        :default-expand-all="true"
+                        :expand-on-click-node="false"
+                        :props="{
+                            label: (data) => {
+                                return data.name
+                            },
+                        }"
+                        @node-click="deptClick"
+                        highlight-current
+                        node-key="id"
+                        ref="tree">
+                    </el-tree>
+                </el-col>
+                <el-col :lg="20">
                     <sc-table
                         :context-menus="['id', 'userName', 'mobile', 'email', 'enabled', 'createdTime', 'lastLoginTime']"
                         :context-opers="['view', 'edit']"
@@ -102,8 +113,12 @@
                         <el-table-column type="selection" width="50" />
                         <na-col-id :label="$t('用户编号')" prop="id" sortable="custom" width="170" />
                         <na-col-avatar :label="$t('用户名')" prop="userName" width="170" />
-                <el-table-column :label="$t('手机号')" align="center" prop="mobile" sortable="custom" width="120" />
+                        <el-table-column :label="$t('手机号 / 邮箱')" align="right" prop="mobile" sortable="custom" width="250">
-                <el-table-column :label="$t('邮箱')" align="right" prop="email" sortable="custom" width="250" />
+                            <template #default="{ row }">
+                                <p>{{ row.mobile }}</p>
+                                <p>{{ row.email }}</p>
+                            </template>
+                        </el-table-column>
                         <na-col-tags
                             :label="$t('所属部门')"
                             @click="(item) => (this.dialog.deptSave = { row: item, mode: 'view' })"
@@ -128,6 +143,8 @@
                         </el-table-column>
                         <na-col-operation :vue="this" width="120" />
                     </sc-table>
+                </el-col>
+            </el-row>
         </el-main>
     </el-container>
 
@@ -167,7 +184,17 @@ export default {
             return table
         },
     },
-    created() {
+    async created() {
+        const res = await this.$API.sys_dept.query.post({})
+
+        this.deptTree = [
+            {
+                id: 0,
+                name: '所有部门',
+                children: res.data,
+            },
+        ]
+
         if (this.roleId) {
             this.query.filter.roleId = this.roleId
         }
@@ -177,6 +204,7 @@ export default {
     },
     data() {
         return {
+            deptTree: null,
             statistics: {
                 total: '...',
             },
@@ -200,6 +228,10 @@ export default {
     },
     inject: ['reload'],
     methods: {
+        deptClick(e) {
+            this.$refs.search.form.filter.deptId = e.id
+            this.$refs.search.search()
+        },
         async getStatistics() {
             this.statistics.total = this.$refs.table?.total
             const res = await Promise.all([
@@ -260,6 +292,7 @@ export default {
         onReset() {
             Object.entries(this.$refs.selectFilter.selected).forEach(([key, _]) => (this.$refs.selectFilter.selected[key] = ['']))
             this.$refs.selectFilter.selected['enabled'] = [true]
+            this.$refs.tree.setCurrentKey(0)
         },
         //搜索
         async onSearch(form) {
@@ -322,4 +355,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+::v-deep .el-tree-node__content {
+    height: 3rem;
+}
+</style>