fix: 搭建代码生成页面
This commit is contained in:
@@ -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;
|
||||
82
apps/web-antd/src/util/json/filedType.json
Normal file
82
apps/web-antd/src/util/json/filedType.json
Normal file
@@ -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"
|
||||
}
|
||||
]
|
||||
114
apps/web-antd/src/util/json/formType.json
Normal file
114
apps/web-antd/src/util/json/formType.json
Normal file
@@ -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"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, message } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
|
||||
import { gridOptions } from '../config/table';
|
||||
|
||||
defineOptions({
|
||||
name: 'CodeGenerationFiledTable',
|
||||
});
|
||||
|
||||
interface RowType {
|
||||
category: string;
|
||||
color: string;
|
||||
id: string;
|
||||
price: string;
|
||||
productName: string;
|
||||
releaseDate: string;
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
|
||||
|
||||
function hasEditStatus(row: RowType) {
|
||||
return gridApi.grid?.isEditByRow(row);
|
||||
}
|
||||
|
||||
function editRowEvent(row: RowType) {
|
||||
gridApi.grid?.setEditRow(row);
|
||||
}
|
||||
|
||||
async function saveRowEvent(row: RowType) {
|
||||
await gridApi.grid?.clearEdit();
|
||||
|
||||
gridApi.setLoading(true);
|
||||
setTimeout(() => {
|
||||
gridApi.setLoading(false);
|
||||
message.success({
|
||||
content: `保存成功！category=${row.category}`,
|
||||
});
|
||||
}, 600);
|
||||
}
|
||||
|
||||
const cancelRowEvent = (_row: RowType) => {
|
||||
gridApi.grid?.clearEdit();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid>
|
||||
<template #action="{ row }">
|
||||
<template v-if="hasEditStatus(row)">
|
||||
<Button type="link" @click="saveRowEvent(row)">保存</Button>
|
||||
<Button type="link" @click="cancelRowEvent(row)">取消</Button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Button type="link" @click="editRowEvent(row)">编辑</Button>
|
||||
</template>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
66
apps/web-antd/src/views/code-generation/config/form.ts
Normal file
66
apps/web-antd/src/views/code-generation/config/form.ts
Normal file
@@ -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,
|
||||
};
|
||||
56
apps/web-antd/src/views/code-generation/config/search.ts
Normal file
56
apps/web-antd/src/views/code-generation/config/search.ts
Normal file
@@ -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,
|
||||
};
|
||||
342
apps/web-antd/src/views/code-generation/config/table.ts
Normal file
342
apps/web-antd/src/views/code-generation/config/table.ts
Normal file
@@ -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<RowType> = {
|
||||
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,
|
||||
// },
|
||||
// },
|
||||
// ];
|
||||
38
apps/web-antd/src/views/code-generation/index.vue
Normal file
38
apps/web-antd/src/views/code-generation/index.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card } from 'ant-design-vue';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { codeGenerationForm } from '#/views/code-generation/config/form';
|
||||
|
||||
import CodeGenerationFiledTable from './components/fileds.vue';
|
||||
|
||||
const [Form, formApi] = useVbenForm(codeGenerationForm);
|
||||
|
||||
const formValue = ref();
|
||||
const generation = () => {
|
||||
formApi.getValues().then((data) => {
|
||||
formValue.value = data;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="代码生成器" auto-content-height>
|
||||
<Card title="基础信息">
|
||||
<Form />
|
||||
</Card>
|
||||
<Card title="字段信息">
|
||||
<CodeGenerationFiledTable />
|
||||
</Card>
|
||||
<template #footer>
|
||||
<Button type="primary" @click="generation">生成代码</Button>
|
||||
{{ formValue }}
|
||||
</template>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { alert, Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card, message, notification, Space } from 'ant-design-vue';
|
||||
|
||||
type NotificationType = 'error' | 'info' | 'success' | 'warning';
|
||||
|
||||
function info() {
|
||||
message.info('How many roads must a man walk down');
|
||||
}
|
||||
|
||||
function error() {
|
||||
message.error({
|
||||
content: 'Once upon a time you dressed so fine',
|
||||
duration: 2500,
|
||||
});
|
||||
}
|
||||
|
||||
function warning() {
|
||||
message.warning('How many roads must a man walk down');
|
||||
}
|
||||
function success() {
|
||||
message.success('Cause you walked hand in hand With another man in my place');
|
||||
}
|
||||
|
||||
function notify(type: NotificationType) {
|
||||
notification[type]({
|
||||
duration: 2500,
|
||||
message: '说点啥呢',
|
||||
type,
|
||||
});
|
||||
}
|
||||
|
||||
const openAlert = () => {
|
||||
alert({
|
||||
content: 'How many roads must a man walk down',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page
|
||||
description="支持多语言，主题功能集成切换等"
|
||||
title="Ant Design Vue组件使用演示"
|
||||
>
|
||||
<Card class="mb-5" title="按钮">
|
||||
<Space>
|
||||
<Button>Default</Button>
|
||||
<Button type="primary"> Primary </Button>
|
||||
<Button> Info </Button>
|
||||
<Button danger> Error </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
<Card class="mb-5" title="Message">
|
||||
<Space>
|
||||
<Button @click="info"> 信息 </Button>
|
||||
<Button danger @click="error"> 错误 </Button>
|
||||
<Button @click="warning"> 警告 </Button>
|
||||
<Button @click="success"> 成功 </Button>
|
||||
<Button @click="openAlert"> 打开Alert </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-5" title="Notification">
|
||||
<Space>
|
||||
<Button @click="notify('info')"> 信息 </Button>
|
||||
<Button danger @click="notify('error')"> 错误 </Button>
|
||||
<Button @click="notify('warning')"> 警告 </Button>
|
||||
<Button @click="notify('success')"> 成功 </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -28,18 +28,7 @@ export async function getMenuOption(data: any) {
|
||||
* @param data
|
||||
*/
|
||||
export async function getMenuTreeOption(data: any) {
|
||||
return requestClient.get<any>(`${prefix}get-tree-option`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询菜单树形下拉框
|
||||
*/
|
||||
export async function getMenuTreeOptionSelect() {
|
||||
return requestClient.get<any>(`${prefix}get-tree-option`, {
|
||||
params: {
|
||||
is_select: true,
|
||||
},
|
||||
});
|
||||
return requestClient.get<any>(`${prefix}tree-option`, data);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user