feat: 主页展示和数据库表显示
This commit is contained in:
commit
276c363cc0
|
|
@ -0,0 +1,29 @@
|
|||
# 应用名称
|
||||
VITE_APP_TITLE="代码生成器"
|
||||
|
||||
# 平台本地运行端口号
|
||||
VITE_PORT=7000
|
||||
|
||||
# 开发环境读取配置文件路径
|
||||
VITE_PUBLIC_PATH=/
|
||||
|
||||
# 跨域代理地址
|
||||
VITE_APP_URL=http://localhost:9999
|
||||
|
||||
# 如果端口被占用会直接退出，而不是尝试下一个端口
|
||||
VITE_STRICT_PORT=false
|
||||
|
||||
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
||||
VITE_CDN=false
|
||||
|
||||
# 是否使用Mock
|
||||
VITE_MOCK_DEV_SERVER=true
|
||||
|
||||
# mock地址
|
||||
VITE_MOCK_BASE_API=/mock
|
||||
|
||||
# 基础请求路径
|
||||
VITE_APP_BASE_API=/api
|
||||
|
||||
# 是否启用gzip压缩
|
||||
VITE_COMPRESSION=gzip
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
# 平台本地运行端口号
|
||||
VITE_PORT=7000
|
||||
|
||||
# 开发环境读取配置文件路径
|
||||
VITE_PUBLIC_PATH=/
|
||||
|
||||
# 跨域代理地址
|
||||
VITE_APP_URL=http://localhost:9999
|
||||
|
||||
# 基础请求路径
|
||||
VITE_APP_BASE_API=/api
|
||||
|
||||
# mock地址
|
||||
VITE_MOCK_BASE_API=/mock
|
||||
|
||||
# 是否使用Mock
|
||||
VITE_MOCK_DEV_SERVER=true
|
||||
|
||||
# 如果端口被占用会直接退出，而不是尝试下一个端口
|
||||
VITE_STRICT_PORT=false
|
||||
|
||||
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
||||
VITE_CDN=false
|
||||
|
||||
# 是否启用gzip压缩
|
||||
VITE_COMPRESSION=gzip
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
# 平台本地运行端口号
|
||||
VITE_PORT=7000
|
||||
|
||||
# 开发环境读取配置文件路径
|
||||
VITE_PUBLIC_PATH=/
|
||||
|
||||
# 跨域代理地址
|
||||
VITE_APP_URL=http://localhost:8801
|
||||
|
||||
# 基础请求路径
|
||||
VITE_APP_BASE_API=/api
|
||||
|
||||
# 是否使用Mock
|
||||
VITE_MOCK_DEV_SERVER=true
|
||||
|
||||
# mock地址
|
||||
VITE_MOCK_BASE_API=/mock
|
||||
|
||||
# 如果端口被占用会直接退出，而不是尝试下一个端口
|
||||
VITE_STRICT_PORT=false
|
||||
|
||||
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
||||
VITE_CDN=false
|
||||
|
||||
# 是否启用gzip压缩
|
||||
VITE_COMPRESSION=gzip
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
|
||||
|
||||
import { wrapperEnv } from './utils';
|
||||
|
||||
/**
|
||||
* @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
|
||||
* 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
|
||||
* 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
|
||||
*/
|
||||
export const cdn = importToCDN({
|
||||
//（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
|
||||
// prodUrl: 'https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}',
|
||||
prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
|
||||
modules: [
|
||||
{
|
||||
name: 'vue',
|
||||
var: 'Vue',
|
||||
path: 'dist/vue.global.prod.js',
|
||||
},
|
||||
{
|
||||
name: 'vue-router',
|
||||
var: 'VueRouter',
|
||||
path: 'dist/vue-router.global.js',
|
||||
},
|
||||
{
|
||||
name: 'pinia',
|
||||
var: 'Pinia',
|
||||
path: 'dist/pinia.iife.js',
|
||||
},
|
||||
{
|
||||
name: 'axios',
|
||||
var: 'axios',
|
||||
path: 'dist/axios.min.js',
|
||||
},
|
||||
{
|
||||
name: 'dayjs',
|
||||
var: 'dayjs',
|
||||
path: 'dayjs.min.js',
|
||||
},
|
||||
{
|
||||
name: 'echarts',
|
||||
var: 'echarts',
|
||||
path: 'dist/echarts.min.js',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/* 是否使用CDN加速 */
|
||||
export const useCDN = (mode) => {
|
||||
const env = wrapperEnv(mode, 'VITE');
|
||||
return env.VITE_CDN ? cdn : null;
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import type {AcceptedPlugin} from 'postcss';
|
||||
import type {CSSOptions} from 'vite';
|
||||
|
||||
import {wrapperEnv} from './utils';
|
||||
|
||||
export const css = (mode: string): CSSOptions => {
|
||||
return {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@use "@/assets/styles/minix/sidebar" as *;`,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { pathResolve } from './utils';
|
||||
|
||||
export const resolve = () => {
|
||||
return {
|
||||
alias: {
|
||||
'@': pathResolve('../src'),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
{
|
||||
"name": "generator-code-web",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"report": "rimraf dist && vite build",
|
||||
"lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
|
||||
"lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@eslint/js": "^9.21.0",
|
||||
"@parcel/watcher": "^2.5.1",
|
||||
"@types/node": "^22.13.10",
|
||||
"@typescript-eslint/eslint-plugin": "^8.24.1",
|
||||
"@typescript-eslint/parser": "^8.24.1",
|
||||
"@unocss/preset-icons": "^66.0.0",
|
||||
"@unocss/reset": "^66.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
||||
"@vueuse/core": "^12.8.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.7.9",
|
||||
"boxen": "^8.0.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.6.0",
|
||||
"esbuild": "^0.25.1",
|
||||
"eslint": "^9.9.1",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-define-config": "^2.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"gradient-string": "^3.0.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"list": "^2.0.19",
|
||||
"naive-ui": "^2.41.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.3.1",
|
||||
"pinia-plugin-persistedstate": "^3.2.3",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.3.3",
|
||||
"qs": "^6.14.0",
|
||||
"rimraf": "^5.0.10",
|
||||
"rollup-plugin-visualizer": "^5.14.0",
|
||||
"sass": "^1.77.8",
|
||||
"stylelint": "^16.14.1",
|
||||
"stylelint-config-recess-order": "^6.0.0",
|
||||
"stylelint-config-recommended-vue": "^1.6.0",
|
||||
"stylelint-config-standard-scss": "^14.0.0",
|
||||
"stylelint-prettier": "^5.0.3",
|
||||
"terser": "^5.39.0",
|
||||
"unocss": "^66.0.0",
|
||||
"vfonts": "^0.0.3",
|
||||
"vite-plugin-cdn-import": "^1.0.1",
|
||||
"vite-plugin-fake-server": "^2.2.0",
|
||||
"vite-plugin-remove-console": "^2.2.0",
|
||||
"vite-plugin-vue-inspector": "^5.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-demi": "^0.14.10",
|
||||
"vue-eslint-parser": "^9.4.3",
|
||||
"vue-router": "^4.4.3",
|
||||
"vue-types": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.310",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/qs": "^6.9.18",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
||||
"typescript": "~5.7.2",
|
||||
"vite": "^6.1.0",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vue-tsc": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0",
|
||||
"pnpm": ">=8.6.10"
|
||||
},
|
||||
"pnpm": {
|
||||
"allowedDeprecatedVersions": {
|
||||
"sourcemap-codec": "*",
|
||||
"domexception": "*",
|
||||
"w3c-hr-time": "*",
|
||||
"stable": "*",
|
||||
"abab": "*"
|
||||
},
|
||||
"peerDependencyRules": {
|
||||
"allowedVersions": {
|
||||
"eslint": "9"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<n-config-provider>
|
||||
<n-message-provider>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
|
||||
<component :is="Component" :key="route.path" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { NConfigProvider, NMessageProvider } from 'naive-ui';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import request from '@/api/server/requestMock';
|
||||
import type { BaseResult } from '@/types/request'; /* 获取所有数据表 */
|
||||
|
||||
/* 获取所有数据表 */
|
||||
export const getAllTableMetaData = () => {
|
||||
return request<any, BaseResult<any>>({ url: '/table/getAllTableMetaData', method: 'get' });
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import request from '@/api/server/request';
|
||||
import type { BaseResult } from '@/types/request';
|
||||
|
||||
/* 获取所有数据表 */
|
||||
export const getAllTableMetaData = () => {
|
||||
return request<any, BaseResult<any>>({ url: '/table/getAllTableMetaData', method: 'get' });
|
||||
};
|
||||
|
||||
/* 获取表属性 */
|
||||
export const getTableMetaData = (params: object) => {
|
||||
return request<any, BaseResult<any>>({ url: '/table/getTableMetaData', method: 'get', params });
|
||||
};
|
||||
|
||||
/* 获取列属性 */
|
||||
export const getColumnInfo = (params: object) => {
|
||||
return request<any, BaseResult<any>>({ url: '/table/getColumnInfo', method: 'get', params });
|
||||
};
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
@mixin view-style-default($sidebar-width,$content-width) {
|
||||
&__sidebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
|
||||
&-item {
|
||||
padding: 9px 15px;
|
||||
width: 100%;
|
||||
background: rgba(14, 95, 255, 0.2);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
float: left;
|
||||
margin: 0 7px 0 0;
|
||||
width: 62px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background: rgba(24, 69, 135, 0.55);
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 172px;
|
||||
height: 42px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
background: url('@/assets/images/business-supervision/bg/sidebar/bg-frame-4.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&-title-describe {
|
||||
font-size: 12px;
|
||||
color: var(--color-info-secondary-1);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: $content-width;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="container m-auto">
|
||||
<h1 class="mt-4 text-center font-bold font-size-[22px] c-primary">代码生成器</h1>
|
||||
|
||||
<main class="container mx-auto">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<footer class="my-4 text-center">
|
||||
<p>© 2025 Bunny.保留所有权利.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import localeData from 'dayjs/plugin/localeData';
|
||||
import weekday from 'dayjs/plugin/weekday';
|
||||
|
||||
dayjs.extend(weekday);
|
||||
dayjs.extend(localeData);
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
export default dayjs;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import type { App } from 'vue';
|
||||
|
||||
import { setupDirective } from '@/directive';
|
||||
import { setupRouter } from '@/router';
|
||||
import { setupStore } from '@/store';
|
||||
|
||||
export default {
|
||||
install(app: App<Element>) {
|
||||
// 设置路由
|
||||
setupRouter(app);
|
||||
// 设置状态管理
|
||||
setupStore(app);
|
||||
// 设置指令
|
||||
setupDirective(app);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import Layout from '@/layout/index.vue';
|
||||
import type { RouteConfigsTable } from '@/types/router/Route';
|
||||
|
||||
const routes: RouteRecordRaw[] | RouteConfigsTable[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: '/',
|
||||
component: Layout,
|
||||
redirect: '/home',
|
||||
meta: { transition: 'fade' },
|
||||
children: [
|
||||
{ path: '/home', name: 'home', component: () => import('@/views/home/index.vue') },
|
||||
{
|
||||
path: '/generator-code',
|
||||
name: 'generatorCode',
|
||||
component: () => import('@/views/generator-code/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
import { isCSSColor, isPath } from '@/utils/regexp/regexpBackground';
|
||||
|
||||
const useAppStore = defineStore('appStore', {
|
||||
state() {
|
||||
return {
|
||||
background: '',
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
setBackground(background: string) {
|
||||
if (isCSSColor(background)) {
|
||||
this.background = background;
|
||||
} else if (isPath(background)) {
|
||||
const href = new URL(background, import.meta.url).href;
|
||||
this.background = `url(${href})`;
|
||||
} else {
|
||||
const href = new URL('@/assets/images/common/bg/bg-layout.png', import.meta.url).href;
|
||||
this.background = `url(${href})`;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export { useAppStore };
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { useMessage } from 'naive-ui';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
import { getAllTableMetaData, getColumnInfo, getTableMetaData } from '@/api/table';
|
||||
|
||||
export const useTableStore = defineStore('tableStore', {
|
||||
state: () => ({
|
||||
// 数据库所有的表
|
||||
tableList: [],
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
/* 获取所有数据表 */
|
||||
async getAllTableMetaData() {
|
||||
const message = useMessage();
|
||||
const result = await getAllTableMetaData();
|
||||
if (result.code !== 200) {
|
||||
message.error(result.message);
|
||||
}
|
||||
|
||||
this.tableList = result.data;
|
||||
},
|
||||
|
||||
/* 获取表属性 */
|
||||
async getTableMetaData(tableName: string) {
|
||||
const message = useMessage();
|
||||
const result = await getTableMetaData({ tableName });
|
||||
if (result.code !== 200) {
|
||||
message.error(result.message);
|
||||
return {};
|
||||
}
|
||||
|
||||
return result.data;
|
||||
},
|
||||
|
||||
/* 获取表属性 */
|
||||
async getColumnInfo(tableName: string) {
|
||||
const message = useMessage();
|
||||
const result = await getColumnInfo({ tableName });
|
||||
if (result.code !== 200) {
|
||||
message.error(result.message);
|
||||
return {};
|
||||
}
|
||||
|
||||
return result.data;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import type { RouteComponent } from 'vue-router';
|
||||
|
||||
/**
|
||||
* @description 完整子路由的`meta`配置表
|
||||
*/
|
||||
interface CustomizeRouteMeta {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
transition: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 整体路由配置表（包括完整子路由）
|
||||
*/
|
||||
export interface RouteConfigsTable {
|
||||
/** 路由地址 `必填` */
|
||||
path: string;
|
||||
/** 路由名字（保持唯一）`可选` */
|
||||
name?: string;
|
||||
/** `Layout`组件 `可选` */
|
||||
component?: RouteComponent;
|
||||
/** 路由重定向 `可选` */
|
||||
redirect?: string;
|
||||
meta?: CustomizeRouteMeta;
|
||||
/** 子路由配置项 */
|
||||
children?: Array<RouteConfigsTable>;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { useDebounceFn, useEventListener } from '@vueuse/core';
|
||||
|
||||
import echarts from '@/plugins/echarts';
|
||||
|
||||
/** 通用重置图表样式 */
|
||||
export const debounceChart = (myChart: echarts.ECharts | undefined) => {
|
||||
const debounceFn = useDebounceFn(() => {
|
||||
myChart!.resize();
|
||||
}, 500);
|
||||
|
||||
useEventListener(window, 'resize', debounceFn);
|
||||
};
|
||||
|
||||
/** 数字格式化 */
|
||||
export const formatter = (number: any) => {
|
||||
const numbers = number.toString().split('').reverse();
|
||||
const segs = [];
|
||||
|
||||
while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
|
||||
|
||||
return segs.join(',').split('').reverse().join('');
|
||||
};
|
||||
|
||||
/** 颜色渲染 */
|
||||
export const graphicLinearGradient = (
|
||||
color1: string,
|
||||
color2: string,
|
||||
coordinate: Array<number> = [0, 0, 0, 1]
|
||||
) => {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
coordinate[0],
|
||||
coordinate[1],
|
||||
coordinate[2],
|
||||
coordinate[3],
|
||||
[
|
||||
{ offset: 0, color: color1 },
|
||||
{ offset: 1, color: color2 },
|
||||
]
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/** 判断是否是CSS颜色 */
|
||||
function isCSSColor(str: string) {
|
||||
// 匹配十六进制颜色（如 #fff, #ffffff）
|
||||
const hexColor = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
|
||||
|
||||
// 匹配RGB/RGBA颜色（如 rgb(255, 255, 255), rgba(255, 255, 255, 0.5)）
|
||||
const rgbColor = /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*[\d\.]+)?\s*\)$/;
|
||||
|
||||
// 匹配HSL/HSLA颜色（如 hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)）
|
||||
const hslColor = /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)$/;
|
||||
|
||||
// 匹配预定义颜色名称（如 red, blue, green）
|
||||
const namedColor = /^[a-zA-Z]+$/;
|
||||
|
||||
return hexColor.test(str) || rgbColor.test(str) || hslColor.test(str) || namedColor.test(str);
|
||||
}
|
||||
|
||||
/** 判断是否是相对路径或绝对路径 */
|
||||
function isPath(str: string) {
|
||||
// 匹配相对路径（如 ./path, ../path, path/to/file）
|
||||
const relativePath = /^\.{0,2}\/[^\/].*$/;
|
||||
|
||||
// 匹配绝对路径（如 /path/to/file, C:\path\to\file）
|
||||
const absolutePath = /^(?:\/|[A-Za-z]:\\).*$/;
|
||||
|
||||
return relativePath.test(str) || absolutePath.test(str);
|
||||
}
|
||||
|
||||
export { isCSSColor, isPath };
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { NTag } from 'naive-ui';
|
||||
import type { JSX } from 'vue/jsx-runtime';
|
||||
|
||||
export const columns: any = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'no',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any, index: number) {
|
||||
return index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '列名称',
|
||||
key: 'columnName',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return <NTag type="primary">{row.columnName}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字段名称',
|
||||
key: 'fieldName',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return <NTag>{row.fieldName}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '数据库字段类型',
|
||||
key: 'jdbcType',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return <NTag>{row.jdbcType}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Java类型',
|
||||
key: 'javaType',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return <NTag type="warning">{row.javaType}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '是否为主键',
|
||||
key: 'isPrimaryKey',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return row.isPrimaryKey ? <NTag type="error">是</NTag> : <NTag type="success">否</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '字段注释',
|
||||
key: 'comment',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row: any): JSX.Element {
|
||||
return <NTag type="info">{row.comment}</NTag>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<script lang="ts" setup>
|
||||
import { NDataTable } from 'naive-ui';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { useTableStore } from '@/store/modules/table';
|
||||
import { columns } from '@/views/generator-code/components/columns-info/columns';
|
||||
|
||||
const route = useRoute();
|
||||
const tableStore = useTableStore();
|
||||
|
||||
// 数据库中当前表的列信息
|
||||
const datalist = ref([]);
|
||||
|
||||
/* 数据库列信息 */
|
||||
const getColumnInfo = async () => {
|
||||
const tableName: any = route.query.tableName;
|
||||
datalist.value = await tableStore.getColumnInfo(tableName);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getColumnInfo();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-data-table :bordered="true" :columns="columns" :data="datalist" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" inline>
|
||||
<n-form-item label="姓名" path="user.name">
|
||||
<n-input v-model:value="formValue.name" placeholder="输入姓名" />
|
||||
</n-form-item>
|
||||
<n-form-item label="年龄" path="user.age">
|
||||
<n-input v-model:value="formValue.age" placeholder="输入年龄" />
|
||||
</n-form-item>
|
||||
<n-form-item label="电话号码" path="phone">
|
||||
<n-input v-model:value="formValue.phone" placeholder="电话号码" />
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button attr-type="button" @click="handleValidateClick">验证</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormRules, NButton, NForm, NFormItem, NInput, useMessage } from 'naive-ui';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const rules: FormRules = {
|
||||
input: {
|
||||
required: true,
|
||||
trigger: ['focus', 'input'],
|
||||
renderMessage: () => {
|
||||
return localeRef.value === '语言1'
|
||||
? '抽离透传归因分析作为抓手为产品赋能'
|
||||
: '方法论是组合拳达到平台化标准';
|
||||
},
|
||||
},
|
||||
};
|
||||
const message = useMessage();
|
||||
const formRef = ref();
|
||||
const formValue = reactive({});
|
||||
|
||||
const handleValidateClick = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
formRef.value?.validate((errors: any) => {
|
||||
if (!errors) {
|
||||
message.success('验证成功');
|
||||
} else {
|
||||
console.log(errors);
|
||||
message.error('验证失败');
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<script lang="ts" setup>
|
||||
import { NCard, NTabPane, NTabs } from 'naive-ui';
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useTableStore } from '@/store/modules/table';
|
||||
import Index from '@/views/generator-code/components/columns-info/index.vue';
|
||||
import GeneratorForm from '@/views/generator-code/components/generator-form/index.vue';
|
||||
import Home from '@/views/home/index.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const tableStore = useTableStore();
|
||||
|
||||
// 数据库表信息
|
||||
const tableInfo = reactive({
|
||||
tableName: '',
|
||||
comment: '',
|
||||
tableCat: '',
|
||||
tableType: '',
|
||||
});
|
||||
|
||||
/* 获取数据库表属性 */
|
||||
const getTableData = async () => {
|
||||
const tableName: any = route.query.tableName;
|
||||
const tableMetaData = await tableStore.getTableMetaData(tableName);
|
||||
Object.assign(tableInfo, tableMetaData);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<n-card>
|
||||
<template #header>
|
||||
<n-card title="数据库信息">
|
||||
<ul>
|
||||
<li>表名：{{ route.query.tableName }}</li>
|
||||
<li>表注释：{{ tableInfo.comment }}</li>
|
||||
<li>数据库名：{{ tableInfo.tableCat }}</li>
|
||||
<li>类型：{{ tableInfo.tableType }}</li>
|
||||
</ul>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<n-tabs animated type="line">
|
||||
<n-tab-pane name="columns-info" tab="列字段">
|
||||
<index />
|
||||
</n-tab-pane>
|
||||
|
||||
<n-tab-pane name="home" tab="数据库表" @click="router.push('/')">
|
||||
<a class="color-blue" href="/">回到首页</a>
|
||||
<home />
|
||||
</n-tab-pane>
|
||||
|
||||
<n-tab-pane name="the beatles" tab="生成">
|
||||
<generator-form />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { NTag } from 'naive-ui';
|
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface';
|
||||
import type { JSX } from 'vue/jsx-runtime';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export function columns(): TableColumns<any> {
|
||||
const router = useRouter();
|
||||
|
||||
const routerPush = (row: any) => {
|
||||
router.push({ path: '/generator-code', query: { tableName: row.tableName } }).then();
|
||||
};
|
||||
|
||||
return [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'no',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row, index): JSX.Element {
|
||||
return index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '数据库名称',
|
||||
key: 'tableCat',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row): JSX.Element {
|
||||
return <NTag type="primary">{row.tableCat}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '表类型',
|
||||
key: 'tableType',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row): JSX.Element {
|
||||
return <NTag>{row.tableType}</NTag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
key: 'tableName',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row): JSX.Element {
|
||||
return (
|
||||
<NTag type="info">
|
||||
<a href="javascript:" onClick={() => routerPush(row)}>
|
||||
{row.tableName}
|
||||
</a>
|
||||
</NTag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '注释内容',
|
||||
key: 'comment',
|
||||
titleAlign: 'center',
|
||||
align: 'center',
|
||||
render(row): JSX.Element {
|
||||
return (
|
||||
<NTag type="info">
|
||||
<a href="javascript:" onClick={() => routerPush(row)}>
|
||||
{row.comment}
|
||||
</a>
|
||||
</NTag>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<script lang="tsx" setup>
|
||||
import { NCard, NDataTable, NTag } from 'naive-ui';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
import { useTableStore } from '@/store/modules/table';
|
||||
import { columns } from '@/views/home/columns';
|
||||
|
||||
const tableStore = useTableStore();
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.getAllTableMetaData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-card class="my-2" title="提示">
|
||||
<p>
|
||||
点击
|
||||
<n-tag>表名</n-tag>
|
||||
或
|
||||
<n-tag>注释内容</n-tag>
|
||||
跳转
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
数据库共
|
||||
<n-tag type="info">{{ tableStore.tableList.length }}</n-tag>
|
||||
张表
|
||||
</p>
|
||||
</n-card>
|
||||
|
||||
<n-data-table :bordered="true" :columns="columns()" :data="tableStore.tableList" />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue