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 20:36:58 +08:00
parent f22390ab55
commit deec47da72
5 changed files with 128 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
snowy-admin-web/src/views/biz/group/index.vue
View File

@ -2,12 +2,12 @@
<a-card :bordered="false"> <a-card :bordered="false">
<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="6"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item label="名称" name="name"> <a-form-item label="名称" name="name">
<a-input v-model:value="searchFormState.name" placeholder="请输入名称" /> <a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<a-button type="primary" @click="tableRef.refresh()">查询</a-button> <a-button type="primary" @click="tableRef.refresh()">查询</a-button>
<a-button style="margin: 0 8px" @click="reset">重置</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button>
</a-col> </a-col>
@ -22,6 +22,7 @@
:row-key="(record) => record.id" :row-key="(record) => record.id"
:tool-config="toolConfig" :tool-config="toolConfig"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
:scroll="{ x: 'max-content' }"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
@ -100,6 +101,7 @@
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
fixed: 'right',
width: 220 width: 220
}) })
} }

64
snowy-admin-web/src/views/biz/org/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5"> <a-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4">
<a-card :bordered="false" :loading="cardLoading" class="left-tree-container"> <a-card :bordered="false" :loading="cardLoading" class="left-tree-container">
<a-tree <a-tree
v-if="treeData.length > 0" v-if="treeData.length > 0"
@ -12,24 +12,47 @@
<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" /> <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
</a-card> </a-card>
</a-col> </a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19"> <a-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
<a-card :bordered="false" class="xn-mb10"> <a-card :bordered="false" class="xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="10">
<a-col :span="8"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item name="searchKey" label="名称关键词"> <a-form-item label="上级组织：" name="parentId">
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名称关键词" /> <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-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" @click="tableRef.refresh(true)"> <a-form-item name="searchKey" label="名称关键词">
<template #icon><SearchOutlined /></template> <a-input v-model:value="searchFormState.searchKey" placeholder="请输入名称关键词" />
查询 </a-form-item>
</a-button> </a-col>
<a-button class="snowy-button-left" @click="reset"> <a-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<template #icon><redo-outlined /></template> <a-form-item>
重置 <a-space>
</a-button> <a-button type="primary" @click="tableRef.refresh(true)">
<template #icon><SearchOutlined /></template>
查询
</a-button>
<a-button class="snowy-button-left" @click="reset">
<template #icon><redo-outlined /></template>
重置
</a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -45,6 +68,7 @@
:row-key="(record) => record.id" :row-key="(record) => record.id"
:tool-config="toolConfig" :tool-config="toolConfig"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
:scroll="{ x: 'max-content' }"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
@ -111,6 +135,7 @@
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
fixed: 'right',
width: '150px' width: '150px'
}) })
} }
@ -212,10 +237,5 @@
</script> </script>
<style scoped> <style scoped>
.ant-form-item {
margin-bottom: 0 !important;
}
.snowy-button-left {
margin-left: 8px;
}
</style> </style>

60
snowy-admin-web/src/views/biz/position/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5"> <a-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4">
<a-card :bordered="false" :loading="cardLoading" class="left-tree-container"> <a-card :bordered="false" :loading="cardLoading" class="left-tree-container">
<a-tree <a-tree
v-if="treeData.length > 0" v-if="treeData.length > 0"
@ -12,24 +12,47 @@
<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" /> <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
</a-card> </a-card>
</a-col> </a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19"> <a-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
<a-card :bordered="false" class="xn-mb10"> <a-card :bordered="false" class="xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="10">
<a-col :span="8"> <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" label="名称关键词"> <a-form-item name="searchKey" label="名称关键词">
<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="8"> <a-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<a-button type="primary" @click="tableRef.refresh(true)"> <a-form-item>
<template #icon><SearchOutlined /></template> <a-space>
查询 <a-button type="primary" @click="tableRef.refresh(true)">
</a-button> <template #icon><SearchOutlined /></template>
<a-button class="snowy-button-left" @click="reset"> 查询
<template #icon><redo-outlined /></template> </a-button>
重置 <a-button class="snowy-button-left" @click="reset">
</a-button> <template #icon><redo-outlined /></template>
重置
</a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -45,6 +68,7 @@
:tool-config="toolConfig" :tool-config="toolConfig"
:row-key="(record) => record.id" :row-key="(record) => record.id"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
:scroll="{ x: 'max-content' }"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
@ -111,6 +135,7 @@
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
fixed: 'right',
width: '150px' width: '150px'
}) })
} }
@ -209,10 +234,5 @@
</script> </script>
<style scoped> <style scoped>
.ant-form-item {
margin-bottom: 0 !important;
}
.snowy-button-left {
margin-left: 8px;
}
</style> </style>

