mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-31 09:12:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(代码生成): 支持anyline 动态获取表元数据

Browse Source 
- 1. 支持代码生成模板 从 github获取
- 2. 重构代码生成的默认值从配置类获取
This commit is contained in:
冷冷 2024-07-15 23:17:09 +08:00
parent a90f2be1e3
commit fecc5d8bcb
18 changed files with 1296 additions and 746 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/gen/template.ts
View File

@ -15,6 +15,21 @@ export function list() {
});
}
export function online() {
return request({
url: '/gen/template/online',
method: 'get',
});
}
export function checkVersion() {
return request({
url: '/gen/template/checkVersion',
method: 'get',
});
}
export function addObj(obj?: Object) {
return request({
url: '/gen/template',

7
src/utils/validate.ts
View File

@ -21,6 +21,13 @@ export const validateNull = (val: any) => {
};
export const rule = {
overLength(rule: any, value: any, callback: any) {
if (value?.length > 255) {
callback(new Error('输入内容过长，请重新输入'));
} else {
callback();
}
},
/**
* 校验 请输入中文、英文、数字包括下划线
* 名称校验

1
src/views/admin/dict/i18n/en.ts
View File

@ -26,6 +26,7 @@ export default {
},
dictItem: {
index: '#',
name: 'dict item',
importsysDictItemTip: 'import SysDictItem',
id: 'id',
dictId: 'dictId',

1
src/views/admin/dict/i18n/zh-cn.ts
View File

@ -29,6 +29,7 @@ export default {
},
dictItem: {
index: '#',
name: '字典项',
importsysDictItemTip: '导入字典项',
id: '编号',
dictId: ' dictId',

274
src/views/gen/datasource/form.vue
View File

@ -1,81 +1,85 @@
<template>
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-row :gutter="20">
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.dsType')" prop="dsType">
<el-select v-model="form.dsType" :placeholder="t('datasourceconf.inputdsTypeTip')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in ds_type"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.name')" prop="name">
<el-input v-model="form.name" :placeholder="t('datasourceconf.inputnameTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.username')" prop="username">
<el-input v-model="form.username" :placeholder="t('datasourceconf.inputusernameTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.password')" prop="password">
<el-input v-model="form.password" :placeholder="t('datasourceconf.inputpasswordTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.confType')" prop="confType">
<el-radio-group v-model="form.confType">
<el-radio :label="Number(item.value)" v-for="(item, index) in ds_config_type" border :key="index">{{ item.label }} </el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0 && form.dsType === 'mssql'">
<el-form-item :label="t('datasourceconf.instance')" prop="instance">
<el-input v-model="form.instance" :placeholder="t('datasourceconf.inputinstanceTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.port')" prop="port">
<el-input-number v-model="form.port" :placeholder="t('datasourceconf.inputportTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.host')" prop="host">
<el-input v-model="form.host" :placeholder="t('datasourceconf.inputhostTip')" />
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.dsName')" prop="dsName">
<el-input v-model="form.dsName" :placeholder="t('datasourceconf.inputdsNameTip')" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20" v-if="form.confType === 1">
<el-form-item :label="t('datasourceconf.url')" prop="url">
<el-input v-model="form.url" type="textarea" :placeholder="t('datasourceconf.inputurlTip')" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
:close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-row :gutter="20">
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.dsType')" prop="dsType">
<el-select v-model="form.dsType" :placeholder="t('datasourceconf.inputdsTypeTip')">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in ds_type"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.name')" prop="name">
<el-input v-model="form.name" :placeholder="t('datasourceconf.inputnameTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.username')" prop="username">
<el-input v-model="form.username" :placeholder="t('datasourceconf.inputusernameTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.password')" prop="password">
<el-input v-model="form.password" :placeholder="t('datasourceconf.inputpasswordTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item :label="t('datasourceconf.confType')" prop="confType">
<el-radio-group v-model="form.confType">
<el-radio :label="Number(item.value)" v-for="(item, index) in ds_config_type" border :key="index">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0 && form.dsType === 'mssql'">
<el-form-item :label="t('datasourceconf.instance')" prop="instance">
<el-input v-model="form.instance" :placeholder="t('datasourceconf.inputinstanceTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.port')" prop="port">
<el-input-number v-model="form.port" :placeholder="t('datasourceconf.inputportTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.host')" prop="host">
<el-input v-model="form.host" :placeholder="t('datasourceconf.inputhostTip')"/>
</el-form-item>
</el-col>
<el-col :span="12" class="mb20" v-if="form.confType === 0">
<el-form-item :label="t('datasourceconf.dsName')" prop="dsName">
<el-input v-model="form.dsName" :placeholder="t('datasourceconf.inputdsNameTip')"/>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20" v-if="form.confType === 1">
<el-form-item :label="t('datasourceconf.url')" prop="url">
<el-input v-model="form.url" type="textarea" :placeholder="t('datasourceconf.inputurlTip')"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
</span>
</template>
</el-dialog>
</template>
</el-dialog>
</template>
<script setup lang="ts" name="systemDatasourceConfDialog">
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj } from '/@/api/gen/datasource';
import { useI18n } from 'vue-i18n';
import { useDict } from '/@/hooks/dict';
import {useMessage} from '/@/hooks/message';
import {getObj, addObj, putObj} from '/@/api/gen/datasource';
import {useI18n} from 'vue-i18n';
import {useDict} from '/@/hooks/dict';
import {rule} from "/@/utils/validate";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const { t } = useI18n();
const {t} = useI18n();
// 定义变量内容
const dataFormRef = ref();
@ -83,23 +87,23 @@ const visible = ref(false);
const loading = ref(false);
// 定义字典处理
const { ds_config_type, ds_type } = useDict('ds_config_type', 'ds_type');
const {ds_config_type, ds_type} = useDict('ds_config_type', 'ds_type');
// 提交表单数据
const form = reactive({
id: '',
name: '',
url: '',
username: '',
password: ('' as string) || undefined,
createTime: '',
updateTime: '',
dsType: '',
confType: 0,
dsName: '',
instance: '',
port: 0,
host: '',
id: '',
name: '',
url: '',
username: '',
password: ('' as string) || undefined,
createTime: '',
updateTime: '',
dsType: 'mysql',
confType: 0,
dsName: '',
instance: '',
port: 0,
host: '',
});
/**
@ -109,80 +113,86 @@ const form = reactive({
* @param {*} callback
*/
const validateDsName = (_rule, value, callback) => {
var re = /(?=.*[a-z])(?=.*_)/;
if (value && !re.test(value)) {
callback(new Error('数据源名称不合法, 组名_数据源名形式'));
} else {
callback();
}
var re = /(?=.*[a-z])(?=.*_)/;
if (value && !re.test(value)) {
callback(new Error('数据源名称不合法, 组名_数据源名形式'));
} else {
callback();
}
};
// 定义校验规则
const dataRules = ref({
name: [
{ required: true, message: '别名不能为空', trigger: 'blur' },
{ validator: validateDsName, trigger: 'blur' },
],
url: [{ required: true, message: 'jdbcurl不能为空', trigger: 'blur' }],
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
dsType: [{ required: true, message: '数据库类型不能为空', trigger: 'blur' }],
confType: [{ required: true, message: '配置类型不能为空', trigger: 'blur' }],
dsName: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
instance: [{ required: true, message: '实例不能为空', trigger: 'blur' }],
port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
host: [{ required: true, message: '主机不能为空', trigger: 'blur' }],
name: [
{required: true, message: '别名不能为空', trigger: 'blur'},
{validator: validateDsName, trigger: 'blur'},
],
url: [{required: true, message: 'jdbcurl不能为空', trigger: 'blur'}, {
min: 10,
max: 500,
message: 'URL长度必须介于 10 和 500 字符之间',
trigger: 'blur'
},],
username: [{ validator: rule.overLength, trigger: 'blur' },{required: true, message: '用户名不能为空', trigger: 'blur'}],
password: [{ validator: rule.overLength, trigger: 'blur' },{required: true, message: '密码不能为空', trigger: 'blur'}],
dsType: [{required: true, message: '数据库类型不能为空', trigger: 'blur'}],
confType: [{required: true, message: '配置类型不能为空', trigger: 'blur'}],
dsName: [{ validator: rule.overLength, trigger: 'blur' },{required: true, message: '数据库名称不能为空', trigger: 'blur'}],
instance: [{ validator: rule.overLength, trigger: 'blur' },{required: true, message: '实例不能为空', trigger: 'blur'}],
port: [{required: true, message: '端口不能为空', trigger: 'blur'}],
host: [{ validator: rule.overLength, trigger: 'blur' },{required: true, message: '主机不能为空', trigger: 'blur'}],
});
// 打开弹窗
const openDialog = async (id: string) => {
visible.value = true;
form.id = '';
visible.value = true;
form.id = '';
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取DatasourceConf信息
if (id) {
form.id = id;
await getDatasourceConfData(id);
// 修改密码时候，原密码打码
form.password = '********';
}
// 获取DatasourceConf信息
if (id) {
form.id = id;
await getDatasourceConfData(id);
// 修改密码时候，原密码打码
form.password = '********';
}
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => {
});
if (!valid) return false;
form.password = form.password?.includes('******') ? undefined : form.password;
form.password = form.password?.includes('******') ? undefined : form.password;
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
// 初始化表单数据
const getDatasourceConfData = (id: string) => {
// 获取数据
return getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
// 获取数据
return getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
};
// 暴露变量
defineExpose({
openDialog,
openDialog,
});
</script>

4
src/views/gen/datasource/index.vue
View File

@ -4,13 +4,13 @@
<el-row class="ml10" v-show="showSearch">
<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
<el-form-item :label="$t('datasourceconf.dsName')" prop="dsName">
<el-input :placeholder="$t('datasourceconf.inputdsNameTip')" formDialogRef style="max-width: 180px" v-model="state.queryForm.dsName" />
<el-input :placeholder="$t('datasourceconf.inputdsNameTip')" v-model="state.queryForm.dsName" />
</el-form-item>
<el-form-item>
<el-button @click="getDataList" icon="search" type="primary">
{{ $t('common.queryBtn') }}
</el-button>
<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t('common.resetBtn') }} </el-button>
<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }} </el-button>
</el-form-item>
</el-form>
</el-row>

