gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【优化】优化前端组件中，组织、用户、职位、角色、用户组等五个选择器在小屏幕下的表现

pull/277/MERGE
xuyuxiang 2025-09-16 22:12:31 +08:00
parent 92748d1737
commit 677d994ec5
6 changed files with 158 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
snowy-admin-web/src/components/XnGroupSelector/index.vue
View File

@ -26,18 +26,22 @@
@cancel="handleClose" @cancel="handleClose"
> >
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="14"> <a-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
<div class="table-operator xn-mb10"> <div class="table-operator xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item name="searchKey"> <a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入名称" /> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button> <a-form-item>
<a-button @click="reset()"> 重置 </a-button> <a-space>
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
<a-button @click="reset()"> 重置 </a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -58,7 +62,7 @@
</a-table> </a-table>
</div> </div>
</a-col> </a-col>
<a-col :span="10"> <a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
<div class="selector-table"> <div class="selector-table">
<a-table <a-table
ref="selectedTable" ref="selectedTable"
@ -68,6 +72,7 @@
:expand-row-by-click="true" :expand-row-by-click="true"
:loading="selectedTableListLoading" :loading="selectedTableListLoading"
bordered bordered
> >
<template #title> <template #title>
<span>已选择: {{ selectedData.length }}</span> <span>已选择: {{ selectedData.length }}</span>
@ -476,9 +481,6 @@
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
} }
.ant-form-item {
margin-bottom: 0 !important;
}
.selector-table { .selector-table {
overflow: auto; overflow: auto;
max-height: 450px; max-height: 450px;

43
snowy-admin-web/src/components/XnOrgSelector/index.vue
View File

@ -28,7 +28,7 @@
@cancel="handleClose" @cancel="handleClose"
> >
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="7"> <a-col :xs="0" :sm="0" :md="0" :lg="7" :xl="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv"> <a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree <a-tree
v-if="treeData" v-if="treeData"
@ -40,18 +40,41 @@
</a-tree> </a-tree>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="11"> <a-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
<div class="table-operator xn-mb10"> <div class="table-operator xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item label="上级组织：" name="parentId">
<a-tree-select
v-model:value="searchFormState.parentId"
class="xn-wd"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择上级组织"
allow-clear
:tree-data="treeData"
:field-names="{
children: 'children',
label: 'name',
value: 'id'
}"
selectable="false"
tree-line
/>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item name="searchKey"> <a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" /> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button> <a-form-item>
<a-button @click="reset()"> 重置 </a-button> <a-space>
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
<a-button @click="reset()"> 重置 </a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -66,6 +89,7 @@
:loading="pageLoading" :loading="pageLoading"
bordered bordered
:pagination="false" :pagination="false"
:scroll="{ x: 'max-content' }"
> >
<template #title> <template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span> <span>待选择列表 {{ tableRecordNum }} 条</span>
@ -95,7 +119,7 @@
</div> </div>
</div> </div>
</a-col> </a-col>
<a-col :span="6"> <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<div class="selector-table"> <div class="selector-table">
<a-table <a-table
ref="selectedTable" ref="selectedTable"
@ -437,7 +461,7 @@
} }
// 重置 // 重置
const reset = () => { const reset = () => {
delete searchFormState.value.searchKey searchFormRef.value.resetFields()
loadData() loadData()
} }
const handleClose = () => { const handleClose = () => {
@ -576,9 +600,6 @@
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
} }
.ant-form-item {
margin-bottom: 0 !important;
}
.selector-table { .selector-table {
overflow: auto; overflow: auto;
max-height: 450px; max-height: 450px;

43
snowy-admin-web/src/components/XnPositionSelector/index.vue
View File

@ -28,7 +28,7 @@
@cancel="handleClose" @cancel="handleClose"
> >
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="7"> <a-col :xs="0" :sm="0" :md="0" :lg="7" :xl="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv"> <a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree <a-tree
v-if="treeData" v-if="treeData"
@ -40,18 +40,41 @@
</a-tree> </a-tree>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="11"> <a-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
<div class="table-operator xn-mb10"> <div class="table-operator xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item label="组织：" name="orgId">
<a-tree-select
v-model:value="searchFormState.orgId"
class="xn-wd"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择组织"
allow-clear
:tree-data="treeData"
:field-names="{
children: 'children',
label: 'name',
value: 'id'
}"
selectable="false"
tree-line
/>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item name="searchKey"> <a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" /> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button> <a-form-item>
<a-button @click="reset()"> 重置 </a-button> <a-space>
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
<a-button @click="reset()"> 重置 </a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -66,6 +89,7 @@
:loading="pageLoading" :loading="pageLoading"
bordered bordered
:pagination="false" :pagination="false"
:scroll="{ x: 'max-content' }"
> >
<template #title> <template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span> <span>待选择列表 {{ tableRecordNum }} 条</span>
@ -95,7 +119,7 @@
</div> </div>
</div> </div>
</a-col> </a-col>
<a-col :span="6"> <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<div class="selector-table"> <div class="selector-table">
<a-table <a-table
ref="selectedTable" ref="selectedTable"
@ -433,7 +457,7 @@
} }
// 重置 // 重置
const reset = () => { const reset = () => {
delete searchFormState.value.searchKey searchFormRef.value.resetFields()
loadData() loadData()
} }
const handleClose = () => { const handleClose = () => {
@ -572,9 +596,6 @@
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
} }
.ant-form-item {
margin-bottom: 0 !important;
}
.selector-table { .selector-table {
overflow: auto; overflow: auto;
max-height: 450px; max-height: 450px;

62
snowy-admin-web/src/components/XnRoleSelector/index.vue
View File

@ -28,7 +28,7 @@
@cancel="handleClose" @cancel="handleClose"
> >
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="7"> <a-col :xs="0" :sm="0" :md="0" :lg="7" :xl="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv"> <a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree <a-tree
v-if="treeData" v-if="treeData"
@ -40,18 +40,42 @@
</a-tree> </a-tree>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="11"> <a-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
<div class="table-operator xn-mb10"> <div class="table-operator xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item name="searchKey"> <a-form-item label="组织：" name="categoryOrOrgId">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" /> <a-tree-select
v-model:value="searchFormState.categoryOrOrgId"
class="xn-wd"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择组织"
allow-clear
:tree-data="treeData"
:field-names="{
children: 'children',
label: 'name',
value: 'id'
}"
selectable="false"
tree-line
@change="onCategoryOrOrgIdSelect"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button> <a-form-item name="searchKey">
<a-button @click="reset()"> 重置 </a-button> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入角色名" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item>
<a-space>
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
<a-button @click="reset()"> 重置 </a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -66,6 +90,7 @@
:loading="pageLoading" :loading="pageLoading"
bordered bordered
:pagination="false" :pagination="false"
:scroll="{ x: 'max-content' }"
> >
<template #title> <template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span> <span>待选择列表 {{ tableRecordNum }} 条</span>
@ -95,7 +120,7 @@
</div> </div>
</div> </div>
</a-col> </a-col>
<a-col :span="6"> <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<div class="selector-table"> <div class="selector-table">
<a-table <a-table
ref="selectedTable" ref="selectedTable"
@ -216,7 +241,7 @@
const slots = useSlots() const slots = useSlots()
// 替换treeNode 中 title,key,children // 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'id' } const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
// 获取职位树数据 // 获取机构树数据
const treeData = ref() const treeData = ref()
// 默认展开二级树的节点id // 默认展开二级树的节点id
const defaultExpandedKeys = ref([]) const defaultExpandedKeys = ref([])
@ -436,6 +461,18 @@
} }
loadData() loadData()
} }
// 下拉树点击的情况
const onCategoryOrOrgIdSelect = (selectedId) => {
searchFormState.value.current = 0
if (selectedId === 'GLOBAL') {
searchFormState.value.category = selectedId
delete searchFormState.value.orgId
} else {
searchFormState.value.orgId = selectedId
delete searchFormState.value.category
}
delete searchFormState.value.categoryOrOrgId
}
const dataArray = ref([]) const dataArray = ref([])
// 确定 // 确定
const handleOk = () => { const handleOk = () => {
@ -461,7 +498,7 @@
} }
// 重置 // 重置
const reset = () => { const reset = () => {
delete searchFormState.value.searchKey searchFormRef.value.resetFields()
loadData() loadData()
} }
const handleClose = () => { const handleClose = () => {
@ -600,9 +637,6 @@
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
} }
.ant-form-item {
margin-bottom: 0 !important;
}
.selector-table { .selector-table {
overflow: auto; overflow: auto;
max-height: 450px; max-height: 450px;

43
snowy-admin-web/src/components/XnUserSelector/index.vue
View File

@ -35,7 +35,7 @@
@cancel="handleClose" @cancel="handleClose"
> >
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :span="7"> <a-col :xs="0" :sm="0" :md="0" :lg="7" :xl="7">
<a-card size="small" :loading="cardLoading" class="selectorTreeDiv"> <a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
<a-tree <a-tree
v-if="treeData" v-if="treeData"
@ -47,18 +47,41 @@
</a-tree> </a-tree>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="11"> <a-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
<div class="table-operator xn-mb10"> <div class="table-operator xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item label="组织：" name="orgId">
<a-tree-select
v-model:value="searchFormState.orgId"
class="xn-wd"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择组织"
allow-clear
:tree-data="treeData"
:field-names="{
children: 'children',
label: 'name',
value: 'id'
}"
selectable="false"
tree-line
/>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item name="searchKey"> <a-form-item name="searchKey">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" /> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button> <a-form-item>
<a-button @click="reset()"> 重置 </a-button> <a-space>
<a-button type="primary" class="xn-mr-10" @click="loadData()"> 查询 </a-button>
<a-button @click="reset()"> 重置 </a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -73,6 +96,7 @@
:loading="pageLoading" :loading="pageLoading"
bordered bordered
:pagination="false" :pagination="false"
:scroll="{ x: 'max-content' }"
> >
<template #title> <template #title>
<span>待选择列表 {{ tableRecordNum }} 条</span> <span>待选择列表 {{ tableRecordNum }} 条</span>
@ -105,7 +129,7 @@
</div> </div>
</div> </div>
</a-col> </a-col>
<a-col :span="6"> <a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
<div class="user-table"> <div class="user-table">
<a-table <a-table
ref="selectedTable" ref="selectedTable"
@ -441,7 +465,7 @@
} }
// 重置 // 重置
const reset = () => { const reset = () => {
delete searchFormState.value.searchKey searchFormRef.value.resetFields()
loadData() loadData()
} }
const handleClose = () => { const handleClose = () => {
@ -580,9 +604,6 @@
max-height: 500px; max-height: 500px;
overflow: auto; overflow: auto;
} }
.ant-form-item {
margin-bottom: 0 !important;
}
.user-table { .user-table {
overflow: auto; overflow: auto;
max-height: 450px; max-height: 450px;

3
snowy-plugin/snowy-plugin-sys/src/main/java/vip/xiaonuo/sys/modular/group/service/impl/SysGroupServiceImpl.java
View File

@ -66,6 +66,9 @@ public class SysGroupServiceImpl extends ServiceImpl<SysGroupMapper, SysGroup> i
@Override @Override
public Page<SysGroup> page(SysGroupPageParam sysGroupPageParam) { public Page<SysGroup> page(SysGroupPageParam sysGroupPageParam) {
QueryWrapper<SysGroup> queryWrapper = new QueryWrapper<SysGroup>().checkSqlInjection(); QueryWrapper<SysGroup> queryWrapper = new QueryWrapper<SysGroup>().checkSqlInjection();
if(ObjectUtil.isNotEmpty(sysGroupPageParam.getSearchKey())) {
queryWrapper.lambda().like(SysGroup::getName, sysGroupPageParam.getSearchKey());
}
if(ObjectUtil.isNotEmpty(sysGroupPageParam.getName())) { if(ObjectUtil.isNotEmpty(sysGroupPageParam.getName())) {
queryWrapper.lambda().like(SysGroup::getName, sysGroupPageParam.getName()); queryWrapper.lambda().like(SysGroup::getName, sysGroupPageParam.getName());
} }