Skip to content

Commit

Permalink
chore: 🔨 用户列表左侧部门树形菜单
Browse files Browse the repository at this point in the history
  • Loading branch information
@nsnail
tk authored and nsnail committed Dec 18, 2024
1 parent ef17a8b commit f7c9125
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 79 deletions.
4 changes: 2 additions & 2 deletions src/frontend/admin/src/views/sys/dept/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
37 changes: 18 additions & 19 deletions src/frontend/admin/src/views/sys/role/save.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-select 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-select>
<el-form-item :label="$t('数据权限')">
<el-radio-group v-model="form.dataScope" :disabled="mode === 'view'">
<el-radio-button
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%">
Expand All @@ -63,26 +67,21 @@
show-checkbox></el-tree>
</div>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane :label="$t('控制台')">
<el-form label-width="10rem">
<el-form-item :label="$t('控制台视图')">
<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 :label="$t('首页视图')">
<el-radio-group v-model="form.displayDashboard" :disabled="mode === 'view'">
<el-radio-button :label="$t('仪表板')" :value="true"></el-radio-button>
<el-radio-button :label="$t('工作台')" :value="false"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.displayDashboard" :label="$t('仪表板布局')">
<v-ace-editor
v-model:value="form.dashboardLayout"
: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">{{
$t('JSON 格式化')
}}</el-button>
<el-button @click="form.dashboardLayout = jsonFormat(form.dashboardLayout)" type="text"
>{{ $t('JSON 格式化') }}
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
Expand Down
153 changes: 95 additions & 58 deletions src/frontend/admin/src/views/sys/user/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand Down Expand Up @@ -80,54 +72,79 @@
</div>
</el-header>
<el-main class="nopadding">
<sc-table
:context-menus="['id', 'userName', 'mobile', 'email', 'enabled', 'createdTime', 'lastLoginTime']"
:context-opers="['view', 'edit']"
:default-sort="{ prop: 'id', order: 'descending' }"
:export-api="$API.sys_user.export"
:params="query"
:query-api="$API.sys_user.pagedQuery"
:vue="this"
@data-change="getStatistics"
@selection-change="
(items) => {
selection = items
}
"
ref="table"
remote-filter
remote-sort
row-key="id"
stripe>
<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="email" sortable="custom" width="250" />
<na-col-tags
:label="$t('所属部门')"
@click="(item) => (this.dialog.deptSave = { row: item, mode: 'view' })"
field="name"
prop="dept"
width="120" />
<na-col-tags
:label="$t('所属角色')"
@click="(item) => (this.dialog.roleSave = { row: item, mode: 'view' })"
field="name"
min-width="200"
prop="roles" />
<el-table-column :label="$t('最后登录')" align="right" prop="lastLoginTime" sortable="custom" width="120">
<template #default="{ row }">
<span v-time.tip="row.lastLoginTime" :title="row.lastLoginTime"></span>
</template>
</el-table-column>
<el-table-column :label="$t('启用')" align="center" prop="enabled" sortable="custom" width="100">
<template #default="{ row }">
<el-switch v-model="row.enabled" @change="changeSwitch($event, row)"></el-switch>
</template>
</el-table-column>
<na-col-operation :vue="this" width="120" />
</sc-table>
<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']"
:default-sort="{ prop: 'id', order: 'descending' }"
:export-api="$API.sys_user.export"
:params="query"
:query-api="$API.sys_user.pagedQuery"
:vue="this"
@data-change="getStatistics"
@selection-change="
(items) => {
selection = items
}
"
ref="table"
remote-filter
remote-sort
row-key="id"
stripe>
<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="right" prop="mobile" 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' })"
field="name"
prop="dept"
width="120" />
<na-col-tags
:label="$t('所属角色')"
@click="(item) => (this.dialog.roleSave = { row: item, mode: 'view' })"
field="name"
min-width="200"
prop="roles" />
<el-table-column :label="$t('最后登录')" align="right" prop="lastLoginTime" sortable="custom" width="120">
<template #default="{ row }">
<span v-time.tip="row.lastLoginTime" :title="row.lastLoginTime"></span>
</template>
</el-table-column>
<el-table-column :label="$t('启用')" align="center" prop="enabled" sortable="custom" width="100">
<template #default="{ row }">
<el-switch v-model="row.enabled" @change="changeSwitch($event, row)"></el-switch>
</template>
</el-table-column>
<na-col-operation :vue="this" width="120" />
</sc-table>
</el-col>
</el-row>
</el-main>
</el-container>

Expand Down Expand Up @@ -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
}
Expand All @@ -177,6 +204,7 @@ export default {
},
data() {
return {
deptTree: null,
statistics: {
total: '...',
},
Expand All @@ -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([
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -322,4 +355,8 @@ export default {
}
</script>
<style scoped></style>
<style scoped>
::v-deep .el-tree-node__content {
height: 3rem;
}
</style>

0 comments on commit f7c9125

Please sign in to comment.