Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表格优化

Browse Source
This commit is contained in:
仲么了
2023-12-27 10:39:40 +08:00
parent e1299a5520
commit d42936398e
6 changed files with 232 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/table/header/index.vue
View File

@@ -1,44 +1,57 @@
<template>
<!-- 通用搜索 -->
<transition name="el-zoom-in-bottom" mode="out-in">
<div class="table-com-search" v-if="isShowSelect">
<el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
<slot name="select"></slot>
<transition name='el-zoom-in-bottom' mode='out-in' v-if='$slots.select'>
<div class='table-com-search' v-if='showSelect'>
<el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
<slot name='select'></slot>
<el-form-item>
<el-button @click="onComSearch" type="primary">查询</el-button>
<el-button @click="onResetForm">重置</el-button>
<el-button @click='onComSearch' type='primary'>查询</el-button>
<el-button @click='onResetForm'>重置</el-button>
</el-form-item>
</el-form>
</div>
</transition>
<div class="table-header ba-scroll-style">
<slot name="operation"></slot>
<div class='table-header ba-scroll-style'>
<slot name='operation'></slot>
<!-- 右侧搜索框和工具按钮 -->
<div class="table-search">
<div class="table-search-button-group">
<el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelect">
<Icon size="14" name="el-icon-Search" />
</el-button>
<div class='table-search' v-if='$slots.select'>
<div class='table-search-button-group'>
<el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
<Icon size='14' name='el-icon-Search' />
</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { inject,ref } from 'vue'
<script setup lang='ts'>
import { inject, ref } from 'vue'
import type TableStore from '@/utils/tableStore'
const tableStore = inject('tableStore') as TableStore
const isShowSelect = ref(false)
const showSelect = () => {
isShowSelect.value = !isShowSelect.value
interface Props {
// 默认展开
showSelect?: boolean
}
const props = withDefaults(defineProps<Props>(), {
showSelect: false
})
const showSelect = ref(props.showSelect)
const showSelectChange = () => {
showSelect.value = !showSelect.value
}
const onComSearch = () => {
tableStore.onTableAction('search', {})
}
const onResetForm = () => {
tableStore.onTableAction('reset', {})
}
const onComSearch = () => {}
const onResetForm = () => {}
</script>
<style scoped lang="scss">
<style scoped lang='scss'>
.table-header {
position: relative;
overflow-x: auto;
@@ -52,6 +65,7 @@ const onResetForm = () => {}
border-bottom: none;
padding: 13px 15px;
font-size: 14px;
.table-header-operate-text {
margin-left: 6px;
}
@@ -66,6 +80,7 @@ const onResetForm = () => {}
border-bottom: none;
padding: 13px 15px 0 15px;
font-size: 14px;
.com-search-col {
display: flex;
align-items: center;
@@ -73,6 +88,7 @@ const onResetForm = () => {}
color: var(--el-text-color-regular);
font-size: 13px;
}
.com-search-col-label {
width: 33.33%;
padding: 0 15px;
@@ -80,54 +96,67 @@ const onResetForm = () => {}
overflow: hidden;
white-space: nowrap;
}
.com-search-col-input {
padding: 0 15px;
width: 66.66%;
}
.com-search-col-input-range {
display: flex;
align-items: center;
padding: 0 15px;
width: 66.66%;
.range-separator {
padding: 0 5px;
}
}
}
.mlr-12 {
margin-left: 12px;
}
.mlr-12 + .el-button {
margin-left: 12px;
}
.table-search {
display: flex;
margin-left: auto;
.quick-search {
width: auto;
}
}
.table-search-button-group {
display: flex;
margin-left: 12px;
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
overflow: hidden;
button:focus,
button:active {
background-color: var(--ba-bg-color-overlay);
}
button:hover {
background-color: var(--el-color-info-light-7);
}
.table-search-button-item {
height: 30px;
border: none;
border-radius: 0;
}
.el-button + .el-button {
margin: 0;
}
.right-border {
border-right: 1px solid var(--el-border-color);
}
@@ -139,11 +168,14 @@ html.dark {
button:active {
background-color: var(--el-color-info-dark-2);
}
button:hover {
background-color: var(--el-color-info-light-7);
}
button {
background-color: var(--ba-bg-color-overlay);
el-icon {
color: white !important;
}

1
src/components/table/index.vue
View File

@@ -36,7 +36,6 @@
/>
</template>
</Column>
<slot name="columnAppend"></slot>
</el-table>
<div v-if="props.pagination" class="table-pagination">
<el-pagination

96
src/layouts/admin/index.vue
View File

@@ -50,11 +50,103 @@ const init = () => {
/**
* 后台初始化请求，获取站点配置，动态路由等信息
*/
const arr = [
{
id: 1,
pid: 0,
type: 'menu',
title: '控制台',
name: 'dashboard',
path: 'dashboard',
icon: 'fa fa-dashboard',
menu_type: 'tab',
url: '',
component: '/src/views/dashboard/index.vue',
keepalive: 'dashboard',
extend: 'none',
children: [
{
id: 94,
pid: 1,
type: 'button',
title: '查看',
name: 'dashboard/index',
path: '',
icon: '',
menu_type: null,
url: '',
component: '',
keepalive: 0,
extend: 'none'
}
]
},
{
id: 3,
pid: 0,
type: 'menu',
title: '测试1',
name: 'test',
path: 'test',
icon: 'fa fa-dashboard',
menu_type: 'tab',
url: '',
component: '/src/views/dashboard/test.vue',
keepalive: 'test',
extend: 'none'
},
{
id: 2,
pid: 0,
type: 'menu_dir',
title: '权限管理',
name: 'auth',
path: 'auth',
icon: 'fa fa-group',
menu_type: null,
url: '',
component: '',
keepalive: 0,
extend: 'none',
children: [
{
id: 3,
pid: 2,
type: 'menu',
title: '角色管理',
name: 'auth/role',
path: 'auth/role',
icon: 'fa fa-group',
menu_type: 'tab',
url: '',
component: '/src/views/auth/role.vue',
keepalive: 'auth/role',
extend: 'none',
children: []
},
{
id: 13,
pid: 2,
type: 'menu',
title: '菜单规则管理',
name: 'auth/menu',
path: 'auth/menu',
icon: 'el-icon-Grid',
menu_type: 'tab',
url: '',
component: '/src/views/auth/menu/index.vue',
keepalive: 'auth/menu',
extend: 'none',
children: []
}
]
}
]
getRouteMenu().then((res: any) => {
const handlerMenu = (data: any) => {
data.forEach((item: any) => {
item.path = item.routeName || item.title
item.name = item.routeName || item.title
item.name = item.title
item.component = '/src/views/dashboard/index.vue'
item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
@@ -64,7 +156,7 @@ const init = () => {
})
}
handlerMenu(res.data)
handleAdminRoute(res.data)
handleAdminRoute([...arr, ...res.data])
// 预跳转到上次路径
if (route.params.to) {

22
src/utils/tableStore.ts
View File

@@ -15,6 +15,8 @@ export default class TableStore {
public url
public pk
public method: Method
public initData: any = null
public table: CnTable = reactive({
ref: null,
selection: [],
@@ -37,6 +39,10 @@ export default class TableStore {
}
index() {
// 重置用的数据数据
if (!this.initData) {
this.initData = JSON.parse(JSON.stringify(this.table.params))
}
createAxios(
Object.assign(
{
@@ -59,6 +65,21 @@ export default class TableStore {
*/
onTableAction = (event: string, data: anyObj) => {
const actionFun = new Map([
[
'search',
() => {
this.table.params.pageNum = 1
this.index()
}
],
[
'reset',
() => {
delete this.initData.pageSize
Object.assign(this.table.params, this.initData)
this.index()
}
],
[
'selection-change',
() => {
@@ -91,7 +112,6 @@ export default class TableStore {
}
]
])
const action = actionFun.get(event) || actionFun.get('default')
action!.call(this)
}

66
src/views/auth/menu/index.vue
View File

@@ -1,53 +1,24 @@
<template>
<TableHeader>
<template v-slot:select>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
<el-form-item label="Activity name">
<el-input />
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary">新增</el-button>
<el-button type='primary' @click='addMenu'>新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef" :pagination="false" />
<Table ref='tableRef' :pagination='false' />
<popupForm ref='popupRef'></popupForm>
</template>
<script setup lang="ts">
<script setup lang='ts'>
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import popupForm from './popupForm.vue'
defineOptions({
name: 'auth/menu'
})
const tableRef = ref()
const popupRef = ref()
const tableStore = new TableStore({
url: '/user-boot/function/functionTree',
column: [
@@ -71,7 +42,26 @@ const tableStore = new TableStore({
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'tipButton'
render: 'tipButton',
click: (row) => {
popupRef.value.open('编辑菜单', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText:'确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该菜单吗？',
},
click: (row) => {
popupRef.value.open('编辑菜单', row)
}
}
]
}
@@ -83,4 +73,8 @@ onMounted(() => {
tableStore.table.ref = tableRef.value
tableStore.index()
})
const addMenu = () => {
console.log(popupRef)
popupRef.value.open('新增菜单')
}
</script>

34
src/views/auth/menu/popupForm.vue
View File

@@ -0,0 +1,34 @@
<template>
<el-dialog
class='ba-operate-dialog'
v-model='dialogVisible'
:title='title'
>
<span>This is a message</span>
<template #footer>
<span class='dialog-footer'>
<el-button @click='dialogVisible = false'>取消</el-button>
<el-button type='primary' @click='submit'>
确认
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
}
const submit = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>