init
This commit is contained in:
吴红兵
171
src/views/gen/table/add-dict.vue
Normal file
171
src/views/gen/table/add-dict.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<el-dialog title="新增字典" v-model="visible" width="600">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="100px" ref="dicDialogFormRef" v-loading="loading">
|
||||
<el-form-item :label="$t('sysdict.systemFlag')" prop="systemFlag">
|
||||
<el-radio-group v-model="dataForm.systemFlag">
|
||||
<el-radio border :key="index" :label="item.value" v-for="(item, index) in dict_type">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('sysdict.dictType')" prop="dictType">
|
||||
<el-input :placeholder="$t('sysdict.inputDictTypeTip')" :disabled="dataForm.id !== ''" clearable v-model="dataForm.dictType"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('sysdict.description')" prop="description">
|
||||
<el-input :placeholder="$t('sysdict.inputDescriptionTip')" clearable v-model="dataForm.description"></el-input>
|
||||
</el-form-item>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('dictItem.name')" prop="columns">
|
||||
<el-table :data="dataForm.columns" border style="width: 100%" max-height="500">
|
||||
<el-table-column type="index" :label="t('createTable.index')" width="50">
|
||||
<template #header>
|
||||
<el-button icon="Plus" size="small" type="primary" circle @click="onAddItem"></el-button>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button icon="Minus" size="small" type="danger" circle @click="handleDelete(scope.$index)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="label" :label="$t('dictItem.label')" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.label" :placeholder="t('dictItem.inputLabelTip')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" :label="$t('dictItem.itemValue')" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.value" :placeholder="t('dictItem.inputItemValueTip')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="systemDicDialog" setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { addItemObj, addObj, validateDictType } from '/@/api/admin/dict';
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { rule } from '/@/utils/validate';
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
const { dict_type } = useDict('dict_type');
|
||||
const { t } = useI18n();
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const selectRow = ref({});
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dictType: '',
|
||||
description: '',
|
||||
systemFlag: '0',
|
||||
remarks: '',
|
||||
columns: [] as any,
|
||||
});
|
||||
|
||||
const dataRules = reactive({
|
||||
dictType: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{ required: true, message: '类型不能为空', trigger: 'blur' },
|
||||
{ validator: rule.validatorNameCn, trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateDictType(rule, value, callback, dataForm.id !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
systemFlag: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
|
||||
description: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '描述不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
columns: [{ required: true, message: '字典项不能为空', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = () => {
|
||||
visible.value = true;
|
||||
dataForm.id = '';
|
||||
nextTick(() => {
|
||||
dicDialogFormRef.value?.resetFields();
|
||||
});
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = async () => {
|
||||
const valid = await dicDialogFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
|
||||
// 验证字典项是否为空
|
||||
if (dataForm.columns.length === 0) {
|
||||
useMessage().error(t('dictItem.emptyItemsError'));
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证字典项的label和value是否为空
|
||||
for (let i = 0; i < dataForm.columns.length; i++) {
|
||||
const item = dataForm.columns[i];
|
||||
if (!item.label) {
|
||||
useMessage().error(t('dictItem.labelRequired'));
|
||||
return false;
|
||||
}
|
||||
if (!item.value) {
|
||||
useMessage().error(t('dictItem.valueRequired'));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
// 添加字典
|
||||
const { data } = await addObj(dataForm);
|
||||
|
||||
// 添加字典项
|
||||
const promises = dataForm.columns.map(async (item: any) => {
|
||||
item.dictId = data.id;
|
||||
item.dictType = dataForm.dictType;
|
||||
return addItemObj(item);
|
||||
});
|
||||
|
||||
await Promise.all(promises);
|
||||
|
||||
useMessage().success(t('common.addSuccessText'));
|
||||
visible.value = false;
|
||||
emit('refresh', dataForm.dictType);
|
||||
} catch (err: any) {
|
||||
useMessage().error(err.msg);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
let index = 1;
|
||||
const onAddItem = () => {
|
||||
dataForm.columns.push({ sortOrder: `${index++}` });
|
||||
};
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
dataForm.columns.splice(index, 1);
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
281
src/views/gen/table/batchGenDialog.vue
Normal file
281
src/views/gen/table/batchGenDialog.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<el-dialog :title="$t('gen.batchGenBtn')" v-model="visible" :close-on-click-modal="false" width="600px">
|
||||
<el-form :model="form" ref="dataFormRef" label-width="120px">
|
||||
<el-form-item :label="$t('gen.author')" prop="author">
|
||||
<el-input v-model="form.author" :placeholder="$t('gen.inputAuthorTip')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.packageName')" prop="packageName">
|
||||
<el-input v-model="form.packageName" :placeholder="$t('gen.inputPackageNameTip')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.moduleName')" prop="moduleName">
|
||||
<el-input v-model="form.moduleName" :placeholder="$t('gen.inputModuleNameTip')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.style')" prop="style">
|
||||
<el-select v-model="form.style" :placeholder="$t('gen.inputStyleTip')">
|
||||
<el-option v-for="item in styleList" :key="item.id" :label="item.groupName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.parentMenu')" prop="syncMenuId">
|
||||
<el-tree-select
|
||||
v-model="form.syncMenuId"
|
||||
:data="menuList"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
value-key="id"
|
||||
placeholder="选择所属菜单"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
class="w100"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="syncRoute">
|
||||
<template #label>
|
||||
{{ $t('gen.syncRoute') }}
|
||||
<tip :content="`微服务架构下会自动创建一条【/${form.moduleName}】的网关路由，存在则跳过`" />
|
||||
</template>
|
||||
<el-radio-group v-model="form.syncRoute">
|
||||
<el-radio label="0">{{ $t('gen.syncRouteManual') }}</el-radio>
|
||||
<el-radio label="1">{{ $t('gen.syncRouteAuto') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.formLayout')" prop="formLayout">
|
||||
<el-radio-group v-model="form.formLayout">
|
||||
<el-radio :label="1">{{ $t('gen.formLayoutOne') }}</el-radio>
|
||||
<el-radio :label="2">{{ $t('gen.formLayoutTwo') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('gen.genType')" prop="generatorType">
|
||||
<el-radio-group v-model="form.generatorType">
|
||||
<el-radio label="0">{{ $t('gen.genTypeZip') }}</el-radio>
|
||||
<el-radio label="1">{{ $t('gen.genTypeCustom') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item prop="backendPath" v-if="form.generatorType === '1'">
|
||||
<template #label>
|
||||
<span>{{ $t('gen.backendPath') }}</span>
|
||||
<tip :content="$t('gen.backendPathTip')" />
|
||||
</template>
|
||||
<el-input :placeholder="$t('gen.inputBackendPathTip')" v-model="form.backendPath"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="frontendPath" v-if="form.generatorType === '1'">
|
||||
<template #label>
|
||||
<span>{{ $t('gen.frontendPath') }}</span>
|
||||
<tip :content="$t('gen.frontendPathTip')" />
|
||||
</template>
|
||||
<el-input :placeholder="$t('gen.inputFrontendPathTip')" v-model="form.frontendPath"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="debouncedHandleSubmit" :loading="loading">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { groupList, useSyncTableApi, putObj, useGeneratorCodeApi } from '/@/api/gen/table';
|
||||
import { pageList as menuListApi } from '/@/api/admin/menu';
|
||||
import { downBlobFile } from '/@/utils/other';
|
||||
import { Local } from '/@/utils/storage';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// 基础状态变量
|
||||
const visible = ref(false); // 对话框显示状态
|
||||
const loading = ref(false); // 加载状态
|
||||
const dataFormRef = ref(); // 表单引用
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
author: 'cloud', // 作者
|
||||
packageName: 'net.cyweb.cloud', // 包名
|
||||
moduleName: 'admin', // 模块名
|
||||
style: '', // 样式
|
||||
syncMenuId: '', // 同步菜单ID
|
||||
syncRoute: '0', // 同步路由方式
|
||||
formLayout: 1, // 表单布局
|
||||
generatorType: '0', // 生成类型
|
||||
tableIds: [] as string[], // 表ID列表
|
||||
dsName: '', // 数据源名称
|
||||
frontendPath: '', // 前端路径
|
||||
backendPath: '', // 后端路径
|
||||
});
|
||||
|
||||
// 数据存储
|
||||
const styleList = ref<{ id: string; groupName: string }[]>([]); // 样式列表
|
||||
const menuList = ref([]); // 菜单列表
|
||||
const selectedTables = ref<any[]>([]); // 选中的表
|
||||
const dsName = ref(''); // 数据源名称
|
||||
const syncedTableMetas = ref<any[]>([]); // 同步后的表元数据
|
||||
|
||||
/**
|
||||
* 打开批量生成对话框
|
||||
* @param tables 选中的表列表
|
||||
* @param currentDsName 当前数据源名称
|
||||
*/
|
||||
const openDialog = async (tables: any[], currentDsName: string) => {
|
||||
// 初始化对话框状态
|
||||
visible.value = true;
|
||||
selectedTables.value = tables;
|
||||
dsName.value = currentDsName;
|
||||
syncedTableMetas.value = [];
|
||||
|
||||
// 重置表单字段
|
||||
dataFormRef.value?.resetFields();
|
||||
|
||||
// 设置动态表单值
|
||||
form.dsName = currentDsName;
|
||||
form.tableIds = tables.map((t) => t.id);
|
||||
|
||||
// 同步表结构
|
||||
if (tables?.length > 0) {
|
||||
loading.value = true;
|
||||
ElMessage.info(t('gen.syncingTables'));
|
||||
|
||||
try {
|
||||
// 并发同步所有选中的表
|
||||
const syncResults = await Promise.allSettled(
|
||||
tables.map((table) =>
|
||||
useSyncTableApi(currentDsName, table.name).then((response) => {
|
||||
// 只返回有效的表元数据
|
||||
return response.data?.id && response.data?.tableName ? response.data : null;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
// 收集成功同步的表元数据
|
||||
syncedTableMetas.value = syncResults
|
||||
.filter((result): result is PromiseFulfilledResult<any> => result.status === 'fulfilled' && result.value !== null)
|
||||
.map((result) => result.value);
|
||||
|
||||
// 显示同步结果
|
||||
if (syncedTableMetas.value.length > 0) {
|
||||
ElMessage.success(t('gen.allTablesSyncedSuccessfully'));
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载本地存储的路径
|
||||
loadStoredPaths();
|
||||
|
||||
// 获取分组和菜单列表
|
||||
await Promise.all([getGroupList(), getMenuList()]);
|
||||
};
|
||||
|
||||
/**
|
||||
* 从本地存储加载路径配置
|
||||
*/
|
||||
const loadStoredPaths = () => {
|
||||
// 加载前端路径
|
||||
const localFrontendPath = Local.get('frontendPath');
|
||||
form.frontendPath = localFrontendPath || '';
|
||||
|
||||
// 加载后端路径
|
||||
const localBackendPath = Local.get('backendPath');
|
||||
form.backendPath = localBackendPath || '';
|
||||
};
|
||||
|
||||
// Watch for path changes and save to local storage
|
||||
watch(
|
||||
() => form.frontendPath,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
Local.set('frontendPath', newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => form.backendPath,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
Local.set('backendPath', newVal);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取代码生成样式分组列表
|
||||
*/
|
||||
const getGroupList = async () => {
|
||||
const { data } = await groupList();
|
||||
styleList.value = data || [];
|
||||
|
||||
// 设置默认样式
|
||||
if (data?.length > 0) {
|
||||
form.style = data[0].id;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取菜单列表
|
||||
*/
|
||||
const getMenuList = async () => {
|
||||
const { data } = await menuListApi();
|
||||
menuList.value = data || [];
|
||||
};
|
||||
|
||||
/**
|
||||
* 处理表单提交
|
||||
*/
|
||||
const handleSubmit = async () => {
|
||||
// 表单验证
|
||||
const valid = await dataFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
// 确保有已同步的表
|
||||
if (!syncedTableMetas.value?.length) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// 更新表元数据并收集成功的表ID
|
||||
const putResults = await Promise.allSettled(syncedTableMetas.value.map((meta) => putObj({ id: meta.id, ...form }).then(() => meta.id)));
|
||||
|
||||
// 筛选成功更新的表ID
|
||||
const tableIdsForGeneration = putResults
|
||||
.filter((result): result is PromiseFulfilledResult<string> => result.status === 'fulfilled' && Boolean(result.value))
|
||||
.map((result) => result.value);
|
||||
|
||||
// 没有可生成的表，直接返回
|
||||
if (!tableIdsForGeneration.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 执行代码生成
|
||||
if (form.generatorType === '0') {
|
||||
// 生成ZIP下载
|
||||
const fileName = form.moduleName ? `${form.moduleName}.zip` : 'generated_code.zip';
|
||||
await downBlobFile(`/gen/generator/download?tableIds=${tableIdsForGeneration.join(',')}`, {}, fileName);
|
||||
} else {
|
||||
// 生成到指定路径
|
||||
await useGeneratorCodeApi(tableIdsForGeneration);
|
||||
}
|
||||
|
||||
// 操作成功提示并关闭对话框
|
||||
ElMessage.success(t('common.optSuccessText'));
|
||||
visible.value = false;
|
||||
} catch (error) {
|
||||
ElMessage.error(t('gen.generationFailed'));
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedHandleSubmit = useDebounceFn(handleSubmit, 500);
|
||||
|
||||
// 向外暴露方法
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
142
src/views/gen/table/child.vue
Normal file
142
src/views/gen/table/child.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" title="子表配置" draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" ref="dataFormRef">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="childTableName">
|
||||
<template #label> 子表名<tip content="关联表的子表，例如一对多中的存储多信息的表" /> </template>
|
||||
<el-select placeholder="请选择子表" v-model="form.childTableName" filterable @change="getChildTableColumnList">
|
||||
<el-option :key="item" :label="item" :value="item" v-for="item in childTableList"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="mainField">
|
||||
<template #label> 主表字段<tip content="一般为主表的主键字段" /> </template>
|
||||
<el-select placeholder="请选关联字段" v-model="form.mainField" filterable>
|
||||
<el-option :key="item" :label="item" :value="item" v-for="item in mainTableColumnList"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="childField">
|
||||
<template #label> 子表字段<tip content="子表中对应主表主键的关联字段" /> </template>
|
||||
<el-select placeholder="请选关联字段" v-model="form.childField" filterable>
|
||||
<el-option :key="item" :label="item" :value="item" v-for="item in childTableColumnList"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onClear">清空</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts" name="child">
|
||||
import {useListTableApi, useListTableColumnApi, useSyncTableApi} from '/@/api/gen/table';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
defineProps({
|
||||
modelValue: Object,
|
||||
});
|
||||
|
||||
const visible = ref(false);
|
||||
const dataFormRef = ref();
|
||||
const form = reactive({
|
||||
childTableName: '',
|
||||
mainField: '',
|
||||
childField: '',
|
||||
});
|
||||
|
||||
const dataRules = ref({
|
||||
childTableName: [{ required: true, message: '请选择子表', trigger: 'blur' }],
|
||||
mainField: [{ required: true, message: '请选择关联字段', trigger: 'blur' }],
|
||||
childField: [{ required: true, message: '请选择关联字段', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
const childTableList = ref();
|
||||
const childTableColumnList = ref();
|
||||
const mainTableColumnList = ref();
|
||||
const currentDsName = ref('');
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row: any) => {
|
||||
currentDsName.value = row.dsName;
|
||||
visible.value = true;
|
||||
|
||||
getAllTable(row.dsName);
|
||||
getAllField(row.dsName, row.tableName);
|
||||
if (row.childTableName) {
|
||||
form.childTableName = row.childTableName;
|
||||
form.mainField = row.mainField;
|
||||
form.childField = row.childField;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前数据下的所有表
|
||||
const getAllTable = (dsName: string) => {
|
||||
useListTableApi(dsName).then((res) => {
|
||||
childTableList.value = res.data.map((item: any) => item.name);
|
||||
});
|
||||
};
|
||||
|
||||
// 获取对应表的所有字段
|
||||
const getAllField = (dsName: string, tableName: string) => {
|
||||
useListTableColumnApi(dsName, tableName).then((res) => {
|
||||
mainTableColumnList.value = res.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 获取子表的全部字段
|
||||
const getChildTableColumnList = (val: string) => {
|
||||
form.childField = '';
|
||||
useListTableColumnApi(currentDsName.value, val).then((res) => {
|
||||
childTableColumnList.value = res.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 确认提交
|
||||
const onSubmit = async () => {
|
||||
const valid = await dataFormRef.value.validate().catch(() => {});
|
||||
if (!valid) return false;
|
||||
// 同步子表数据
|
||||
useSyncTableApi(currentDsName.value,form.childTableName).then(() => {
|
||||
useMessage().success('子表信息同步成功')
|
||||
});
|
||||
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 清空子表配置，后台当单表处理
|
||||
const onClear = () => {
|
||||
form.childTableName = '';
|
||||
form.mainField = '';
|
||||
form.childField = '';
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => form,
|
||||
(val) => {
|
||||
emit('update:modelValue', val);
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
371
src/views/gen/table/edit.vue
Normal file
371
src/views/gen/table/edit.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName">
|
||||
<!-- 属性设置面板 -->
|
||||
<el-tab-pane label="属性设置" name="field">
|
||||
<sc-form-table ref="fieldTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" drag-sort placeholder="暂无数据">
|
||||
<el-table-column label="主键" prop="primaryPk" width="80" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.primaryPk" true-label="1" false-label="0" disabled></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段名" prop="fieldName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="属性名" prop="attrName" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.attrName" placeholder="请输入属性名"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.fieldComment" placeholder="请输入说明"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字段类型" prop="fieldType" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="属性类型" prop="attrType" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.attrType" placeholder="请选择属性类型" @change="handleChangeRow(row)">
|
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="自动填充" prop="autoFill" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.autoFill" placeholder="请选择类型">
|
||||
<el-option v-for="item in fillList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典名称" prop="fieldDict" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.fieldDict" placeholder="请选择类型" filterable clearable :disabled="row.primaryPk === '1'">
|
||||
<template #prefix>
|
||||
<el-button icon="Plus" type="primary" link @click.stop="handleAddDict(row)"></el-button>
|
||||
</template>
|
||||
<el-option v-for="item in fieldDictList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</el-tab-pane>
|
||||
<!-- 列表设置面板 -->
|
||||
<el-tab-pane label="列表查询" name="third">
|
||||
<sc-form-table ref="gridTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
|
||||
<el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="列表显示" prop="gridItem" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.gridItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否排序" prop="gridSort" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.gridSort" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询显示" prop="gridSort" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.queryItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询表单类型" prop="queryFormType" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.queryFormType" placeholder="请选择查询表单类型" :disabled="row.primaryPk === '1'">
|
||||
<el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" prop="queryType" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.queryType" placeholder="请选择查询方式" :disabled="row.primaryPk === '1'">
|
||||
<el-option v-for="item in queryList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="表单页面" name="form">
|
||||
<sc-form-table ref="formTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
|
||||
<el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="表单类型" prop="formType" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.formType" placeholder="请选择表单类型" :disabled="row.primaryPk === '1'">
|
||||
<el-option v-for="item in formTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否显示" prop="formItem" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.formItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单必填" prop="formRequired" width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.formRequired" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单效验" prop="formValidator" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.formValidator" placeholder="请选择表单效验" :disabled="row.primaryPk === '1'" clearable>
|
||||
<el-option v-for="item in formValidatorList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</sc-form-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 新增字典 -->
|
||||
<form-dialog ref="formDialogRef" @refresh="handleDictRefresh" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTableFieldSubmitApi, useTableApi, fetchDictList } from '/@/api/gen/table';
|
||||
import { list } from '/@/api/gen/fieldtype';
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
const scFormTable = defineAsyncComponent(() => import('/@/components/FormTable/index.vue'));
|
||||
const FormDialog = defineAsyncComponent(() => import('./add-dict.vue'));
|
||||
|
||||
const activeName = ref();
|
||||
const tableId = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
tableName: {
|
||||
type: String,
|
||||
},
|
||||
dsName: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const sortable = ref() as any;
|
||||
|
||||
const formDialogRef = ref();
|
||||
const typeList = ref([]) as any;
|
||||
const fieldDictList = ref([]) as any;
|
||||
const selectRow = ref();
|
||||
const dsName = ref();
|
||||
const tableName = ref();
|
||||
|
||||
const fieldList = ref([]);
|
||||
const fillList = reactive([
|
||||
{ label: 'DEFAULT', value: 'DEFAULT' },
|
||||
{ label: 'INSERT', value: 'INSERT' },
|
||||
{ label: 'UPDATE', value: 'UPDATE' },
|
||||
{ label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' },
|
||||
]);
|
||||
|
||||
const queryList = reactive([
|
||||
{ label: '=', value: '=' },
|
||||
{ label: '!=', value: '!=' },
|
||||
{ label: '>', value: '>' },
|
||||
{ label: '>=', value: '>=' },
|
||||
{ label: '<', value: '<' },
|
||||
{ label: '<=', value: '<=' },
|
||||
{ label: 'like', value: 'like' },
|
||||
{ label: 'left like', value: 'left like' },
|
||||
{ label: 'right like', value: 'right like' },
|
||||
]);
|
||||
|
||||
const formTypeList = reactive([
|
||||
{ label: '单行文本', value: 'text' },
|
||||
{ label: '多行文本', value: 'textarea' },
|
||||
{ label: '数字', value: 'number' },
|
||||
{ label: '富文本编辑器', value: 'editor' },
|
||||
{ label: '下拉框', value: 'select' },
|
||||
{ label: '单选按钮', value: 'radio' },
|
||||
{ label: '复选框', value: 'checkbox' },
|
||||
{ label: '日期', value: 'date' },
|
||||
{ label: '日期时间', value: 'datetime' },
|
||||
{ label: '文件上传', value: 'upload-file' },
|
||||
{ label: '图片上传', value: 'upload-img' },
|
||||
]);
|
||||
|
||||
const queryTypeList = reactive([
|
||||
{ label: '单行文本', value: 'text' },
|
||||
{ label: '多行文本', value: 'textarea' },
|
||||
{ label: '数字', value: 'number' },
|
||||
{ label: '下拉框', value: 'select' },
|
||||
{ label: '单选按钮', value: 'radio' },
|
||||
{ label: '复选框', value: 'checkbox' },
|
||||
{ label: '日期', value: 'date' },
|
||||
{ label: '日期时间', value: 'datetime' },
|
||||
]);
|
||||
|
||||
const formValidatorList = reactive([
|
||||
{ label: '去重', value: 'duplicate' },
|
||||
{ label: '数字', value: 'number' },
|
||||
{ label: '字母', value: 'letter' },
|
||||
{ label: '字母和数字', value: 'letterAndNumber' },
|
||||
{ label: '手机号码', value: 'mobilePhone' },
|
||||
{ label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded' },
|
||||
{ label: '禁止中文输入', value: 'noChinese' },
|
||||
{ label: '必须中文输入', value: 'chinese' },
|
||||
{ label: '电子邮箱', value: 'email' },
|
||||
{ label: 'URL网址', value: 'url' },
|
||||
]);
|
||||
|
||||
const propToType = reactive({
|
||||
tinyint: 'number',
|
||||
smallint: 'number',
|
||||
mediumint: 'number',
|
||||
int: 'number',
|
||||
integer: 'number',
|
||||
bigint: 'number',
|
||||
float: 'number',
|
||||
datetime: 'datetime',
|
||||
LocalDateTime: 'datetime',
|
||||
date: 'date',
|
||||
LocalDate: 'date',
|
||||
Long: 'number',
|
||||
Float: 'number',
|
||||
Double: 'number',
|
||||
BigDecimal: 'number',
|
||||
text: 'textarea',
|
||||
String: 'text',
|
||||
longtext: 'editor',
|
||||
bit: 'radio',
|
||||
Boolean: 'radio',
|
||||
char: 'radio',
|
||||
varchar: 'text',
|
||||
});
|
||||
|
||||
/**
|
||||
* 属性修改触发事件
|
||||
* @param row
|
||||
*/
|
||||
const handleChangeRow = (row: any) => {
|
||||
row.queryFormType = propToType[row.attrType];
|
||||
row.formType = propToType[row.attrType];
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加字典
|
||||
* @param row
|
||||
*/
|
||||
const handleAddDict = (row: object) => {
|
||||
selectRow.value = row;
|
||||
formDialogRef.value.openDialog();
|
||||
};
|
||||
|
||||
/**
|
||||
* 刷新字典
|
||||
* @param dictType
|
||||
*/
|
||||
const handleDictRefresh = async (dictType: string) => {
|
||||
await getDictList();
|
||||
selectRow.value.fieldDict = dictType;
|
||||
};
|
||||
|
||||
const openDialog = (dName: string, tName: string) => {
|
||||
visible.value = true;
|
||||
tableName.value = tName;
|
||||
dsName.value = dName;
|
||||
|
||||
activeName.value = 'field';
|
||||
|
||||
rowDrop();
|
||||
getTable(dName, tName);
|
||||
getFieldTypeList();
|
||||
getDictList();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
tableName.value = String(props.tableName);
|
||||
dsName.value = String(props.dsName);
|
||||
activeName.value = 'field';
|
||||
rowDrop();
|
||||
getTable(dsName.value, tableName.value);
|
||||
getFieldTypeList();
|
||||
getDictList();
|
||||
});
|
||||
|
||||
const rowDrop = () => {
|
||||
nextTick(() => {
|
||||
const el: any = window.document.querySelector('#pane-field');
|
||||
sortable.value = Sortable.create(el, {
|
||||
handle: '.drag-btn',
|
||||
onEnd: (e: any) => {
|
||||
const { newIndex, oldIndex } = e;
|
||||
const currRow = fieldList.value.splice(oldIndex, 1)[0];
|
||||
fieldList.value.splice(newIndex, 0, currRow);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const getTable = (dsName: string, tableName: string) => {
|
||||
fieldList.value = []; // 避免第一次数据初始化， 表格显示历史数据
|
||||
loading.value = true;
|
||||
useTableApi(dsName, tableName)
|
||||
.then((res) => {
|
||||
tableId.value = res.data.id;
|
||||
fieldList.value = res.data.fieldList.map((item) => {
|
||||
item.queryFormType ? item.queryFormType : propToType[item.fieldType];
|
||||
item.formType ? item.formType : propToType[item.fieldType];
|
||||
return item;
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const getFieldTypeList = async () => {
|
||||
typeList.value = [];
|
||||
// 获取数据
|
||||
const { data } = await list();
|
||||
// 设置属性类型值
|
||||
const typeMap = new Map();
|
||||
data.forEach((item: any) => {
|
||||
const { attrType, columnType } = item;
|
||||
if (!typeMap.has(attrType)) {
|
||||
typeMap.set(attrType, columnType);
|
||||
typeList.value.push({ label: attrType, value: attrType });
|
||||
}
|
||||
});
|
||||
// 增加Object类型
|
||||
typeList.value.push({ label: 'Object', value: 'Object' });
|
||||
};
|
||||
|
||||
const getDictList = () => {
|
||||
fetchDictList().then((res) => {
|
||||
for (const item of res.data) {
|
||||
fieldDictList.value.push({ label: item.description, value: item.dictType });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
return new Promise((resolve) => {
|
||||
useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
|
||||
resolve(tableId.value);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
submitHandle,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sortable-row-gen .drag-btn {
|
||||
cursor: move;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sortable-row-gen .vxe-body--row.sortable-ghost,
|
||||
.sortable-row-gen .vxe-body--row.sortable-chosen {
|
||||
background-color: #dfecfb;
|
||||
}
|
||||
|
||||
.vxe-select–panel {
|
||||
z-index: 9997 !important;
|
||||
}
|
||||
</style>
|
||||
412
src/views/gen/table/generator.vue
Normal file
412
src/views/gen/table/generator.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="120px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="表名" prop="tableName">
|
||||
<div style="display: flex; width: 100%">
|
||||
<el-input disabled placeholder="表名" :value="tableNameStr" style="flex-grow: 1; margin-right: 10px"></el-input>
|
||||
<el-button plain icon="Search" @click="childTableRef.openDialog(dataForm)"> 子表</el-button>
|
||||
<!-- 配置子表 -->
|
||||
<child-table-config v-model="childForm" ref="childTableRef" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="注释" prop="tableComment">
|
||||
<el-input placeholder="说明" v-model="dataForm.tableComment"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="类名" prop="className">
|
||||
<el-input placeholder="类名" v-model="dataForm.className"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="作者" prop="author">
|
||||
<el-input placeholder="默认作者" v-model="dataForm.author"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="项目包名" prop="packageName">
|
||||
<el-input placeholder="项目包名" v-model="dataForm.packageName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item prop="moduleName">
|
||||
<template #label>
|
||||
<span>模块名</span>
|
||||
<tip content="所属微服务模块名称，对应微服务路由前缀 （单体固定 admin）" />
|
||||
</template>
|
||||
<el-input placeholder="模块名" v-model="dataForm.moduleName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item prop="functionName">
|
||||
<template #label>
|
||||
<span>功能名</span>
|
||||
<tip content="对应生成的Controller @RequestMapping 请求路径" />
|
||||
</template>
|
||||
<el-input placeholder="功能名" v-model="dataForm.functionName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="代码风格" prop="style">
|
||||
<el-select v-model="dataForm.style">
|
||||
<el-option :key="index" :label="item.groupName" :value="item.id" v-for="(item, index) in groupDataList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item prop="syncMenuId">
|
||||
<template #label>
|
||||
所属菜单
|
||||
<tip :content="`生成的 【${dataForm.tableComment}管理】菜单挂载在哪个目录下 `" />
|
||||
</template>
|
||||
<el-tree-select
|
||||
filterable
|
||||
v-model="dataForm.syncMenuId"
|
||||
:data="menuData"
|
||||
:render-after-expand="false"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
class="w100"
|
||||
clearable
|
||||
check-strictly
|
||||
:placeholder="$t('sysmenu.inputParentIdTip')"
|
||||
>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item prop="syncRoute">
|
||||
<template #label>
|
||||
同步路由
|
||||
<tip :content="`微服务架构下会自动创建一条【/${dataForm.moduleName}】的网关路由，存在则跳过`" />
|
||||
</template>
|
||||
<el-radio-group v-model="dataForm.syncRoute">
|
||||
<el-radio border label="0">手动添加</el-radio>
|
||||
<el-radio border label="1">自动创建</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="表单布局" prop="formLayout">
|
||||
<el-radio-group v-model="dataForm.formLayout">
|
||||
<el-radio border :label="1">一列</el-radio>
|
||||
<el-radio border :label="2">两列</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item label="生成方式" prop="generatorType">
|
||||
<el-radio-group v-model="dataForm.generatorType">
|
||||
<el-radio border label="1">自定义路径</el-radio>
|
||||
<el-radio border label="0">ZIP 压缩包</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item prop="backendPath" v-if="dataForm.generatorType === '1'">
|
||||
<template #label>
|
||||
<span>后端生成路径</span>
|
||||
<tip content="后端模块biz所在文件全路径比如：D:\data\cloud\cloud-upms\cloud-upms-biz" />
|
||||
</template>
|
||||
<el-input placeholder="后端生成路径" v-model="dataForm.backendPath"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="frontendPath" v-if="dataForm.generatorType === '1'">
|
||||
<template #label>
|
||||
<span>前端生成路径</span>
|
||||
<tip content="前端所在文件全路径比如：D:\data\cloud-ui" />
|
||||
</template>
|
||||
<el-input placeholder="前端生成路径" v-model="dataForm.frontendPath"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { putObj, useTableApi } from '/@/api/gen/table';
|
||||
import { list as groupList } from '/@/api/gen/group';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import { rule } from '/@/utils/validate';
|
||||
import { useMessage, useMessageBox } from '/@/hooks/message';
|
||||
import { checkVersion, online } from '/@/api/gen/template';
|
||||
import mittBus from '/@/utils/mitt';
|
||||
import { pageList } from '/@/api/admin/menu';
|
||||
import Tip from '/@/components/Tip/index.vue';
|
||||
|
||||
const ChildTableConfig = defineAsyncComponent(() => import('./child.vue'));
|
||||
|
||||
const props = defineProps({
|
||||
tableName: {
|
||||
type: String,
|
||||
},
|
||||
dsName: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const isMicro = import.meta.env.VITE_IS_MICRO;
|
||||
const emit = defineEmits(['refreshDataList']);
|
||||
const route = useRoute();
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
const dataFormRef = ref();
|
||||
const childTableRef = ref();
|
||||
const childForm = ref();
|
||||
const tableNameStr = ref('');
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
generatorType: '0',
|
||||
formLayout: 1,
|
||||
backendPath: '',
|
||||
frontendPath: '',
|
||||
packageName: '',
|
||||
email: '',
|
||||
author: '',
|
||||
version: '',
|
||||
moduleName: '',
|
||||
functionName: '',
|
||||
className: '',
|
||||
tableComment: '',
|
||||
tableName: '' as string,
|
||||
dsName: '' as string,
|
||||
style: '', // 默认风格 element-plus
|
||||
childTableName: '',
|
||||
syncRoute: '0',
|
||||
syncMenuId: '',
|
||||
});
|
||||
|
||||
const groupDataList = ref([]);
|
||||
const getTable = (dsName: string, tableName: string) => {
|
||||
loading.value = true;
|
||||
useTableApi(dsName, tableName)
|
||||
.then((res) => {
|
||||
Object.assign(dataForm, res.data);
|
||||
let list = res.data.groupList;
|
||||
dataForm.style = list[0]?.id;
|
||||
|
||||
// 如果是保存路径的形式，有限使用本地配置项
|
||||
const frontendPath = Local.get('frontendPath');
|
||||
const backendPath = Local.get('backendPath');
|
||||
|
||||
if (frontendPath && backendPath) {
|
||||
dataForm.frontendPath = frontendPath;
|
||||
dataForm.backendPath = backendPath;
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
if (isMicro === 'false') {
|
||||
dataForm.syncRoute = '0';
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const dataRules = ref({
|
||||
tableName: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
tableComment: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
className: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
packageName: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
author: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{ required: true, message: '必填项不能为空', trigger: 'blur' },
|
||||
],
|
||||
moduleName: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{ validator: rule.letter, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
functionName: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
generatorType: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
formLayout: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
backendPath: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
frontendPath: [
|
||||
{ validator: rule.overLength, trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
message: '必填项不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
style: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
});
|
||||
|
||||
// 保存
|
||||
const submitHandle = async () => {
|
||||
try {
|
||||
const valid = await dataFormRef.value.validate(); // 表单校验
|
||||
if (!valid) return false;
|
||||
|
||||
loading.value = true;
|
||||
await putObj(Object.assign(dataForm, childForm.value));
|
||||
visible.value = false;
|
||||
emit('refreshDataList');
|
||||
return dataForm;
|
||||
} catch {
|
||||
return Promise.reject();
|
||||
} finally {
|
||||
//保存路径至Local 中方便下次使用
|
||||
if (dataForm.generatorType === '1') {
|
||||
Local.set('frontendPath', dataForm.frontendPath);
|
||||
Local.set('backendPath', dataForm.backendPath);
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取风格列表
|
||||
*/
|
||||
const genGroupList = () => {
|
||||
groupList().then(({ data }) => {
|
||||
if (data && data.length > 0) {
|
||||
groupDataList.value = data.filter((group: { groupName: String }) => !group.groupName.includes('vform'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 检查模板版本
|
||||
*/
|
||||
const checkTemplateVersion = async () => {
|
||||
try {
|
||||
const { data } = await checkVersion();
|
||||
if (!data) {
|
||||
const shouldUpdate = await useMessageBox()
|
||||
.confirm('模板发现新版本，是否更新？')
|
||||
.catch(() => false);
|
||||
if (shouldUpdate) {
|
||||
await online();
|
||||
useMessage().success('更新成功');
|
||||
genGroupList();
|
||||
} else {
|
||||
mittBus.emit('onCurrentContextmenuClick', { contextMenuClickId: 1, ...route });
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查版本失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 从后端获取菜单信息（含层级）
|
||||
const menuData = reactive([] as any[]);
|
||||
const getAllMenuData = () => {
|
||||
pageList({
|
||||
type: '0',
|
||||
}).then((res) => {
|
||||
let menu = {
|
||||
id: '-1',
|
||||
name: '根菜单',
|
||||
children: [],
|
||||
};
|
||||
menu.children = res.data;
|
||||
menuData.push(menu);
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => childForm,
|
||||
() => {
|
||||
const { childTableName } = childForm.value || {};
|
||||
tableNameStr.value = childTableName ? `${props.tableName} + ${childTableName}` : props.tableName;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
dataForm.id = '';
|
||||
dataForm.tableName = String(props.tableName);
|
||||
dataForm.dsName = String(props.dsName);
|
||||
|
||||
getTable(dataForm.dsName, dataForm.tableName);
|
||||
genGroupList();
|
||||
checkTemplateVersion();
|
||||
getAllMenuData();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
submitHandle,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.generator-code .el-dialog__body {
|
||||
padding: 15px 30px 0 20px;
|
||||
}
|
||||
</style>
|
||||
107
src/views/gen/table/i18n/en.ts
Normal file
107
src/views/gen/table/i18n/en.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
export default {
|
||||
gen: {
|
||||
syncBtn: 'Sync',
|
||||
designBtn: 'design',
|
||||
genBtn: 'Generate',
|
||||
prewBtn: 'preview',
|
||||
batchGenBtn: 'Batch Generate',
|
||||
author: 'Author',
|
||||
email: 'email',
|
||||
packageName: 'Package Name',
|
||||
version: 'version',
|
||||
generatorType: 'generatorType',
|
||||
moduleName: 'Module Name',
|
||||
functionName: 'functionName',
|
||||
formLayout: 'Form Layout',
|
||||
datasourceId: 'datasourceId',
|
||||
baseclassId: 'baseclassId',
|
||||
createTime: 'Creation Time',
|
||||
inputidTip: 'input id',
|
||||
inputtableNameTip: 'input tableName',
|
||||
inputclassNameTip: 'input className',
|
||||
inputtableCommentTip: 'input tableComment',
|
||||
inputauthorTip: 'input author',
|
||||
inputemailTip: 'input email',
|
||||
inputpackageNameTip: 'Enter package name',
|
||||
inputversionTip: 'input version',
|
||||
inputgeneratorTypeTip: 'input generatorType',
|
||||
inputmoduleNameTip: 'Enter module name',
|
||||
inputfunctionNameTip: 'input functionName',
|
||||
inputformLayoutTip: 'input formLayout',
|
||||
inputdatasourceIdTip: 'input datasourceId',
|
||||
inputbaseclassIdTip: 'input baseclassId',
|
||||
inputcreateTimeTip: 'input createTime',
|
||||
inputAuthorTip: 'Enter author name',
|
||||
inputStyleTip: 'Select code style',
|
||||
parentMenu: 'Parent Menu',
|
||||
syncRoute: 'Sync Route',
|
||||
syncRouteManual: 'Manual Add',
|
||||
syncRouteAuto: 'Auto Create',
|
||||
formLayoutOne: 'One Column',
|
||||
formLayoutTwo: 'Two Columns',
|
||||
genType: 'Generation Method',
|
||||
genTypeZip: 'Download Zip',
|
||||
genTypeCustom: 'Custom Path',
|
||||
style: 'Code Style',
|
||||
backendPath: 'Backend Path',
|
||||
backendPathTip: 'Full path to the backend module biz directory, e.g., D:\\data\\cloud\\cloud-upms\\cloud-upms-biz',
|
||||
inputBackendPathTip: 'Enter backend path',
|
||||
frontendPath: 'Frontend Path',
|
||||
frontendPathTip: 'Full path to the frontend directory, e.g., D:\\data\\cloud-ui',
|
||||
inputFrontendPathTip: 'Enter frontend path',
|
||||
selectionLimitFive: 'You can select a maximum of 5 tables.',
|
||||
selectAtLeastOneTable: 'Please select at least one table to generate.',
|
||||
syncingTables: 'Syncing selected tables...',
|
||||
syncFailedForTables: 'Sync failed for tables',
|
||||
allTablesSyncedSuccessfully: 'All selected tables synced successfully.',
|
||||
syncProcessFailed: 'Table synchronization process failed.',
|
||||
someTablesSyncedSuccessfully: 'Some tables synced successfully, some failed. Check details.',
|
||||
selectAtLeastOneTableAfterSync: 'Please select at least one table (after successful sync and update) to generate.',
|
||||
noTablesSyncedSuccessfully: 'No tables were synced successfully. Cannot proceed with metadata update or generation.',
|
||||
noSyncedTablesToProcess: 'No synced table metadata available to process for update or generation.',
|
||||
updatingTableMetadata: 'Updating metadata for synced tables...',
|
||||
metaUpdateFailedForTables: 'Metadata update failed for tables',
|
||||
proceedingWithSuccessfullyUpdatedTables: 'Proceeding with code generation for tables with successfully updated metadata.',
|
||||
noTablesForGenerationAfterMetaUpdate: 'No tables available for code generation after metadata update step.',
|
||||
generationFailed: 'Generation Failed',
|
||||
},
|
||||
table: {
|
||||
index: '#',
|
||||
importTableTip: ' import Table',
|
||||
id: 'id',
|
||||
tableName: 'Table Name',
|
||||
className: 'className',
|
||||
tableComment: 'tableComment',
|
||||
tableDesc: 'Description',
|
||||
author: 'author',
|
||||
email: 'email',
|
||||
packageName: 'Package Name',
|
||||
version: 'version',
|
||||
generatorType: 'generatorType',
|
||||
backendPath: 'backendPath',
|
||||
frontendPath: 'frontendPath',
|
||||
moduleName: 'moduleName',
|
||||
functionName: 'functionName',
|
||||
formLayout: 'formLayout',
|
||||
datasourceId: 'datasourceId',
|
||||
baseclassId: 'baseclassId',
|
||||
createTime: 'Creation Time',
|
||||
inputidTip: 'input id',
|
||||
inputtableNameTip: 'input tableName',
|
||||
inputclassNameTip: 'input className',
|
||||
inputtableCommentTip: 'input tableComment',
|
||||
inputauthorTip: 'input author',
|
||||
inputemailTip: 'input email',
|
||||
inputpackageNameTip: 'input packageName',
|
||||
inputversionTip: 'input version',
|
||||
inputgeneratorTypeTip: 'input generatorType',
|
||||
inputbackendPathTip: 'input backendPath',
|
||||
inputfrontendPathTip: 'input frontendPath',
|
||||
inputmoduleNameTip: 'input moduleName',
|
||||
inputfunctionNameTip: 'input functionName',
|
||||
inputformLayoutTip: 'input formLayout',
|
||||
inputdatasourceIdTip: 'input datasourceId',
|
||||
inputbaseclassIdTip: 'input baseclassId',
|
||||
inputcreateTimeTip: 'input createTime',
|
||||
},
|
||||
};
|
||||
70
src/views/gen/table/i18n/zh-cn.ts
Normal file
70
src/views/gen/table/i18n/zh-cn.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
export default {
|
||||
gen: {
|
||||
syncBtn: '同步',
|
||||
designBtn: '设计',
|
||||
genBtn: '生成',
|
||||
prewBtn: '预览',
|
||||
batchGenBtn: '批量生成',
|
||||
author: '作者',
|
||||
inputAuthorTip: '请输入作者',
|
||||
packageName: '包名',
|
||||
inputPackageNameTip: '请输入包名',
|
||||
moduleName: '模块名',
|
||||
inputModuleNameTip: '请输入模块名',
|
||||
style: '风格',
|
||||
inputStyleTip: '请选择风格',
|
||||
parentMenu: '所属菜单',
|
||||
syncRoute: '同步路由',
|
||||
syncRouteManual: '手动添加',
|
||||
syncRouteAuto: '自动创建',
|
||||
formLayout: '表单布局',
|
||||
formLayoutOne: '单列',
|
||||
formLayoutTwo: '双列',
|
||||
genType: '生成方式',
|
||||
genTypeZip: '生成压缩包',
|
||||
genTypeCustom: '自定义路径',
|
||||
backendPath: '后端生成路径',
|
||||
backendPathTip: '后端模块biz所在文件全路径比如：D:datacloudcloud-upmscloud-upms-biz',
|
||||
inputBackendPathTip: '请输入后端生成路径',
|
||||
frontendPath: '前端生成路径',
|
||||
frontendPathTip: '前端所在文件全路径比如：D:datacloud-ui',
|
||||
inputFrontendPathTip: '请输入前端生成路径',
|
||||
selectionLimitFive: '最多只能选择5张表。',
|
||||
selectAtLeastOneTable: '请至少选择一张表进行生成。',
|
||||
syncingTables: '正在同步选中的表...',
|
||||
syncFailedForTables: '表同步失败',
|
||||
allTablesSyncedSuccessfully: '所有选中的表同步成功。',
|
||||
syncProcessFailed: '表同步过程失败。',
|
||||
someTablesSyncedSuccessfully: '部分表同步成功，部分失败。请检查详情。',
|
||||
selectAtLeastOneTableAfterSync: '请至少选择一个（在成功同步和更新后）表进行生成。',
|
||||
noTablesSyncedSuccessfully: '没有表成功同步。无法继续元数据更新或生成。',
|
||||
noSyncedTablesToProcess: '没有已同步的表元数据可供处理以进行更新或生成。',
|
||||
updatingTableMetadata: '正在更新已同步表的元数据...',
|
||||
metaUpdateFailedForTables: '表元数据更新失败',
|
||||
proceedingWithSuccessfullyUpdatedTables: '正在为元数据更新成功的表继续生成代码。',
|
||||
noTablesForGenerationAfterMetaUpdate: '元数据更新步骤后没有可用于代码生成的表。',
|
||||
generationFailed: '生成失败',
|
||||
},
|
||||
table: {
|
||||
index: '#',
|
||||
importTableTip: '导入列属性',
|
||||
id: 'id',
|
||||
tableName: '表名',
|
||||
className: '类名',
|
||||
tableComment: '说明',
|
||||
tableDesc: '注释',
|
||||
email: '邮箱',
|
||||
inputemailTip: '请输入邮箱',
|
||||
inputtableNameTip: '请输入表名',
|
||||
inputclassNameTip: '请输入类名',
|
||||
inputtableCommentTip: '请输入说明',
|
||||
inputauthorTip: '请输入作者',
|
||||
inputpackageNameTip: '请输入项目包名',
|
||||
inputversionTip: '请输入项目版本号',
|
||||
inputgeneratorTypeTip: '请输入生成方式 0：zip压缩包 1：自定义目录',
|
||||
inputdatasourceIdTip: '请输入数据源ID',
|
||||
inputbaseclassIdTip: '请输入基类ID',
|
||||
inputcreateTimeTip: '请输入创建时间',
|
||||
inputDsNameTip: '请输入数据源名称',
|
||||
},
|
||||
};
|
||||
178
src/views/gen/table/index.vue
Normal file
178
src/views/gen/table/index.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="layout-padding">
|
||||
<div class="layout-padding-auto layout-padding-view">
|
||||
<el-row class="ml10" v-show="showSearch">
|
||||
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
|
||||
<el-form-item label="数据源" prop="name">
|
||||
<el-select @change="getDataList" placeholder="请选择数据源" v-model="state.queryForm.dsName">
|
||||
<el-option label="默认数据源" value="master"></el-option>
|
||||
<el-option :key="ds.id" :label="ds.name" :value="ds.name" v-for="ds in datasourceList"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.tableName')" prop="tableName">
|
||||
<el-input :placeholder="$t('table.inputtableNameTip')" v-model="state.queryForm.tableName" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList" icon="search" type="primary">
|
||||
{{ $t('common.queryBtn') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="mb8" style="width: 100%">
|
||||
<el-button
|
||||
icon="Plus"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="openBatchGenDialog"
|
||||
:disabled="(state.selectObjs || []).length === 0 || (state.selectObjs || []).length > 5"
|
||||
>
|
||||
{{ $t('gen.batchGenBtn') }}
|
||||
</el-button>
|
||||
<right-toolbar
|
||||
:export="true"
|
||||
@exportExcel="exportExcel"
|
||||
@queryTable="getDataList"
|
||||
class="ml10"
|
||||
style="float: right; margin-right: 20px"
|
||||
v-model:showSearch="showSearch"
|
||||
></right-toolbar>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="state.dataList"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
:cell-style="tableStyle.cellStyle"
|
||||
:header-cell-style="tableStyle.headerCellStyle"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column :label="t('table.index')" type="index" width="60" />
|
||||
<el-table-column :label="t('table.tableName')" prop="name" show-overflow-tooltip />
|
||||
<el-table-column :label="t('table.tableDesc')" prop="comment" show-overflow-tooltip />
|
||||
<el-table-column :label="t('table.createTime')" prop="createTime" show-overflow-tooltip />
|
||||
<el-table-column :label="$t('common.action')" width="250">
|
||||
<template #default="scope">
|
||||
<el-button icon="Refresh" @click="syncTable(scope.row)" text type="primary">
|
||||
{{ $t('gen.syncBtn') }}
|
||||
</el-button>
|
||||
<el-button icon="FolderOpened" @click="openGen(scope.row)" text type="primary">{{ $t('gen.genBtn') }} </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
|
||||
</div>
|
||||
<BatchGenDialog ref="batchGenDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="systemTable" setup>
|
||||
import { reactive, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { BasicTableProps, useTable } from '/@/hooks/table';
|
||||
import { fetchList, useSyncTableApi, useTableApi } from '/@/api/gen/table';
|
||||
import { list } from '/@/api/gen/datasource';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { validateNull } from '/@/utils/validate';
|
||||
import BatchGenDialog from './BatchGenDialog.vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
// 定义变量内容
|
||||
const router = useRouter();
|
||||
// 引入组件
|
||||
const { t } = useI18n();
|
||||
// const { currentRoute } = useRoute();
|
||||
|
||||
// 搜索变量
|
||||
const queryRef = ref();
|
||||
const showSearch = ref(true);
|
||||
const tableRef = ref();
|
||||
// 多选变量
|
||||
const datasourceList = ref();
|
||||
const batchGenDialogRef = ref();
|
||||
|
||||
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||
queryForm: {
|
||||
dsName: 'master',
|
||||
},
|
||||
pageList: fetchList,
|
||||
createdIsNeed: false,
|
||||
selectObjs: [],
|
||||
});
|
||||
|
||||
// table hook
|
||||
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
list().then((res) => {
|
||||
datasourceList.value = res.data;
|
||||
// 默认去第一个数据源
|
||||
if (datasourceList.value.length > 0) {
|
||||
state.queryForm.dsName = datasourceList.value[0].name;
|
||||
}
|
||||
getDataList();
|
||||
});
|
||||
});
|
||||
|
||||
const openGen = (row: any) => {
|
||||
useTableApi(state.queryForm.dsName, row.name)
|
||||
.then((res) => {
|
||||
if (validateNull(res.data.fieldList)) {
|
||||
syncTable(row);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
router.push({
|
||||
path: '/gen/gener/index',
|
||||
query: {
|
||||
tableName: row.name,
|
||||
dsName: state.queryForm.dsName,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 同步表数据
|
||||
const syncTable = (row: any) => {
|
||||
useSyncTableApi(state.queryForm.dsName, row.name).then(() => {
|
||||
useMessage().success(t('common.optSuccessText'));
|
||||
});
|
||||
};
|
||||
|
||||
// 清空搜索条件
|
||||
const resetQuery = () => {
|
||||
queryRef.value.resetFields();
|
||||
getDataList();
|
||||
};
|
||||
|
||||
// 导出excel
|
||||
const exportExcel = () => {
|
||||
downBlobFile('/gen/table/export', state.queryForm, 'table.xlsx');
|
||||
};
|
||||
|
||||
const handleRowClick = (row: any) => {
|
||||
tableRef.value.toggleRowSelection(row);
|
||||
};
|
||||
|
||||
// 处理表格选中
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
state.selectObjs = selection;
|
||||
if (selection.length > 5) {
|
||||
ElMessage.warning(t('gen.selectionLimitFive'));
|
||||
}
|
||||
};
|
||||
|
||||
// 打开批量生成弹窗
|
||||
const openBatchGenDialog = () => {
|
||||
batchGenDialogRef.value.openDialog(state.selectObjs, state.queryForm.dsName);
|
||||
};
|
||||
</script>
|
||||
158
src/views/gen/table/preview.vue
Normal file
158
src/views/gen/table/preview.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-dialog fullscreen title="代码预览" v-model="visible" width="90%" top="3vh" append-to-body :close-on-click-modal="false">
|
||||
<splitpanes>
|
||||
<pane size="25">
|
||||
<el-scrollbar height="calc(100vh - 100px)" class="mt20">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
node-key="id"
|
||||
:data="preview.fileTree"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</pane>
|
||||
<pane>
|
||||
<el-tabs v-model="preview.activeName" @tab-click="handleTabClick">
|
||||
<el-tab-pane
|
||||
v-for="item in previewCodegen"
|
||||
:label="item.codePath.substring(item.codePath.lastIndexOf('/') + 1)"
|
||||
:name="item.codePath"
|
||||
:key="item.codePath"
|
||||
>
|
||||
<SvgIcon name="ele-CopyDocument" :size="25" class="copy_btn" @click="copyText(item.code)" />
|
||||
</el-tab-pane>
|
||||
<code-editor ref="codeEditorRef" theme="darcula" v-model="previewCodeStr" mode="go" readOnly height="calc(100vh - 100px)"></code-editor>
|
||||
</el-tabs>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts" name="preview">
|
||||
import { useGeneratorPreviewApi } from '/@/api/gen/table';
|
||||
import { handleTree } from '/@/utils/other';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
const CodeEditor = defineAsyncComponent(() => import('/@/components/CodeEditor/index.vue'));
|
||||
|
||||
const { copyText } = commonFunction();
|
||||
|
||||
const visible = ref(false);
|
||||
// ======== 显示页面 ========
|
||||
const preview = reactive({
|
||||
open: false,
|
||||
titel: '代码预览',
|
||||
fileTree: [],
|
||||
activeName: '',
|
||||
});
|
||||
|
||||
const previewCodegen = ref([]);
|
||||
const previewCodeStr = ref('');
|
||||
const fileTreeOriginal = ref([] as any[]);
|
||||
|
||||
const openDialog = async (id: string) => {
|
||||
await getGenCodeFile(id);
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
const codeEditorRef = ref();
|
||||
|
||||
/**
|
||||
* 获取特定资源的代码生成文件，显示在页面上。
|
||||
* @param id 需要渲染的资源 ID。
|
||||
*/
|
||||
const getGenCodeFile = (id: string) => {
|
||||
loading.value = true;
|
||||
fileTreeOriginal.value = [];
|
||||
useGeneratorPreviewApi(id)
|
||||
.then((res: any) => {
|
||||
previewCodegen.value = res;
|
||||
for (let index in res) {
|
||||
fileTreeOriginal.value.push(res[index].codePath);
|
||||
}
|
||||
// 默认选中第一个 选项卡
|
||||
previewCodeStr.value = res[0].code;
|
||||
preview.activeName = res[0].codePath;
|
||||
const files = handleFiles(fileTreeOriginal);
|
||||
preview.fileTree = handleTree(files, 'id', 'parentId', 'children', '/');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const handleNodeClick = async (data: any, node: any) => {
|
||||
if (node && !node.isLeaf) {
|
||||
return false;
|
||||
}
|
||||
|
||||
preview.activeName = data.id;
|
||||
|
||||
const filteredCode = previewCodegen.value.filter((code: any) => code.codePath === data.id);
|
||||
if (filteredCode.length > 0) {
|
||||
previewCodeStr.value = filteredCode[0].code;
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabClick = (item: any) => {
|
||||
const filteredCode = previewCodegen.value.filter((code: any) => code.codePath === item.paneName);
|
||||
if (filteredCode.length > 0) {
|
||||
previewCodeStr.value = filteredCode[0].code;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成 files 目录
|
||||
* @param fileTreeOriginal
|
||||
* @returns {*[]}
|
||||
*/
|
||||
const handleFiles = (fileTreeOriginal: any) => {
|
||||
const exists = {};
|
||||
const files = [] as any[];
|
||||
|
||||
// 遍历每个元素
|
||||
for (const data of fileTreeOriginal.value) {
|
||||
let paths = [];
|
||||
if (data.includes('\\')) {
|
||||
paths = data.split('\\');
|
||||
} else {
|
||||
paths = data.split('/');
|
||||
}
|
||||
let fullPath = ''; // 从头开始的路径，用于生成 id
|
||||
// 遍历每个 path， 拼接成树
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
// 已经添加到 files 中，则跳过
|
||||
const oldFullPath = fullPath;
|
||||
// 下面的 replaceAll 的原因，是因为上面包处理了，导致和 tabs 不匹配，所以 replaceAll 下
|
||||
fullPath = fullPath.length === 0 ? paths[i] : fullPath.replaceAll('.', '/') + '/' + paths[i];
|
||||
if (exists[fullPath]) {
|
||||
continue;
|
||||
}
|
||||
// 添加到 files 中
|
||||
exists[fullPath] = true;
|
||||
files.push({
|
||||
id: fullPath,
|
||||
label: paths[i],
|
||||
parentId: oldFullPath || '/',
|
||||
templateName: data.k,
|
||||
});
|
||||
}
|
||||
}
|
||||
return files;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.copy_btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
z-index: 9;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user