perf: 优化组件引入

admin_2/src/components/TableHeader.vue → admin_2/src/components/TableHeader/TableHeader.vue

 <template>
   <div class="table-header">
     <div class="header-left">
-      <slot name="left"></slot>
+      <slot name="operation"></slot>
     </div>
     <div class="header-right">
-      <slot name="right"></slot>
+      <slot name="search"></slot>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  name: 'TableHeader'
+};
 </script>
 
 <style lang="less" scoped>

admin_2/src/components/autoRegister/Pagination.vue → admin_2/src/components/YPagination/YPagination.vue

@@ -18,37 +18,37 @@
 </template>
 
 <script>
-import { pageSizeOptions } from "@/config";
+import { pageSizeOptions } from '@/config';
 export default {
-  name: "Pagination",
+  name: 'YPagination',
   props: {
     total: {
       required: true,
       type: Number,
-      default: 0,
+      default: 0
     },
     pageSize: {
       required: true,
       type: Number,
-      default: 10,
+      default: 10
     },
     page: {
       required: true,
       type: Number,
-      default: 1,
+      default: 1
     },
     layout: {
       type: String,
-      default: "total,prev,pager,next,sizes,jumper",
+      default: 'total,prev,pager,next,sizes,jumper'
     },
     pageSizes: {
       type: Array,
-      default: () => pageSizeOptions,
+      default: () => pageSizeOptions
     },
     background: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   data() {
     return {};
@@ -59,17 +59,17 @@ export default {
         return this.pageSize;
       },
       set(value) {
-        this.$emit("update:pageSize", value);
-      },
+        this.$emit('update:pageSize', value);
+      }
     },
     current: {
       get() {
         return this.page;
       },
       set(value) {
-        this.$emit("update:page", value);
-      },
-    },
+        this.$emit('update:page', value);
+      }
+    }
   },
   methods: {
     changePagination(cur) {
@@ -77,16 +77,16 @@ export default {
       if (this.$listeners.change) {
         this.$listeners.change();
       }
-      this.$emit("currentChange", cur);
+      this.$emit('currentChange', cur);
     },
     changeSize(size) {
       this.PageSize = size;
       if (this.$listeners.change) {
         this.$listeners.change();
       }
-      this.$emit("sizeChange", size);
-    },
-  },
+      this.$emit('sizeChange', size);
+    }
+  }
 };
 </script>
 

admin_2/src/main.js

-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
 // UI
-import ElementUI from "element-ui";
-import "element-ui/lib/theme-chalk/index.css";
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-import { message } from "@/utils/resetMessage";
+import { message } from '@/utils/resetMessage';
 Vue.prototype.$message = message;
-import ElImageViewer from "element-ui/packages/image/src/image-viewer";
-Vue.component("ElImageViewer", ElImageViewer);
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
+Vue.component('ElImageViewer', ElImageViewer);
 // 公共样式
-import "@/assets/css/normalize.css";
-import "@/assets/css/reset.css";
-import "@/assets/css/common.less";
-import "@/assets/css/tailwindcss.css";
+import '@/assets/css/normalize.css';
+import '@/assets/css/reset.css';
+import '@/assets/css/common.less';
+import '@/assets/css/tailwindcss.css';
 
 // nprogress样式
 // import "nprogress/nprogress.css";
@@ -22,41 +22,39 @@ import "@/assets/css/tailwindcss.css";
 Vue.prototype.$bus = new Vue();
 
 // moment 时间处理
-import moment from "moment";
+import moment from 'moment';
 Vue.prototype.$moment = moment;
 // 全局过滤器
-import * as filters from "@/filters";
+import * as filters from '@/filters';
 Object.keys(filters).forEach((key) => {
   Vue.filter(key, filters[key]);
 });
 // 引入注册全局指令
-import * as directives from "@/directive";
-Object.keys(directives).forEach((name) =>
-  Vue.directive(name, directives[name])
-);
+import * as directives from '@/directive';
+Object.keys(directives).forEach((name) => Vue.directive(name, directives[name]));
 // 引入echarts
-import * as echarts from "echarts";
+import * as echarts from 'echarts';
 Vue.prototype.$echarts = echarts;
 // swiper
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css';
 // 注册全局组件
