From 83d6565cade3482dcba78e9e7b5722e31c929d24 Mon Sep 17 00:00:00 2001 From: vFeng <1914007838@qq.com> Date: Mon, 27 Jan 2025 05:33:54 +0000 Subject: [PATCH] =?UTF-8?q?[fix]=E4=BC=98=E5=8C=96commonCrudConfig?= =?UTF-8?q?=E5=86=99=E6=B3=95=EF=BC=8C=E5=85=BC=E5=AE=B9ts=E8=AF=AD?= =?UTF-8?q?=E6=B3=95=EF=BC=8C=E4=BF=AE=E5=A4=8D=E4=BD=BF=E7=94=A8commonCru?= =?UTF-8?q?dConfig=20IDE=E6=8F=90=E7=A4=BA=E9=A3=98=E7=BA=A2=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98&=E5=A2=9E=E5=8A=A0width=E5=8F=AF=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: vFeng <1914007838@qq.com> --- web/src/utils/commonCrud.ts | 541 +++++++++++++++++++----------------- 1 file changed, 284 insertions(+), 257 deletions(-) diff --git a/web/src/utils/commonCrud.ts b/web/src/utils/commonCrud.ts index 426f6af..9a3817b 100644 --- a/web/src/utils/commonCrud.ts +++ b/web/src/utils/commonCrud.ts @@ -1,259 +1,286 @@ -import {dict} from "@fast-crud/fast-crud"; -import {shallowRef} from 'vue' -import deptFormat from "/@/components/dept-format/index.vue"; +import {dict} from '@fast-crud/fast-crud'; +import {shallowRef} from 'vue'; +import deptFormat from '/@/components/dept-format/index.vue'; -export const commonCrudConfig = (options = { - create_datetime: { - form: false, - table: false, - search: false - }, - update_datetime: { - form: false, - table: false, - search: false - }, - creator_name: { - form: false, - table: false, - search: false - }, - modifier_name: { - form: false, - table: false, - search: false - }, - dept_belong_id: { - form: false, - table: false, - search: false - }, - description: { - form: false, - table: false, - search: false - }, -}) => { - return { - dept_belong_id: { - title: '所属部门', - type: 'dict-tree', - search: { - show: options.dept_belong_id?.search || false - }, - dict: dict({ - url: '/api/system/dept/all_dept/', - isTree: true, - value: 'id', - label: 'name', - children: 'children', - }), - column: { - align: 'center', - width: 300, - show: options.dept_belong_id?.table || false, - component: { - name: shallowRef(deptFormat), - vModel: "modelValue", - } - }, - form: { - show: options.dept_belong_id?.form || false, - component: { - multiple: false, - clearable: true, - props: { - checkStrictly: true, - props: { - // 为什么这里要写两层props - // 因为props属性名与fs的动态渲染的props命名冲突，所以要多写一层 - label: "name", - value: "id", - } - } - }, - helper: "默认不填则为当前创建用户的部门ID" - } - }, - description: { - title: '备注', - search: { - show: options.description?.search || false - }, - type: 'textarea', - column: { - width: 100, - show: options.description?.table || false, - }, - form: { - show: options.description?.form || false, - component: { - placeholder: '请输入内容', - showWordLimit: true, - maxlength: '200', - } - }, - viewForm: { - show: true - } - }, - modifier_name: { - title: '修改人', - search: { - show: options.modifier_name?.search || false - }, - column: { - width: 100, - show: options.modifier_name?.table || false, - }, - form: { - show: false, - }, - viewForm: { - show: true - } - }, - creator_name: { - title: '创建人', - search: { - show: options.creator_name?.search || false - }, - column: { - width: 100, - show: options.creator_name?.table || false, - }, - form: { - show: false, - }, - viewForm: { - show: true - } - }, - update_datetime: { - title: '更新时间', - type: 'datetime', - search: { - show: options.update_datetime?.search || false, - col: {span: 8}, - component: { - type: 'datetimerange', - props: { - 'start-placeholder': '开始时间', - 'end-placeholder': '结束时间', - 'value-format': 'YYYY-MM-DD HH:mm:ss', - 'picker-options': { - shortcuts: [{ - text: '最近一周', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近一个月', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近三个月', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit('pick', [start, end]); - } - }] - } - } - }, - valueResolve(context: any) { - const {key, value} = context - //value解析，就是把组件的值转化为后台所需要的值 - //在form表单点击保存按钮后，提交到后台之前执行转化 - if (value) { - context.form.update_datetime_after = value[0] - context.form.update_datetime_before = value[1] - } - // ↑↑↑↑↑ 注意这里是form，不是row - } - }, - column: { - width: 160, - show: options.update_datetime?.table || false, - }, - form: { - show: false, - }, - viewForm: { - show: true - } - }, - create_datetime: { - title: '创建时间', - type: 'datetime', - search: { - show: options.create_datetime?.search || false, - col: {span: 8}, - component: { - type: 'datetimerange', - props: { - 'start-placeholder': '开始时间', - 'end-placeholder': '结束时间', - 'value-format': 'YYYY-MM-DD HH:mm:ss', - 'picker-options': { - shortcuts: [{ - text: '最近一周', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近一个月', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近三个月', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit('pick', [start, end]); - } - }] - } - } - }, - valueResolve(context: any) { - const {key, value} = context - //value解析，就是把组件的值转化为后台所需要的值 - //在form表单点击保存按钮后，提交到后台之前执行转化 - if (value) { - context.form.create_datetime_after = value[0] - context.form.create_datetime_before = value[1] - } - // ↑↑↑↑↑ 注意这里是form，不是row - } - }, - column: { - width: 160, - show: options.create_datetime?.table || false, - }, - form: { - show: false - }, - viewForm: { - show: true - } - } - } +/** 1. 每个字段可选属性 */ +export interface CrudFieldOption { + form?: boolean; + table?: boolean; + search?: boolean; + width?: number; } + +/** 2. 总配置接口 */ +export interface CrudOptions { + create_datetime?: CrudFieldOption; + update_datetime?: CrudFieldOption; + creator_name?: CrudFieldOption; + modifier_name?: CrudFieldOption; + dept_belong_id?: CrudFieldOption; + description?: CrudFieldOption; +} + +/** 3. 默认完整配置 */ +const defaultOptions: Required = { + create_datetime: { form: false, table: false, search: false, width: 160 }, + update_datetime: { form: false, table: false, search: false, width: 160 }, + creator_name: { form: false, table: false, search: false, width: 100 }, + modifier_name: { form: false, table: false, search: false, width: 100 }, + dept_belong_id: { form: false, table: false, search: false, width: 300 }, + description: { form: false, table: false, search: false, width: 100 }, +}; + +/** 4. mergeOptions 函数 */ +function mergeOptions(baseOptions: Required, userOptions: CrudOptions = {}): Required { + 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 { + dept_belong_id: { + title: '所属部门', + type: 'dict-tree', + search: { + show: merged.dept_belong_id.search, + }, + dict: dict({ + url: '/api/system/dept/all_dept/', + isTree: true, + value: 'id', + label: 'name', + children: 'children', + }), + column: { + align: 'center', + width: merged.dept_belong_id.width, + show: merged.dept_belong_id.table, + component: { + // fast-crud里自定义组件常用"component.is" + is: shallowRef(deptFormat), + vModel: 'modelValue', + }, + }, + form: { + show: merged.dept_belong_id.form, + component: { + multiple: false, + clearable: true, + props: { + checkStrictly: true, + props: { + label: 'name', + value: 'id', + }, + }, + }, + helper: '默认不填则为当前创建用户的部门ID', + }, + }, + description: { + title: '备注', + search: { + show: merged.description.search, + }, + type: 'textarea', + column: { + width: merged.description.width, + show: merged.description.table, + }, + form: { + show: merged.description.form, + component: { + placeholder: '请输入内容', + showWordLimit: true, + maxlength: '200', + }, + }, + viewForm: { + show: true, + }, + }, + + modifier_name: { + title: '修改人', + search: { + show: merged.modifier_name.search, + }, + column: { + width: merged.modifier_name.width, + show: merged.modifier_name.table, + }, + form: { + show: merged.modifier_name.form, + }, + viewForm: { + show: true, + }, + }, + + creator_name: { + title: '创建人', + search: { + show: merged.creator_name.search, + }, + column: { + width: merged.creator_name.width, + show: merged.creator_name.table, + }, + form: { + show: merged.creator_name.form, + }, + viewForm: { + show: true, + }, + }, + + update_datetime: { + title: '更新时间', + type: 'datetime', + search: { + show: merged.update_datetime.search, + col: { span: 8 }, + component: { + type: 'datetimerange', + props: { + 'start-placeholder': '开始时间', + 'end-placeholder': '结束时间', + 'value-format': 'YYYY-MM-DD HH:mm:ss', + 'picker-options': { + shortcuts: [ + { + text: '最近一周', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + picker.$emit('pick', [start, end]); + }, + }, + { + text: '最近一个月', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + picker.$emit('pick', [start, end]); + }, + }, + { + text: '最近三个月', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + picker.$emit('pick', [start, end]); + }, + }, + ], + }, + }, + }, + valueResolve(context: any) { + const { value } = context; + if (value) { + context.form.update_datetime_after = value[0]; + context.form.update_datetime_before = value[1]; + delete context.form.update_datetime; + } + }, + }, + column: { + width: merged.update_datetime.width, + show: merged.update_datetime.table, + }, + form: { + show: merged.update_datetime.form, + }, + viewForm: { + show: true, + }, + }, + + create_datetime: { + title: '创建时间', + type: 'datetime', + search: { + show: merged.create_datetime.search, + col: { span: 8 }, + component: { + type: 'datetimerange', + props: { + 'start-placeholder': '开始时间', + 'end-placeholder': '结束时间', + 'value-format': 'YYYY-MM-DD HH:mm:ss', + 'picker-options': { + shortcuts: [ + { + text: '最近一周', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + picker.$emit('pick', [start, end]); + }, + }, + { + text: '最近一个月', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + picker.$emit('pick', [start, end]); + }, + }, + { + text: '最近三个月', + onClick(picker: any) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + picker.$emit('pick', [start, end]); + }, + }, + ], + }, + }, + }, + valueResolve(context: any) { + const { value } = context; + if (value) { + context.form.create_datetime_after = value[0]; + context.form.create_datetime_before = value[1]; + delete context.form.create_datetime; + } + }, + }, + column: { + width: merged.create_datetime.width, + show: merged.create_datetime.table, + }, + form: { + show: merged.create_datetime.form, + }, + viewForm: { + show: true, + }, + }, + }; +};