优化表格显隐功能

src/components/RightToolbar/index.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="top-right-btn">
-    <el-dropdown :hide-on-click="false" style="margin-right: 10px" trigger="click">
+    <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="data">
-      <el-button circle icon="menu" />
+      <el-dropdown :hide-on-click="false" style="margin-right: 10px" trigger="click">
-      <template #dropdown>
+        <el-button circle icon="menu" />
-        <el-dropdown-menu>
+        <template #dropdown>
-          <el-dropdown-item v-for="(item, index) in data" :key="index">
+          <el-dropdown-menu>
-            <el-checkbox v-model="item.visible" :label="item.label"></el-checkbox>
+            <el-dropdown-item v-for="(item, index) in data" :key="index">
-          </el-dropdown-item>
+              <el-checkbox v-model="item.visible" :label="item.label"></el-checkbox>
-        </el-dropdown-menu>
+            </el-dropdown-item>
-      </template>
+          </el-dropdown-menu>
-    </el-dropdown>
+        </template>
+      </el-dropdown>
+    </el-tooltip>
 
     <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
       <el-button circle icon="Search" @click="toggleSearch()" />
@@ -17,6 +19,7 @@
     <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="data">
       <el-button circle icon="Menu" @click="showColumn()" />
     </el-tooltip> -->
@@ -89,7 +92,7 @@ const init = () => {
     })
   }
 }
-console.log(data.value)
+
 init()
 </script>
 

src/main.js

@@ -22,8 +22,8 @@ import elementIcons from '@/components/SvgIcon/svgicon'
 
 import './permission' // permission control
 
-import { getConfigKey } from "@/api/system/config";
+import { getConfigKey } from '@/api/system/config'
-import { getDicts } from "@/api/system/dict/data";
+import { getDicts } from '@/api/system/dict/data'
 import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, download } from '@/utils/ruoyi'
 
 // 分页组件
@@ -31,19 +31,18 @@ import Pagination from '@/components/Pagination'
 // 自定义表格工具组件
 import RightToolbar from '@/components/RightToolbar'
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from '@/components/FileUpload'
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from '@/components/ImageUpload'
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from '@/components/ImagePreview'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // el-date-picker 快捷选项
 import dateOptions from '@/utils/dateOptions'
 
 const app = createApp(App)
-signalR.init(
+signalR.init(import.meta.env.VITE_APP_SOCKET_API)
-  import.meta.env.VITE_APP_SOCKET_API)
 app.config.globalProperties.signalr = signalR
 // 全局方法挂载
 app.config.globalProperties.getConfigKey = getConfigKey
@@ -67,4 +66,4 @@ app.component('svg-icon', SvgIcon)
 
 directive(app)
 
-app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).mount('#app')
+app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).mount('#app')

src/plugins/index.js

@@ -4,7 +4,7 @@ import cache from './cache'
 import modal from './modal'
 import download from './download'
 
