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

[fix]优化commonCrudConfig写法，兼容ts语法，修复使用commonCrudConfig IDE提示飘红的问题&增加width可自定义功能

Browse Source 
Signed-off-by: vFeng <1914007838@qq.com>
This commit is contained in:
vFeng
2025-01-27 05:33:54 +00:00
committed by Gitee
parent 1e2a9a652e
commit 83d6565cad
1 changed files with 284 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
web/src/utils/commonCrud.ts
View File

@@ -1,45 +1,65 @@
import {dict} from "@fast-crud/fast-crud"; import {dict} from '@fast-crud/fast-crud';
import {shallowRef} from 'vue' import {shallowRef} from 'vue';
import deptFormat from "/@/components/dept-format/index.vue"; import deptFormat from '/@/components/dept-format/index.vue';
export const commonCrudConfig = (options = { /** 1. 每个字段可选属性 */
create_datetime: { export interface CrudFieldOption {
form: false, form?: boolean;
table: false, table?: boolean;
search: false search?: boolean;
}, width?: number;
update_datetime: { }
form: false,
table: false, /** 2. 总配置接口 */
search: false export interface CrudOptions {
}, create_datetime?: CrudFieldOption;
creator_name: { update_datetime?: CrudFieldOption;
form: false, creator_name?: CrudFieldOption;
table: false, modifier_name?: CrudFieldOption;
search: false dept_belong_id?: CrudFieldOption;
}, description?: CrudFieldOption;
modifier_name: { }
form: false,
table: false, /** 3. 默认完整配置 */
search: false const defaultOptions: Required<CrudOptions> = {
}, create_datetime: { form: false, table: false, search: false, width: 160 },
dept_belong_id: { update_datetime: { form: false, table: false, search: false, width: 160 },
form: false, creator_name: { form: false, table: false, search: false, width: 100 },
table: false, modifier_name: { form: false, table: false, search: false, width: 100 },
search: false dept_belong_id: { form: false, table: false, search: false, width: 300 },
}, description: { form: false, table: false, search: false, width: 100 },
description: { };
form: false,
table: false, /** 4. mergeOptions 函数 */
search: false function mergeOptions(baseOptions: Required<CrudOptions>, userOptions: CrudOptions = {}): Required<CrudOptions> {
}, const result = { ...baseOptions };
}) => { for (const key in userOptions) {
if (Object.prototype.hasOwnProperty.call(userOptions, key)) {
const baseField = result[key as keyof CrudOptions];
const userField = userOptions[key as keyof CrudOptions];
if (baseField && userField) {
result[key as keyof CrudOptions] = { ...baseField, ...userField };
}
}
}
return result;
}
/**
* 最终暴露的 commonCrudConfig
* @param options 用户自定义配置（可传可不传，不传就用默认）
*/
export const commonCrudConfig = (options: CrudOptions = {}) => {
// ① 合并
const merged = mergeOptions(defaultOptions, options);
// ② 用 merged 中的值生成真正的 CRUD 配置
return { return {
dept_belong_id: { dept_belong_id: {
title: '所属部门', title: '所属部门',
type: 'dict-tree', type: 'dict-tree',
search: { search: {
show: options.dept_belong_id?.search || false show: merged.dept_belong_id.search,
}, },
dict: dict({ dict: dict({
url: '/api/system/dept/all_dept/', url: '/api/system/dept/all_dept/',
@@ -50,91 +70,93 @@ export const commonCrudConfig = (options = {
}), }),
column: { column: {
align: 'center', align: 'center',
width: 300, width: merged.dept_belong_id.width,
show: options.dept_belong_id?.table || false, show: merged.dept_belong_id.table,
component: { component: {
name: shallowRef(deptFormat), // fast-crud里自定义组件常用"component.is"
vModel: "modelValue", is: shallowRef(deptFormat),
} vModel: 'modelValue',
},
}, },
form: { form: {
show: options.dept_belong_id?.form || false, show: merged.dept_belong_id.form,
component: { component: {
multiple: false, multiple: false,
clearable: true, clearable: true,
props: { props: {
checkStrictly: true, checkStrictly: true,
props: { props: {
// 为什么这里要写两层props label: 'name',
// 因为props属性名与fs的动态渲染的props命名冲突，所以要多写一层 value: 'id',
label: "name", },
value: "id", },
} },
} helper: '默认不填则为当前创建用户的部门ID',
}, },
helper: "默认不填则为当前创建用户的部门ID"
}
}, },
description: { description: {
title: '备注', title: '备注',
search: { search: {
show: options.description?.search || false show: merged.description.search,
}, },
type: 'textarea', type: 'textarea',
column: { column: {
width: 100, width: merged.description.width,
show: options.description?.table || false, show: merged.description.table,
}, },
form: { form: {
show: options.description?.form || false, show: merged.description.form,
component: { component: {
placeholder: '请输入内容', placeholder: '请输入内容',
showWordLimit: true, showWordLimit: true,
maxlength: '200', maxlength: '200',
} },
}, },
viewForm: { viewForm: {
show: true show: true,
}
}, },
},
modifier_name: { modifier_name: {
title: '修改人', title: '修改人',
search: { search: {
show: options.modifier_name?.search || false show: merged.modifier_name.search,
}, },
column: { column: {
width: 100, width: merged.modifier_name.width,
show: options.modifier_name?.table || false, show: merged.modifier_name.table,
}, },
form: { form: {
show: false, show: merged.modifier_name.form,
}, },
viewForm: { viewForm: {
show: true show: true,
}
}, },
},
creator_name: { creator_name: {
title: '创建人', title: '创建人',
search: { search: {
show: options.creator_name?.search || false show: merged.creator_name.search,
}, },
column: { column: {
width: 100, width: merged.creator_name.width,
show: options.creator_name?.table || false, show: merged.creator_name.table,
}, },
form: { form: {
show: false, show: merged.creator_name.form,
}, },
viewForm: { viewForm: {
show: true show: true,
}
}, },
},
update_datetime: { update_datetime: {
title: '更新时间', title: '更新时间',
type: 'datetime', type: 'datetime',
search: { search: {
show: options.update_datetime?.search || false, show: merged.update_datetime.search,
col: {span: 8}, col: { span: 8 },
component: { component: {
type: 'datetimerange', type: 'datetimerange',
props: { props: {
@@ -142,62 +164,65 @@ export const commonCrudConfig = (options = {
'end-placeholder': '结束时间', 'end-placeholder': '结束时间',
'value-format': 'YYYY-MM-DD HH:mm:ss', 'value-format': 'YYYY-MM-DD HH:mm:ss',
'picker-options': { 'picker-options': {
shortcuts: [{ shortcuts: [
{
text: '最近一周', text: '最近一周',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}, { },
{
text: '最近一个月', text: '最近一个月',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}, { },
{
text: '最近三个月', text: '最近三个月',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}] },
} ],
} },
},
}, },
valueResolve(context: any) { valueResolve(context: any) {
const {key, value} = context const { value } = context;
//value解析，就是把组件的值转化为后台所需要的值
//在form表单点击保存按钮后，提交到后台之前执行转化
if (value) { if (value) {
context.form.update_datetime_after = value[0] context.form.update_datetime_after = value[0];
context.form.update_datetime_before = value[1] context.form.update_datetime_before = value[1];
} delete context.form.update_datetime;
// ↑↑↑↑↑ 注意这里是form，不是row
} }
}, },
},
column: { column: {
width: 160, width: merged.update_datetime.width,
show: options.update_datetime?.table || false, show: merged.update_datetime.table,
}, },
form: { form: {
show: false, show: merged.update_datetime.form,
}, },
viewForm: { viewForm: {
show: true show: true,
}
}, },
},
create_datetime: { create_datetime: {
title: '创建时间', title: '创建时间',
type: 'datetime', type: 'datetime',
search: { search: {
show: options.create_datetime?.search || false, show: merged.create_datetime.search,
col: {span: 8}, col: { span: 8 },
component: { component: {
type: 'datetimerange', type: 'datetimerange',
props: { props: {
@@ -205,55 +230,57 @@ export const commonCrudConfig = (options = {
'end-placeholder': '结束时间', 'end-placeholder': '结束时间',
'value-format': 'YYYY-MM-DD HH:mm:ss', 'value-format': 'YYYY-MM-DD HH:mm:ss',
'picker-options': { 'picker-options': {
shortcuts: [{ shortcuts: [
{
text: '最近一周', text: '最近一周',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}, { },
{
text: '最近一个月', text: '最近一个月',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}, { },
{
text: '最近三个月', text: '最近三个月',
onClick(picker) { onClick(picker: any) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} },
}] },
} ],
} },
},
}, },
valueResolve(context: any) { valueResolve(context: any) {
const {key, value} = context const { value } = context;
//value解析，就是把组件的值转化为后台所需要的值
//在form表单点击保存按钮后，提交到后台之前执行转化
if (value) { if (value) {
context.form.create_datetime_after = value[0] context.form.create_datetime_after = value[0];
context.form.create_datetime_before = value[1] context.form.create_datetime_before = value[1];
} delete context.form.create_datetime;
// ↑↑↑↑↑ 注意这里是form，不是row
} }
}, },
},
column: { column: {
width: 160, width: merged.create_datetime.width,
show: options.create_datetime?.table || false, show: merged.create_datetime.table,
}, },
form: { form: {
show: false show: merged.create_datetime.form,
}, },
viewForm: { viewForm: {
show: true show: true,
} },
} },
} };
} };