wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化表格显隐功能

Browse Source
This commit is contained in:
不做码农 2022-09-27 20:22:22 +08:00
parent e0a8a25b22
commit d1295e55cc
5 changed files with 109 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/RightToolbar/index.vue
View File

@ -1,15 +1,17 @@
<template>
<div class="top-right-btn">
<el-dropdown :hide-on-click="false" style="margin-right: 10px" trigger="click">
<el-button circle icon="menu" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in data" :key="index">
<el-checkbox v-model="item.visible" :label="item.label"></el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="data">
<el-dropdown :hide-on-click="false" style="margin-right: 10px" trigger="click">
<el-button circle icon="menu" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in data" :key="index">
<el-checkbox v-model="item.visible" :label="item.label"></el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</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>

15
src/main.js
View File

@ -22,8 +22,8 @@ import elementIcons from '@/components/SvgIcon/svgicon'
import './permission' // permission control
import { getConfigKey } from "@/api/system/config";
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from '@/api/system/config'
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(
import.meta.env.VITE_APP_SOCKET_API)
signalR.init(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')

11
src/plugins/index.js
View File

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

12
src/utils/validate.js
View File

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

86
src/views/system/user/index.vue
View File

@ -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="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="部门" align="center" key="deptName" prop="deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
<el-table-column label="状态" align="center" key="status">
<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.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" width="150" class-name="small-padding fixed-width">
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.showColumn('createTime')" width="160"></el-table-column>
<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: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
{ key: 0, label: `用户编号`, visible: true, prop: 'userId' },
{ key: 1, label: `用户名称`, visible: true, prop: 'userName' },
{ key: 2, label: `用户昵称`, visible: true, prop: 'nickName' },
{ key: 3, label: `部门`, visible: true, prop: 'deptName' },
{ key: 4, label: `手机号码`, visible: true, prop: 'phonenumber' },
{ key: 5, label: `状态`, visible: true, prop: 'status' },
{ 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>