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
parent 4b609ed7e4
commit 82d7193dcb
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: '',

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

@@ -14,11 +14,17 @@
<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">
<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">
<el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
<div>
<span>按钮/接口授权</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
</div>
</template>
<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: {
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: '',