66
snowy-admin-web/src/views/biz/user/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5"> <a-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4">
<a-card :bordered="false" :loading="cardLoading" class="left-tree-container"> <a-card :bordered="false" :loading="cardLoading" class="left-tree-container">
<a-tree <a-tree
v-if="treeData.length > 0" v-if="treeData.length > 0"
@ -12,11 +12,30 @@
<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" /> <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
</a-card> </a-card>
</a-col> </a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19"> <a-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<a-card :bordered="false" class="xn-mb10"> <a-card :bordered="false" class="xn-mb10">
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState"> <a-form ref="searchFormRef" :model="searchFormState">
<a-row :gutter="24"> <a-row :gutter="10">
<a-col :span="8"> <a-col :xs="24" :sm="8" :md="8" :lg="0" :xl="0">
<a-form-item :label="$t('user.userOrg')" name="orgId">
<a-tree-select
v-model:value="searchFormState.orgId"
class="xn-wd"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:placeholder="$t('user.placeholderUserOrg')"
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" :label="$t('common.searchKey')"> <a-form-item name="searchKey" :label="$t('common.searchKey')">
<a-input <a-input
v-model:value="searchFormState.searchKey" v-model:value="searchFormState.searchKey"
@ -24,7 +43,7 @@
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-form-item name="userStatus" :label="$t('user.userStatus')"> <a-form-item name="userStatus" :label="$t('user.userStatus')">
<a-select <a-select
v-model:value="searchFormState.userStatus" v-model:value="searchFormState.userStatus"
@ -37,15 +56,19 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<a-button type="primary" @click="tableRef.refresh(true)"> <a-form-item>
<template #icon><SearchOutlined /></template> <a-space>
{{ $t('common.searchButton') }} <a-button type="primary" @click="tableRef.refresh(true)">
</a-button> <template #icon><SearchOutlined /></template>
<a-button class="snowy-button-left" @click="reset"> {{ $t('common.searchButton') }}
<template #icon><redo-outlined /></template> </a-button>
{{ $t('common.resetButton') }} <a-button class="snowy-button-left" @click="reset">
</a-button> <template #icon><redo-outlined /></template>
{{ $t('common.resetButton') }}
</a-button>
</a-space>
</a-form-item>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
@ -61,6 +84,7 @@
:tool-config="toolConfig" :tool-config="toolConfig"
:row-key="(record) => record.id" :row-key="(record) => record.id"
:row-selection="options.rowSelection" :row-selection="options.rowSelection"
:scroll="{ x: 'max-content' }"
> >
<template #operator class="table-operator"> <template #operator class="table-operator">
<a-space> <a-space>
@ -211,6 +235,7 @@
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
align: 'center', align: 'center',
fixed: 'right',
width: '220px' width: '220px'
}) })
} }
@ -413,14 +438,5 @@
</script> </script>
<style scoped> <style scoped>
.ant-form-item {
margin-bottom: 0 !important;
}
.snowy-table-avatar {
margin-top: -10px;
margin-bottom: -10px;
}
.snowy-button-left {
margin-left: 8px;
}
</style> </style>

2
snowy-admin-web/src/views/sys/user/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<a-row :gutter="10"> <a-row :gutter="10">
<a-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4"> <a-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4">
<a-card :bordered="false" :loading="cardLoading" class="left-tree-container mb-3"> <a-card :bordered="false" :loading="cardLoading" class="left-tree-container">
<a-tree <a-tree
v-if="treeData.length > 0" v-if="treeData.length > 0"
v-model:expandedKeys="defaultExpandedKeys" v-model:expandedKeys="defaultExpandedKeys"