From eb893e44a3981aa78cde0bae45c66eaa6b39d61d Mon Sep 17 00:00:00 2001 From: lq Date: Mon, 12 May 2025 17:04:27 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=90=AD=E5=BB=BA=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=94=9F=E6=88=90=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/router/routes/modules/demos.ts | 28 -- apps/web-antd/src/util/json/filedType.json | 82 +++++ apps/web-antd/src/util/json/formType.json | 114 ++++++ .../code-generation/components/fileds.vue | 64 ++++ .../src/views/code-generation/config/form.ts | 66 ++++ .../views/code-generation/config/search.ts | 56 +++ .../src/views/code-generation/config/table.ts | 342 ++++++++++++++++++ .../src/views/code-generation/index.vue | 38 ++ apps/web-antd/src/views/demos/antd/index.vue | 73 ---- .../src/views/system/menu/api/index.ts | 13 +- .../src/views/system/menu/config/form.ts | 4 +- 11 files changed, 765 insertions(+), 115 deletions(-) delete mode 100644 apps/web-antd/src/router/routes/modules/demos.ts create mode 100644 apps/web-antd/src/util/json/filedType.json create mode 100644 apps/web-antd/src/util/json/formType.json create mode 100644 apps/web-antd/src/views/code-generation/components/fileds.vue create mode 100644 apps/web-antd/src/views/code-generation/config/form.ts create mode 100644 apps/web-antd/src/views/code-generation/config/search.ts create mode 100644 apps/web-antd/src/views/code-generation/config/table.ts create mode 100644 apps/web-antd/src/views/code-generation/index.vue delete mode 100644 apps/web-antd/src/views/demos/antd/index.vue diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts deleted file mode 100644 index 55ade09c..00000000 --- a/apps/web-antd/src/router/routes/modules/demos.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { RouteRecordRaw } from 'vue-router'; - -import { $t } from '#/locales'; - -const routes: RouteRecordRaw[] = [ - { - meta: { - icon: 'ic:baseline-view-in-ar', - keepAlive: true, - order: 1000, - title: $t('demos.title'), - }, - name: 'Demos', - path: '/demos', - children: [ - { - meta: { - title: $t('demos.antd'), - }, - name: 'AntDesignDemos', - path: '/demos/ant-design', - component: () => import('#/views/demos/antd/index.vue'), - }, - ], - }, -]; - -export default routes; diff --git a/apps/web-antd/src/util/json/filedType.json b/apps/web-antd/src/util/json/filedType.json new file mode 100644 index 00000000..42b875d1 --- /dev/null +++ b/apps/web-antd/src/util/json/filedType.json @@ -0,0 +1,82 @@ +[ + { + "label": "tinyint", + "value": "TINYINT" + }, + { + "label": "smallint", + "value": "SMALLINT" + }, + { + "label": "mediumint", + "value": "MEDIUMINT" + }, + { + "label": "int", + "value": "INT" + }, + { + "label": "bigint", + "value": "BIGINT" + }, + { + "label": "float", + "value": "FLOAT" + }, + { + "label": "double", + "value": "DOUBLE" + }, + { + "label": "decimal", + "value": "DECIMAL" + }, + { + "label": "char", + "value": "HAR" + }, + { + "label": "varchar", + "value": "VARCHAR" + }, + { + "label": "text", + "value": "TEXT" + }, + { + "label": "blob", + "value": "BLOB" + }, + { + "label": "date", + "value": "DATE" + }, + { + "label": "time", + "value": "TIME" + }, + { + "label": "datetime", + "value": "DATETIME" + }, + { + "label": "timestamp", + "value": "TIMESTAMP" + }, + { + "label": "year", + "value": "YEAR" + }, + { + "label": "enum", + "value": "ENUM" + }, + { + "label": "set", + "value": "SET" + }, + { + "label": "longtext", + "value": "LONGTEXT" + } +] diff --git a/apps/web-antd/src/util/json/formType.json b/apps/web-antd/src/util/json/formType.json new file mode 100644 index 00000000..079f934d --- /dev/null +++ b/apps/web-antd/src/util/json/formType.json @@ -0,0 +1,114 @@ +[ + { + "label": "Input -- 输入框", + "value": "Input" + }, + { + "label": "InputGroup -- 输入框组合", + "value": "InputGroup" + }, + { + "label": "InputPassword -- 密码输入框", + "value": "InputPassword" + }, + { + "label": "InputSearch -- 搜索输入框", + "value": "InputSearch" + }, + { + "label": "InputTextArea -- 文本域", + "value": "InputTextArea" + }, + { + "label": "InputNumber -- 数字输入框", + "value": "InputNumber" + }, + { + "label": "InputCountDown -- 倒计时输入框", + "value": "InputCountDown" + }, + { + "label": "Select -- 本地下拉框", + "value": "Select" + }, + { + "label": "ApiSelect -- 远程下拉框", + "value": "ApiSelect" + }, + { + "label": "TreeSelect -- 下拉树", + "value": "TreeSelect" + }, + { + "label": "RadioButtonGroup -- 单选按钮组合", + "value": "RadioButtonGroup" + }, + { + "label": "RadioGroup -- 单选按钮", + "value": "RadioGroup" + }, + { + "label": "Checkbox -- 多选按钮", + "value": "Checkbox" + }, + { + "label": "AutoComplete -- 自动填充框", + "value": "AutoComplete" + }, + { + "label": "Cascader -- 连级选择", + "value": "Cascader" + }, + { + "label": "DatePicker -- 日期选择", + "value": "DatePicker" + }, + { + "label": "MonthPicker -- 日期月份选择", + "value": "MonthPicker" + }, + { + "label": "RangePicker -- 日期范围选择", + "value": "RangePicker" + }, + { + "label": "WeekPicker -- 日期周选择", + "value": "WeekPicker" + }, + { + "label": "TimePicker -- 日期时间选择", + "value": "TimePicker" + }, + { + "label": "Switch -- 开关按钮", + "value": "Switch" + }, + { + "label": "StrengthMeter -- 组件密码强度检测", + "value": "StrengthMeter" + }, + { + "label": "Upload -- 上传按钮", + "value": "Upload" + }, + { + "label": "IconPicker -- 图标选择", + "value": "IconPicker" + }, + { + "label": "Render -- 组件渲染空置", + "value": "Render" + }, + { + "label": "Slider -- 滑块组件", + "value": "Slider" + }, + { + "label": "Rate -- 评分组件", + "value": "Rate" + }, + { + "label": "Divider -- 分割线", + "value": "Divider" + } +] diff --git a/apps/web-antd/src/views/code-generation/components/fileds.vue b/apps/web-antd/src/views/code-generation/components/fileds.vue new file mode 100644 index 00000000..02f50a22 --- /dev/null +++ b/apps/web-antd/src/views/code-generation/components/fileds.vue @@ -0,0 +1,64 @@ + + + diff --git a/apps/web-antd/src/views/code-generation/config/form.ts b/apps/web-antd/src/views/code-generation/config/form.ts new file mode 100644 index 00000000..d400b183 --- /dev/null +++ b/apps/web-antd/src/views/code-generation/config/form.ts @@ -0,0 +1,66 @@ +import type { VbenFormProps } from '#/adapter/form'; + +import { getMenuTreeOption } from '#/views/system/menu/api'; + +export const codeGenerationForm: VbenFormProps = { + wrapperClass: 'grid-cols-12', // 24栅格, + commonConfig: { + formItemClass: 'col-span-12', + // 所有表单项 + componentProps: { + class: 'w-full', + }, + }, + // handleSubmit: onSubmit, + layout: 'horizontal', + schema: [ + { + component: 'VbenInput', + componentProps: { + placeholder: '请输入类名', + }, + fieldName: 'class_name', + label: '类名', + rules: 'required', + formItemClass: 'col-span-6', + }, + { + component: 'VbenInput', + componentProps: { + placeholder: '请输入中文名称', + }, + fieldName: 'class_comment', + label: '中文名称', + rules: 'required', + formItemClass: 'col-span-6', + }, + { + component: 'InputNumber', + componentProps: { + placeholder: '请输入排序', + }, + fieldName: 'sort', + label: '排序', + defaultValue: 9999, + rules: 'required', + formItemClass: 'col-span-6', + }, + { + component: 'ApiTreeSelect', + // 对应组件的参数 + componentProps: { + childrenField: 'children', + labelField: 'title', + valueField: 'id', + // 菜单接口 + api: getMenuTreeOption, + }, + defaultValue: 0, + fieldName: 'pid', + label: '父级菜单', + formItemClass: 'col-span-6', + rules: 'required', + }, + ], + showDefaultActions: false, +}; diff --git a/apps/web-antd/src/views/code-generation/config/search.ts b/apps/web-antd/src/views/code-generation/config/search.ts new file mode 100644 index 00000000..bc3ee56b --- /dev/null +++ b/apps/web-antd/src/views/code-generation/config/search.ts @@ -0,0 +1,56 @@ +import type { VbenFormProps } from '#/adapter/form'; + +import { getRoleOption } from '#/views/system/role/api'; + +export const formOptions: VbenFormProps = { + // 默认展开 + collapsed: false, + schema: [ + { + component: 'VbenInput', + componentProps: { + placeholder: '输入名称', + }, + defaultValue: '', + fieldName: 'nick_name', + label: '管理员名称', + }, + { + component: 'VbenInput', + componentProps: { + placeholder: '输入手机号码', + }, + defaultValue: '', + fieldName: 'phone', + label: '手机号码', + }, + { + component: 'ApiSelect', + componentProps: { + allowClear: true, + filterOption: true, + showSearch: true, + // 菜单接口转options格式 + afterFetch: (data: { id: number; name: string }[]) => { + return data.map((item: any) => ({ + label: item.name, + value: item.id, + })); + }, + api: getRoleOption, + placeholder: '请选择', + }, + fieldName: 'role_id', + label: '角色', + }, + ], + // 控制表单是否显示折叠按钮 + showCollapseButton: true, + submitButtonOptions: { + content: '查询', + }, + // 是否在字段值改变时提交表单 + submitOnChange: true, + // 按下回车时是否提交表单 + submitOnEnter: false, +}; diff --git a/apps/web-antd/src/views/code-generation/config/table.ts b/apps/web-antd/src/views/code-generation/config/table.ts new file mode 100644 index 00000000..0c082471 --- /dev/null +++ b/apps/web-antd/src/views/code-generation/config/table.ts @@ -0,0 +1,342 @@ +import type { VxeGridProps } from '#/adapter/vxe-table'; + +import filedType from '#/util/json/filedType.json'; +import formType from '#/util/json/formType.json'; +import { getAdminList } from '#/views/system/admin/api'; + +interface RowType { + id: string; + nick_name: string; + email: string; + avatar: string; + roles: { name: string }[]; + open_id: string; + code: string; + platform_id: string; + phone: string; + desc: string; + created_at: string; +} + +export const gridOptions: VxeGridProps = { + title: '时间字段由系统生成', + titleHelpMessage: + '创建时间：created_at 编辑时间：updated_at 删除时间：deleted_at', + checkboxConfig: { + highlight: true, + labelField: '', + }, + columnConfig: { + useKey: true, + }, + rowConfig: { + useKey: true, + }, + columns: [ + { + title: '字段名称', + tableTitleHelp: '表中字段名称，为英文开头，纯小写 多个单词下划线隔开', + dataIndex: 'name', + editRow: true, + }, + { + title: '字段类型', + tableTitleHelp: '表中字段储存类型', + dataIndex: 'type', + editRow: true, + editComponent: 'Select', + editComponentProps: { + options: filedType, + showSearch: true, + }, + }, + { + title: '字段长度', + tableTitleHelp: '表中字段储存类型长度', + dataIndex: 'type_number', + editRow: true, + width: 100, + }, + { + title: '默认值', + tableTitleHelp: '表中字段的默认值', + dataIndex: 'default', + editRow: true, + width: 100, + }, + { + title: '备注', + tableTitleHelp: '表中字段备注', + dataIndex: 'comment', + editRow: true, + }, + // { + // title: '主键', + // tableTitleHelp: '表中该字段是否为主键', + // dataIndex: 'isKey', + // width: 80, + // editRow: true, + // editComponent: 'Switch', + // editComponentProps: { + // checkedChildren: '是', + // unCheckedChildren: '否', + // size: 'default', + // }, + // }, + { + title: '非空', + tableTitleHelp: '表中字段是否为必填', + dataIndex: 'null', + width: 80, + editRow: true, + editComponent: 'Switch', + editComponentProps: { + checkedChildren: '是', + unCheckedChildren: '否', + size: 'default', + }, + }, + { + title: '表单', + tableTitleHelp: '是否在表单中展示该字段', + dataIndex: 'formShow', + width: 80, + editRow: true, + editComponent: 'Switch', + editComponentProps: { + checkedChildren: '是', + unCheckedChildren: '否', + size: 'default', + }, + }, + { + title: '表格', + tableTitleHelp: '是否在表格中展示该字段', + dataIndex: 'tableShow', + width: 80, + editRow: true, + editComponent: 'Switch', + editComponentProps: { + checkedChildren: '是', + unCheckedChildren: '否', + size: 'default', + }, + }, + { + title: '搜索', + tableTitleHelp: '是否在表格中搜索该字段', + dataIndex: 'search', + width: 80, + editRow: true, + editComponent: 'Switch', + editComponentProps: { + checkedChildren: '是', + unCheckedChildren: '否', + size: 'default', + }, + }, + { + title: '搜索方式', + tableTitleHelp: '是否在表格中搜索该字段', + dataIndex: 'searchValue', + editRow: true, + editComponent: 'Select', + editComponentProps: { + options: [ + { + label: '绝对查询', + value: '=', + }, + { + label: '模糊查询', + value: 'like', + }, + ], + size: 'default', + }, + }, + { + title: '表单类型', + tableTitleHelp: '在表单中展示该字段的组件类型 如不在表单中展示则不填', + dataIndex: 'formType', + width: 250, + editRow: true, + editComponent: 'Select', + editComponentProps: { + options: formType, + showSearch: true, + }, + }, + ], + keepSource: true, + pagerConfig: {}, + proxyConfig: { + ajax: { + // 请求后端接口方法 + query: async ({ page }, formValues) => { + return await getAdminList({ + page: page.currentPage, + pageSize: page.pageSize, + ...formValues, + }); + }, + }, + }, + height: 'auto', + border: false, + toolbarConfig: { + // 是否显示搜索表单控制按钮 + // @ts-ignore 正式环境时有完整的类型声明 + search: true, + refresh: true, // 刷新 + print: false, // 打印 + export: false, // 导出 + // custom: true, // 自定义列 + zoom: true, // 最大化最小化 + slots: { + buttons: 'toolbar-buttons', + }, + custom: { + // 自定义列-图标 + icon: 'vxe-icon-menu', + }, + }, + showOverflow: false, +}; + +// const columns: BasicColumn[] = [ +// { +// title: '字段名称', +// tableTitleHelp: '表中字段名称，为英文开头，纯小写 多个单词下划线隔开', +// dataIndex: 'name', +// editRow: true, +// }, +// { +// title: '字段类型', +// tableTitleHelp: '表中字段储存类型', +// dataIndex: 'type', +// editRow: true, +// editComponent: 'Select', +// editComponentProps: { +// options: filedType, +// showSearch: true, +// }, +// }, +// { +// title: '字段长度', +// tableTitleHelp: '表中字段储存类型长度', +// dataIndex: 'type_number', +// editRow: true, +// width: 100, +// }, +// { +// title: '默认值', +// tableTitleHelp: '表中字段的默认值', +// dataIndex: 'default', +// editRow: true, +// width: 100, +// }, +// { +// title: '备注', +// tableTitleHelp: '表中字段备注', +// dataIndex: 'comment', +// editRow: true, +// }, +// // { +// // title: '主键', +// // tableTitleHelp: '表中该字段是否为主键', +// // dataIndex: 'isKey', +// // width: 80, +// // editRow: true, +// // editComponent: 'Switch', +// // editComponentProps: { +// // checkedChildren: '是', +// // unCheckedChildren: '否', +// // size: 'default', +// // }, +// // }, +// { +// title: '非空', +// tableTitleHelp: '表中字段是否为必填', +// dataIndex: 'null', +// width: 80, +// editRow: true, +// editComponent: 'Switch', +// editComponentProps: { +// checkedChildren: '是', +// unCheckedChildren: '否', +// size: 'default', +// }, +// }, +// { +// title: '表单', +// tableTitleHelp: '是否在表单中展示该字段', +// dataIndex: 'formShow', +// width: 80, +// editRow: true, +// editComponent: 'Switch', +// editComponentProps: { +// checkedChildren: '是', +// unCheckedChildren: '否', +// size: 'default', +// }, +// }, +// { +// title: '表格', +// tableTitleHelp: '是否在表格中展示该字段', +// dataIndex: 'tableShow', +// width: 80, +// editRow: true, +// editComponent: 'Switch', +// editComponentProps: { +// checkedChildren: '是', +// unCheckedChildren: '否', +// size: 'default', +// }, +// }, +// { +// title: '搜索', +// tableTitleHelp: '是否在表格中搜索该字段', +// dataIndex: 'search', +// width: 80, +// editRow: true, +// editComponent: 'Switch', +// editComponentProps: { +// checkedChildren: '是', +// unCheckedChildren: '否', +// size: 'default', +// }, +// }, +// { +// title: '搜索方式', +// tableTitleHelp: '是否在表格中搜索该字段', +// dataIndex: 'searchValue', +// editRow: true, +// editComponent: 'Select', +// editComponentProps: { +// options: [ +// { +// label: '绝对查询', +// value: '=', +// }, +// { +// label: '模糊查询', +// value: 'like', +// }, +// ], +// size: 'default', +// }, +// }, +// { +// title: '表单类型', +// tableTitleHelp: '在表单中展示该字段的组件类型 如不在表单中展示则不填', +// dataIndex: 'formType', +// width: 250, +// editRow: true, +// editComponent: 'Select', +// editComponentProps: { +// options: formType, +// showSearch: true, +// }, +// }, +// ]; diff --git a/apps/web-antd/src/views/code-generation/index.vue b/apps/web-antd/src/views/code-generation/index.vue new file mode 100644 index 00000000..911154dc --- /dev/null +++ b/apps/web-antd/src/views/code-generation/index.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/apps/web-antd/src/views/demos/antd/index.vue b/apps/web-antd/src/views/demos/antd/index.vue deleted file mode 100644 index efb9ed5b..00000000 --- a/apps/web-antd/src/views/demos/antd/index.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - diff --git a/apps/web-antd/src/views/system/menu/api/index.ts b/apps/web-antd/src/views/system/menu/api/index.ts index 22de278c..7fe2c288 100644 --- a/apps/web-antd/src/views/system/menu/api/index.ts +++ b/apps/web-antd/src/views/system/menu/api/index.ts @@ -28,18 +28,7 @@ export async function getMenuOption(data: any) { * @param data */ export async function getMenuTreeOption(data: any) { - return requestClient.get(`${prefix}get-tree-option`, data); -} - -/** - * 查询菜单树形下拉框 - */ -export async function getMenuTreeOptionSelect() { - return requestClient.get(`${prefix}get-tree-option`, { - params: { - is_select: true, - }, - }); + return requestClient.get(`${prefix}tree-option`, data); } /** diff --git a/apps/web-antd/src/views/system/menu/config/form.ts b/apps/web-antd/src/views/system/menu/config/form.ts index 6b0f7ebf..3a3780c4 100644 --- a/apps/web-antd/src/views/system/menu/config/form.ts +++ b/apps/web-antd/src/views/system/menu/config/form.ts @@ -1,6 +1,6 @@ import type { VbenFormProps } from '#/adapter/form'; -import { getMenuTreeOptionSelect } from '#/views/system/menu/api'; +import { getMenuTreeOption } from '#/views/system/menu/api'; export const modalFormProps: VbenFormProps = { wrapperClass: 'grid-cols-12', // 24栅格, @@ -40,7 +40,7 @@ export const modalFormProps: VbenFormProps = { labelField: 'title', valueField: 'id', // 菜单接口 - api: getMenuTreeOptionSelect, + api: getMenuTreeOption, }, defaultValue: 0, fieldName: 'pid',