71
src/views/gen/design/form.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<el-drawer title="设计历史" v-model="visible" draggable>
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%" @sort-change="sortChangeHandle">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="createTime" label="设计时间" show-overflow-tooltip />
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button icon="refresh" text type="primary" @click="handleRollback(scope.row.id)">回滚</el-button>
<el-button icon="delete" text type="primary" @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</el-drawer>
</template>
<script setup lang="ts" name="systemFormHistoryDialog">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { delFormObj, fetchFormList } from '/@/api/gen/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
const emit = defineEmits(['refresh']);
const route = useRoute();
const { t } = useI18n();
// 搜索变量
const visible = ref(false);
// table hook
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
pageList: fetchFormList,
createdIsNeed: false,
descs: ['create_time'],
});
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle } = useTable(state);
// 删除操作
const handleDelete = async (id: string) => {
try {
await useMessageBox().confirm(t('common.delConfirmText'));
} catch {
return;
}
try {
await delFormObj(id);
getDataList();
useMessage().success(t('common.delSuccessText'));
} catch (err: any) {
useMessage().error(err.msg);
}
};
// 回滚
const handleRollback = (id: string) => {
emit('refresh', id);
};
// 打开弹窗
const openDialog = () => {
const { tableName, dsName } = route.query;
visible.value = true;
state.queryForm.dsName = dsName;
state.queryForm.tableName = tableName;
getDataList();
};
// 暴露变量
defineExpose({
openDialog,
});
</script>