-import customComponents from "@/components";
+import customComponents from '@/components/autoRegister';
 Vue.use(customComponents);
 // 重置表单
-import { resetForm, clearSelection } from "@/utils";
+import { resetForm, clearSelection } from '@/utils';
 Vue.prototype.$resetForm = resetForm;
 Vue.prototype.$clearSelection = clearSelection;
 
 // 深拷贝
-import { cloneDeep } from "lodash-es";
+import { cloneDeep } from 'lodash-es';
 Vue.prototype.$cloneDeep = cloneDeep;
 
-import DatePicker from "@/pages/engineSearch/components/date-picker";
+import DatePicker from '@/pages/engineSearch/components/date-picker';
 Vue.use(DatePicker);
 
 Vue.config.productionTip = false;
 new Vue({
   router,
   store,
-  render: (h) => h(App),
-}).$mount("#app");
+  render: (h) => h(App)
+}).$mount('#app');

admin_2/src/pages/engine/Engine.vue

@@ -46,7 +46,11 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import YDatePicker from '@/components/YDatePicker/YDatePicker.vue';
 export default {
+  components: {
+    YDatePicker
+  },
   data() {
     return {
       time: [this.$moment().format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')]

admin_2/src/pages/engine/EvaluateSystem.vue

@@ -2,7 +2,7 @@
   <div class="grid h-full w-full grid-cols-2 gap-[20px]">
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="大厅评价量统计"
           border
@@ -14,19 +14,19 @@
           type="hall"
           @export="exportHallEva"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="hallSearch.total"
         :page.sync="hallSearch.page"
         :pageSize.sync="hallSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getHallEva"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="评价选项统计"
           border
@@ -40,19 +40,19 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="pjOptionSearch.total"
         :page.sync="pjOptionSearch.page"
         :pageSize.sync="pjOptionSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getPjOptionEva"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="部门评价量统计"
           border
@@ -66,19 +66,19 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="deptSearch.total"
         :page.sync="deptSearch.page"
         :pageSize.sync="deptSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getDeptEva"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="窗口评价量统计"
           border
@@ -92,28 +92,30 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="windowSearch.total"
         :page.sync="windowSearch.page"
         :pageSize.sync="windowSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getWindowEva"
-      ></Pagination>
+      ></y-pagination>
     </div>
   </div>
 </template>
 
 <script>
 import DoubleTable from './components/DoubleTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getEvaSystemList } from '@/api/engine';
 import { export2Excel } from '@/utils/exportExcel';
 import { dataSection } from '@/utils';
 import storage from '@/utils/storage';
 export default {
   components: {
-    DoubleTable
+    DoubleTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/engine/QueueUpSystem.vue

@@ -2,7 +2,7 @@
   <div class="grid h-full w-full grid-cols-2 gap-[20px]">
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="大厅取号量统计"
           border
@@ -14,19 +14,19 @@
           type="hall"
           @export="exportHallQueue"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="hallSearch.total"
         :page.sync="hallSearch.page"
         :pageSize.sync="hallSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getHallQueue"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="业务取号量统计"
           border
@@ -40,19 +40,19 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="businessSearch.total"
         :page.sync="businessSearch.page"
         :pageSize.sync="businessSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getBusinessQueue"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="部门取号量统计"
           border
@@ -66,19 +66,19 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="deptSearch.total"
         :page.sync="deptSearch.page"
         :pageSize.sync="deptSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getDeptQueue"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <div class="table-item">
       <div>
-        <DoubleTable
+        <double-table
           :dict="dict"
           title="窗口取号量统计"
           border
@@ -92,28 +92,30 @@
           @search="handleSearch"
           hasPermiQuery="engine:queueupsystem:query"
           hasPermiExport="engine:queueupsystem:export"
-        ></DoubleTable>
+        ></double-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="windowSearch.total"
         :page.sync="windowSearch.page"
         :pageSize.sync="windowSearch.size"
         layout="total,prev,pager,next,jumper"
         @change="getWindowQueue"
-      ></Pagination>
+      ></y-pagination>
     </div>
   </div>
 </template>
 
 <script>
 import DoubleTable from './components/DoubleTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getQueueSystemList } from '@/api/engine';
 import { export2Excel } from '@/utils/exportExcel';
 import { dataSection } from '@/utils';
 import storage from '@/utils/storage';
 export default {
   components: {
-    DoubleTable
+    DoubleTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/engine/components/DoubleTable.vue

@@ -103,7 +103,11 @@
 
 <script>
 import storage from '@/utils/storage';
+import YTable from '@/components/YTable/YTable.vue';
 export default {
+  components: {
+    YTable
+  },
   props: {
     data: {
       required: true,

admin_2/src/pages/engineSearch/EvaluateData.vue

@@ -5,16 +5,16 @@
       class="main flex w-full flex-1 items-center justify-center rounded-[4px] bg-white p-[20px]"
     >
       <div class="h-full w-full">
-        <TableHeader>
+        <table-header>
           <el-button
             size="small"
-            slot="left"
+            slot="operation"
             type="primary"
             :loading="exportLoading"
             @click="exportExcel"
             >导出</el-button
           >
-        </TableHeader>
+        </table-header>
         <div>
           <y-table
             ref="MyTable"
@@ -28,12 +28,12 @@
             @selection-change="handleSelectionChange"
           ></y-table>
         </div>
-        <Pagination
+        <y-pagination
           :total="total"
           :page.sync="page"
           :pageSize.sync="size"
           @change="getEvaStatList"
-        ></Pagination>
+        ></y-pagination>
       </div>
       <!-- <el-empty
         v-else
@@ -46,7 +46,9 @@
 
 <script>
 import Search from './components/Search.vue';
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getEvaStatList } from '@/api/engine';
 import { formatSeconds, dataSection } from '@/utils';
 import { export2Excel } from '@/utils/exportExcel';
@@ -54,7 +56,9 @@ import storage from '@/utils/storage';
 export default {
   components: {
     Search,
-    TableHeader
+    TableHeader,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/engineSearch/QueueUpData.vue

@@ -5,16 +5,16 @@
       class="main flex w-full flex-1 items-center justify-center rounded-[4px] bg-white p-[20px]"
     >
       <div class="h-full w-full">
-        <TableHeader>
+        <table-header>
           <el-button
             size="small"
-            slot="left"
+            slot="operation"
             type="primary"
             :loading="exportLoading"
             @click="exportExcel"
             >导出</el-button
           >
-        </TableHeader>
+        </table-header>
         <div>
           <y-table
             ref="MyTable"
@@ -28,12 +28,12 @@
             @selection-change="handleSelectionChange"
           ></y-table>
         </div>
-        <Pagination
+        <y-pagination
           :total="total"
           :page.sync="page"
           :pageSize.sync="size"
           @change="getQueueStatList"
-        ></Pagination>
+        ></y-pagination>
       </div>
       <!-- <el-empty
         v-else
@@ -46,7 +46,9 @@
 
 <script>
 import Search from './components/Search.vue';
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getQueueStatList } from '@/api/engine';
 import { formatSeconds, dataSection } from '@/utils';
 import { export2Excel } from '@/utils/exportExcel';
@@ -54,7 +56,9 @@ import storage from '@/utils/storage';
 export default {
   components: {
     Search,
-    TableHeader
+    TableHeader,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/market/EvaluateReport.vue

@@ -159,12 +159,12 @@
           @selection-change="handleSelectionChange"
         ></y-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="total"
         :page.sync="page"
         :size.sync="size"
         @change="getEvaluateList"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <!-- 详情 -->
     <EvaluateDetails :show.sync="show" :info="detailsInfo"></EvaluateDetails>
@@ -172,6 +172,9 @@
 </template>
 
 <script>
+import YDatePicker from '@/components/YDatePicker/YDatePicker.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import EvaluateDetails from './components/EvaluateDetails.vue';
 import { getEvaluateList } from '@/api/market';
 import { getDepartment, getHall } from '@/api/site';
@@ -185,6 +188,9 @@ let searchType = {
 };
 export default {
   components: {
+    YDatePicker,
+    YTable,
+    YPagination,
     EvaluateDetails
   },
   props: {

admin_2/src/pages/market/Market.vue

 <template>
   <div class="flex h-full w-full gap-5">
     <div class="area-tree-box flex h-full w-[20%] flex-col rounded-[4px] bg-white">
-      <TabHeader icon="el-icon-notebook-2" label="组织架构"></TabHeader>
+      <tab-header icon="el-icon-notebook-2" label="组织架构"></tab-header>
       <div class="w-full flex-1 overflow-auto p-[20px]">
-        <AreaTree @change="changeSite"></AreaTree>
+        <area-tree @change="changeSite"></area-tree>
       </div>
     </div>
     <div class="flex h-full flex-1 flex-col bg-white">
@@ -24,7 +24,13 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import TabHeader from '@/components/TabHeader/TabHeader.vue';
+import AreaTree from '@/components/AreaTree/AreaTree.vue';
 export default {
+  components: {
+    TabHeader,
+    AreaTree
+  },
   data() {
     return {
       curTreeData: {} // 当前选择的站点

admin_2/src/pages/market/QueueUpReport.vue

@@ -130,12 +130,12 @@
           @selection-change="handleSelectionChange"
         ></y-table>
       </div>
-      <Pagination
+      <y-pagination
         :total="total"
         :page.sync="page"
         :pageSize.sync="size"
         @change="getQueueList"
-      ></Pagination>
+      ></y-pagination>
     </div>
     <!-- 详情 -->
     <QueueUpDetails :show.sync="show" :info="detailsInfo"></QueueUpDetails>
@@ -143,6 +143,9 @@
 </template>
 
 <script>
+import YDatePicker from '@/components/YDatePicker/YDatePicker.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import QueueUpDetails from './components/QueueUpDetails.vue';
 let searchType = {
   business: '按业务',
@@ -157,6 +160,9 @@ import { formatSeconds, dataSection } from '@/utils';
 import { export2Excel } from '@/utils/exportExcel';
 export default {
   components: {
+    YDatePicker,
+    YTable,
+    YPagination,
     QueueUpDetails
   },
   props: {

admin_2/src/pages/system/System.vue

 <template>
   <div class="system">
-    <TabMenuBar></TabMenuBar>
+    <tab-menu-bar></tab-menu-bar>
   </div>
 </template>
 
 <script>
+import TabMenuBar from '@/components/TabMenuBar/TabMenuBar.vue';
 export default {
+  components: { TabMenuBar },
   data() {
     return {
       subMenus: []

admin_2/src/pages/system/access/Access.vue

 <template>
   <div class="h-full w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button size="small" type="primary" v-hasPermi="['system:access:add']" @click="handleAdd"
           >新增</el-button
         >
@@ -13,7 +13,7 @@
           >批量删除</el-button
         >
       </div>
-      <div slot="right" v-hasPermi="['system:access:query']">
+      <div slot="search" v-hasPermi="['system:access:query']">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="areaName">
             <el-input
@@ -33,7 +33,7 @@
           </el-form-item>
         </el-form>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -48,12 +48,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getAccessList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增 -->
     <AddAccess
       ref="AddAccess"
@@ -71,7 +71,9 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import AddAccess from './components/AddAccess.vue';
 import AccessSystem from './components/AccessSystem.vue';
 import { getAccessList, delAccess } from '@/api/system';
@@ -79,7 +81,9 @@ export default {
   components: {
     TableHeader,
     AddAccess,
-    AccessSystem
+    AccessSystem,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/access/components/AddAccess.vue

@@ -37,13 +37,13 @@
           </div>
         </el-form-item>
         <el-form-item label="背景图片" prop="bigPath">
-          <YUpload
+          <y-upload
             accept=".png,.gif,.jpeg,.jpg"
             :limit="1"
             list-type="picture-card"
             :fileList="bigPathList"
             v-model="form.bigPath"
-          ></YUpload>
+          ></y-upload>
         </el-form-item>
         <el-form-item label="对接日期" prop="accessTime">
           <el-date-picker
@@ -91,9 +91,11 @@
 import { mapState } from 'vuex';
 import { saveAccess } from '@/api/system';
 import InputTree from './InputTree.vue';
+import YUpload from '@/components/YUpload/YUpload.vue';
 export default {
   components: {
-    InputTree
+    InputTree,
+    YUpload
   },
   props: {
     title: {

admin_2/src/pages/system/areaSystem/AreaSystem.vue

 <template>
   <div class="h-full w-full">
     <TableHeader>
-      <div slot="left">
+      <div slot="operation">
         <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
         <el-button size="small" type="danger" @click="handleDelAll">批量删除</el-button>
       </div>
-      <div slot="right">
+      <div slot="search">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="systemName">
             <el-input
@@ -40,12 +40,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getSystemList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增 -->
     <AddAreaSystem
       ref="AddAreaSystem"
@@ -57,13 +57,17 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getSystemList, deleteSystem } from '@/api/system';
 import AddAreaSystem from './components/AddAreaSystem.vue';
 export default {
   components: {
     TableHeader,
-    AddAreaSystem
+    AddAreaSystem,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/menu/Menu.vue

 <template>
   <div class="h-full w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button size="small" type="primary" v-hasPermi="['system:menu:add']" @click="handleAdd"
           >新增</el-button
         >
@@ -31,7 +31,7 @@
           </el-form-item>
         </el-form>
       </div> -->
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -47,13 +47,13 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       layout="total,prev,pager,next"
       @change="getMenuList"
-    ></Pagination>
+    ></y-pagination>
     <AddMenu
       ref="AddMenu"
       :show.sync="show"
@@ -66,14 +66,18 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import AddMenu from './components/AddMenu.vue';
 import { getMenuList, deleteMenu, saveMenu, changeMenuSort } from '@/api/system';
 import { buildTree } from '@/utils';
 export default {
   components: {
     TableHeader,
-    AddMenu
+    AddMenu,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/parameter/Parameter.vue

 <template>
   <div class="parameter h-full w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button
           size="small"
           type="primary"
@@ -17,7 +17,7 @@
           >批量删除</el-button
         >
       </div>
-      <div slot="right" v-hasPermi="['system:parameter:query']">
+      <div slot="search" v-hasPermi="['system:parameter:query']">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="type">
             <el-select size="small" style="width: 150px" v-model="searchForm.type">
@@ -43,7 +43,7 @@
           </el-form-item>
         </el-form>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -58,12 +58,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getParamList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增参数 -->
     <AddParameter
       ref="AddParameter"
@@ -76,13 +76,17 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import AddParameter from './components/AddParameter.vue';
 import { getParamList, delParam } from '@/api/system';
 export default {
   components: {
     TableHeader,
-    AddParameter
+    AddParameter,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/resourceManage/ResourceManage.vue

 <template>
   <div class="h-full w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button
           size="small"
           type="primary"
@@ -17,7 +17,7 @@
           >批量删除</el-button
         >
       </div>
-      <div slot="right" v-hasPermi="['system:resourcemanage:query']">
+      <div slot="search" v-hasPermi="['system:resourcemanage:query']">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="authType">
             <el-select size="small" style="width: 150px" v-model="searchForm.authType">
@@ -48,7 +48,7 @@
           </el-form-item>
         </el-form>
       </div>
-    </TableHeader>
+    </table-header>
     <div class="table-content">
       <y-table
         ref="MyTable"
@@ -62,12 +62,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getResourceList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增 -->
     <AddResource
       ref="AddResource"
@@ -80,13 +80,17 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getResourceList, deleteResource } from '@/api/system';
 import AddResource from './components/AddResource.vue';
 export default {
   components: {
     TableHeader,
-    AddResource
+    AddResource,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/role/Role.vue

 <template>
   <div class="h-full w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button size="small" type="primary" v-hasPermi="['system:role:add']" @click="handleAdd"
           >新增</el-button
         >
@@ -13,7 +13,7 @@
           >批量删除</el-button
         >
       </div>
-      <div slot="right" v-hasPermi="['system:role:query']">
+      <div slot="search" v-hasPermi="['system:role:query']">
         <el-form ref="searchForm" :model="searchForm" inline>
           <el-form-item prop="name">
             <el-input
@@ -33,7 +33,7 @@
           </el-form-item>
         </el-form>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -48,12 +48,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getRoleList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增 -->
     <AddRole ref="AddRole" :show.sync="show" :title="title" @success="getRoleList"></AddRole>
     <!-- 分配资源 -->
@@ -70,7 +70,9 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getRoleList, deleteRole, getMenuTreeselect } from '@/api/system';
 import AddRole from './components/AddRole.vue';
 import ApportionRes from './components/ApportionRes.vue';
@@ -80,7 +82,9 @@ export default {
     TableHeader,
     AddRole,
     ApportionRes,
-    ApportionMenu
+    ApportionMenu,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/systemlogs/SystemLogs.vue

 <template>
   <div class="system-logs h-full w-full">
-    <TableHeader>
-      <div slot="right" class="flex" v-hasPermi="['system:systemlogs:query']">
+    <table-header>
+      <div slot="search" class="flex" v-hasPermi="['system:systemlogs:query']">
         <el-input
           size="small"
           v-model="searchVal"
@@ -13,7 +13,7 @@
         <el-button size="small" type="primary" @click="handleSearch">搜 索</el-button>
         <el-button size="small" @click="handleReset">重 置</el-button>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -27,21 +27,25 @@
         :row-key="(row) => row.id"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getlogsList"
-    ></Pagination>
+    ></y-pagination>
   </div>
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import { getlogsList } from '@/api/system';
 export default {
   components: {
-    TableHeader
+    TableHeader,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/task/TaskSet.vue

 <template>
   <div class="task-set h-ull w-full">
-    <TableHeader>
-      <div slot="left">
+    <table-header>
+      <div slot="operation">
         <el-button size="small" type="primary" v-hasPermi="['system:task:add']" @click="handleAdd"
           >新增任务</el-button
         >
@@ -13,7 +13,7 @@
           >批量删除</el-button
         >
       </div>
-      <div slot="right" class="flex" v-hasPermi="['system:task:query']">
+      <div slot="search" class="flex" v-hasPermi="['system:task:query']">
         <el-input
           size="small"
           v-model="searchVal"
@@ -25,7 +25,7 @@
         <el-button size="small" type="primary" @click="handleSearch">搜 索</el-button>
         <el-button size="small" @click="handleReset">重 置</el-button>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -40,12 +40,12 @@
         @selection-change="handleSelectionChange"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getTaskList"
-    ></Pagination>
+    ></y-pagination>
     <!-- 新增参数 -->
     <AddTask
       ref="AddTask"
@@ -58,13 +58,17 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import AddTask from './components/AddTask.vue';
 import { getTaskList, delTask } from '@/api/system';
 export default {
   components: {
     TableHeader,
-    AddTask
+    AddTask,
+    YTable,
+    YPagination
   },
   data() {
     return {

admin_2/src/pages/system/user/User.vue

 <template>
   <div class="h-full w-full">
-    <TableHeader>
-      <div slot="right" v-hasPermi="['system:user:query']">
+    <table-header>
+      <div slot="search" v-hasPermi="['system:user:query']">
         <el-form ref="searchForm" :model="searchForm" inline size="small">
           <el-form-item prop="type">
             <el-select style="width: 120px" v-model="searchForm.type" placeholder="请选择">
@@ -26,7 +26,7 @@
           </el-form-item>
         </el-form>
       </div>
-    </TableHeader>
+    </table-header>
     <!-- 表格 -->
     <div class="table-content">
       <y-table
@@ -40,12 +40,12 @@
         :row-key="(row) => row.id"
       ></y-table>
     </div>
-    <Pagination
+    <y-pagination
       :total="total"
       :page.sync="page"
       :pageSize.sync="size"
       @change="getUserList"
-    ></Pagination>
+    ></y-pagination>
 
     <!-- 分配角色 -->
     <AddUserRole ref="AddUserRole" :show.sync="show" @success="getUserList"></AddUserRole>
@@ -53,7 +53,9 @@
 </template>
 
 <script>
-import TableHeader from '@/components/TableHeader.vue';
+import TableHeader from '@/components/TableHeader/TableHeader.vue';
+import YTable from '@/components/YTable/YTable.vue';
+import YPagination from '@/components/YPagination/YPagination.vue';
 import AddUserRole from './components/AddUserRole.vue';
 import { getUserList } from '@/api/system';
 let typeList = {
@@ -64,7 +66,9 @@ let typeList = {
 export default {
   components: {
     TableHeader,
-    AddUserRole
+    AddUserRole,
+    YTable,
+    YPagination
   },
   data() {
     return {