304 lines
10 KiB
Vue
304 lines
10 KiB
Vue
<template>
|
||
<el-form ref="genInfoForm" :model="infoForm" :rules="rules" label-width="150px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item prop="tplCategory">
|
||
<template #label>生成模板</template>
|
||
<el-select v-model="infoForm.tplCategory" @change="tplSelectChange">
|
||
<el-option label="单表（增删改查）" value="crud" />
|
||
<el-option label="树表（增删改查）" value="tree" />
|
||
<el-option label="主子表（增删改查）" value="sub" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="packageName">
|
||
<template #label>
|
||
生成包路径
|
||
<el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input v-model="infoForm.packageName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="moduleName">
|
||
<template #label>
|
||
生成模块名
|
||
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input v-model="infoForm.moduleName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="businessName">
|
||
<template #label>
|
||
生成业务名
|
||
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input v-model="infoForm.businessName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="functionName">
|
||
<template #label>
|
||
生成功能名
|
||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input v-model="infoForm.functionName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
上级菜单
|
||
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-tree-select
|
||
v-model="infoForm.parentMenuId"
|
||
:data="menuOptions"
|
||
:props="{ value: 'menuId', label: 'menuName', children: 'children' }"
|
||
value-key="menuId"
|
||
node-key="menuId"
|
||
placeholder="选择上级菜单"
|
||
check-strictly
|
||
filterable
|
||
clearable
|
||
highlight-current
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="genType">
|
||
<template #label>
|
||
生成代码方式
|
||
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-radio v-model="infoForm.genType" label="0">zip压缩包</el-radio>
|
||
<el-radio v-model="infoForm.genType" label="1">自定义路径</el-radio>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="infoForm.genType == '1'" :span="24">
|
||
<el-form-item prop="genPath">
|
||
<template #label>
|
||
自定义路径
|
||
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input v-model="infoForm.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="infoForm.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="number" prop="editColumns" class="label-right-align">
|
||
<template #label>编辑页列数</template>
|
||
<el-input-number v-model="infoForm.editColumns" class="full-width-input" controls-position="right"
|
||
:min="1" :max="4" :precision="0" :step="1"></el-input-number>
|
||
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<template v-if="info.tplCategory == 'tree'">
|
||
<h4 class="form-header">其他信息</h4>
|
||
<el-row v-show="info.tplCategory == 'tree'">
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
树编码字段
|
||
<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-select v-model="infoForm.treeCode" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in info.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.columnName"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
树父编码字段
|
||
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-select v-model="infoForm.treeParentCode" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in infoForm.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.columnName"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
树名称字段
|
||
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-select v-model="infoForm.treeName" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in info.columns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.columnName"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<template v-if="info.tplCategory == 'sub'">
|
||
<h4 class="form-header">关联信息</h4>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
关联子表的表名
|
||
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-select v-model="infoForm.subTableName" placeholder="请选择" @change="subSelectChange">
|
||
<el-option v-for="(t, index) in table" :key="index" :label="t.tableName + '：' + t.tableComment" :value="t.tableName"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<template #label>
|
||
子表关联的外键名
|
||
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
|
||
<el-icon><question-filled /></el-icon>
|
||
</el-tooltip>
|
||
</template>
|
||
<el-select v-model="infoForm.subTableFkName" placeholder="请选择">
|
||
<el-option
|
||
v-for="(column, index) in subColumns"
|
||
:key="index"
|
||
:label="column.columnName + '：' + column.columnComment"
|
||
:value="column.columnName"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { listMenu } from '@/api/system/menu';
|
||
import { propTypes } from '@/utils/propTypes';
|
||
|
||
interface MenuOptionsType {
|
||
menuId: number | string;
|
||
menuName: string;
|
||
children?: MenuOptionsType[];
|
||
}
|
||
const { proxy } = getCurrentInstance();
|
||
|
||
const subColumns = ref<any>([]);
|
||
const menuOptions = ref<Array<MenuOptionsType>>([]);
|
||
|
||
const props = defineProps({
|
||
info: propTypes.any.isRequired,
|
||
tables: propTypes.any.isRequired
|
||
});
|
||
|
||
const infoForm = computed(() => props.info);
|
||
|
||
const table = computed(() => props.tables);
|
||
|
||
// 表单校验
|
||
const rules = ref({
|
||
tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
|
||
packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
|
||
moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
|
||
businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
|
||
functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }]
|
||
});
|
||
const subSelectChange = () => {
|
||
infoForm.value.subTableFkName = '';
|
||
};
|
||
const tplSelectChange = (value: string) => {
|
||
if (value !== 'sub') {
|
||
infoForm.value.subTableName = '';
|
||
infoForm.value.subTableFkName = '';
|
||
}
|
||
};
|
||
const setSubTableColumns = (value: string) => {
|
||
table.value.forEach((item: any) => {
|
||
const name = item.tableName;
|
||
if (value === name) {
|
||
subColumns.value = item.columns;
|
||
return;
|
||
}
|
||
});
|
||
};
|
||
|
||
/** 查询菜单下拉树结构 */
|
||
const getMenuTreeselect = async () => {
|
||
const res = await listMenu();
|
||
res.data.forEach((m) => (m.menuId = m.menuId.toString()));
|
||
const data = proxy?.handleTree<MenuOptionsType>(res.data, 'menuId');
|
||
|
||
if (data) {
|
||
menuOptions.value = data;
|
||
}
|
||
};
|
||
|
||
watch(
|
||
() => props.info.subTableName,
|
||
(val) => {
|
||
setSubTableColumns(val);
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
getMenuTreeselect();
|
||
});
|
||
</script>
|