132
src/views/gen/design/index.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<v-form-designer ref="vfDesignerRef" :banned-widgets="bannedWidgets" :designer-config="designerConfig">
<template #customToolButtons>
<el-button link type="primary" @click="saveJsonConfig">保存</el-button>
<el-button link type="primary" @click="exportSfcConfig">导出</el-button>
<el-button link type="primary" @click="formDialogRef.openDialog()">历史</el-button>
</template>
</v-form-designer>
</div>
<form-dialog ref="formDialogRef" @refresh="handleRefresh" />
</div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { fetchFormById, useFormConfSaveApi, useGeneratorVFormApi, useGeneratorVFormSfcApi } from '/@/api/gen/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { handleBlobFile } from '/@/utils/other';
import mittBus from '/@/utils/mitt';
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();
const route = useRoute();
const vfDesignerRef = ref();
const formDialogRef = ref();
const bannedWidgets = reactive(['tab', 'card', 'table', 'cascader']);
const designerConfig = reactive({
//是否显示语言切换菜单
languageMenu: false,
//是否显示GitHub、文档等外部链接
externalLink: false,
//是否显示表单模板
formTemplates: false,
//是否禁止修改唯一名称
widgetNameReadonly: false,
//是否显示组件事件属性折叠面板
eventCollapse: false,
//是否显示清空设计器按钮
clearDesignerButton: true,
//是否显示预览表单按钮
previewFormButton: false,
//是否显示导入JSON按钮
importJsonButton: false,
//是否显示导出JSON器按钮
exportJsonButton: false,
//是否显示导出代码按钮
exportCodeButton: true,
//是否显示生成SFC按钮
generateSFCButton: false,
});
onMounted(() => {
importJsonConfig();
});
// 根据当前表，获取json配置信息
const importJsonConfig = () => {
const { tableName, dsName } = route.query;
if (tableName && dsName) {
useGeneratorVFormApi(dsName, tableName).then((res) => {
vfDesignerRef.value.loadJson(res);
});
} else {
useMessageBox()
.confirm('表单初始化失败，请重新选择表点击设计打开')
.then(() => {
// 关闭当前tab
mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
});
}
};
const handleRefresh = (id: string) => {
fetchFormById(id).then((res) => {
vfDesignerRef.value.loadJson(JSON.parse(res.data.formInfo));
useMessage().success(t('common.optSuccessText'));
});
};
const saveJsonConfig = () => {
const { tableName, dsName } = route.query;
if (tableName && dsName) {
// 先保存表单
const formJson = vfDesignerRef.value.getFormJson();
useFormConfSaveApi({
dsName,
tableName,
formInfo: JSON.stringify(formJson),
}).then(() => {
useMessage().success(t('common.optSuccessText'));
});
}
};
const exportSfcConfig = async () => {
try {
const { tableName, dsName } = route.query;
if (!tableName || !dsName) throw new Error('表名或数据源名称不能为空');
const formJson = vfDesignerRef.value.getFormJson();
const { data } = await useFormConfSaveApi({
dsName,
tableName,
formInfo: JSON.stringify(formJson),
});
const sfcRes = await useGeneratorVFormSfcApi(data.id);
handleBlobFile(sfcRes, 'form.vue');
} catch (error: any) {
useMessage().error(error.message);
}
};
</script>
<style lang="scss">
body {
margin: 0;
}
</style>

118
src/views/gen/field-type/form.vue
View File

@ -1,33 +1,32 @@
<template>
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="600"
:close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="600" :close-on-click-modal="false" draggable>
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-form-item :label="t('fieldtype.columnType')" prop="columnType">
<el-input v-model="form.columnType" :placeholder="t('fieldtype.inputcolumnTypeTip')"/>
<el-input v-model="form.columnType" :placeholder="t('fieldtype.inputcolumnTypeTip')" />
</el-form-item>
<el-form-item :label="t('fieldtype.attrType')" prop="attrType">
<el-input v-model="form.attrType" :placeholder="t('fieldtype.inputattrTypeTip')"/>
<el-input v-model="form.attrType" :placeholder="t('fieldtype.inputattrTypeTip')" />
</el-form-item>
<el-form-item :label="t('fieldtype.packageName')" prop="packageName">
<el-input v-model="form.packageName" :placeholder="t('fieldtype.inputpackageNameTip')"/>
<el-input v-model="form.packageName" :placeholder="t('fieldtype.inputpackageNameTip')" />
</el-form-item>
</el-form>
<template #footer>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
</span>
</template>
</el-dialog>
</template>
</el-dialog>
</template>
<script setup lang="ts" name="systemFieldTypeDialog">
import {useMessage} from '/@/hooks/message';
import {getObj, addObj, putObj, validateColumnType} from '/@/api/gen/fieldtype';
import {useI18n} from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { getObj, addObj, putObj, validateColumnType } from '/@/api/gen/fieldtype';
import { useI18n } from 'vue-i18n';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const {t} = useI18n();
const { t } = useI18n();
// 定义变量内容
const dataFormRef = ref();
@ -36,74 +35,73 @@ const loading = ref(false);
// 提交表单数据
const form = reactive({
id: '',
columnType: '',
attrType: '',
packageName: '',
createTime: '',
id: '',
columnType: '',
attrType: '',
packageName: '',
createTime: '',
});
// 定义校验规则
const dataRules = ref({
columnType: [
{required: true, message: '字段类型不能为空', trigger: 'blur'},
{
validator: (rule: any, value: any, callback: any) => {
validateColumnType(rule, value, callback, form.id !== '');
},
},
],
attrType: [{required: true, message: '属性类型不能为空', trigger: 'blur'}],
columnType: [
{ required: true, message: '字段类型不能为空', trigger: 'blur' },
{
validator: (rule: any, value: any, callback: any) => {
validateColumnType(rule, value, callback, form.id !== '');
},
},
],
attrType: [{ required: true, message: '属性类型不能为空', trigger: 'blur' }],
});
// 打开弹窗
const openDialog = (id: string) => {
visible.value = true;
visible.value = true;
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 如果有id参数，表示是编辑操作，需要设置form.id和获取FieldType信息
if (id) {
form.id = id;
getFieldTypeData(id);
} else {
// 否则是新增操作，需要清空form.id
form.id = '';
}
// 如果有id参数，表示是编辑操作，需要设置form.id和获取FieldType信息
if (id) {
form.id = id;
getFieldTypeData(id);
} else {
// 否则是新增操作，需要清空form.id
form.id = '';
}
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {
});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
// 初始化表单数据
const getFieldTypeData = (id: string) => {
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
};
// 暴露变量
defineExpose({
openDialog,
openDialog,
});
</script>

