✨ Introducing new features. 增加显示隐藏搜索，增加ele icon 组件

src/components/RightToolbar/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="top-right-btn" :style="style">
+    <el-row>
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+        <el-button circle icon="Search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button circle icon="Refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button circle icon="Menu" @click="showColumn()" />
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" v-model="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+
+const props = defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  columns: {
+    type: Array,
+  },
+  search: {
+    type: Boolean,
+    default: true,
+  },
+  gutter: {
+    type: Number,
+    default: 10,
+  },
+})
+
+const emits = defineEmits(['update:showSearch', 'queryTable']);
+
+// 显隐数据
+const value = ref([]);
+// 弹出层标题
+const title = ref("显示/隐藏");
+// 是否显示弹出层
+const open = ref(false);
+
+const style = computed(() => {
+  const ret = {};
+  if (props.gutter) {
+    ret.marginRight = `${props.gutter / 2}px`;
+  }
+  return ret;
+});
+
+// 搜索
+function toggleSearch() {
+  emits("update:showSearch", !props.showSearch);
+}
+
+// 刷新
+function refresh() {
+  emits("queryTable");
+}
+
+// 右侧列表元素变化
+function dataChange(data) {
+  for (let item in props.columns) {
+    const key = props.columns[item].key;
+    props.columns[item].visible = !data.includes(key);
+  }
+}
+
+// 打开显隐列dialog
+function showColumn() {
+  open.value = true;
+}
+
+// 显隐列初始默认隐藏列
+for (let item in props.columns) {
+  if (props.columns[item].visible === false) {
+    value.value.push(parseInt(item));
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+:deep(.el-transfer__button) {
+  border-radius: 50%;
+  display: block;
+  margin-left: 0px;
+}
+:deep(.el-transfer__button:first-child) {
+  margin-bottom: 10px;
+}
+
+.my-el-transfer {
+  text-align: center;
+}
+</style>

src/components/svgIcon/svgicon.ts

@@ -0,0 +1,10 @@
+import * as components from '@element-plus/icons-vue'
+import type { App } from 'vue';
+export default {
+    install: (app: App) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};

src/main.ts

@@ -8,6 +8,7 @@ import other from '/@/utils/other';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import elementIcons from '/@//components/svgIcon/svgicon'
 import '/@/theme/index.scss';
 import VueGridLayout from 'vue-grid-layout';
 
@@ -15,5 +16,4 @@ const app = createApp(App);
 
 directive(app);
 other.elSvg(app);
-
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).mount('#app');
+app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(elementIcons).use(i18n).use(VueGridLayout).mount('#app');

src/views/system/user/index.vue

@@ -12,21 +12,22 @@
       </el-col>
       <el-col :span="20" :xs="24">
         <el-card shadow="hover" class="layout-padding-auto">
-          <div class="system-user-search mb15">
-            <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="state.queryForm.username"> </el-input>
-            <el-button size="default" type="primary" class="ml10" @click="getDataList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" type="success" class="ml10" @click="userDialogRef.openDialog('add')">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增用户
-            </el-button>
-          </div>
+          <el-row v-show="showSearch">
+            <div class="mb15">
+              <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px" v-model="state.queryForm.username"> </el-input>
+              <el-button size="default" icon="search" type="primary" class="ml10" @click="getDataList">
+                查询
+              </el-button>
+            </div>
+          </el-row>
+          <el-row style="margin-top: 20px">
+            <div class="mb15" style="width: 100%">
+              <el-button size="default" icon="folder-add" type="success" class="ml10" @click="userDialogRef.openDialog('add')">
+                新增用户
+              </el-button>
+              <right-tool-bar  v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px" @queryTable="getDataList"></right-tool-bar>
+            </div>
+          </el-row>
           <el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
             <el-table-column type="index" label="序号" width="60" />
             <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
@@ -74,7 +75,7 @@
 </template>
 
 <script setup lang="ts" name="systemUser">
-import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
+import {defineAsyncComponent, reactive, onMounted, ref, Ref} from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { pageList, delObj } from '/@/api/admin/user'
 import { depttree } from '/@/api/admin/dept'
@@ -84,10 +85,13 @@ import {BasicTableProps, useTable} from '/@/hooks/table'
 const UserDialog = defineAsyncComponent(() => import('./form.vue'));
 const pagination = defineAsyncComponent(() =>  import('/@/components/Pagination/index.vue'))
 const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
+const RightToolBar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
 
 // 定义变量内容
 const userDialogRef = ref();
 
+const showSearch : Ref<Boolean> = ref(true)
+
 // 定义表格查询、后台调用的API
 const state: BasicTableProps = reactive<BasicTableProps>({
   queryForm: {