admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(所有页面): ♻️ 所有页面的表格列宽优化

Browse Source
This commit is contained in:
猿小天
2023-04-10 09:45:25 +08:00
committed by H0nGzA1
parent a50f73d466
commit 175b151f7f
10 changed files with 190 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/utils/service.ts
View File

@@ -62,10 +62,10 @@ function createService() {
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 400:
Local.clear();
Session.clear();
// Local.clear();
// Session.clear();
errorCreate(`${dataAxios.msg}: ${response.config.url}`);
window.location.reload();
// window.location.reload();
break;
case 401:
Local.clear();

18
web/src/views/system/areas/crud.tsx
View File

@@ -105,8 +105,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
show: true,
},
treeNode: true,
width: 160,
type: 'input',
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -123,6 +125,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
show: true,
},
type: 'input',
column:{
minWidth: 90,
},
form: {
rules: [
// 表单校验规则
@@ -139,6 +144,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
type: 'input',
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -155,6 +163,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
type: 'input',
column:{
minWidth: 100,
},
form: {
disabled: false,
rules: [
@@ -168,6 +179,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
initials: {
title: '首字母',
column:{
minWidth: 100,
},
form: {
rules: [
// 表单校验规则
@@ -184,9 +198,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: {
show: true,
},
width: 90,
type: 'dict-radio',
column: {
minWidth:90,
component: {
name: 'fs-dict-switch',
activeText: '',

12
web/src/views/system/dictionary/crud.tsx
View File

@@ -111,6 +111,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
},
},
type: 'input',
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -135,6 +138,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
},
},
type: 'input',
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -155,12 +161,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
},
status: {
title: '状态',
width: 90,
search: {
show: true,
},
type: 'dict-radio',
column: {
minWidth: 90,
component: {
name: 'fs-dict-switch',
activeText: '',
@@ -181,8 +187,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
},
sort: {
title: '排序',
width: 90,
type: 'number',
column:{
minWidth: 80,
},
form: {
value: 1,
},

10
web/src/views/system/fileList/crud.tsx
View File

@@ -94,6 +94,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
show: true,
},
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入文件名称',
@@ -106,13 +109,18 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: {
disabled: true,
},
column:{
minWidth: 200,
},
},
md5sum: {
title: '文件MD5',
width: 200,
search: {
disabled: true,
},
column:{
minWidth: 120,
},
form: {
disabled: false,
},

61
web/src/views/system/log/loginLog/crud.tsx
View File

@@ -31,6 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
},
rowHandle: {
fixed:'right',
width: 100,
buttons: {
view: {
@@ -89,8 +90,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: {
disabled: false,
},
width: 140,
type: 'input',
column:{
minWidth: 120,
},
form: {
disabled: true,
component: {
@@ -103,8 +106,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: {
disabled: false,
},
width: 130,
type: 'input',
column:{
minWidth: 120,
},
form: {
disabled: true,
component: {
@@ -118,8 +123,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
disabled: true,
width: 180,
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入运营商',
@@ -128,8 +135,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
continent: {
title: '大州',
width: 80,
type: 'input',
column:{
minWidth: 90,
},
form: {
disabled: true,
component: {
@@ -140,8 +149,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
country: {
title: '国家',
width: 80,
type: 'input',
column:{
minWidth: 90,
},
form: {
component: {
placeholder: '请输入国家',
@@ -151,8 +162,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
province: {
title: '省份',
width: 80,
type: 'input',
column:{
minWidth: 80,
},
form: {
component: {
placeholder: '请输入省份',
@@ -162,8 +175,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
city: {
title: '城市',
width: 80,
type: 'input',
column:{
minWidth: 80,
},
form: {
component: {
placeholder: '请输入城市',
@@ -174,8 +189,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
district: {
title: '县区',
key: '',
width: 80,
type: 'input',
column:{
minWidth: 80,
},
form: {
component: {
placeholder: '请输入县区',
@@ -186,6 +203,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
area_code: {
title: '区域代码',
type: 'input',
column:{
minWidth: 90,
},
form: {
component: {
placeholder: '请输入区域代码',
@@ -195,8 +215,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
country_english: {
title: '英文全称',
width: 120,
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入英文全称',
@@ -207,6 +229,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
country_code: {
title: '简称',
type: 'input',
column:{
minWidth: 100,
},
form: {
component: {
placeholder: '请输入简称',
@@ -218,6 +243,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
title: '经度',
type: 'input',
disabled: true,
column:{
minWidth: 100,
},
form: {
component: {
placeholder: '请输入经度',
@@ -229,6 +257,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
title: '纬度',
type: 'input',
disabled: true,
column:{
minWidth: 100,
},
form: {
component: {
placeholder: '请输入纬度',
@@ -248,6 +279,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
{ label: '微信扫码登录', value: 2 },
],
}),
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请选择登录类型',
@@ -257,6 +291,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
os: {
title: '操作系统',
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入操作系统',
@@ -266,6 +303,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
browser: {
title: '浏览器名',
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入浏览器名',
@@ -276,6 +316,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
title: 'agent信息',
disabled: true,
type: 'input',
column:{
minWidth: 120,
},
form: {
component: {
placeholder: '请输入agent信息',

28
web/src/views/system/log/operationLog/crud.tsx
View File

@@ -31,6 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
},
rowHandle: {
fixed:'right',
width: 100,
buttons: {
view: {
@@ -90,6 +91,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false,
},
type: 'input',
column:{
minWidth: 100,
},
form: {
disabled: true,
component: {
@@ -103,6 +107,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false,
},
type: 'input',
column:{
minWidth: 200,
},
form: {
disabled: true,
component: {
@@ -141,6 +148,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: {
disabled: false,
},
column:{
minWidth: 100,
},
form: {
disabled: true,
component: {
@@ -164,6 +174,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false,
},
type: 'input',
column:{
minWidth: 100,
},
form: {
disabled: true,
component: {
@@ -175,6 +188,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
request_browser: {
title: '请求浏览器',
type: 'input',
column:{
minWidth: 120,
},
form: {
disabled: true,
},
@@ -186,6 +202,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
type: 'input',
column:{
minWidth: 100,
},
form: {
disabled: true,
},
@@ -198,6 +217,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
type: 'input',
column:{
minWidth: 120,
},
form: {
disabled: true,
},
@@ -209,6 +231,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true,
},
type: 'input',
column:{
minWidth: 150,
},
form: {
disabled: true,
},
@@ -216,6 +241,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
creator_name: {
title: '操作人',
column:{
minWidth: 100,
},
form: {
disabled: true,
},

8
web/src/views/system/messageCenter/crud.tsx
View File

@@ -73,6 +73,9 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
show: true,
},
type: ['text', 'colspan'],
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -103,7 +106,9 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
target_type: {
title: '目标类型',
type: ['dict-radio', 'colspan'],
width: 120,
column:{
minWidth: 120,
},
dict: dict({
data: [
{ value: 0, label: '按用户' },
@@ -134,7 +139,6 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
search: {
disabled: true,
},
width: 130,
form: {
component: {
name: shallowRef(tableSelector),

10
web/src/views/system/role/crud.tsx
View File

@@ -81,13 +81,6 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
// @ts-ignore
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
id: {
@@ -108,7 +101,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
form: {
rules: [{ required: true, message: '角色名称必填' }],
component: {
placeholder: '输入角色名称搜索',
placeholder: '请输入角色名称',
},
},
},
@@ -170,6 +163,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
search: { show: true },
type: 'dict-radio',
column: {
width:100,
component: {
name: 'fs-dict-switch',
activeText: '',

101
web/src/views/system/rolePermission/index.vue
View File

@@ -7,18 +7,24 @@
:before-close="handleClose"
>
<template #header>
<div >
<el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
<div>
<el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
</div>
</template>
</template>
<div style="padding: 1em">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<el-alert title="针对角色的页面菜单进行授权" description="点击菜单项,可对菜单下的按钮/接口授权" type="warning" />
<el-card header="菜单页面授权">
<template #header>
<div class="card-header">
<span>菜单页面</span>
<el-tooltip effect="dark" content="点击菜单项,可对菜单下的按钮/接口授权" placement="right">
<div>
<span>菜单页面</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
</div>
</template>
@@ -35,11 +41,18 @@
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
<el-alert title="对页面菜单下按钮授权" description="新增或删除对菜单下的按钮/接口授权" type="warning" />
<!-- <el-alert title="对页面菜单下按钮授权" description="新增或删除对菜单下的按钮/接口授权" type="warning" />-->
<el-card v-if="isBtnPermissionShow">
<template #header>
<div class="card-header">
<span>按钮/接口授权</span>
<el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
<div>
<span>按钮/接口授权</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
</div>
</template>
<div>
@@ -49,12 +62,12 @@
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
<el-table-column prop="menu_button" label="权限名称" width="100">
<template #default="scope">
<div>{{formatMenuBtn(scope.row.menu_button)}}</div>
<div>{{ formatMenuBtn(scope.row.menu_button) }}</div>
</template>
</el-table-column>
<el-table-column prop="data_range" label="权限范围" width="140">
<template #default="scope">
<div>{{formatDataRange(scope.row.data_range)}}</div>
<div>{{ formatDataRange(scope.row.data_range) }}</div>
</template>
</el-table-column>
<el-table-column prop="dept" label="权限涉及部门"/>
@@ -139,8 +152,8 @@
import {ref, defineExpose, reactive, toRefs} from 'vue'
import {ElMessageBox} from 'element-plus'
import * as api from './api'
import type {FormRules,FormInstance} from 'element-plus'
import { ElMessage } from 'element-plus'
import type {FormRules, FormInstance} from 'element-plus'
import {ElMessage} from 'element-plus'
import XEUtils from 'xe-utils'
//抽屉是否显示
const drawer = ref(false)
@@ -190,7 +203,7 @@ let buttonOptions = ref<[]>()
let editedMenuInfo = ref()
//菜单节点点击事件
const menuNodeClick = (node: any, obj: any) => {
isBtnPermissionShow.value = !node.is_catalog
isBtnPermissionShow.value = !node.is_catalog
if (!node.is_catalog) {
buttonOptions.value = []
editedMenuInfo.value = node
@@ -198,7 +211,7 @@ const menuNodeClick = (node: any, obj: any) => {
const {data} = res
buttonOptions.value = data
})
api.getObj({menu: node.id,role:editedRoleInfo.value.id}).then((res:any)=>{
api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => {
const {data} = res
buttonPermissionData.value = data
})
@@ -211,7 +224,7 @@ const menuTree = ref()
//是否显示新增表单
const dialogFormVisible = ref(false)
//部门树
const deptTree=ref()
const deptTree = ref()
//自定义部门数据
const deptOptions = ref()
//选中的部门数据
@@ -220,7 +233,7 @@ const deptCheckedKeys = []
const buttonForm = reactive({
menu_button: null,
role: null,
menu:null,
menu: null,
data_range: null,
dept: []
})
@@ -256,20 +269,20 @@ const onChangeButton = (val: any) => {
})
//获取权限部门值
api.GetDataScopeDept({menu_button: val}).then((res: any) => {
deptOptions.value = XEUtils.toArrayTree(res.data,{ parentKey: 'parent', strict: false })
deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
})
}
//过滤按钮名称
const formatMenuBtn = (val:any)=>{
let obj:any = buttonOptions.value?.find((item:any)=>{
return item.id===val
const formatMenuBtn = (val: any) => {
let obj: any = buttonOptions.value?.find((item: any) => {
return item.id === val
})
return obj?obj.name:null
return obj ? obj.name : null
}
//过滤权限范围
const formatDataRange = (val:any)=>{
let obj:any = [
const formatDataRange = (val: any) => {
let obj: any = [
{
"value": 0,
"label": '仅本人数据权限'
@@ -290,17 +303,17 @@ const formatDataRange = (val:any)=>{
"value": 4,
"label": '自定义数据权限'
}
].find((item:any)=>{
return item.value===val
].find((item: any) => {
return item.value === val
})
return obj?obj.label:null
return obj ? obj.label : null
}
//保存按钮表单
const onSaveButtonForm = async () => {
const {id:roleId} = editedRoleInfo.value
const {id:menuId} = editedMenuInfo.value
const form:any = Object.assign({},buttonForm)
const {id: roleId} = editedRoleInfo.value
const {id: menuId} = editedMenuInfo.value
const form: any = Object.assign({}, buttonForm)
form.role = roleId
form.menu = menuId
//选中的部门
@@ -309,7 +322,7 @@ const onSaveButtonForm = async () => {
if (!buttonFormRef.value) return
await buttonFormRef.value.validate((valid, fields) => {
if (valid) {
api.CreatePermission(form).then((res:any)=>{
api.CreatePermission(form).then((res: any) => {
buttonPermissionData.value.push(form)
dialogFormVisible.value = false
ElMessage({
@@ -320,7 +333,7 @@ const onSaveButtonForm = async () => {
} else {
ElMessage({
type: 'error',
title:'提交错误',
title: '提交错误',
message: 'F12控制台看详情',
})
console.log('提交错误', fields)
@@ -329,8 +342,8 @@ const onSaveButtonForm = async () => {
}
//删除按钮权限
const onDeleteBtn = (scope:any)=>{
const {row,$index} = scope
const onDeleteBtn = (scope: any) => {
const {row, $index} = scope
ElMessageBox.confirm(
'您是否要删除数据?',
'温馨提示',
@@ -339,15 +352,15 @@ const onDeleteBtn = (scope:any)=>{
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
api.DeletePermission({id:row.id}).then(res=>{
buttonPermissionData.value.splice($index,1)
ElMessage({
type: 'success',
message: res.msg,
})
})
).then(() => {
api.DeletePermission({id: row.id}).then(res => {
buttonPermissionData.value.splice($index, 1)
ElMessage({
type: 'success',
message: res.msg,
})
})
})
.catch(() => {
ElMessage({
type: 'info',
@@ -373,12 +386,12 @@ const onSaveAuth = () => {
//合并的菜单数据
const menuIdList = [...checkedList, ...halfCheckedList]
// console.log(menuIdList)
const { id:roleId } = editedRoleInfo.value
const {id: roleId} = editedRoleInfo.value
const data = {
role:roleId,
menu:menuIdList
role: roleId,
menu: menuIdList
}
api.SaveMenuPermission(data).then((res:any)=>{
api.SaveMenuPermission(data).then((res: any) => {
ElMessage({
message: res.msg,
type: 'success',

7
web/src/views/system/whiteList/crud.tsx
View File

@@ -124,6 +124,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
],
}),
column:{
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
@@ -162,6 +165,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
});
},
}),
column:{
minWidth: 200,
},
form: {
rules: [
// 表单校验规则
@@ -199,6 +205,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
},
type: 'dict-radio',
column: {
minWidth:120,
component: {
name: 'fs-dict-switch',
activeText: '',