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

feat: 优化所有类型的table居中显示

Browse Source
This commit is contained in:
李强
2023-12-26 15:36:26 +08:00
parent fa67a27908
commit 06476c182e
1 changed files with 128 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
web/src/settings.ts
View File

@@ -1,127 +1,129 @@
// 引入fast-crud // 引入fast-crud
import { FastCrud, useTypes } from '@fast-crud/fast-crud'; import {FastCrud, useTypes} from '@fast-crud/fast-crud';
const { getType } = useTypes();
const {getType} = useTypes();
import '@fast-crud/fast-crud/dist/style.css'; import '@fast-crud/fast-crud/dist/style.css';
import { setLogger } from '@fast-crud/fast-crud'; import {setLogger} from '@fast-crud/fast-crud';
import { getBaseURL } from '/@/utils/baseUrl'; import {getBaseURL} from '/@/utils/baseUrl';
// element // element
import ui from '@fast-crud/ui-element'; import ui from '@fast-crud/ui-element';
import { request } from '/@/utils/service'; import {request} from '/@/utils/service';
//扩展包 //扩展包
import { FsExtendsEditor,FsExtendsUploader } from '@fast-crud/fast-extends'; import {FsExtendsEditor, FsExtendsUploader} from '@fast-crud/fast-extends';
import '@fast-crud/fast-extends/dist/style.css'; import '@fast-crud/fast-extends/dist/style.css';
import { successMessage, successNotification } from '/@/utils/message'; import {successMessage, successNotification} from '/@/utils/message';
import XEUtils from "xe-utils"; import XEUtils from "xe-utils";
export default { export default {
async install(app: any, options: any) { async install(app: any, options: any) {
// 先安装ui // 先安装ui
app.use(ui); app.use(ui);
// 然后安装FastCrud // 然后安装FastCrud
app.use(FastCrud, { app.use(FastCrud, {
//i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件 //i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
// 此处配置公共的dictRequest（字典请求） // 此处配置公共的dictRequest（字典请求）
async dictRequest({ dict }: any) { async dictRequest({dict}: any) {
const {isTree} = dict const {isTree} = dict
//根据dict的url，异步返回一个字典数组 //根据dict的url，异步返回一个字典数组
return await request({ url: dict.url, params: dict.params || {} }).then((res:any)=>{ return await request({url: dict.url, params: dict.params || {}}).then((res: any) => {
if(isTree){ if (isTree) {
return XEUtils.toArrayTree(res.data,{parentKey:'parent'}) return XEUtils.toArrayTree(res.data, {parentKey: 'parent'})
} }
return res.data return res.data
}); });
}, },
//公共crud配置 //公共crud配置
commonOptions() { commonOptions() {
return { return {
request: { request: {
//接口请求配置 //接口请求配置
//你项目后台接口大概率与fast-crud所需要的返回结构不一致，所以需要配置此项 //你项目后台接口大概率与fast-crud所需要的返回结构不一致，所以需要配置此项
//请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html //请参考文档http://fast-crud.docmirror.cn/api/crud-options/request.html
transformQuery: ({ page, form, sort }: any) => { transformQuery: ({page, form, sort}: any) => {
if (sort.asc !== undefined) { if (sort.asc !== undefined) {
form['ordering'] = `${sort.asc ? '' : '-'}${sort.prop}`; form['ordering'] = `${sort.asc ? '' : '-'}${sort.prop}`;
} }
//转换为你pageRequest所需要的请求参数结构 //转换为你pageRequest所需要的请求参数结构
return { page: page.currentPage, limit: page.pageSize, ...form }; return {page: page.currentPage, limit: page.pageSize, ...form};
}, },
transformRes: ({ res }: any) => { transformRes: ({res}: any) => {
//将pageRequest的返回数据，转换为fast-crud所需要的格式 //将pageRequest的返回数据，转换为fast-crud所需要的格式
//return {records,currentPage,pageSize,total}; //return {records,currentPage,pageSize,total};
return { records: res.data, currentPage: res.page, pageSize: res.limit, total: res.total }; return {records: res.data, currentPage: res.page, pageSize: res.limit, total: res.total};
}, },
}, },
form: { form: {
afterSubmit(ctx: any) { afterSubmit(ctx: any) {
// 增加crud提示 // 增加crud提示
if (ctx.res.code == 2000) { if (ctx.res.code == 2000) {
successNotification(ctx.res.msg); successNotification(ctx.res.msg);
} }
}, },
}, },
/* search: { /* search: {
layout: 'multi-line', layout: 'multi-line',
collapse: true, collapse: true,
col: { col: {
span: 4, span: 4,
}, },
options: { options: {
labelCol: { labelCol: {
style: { style: {
width: '100px', width: '100px',
}, },
}, },
}, },
}, */ }, */
}; };
}, },
}); });
//富文本 //富文本
app.use(FsExtendsEditor, { app.use(FsExtendsEditor, {
wangEditor: { wangEditor: {
width: 300, width: 300,
}, },
}); });
// 文件上传 // 文件上传
app.use(FsExtendsUploader, { app.use(FsExtendsUploader, {
defaultType: "form", defaultType: "form",
form: { form: {
action: `/api/system/file/`, action: `/api/system/file/`,
name: "file", name: "file",
withCredentials: false, withCredentials: false,
uploadRequest: async ({ action, file, onProgress }) => { uploadRequest: async ({action, file, onProgress}) => {
// @ts-ignore // @ts-ignore
const data = new FormData(); const data = new FormData();
data.append("file", file); data.append("file", file);
return await request({ return await request({
url: action, url: action,
method: "post", method: "post",
timeout: 60000, timeout: 60000,
headers: { headers: {
"Content-Type": "multipart/form-data" "Content-Type": "multipart/form-data"
}, },
data, data,
onUploadProgress: (p) => { onUploadProgress: (p) => {
onProgress({ percent: Math.round((p.loaded / p.total) * 100) }); onProgress({percent: Math.round((p.loaded / p.total) * 100)});
} }
}); });
}, },
successHandle(ret) { successHandle(ret) {
// 上传完成后的结果处理， 此处应返回格式为{url:xxx,key:xxx} // 上传完成后的结果处理， 此处应返回格式为{url:xxx,key:xxx}
return { return {
url: getBaseURL() + ret.data.url, url: getBaseURL() + ret.data.url,
key: ret.data.id, key: ret.data.id,
...ret.data ...ret.data
}; };
} }
} }
}) })
setLogger({ level: 'error' }); setLogger({level: 'error'});
// 设置自动染色 // 设置自动染色
const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree']; const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree'];
dictComponentList.forEach((val) => { dictComponentList.forEach((val) => {
getType(val).column.component.color = 'auto'; getType(val).column.component.color = 'auto';
}); });
// 设置placeholder 的默认值 // 设置placeholder 的默认值
const placeholderComponentList = [ const placeholderComponentList = [
{key: 'text', placeholder: "请输入"}, {key: 'text', placeholder: "请输入"},
{key: 'textarea', placeholder: "请输入"}, {key: 'textarea', placeholder: "请输入"},
@@ -131,14 +133,21 @@ export default {
placeholderComponentList.forEach((val) => { placeholderComponentList.forEach((val) => {
if (getType(val.key)?.search?.component) { if (getType(val.key)?.search?.component) {
getType(val.key).search.component.placeholder = val.placeholder; getType(val.key).search.component.placeholder = val.placeholder;
} else if(getType(val.key)?.search) { } else if (getType(val.key)?.search) {
getType(val.key).search.component = {placeholder: val.placeholder}; getType(val.key).search.component = {placeholder: val.placeholder};
} }
if (getType(val.key)?.form?.component) { if (getType(val.key)?.form?.component) {
getType(val.key).form.component.placeholder = val.placeholder; getType(val.key).form.component.placeholder = val.placeholder;
} else if(getType(val.key)?.form) { } else if (getType(val.key)?.form) {
getType(val.key).form.component = {placeholder: val.placeholder}; getType(val.key).form.component = {placeholder: val.placeholder};
} }
if (getType(val.key)?.column?.align) {
getType(val.key).column.align = 'center'
} else if (getType(val.key)?.column) {
getType(val.key).column = {align: 'center'};
} else if (getType(val.key)) {
getType(val.key).column = {align: 'center'};
}
}); });
}, },
}; };