386 lines
12 KiB
Vue
386 lines
12 KiB
Vue
<template>
|
||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="生成模板" prop="templateType">
|
||
<el-select v-model="formData.templateType">
|
||
<el-option
|
||
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="前端类型" prop="frontType">
|
||
<el-select v-model="formData.frontType">
|
||
<el-option
|
||
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item label="生成场景" prop="scene">
|
||
<el-select v-model="formData.scene">
|
||
<el-option
|
||
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
<span>
|
||
上级菜单
|
||
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-tree-select
|
||
v-model="formData.parentMenuId"
|
||
:data="menus"
|
||
:props="menuTreeProps"
|
||
check-strictly
|
||
node-key="id"
|
||
placeholder="请选择系统菜单"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <el-form-item prop="packageName">-->
|
||
<!-- <span slot="label">-->
|
||
<!-- 生成包路径-->
|
||
<!-- <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
|
||
<!-- <i class="el-icon-question"></i>-->
|
||
<!-- </el-tooltip>-->
|
||
<!-- </span>-->
|
||
<!-- <el-input v-model="formData.packageName" />-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="moduleName">
|
||
<template #label>
|
||
<span>
|
||
模块名
|
||
<el-tooltip
|
||
content="模块名，即一级目录，例如 system、infra、tool 等等"
|
||
placement="top"
|
||
>
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-input v-model="formData.moduleName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="businessName">
|
||
<template #label>
|
||
<span>
|
||
业务名
|
||
<el-tooltip
|
||
content="业务名，即二级目录，例如 user、permission、dict 等等"
|
||
placement="top"
|
||
>
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-input v-model="formData.businessName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- <el-col :span="12">-->
|
||
<!-- <el-form-item prop="businessPackage">-->
|
||
<!-- <span slot="label">-->
|
||
<!-- 业务包-->
|
||
<!-- <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
|
||
<!-- <i class="el-icon-question"></i>-->
|
||
<!-- </el-tooltip>-->
|
||
<!-- </span>-->
|
||
<!-- <el-input v-model="formData.businessPackage" />-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="className">
|
||
<template #label>
|
||
<span>
|
||
类名称
|
||
<el-tooltip
|
||
content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
|
||
placement="top"
|
||
>
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-input v-model="formData.className" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="classComment">
|
||
<template #label>
|
||
<span>
|
||
类描述
|
||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-input v-model="formData.classComment" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col v-if="formData.genType === '1'" :span="24">
|
||
<el-form-item prop="genPath">
|
||
<template #label>
|
||
<span>
|
||
自定义路径
|
||
<el-tooltip
|
||
content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
|
||
placement="top"
|
||
>
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-input v-model="formData.genPath">
|
||
<template #append>
|
||
<el-dropdown>
|
||
<el-button type="primary">
|
||
最近路径快速选择
|
||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</el-button>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item @click="formData.genPath = '/'">
|
||
恢复默认的生成基础路径
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 树表信息 -->
|
||
<el-row v-if="formData.templateType == 2">
|
||
<el-col :span="24">
|
||
<h4 class="form-header">树表信息</h4>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="treeParentColumnId">
|
||
<template #label>
|
||
<span>
|
||
父编号字段
|
||
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-select v-model="formData.treeParentColumnId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in props.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="treeNameColumnId">
|
||
<template #label>
|
||
<span>
|
||
树名称字段
|
||
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-select v-model="formData.treeNameColumnId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in props.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 主表信息 -->
|
||
<el-row v-if="formData.templateType == 15">
|
||
<el-col :span="24">
|
||
<h4 class="form-header">主表信息</h4>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="masterTableId">
|
||
<template #label>
|
||
<span>
|
||
关联的主表
|
||
<el-tooltip content="关联主表（父表）的表名， 如：system_user" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-select v-model="formData.masterTableId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(table0, index) in tables"
|
||
:key="index"
|
||
:label="table0.tableName + '：' + table0.tableComment"
|
||
:value="table0.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="subJoinColumnId">
|
||
<template #label>
|
||
<span>
|
||
子表关联的字段
|
||
<el-tooltip content="子表关联的字段， 如：user_id" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-select v-model="formData.subJoinColumnId" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in props.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item prop="subJoinMany">
|
||
<template #label>
|
||
<span>
|
||
关联关系
|
||
<el-tooltip content="主表与子表的关联关系" placement="top">
|
||
<Icon icon="ep:question-filled" />
|
||
</el-tooltip>
|
||
</span>
|
||
</template>
|
||
<el-radio-group v-model="formData.subJoinMany" placeholder="请选择">
|
||
<el-radio :label="true">一对多</el-radio>
|
||
<el-radio :label="false">一对一</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||
import { handleTree } from '@/utils/tree'
|
||
import * as CodegenApi from '@/api/infra/codegen'
|
||
import * as MenuApi from '@/api/system/menu'
|
||
import { PropType } from 'vue'
|
||
|
||
defineOptions({ name: 'InfraCodegenGenerateInfoForm' })
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
const props = defineProps({
|
||
table: {
|
||
type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
|
||
default: () => null
|
||
},
|
||
columns: {
|
||
type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
|
||
default: () => null
|
||
}
|
||
})
|
||
|
||
const formRef = ref()
|
||
const formData = ref({
|
||
templateType: null,
|
||
frontType: null,
|
||
scene: null,
|
||
moduleName: '',
|
||
businessName: '',
|
||
className: '',
|
||
classComment: '',
|
||
parentMenuId: null,
|
||
genPath: '',
|
||
genType: '',
|
||
masterTableId: undefined,
|
||
subJoinColumnId: undefined,
|
||
subJoinMany: undefined,
|
||
treeParentColumnId: undefined,
|
||
treeNameColumnId: undefined
|
||
})
|
||
|
||
const rules = reactive({
|
||
templateType: [required],
|
||
frontType: [required],
|
||
scene: [required],
|
||
moduleName: [required],
|
||
businessName: [required],
|
||
businessPackage: [required],
|
||
className: [required],
|
||
classComment: [required],
|
||
masterTableId: [required],
|
||
subJoinColumnId: [required],
|
||
subJoinMany: [required],
|
||
treeParentColumnId: [required],
|
||
treeNameColumnId: [required]
|
||
})
|
||
|
||
const tables = ref([]) // 表定义列表
|
||
const menus = ref<any[]>([])
|
||
const menuTreeProps = {
|
||
label: 'name'
|
||
}
|
||
|
||
watch(
|
||
() => props.table,
|
||
async (table) => {
|
||
if (!table) return
|
||
formData.value = table as any
|
||
// 加载表列表
|
||
if (table.dataSourceConfigId >= 0) {
|
||
tables.value = await CodegenApi.getCodegenTableList(formData.value.dataSourceConfigId)
|
||
}
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
// 加载菜单
|
||
const resp = await MenuApi.getSimpleMenusList()
|
||
menus.value = handleTree(resp)
|
||
} catch {}
|
||
})
|
||
|
||
defineExpose({
|
||
validate: async () => unref(formRef)?.validate()
|
||
})
|
||
</script>
|