feat: code gen
This commit is contained in:
dap
parent
45d4365de7
commit
483f846da5
@ -3,18 +3,37 @@ import type { GenInfo } from '#/api/tool/gen/model';
|
|||||||
|
|
||||||
import { inject, type Ref, unref } from 'vue';
|
import { inject, type Ref, unref } from 'vue';
|
||||||
|
|
||||||
import { Space, Table } from 'ant-design-vue';
|
import { Space } from 'ant-design-vue';
|
||||||
import { cloneDeep } from 'lodash-es';
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
|
||||||
import { editSave } from '#/api/tool/gen';
|
import { editSave } from '#/api/tool/gen';
|
||||||
|
|
||||||
import { toCurrentStep } from '../mitt';
|
import { toCurrentStep } from '../mitt';
|
||||||
|
import { vxeTableColumns } from './gen-data';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 从父组件注入
|
* 从父组件注入
|
||||||
*/
|
*/
|
||||||
const genInfoData = inject('genInfoData') as Ref<GenInfo['info']>;
|
const genInfoData = inject('genInfoData') as Ref<GenInfo['info']>;
|
||||||
|
|
||||||
|
const gridOptions: VxeGridProps = {
|
||||||
|
columns: vxeTableColumns,
|
||||||
|
// height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
rowConfig: {
|
||||||
|
isHover: true,
|
||||||
|
keyField: 'id',
|
||||||
|
},
|
||||||
|
data: genInfoData.value.columns,
|
||||||
|
round: true,
|
||||||
|
align: 'center',
|
||||||
|
showOverflow: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const [BasicTable] = useVbenVxeGrid({ gridOptions });
|
||||||
|
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
try {
|
try {
|
||||||
const requestData = cloneDeep(unref(genInfoData));
|
const requestData = cloneDeep(unref(genInfoData));
|
||||||
@ -56,7 +75,7 @@ async function handleSubmit() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col gap-[16px] p-[12px]">
|
<div class="flex flex-col gap-[16px] p-[12px]">
|
||||||
<Table />
|
<BasicTable />
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<Space>
|
<Space>
|
||||||
<a-button @click="toCurrentStep(0)">上一步</a-button>
|
<a-button @click="toCurrentStep(0)">上一步</a-button>
|
||||||
|
|||||||
@ -1 +1,319 @@
|
|||||||
export const a = 1;
|
import type { Recordable } from '@vben/types';
|
||||||
|
|
||||||
|
import type { VxeGridProps } from '#/adapter';
|
||||||
|
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
import { getPopupContainer } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Checkbox, Input, Select } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { dictOptionSelectList } from '#/api/system/dict/dict-type';
|
||||||
|
|
||||||
|
const JavaTypes: string[] = [
|
||||||
|
'Long',
|
||||||
|
'String',
|
||||||
|
'Integer',
|
||||||
|
'Double',
|
||||||
|
'BigDecimal',
|
||||||
|
'Date',
|
||||||
|
'Boolean',
|
||||||
|
'LocalDate',
|
||||||
|
'LocalDateTime',
|
||||||
|
];
|
||||||
|
|
||||||
|
const queryTypeOptions = [
|
||||||
|
{ label: '=', value: 'EQ' },
|
||||||
|
{ label: '!=', value: 'NE' },
|
||||||
|
{ label: '>', value: 'GT' },
|
||||||
|
{ label: '>=', value: 'GE' },
|
||||||
|
{ label: '<', value: 'LT' },
|
||||||
|
{ label: '<=', value: 'LE' },
|
||||||
|
{ label: 'LIKE', value: 'LIKE' },
|
||||||
|
{ label: 'BETWEEN', value: 'BETWEEN' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const componentsOptions = [
|
||||||
|
{ label: '文本框', value: 'input' },
|
||||||
|
{ label: '文本域', value: 'textarea' },
|
||||||
|
{ label: '下拉框', value: 'select' },
|
||||||
|
{ label: '单选框', value: 'radio' },
|
||||||
|
{ label: '复选框', value: 'checkbox' },
|
||||||
|
{ label: '日期控件', value: 'datetime' },
|
||||||
|
{ label: '图片上传', value: 'imageUpload' },
|
||||||
|
{ label: '文件上传', value: 'fileUpload' },
|
||||||
|
{ label: '富文本', value: 'editor' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const dictOptions = reactive<{ label: string; value: string }[]>([
|
||||||
|
{ label: '未设置', value: '' },
|
||||||
|
]);
|
||||||
|
/**
|
||||||
|
* 在这里初始化字典下拉框
|
||||||
|
*/
|
||||||
|
(async function init() {
|
||||||
|
const ret = await dictOptionSelectList();
|
||||||
|
|
||||||
|
ret.forEach((dict) => {
|
||||||
|
const option = {
|
||||||
|
label: `${dict.dictName} | ${dict.dictType}`,
|
||||||
|
value: dict.dictType,
|
||||||
|
};
|
||||||
|
dictOptions.push(option);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
|
function renderBooleanTag(row: Recordable<any>, field: string) {
|
||||||
|
const value = row[field] ? '是' : '否';
|
||||||
|
const className = row[field] ? 'text-green-500' : 'text-red-500';
|
||||||
|
return <span class={className}>{value}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderBooleanCheckbox(row: Recordable<any>, field: string) {
|
||||||
|
return <Checkbox v-model:checked={row[field]}></Checkbox>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const validRules: VxeGridProps['editRules'] = {
|
||||||
|
columnComment: [{ required: true, message: '请输入' }],
|
||||||
|
javaField: [{ required: true, message: '请输入' }],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const vxeTableColumns: VxeGridProps['columns'] = [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
type: 'seq',
|
||||||
|
fixed: 'left',
|
||||||
|
width: '50',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字段列名',
|
||||||
|
field: 'columnName',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字段描述',
|
||||||
|
field: 'columnComment',
|
||||||
|
slots: {
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return <Input v-model:value={row.columnComment}></Input>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'db类型',
|
||||||
|
field: 'columnType',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Java类型',
|
||||||
|
field: 'javaType',
|
||||||
|
width: 150,
|
||||||
|
slots: {
|
||||||
|
edit: ({ row }) => {
|
||||||
|
const javaTypeOptions = JavaTypes.map((type) => ({
|
||||||
|
label: type,
|
||||||
|
value: type,
|
||||||
|
}));
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
options={javaTypeOptions}
|
||||||
|
v-model:value={row.javaType}
|
||||||
|
></Select>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Java属性名',
|
||||||
|
field: 'javaField',
|
||||||
|
width: 150,
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
slots: {
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return <Input v-model:value={row.javaField}></Input>;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '插入',
|
||||||
|
field: 'insert',
|
||||||
|
width: 80,
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
return renderBooleanTag(row, 'insert');
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return renderBooleanCheckbox(row, 'insert');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '编辑',
|
||||||
|
field: 'edit',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
width: 80,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
return renderBooleanTag(row, 'edit');
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return renderBooleanCheckbox(row, 'edit');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '列表',
|
||||||
|
field: 'list',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
width: 80,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
return renderBooleanTag(row, 'list');
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return renderBooleanCheckbox(row, 'list');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '查询',
|
||||||
|
field: 'query',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
width: 80,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
return renderBooleanTag(row, 'query');
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return renderBooleanCheckbox(row, 'query');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '查询方式',
|
||||||
|
field: 'queryType',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
width: 150,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
const queryType = row.queryType;
|
||||||
|
const found = queryTypeOptions.find((item) => item.value === queryType);
|
||||||
|
if (found) {
|
||||||
|
return found.label;
|
||||||
|
}
|
||||||
|
return queryType;
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
options={queryTypeOptions}
|
||||||
|
v-model:value={row.queryType}
|
||||||
|
></Select>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '必填',
|
||||||
|
field: 'required',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
align: 'center',
|
||||||
|
width: 80,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
return renderBooleanTag(row, 'required');
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return renderBooleanCheckbox(row, 'required');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '显示类型',
|
||||||
|
field: 'htmlType',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
width: 150,
|
||||||
|
align: 'center',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
const htmlType = row.htmlType;
|
||||||
|
const found = componentsOptions.find((item) => item.value === htmlType);
|
||||||
|
if (found) {
|
||||||
|
return found.label;
|
||||||
|
}
|
||||||
|
return htmlType;
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
options={componentsOptions}
|
||||||
|
v-model:value={row.htmlType}
|
||||||
|
></Select>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '字典类型',
|
||||||
|
field: 'dictType',
|
||||||
|
showOverflow: 'tooltip',
|
||||||
|
width: 230,
|
||||||
|
align: 'center',
|
||||||
|
titlePrefix: {
|
||||||
|
message: `仅'下拉框', '单选框', '复选框'支持字典类型`,
|
||||||
|
},
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => {
|
||||||
|
const dictType = row.dictType;
|
||||||
|
const found = dictOptions.find((item) => item.value === dictType);
|
||||||
|
if (found) {
|
||||||
|
return found.label;
|
||||||
|
}
|
||||||
|
return dictType;
|
||||||
|
},
|
||||||
|
edit: ({ row }) => {
|
||||||
|
// 清除的回调 需要设置为空字符串 否则不会提交
|
||||||
|
const onDeselect = () => {
|
||||||
|
row.dictType = '';
|
||||||
|
};
|
||||||
|
const disabled =
|
||||||
|
row.htmlType !== 'select' &&
|
||||||
|
row.htmlType !== 'radio' &&
|
||||||
|
row.htmlType !== 'checkbox';
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
allowClear={true}
|
||||||
|
disabled={disabled}
|
||||||
|
getPopupContainer={getPopupContainer}
|
||||||
|
onDeselect={onDeselect}
|
||||||
|
options={dictOptions}
|
||||||
|
placeholder="请选择字典类型"
|
||||||
|
v-model:value={row.dictType}
|
||||||
|
></Select>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
editRender: {},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user