From fecc5d8bcb2f757869da385dd87254fa7be64564 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=B7=E5=86=B7?= <2270033969@qq.com>
Date: Mon, 15 Jul 2024 23:17:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81anyline=20=E5=8A=A8=E6=80=81=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E8=A1=A8=E5=85=83=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 1. 支持代码生成模板 从 github获取
- 2. 重构代码生成的默认值从配置类获取
---
 src/api/gen/template.ts            |  15 ++
 src/utils/validate.ts              |   7 +
 src/views/admin/dict/i18n/en.ts    |   1 +
 src/views/admin/dict/i18n/zh-cn.ts |   1 +
 src/views/gen/datasource/form.vue  | 274 +++++++++++++++--------------
 src/views/gen/datasource/index.vue |   4 +-
 src/views/gen/design/form.vue      |  71 ++++++++
 src/views/gen/design/index.vue     | 132 ++++++++++++++
 src/views/gen/field-type/form.vue  | 118 ++++++-------
 src/views/gen/gener/index.vue      |  43 +++--
 src/views/gen/group/form.vue       | 141 ++++++++-------
 src/views/gen/table/add-dict.vue   | 151 ++++++++++++++++
 src/views/gen/table/edit.vue       | 171 +++++++++++-------
 src/views/gen/table/generator.vue  | 147 +++++++++++++---
 src/views/gen/table/index.vue      | 203 ++++++++++-----------
 src/views/gen/table/preview.vue    | 202 ++++++++++-----------
 src/views/gen/template/form.vue    | 137 ++++++++-------
 src/views/gen/template/index.vue   | 224 ++++++++++++-----------
 18 files changed, 1296 insertions(+), 746 deletions(-)
 create mode 100644 src/views/gen/design/form.vue
 create mode 100644 src/views/gen/design/index.vue
 create mode 100644 src/views/gen/table/add-dict.vue

diff --git a/src/api/gen/template.ts b/src/api/gen/template.ts
index b3416426..c3dc98ed 100644
--- a/src/api/gen/template.ts
+++ b/src/api/gen/template.ts
@@ -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',
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index 5e38b9a0..0ef6de21 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -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();
+		}
+	},
 	/**
 	 * 校验 请输入中文、英文、数字包括下划线
 	 * 名称校验
diff --git a/src/views/admin/dict/i18n/en.ts b/src/views/admin/dict/i18n/en.ts
index 7a75dc02..84954840 100644
--- a/src/views/admin/dict/i18n/en.ts
+++ b/src/views/admin/dict/i18n/en.ts
@@ -26,6 +26,7 @@ export default {
 	},
 	dictItem: {
 		index: '#',
+		name: 'dict item',
 		importsysDictItemTip: 'import SysDictItem',
 		id: 'id',
 		dictId: 'dictId',
diff --git a/src/views/admin/dict/i18n/zh-cn.ts b/src/views/admin/dict/i18n/zh-cn.ts
index dd9b9c69..a4cf25a4 100644
--- a/src/views/admin/dict/i18n/zh-cn.ts
+++ b/src/views/admin/dict/i18n/zh-cn.ts
@@ -29,6 +29,7 @@ export default {
 	},
 	dictItem: {
 		index: '#',
+		name: '字典项',
 		importsysDictItemTip: '导入字典项',
 		id: '编号',
 		dictId: ' dictId',
diff --git a/src/views/gen/datasource/form.vue b/src/views/gen/datasource/form.vue
index dd7881e2..783fe172 100644
--- a/src/views/gen/datasource/form.vue
+++ b/src/views/gen/datasource/form.vue
@@ -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>
diff --git a/src/views/gen/datasource/index.vue b/src/views/gen/datasource/index.vue
index 2e10bc59..0cf1fb10 100644
--- a/src/views/gen/datasource/index.vue
+++ b/src/views/gen/datasource/index.vue
@@ -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>
diff --git a/src/views/gen/design/form.vue b/src/views/gen/design/form.vue
new file mode 100644
index 00000000..3b1652cb
--- /dev/null
+++ b/src/views/gen/design/form.vue
@@ -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>
diff --git a/src/views/gen/design/index.vue b/src/views/gen/design/index.vue
new file mode 100644
index 00000000..370d93b7
--- /dev/null
+++ b/src/views/gen/design/index.vue
@@ -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>
diff --git a/src/views/gen/field-type/form.vue b/src/views/gen/field-type/form.vue
index 1131f155..86540aef 100644
--- a/src/views/gen/field-type/form.vue
+++ b/src/views/gen/field-type/form.vue
@@ -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>
diff --git a/src/views/gen/gener/index.vue b/src/views/gen/gener/index.vue
index 6a9bde84..7bca2175 100644
--- a/src/views/gen/gener/index.vue
+++ b/src/views/gen/gener/index.vue
@@ -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);
diff --git a/src/views/gen/group/form.vue b/src/views/gen/group/form.vue
index 34503f17..4d6fed5d 100644
--- a/src/views/gen/group/form.vue
+++ b/src/views/gen/group/form.vue
@@ -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>
diff --git a/src/views/gen/table/add-dict.vue b/src/views/gen/table/add-dict.vue
new file mode 100644
index 00000000..c82223ef
--- /dev/null
+++ b/src/views/gen/table/add-dict.vue
@@ -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>
diff --git a/src/views/gen/table/edit.vue b/src/views/gen/table/edit.vue
index a7d7d4ba..40446ed7 100644
--- a/src/views/gen/table/edit.vue
+++ b/src/views/gen/table/edit.vue
@@ -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});
     }
   });
 };
diff --git a/src/views/gen/table/generator.vue b/src/views/gen/table/generator.vue
index 62c4fd86..cb8d79a5 100644
--- a/src/views/gen/table/generator.vue
+++ b/src/views/gen/table/generator.vue
@@ -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({
diff --git a/src/views/gen/table/index.vue b/src/views/gen/table/index.vue
index 166a12eb..0b2e842a 100644
--- a/src/views/gen/table/index.vue
+++ b/src/views/gen/table/index.vue
@@ -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>
diff --git a/src/views/gen/table/preview.vue b/src/views/gen/table/preview.vue
index 2ef80131..d964e63e 100644
--- a/src/views/gen/table/preview.vue
+++ b/src/views/gen/table/preview.vue
@@ -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>
diff --git a/src/views/gen/template/form.vue b/src/views/gen/template/form.vue
index 05ffa80f..b3e61ff5 100644
--- a/src/views/gen/template/form.vue
+++ b/src/views/gen/template/form.vue
@@ -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>
diff --git a/src/views/gen/template/index.vue b/src/views/gen/template/index.vue
index ddc6e826..8ac7b7e8 100644
--- a/src/views/gen/template/index.vue
+++ b/src/views/gen/template/index.vue
@@ -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>