表格优化

src/components/table/header/index.vue

@@ -1,44 +1,57 @@
 <template>
     <!-- 通用搜索 -->
-    <transition name="el-zoom-in-bottom" mode="out-in">
+    <transition name='el-zoom-in-bottom' mode='out-in' v-if='$slots.select'>
-        <div class="table-com-search" v-if="isShowSelect">
+        <div class='table-com-search' v-if='showSelect'>
-            <el-form @submit.prevent="" @keyup.enter="onComSearch" label-position="left" :inline="true">
+            <el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
-                <slot name="select"></slot>
+                <slot name='select'></slot>
                 <el-form-item>
-                    <el-button  @click="onComSearch" type="primary">查询</el-button>
+                    <el-button @click='onComSearch' type='primary'>查询</el-button>
-                    <el-button @click="onResetForm">重置</el-button>
+                    <el-button @click='onResetForm'>重置</el-button>
                 </el-form-item>
             </el-form>
         </div>
     </transition>
 
-    <div class="table-header ba-scroll-style">
+    <div class='table-header ba-scroll-style'>
-        <slot name="operation"></slot>
+        <slot name='operation'></slot>
         <!-- 右侧搜索框和工具按钮 -->
-        <div class="table-search">
+        <div class='table-search' v-if='$slots.select'>
-            <div class="table-search-button-group">
+            <div class='table-search-button-group'>
-                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelect">
+                <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
-                        <Icon size="14" name="el-icon-Search" />
+                    <Icon size='14' name='el-icon-Search' />
-                    </el-button>
+                </el-button>
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
-import { inject,ref } from 'vue'
+import { inject, ref } from 'vue'
 import type TableStore from '@/utils/tableStore'
 
 const tableStore = inject('tableStore') as TableStore
-const isShowSelect = ref(false)
+
-const showSelect = () => {
+interface Props {
-    isShowSelect.value = !isShowSelect.value
+    // 默认展开
+    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;
             }

src/components/table/index.vue

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

src/layouts/admin/index.vue

@@ -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) {

src/utils/tableStore.ts

@@ -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)
     }

src/views/auth/menu/index.vue

@@ -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>

src/views/auth/menu/popupForm.vue

@@ -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>