-export default function installPlugins(app){
+export default function installPlugins(app) {
   // 页签操作
   app.config.globalProperties.$tab = tab
   // 认证对象
@@ -15,4 +15,13 @@ export default function installPlugins(app){
   app.config.globalProperties.$modal = modal
   // 下载文件
   app.config.globalProperties.$download = download
+
+  Array.prototype.showColumn = function (column) {
+    var item = this.find((x) => x.prop == column)
+    // console.log('showColumn方法', this, column, item)
+    if (item) {
+      return item.visible
+    }
+    return true
+  }
 }

src/utils/validate.js

@@ -1,9 +1,9 @@
 /**
- * 判断url是否是http或https 
+ * 判断url是否是http或https
  * @param {string} path
  * @returns {Boolean}
  */
- export function isHttp(url) {
+export function isHttp(url) {
   return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
 }
 
@@ -12,7 +12,7 @@
  * @param {string} path
  * @returns {Boolean}
  */
- export function isExternal(path) {
+export function isExternal(path) {
   return /^(https?:|mailto:|tel:)/.test(path)
 }
 
@@ -30,7 +30,8 @@ export function validUsername(str) {
  * @returns {Boolean}
  */
 export function validURL(url) {
-  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  const reg =
+    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
   return reg.test(url)
 }
 
@@ -66,7 +67,8 @@ export function validAlphabets(str) {
  * @returns {Boolean}
  */
 export function validEmail(email) {
-  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  const reg =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
   return reg.test(email)
 }
 

src/views/system/user/index.vue

@@ -76,18 +76,65 @@
 
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+          <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.showColumn('userId')" />
-          <el-table-column label="登录名" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column
-          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+            label="登录名"
-          <el-table-column label="部门" align="center" key="deptName" prop="deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+            align="center"
-          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+            key="userName"
-          <el-table-column label="状态" align="center" key="status">
+            prop="userName"
+            v-if="columns.showColumn('userName')"
+            :show-overflow-tooltip="true" />
+          <el-table-column
+            label="用户昵称"
+            align="center"
+            key="nickName"
+            prop="nickName"
+            v-if="columns.showColumn('nickName')"
+            :show-overflow-tooltip="true" />
+          <el-table-column
+            label="部门"
+            align="center"
+            key="deptName"
+            prop="deptName"
+            v-if="columns.showColumn('deptName')"
+            :show-overflow-tooltip="true" />
+          <el-table-column
+            label="手机号码"
+            align="center"
+            key="phonenumber"
+            prop="phonenumber"
+            v-if="columns.showColumn('phonenumber')"
+            width="120" />
+          <el-table-column label="状态" align="center" key="status" v-if="columns.showColumn('status')">
             <template #default="scope">
               <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
             </template>
           </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" width="160"></el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.showColumn('createTime')" width="160"></el-table-column>
-          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+          <el-table-column prop="sex" label="性别" align="center" v-if="columns.showColumn('sex')">
+            <template #default="scope">
+              <dict-tag :options="sexOptions" :value="scope.row.sex" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="avatar" label="头像地址" align="center" v-if="columns.showColumn('avatar')">
+            <template #default="scope">
+              <el-image
+                preview-teleported
+                :hide-on-click-modal="true"
+                lazy
+                class="avatar"
+                fit="contain"
+                :src="scope.row.avatar"
+                :preview-src-list="[scope.row.avatar]">
+                <div>
+                  <el-icon :size="15"><document /></el-icon>
+                </div>
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column prop="email" label="用户邮箱" align="center" v-if="columns.showColumn('email')" />
+          <el-table-column prop="loginDate" label="最后登录时间" align="center" v-if="columns.showColumn('loginDate')" />
+          <el-table-column label="操作" align="center" width="110" class-name="small-padding fixed-width">
             <template #default="scope">
               <el-button v-if="scope.row.userId !== 1" text icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">
               </el-button>
@@ -272,13 +319,17 @@ const upload = reactive({
 })
 // 列显隐信息
 const columns = ref([
-  { key: 0, label: `用户编号`, visible: true },
+  { key: 0, label: `用户编号`, visible: true, prop: 'userId' },
-  { key: 1, label: `用户名称`, visible: true },
+  { key: 1, label: `用户名称`, visible: true, prop: 'userName' },
-  { key: 2, label: `用户昵称`, visible: true },
+  { key: 2, label: `用户昵称`, visible: true, prop: 'nickName' },
-  { key: 3, label: `部门`, visible: true },
+  { key: 3, label: `部门`, visible: true, prop: 'deptName' },
-  { key: 4, label: `手机号码`, visible: true },
+  { key: 4, label: `手机号码`, visible: true, prop: 'phonenumber' },
-  { key: 5, label: `状态`, visible: true },
+  { key: 5, label: `状态`, visible: true, prop: 'status' },
-  { key: 6, label: `创建时间`, visible: true }
+  { key: 6, label: `创建时间`, visible: true, prop: 'createTime' },
+  { key: 7, label: `性别`, visible: false, prop: 'sex' },
+  { key: 8, label: `头像`, visible: false, prop: 'avatar' },
+  { key: 9, label: `邮箱`, visible: false, prop: 'email' },
+  { key: 10, label: `最后登录时间`, visible: false, prop: 'loginDate' }
 ])
 
 const data = reactive({
@@ -578,3 +629,8 @@ function selectRole(e) {
 getTreeselect()
 getList()
 </script>
+<style scoped>
+.avatar {
+  width: 40px;
+}
+</style>