43
src/views/gen/gener/index.vue
View File

@ -2,16 +2,16 @@
<div class="layout-padding">
<el-card class="layout-padding-auto" shadow="hover">
<el-steps :active="active" finish-status="success" simple>
<el-step title="基础信息" @click="go(0)" />
<el-step title="数据修改" @click="go(1)" />
<el-step title="基础信息" @click="go(0)"/>
<el-step title="数据修改" @click="go(1)"/>
</el-steps>
</el-card>
<el-card class="layout-padding-auto mt5" shadow="hover">
<!-- 生成基本信息设置 -->
<generator ref="generatorRef" :tableName="tableName" :dsName="dsName" v-if="active === 0" />
<generator ref="generatorRef" :tableName="tableName" :dsName="dsName" v-if="active === 0"/>
<!-- 字段编辑设置 -->
<edit-table ref="editTableRef" :tableName="tableName" :dsName="dsName" v-if="active === 1" />
<edit-table ref="editTableRef" :tableName="tableName" :dsName="dsName" v-if="active === 1"/>
<div style="text-align: center">
<el-button style="margin-top: 12px" @click="go(1)" v-if="active === 0">下一步</el-button>
@ -22,17 +22,17 @@
</el-card>
<!-- 预览基本信息 -->
<preview-dialog ref="previewDialogRef" />
<preview-dialog ref="previewDialogRef"/>
</div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import { useGeneratorCodeApi } from '/@/api/gen/table';
import { useMessage } from '/@/hooks/message';
import { downBlobFile } from '/@/utils/other';
import {useI18n} from 'vue-i18n';
import {useGeneratorCodeApi} from '/@/api/gen/table';
import {useMessage} from '/@/hooks/message';
import {downBlobFile} from '/@/utils/other';
const { t } = useI18n();
const {t} = useI18n();
const Generator = defineAsyncComponent(() => import('../table/generator.vue'));
const EditTable = defineAsyncComponent(() => import('../table/edit.vue'));
const PreviewDialog = defineAsyncComponent(() => import('../table/preview.vue'));
@ -47,19 +47,24 @@ const dsName = ref();
const editTableRef = ref();
const generatorType = ref();
// tab 跳转
const go = async (activeNum: number) => {
if (active.value === activeNum) return;
active.value = activeNum;
if (activeNum === 0) {
await editTableRef.value.submitHandle();
} else if (activeNum === 1) {
const dataform = await generatorRef.value.submitHandle();
tableId.value = dataform.id;
generatorType.value = dataform.generatorType;
try {
if (activeNum === 0) {
await editTableRef.value.submitHandle();
} else if (activeNum === 1) {
const dataform = await generatorRef.value.submitHandle();
tableId.value = dataform.id;
generatorType.value = dataform.generatorType;
}
if (active.value === activeNum) return;
active.value = activeNum;
} catch (e) {
console.error(e);
}
};
// 预览
const preview = async () => {
await editTableRef.value.submitHandle();
previewDialogRef.value.openDialog(tableId.value);

141
src/views/gen/group/form.vue
View File

@ -1,35 +1,35 @@
<template>
<el-dialog v-model="visible" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" width="600">
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-form-item :label="t('group.groupName')" prop="groupName">
<el-input v-model="form.groupName" :placeholder="t('group.inputGroupNameTip')"/>
</el-form-item>
<el-form-item :label="$t('group.templateType')" prop="templateId">
<el-select v-model="form.templateId" :placeholder="$t('group.selectType')" class="w100" clearable multiple>
<el-option v-for="item in templateData" :key="item.id" :label="item.templateName" :value="item.id"/>
</el-select>
</el-form-item>
<el-form-item :label="t('group.groupDesc')" prop="groupDesc">
<el-input type="textarea" maxlength="150" rows="3" v-model="form.groupDesc" :placeholder="t('group.inputGroupDescTip')"/>
</el-form-item>
</el-form>
<template #footer>
<el-dialog v-model="visible" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" width="600">
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
<el-form-item :label="t('group.groupName')" prop="groupName">
<el-input v-model="form.groupName" :placeholder="t('group.inputGroupNameTip')" />
</el-form-item>
<el-form-item :label="$t('group.templateType')" prop="templateId">
<el-select v-model="form.templateId" :placeholder="$t('group.selectType')" clearable multiple>
<el-option v-for="item in templateData" :key="item.id" :label="item.templateName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="t('group.groupDesc')" prop="groupDesc">
<el-input type="textarea" maxlength="100" :rows="5" v-model="form.groupDesc" :placeholder="t('group.inputGroupDescTip')" />
</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="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
</span>
</template>
</el-dialog>
</template>
</el-dialog>
</template>
<script lang="ts" name="GenGroupDialog" setup>
import {useMessage} from '/@/hooks/message';
import {addObj, getObj, putObj} from '/@/api/gen/group';
import {useI18n} from 'vue-i18n';
import {list as templateList} from '/@/api/gen/template';
import { useMessage } from '/@/hooks/message';
import { addObj, getObj, putObj } from '/@/api/gen/group';
import { useI18n } from 'vue-i18n';
import { list as templateList } from '/@/api/gen/template';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const {t} = useI18n();
const { t } = useI18n();
// 定义变量内容
const dataFormRef = ref();
@ -40,81 +40,80 @@ const templateData = ref<any[]>([]);
// 提交表单数据
const form = reactive({
id: '',
groupName: '',
groupDesc: '',
templateId: [] as string[],
putList: [],
id: '',
groupName: '',
groupDesc: '',
templateId: [] as string[],
putList: [],
});
// 定义校验规则
const dataRules = ref({
groupName: [{required: true, message: '分组名称不能为空', trigger: 'blur'}],
templateId: [{required: true, message: '模板不能为空', trigger: 'blur'}],
groupName: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }],
templateId: [{ required: true, message: '模板不能为空', trigger: 'blur' }],
});
const openDialog = (id: string) => {
visible.value = true;
form.id = '';
visible.value = true;
form.id = '';
// 重置表单数据
nextTick(() => {
dataFormRef.value.resetFields();
});
// 重置表单数据
nextTick(() => {
dataFormRef.value.resetFields();
});
// 如果有 id 参数，获取 genGroup 信息
if (id) {
form.id = id;
getgenGroupData(id);
}
// 如果有 id 参数，获取 genGroup 信息
if (id) {
form.id = id;
getgenGroupData(id);
}
// 获取模板信息
getTemplateData();
// 获取模板信息
getTemplateData();
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {
});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
// 初始化表单数据
const getgenGroupData = (id: string) => {
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
form.templateId = [];
if (res.data.templateList) {
let list = res.data.templateList;
list.forEach((item) => {
form.templateId.push(item.id);
});
}
});
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
form.templateId = [];
if (res.data.templateList) {
let list = res.data.templateList;
list.forEach((item) => {
form.templateId.push(item.id);
});
}
});
};
// 角色数据
const getTemplateData = () => {
templateList().then((res) => {
templateData.value = res.data;
});
templateList().then((res) => {
templateData.value = res.data;
});
};
// 暴露变量
defineExpose({
openDialog,
openDialog,
});
</script>

