467 lines
12 KiB
Vue
467 lines
12 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
@register="registerModal"
|
||
title="生成代码"
|
||
:width="800"
|
||
@ok="handleSuccess"
|
||
>
|
||
<BasicForm @register="registerForm" />
|
||
</BasicModal>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, computed, reactive } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { BasicForm, useForm, FormSchema, FormProps } from '/@/components/Form/index';
|
||
import { getDatabaselinkMultiTableColumns } from '/@/api/system/databaselink';
|
||
import { getAuthList } from '/@/api/system/authorize';
|
||
import { useUserStore } from '/@/store/modules/user';
|
||
import { GeneratorModel } from '/@/api/system/generator/model';
|
||
import { ComponentOptionModel } from '/@/model/generator/codeGenerator';
|
||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||
import { debounce, random, cloneDeep } from 'lodash-es';
|
||
import { buildUUID } from '/@/utils/uuid';
|
||
import { JavaTypeConvertTsType, buildOption } from '/@/utils/helper/designHelper';
|
||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||
|
||
import { useI18n } from '/@/hooks/web/useI18n';
|
||
|
||
const { t } = useI18n();
|
||
const userStore = useUserStore();
|
||
|
||
const dataAuthHelpMessage = `
|
||
1.启用数据权限会判断主表是否包含RuleUserlD字段如果存在，则不进行表结构修改，如果不存在，则会对主表进行字段添加。
|
||
2.RuleUserlD主要用来控制每一条记录的权限所属人新增时，默认将当前登录认作为权限所属人。
|
||
3.在表单设计中会添加“批量设置权限所属人”功能启用后，拥有该按钮权限的人员可以设置每一条记录的权限所属人。
|
||
`;
|
||
|
||
const dataAuthPlaceholder = computed(() => {
|
||
return generatorConfig!.outputConfig!.isDataAuth
|
||
? t('请选择已有通用数据权限')
|
||
: t('请先启用数据权限');
|
||
});
|
||
|
||
const inputComponentInfo: ComponentOptionModel = {
|
||
label: '单行文本',
|
||
typeName: '单行文本',
|
||
type: 'input',
|
||
options: {
|
||
width: '100%',
|
||
span: '',
|
||
defaultValue: '',
|
||
placeholder: '请输入单行文本',
|
||
maxlength: '',
|
||
prefix: '',
|
||
suffix: '',
|
||
addonBefore: '',
|
||
addonAfter: '',
|
||
disabled: false,
|
||
allowClear: false,
|
||
showLabel: true,
|
||
required: false,
|
||
rules: [],
|
||
events: {},
|
||
},
|
||
key: '',
|
||
rules: [],
|
||
isSubFormChild: false,
|
||
isSingleFormChild: false,
|
||
bindTable: '',
|
||
bindField: '',
|
||
};
|
||
|
||
const numberComponentInfo: ComponentOptionModel = {
|
||
label: '计数组件',
|
||
typeName: '计数组件',
|
||
type: 'number',
|
||
options: {
|
||
width: '100%',
|
||
span: '',
|
||
defaultValue: 0,
|
||
min: 0,
|
||
max: 100,
|
||
step: 1,
|
||
maxlength: '',
|
||
disabled: false,
|
||
showLabel: true,
|
||
controls: true,
|
||
required: false,
|
||
subTotal: false,
|
||
rules: [],
|
||
events: {},
|
||
},
|
||
key: '',
|
||
rules: [],
|
||
isSubFormChild: false,
|
||
isSingleFormChild: false,
|
||
bindTable: '',
|
||
bindField: '',
|
||
};
|
||
|
||
const timeComponentInfo: ComponentOptionModel = {
|
||
label: '时间选择',
|
||
typeName: '时间选择',
|
||
type: 'time',
|
||
options: {
|
||
span: '',
|
||
defaultValue: '',
|
||
width: '100%',
|
||
placeholder: '请选择时间选择',
|
||
format: 'HH:mm:ss',
|
||
showLabel: true,
|
||
allowClear: true,
|
||
disabled: false,
|
||
required: false,
|
||
rules: [],
|
||
events: {},
|
||
},
|
||
key: '',
|
||
rules: [],
|
||
isSubFormChild: false,
|
||
isSingleFormChild: false,
|
||
bindTable: '',
|
||
bindField: '',
|
||
};
|
||
|
||
const dateComponentInfo: ComponentOptionModel = {
|
||
label: '日期选择',
|
||
typeName: '日期选择',
|
||
type: 'date',
|
||
options: {
|
||
span: '',
|
||
defaultValue: '',
|
||
width: '100%',
|
||
placeholder: '请选择日期选择',
|
||
format: 'YYYY-MM-DD HH:mm:ss',
|
||
showLabel: true,
|
||
allowClear: true,
|
||
disabled: false,
|
||
required: false,
|
||
rules: [],
|
||
events: {},
|
||
},
|
||
key: '',
|
||
rules: [],
|
||
isSubFormChild: false,
|
||
isSingleFormChild: false,
|
||
bindTable: '',
|
||
bindField: '',
|
||
};
|
||
const outputValue = ref('');
|
||
const columnsInfo = ref<any>({});
|
||
const codeList = ref<GeneratorModel[]>([]);
|
||
|
||
const emit = defineEmits(['success']);
|
||
|
||
let generatorConfig = reactive<GeneratorModel>({
|
||
name: '',
|
||
categoryId: '1697809616871182337',
|
||
databaseId: null, //数据库id
|
||
listConfig: {
|
||
isLeftMenu: false,
|
||
queryConfigs: [],
|
||
leftMenuConfig: {
|
||
datasourceType: 'static',
|
||
listFieldName: undefined,
|
||
apiConfig: {},
|
||
dictionaryItemId: undefined,
|
||
menuName: '',
|
||
parentIcon: '',
|
||
childIcon: '',
|
||
staticData: [],
|
||
},
|
||
columnConfigs: [],
|
||
buttonConfigs: [
|
||
{
|
||
isUse: true,
|
||
name: '刷新',
|
||
code: 'refresh',
|
||
icon: 'ant-design:reload-outlined',
|
||
isDefault: true,
|
||
},
|
||
{
|
||
isUse: true,
|
||
name: '查看',
|
||
code: 'view',
|
||
icon: 'ant-design:eye-outlined',
|
||
isDefault: true,
|
||
},
|
||
{
|
||
isUse: true,
|
||
name: '新增',
|
||
code: 'add',
|
||
icon: 'ant-design:plus-outlined',
|
||
isDefault: true,
|
||
},
|
||
{
|
||
isUse: true,
|
||
name: '编辑',
|
||
code: 'edit',
|
||
icon: 'ant-design:form-outlined',
|
||
isDefault: true,
|
||
},
|
||
{
|
||
isUse: true,
|
||
name: '删除',
|
||
code: 'delete',
|
||
icon: 'ant-design:delete-outlined',
|
||
isDefault: true,
|
||
},
|
||
],
|
||
defaultOrder: true,
|
||
isPage: true,
|
||
},
|
||
tableConfigs: [],
|
||
formJson: {
|
||
list: [],
|
||
config: {
|
||
formType: 'modal',
|
||
size: 'default',
|
||
layout: 'horizontal',
|
||
labelAlign: 'right',
|
||
labelCol: {
|
||
span: 3,
|
||
offset: 0,
|
||
},
|
||
formWidth: 800,
|
||
},
|
||
hiddenComponent: [],
|
||
},
|
||
outputConfig: {
|
||
creator: userStore.getUserInfo.name,
|
||
isMenu: true,
|
||
type: 0,
|
||
},
|
||
formEventConfig: {} as FormEventColumnConfig,
|
||
frontCode: {
|
||
listCode: '',
|
||
formCode: '',
|
||
apiCode: '',
|
||
modelCode: '',
|
||
configJsonCode: '',
|
||
workflowPermissionCode: '', //工作流权限配置
|
||
simpleFormCode: '', //simpleForm页面
|
||
},
|
||
});
|
||
const schemas: FormSchema[] = [
|
||
{
|
||
field: 'className',
|
||
label: t('功能名称'),
|
||
component: 'Input',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
validator: (_, value) => {
|
||
if (value === '') {
|
||
return Promise.reject('请输入功能名称');
|
||
} else if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(value)) {
|
||
return Promise.reject(t('功能名称只能是数字和字母组成，必须以英文字母开头'));
|
||
} else {
|
||
return Promise.resolve();
|
||
}
|
||
},
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
colProps: { span: 24 },
|
||
componentProps: {
|
||
placeholder: '请填写功能名称',
|
||
},
|
||
},
|
||
{
|
||
field: 'comment',
|
||
label: t('功能描述'),
|
||
required: true,
|
||
component: 'Input',
|
||
colProps: { span: 24 },
|
||
componentProps: {
|
||
placeholder: '请填写功能描述',
|
||
},
|
||
},
|
||
{
|
||
field: 'outputArea',
|
||
label: t('功能模块'),
|
||
component: 'DicSelect',
|
||
required: true,
|
||
componentProps: {
|
||
placeholder: t('请选择功能模块'),
|
||
itemId: '1419276800524423333',
|
||
getPopupContainer: () => document.body,
|
||
onChange: debounce((_, obj) => {
|
||
if (obj) {
|
||
outputValue.value = obj.value;
|
||
}
|
||
}, 100),
|
||
},
|
||
colProps: { span: 24 },
|
||
},
|
||
{
|
||
field: 'remarks',
|
||
label: t('备注'),
|
||
component: 'Input',
|
||
colProps: { span: 24 },
|
||
componentProps: {
|
||
placeholder: t('请填写备注'),
|
||
},
|
||
},
|
||
{
|
||
field: 'isDataAuth',
|
||
label: t('数据权限'),
|
||
component: 'Switch',
|
||
colProps: { span: 24 },
|
||
helpMessage: dataAuthHelpMessage,
|
||
helpComponentProps: { maxWidth: '400px' },
|
||
componentProps: {
|
||
checkedValue: true,
|
||
unCheckedValue: false,
|
||
},
|
||
},
|
||
{
|
||
field: 'dataAuthList',
|
||
label: t('权限选择'),
|
||
component: 'ApiSelect',
|
||
colProps: { span: 24 },
|
||
componentProps: {
|
||
mode: 'multiple',
|
||
placeholder: dataAuthPlaceholder,
|
||
api: getAuthList,
|
||
labelField: 'name',
|
||
valueField: 'id',
|
||
getPopupContainer: () => document.body,
|
||
},
|
||
dynamicDisabled: ({ values }) => {
|
||
return !values.isDataAuth;
|
||
},
|
||
},
|
||
];
|
||
const [registerForm, { validate }] = useForm({
|
||
labelWidth: 100,
|
||
schemas: schemas,
|
||
showActionButtonGroup: false,
|
||
actionColOptions: {
|
||
span: 23,
|
||
},
|
||
});
|
||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||
setModalProps({
|
||
confirmLoading: false,
|
||
destroyOnClose: true,
|
||
});
|
||
|
||
columnsInfo.value = await getDatabaselinkMultiTableColumns({
|
||
id: data.databaseId,
|
||
tableNames: data.tableName.toString(),
|
||
});
|
||
for (let key in columnsInfo.value) {
|
||
const generatorConfigInfo = cloneDeep(generatorConfig);
|
||
if (!generatorConfigInfo.databaseId) generatorConfigInfo.databaseId = data.databaseId;
|
||
|
||
const col = columnsInfo.value[key].find((x) => x.primaryKey);
|
||
generatorConfigInfo.tableConfigs = [
|
||
{
|
||
isMain: true,
|
||
order: 1,
|
||
pkField: col.column,
|
||
pkType: col.dataType,
|
||
tableName: key,
|
||
},
|
||
];
|
||
generatorConfigInfo.name = key;
|
||
columnsInfo.value[key].forEach((item) => {
|
||
let info;
|
||
switch (item.dataType) {
|
||
case 'LocalTime':
|
||
info = timeComponentInfo;
|
||
break;
|
||
case 'LocalDateTime':
|
||
info = dateComponentInfo;
|
||
break;
|
||
case 'Integer':
|
||
info = numberComponentInfo;
|
||
break;
|
||
default:
|
||
info = inputComponentInfo;
|
||
break;
|
||
}
|
||
|
||
const componentInfo = cloneDeep(info);
|
||
componentInfo.key = buildUUID().replaceAll('-', '');
|
||
componentInfo.bindTable = key;
|
||
componentInfo.bindField = item.column;
|
||
componentInfo.label = item.column;
|
||
generatorConfigInfo.formJson.list.push(componentInfo);
|
||
|
||
generatorConfigInfo.listConfig.queryConfigs.push({
|
||
fieldName: item.column,
|
||
isDate: ['LocalTime', 'LocalDateTime'].includes(item.dataType),
|
||
width: 8,
|
||
});
|
||
console.log('queryConfigsqueryConfigs', generatorConfigInfo.listConfig.queryConfigs);
|
||
generatorConfigInfo.listConfig.columnConfigs.push({
|
||
key: componentInfo.key,
|
||
autoWidth: true,
|
||
columnName: item.column,
|
||
componentType: 'input',
|
||
isNumber: false,
|
||
isTotal: false,
|
||
label: item.column,
|
||
});
|
||
});
|
||
|
||
const fieldsInfo = columnsInfo.value[key].map((field) => {
|
||
return {
|
||
name: field.column,
|
||
length: field.dataLength,
|
||
type: JavaTypeConvertTsType(field.dataType),
|
||
isPk: field.primaryKey,
|
||
isNullable: field.nullable,
|
||
};
|
||
});
|
||
const tableInfo = [
|
||
{
|
||
name: key,
|
||
fields: fieldsInfo,
|
||
isMain: true,
|
||
},
|
||
];
|
||
generatorConfigInfo.frontCode = buildCode(
|
||
generatorConfigInfo,
|
||
tableInfo,
|
||
buildOption(generatorConfigInfo.formJson) as FormProps,
|
||
);
|
||
|
||
codeList.value.push(generatorConfigInfo);
|
||
}
|
||
});
|
||
|
||
const handleSuccess = async () => {
|
||
const data = await validate();
|
||
codeList.value.map(async (item) => {
|
||
item.outputConfig = { ...item.outputConfig, ...data };
|
||
item.outputConfig.className = item.outputConfig.className! + random(1000, 9999);
|
||
item.outputConfig.outputValue = outputValue.value;
|
||
|
||
const fieldsInfo = columnsInfo.value[item.name!].map((field) => {
|
||
return {
|
||
name: field.column,
|
||
length: field.dataLength,
|
||
type: JavaTypeConvertTsType(field.dataType),
|
||
isPk: field.primaryKey,
|
||
isNullable: field.nullable,
|
||
};
|
||
});
|
||
const tableInfo = [
|
||
{
|
||
name: item.name!,
|
||
fields: fieldsInfo,
|
||
isMain: true,
|
||
},
|
||
];
|
||
item.frontCode = buildCode(item, tableInfo, buildOption(item.formJson) as FormProps);
|
||
|
||
closeModal();
|
||
});
|
||
emit('success', codeList.value);
|
||
};
|
||
</script>
|