Skip to content

phsl / admin

Go to a project
Commit 95b7eb98 by 芋道源码 Committed by Gitee
Options

!68 Vue3 重构：基础设施 -> 代码生成 

Merge pull request !68 from xiaowuye/dev
parents e3bcfa50 bedcd220
Showing with 588 additions and 489 deletions
src/api/infra/codegen/index.ts
...@@ -2,56 +2,56 @@ import request from '@/config/axios' ...@@ -2,56 +2,56 @@ import request from '@/config/axios'
import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types' import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
// 查询列表代码生成表定义 // 查询列表代码生成表定义
export const getCodegenTablePageApi = (params) => { export const getCodegenTablePage = (params) => {
return request.get({ url: '/infra/codegen/table/page', params }) return request.get({ url: '/infra/codegen/table/page', params })
} }
// 查询详情代码生成表定义 // 查询详情代码生成表定义
export const getCodegenTableApi = (id: number) => { export const getCodegenTable = (id: number) => {
return request.get({ url: '/infra/codegen/detail?tableId=' + id }) return request.get({ url: '/infra/codegen/detail?tableId=' + id })
} }
// 新增代码生成表定义 // 新增代码生成表定义
export const createCodegenTableApi = (data: CodegenCreateListReqVO) => { export const createCodegenTable = (data: CodegenCreateListReqVO) => {
return request.post({ url: '/infra/codegen/create', data }) return request.post({ url: '/infra/codegen/create', data })
} }
// 修改代码生成表定义 // 修改代码生成表定义
export const updateCodegenTableApi = (data: CodegenUpdateReqVO) => { export const updateCodegenTable = (data: CodegenUpdateReqVO) => {
return request.put({ url: '/infra/codegen/update', data }) return request.put({ url: '/infra/codegen/update', data })
} }
// 基于数据库的表结构，同步数据库的表和字段定义 // 基于数据库的表结构，同步数据库的表和字段定义
export const syncCodegenFromDBApi = (id: number) => { export const syncCodegenFromDB = (id: number) => {
return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id }) return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
} }
// 基于 SQL 建表语句，同步数据库的表和字段定义 // 基于 SQL 建表语句，同步数据库的表和字段定义
export const syncCodegenFromSQLApi = (id: number, sql: string) => { export const syncCodegenFromSQL = (id: number, sql: string) => {
return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql }) return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql })
} }
// 预览生成代码 // 预览生成代码
export const previewCodegenApi = (id: number) => { export const previewCodegen = (id: number) => {
return request.get({ url: '/infra/codegen/preview?tableId=' + id }) return request.get({ url: '/infra/codegen/preview?tableId=' + id })
} }
// 下载生成代码 // 下载生成代码
export const downloadCodegenApi = (id: number) => { export const downloadCodegen = (id: number) => {
return request.download({ url: '/infra/codegen/download?tableId=' + id }) return request.download({ url: '/infra/codegen/download?tableId=' + id })
} }
// 获得表定义 // 获得表定义
export const getSchemaTableListApi = (params) => { export const getSchemaTableList = (params) => {
return request.get({ url: '/infra/codegen/db/table/list', params }) return request.get({ url: '/infra/codegen/db/table/list', params })
} }
// 基于数据库的表结构，创建代码生成器的表定义 // 基于数据库的表结构，创建代码生成器的表定义
export const createCodegenListApi = (data) => { export const createCodegenList = (data) => {
return request.post({ url: '/infra/codegen/create-list', data }) return request.post({ url: '/infra/codegen/create-list', data })
} }
// 删除代码生成表定义 // 删除代码生成表定义
export const deleteCodegenTableApi = (id: number) => { export const deleteCodegenTable = (id: number) => {
return request.delete({ url: '/infra/codegen/delete?tableId=' + id }) return request.delete({ url: '/infra/codegen/delete?tableId=' + id })
} }
src/api/infra/codegen/types.ts
...@@ -52,7 +52,7 @@ export type CodegenPreviewVO = { ...@@ -52,7 +52,7 @@ export type CodegenPreviewVO = {
code: string code: string
} }
export type CodegenUpdateReqVO = { export type CodegenUpdateReqVO = {
table: CodegenTableVO table: CodegenTableVO | any
columns: CodegenColumnVO[] columns: CodegenColumnVO[]
} }
export type CodegenCreateListReqVO = { export type CodegenCreateListReqVO = {
......
src/locales/zh-CN.ts
...@@ -298,7 +298,8 @@ export default { ...@@ -298,7 +298,8 @@ export default {
typeUpdate: '字典类型编辑', typeUpdate: '字典类型编辑',
dataCreate: '字典数据新增', dataCreate: '字典数据新增',
dataUpdate: '字典数据编辑', dataUpdate: '字典数据编辑',
fileUpload: '上传文件' fileUpload: '上传文件',
back: '返回'
}, },
dialog: { dialog: {
dialog: '弹窗', dialog: '弹窗',
......
src/views/infra/codegen/EditTable.vue
<template> <template>
<ContentWrap> <content-wrap v-loading="loading">
<ContentDetailWrap :title="title" @back="push('/infra/codegen')"> <el-tabs v-model="activeName">
<el-tabs v-model="activeName"> <el-tab-pane label="基本信息" name="basicInfo">
<el-tab-pane label="基本信息" name="basicInfo"> <basic-info-form ref="basicInfoRef" :table="formData.table" />
<BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" /> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="字段信息" name="colum">
<el-tab-pane label="字段信息" name="cloum"> <colum-info-form ref="columInfoRef" :columns="formData.columns" />
<CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" /> </el-tab-pane>
</el-tab-pane> <el-tab-pane label="生成信息" name="generateInfo">
</el-tabs> <generate-info-form ref="generateInfoRef" :table="formData.table" />
<template #right> </el-tab-pane>
<XButton </el-tabs>
type="primary" <el-form label-width="100px">
:title="t('action.save')" <el-form-item style="text-align: center; margin-left: -100px; margin-top: 10px">
:loading="loading" <el-button type="primary" @click="submitForm" :loading="submitLoading">
@click="submitForm()" {{ t('action.save') }}
/> </el-button>
</template> <el-button @click="close">{{ t('action.back') }}</el-button>
</ContentDetailWrap> </el-form-item>
</ContentWrap> </el-form>
</content-wrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BasicInfoForm, CloumInfoForm } from './components' import { BasicInfoForm, ColumInfoForm, GenerateInfoForm } from './components'
import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types' import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { CodegenUpdateReqVO } from '@/api/infra/codegen/types'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { push } = useRouter() const { push, currentRoute } = useRouter()
const { query } = useRoute() const { query } = useRoute()
const { delView } = useTagsViewStore()
const loading = ref(false) const loading = ref(false)
const title = ref('代码生成') const submitLoading = ref(false)
const activeName = ref('basicInfo') const activeName = ref('basicInfo')
const cloumInfoRef = ref(null)
const tableCurrentRow = ref<CodegenTableVO>()
const cloumCurrentRow = ref<CodegenColumnVO[]>([])
const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
const formData = ref<CodegenUpdateReqVO>({
table: {},
columns: []
})
const getList = async () => { const getDetail = async () => {
const id = query.id as unknown as number const id = query.id as unknown as number
if (id) { if (id) {
loading.value = true
// 获取表详细信息 // 获取表详细信息
const res = await getCodegenTableApi(id) formData.value = await CodegenApi.getCodegenTable(id)
title.value = '修改[ ' + res.table.tableName + ' ]生成配置' loading.value = false
tableCurrentRow.value = res.table
cloumCurrentRow.value = res.columns
} }
} }
const submitForm = async () => { const submitForm = async () => {
const basicInfo = unref(basicInfoRef) if (!unref(formData)) return
const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {}) try {
if (basicForm) { await unref(basicInfoRef)?.validate()
const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO await unref(generateInfoRef)?.validate()
const genTable: CodegenUpdateReqVO = { await CodegenApi.updateCodegenTable(unref(formData))
table: basicInfoData,
columns: cloumCurrentRow.value
}
await updateCodegenTableApi(genTable)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
push('/infra/codegen') push('/infra/codegen')
} } catch {}
}
/** 关闭按钮 */
const close = () => {
delView(unref(currentRoute))
push('/infra/codegen')
} }
onMounted(() => { onMounted(() => {
getList() getDetail()
}) })
</script> </script>
src/views/infra/codegen/components/BasicInfoForm.vue
<template> <template>
<Form :rules="rules" @register="register" /> <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="表名称" prop="tableName">
<el-input placeholder="请输入仓库名称" v-model="formData.tableName" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="表描述" prop="tableComment">
<el-input placeholder="请输入" v-model="formData.tableComment" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="className">
<template #label>
<span>
实体类名称
<el-tooltip
content="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
placement="top"
>
<Icon icon="ep:question-filled" class="" />
</el-tooltip>
</span>
</template>
<el-input placeholder="请输入" v-model="formData.className" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="作者" prop="author">
<el-input placeholder="请输入" v-model="formData.author" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="3" v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useForm } from '@/hooks/web/useForm'
import { FormSchema } from '@/types/form'
import { CodegenTableVO } from '@/api/infra/codegen/types' import { CodegenTableVO } from '@/api/infra/codegen/types'
import { getIntDictOptions } from '@/utils/dict'
import { getSimpleMenusList } from '@/api/system/menu'
import { handleTree, defaultProps } from '@/utils/tree'
import { PropType } from 'vue' import { PropType } from 'vue'
const emits = defineEmits(['update:basicInfo'])
const props = defineProps({ const props = defineProps({
basicInfo: { table: {
type: Object as PropType<Nullable<CodegenTableVO>>, type: Object as PropType<Nullable<CodegenTableVO>>,
default: () => null default: () => null
} }
}) })
const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE) const formRef = ref()
const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE) const formData = ref({
const menuOptions = ref<any>([]) // 树形结构 tableName: '',
const getTree = async () => { tableComment: '',
const res = await getSimpleMenusList() className: '',
menuOptions.value = handleTree(res) author: '',
} remark: ''
})
const rules = reactive({ const rules = reactive({
tableName: [required], tableName: [required],
tableComment: [required], tableComment: [required],
className: [required], className: [required],
author: [required], author: [required]
templateType: [required],
scene: [required],
moduleName: [required],
businessName: [required],
businessPackage: [required],
classComment: [required]
})
const schema = reactive<FormSchema[]>([
{
label: '上级菜单',
field: 'parentMenuId',
component: 'TreeSelect',
componentProps: {
data: menuOptions,
props: defaultProps,
checkStrictly: true,
nodeKey: 'id'
},
labelMessage: '分配到指定菜单下，例如 系统管理',
colProps: {
span: 24
}
},
{
label: '表名称',
field: 'tableName',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '表描述',
field: 'tableComment',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '实体类名称',
field: 'className',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '类名称',
field: 'className',
component: 'Input',
labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
colProps: {
span: 12
}
},
{
label: '生成模板',
field: 'templateType',
component: 'Select',
componentProps: {
options: templateTypeOptions
},
colProps: {
span: 12
}
},
{
label: '生成场景',
field: 'scene',
component: 'Select',
componentProps: {
options: sceneOptions
},
colProps: {
span: 12
}
},
{
label: '模块名',
field: 'moduleName',
component: 'Input',
labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
colProps: {
span: 12
}
},
{
label: '业务名',
field: 'businessName',
component: 'Input',
labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
colProps: {
span: 12
}
},
{
label: '类描述',
field: 'classComment',
component: 'Input',
labelMessage: '用作类描述，例如 用户',
colProps: {
span: 12
}
},
{
label: '作者',
field: 'author',
component: 'Input',
colProps: {
span: 12
}
},
{
label: '备注',
field: 'remark',
component: 'Input',
componentProps: {
type: 'textarea',
rows: 4
},
colProps: {
span: 24
}
}
])
const { register, methods, elFormRef } = useForm({
schema
}) })
watch( watch(
() => props.basicInfo, () => props.table,
(basicInfo) => { (table) => {
if (!basicInfo) return if (!table) return
const { setValues } = methods formData.value = table
setValues(basicInfo)
}, },
{ {
deep: true, deep: true,
immediate: true immediate: true
} }
) )
// ========== 初始化 ========== watch(
onMounted(async () => { () => formData.value,
await getTree() (val) => {
}) emits('update:basicInfo', val)
}
)
defineExpose({ defineExpose({
elFormRef, validate: async () => unref(formRef)?.validate()
getFormData: methods.getFormData
}) })
</script> </script>
src/views/infra/codegen/components/CloumInfoForm.vue deleted 100644 → 0
<template>
<vxe-table
ref="dragTable"
border
:data="info"
max-height="600"
stripe
class="xtable-scrollbar"
:column-config="{ resizable: true }"
>
<vxe-column title="字段列名" field="columnName" fixed="left" width="10%" />
<vxe-colgroup title="基础属性">
<vxe-column title="字段描述" field="columnComment" width="10%">
<template #default="{ row }">
<vxe-input v-model="row.columnComment" placeholder="请输入字段描述" />
</template>
</vxe-column>
<vxe-column title="物理类型" field="dataType" width="10%" />
<vxe-column title="Java类型" width="10%" field="javaType">
<template #default="{ row }">
<vxe-select v-model="row.javaType" placeholder="请选择Java类型">
<vxe-option label="Long" value="Long" />
<vxe-option label="String" value="String" />
<vxe-option label="Integer" value="Integer" />
<vxe-option label="Double" value="Double" />
<vxe-option label="BigDecimal" value="BigDecimal" />
<vxe-option label="LocalDateTime" value="LocalDateTime" />
<vxe-option label="Boolean" value="Boolean" />
</vxe-select>
</template>
</vxe-column>
<vxe-column title="java属性" width="8%" field="javaField">
<template #default="{ row }">
<vxe-input v-model="row.javaField" placeholder="请输入java属性" />
</template>
</vxe-column>
</vxe-colgroup>
<vxe-colgroup title="增删改查">
<vxe-column title="插入" width="40px" field="createOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
</template>
</vxe-column>
<vxe-column title="编辑" width="40px" field="updateOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
</template>
</vxe-column>
<vxe-column title="列表" width="40px" field="listOperationResult">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
</template>
</vxe-column>
<vxe-column title="查询" width="40px" field="listOperation">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
</template>
</vxe-column>
<vxe-column title="允许空" width="40px" field="nullable">
<template #default="{ row }">
<vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
</template>
</vxe-column>
<vxe-column title="查询方式" width="60px" field="listOperationCondition">
<template #default="{ row }">
<vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式">
<vxe-option label="=" value="=" />
<vxe-option label="!=" value="!=" />
<vxe-option label=">" value=">" />
<vxe-option label=">=" value=">=" />
<vxe-option label="<" value="<>" />
<vxe-option label="<=" value="<=" />
<vxe-option label="LIKE" value="LIKE" />
<vxe-option label="BETWEEN" value="BETWEEN" />
</vxe-select>
</template>
</vxe-column>
</vxe-colgroup>
<vxe-column title="显示类型" width="10%" field="htmlType">
<template #default="{ row }">
<vxe-select v-model="row.htmlType" placeholder="请选择显示类型">
<vxe-option label="文本框" value="input" />
<vxe-option label="文本域" value="textarea" />
<vxe-option label="下拉框" value="select" />
<vxe-option label="单选框" value="radio" />
<vxe-option label="复选框" value="checkbox" />
<vxe-option label="日期控件" value="datetime" />
<vxe-option label="图片上传" value="imageUpload" />
<vxe-option label="文件上传" value="fileUpload" />
<vxe-option label="富文本控件" value="editor" />
</vxe-select>
</template>
</vxe-column>
<vxe-column title="字典类型" width="10%" field="dictType">
<template #default="{ row }">
<vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型">
<vxe-option
v-for="dict in dictOptions"
:key="dict.id"
:label="dict.name"
:value="dict.type"
/>
</vxe-select>
</template>
</vxe-column>
<vxe-column title="示例" field="example">
<template #default="{ row }">
<vxe-input v-model="row.example" placeholder="请输入示例" />
</template>
</vxe-column>
</vxe-table>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { DictTypeVO } from '@/api/system/dict/types'
import { CodegenColumnVO } from '@/api/infra/codegen/types'
import { listSimpleDictType } from '@/api/system/dict/dict.type'
const props = defineProps({
info: {
type: Array as unknown as PropType<CodegenColumnVO[]>,
default: () => null
}
})
/** 查询字典下拉列表 */
const dictOptions = ref<DictTypeVO[]>()
const getDictOptions = async () => {
const res = await listSimpleDictType()
dictOptions.value = res
}
onMounted(async () => {
await getDictOptions()
})
defineExpose({
info: props.info
})
</script>
src/views/infra/codegen/components/ColumInfoForm.vue 0 → 100644
<template>
<el-table ref="dragTable" :data="formData" row-key="columnId" :max-height="tableHeight">
<el-table-column
label="字段列名"
prop="columnName"
min-width="10%"
:show-overflow-tooltip="true"
/>
<el-table-column label="字段描述" min-width="10%">
<template #default="scope">
<el-input v-model="scope.row.columnComment" />
</template>
</el-table-column>
<el-table-column
label="物理类型"
prop="dataType"
min-width="10%"
:show-overflow-tooltip="true"
/>
<el-table-column label="Java类型" min-width="11%">
<template #default="scope">
<el-select v-model="scope.row.javaType">
<el-option label="Long" value="Long" />
<el-option label="String" value="String" />
<el-option label="Integer" value="Integer" />
<el-option label="Double" value="Double" />
<el-option label="BigDecimal" value="BigDecimal" />
<el-option label="LocalDateTime" value="LocalDateTime" />
<el-option label="Boolean" value="Boolean" />
</el-select>
</template>
</el-table-column>
<el-table-column label="java属性" min-width="10%">
<template #default="scope">
<el-input v-model="scope.row.javaField" />
</template>
</el-table-column>
<el-table-column label="插入" min-width="4%">
<template #default="scope">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation" />
</template>
</el-table-column>
<el-table-column label="编辑" min-width="4%">
<template #default="scope">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation" />
</template>
</el-table-column>
<el-table-column label="列表" min-width="4%">
<template #default="scope">
<el-checkbox
true-label="true"
false-label="false"
v-model="scope.row.listOperationResult"
/>
</template>
</el-table-column>
<el-table-column label="查询" min-width="4%">
<template #default="scope">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation" />
</template>
</el-table-column>
<el-table-column label="查询方式" min-width="10%">
<template #default="scope">
<el-select v-model="scope.row.listOperationCondition">
<el-option label="=" value="=" />
<el-option label="!=" value="!=" />
<el-option label=">" value=">" />
<el-option label=">=" value=">=" />
<el-option label="<" value="<>" />
<el-option label="<=" value="<=" />
<el-option label="LIKE" value="LIKE" />
<el-option label="BETWEEN" value="BETWEEN" />
</el-select>
</template>
</el-table-column>
<el-table-column label="允许空" min-width="5%">
<template #default="scope">
<el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable" />
</template>
</el-table-column>
<el-table-column label="显示类型" min-width="12%">
<template #default="scope">
<el-select v-model="scope.row.htmlType">
<el-option label="文本框" value="input" />
<el-option label="文本域" value="textarea" />
<el-option label="下拉框" value="select" />
<el-option label="单选框" value="radio" />
<el-option label="复选框" value="checkbox" />
<el-option label="日期控件" value="datetime" />
<el-option label="图片上传" value="imageUpload" />
<el-option label="文件上传" value="fileUpload" />
<el-option label="富文本控件" value="editor" />
</el-select>
</template>
</el-table-column>
<el-table-column label="字典类型" min-width="12%">
<template #default="scope">
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
<el-option
v-for="dict in dictOptions"
:key="dict.id"
:label="dict.name"
:value="dict.type"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="示例" min-width="10%">
<template #default="scope">
<el-input v-model="scope.row.example" />
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CodegenColumnVO } from '@/api/infra/codegen/types'
import { DictTypeVO, listSimpleDictType } from '@/api/system/dict/dict.type'
const emits = defineEmits(['update:columns'])
const props = defineProps({
columns: {
type: Array as unknown as PropType<CodegenColumnVO[]>,
default: () => null
}
})
const formData = ref<CodegenColumnVO[]>([])
const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
/** 查询字典下拉列表 */
const dictOptions = ref<DictTypeVO[]>()
const getDictOptions = async () => {
dictOptions.value = await listSimpleDictType()
}
onMounted(async () => {
await getDictOptions()
})
watch(
() => props.columns,
(columns) => {
if (!columns) return
formData.value = columns
},
{
deep: true,
immediate: true
}
)
watch(
() => formData.value,
(val) => {
emits('update:columns', val)
}
)
</script>
src/views/infra/codegen/components/ImportTable.vue
<template> <template>
<!-- 导入表 --> <Dialog :title="modelTitle" v-model="modelVisible">
<XModal title="导入表" v-model="visible"> <el-form :model="queryParams" ref="queryFormRef" :inline="true">
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="数据源" prop="dataSourceConfigId"> <el-form-item label="数据源" prop="dataSourceConfigId">
<el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable> <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源">
<el-option <el-option
v-for="config in dataSourceConfigs" v-for="config in dataSourceConfigs"
:key="config.id" :key="config.id"
...@@ -13,62 +12,75 @@ ...@@ -13,62 +12,75 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="表名称" prop="name"> <el-form-item label="表名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入表名称" clearable /> <el-input
v-model="queryParams.name"
placeholder="请输入表名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="表描述" prop="comment"> <el-form-item label="表描述" prop="comment">
<el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable /> <el-input
v-model="queryParams.comment"
placeholder="请输入表描述"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<XButton <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
type="primary" <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
preIcon="ep:search"
:title="t('common.query')"
@click="handleQuery()"
/>
<XButton preIcon="ep:refresh-right" :title="t('common.reset')" @click="resetQuery()" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<vxe-table
ref="xTable" <el-row>
:data="dbTableList" <el-table
v-loading="dbLoading" v-loading="dbLoading"
:checkbox-config="{ highlight: true, range: true }" @row-click="clickRow"
height="260px" ref="tableRef"
class="xtable-scrollbar" :data="dbTableList"
> @selection-change="handleSelectionChange"
<vxe-column type="checkbox" width="60" /> height="260px"
<vxe-column field="name" title="表名称" /> >
<vxe-column field="comment" title="表描述" /> <el-table-column type="selection" width="55" />
</vxe-table> <el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
<el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
</el-table>
</el-row>
<template #footer> <template #footer>
<XButton type="primary" :title="t('action.import')" @click="handleImportTable()" /> <div class="dialog-footer">
<XButton :title="t('dialog.close')" @click="handleClose()" /> <el-button @click="handleImportTable" type="primary" :disabled="tables.length === 0">{{
t('action.import')
}}</el-button>
<el-button @click="handleClose">{{ t('dialog.close') }}</el-button>
</div>
</template> </template>
</XModal> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { VxeTableInstance } from 'vxe-table'
import type { DatabaseTableVO } from '@/api/infra/codegen/types' import type { DatabaseTableVO } from '@/api/infra/codegen/types'
import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig' import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
import { ElTable } from 'element-plus'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const emit = defineEmits(['ok']) const emit = defineEmits(['ok'])
// ======== 显示页面 ========
const visible = ref(false) const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('导入表') // 弹窗的标题
const dbLoading = ref(true) const dbLoading = ref(true)
const queryParams = reactive({ const queryParams = reactive({
name: undefined, name: undefined,
comment: undefined, comment: undefined,
dataSourceConfigId: 0 as number | undefined dataSourceConfigId: 0
}) })
const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
const show = async () => { const show = async () => {
const res = await getDataSourceConfigList() dataSourceConfigs.value = await getDataSourceConfigList()
dataSourceConfigs.value = res
queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
visible.value = true modelVisible.value = true
await getList() await getList()
} }
/** 查询表数据 */ /** 查询表数据 */
...@@ -77,8 +89,7 @@ const dbTableList = ref<DatabaseTableVO[]>([]) ...@@ -77,8 +89,7 @@ const dbTableList = ref<DatabaseTableVO[]>([])
/** 查询表数据 */ /** 查询表数据 */
const getList = async () => { const getList = async () => {
dbLoading.value = true dbLoading.value = true
const res = await getSchemaTableListApi(queryParams) dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
dbTableList.value = res
dbLoading.value = false dbLoading.value = false
} }
// 查询操作 // 查询操作
...@@ -89,23 +100,22 @@ const handleQuery = async () => { ...@@ -89,23 +100,22 @@ const handleQuery = async () => {
const resetQuery = async () => { const resetQuery = async () => {
queryParams.name = undefined queryParams.name = undefined
queryParams.comment = undefined queryParams.comment = undefined
queryParams.dataSourceConfigId = 0 queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
await getList() await getList()
} }
const xTable = ref<VxeTableInstance>() const tableRef = ref<typeof ElTable>()
/** 多选框选中数据 */ /** 多选框选中数据 */
const tables = ref<string[]>([]) const tables = ref<string[]>([])
const clickRow = (row) => {
unref(tableRef)?.toggleRowSelection(row)
}
// 多选框选中数据
const handleSelectionChange = (selection) => {
tables.value = selection.map((item) => item.name)
}
/** 导入按钮操作 */ /** 导入按钮操作 */
const handleImportTable = async () => { const handleImportTable = async () => {
if (xTable.value?.getCheckboxRecords().length === 0) { await CodegenApi.createCodegenList({
message.error('请选择要导入的表')
return
}
xTable.value?.getCheckboxRecords().forEach((item) => {
tables.value.push(item.name)
})
await createCodegenListApi({
dataSourceConfigId: queryParams.dataSourceConfigId, dataSourceConfigId: queryParams.dataSourceConfigId,
tableNames: tables.value tableNames: tables.value
}) })
...@@ -114,7 +124,7 @@ const handleImportTable = async () => { ...@@ -114,7 +124,7 @@ const handleImportTable = async () => {
handleClose() handleClose()
} }
const handleClose = () => { const handleClose = () => {
visible.value = false modelVisible.value = false
tables.value = [] tables.value = []
} }
defineExpose({ defineExpose({
......
src/views/infra/codegen/components/Preview.vue
<template> <template>
<XModal title="预览" v-model="preview.open"> <Dialog
:title="modelTitle"
v-model="modelVisible"
align-center
width="60%"
class="app-infra-codegen-preview-container"
>
<div class="flex"> <div class="flex">
<el-card class="w-1/4" :gutter="12" shadow="hover"> <el-card class="w-1/4" :gutter="12" shadow="hover">
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)"> <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
...@@ -10,6 +16,7 @@ ...@@ -10,6 +16,7 @@
:expand-on-click-node="false" :expand-on-click-node="false"
highlight-current highlight-current
@node-click="handleNodeClick" @node-click="handleNodeClick"
default-expand-all
/> />
</el-scrollbar> </el-scrollbar>
</el-card> </el-card>
...@@ -21,38 +28,34 @@ ...@@ -21,38 +28,34 @@
:name="item.filePath" :name="item.filePath"
:key="item.filePath" :key="item.filePath"
> >
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" /> <el-button text type="primary" class="float-right" @click="copy(item.code)">
{{ t('common.copy') }}
</el-button>
<pre>{{ item.code }}</pre> <pre>{{ item.code }}</pre>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
</div> </div>
</XModal> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
import { handleTree2 } from '@/utils/tree' import { handleTree2 } from '@/utils/tree'
import { previewCodegenApi } from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
import { CodegenTableVO, CodegenPreviewVO } from '@/api/infra/codegen/types' import { CodegenPreviewVO } from '@/api/infra/codegen/types'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('代码预览') // 弹窗的标题
// ======== 显示页面 ======== // ======== 显示页面 ========
const preview = reactive({ const preview = reactive({
open: false,
titel: '代码预览',
fileTree: [], fileTree: [],
activeName: '' activeName: ''
}) })
const previewCodegen = ref<CodegenPreviewVO[]>() const previewCodegen = ref<CodegenPreviewVO[]>()
const show = async (row: CodegenTableVO) => {
const res = await previewCodegenApi(row.id)
let file = handleFiles(res)
previewCodegen.value = res
preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
preview.activeName = res[0].filePath
preview.open = true
}
const handleNodeClick = async (data, node) => { const handleNodeClick = async (data, node) => {
if (node && !node.isLeaf) { if (node && !node.isLeaf) {
return false return false
...@@ -132,14 +135,30 @@ const copy = async (text: string) => { ...@@ -132,14 +135,30 @@ const copy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text }) const { copy, copied, isSupported } = useClipboard({ source: text })
if (!isSupported) { if (!isSupported) {
message.error(t('common.copyError')) message.error(t('common.copyError'))
} else { return
await copy() }
if (unref(copied)) { await copy()
message.success(t('common.copySuccess')) if (unref(copied)) {
} message.success(t('common.copySuccess'))
} }
} }
defineExpose({
show /** 打开弹窗 */
}) const openModal = async (id: number) => {
modelVisible.value = true
const res = await CodegenApi.previewCodegen(id)
let file = handleFiles(res)
previewCodegen.value = res
preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
preview.activeName = res[0].filePath
}
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
</script> </script>
<style lang="scss">
.app-infra-codegen-preview-container {
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
white-space: nowrap;
display: inline-block;
}
}
</style>
src/views/infra/codegen/components/index.ts
import BasicInfoForm from './BasicInfoForm.vue' import BasicInfoForm from './BasicInfoForm.vue'
import CloumInfoForm from './CloumInfoForm.vue' import ColumInfoForm from './ColumInfoForm.vue'
import GenerateInfoForm from './GenerateInfoForm.vue'
import ImportTable from './ImportTable.vue' import ImportTable from './ImportTable.vue'
import Preview from './Preview.vue' import Preview from './Preview.vue'
export { BasicInfoForm, CloumInfoForm, ImportTable, Preview } export { BasicInfoForm, ColumInfoForm, GenerateInfoForm, ImportTable, Preview }
src/views/infra/codegen/index.vue
<template> <template>
<ContentWrap> <!-- 搜索 -->
<!-- 列表 --> <content-wrap>
<XTable @register="registerTable"> <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<template #toolbar_buttons> <el-form-item label="表名称" prop="tableName">
<!-- 操作：导入 --> <el-input
<XButton v-model="queryParams.tableName"
type="primary" placeholder="请输入表名称"
preIcon="ep:zoom-in" clearable
:title="t('action.import')" @keyup.enter="handleQuery"
v-hasPermi="['infra:codegen:create']"
@click="openImportTable()"
/> />
</template> </el-form-item>
<template #actionbtns_default="{ row }"> <el-form-item label="表描述" prop="tableComment">
<!-- 操作：预览 --> <el-input
<XTextButton v-model="queryParams.tableComment"
preIcon="ep:view" placeholder="请输入表描述"
:title="t('action.preview')" clearable
v-hasPermi="['infra:codegen:query']" @keyup.enter="handleQuery"
@click="handlePreview(row)"
/> />
<!-- 操作：编辑 --> </el-form-item>
<XTextButton <el-form-item label="创建时间" prop="createTime">
preIcon="ep:edit" <el-date-picker
:title="t('action.edit')" v-model="queryParams.createTime"
v-hasPermi="['infra:codegen:update']" value-format="yyyy-MM-dd HH:mm:ss"
@click="handleUpdate(row.id)" type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
/> />
<!-- 操作：删除 --> </el-form-item>
<XTextButton <el-form-item>
preIcon="ep:delete" <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
:title="t('action.del')" <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
v-hasPermi="['infra:codegen:delete']" <el-button type="primary" v-hasPermi="['infra:codegen:create']" @click="openImportTable()">
@click="deleteData(row.id)" <Icon icon="ep:zoom-in" class="mr-5px" />{{ t('action.import') }}
/> </el-button>
<!-- 操作：同步 --> </el-form-item>
<XTextButton </el-form>
preIcon="ep:refresh" </content-wrap>
:title="t('action.sync')"
v-hasPermi="['infra:codegen:update']" <!-- 列表 -->
@click="handleSynchDb(row)" <content-wrap>
/> <el-table v-loading="loading" :data="list">
<!-- 操作：生成 --> <el-table-column label="数据源" align="center" :formatter="dataSourceConfigNameFormat" />
<XTextButton <el-table-column label="表名称" align="center" prop="tableName" width="200" />
preIcon="ep:download" <el-table-column
:title="t('action.generate')" label="表描述"
v-hasPermi="['infra:codegen:download']" align="center"
@click="handleGenTable(row)" prop="tableComment"
/> :show-overflow-tooltip="true"
</template> width="120"
</XTable> />
</ContentWrap> <el-table-column label="实体" align="center" prop="className" width="200" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="更新时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="操作"
align="center"
width="300px"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
@click="handlePreview(scope.row)"
v-hasPermi="['infra:codegen:preview']"
>预览</el-button
>
<el-button
link
type="primary"
@click="handleUpdate(scope.row.id)"
v-hasPermi="['infra:codegen:update']"
>编辑</el-button
>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:codegen:delete']"
>删除</el-button
>
<el-button
link
type="primary"
@click="handleSynchDb(scope.row)"
v-hasPermi="['infra:codegen:update']"
>同步</el-button
>
<el-button
link
type="primary"
@click="handleGenTable(scope.row)"
v-hasPermi="['infra:codegen:download']"
>生成代码</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 弹窗：导入表 --> <!-- 弹窗：导入表 -->
<ImportTable ref="importRef" @ok="reload()" /> <ImportTable ref="importRef" @ok="reload()" />
<!-- 弹窗：预览代码 --> <!-- 弹窗：预览代码 -->
...@@ -59,19 +127,70 @@ ...@@ -59,19 +127,70 @@
<script setup lang="ts" name="Codegen"> <script setup lang="ts" name="Codegen">
import download from '@/utils/download' import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import { CodegenTableVO } from '@/api/infra/codegen/types' import { CodegenTableVO } from '@/api/infra/codegen/types'
import { allSchemas } from './codegen.data'
import { ImportTable, Preview } from './components' import { ImportTable, Preview } from './components'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
import { dateFormatter } from '@/utils/formatTime'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转 const { push } = useRouter() // 路由跳转
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({ const loading = ref(true) // 列表的加载中
allSchemas: allSchemas, const total = ref(0) // 列表的总页数
getListApi: CodegenApi.getCodegenTablePageApi, const list = ref([]) // 列表的数据
deleteApi: CodegenApi.deleteCodegenTableApi const queryParams = reactive({
pageNo: 1,
pageSize: 10,
tableName: undefined,
tableComment: undefined,
createTime: []
}) })
const queryFormRef = ref() // 搜索的表单
const dataSourceConfigs = ref<DataSourceConfigVO[]>([]) // 数据源列表
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await CodegenApi.getCodegenTablePage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 初始化 **/
onMounted(async () => {
getList()
dataSourceConfigs.value = await DataSourceConfigApi.getDataSourceConfigList()
})
// 数据源配置的名字
const dataSourceConfigNameFormat = (row) => {
for (const config of dataSourceConfigs.value) {
if (row.dataSourceConfigId === config.id) {
return config.name
}
}
return '未知【' + row.leaderUserId + '】'
}
// 导入操作 // 导入操作
const importRef = ref() const importRef = ref()
...@@ -81,27 +200,39 @@ const openImportTable = () => { ...@@ -81,27 +200,39 @@ const openImportTable = () => {
// 预览操作 // 预览操作
const previewRef = ref() const previewRef = ref()
const handlePreview = (row: CodegenTableVO) => { const handlePreview = (row: CodegenTableVO) => {
previewRef.value.show(row) previewRef.value.openModal(row.id)
} }
// 编辑操作 // 编辑操作
const handleUpdate = (rowId: number) => { const handleUpdate = (rowId: number) => {
push('/codegen/edit?id=' + rowId) push('/codegen/edit?id=' + rowId)
} }
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await CodegenApi.deleteCodegenTable(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
// 同步操作 // 同步操作
const handleSynchDb = (row: CodegenTableVO) => { const handleSynchDb = async (row: CodegenTableVO) => {
// 基于 DB 同步 // 基于 DB 同步
const tableName = row.tableName const tableName = row.tableName
message try {
.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder')) await message.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
.then(async () => { await CodegenApi.syncCodegenFromDB(row.id)
await CodegenApi.syncCodegenFromDBApi(row.id) message.success('同步成功')
message.success('同步成功') } catch {}
})
} }
// 生成代码操作 // 生成代码操作
const handleGenTable = async (row: CodegenTableVO) => { const handleGenTable = async (row: CodegenTableVO) => {
const res = await CodegenApi.downloadCodegenApi(row.id) const res = await CodegenApi.downloadCodegen(row.id)
download.zip(res, 'codegen-' + row.className + '.zip') download.zip(res, 'codegen-' + row.className + '.zip')
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment