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 代表这是一个后端接口 可以进行进一步的判断 // 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) { switch (code) {
case 400: case 400:
Local.clear(); // Local.clear();
Session.clear(); // Session.clear();
errorCreate(`${dataAxios.msg}: ${response.config.url}`); errorCreate(`${dataAxios.msg}: ${response.config.url}`);
window.location.reload(); // window.location.reload();
break; break;
case 401: case 401:
Local.clear(); Local.clear();

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

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

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

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

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

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

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

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

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

@@ -31,6 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
}, },
}, },
rowHandle: { rowHandle: {
fixed:'right',
width: 100, width: 100,
buttons: { buttons: {
view: { view: {
@@ -90,6 +91,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false, disabled: false,
}, },
type: 'input', type: 'input',
column:{
minWidth: 100,
},
form: { form: {
disabled: true, disabled: true,
component: { component: {
@@ -103,6 +107,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false, disabled: false,
}, },
type: 'input', type: 'input',
column:{
minWidth: 200,
},
form: { form: {
disabled: true, disabled: true,
component: { component: {
@@ -141,6 +148,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
search: { search: {
disabled: false, disabled: false,
}, },
column:{
minWidth: 100,
},
form: { form: {
disabled: true, disabled: true,
component: { component: {
@@ -164,6 +174,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: false, disabled: false,
}, },
type: 'input', type: 'input',
column:{
minWidth: 100,
},
form: { form: {
disabled: true, disabled: true,
component: { component: {
@@ -175,6 +188,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
request_browser: { request_browser: {
title: '请求浏览器', title: '请求浏览器',
type: 'input', type: 'input',
column:{
minWidth: 120,
},
form: { form: {
disabled: true, disabled: true,
}, },
@@ -186,6 +202,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true, disabled: true,
}, },
type: 'input', type: 'input',
column:{
minWidth: 100,
},
form: { form: {
disabled: true, disabled: true,
}, },
@@ -198,6 +217,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true, disabled: true,
}, },
type: 'input', type: 'input',
column:{
minWidth: 120,
},
form: { form: {
disabled: true, disabled: true,
}, },
@@ -209,6 +231,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
disabled: true, disabled: true,
}, },
type: 'input', type: 'input',
column:{
minWidth: 150,
},
form: { form: {
disabled: true, disabled: true,
}, },
@@ -216,6 +241,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
}, },
creator_name: { creator_name: {
title: '操作人', title: '操作人',
column:{
minWidth: 100,
},
form: { form: {
disabled: true, 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, show: true,
}, },
type: ['text', 'colspan'], type: ['text', 'colspan'],
column:{
minWidth: 120,
},
form: { form: {
rules: [ rules: [
// 表单校验规则 // 表单校验规则
@@ -103,7 +106,9 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
target_type: { target_type: {
title: '目标类型', title: '目标类型',
type: ['dict-radio', 'colspan'], type: ['dict-radio', 'colspan'],
width: 120, column:{
minWidth: 120,
},
dict: dict({ dict: dict({
data: [ data: [
{ value: 0, label: '按用户' }, { value: 0, label: '按用户' },
@@ -134,7 +139,6 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
search: { search: {
disabled: true, disabled: true,
}, },
width: 130,
form: { form: {
component: { component: {
name: shallowRef(tableSelector), 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', align: 'center',
width: '70px', width: '70px',
columnSetDisabled: true, //禁止在列设置中选择 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: { id: {
@@ -108,7 +101,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
form: { form: {
rules: [{ required: true, message: '角色名称必填' }], rules: [{ required: true, message: '角色名称必填' }],
component: { component: {
placeholder: '输入角色名称搜索', placeholder: '请输入角色名称',
}, },
}, },
}, },
@@ -170,6 +163,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
search: { show: true }, search: { show: true },
type: 'dict-radio', type: 'dict-radio',
column: { column: {
width:100,
component: { component: {
name: 'fs-dict-switch', name: 'fs-dict-switch',
activeText: '', activeText: '',

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

@@ -14,11 +14,17 @@
<div style="padding: 1em"> <div style="padding: 1em">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6"> <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<el-alert title="针对角色的页面菜单进行授权" description="点击菜单项,可对菜单下的按钮/接口授权" type="warning" />
<el-card header="菜单页面授权"> <el-card header="菜单页面授权">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<el-tooltip effect="dark" content="点击菜单项,可对菜单下的按钮/接口授权" placement="right">
<div>
<span>菜单页面</span> <span>菜单页面</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button> <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
</div> </div>
</template> </template>
@@ -35,11 +41,18 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18"> <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"> <el-card v-if="isBtnPermissionShow">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
<div>
<span>按钮/接口授权</span> <span>按钮/接口授权</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
</div> </div>
</template> </template>
<div> <div>

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

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