初始版本提交
This commit is contained in:
yaoyn
90
src/views/generator/dev/choose.vue
Normal file
90
src/views/generator/dev/choose.vue
Normal file
@ -0,0 +1,90 @@
|
||||
// 代码生成器
|
||||
<template>
|
||||
<div class="p-4 enter-y">
|
||||
<GroupCard :growCardList="items" />
|
||||
<DataFirstModal
|
||||
v-if="state.isShowDataFirst"
|
||||
@register="registerDataFirst"
|
||||
@close="handleClose('isShowDataFirst')"
|
||||
/>
|
||||
<CodeFirstModal
|
||||
v-if="state.isShowCodeFirst"
|
||||
@register="registerCodeFirst"
|
||||
@close="handleClose('isShowCodeFirst')"
|
||||
/>
|
||||
<SimpleTemplateModal
|
||||
v-if="state.isShowSimpleTemplate"
|
||||
@register="registerSimpleTemplate"
|
||||
@close="handleClose('isShowSimpleTemplate')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import GroupCard from './components/GroupCard.vue';
|
||||
import DataFirstModal from './components/DataFirstModal.vue';
|
||||
import CodeFirstModal from './components/CodeFirstModal.vue';
|
||||
import SimpleTemplateModal from './components/SimpleTemplateModal.vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
const { t } = useI18n();
|
||||
const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
|
||||
const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
|
||||
const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
|
||||
import interfaceFirstPng from '/@/assets/images/design/interfaceFirst.png';
|
||||
import dataFirst from '/@/assets/images/design/dataFirst.png';
|
||||
import simpleTemplate from '/@/assets/images/design/simpleTemplate.png';
|
||||
import quickDevelop from '/@/assets/images/design/quickDevelop.png';
|
||||
const router = useRouter();
|
||||
const items = [
|
||||
{
|
||||
name: t('界面优先'),
|
||||
content: t('以界面为基础设计并生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: interfaceFirstPng,
|
||||
func: () => {
|
||||
openCodeFirstModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('数据优先'),
|
||||
content: t('以数据为基础设置生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: dataFirst,
|
||||
func: () => {
|
||||
openDataFirstModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('简易模板'),
|
||||
content: t('通过简单操作生成不需要考虑数据库的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: simpleTemplate,
|
||||
func: () => {
|
||||
openSimpleTemplateModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('快速生成代码'),
|
||||
content: t('根据数据表结构自动快速生成功能代码'),
|
||||
btnName: t('设计功能'),
|
||||
image: quickDevelop,
|
||||
func: () => {
|
||||
router.push({ path: '/dataconfig/database' });
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
isShowDataFirst: true,
|
||||
isShowCodeFirst: true,
|
||||
isShowSimpleTemplate: true,
|
||||
});
|
||||
const handleClose = (modal) => {
|
||||
state[modal] = !state[modal];
|
||||
setTimeout(() => {
|
||||
state[modal] = !state[modal];
|
||||
}, 100);
|
||||
};
|
||||
</script>
|
||||
397
src/views/generator/dev/components/CodeFirstModal.vue
Normal file
397
src/views/generator/dev/components/CodeFirstModal.vue
Normal file
@ -0,0 +1,397 @@
|
||||
// 界面优先
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://www.learun.cn/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('代码生成器 - 界面优先') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('结构配置')" />
|
||||
<a-step :title="t('界面设计')" />
|
||||
<a-step :title="t('代码预览')" />
|
||||
<a-step :title="t('菜单设置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleSaveDraft" v-show="current > 3">{{
|
||||
t('保存草稿')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 5">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleCodeGenerator" v-show="current === 5">
|
||||
{{ t('完成') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 0" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 1" />
|
||||
<StructureConfigStep
|
||||
ref="structureConfigStepRef"
|
||||
:isUpdate="isUpdate"
|
||||
v-show="current === 2"
|
||||
@validate-table="handleStepNext"
|
||||
/>
|
||||
<ViewDesignStep ref="viewDesignStepRef" :isUpdate="isUpdate" v-show="current === 3" />
|
||||
<PreviewCodeStep ref="previewCodeStepRef" v-show="current === 4" />
|
||||
<MenuConfigStep ref="menuConfigStepRef" v-show="current === 5" />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, Ref, defineAsyncComponent } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo, noHaveTableAndField } from '/@/components/Designer';
|
||||
import {
|
||||
codeFirstGeneratorCode,
|
||||
getCodeTemplateInfo,
|
||||
saveDraftGeneratorCode,
|
||||
updateDraftGeneratorCode,
|
||||
} from '/@/api/system/generator';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { GeneratorModel, SaveDraftGeneratorModel } from '/@/api/system/generator/model';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { random } from 'lodash-es';
|
||||
import { LoadingBox } from '/@/components/ModalPanel/index';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||||
import { MenuConfig } from '/@/model/generator/menuConfig';
|
||||
import { FormJson } from '/@/model/generator/codeGenerator';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
const { t } = useI18n();
|
||||
const StructureConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/StructureConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormEventStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormEventStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const ViewDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/ViewDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const MenuConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/MenuConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const PreviewCodeStep = defineAsyncComponent({
|
||||
loader: () => import('./PreviewCodeStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const templateId = ref();
|
||||
const current = ref(0);
|
||||
const isUpdate = ref(false);
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const structureConfigStepRef = ref();
|
||||
const viewDesignStepRef = ref();
|
||||
const previewCodeStepRef = ref();
|
||||
const menuConfigStepRef = ref();
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
const emit = defineEmits(['close', 'register', 'success']);
|
||||
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: '', //数据库id
|
||||
listConfig: {
|
||||
isLeftMenu: false,
|
||||
queryConfigs: [],
|
||||
leftMenuConfig: {
|
||||
// isTree: false,
|
||||
datasourceType: 'static',
|
||||
listFieldName: undefined,
|
||||
apiConfig: {},
|
||||
dictionaryItemId: undefined,
|
||||
menuName: '',
|
||||
parentIcon: '',
|
||||
childIcon: '',
|
||||
staticData: [],
|
||||
},
|
||||
columnConfigs: [],
|
||||
buttonConfigs: [],
|
||||
defaultOrder: true,
|
||||
isPage: true,
|
||||
},
|
||||
tableStructureConfigs: [],
|
||||
formJson: {} as FormJson,
|
||||
menuConfig: {} as MenuConfig,
|
||||
outputConfig: {
|
||||
creator: userStore.getUserInfo.name,
|
||||
isMenu: true,
|
||||
type: 1,
|
||||
},
|
||||
formEventConfig: {} as FormEventColumnConfig,
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'code');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<Ref<boolean>>('isFieldUpper', ref(false));
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = data.isUpdate || false;
|
||||
templateId.value = data.isUpdate ? data.id : '';
|
||||
if (data.isUpdate) {
|
||||
let res = await getCodeTemplateInfo(data.id);
|
||||
if (res.content) {
|
||||
let content = JSON.parse(res.content);
|
||||
const {
|
||||
databaseId,
|
||||
listConfig,
|
||||
formJson,
|
||||
tableStructureConfigs,
|
||||
menuConfig,
|
||||
outputConfig,
|
||||
formEventConfig,
|
||||
} = content;
|
||||
generatorConfig.databaseId = databaseId;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
formJson.list = formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
generatorConfig.formJson = formJson;
|
||||
generatorConfig.tableStructureConfigs = tableStructureConfigs;
|
||||
generatorConfig.menuConfig = menuConfig;
|
||||
generatorConfig.outputConfig = outputConfig;
|
||||
generatorConfig.formEventConfig = formEventConfig || ({} as FormEventColumnConfig);
|
||||
widgetForm.value = formJson;
|
||||
getMainTableFirst(formJson.list);
|
||||
}
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
maskClosable: false,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
});
|
||||
});
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSaveDraft() {
|
||||
menuConfigStepRef.value.getFormData();
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
|
||||
const params: SaveDraftGeneratorModel = {
|
||||
name: generatorConfig!.outputConfig!.className!,
|
||||
type: 1, // 0-数据优先 1-界面优先 2-简易模板
|
||||
content: JSON.stringify(data),
|
||||
remark: generatorConfig!.outputConfig!.comment!,
|
||||
};
|
||||
|
||||
if (templateId.value) {
|
||||
params.id = templateId.value;
|
||||
await updateDraftGeneratorCode(params);
|
||||
} else {
|
||||
await saveDraftGeneratorCode(params);
|
||||
}
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
async function handleCodeGenerator() {
|
||||
const isOk = await stepValidate[5]();
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
if (templateId.value) data.id = templateId.value;
|
||||
|
||||
// await appGeneratorCode(
|
||||
// buildAppCode(generatorConfig, buildAppFormProps(generatorConfig.formJson)),
|
||||
// );
|
||||
|
||||
await codeFirstGeneratorCode(data);
|
||||
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => formDesignStepRef.value.validateStep(),
|
||||
1: () => formEventStepRef.value.validateStep(),
|
||||
2: () => structureConfigStepRef.value.validateStep(),
|
||||
3: () => viewDesignStepRef.value.validateStep(),
|
||||
4: () => previewCodeStepRef.value.validateStep(),
|
||||
5: () => menuConfigStepRef.value.validateStep(),
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
closeModal();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
}
|
||||
} else if (x.type == 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
x.type !== 'form' &&
|
||||
x.type !== 'one-for-one' &&
|
||||
!noHaveTableAndField.includes(x.type)
|
||||
) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
361
src/views/generator/dev/components/DataFirstModal.vue
Normal file
361
src/views/generator/dev/components/DataFirstModal.vue
Normal file
@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://www.learun.cn/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('代码生成器 - 数据优先') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('基本信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('界面设计')" />
|
||||
<a-step :title="t('代码预览')" />
|
||||
<a-step :title="t('菜单设置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleSaveDraft" v-show="current > 3">{{
|
||||
t('保存草稿')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 5">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleCodeGenerator" v-show="current === 5">
|
||||
{{ t('完成') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<TableConfigStep ref="tableConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStep" v-show="current === 2" />
|
||||
<ViewDesignStep ref="viewDesignStep" :isUpdate="isUpdate" v-show="current === 3" />
|
||||
<PreviewCodeStep ref="previewCodeStep" v-show="current === 4" />
|
||||
<MenuConfigStep ref="menuConfigStep" v-show="current === 5" />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, Ref, defineAsyncComponent } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import {
|
||||
dataFirstGeneratorCode,
|
||||
getCodeTemplateInfo,
|
||||
saveDraftGeneratorCode,
|
||||
updateDraftGeneratorCode,
|
||||
} from '/@/api/system/generator';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { GeneratorModel, SaveDraftGeneratorModel } from '/@/api/system/generator/model';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { LoadingBox } from '/@/components/ModalPanel/index';
|
||||
import { MenuConfig } from '/@/model/generator/menuConfig';
|
||||
import { FormJson } from '/@/model/generator/codeGenerator';
|
||||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const TableConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/TableConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormEventStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormEventStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const ViewDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/ViewDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const MenuConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/MenuConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const PreviewCodeStep = defineAsyncComponent({
|
||||
loader: () => import('./PreviewCodeStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const templateId = ref();
|
||||
const current = ref(0);
|
||||
const isUpdate = ref(false);
|
||||
const tableConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStep = ref();
|
||||
const viewDesignStep = ref();
|
||||
const previewCodeStep = ref();
|
||||
const menuConfigStep = ref();
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
|
||||
const emit = defineEmits(['close', 'register', 'success']);
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: null, //数据库id
|
||||
listConfig: {
|
||||
isLeftMenu: false,
|
||||
queryConfigs: [],
|
||||
leftMenuConfig: {
|
||||
// isTree: false,
|
||||
datasourceType: 'static',
|
||||
listFieldName: undefined,
|
||||
apiConfig: {},
|
||||
dictionaryItemId: undefined,
|
||||
menuName: '',
|
||||
parentIcon: '',
|
||||
childIcon: '',
|
||||
staticData: [],
|
||||
},
|
||||
columnConfigs: [],
|
||||
buttonConfigs: [],
|
||||
defaultOrder: true,
|
||||
isPage: true,
|
||||
},
|
||||
tableConfigs: [],
|
||||
formJson: {} as FormJson,
|
||||
menuConfig: {} as MenuConfig,
|
||||
outputConfig: {
|
||||
creator: userStore.getUserInfo.name,
|
||||
isMenu: true,
|
||||
type: 0,
|
||||
},
|
||||
formEventConfig: {} as FormEventColumnConfig,
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'data');
|
||||
provide('widgetForm', widgetForm);
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = data.isUpdate || false;
|
||||
templateId.value = data.isUpdate ? data.id : '';
|
||||
if (data.isUpdate) {
|
||||
let res = await getCodeTemplateInfo(data.id);
|
||||
|
||||
if (res.content) {
|
||||
let content = JSON.parse(res.content);
|
||||
const {
|
||||
databaseId,
|
||||
listConfig,
|
||||
formJson,
|
||||
tableConfigs,
|
||||
menuConfig,
|
||||
outputConfig,
|
||||
formEventConfig,
|
||||
} = content;
|
||||
generatorConfig.databaseId = databaseId;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
formJson.list = formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
generatorConfig.formJson = formJson;
|
||||
generatorConfig.tableConfigs = tableConfigs;
|
||||
generatorConfig.menuConfig = menuConfig;
|
||||
generatorConfig.outputConfig = outputConfig;
|
||||
generatorConfig.formEventConfig = formEventConfig || ({} as FormEventColumnConfig);
|
||||
widgetForm.value = formJson;
|
||||
|
||||
//用于解决打包部署后 TableConfigStep页面加载顺序问题
|
||||
tableConfigStepRef.value?.editFieldsValue();
|
||||
}
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
maskClosable: false,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
});
|
||||
});
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSaveDraft() {
|
||||
menuConfigStep.value.getFormData();
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
|
||||
const params: SaveDraftGeneratorModel = {
|
||||
name: generatorConfig!.outputConfig!.className!,
|
||||
type: 0, // 0-数据优先 1-界面优先 2-简易模板
|
||||
content: JSON.stringify(data),
|
||||
remark: generatorConfig!.outputConfig!.comment!,
|
||||
};
|
||||
|
||||
if (templateId.value) {
|
||||
params.id = templateId.value;
|
||||
await updateDraftGeneratorCode(params);
|
||||
} else {
|
||||
await saveDraftGeneratorCode(params);
|
||||
}
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
async function handleCodeGenerator() {
|
||||
const isOk = await stepValidate[5]();
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
if (templateId.value) data.id = templateId.value;
|
||||
await dataFirstGeneratorCode(data);
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
closeModal();
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => tableConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStep.value.validateStep(),
|
||||
3: () => viewDesignStep.value.validateStep(),
|
||||
4: () => previewCodeStep.value.validateStep(),
|
||||
5: () => menuConfigStep.value.validateStep(),
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
57
src/views/generator/dev/components/GroupCard.vue
Normal file
57
src/views/generator/dev/components/GroupCard.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<a-row :gutter="14">
|
||||
<template v-for="item in growCardList" :key="item.title">
|
||||
<a-col :span="8">
|
||||
<Card size="small" class="w-full !mb-14px">
|
||||
<img :src="item.image" width="300" />
|
||||
<p class="card-name">{{ item.name }}</p>
|
||||
<p class="card-content">{{ item.content }}</p>
|
||||
<a-button type="primary" @click="item.func">{{ item.btnName }}</a-button>
|
||||
</Card>
|
||||
</a-col>
|
||||
</template>
|
||||
</a-row>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
defineProps({
|
||||
growCardList: {
|
||||
type: [Array] as PropType<any[]>,
|
||||
required: true, //表格配置json
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-card:last-child) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
|
||||
.card-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
color: #999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
width: 150px;
|
||||
height: 45px;
|
||||
background: #5e95ff;
|
||||
box-shadow: 0 4px 18px 0 rgb(94 149 255 / 50%);
|
||||
border-radius: 0 30px 30px;
|
||||
border-color: transparent;
|
||||
}
|
||||
</style>
|
||||
160
src/views/generator/dev/components/PreviewCodeStep.vue
Normal file
160
src/views/generator/dev/components/PreviewCodeStep.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-tabs v-model:activeKey="activeKey" size="large">
|
||||
<a-tab-pane key="1" :tab="t('表单页面')">
|
||||
<CodeEditor :mode="MODE.VUE" :value="codes?.formCode" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" :tab="t('列表页面')">
|
||||
<CodeEditor :mode="MODE.VUE" :value="codes?.listCode" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" :tab="t('Api代码')">
|
||||
<CodeEditor :mode="MODE.JS" :value="codes?.apiCode" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" :tab="t('TS类型')">
|
||||
<CodeEditor :mode="MODE.JS" :value="codes?.modelCode" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" :tab="t('Config代码')">
|
||||
<CodeEditor :mode="MODE.JS" :value="codes?.configJsonCode" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" :tab="t('实体类')">
|
||||
<a-tabs v-model:activeKey="entityActiveKey">
|
||||
<a-tab-pane :key="index" :tab="key" v-for="(code, key, index) in codes?.entityCode">
|
||||
<CodeEditor :mode="MODE.VUE" :value="code" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="7" :tab="t('控制器')">
|
||||
<CodeEditor :mode="MODE.JS" :value="codes?.controllerCode" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { inject, Ref, ref, watch } from 'vue';
|
||||
import { CodeEditor, MODE } from '/@/components/CodeEditor';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { ShowFrontCodeModel } from '/@/model/generator/codeGenerator';
|
||||
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { dataFirstPreviewCode, codeFirstPreviewCode } from '/@/api/system/generator';
|
||||
import { upperFirst } from 'lodash-es';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
//是否是自定义表单生成代码
|
||||
isFormGenerator: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const generatorConfig = inject<GeneratorConfig>('generatorConfig') as GeneratorConfig;
|
||||
const tableInfo = inject<Ref<TableInfo[]>>('tableInfo', []);
|
||||
const current = inject<Ref<number>>('current') as Ref<number>;
|
||||
const designType = inject<string>('designType', '');
|
||||
|
||||
const { notification } = useMessage();
|
||||
|
||||
const activeKey = ref('1');
|
||||
const entityActiveKey = ref(0);
|
||||
const isGetCodes = ref<boolean>(false);
|
||||
const codes = ref<ShowFrontCodeModel>();
|
||||
|
||||
watch(
|
||||
() => current.value,
|
||||
(val) => {
|
||||
//如果已经到此步骤 则生成代码显示
|
||||
if (val === 4 || (props.isFormGenerator && val === 2)) {
|
||||
codes.value = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
|
||||
previewCode();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
//获取实体类和控制器的代码
|
||||
const previewCode = async () => {
|
||||
let data;
|
||||
if (designType === 'data' || props.isFormGenerator) {
|
||||
data = await dataFirstPreviewCode(generatorConfig);
|
||||
} else {
|
||||
data = await codeFirstPreviewCode(generatorConfig);
|
||||
}
|
||||
const className = generatorConfig.outputConfig.className;
|
||||
const controller = upperFirst(`${className}Controller`);
|
||||
codes.value!.controllerCode = data.controllerCode[controller];
|
||||
codes.value!.entityCode = data.entityCode;
|
||||
|
||||
isGetCodes.value = true;
|
||||
};
|
||||
|
||||
//验证当前步骤的数据
|
||||
const validateStep = async (): Promise<boolean> => {
|
||||
if (!isGetCodes.value) {
|
||||
setTimeout(() => {
|
||||
validateStep();
|
||||
}, 100);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!codes.value?.apiCode || codes.value?.apiCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`Api代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.modelCode || codes.value?.modelCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`TS类型生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.formCode || codes.value?.formCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`表单页面代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.listCode || codes.value?.listCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`列表页面代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.configJsonCode || codes.value?.configJsonCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`Config配置代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.controllerCode || codes.value?.controllerCode.length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`控制器代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
if (!codes.value?.entityCode || Object.keys(codes.value?.entityCode).length === 0) {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t(`实体类代码生成错误，请联系管理员！`),
|
||||
}); //提示消息
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
defineExpose({ validateStep });
|
||||
</script>
|
||||
97
src/views/generator/dev/components/SelectDatabase.vue
Normal file
97
src/views/generator/dev/components/SelectDatabase.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
@register="registerModal"
|
||||
:title="t('选择数据库')"
|
||||
v-bind="$attrs"
|
||||
:min-height="minHeight"
|
||||
width="800px"
|
||||
@ok="handlerClick"
|
||||
>
|
||||
<BasicTable @register="registerTable" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { useTable, FormSchema, BasicColumn, BasicTable } from '/@/components/Table';
|
||||
import { getDatabaselinkTable } from '/@/api/system/databaselink';
|
||||
import { ref } from 'vue';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { TableConfig } from '/@/model/generator/tableConfig';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'tableName',
|
||||
label: t('表名'),
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
title: t('表名'),
|
||||
dataIndex: 'tableName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: t('备注'),
|
||||
dataIndex: 'tableComment',
|
||||
width: 200,
|
||||
},
|
||||
];
|
||||
|
||||
const databaseId = ref('');
|
||||
|
||||
const minHeight = ref(700);
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const [registerTable, { getSelectRows, setSelectedRowKeys, reload }] = useTable({
|
||||
title: t('数据表列表'),
|
||||
api: getDatabaselinkTable,
|
||||
canResize: false,
|
||||
rowKey: 'tableName',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 50,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选机构id
|
||||
return { ...params, id: databaseId.value };
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'checkbox',
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, canFullscreen: false });
|
||||
setSelectedRowKeys(data.selectTableName);
|
||||
databaseId.value = data.databaseId;
|
||||
reload({ searchInfo: { id: databaseId.value } });
|
||||
});
|
||||
|
||||
const handlerClick = () => {
|
||||
const selectRows = getSelectRows() as TableConfig[];
|
||||
if (selectRows.length === 0) {
|
||||
createMessage.error(t('至少需要选择一个数据表！'));
|
||||
return;
|
||||
}
|
||||
selectRows.map((item, index) => {
|
||||
item.order = index + 1;
|
||||
if (index === 0) {
|
||||
item.isMain = true;
|
||||
} else {
|
||||
item.isMain = false;
|
||||
}
|
||||
});
|
||||
emit('success', selectRows);
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
401
src/views/generator/dev/components/SimpleTemplateModal.vue
Normal file
401
src/views/generator/dev/components/SimpleTemplateModal.vue
Normal file
@ -0,0 +1,401 @@
|
||||
// 简易模板
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://www.learun.cn/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('代码生成器 - 简易模板') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('结构配置')" />
|
||||
<a-step :title="t('界面设计')" />
|
||||
<a-step :title="t('代码预览')" />
|
||||
<a-step :title="t('菜单设置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleSaveDraft" v-show="current > 3">{{
|
||||
t('保存草稿')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 5">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleCodeGenerator" v-show="current === 5">
|
||||
{{ t('完成') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 0" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 1" />
|
||||
<StructureConfigStep
|
||||
ref="structureConfigStepRef"
|
||||
:isUpdate="isUpdate"
|
||||
v-show="current === 2"
|
||||
@validate-table="handleStepNext"
|
||||
/>
|
||||
<ViewDesignStep ref="viewDesignStepRef" :isUpdate="isUpdate" v-show="current === 3" />
|
||||
<PreviewCodeStep ref="previewCodeStepRef" v-show="current === 4" />
|
||||
<MenuConfigStep ref="menuConfigStepRef" v-show="current === 5" />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, Ref, defineAsyncComponent, onMounted } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo, noHaveTableAndField, upperFieldDb } from '/@/components/Designer';
|
||||
import {
|
||||
codeFirstGeneratorCode,
|
||||
getCodeTemplateInfo,
|
||||
saveDraftGeneratorCode,
|
||||
updateDraftGeneratorCode,
|
||||
getMasterInfo,
|
||||
} from '/@/api/system/generator';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { GeneratorModel, SaveDraftGeneratorModel } from '/@/api/system/generator/model';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { random } from 'lodash-es';
|
||||
import { LoadingBox } from '/@/components/ModalPanel/index';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { FormJson } from '/@/model/generator/codeGenerator';
|
||||
import { MenuConfig } from '/@/model/generator/menuConfig';
|
||||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const StructureConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/StructureConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const FormEventStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/FormEventStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const ViewDesignStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/ViewDesignStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const MenuConfigStep = defineAsyncComponent({
|
||||
loader: () => import('/@/components/CreateCodeStep/src/MenuConfigStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
const PreviewCodeStep = defineAsyncComponent({
|
||||
loader: () => import('./PreviewCodeStep.vue'),
|
||||
loadingComponent: LoadingBox,
|
||||
});
|
||||
|
||||
const userStore = useUserStore();
|
||||
const isUpdate = ref(false);
|
||||
const current = ref(0);
|
||||
const templateId = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const structureConfigStepRef = ref();
|
||||
const viewDesignStepRef = ref();
|
||||
const previewCodeStepRef = ref();
|
||||
const menuConfigStepRef = ref();
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
const emit = defineEmits(['close', 'register', 'success']);
|
||||
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const isFieldUpper = ref<boolean>(false);
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: 'master', //数据库id
|
||||
listConfig: {
|
||||
isLeftMenu: false,
|
||||
queryConfigs: [],
|
||||
leftMenuConfig: {
|
||||
// isTree: false,
|
||||
datasourceType: 'static',
|
||||
listFieldName: undefined,
|
||||
apiConfig: {},
|
||||
dictionaryItemId: undefined,
|
||||
menuName: '',
|
||||
parentIcon: '',
|
||||
childIcon: '',
|
||||
staticData: [],
|
||||
},
|
||||
columnConfigs: [],
|
||||
buttonConfigs: [],
|
||||
defaultOrder: true,
|
||||
isPage: true,
|
||||
},
|
||||
|
||||
formJson: {} as FormJson,
|
||||
tableStructureConfigs: [],
|
||||
menuConfig: {} as MenuConfig,
|
||||
outputConfig: {
|
||||
creator: userStore.getUserInfo.name,
|
||||
isMenu: true,
|
||||
type: 2,
|
||||
},
|
||||
formEventConfig: {} as FormEventColumnConfig,
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'template');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<Ref<boolean>>('isFieldUpper', isFieldUpper);
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await getMasterInfo();
|
||||
isFieldUpper.value = upperFieldDb.includes(res?.dbType || '');
|
||||
mainTableName.value = isFieldUpper.value
|
||||
? mainTableName.value.toUpperCase()
|
||||
: mainTableName.value;
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = data.isUpdate || false;
|
||||
templateId.value = data.isUpdate ? data.id : '';
|
||||
if (data.isUpdate) {
|
||||
let res = await getCodeTemplateInfo(data.id);
|
||||
if (res.content) {
|
||||
let content = JSON.parse(res.content);
|
||||
const {
|
||||
databaseId,
|
||||
listConfig,
|
||||
formJson,
|
||||
tableStructureConfigs,
|
||||
menuConfig,
|
||||
outputConfig,
|
||||
formEventConfig,
|
||||
} = content;
|
||||
generatorConfig.databaseId = databaseId;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
formJson.list = formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
generatorConfig.formJson = formJson;
|
||||
generatorConfig.tableStructureConfigs = tableStructureConfigs;
|
||||
generatorConfig.menuConfig = menuConfig;
|
||||
generatorConfig.outputConfig = outputConfig;
|
||||
generatorConfig.formEventConfig = formEventConfig || ({} as FormEventColumnConfig);
|
||||
widgetForm.value = formJson;
|
||||
getMainTableFirst(formJson.list);
|
||||
}
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
draggable: false,
|
||||
maskClosable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
});
|
||||
});
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSaveDraft() {
|
||||
menuConfigStepRef.value.getFormData();
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
|
||||
const params: SaveDraftGeneratorModel = {
|
||||
name: generatorConfig!.outputConfig!.className!,
|
||||
type: 2, // 0-数据优先 1-界面优先 2-简易模板
|
||||
content: JSON.stringify(data),
|
||||
remark: generatorConfig!.outputConfig!.comment!,
|
||||
};
|
||||
if (templateId.value) {
|
||||
params.id = templateId.value;
|
||||
await updateDraftGeneratorCode(params);
|
||||
} else {
|
||||
await saveDraftGeneratorCode(params);
|
||||
}
|
||||
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
async function handleCodeGenerator() {
|
||||
const isOk = await stepValidate[5]();
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
);
|
||||
if (templateId.value) data.id = templateId.value;
|
||||
await codeFirstGeneratorCode(data);
|
||||
handleClose();
|
||||
emit('success');
|
||||
}
|
||||
const handleClose = () => {
|
||||
closeModal();
|
||||
emit('close');
|
||||
};
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => formDesignStepRef.value.validateStep(),
|
||||
1: () => formEventStepRef.value.validateStep(),
|
||||
2: () => structureConfigStepRef.value.validateStep(),
|
||||
3: () => viewDesignStepRef.value.validateStep(),
|
||||
4: () => previewCodeStepRef.value.validateStep(),
|
||||
5: () => menuConfigStepRef.value.validateStep(),
|
||||
};
|
||||
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
}
|
||||
} else if (x.type == 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (
|
||||
x.type !== 'form' &&
|
||||
x.type !== 'one-for-one' &&
|
||||
!noHaveTableAndField.includes(x.type)
|
||||
) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user