151
src/views/gen/table/add-dict.vue Normal file
View File

@ -0,0 +1,151 @@
<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, scope.row)"></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, getObj, 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;
try {
loading.value = true;
// 添加字典
const {data} = await addObj(dataForm);
// addItemObj
dataForm.columns.forEach(async (item: any) => {
item.dictId = data.id;
item.dictType = dataForm.dictType;
await addItemObj(item);
});
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, row: any) => {
dataForm.columns.splice(index, 1)
}
// 暴露变量
defineExpose({
openDialog,
});
</script>

171
src/views/gen/table/edit.vue
View File

@ -2,10 +2,11 @@
<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="暂无数据">
<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>
<el-checkbox v-model="row.primaryPk" true-value="1" false-value="0" disabled></el-checkbox>
</template>
</el-table-column>
<el-table-column label="字段名" prop="fieldName" show-overflow-tooltip></el-table-column>
@ -23,21 +24,25 @@
<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-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-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>
<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'">
<el-option v-for="item in fieldDictList" :key="item.value" :label="item.label" :value="item.value" />
<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>
@ -50,30 +55,33 @@
<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>
<el-checkbox v-model="row.gridItem" true-value="1" false-value="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>
<el-checkbox v-model="row.gridSort" true-value="1" false-value="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>
<el-checkbox v-model="row.queryItem" true-value="1" false-value="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-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-option v-for="item in queryList" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</template>
</el-table-column>
@ -86,38 +94,44 @@
<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-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>
<el-checkbox v-model="row.formItem" true-value="1" false-value="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>
<el-checkbox v-model="row.formRequired" true-value="1" false-value="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'">
<el-option v-for="item in formValidatorList" :key="item.value" :label="item.label" :value="item.value" />
<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 {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('');
@ -135,66 +149,69 @@ 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' },
{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' },
{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' },
{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' },
{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: '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' },
{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({
@ -222,11 +239,33 @@ const propToType = reactive({
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;
@ -256,7 +295,7 @@ const rowDrop = () => {
sortable.value = Sortable.create(el, {
handle: '.drag-btn',
onEnd: (e: any) => {
const { newIndex, oldIndex } = e;
const {newIndex, oldIndex} = e;
const currRow = fieldList.value.splice(oldIndex, 1)[0];
fieldList.value.splice(newIndex, 0, currRow);
},
@ -272,7 +311,7 @@ const getTable = (dsName: string, tableName: string) => {
.then((res) => {
tableId.value = res.data.id;
fieldList.value = res.data.fieldList.map((item) => {
item.queryFormType ? item.queryFormType : propToType[item.fieldType];
item.queryFormType ? item.queryFormType : propToType[item.fieldType];
item.formType ? item.formType : propToType[item.fieldType];
return item;
});
@ -285,24 +324,24 @@ const getTable = (dsName: string, tableName: string) => {
const getFieldTypeList = async () => {
typeList.value = [];
// 获取数据
const { data } = await list();
const {data} = await list();
// 设置属性类型值
const typeMap = new Map();
data.forEach((item: any) => {
const { attrType, columnType } = item;
const {attrType, columnType} = item;
if (!typeMap.has(attrType)) {
typeMap.set(attrType, columnType);
typeList.value.push({ label: attrType, value: attrType });
typeList.value.push({label: attrType, value: attrType});
}
});
// 增加Object类型
typeList.value.push({ label: 'Object', value: '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 });
fieldDictList.value.push({label: item.description, value: item.dictType});
}
});
};

147
src/views/gen/table/generator.vue
View File

@ -7,7 +7,11 @@
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="说明" prop="tableComment">
<el-form-item prop="tableComment">
<template #label>
<span>注释</span>
<tip content="注释"/>
</template>
<el-input placeholder="说明" v-model="dataForm.tableComment"></el-input>
</el-form-item>
</el-col>
@ -31,14 +35,22 @@
</el-form-item>
</el-col>
<el-col :span="12" class="mb20">
<el-form-item label="模块名" prop="moduleName">
<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 label="功能名" prop="functionName">
<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>
@ -55,24 +67,32 @@
<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 border :value="1">一列</el-radio>
<el-radio border :value="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 border value="1">自定义路径</el-radio>
<el-radio border value="0">ZIP 压缩包</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="后端生成路径" prop="backendPath" v-if="dataForm.generatorType === '1'">
<el-form-item prop="backendPath" v-if="dataForm.generatorType === '1'">
<template #label>
<span>后端生成路径</span>
<tip content="后端模块biz所在文件全路径比如：D:\data\pigx\pigx-upms\pigx-upms-biz"/>
</template>
<el-input placeholder="后端生成路径" v-model="dataForm.backendPath"></el-input>
</el-form-item>
<el-form-item label="前端生成路径" prop="frontendPath" v-if="dataForm.generatorType === '1'">
<el-form-item prop="frontendPath" v-if="dataForm.generatorType === '1'">
<template #label>
<span>前端生成路径</span>
<tip content="前端所在文件全路径比如：D:\data\pigx-ui"/>
</template>
<el-input placeholder="前端生成路径" v-model="dataForm.frontendPath"></el-input>
</el-form-item>
</el-col>
@ -83,7 +103,10 @@
<script lang="ts" setup>
import {putObj, useTableApi} from '/@/api/gen/table';
import {list as groupList} from '/@/api/gen/group';
import {checkVersion, online} from '/@/api/gen/template';
import {Local} from '/@/utils/storage';
import {rule} from "/@/utils/validate";
import {useMessage, useMessageBox} from "/@/hooks/message";
const props = defineProps({
tableName: {
@ -127,7 +150,7 @@ const getTable = (dsName: string, tableName: string) => {
.then((res) => {
Object.assign(dataForm, res.data);
let list = res.data.groupList;
dataForm.style = list[0].id;
dataForm.style = list[0]?.id;
// 如果是保存路径的形式，有限使用本地配置项
const frontendPath = Local.get('frontendPath');
@ -144,24 +167,66 @@ const getTable = (dsName: string, tableName: string) => {
};
const dataRules = ref({
tableName: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
tableComment: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
className: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
packageName: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
author: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
moduleName: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
functionName: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
generatorType: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
formLayout: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
backendPath: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
frontendPath: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
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'}, {
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 {
await dataFormRef.value.validate();
const valid = await dataFormRef.value.validate(); // 表单校验
if (!valid) return false;
loading.value = true;
await putObj(Object.assign(dataForm, childForm.value));
visible.value = false;
@ -171,7 +236,7 @@ const submitHandle = async () => {
return Promise.reject();
} finally {
//保存路径至Local 中方便下次使用
if (dataForm.generatorType === '1') {
if (dataForm.generatorType === "1") {
Local.set('frontendPath', dataForm.frontendPath);
Local.set('backendPath', dataForm.backendPath);
}
@ -180,11 +245,40 @@ const submitHandle = async () => {
};
const genGroupList = () => {
groupList().then((res) => {
groupDataList.value = res.data;
});
groupList().then(({data}) => {
if (data && data.length > 0 ){
groupDataList.value = data;
}
})
};
/**
* 检查模板版本
*/
const checkTemplateVersion = async () => {
checkVersion().then(({data}) => {
if (!data) {
useMessageBox().confirm('模板发现新版本，是否更新？').then(() => {
// 更新模板
online().then(() => {
useMessage().success('更新成功');
genGroupList()
});
}).catch(() => {
})
}
})
};
watch(
() => childForm,
() => {
const {childTableName} = childForm.value || {};
tableNameStr.value = childTableName ? `${props.tableName} + ${childTableName}` : props.tableName;
},
{deep: true, immediate: true}
);
onMounted(() => {
// 重置表单数据
if (dataFormRef.value) {
@ -196,6 +290,7 @@ onMounted(() => {
getTable(dataForm.dsName, dataForm.tableName);
genGroupList();
checkTemplateVersion()
});
defineExpose({

203
src/views/gen/table/index.vue
View File

@ -1,75 +1,78 @@
<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="请选择数据源" style="width: 100%" 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')" style="max-width: 180px" 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%">
<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
:data="state.dataList"
style="width: 100%"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column :label="t('table.index')" type="index" width="60" />
<el-table-column :label="t('table.tableName')" prop="tableName" show-overflow-tooltip />
<el-table-column :label="t('table.tableDesc')" prop="tableComment" show-overflow-tooltip />
<el-table-column :label="t('table.createTime')" prop="createTime" show-overflow-tooltip />
<el-table-column :label="$t('common.action')" width="200">
<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>
</div>
<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%">
<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
:data="state.dataList"
style="width: 100%"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<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>
</div>
</template>
<script lang="ts" name="systemTable" setup>
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 {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';
// 定义变量内容
const router = useRouter();
// 引入组件
const { t } = useI18n();
const {t} = useI18n();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
@ -77,61 +80,61 @@ const showSearch = ref(true);
const datasourceList = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {
dsName: 'master',
},
pageList: fetchList,
createdIsNeed: false,
queryForm: {
dsName: 'master',
},
pageList: fetchList,
createdIsNeed: false,
});
// table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
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();
});
list().then((res) => {
datasourceList.value = res.data;
// 默认去第一个数据源
if (datasourceList.value.length > 0) {
state.queryForm.dsName = datasourceList.value[0].name;
}
getDataList();
});
});
const openGen = (row) => {
useTableApi(state.queryForm.dsName, row.tableName)
.then((res) => {
if (validateNull(res.data.fieldList)) {
syncTable(row);
}
})
.finally(() => {
router.push({
path: '/gen/gener/index',
query: {
tableName: row.tableName,
dsName: state.queryForm.dsName,
},
});
});
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) => {
useSyncTableApi(state.queryForm.dsName, row.tableName).then(() => {
useMessage().success(t('common.optSuccessText'));
});
const syncTable = (row: { name: string }) => {
useSyncTableApi(state.queryForm.dsName, row.name).then(() => {
useMessage().success(t('common.optSuccessText'));
});
};
// 清空搜索条件
const resetQuery = () => {
queryRef.value.resetFields();
getDataList();
queryRef.value.resetFields();
getDataList();
};
// 导出excel
const exportExcel = () => {
downBlobFile('/gen/table/export', state.queryForm, 'table.xlsx');
downBlobFile('/gen/table/export', state.queryForm, 'table.xlsx');
};
</script>

202
src/views/gen/table/preview.vue
View File

@ -1,33 +1,33 @@
<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>
<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';
@ -40,10 +40,10 @@ const { copyText } = commonFunction();
const visible = ref(false);
// ======== 显示页面 ========
const preview = reactive({
open: false,
titel: '代码预览',
fileTree: [],
activeName: '',
open: false,
titel: '代码预览',
fileTree: [],
activeName: '',
});
const previewCodegen = ref([]);
@ -51,8 +51,8 @@ const previewCodeStr = ref('');
const fileTreeOriginal = ref([] as any[]);
const openDialog = async (id: string) => {
await getGenCodeFile(id);
visible.value = true;
await getGenCodeFile(id);
visible.value = true;
};
const loading = ref(false);
@ -63,43 +63,43 @@ 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;
});
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;
}
if (node && !node.isLeaf) {
return false;
}
preview.activeName = data.id;
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 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;
}
const filteredCode = previewCodegen.value.filter((code: any) => code.codePath === item.paneName);
if (filteredCode.length > 0) {
previewCodeStr.value = filteredCode[0].code;
}
};
/**
@ -108,51 +108,51 @@ const handleTabClick = (item: any) => {
* @returns {*[]}
*/
const handleFiles = (fileTreeOriginal: any) => {
const exists = {};
const files = [] as 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;
// 遍历每个元素
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,
openDialog,
});
</script>
<style scoped lang="scss">
.copy_btn {
position: absolute;
top: 10px;
right: 20px;
z-index: 9;
color: white;
position: absolute;
top: 10px;
right: 20px;
z-index: 9;
color: white;
}
</style>

137
src/views/gen/template/form.vue
View File

@ -1,33 +1,33 @@
<template>
<el-dialog fullscreen :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible">
<el-form :model="form" :rules="dataRules" formDialogRef ref="dataFormRef" v-loading="loading">
<el-container>
<el-aside width="80%">
<code-editor v-model="form.templateCode" theme="darcula" mode="velocity" height="700"></code-editor>
</el-aside>
<el-main>
<el-row>
<el-form-item :label="t('template.templateName')" prop="templateName">
<el-input :placeholder="t('template.inputTemplateNameTip')" v-model="form.templateName" />
</el-form-item>
<el-form-item :label="t('template.desc')" prop="templateDesc">
<el-input :placeholder="t('template.inputDescTip')" v-model="form.templateDesc" />
</el-form-item>
<el-form-item :label="t('template.generatorPath')" prop="generatorPath">
<el-input :placeholder="t('template.inputGeneratorPathTip')" v-model="form.generatorPath" />
</el-form-item>
</el-row>
</el-main>
</el-container>
</el-form>
<el-dialog fullscreen :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible">
<el-form :model="form" :rules="dataRules" formDialogRef ref="dataFormRef" v-loading="loading">
<el-container>
<el-aside width="80%">
<code-editor v-model="form.templateCode" theme="darcula" mode="velocity" height="700"></code-editor>
</el-aside>
<el-main>
<el-row>
<el-form-item :label="t('template.templateName')" prop="templateName">
<el-input :placeholder="t('template.inputTemplateNameTip')" v-model="form.templateName" />
</el-form-item>
<el-form-item :label="t('template.desc')" prop="templateDesc">
<el-input :placeholder="t('template.inputDescTip')" v-model="form.templateDesc" />
</el-form-item>
<el-form-item :label="t('template.generatorPath')" prop="generatorPath">
<el-input :placeholder="t('template.inputGeneratorPathTip')" v-model="form.generatorPath" />
</el-form-item>
</el-row>
</el-main>
</el-container>
</el-form>
<template #footer>
<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>
</el-dialog>
</template>
<script lang="ts" name="GenTemplateDialog" setup>
@ -35,6 +35,7 @@
import { useMessage } from '/@/hooks/message';
import { addObj, getObj, putObj } from '/@/api/gen/template';
import { useI18n } from 'vue-i18n';
import {rule} from "/@/utils/validate";
const CodeEditor = defineAsyncComponent(() => import('/@/components/CodeEditor/index.vue'));
const emit = defineEmits(['refresh']);
@ -50,76 +51,76 @@ const loading = ref(false);
// 提交表单数据
const form = reactive({
id: '',
templateName: '',
generatorPath: '',
templateDesc: '',
templateCode: '',
id: '',
templateName: '',
generatorPath: '',
templateDesc: '',
templateCode: '',
});
// 定义校验规则
const dataRules = ref({
templateName: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
generatorPath: [{ required: true, message: '模板路径不能为空', trigger: 'blur' }],
templateDesc: [{ required: true, message: '模板描述不能为空', trigger: 'blur' }],
templateName: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
generatorPath: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板路径不能为空', trigger: 'blur' }],
templateDesc: [{ validator: rule.overLength, trigger: 'blur' },{ required: true, message: '模板描述不能为空', trigger: 'blur' }],
});
// 打开弹窗
const openDialog = (id: string) => {
visible.value = true;
form.id = '';
visible.value = true;
form.id = '';
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取genTemplate信息
if (id) {
form.id = id;
getgenTemplateData(id);
}
// 重置表单数据
nextTick(() => {
dataFormRef.value?.resetFields();
});
// 获取genTemplate信息
if (id) {
form.id = id;
getgenTemplateData(id);
}
};
// 提交
const onSubmit = async () => {
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
const valid = await dataFormRef.value.validate().catch(() => {});
if (!valid) return false;
// 校验模板是否为空
// 校验模板是否为空
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
try {
loading.value = true;
form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false;
emit('refresh');
} catch (err: any) {
useMessage().error(err.msg);
} finally {
loading.value = false;
}
};
// 初始化表单数据
const getgenTemplateData = (id: string) => {
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
// 获取数据
getObj(id).then((res: any) => {
Object.assign(form, res.data);
});
};
// 暴露变量
defineExpose({
openDialog,
openDialog,
});
</script>
<style scoped>
.splitpanes__pane {
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, 0.6);
font-size: 5em;
display: flex;
justify-content: center;
align-items: center;
font-family: Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, 0.6);
font-size: 5em;
}
</style>

224
src/views/gen/template/index.vue
View File

@ -1,92 +1,101 @@
<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="$t('template.templateName')" prop="templateName">
<el-input :placeholder="t('template.inputTemplateNameTip')" style="max-width: 180px" v-model="state.queryForm.templateName" />
</el-form-item>
<el-form-item>
<el-button @click="getDataList" formDialogRef icon="search" type="primary">
{{ $t('common.queryBtn') }}
</el-button>
<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t('common.resetBtn') }} </el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button @click="formDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary" v-auth="'codegen_template_add'">
{{ $t('common.addBtn') }}
</el-button>
<el-button
plain
:disabled="multiple"
@click="handleDelete(selectObjs)"
class="ml10"
icon="Delete"
type="primary"
v-auth="'codegen_template_del'"
>
{{ $t('common.delBtn') }}
</el-button>
<right-toolbar
:export="'codegen_template_export'"
@exportExcel="exportExcel"
@queryTable="getDataList"
class="ml10"
style="float: right; margin-right: 20px"
v-model:showSearch="showSearch"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
@selection-change="handleSelectionChange"
style="width: 100%"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column align="center" type="selection" width="40" />
<el-table-column :label="t('template.index')" type="index" width="60" />
<el-table-column :label="t('template.templateName')" prop="templateName" show-overflow-tooltip />
<el-table-column :label="t('template.generatorPath')" prop="generatorPath" show-overflow-tooltip />
<el-table-column :label="t('template.desc')" prop="templateDesc" show-overflow-tooltip />
<el-table-column :label="t('template.createTime')" prop="createTime" show-overflow-tooltip />
<el-table-column :label="$t('common.action')" width="150">
<template #default="scope">
<el-button icon="edit-pen" @click="formDialogRef.openDialog(scope.row.id)" text type="primary" v-auth="'codegen_template_edit'"
>{{ $t('common.editBtn') }}
</el-button>
<el-button icon="delete" @click="handleDelete([scope.row.id])" text type="primary" v-auth="'codegen_template_del'"
>{{ $t('common.delBtn') }}
</el-button>
</template>
</el-table-column>
</el-table>
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
</div>
<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="$t('template.templateName')" prop="templateName">
<el-input :placeholder="t('template.inputTemplateNameTip')" style="max-width: 180px"
v-model="state.queryForm.templateName"/>
</el-form-item>
<el-form-item>
<el-button @click="getDataList" formDialogRef icon="search" type="primary">
{{ $t('common.queryBtn') }}
</el-button>
<el-button @click="resetQuery" formDialogRef icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button @click="formDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary"
v-auth="'codegen_template_add'">
{{ $t('common.addBtn') }}
</el-button>
<el-button
plain
:disabled="multiple"
@click="handleDelete(selectObjs)"
class="ml10"
icon="Delete"
type="primary"
v-auth="'codegen_template_del'"
>
{{ $t('common.delBtn') }}
</el-button>
<el-button @click="onlineUpdate" class="ml10" icon="download" plain :disabled="updateDisabled"
v-auth="'codegen_template_add'">
更新
</el-button>
<right-toolbar
:export="'codegen_template_export'"
@exportExcel="exportExcel"
@queryTable="getDataList"
class="ml10"
style="float: right; margin-right: 20px"
v-model:showSearch="showSearch"
></right-toolbar>
</div>
</el-row>
<el-table
:data="state.dataList"
@selection-change="handleSelectionChange"
style="width: 100%"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column align="center" type="selection" width="40"/>
<el-table-column :label="t('template.index')" type="index" width="60"/>
<el-table-column :label="t('template.templateName')" prop="templateName" show-overflow-tooltip/>
<el-table-column :label="t('template.generatorPath')" prop="generatorPath" show-overflow-tooltip/>
<el-table-column :label="t('template.desc')" prop="templateDesc" show-overflow-tooltip/>
<el-table-column :label="t('template.createTime')" prop="createTime" show-overflow-tooltip/>
<el-table-column :label="$t('common.action')" width="150">
<template #default="scope">
<el-button icon="edit-pen" @click="formDialogRef.openDialog(scope.row.id)" text type="primary"
v-auth="'codegen_template_edit'"
>{{ $t('common.editBtn') }}
</el-button>
<el-button icon="delete" @click="handleDelete([scope.row.id])" text type="primary"
v-auth="'codegen_template_del'"
>{{ $t('common.delBtn') }}
</el-button>
</template>
</el-table-column>
</el-table>
<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination"/>
</div>
<!-- 编辑、新增 -->
<form-dialog @refresh="getDataList()" ref="formDialogRef" />
</div>
<!-- 编辑、新增 -->
<form-dialog @refresh="getDataList()" ref="formDialogRef"/>
</div>
</template>
<script lang="ts" name="systemGenTemplate" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { delObjs, fetchList } from '/@/api/gen/template';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import {BasicTableProps, useTable} from '/@/hooks/table';
import {delObjs, fetchList, online} from '/@/api/gen/template';
import {useMessage, useMessageBox} from '/@/hooks/message';
import {useI18n} from 'vue-i18n';
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
const { t } = useI18n();
const {t} = useI18n();
// 定义查询字典
// 定义变量内容
const formDialogRef = ref();
const updateDisabled = ref(false);
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
@ -95,48 +104,61 @@ const selectObjs = ref([]) as any;
const multiple = ref(true);
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
pageList: fetchList,
descs: ['create_time'],
queryForm: {},
pageList: fetchList,
descs: ['create_time'],
});
// table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);
const {getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle} = useTable(state);
// 清空搜索条件
const resetQuery = () => {
// 清空搜索条件
queryRef.value.resetFields();
// 清空多选
selectObjs.value = [];
getDataList();
// 清空搜索条件
queryRef.value.resetFields();
// 清空多选
selectObjs.value = [];
getDataList();
};
// 导出excel
const exportExcel = () => {
downBlobFile('/gen/template/export', state.queryForm, 'template.xlsx');
downBlobFile('/gen/template/export', state.queryForm, 'template.xlsx');
};
// 多选事件
const handleSelectionChange = (objs: { id: string }[]) => {
selectObjs.value = objs.map(({ id }) => id);
multiple.value = !objs.length;
selectObjs.value = objs.map(({id}) => id);
multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: string[]) => {
try {
await useMessageBox().confirm(t('common.delConfirmText'));
} catch {
return;
}
try {
await useMessageBox().confirm(t('common.delConfirmText'));
} catch {
return;
}
try {
await delObjs(ids);
getDataList();
useMessage().success(t('common.delSuccessText'));
} catch (err: any) {
useMessage().error(err.msg);
}
try {
await delObjs(ids);
getDataList();
useMessage().success(t('common.delSuccessText'));
} catch (err: any) {
useMessage().error(err.msg);
}
};
const onlineUpdate = async () => {
try {
updateDisabled.value = true;
const {data} = await online();
getDataList();
useMessage().success(data);
} catch (err: any) {
useMessage().error(err.msg);
} finally {
updateDisabled.value = false;
}
};
</script>