监听-追溯
‘info.moduleNameSub’: {
handler(newVal, oldVal) {
if (newVal) {
const newPrefix = newVal.charAt(0).toUpperCase() + newVal.slice(1);
let currentBusinessName = this.info.businessName || ‘’;
// 替换旧前缀(如果有)
if (oldVal) {
const oldPrefix = oldVal.charAt(0).toUpperCase() + oldVal.slice(1);
currentBusinessName = currentBusinessName.replace(oldPrefix, ‘’);
}
this.info.businessName = newPrefix + currentBusinessName;
}
},
immediate: true // 初始化时立即执行
<template>
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
<el-row>
<el-col :span="12">
<el-form-item prop="tplCategory">
<span slot="label">生成模板</span>
<el-select v-model="info.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="tplWebType">
<span slot="label">前端类型</span>
<el-select v-model="info.tplWebType">
<el-option label="Vue2 Element UI 模版" value="element-ui"/>
<el-option label="Vue3 Element Plus 模版" value="element-plus"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="packageName">
<span slot="label">
生成包路径
<el-tooltip content="基础的根路径,在配置文件中定义" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.packageName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="entityPath">
<span slot="label">
实体类根路径
<el-tooltip content="基础的根路径,在配置文件中定义" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.entityPath"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="mapperPath">
<span slot="label">
业务根路径
<el-tooltip content="三层代码(controller,service,mapper)生成在哪个java包下,计算得出" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.mapperPath"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="businessName">
<span slot="label">
生成业务名
<el-tooltip content="功能英文名,用来组成文件命名" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.businessName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="moduleName">
<span slot="label">
生成模块名
<el-tooltip content="功能英文名,用来组成分包命名" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.moduleName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="moduleName">
<span slot="label">
生成子模块名
<el-tooltip content="用于切分子文件夹,防止文件过多导致阅读性下降,比如MesModuleDbcRelIn的模块名是tms,子模块名是mes" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.moduleNameSub"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="functionName">
<span slot="label">
生成功能名
<el-tooltip content="用作类描述,例如 用户" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.functionName"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="genType">
<span slot="label">
生成代码方式
<el-tooltip content="默认为zip压缩包下载,也可以自定义生成路径" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
上级菜单
<el-tooltip content="分配到指定菜单下,例如 系统管理" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<treeselect
:append-to-body="true"
v-model="info.parentMenuId"
:options="menus"
:normalizer="normalizer"
:show-count="true"
placeholder="请选择系统菜单"
/>
</el-form-item>
</el-col>
<el-col :span="24" v-if="info.genType == '1'">
<el-form-item prop="genPath">
<span slot="label">
自定义路径
<el-tooltip content="填写磁盘绝对路径,若不填写,则生成到当前Web项目下" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-input v-model="info.genPath">
<el-dropdown slot="append">
<el-button type="primary">
最近路径快速选择
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="info.tplCategory == 'tree'">
<h4 class="form-header">其他信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
树编码字段
<el-tooltip content="树显示的编码字段名, 如:dept_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.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>
<span slot="label">
树父编码字段
<el-tooltip content="树显示的父编码字段名, 如:parent_Id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.treeParentCode" 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>
<span slot="label">
树名称字段
<el-tooltip content="树节点的显示名称字段名, 如:dept_name" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.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>
<el-row v-show="info.tplCategory == 'sub'">
<h4 class="form-header">关联信息</h4>
<el-col :span="12">
<el-form-item>
<span slot="label">
关联子表的表名
<el-tooltip content="关联子表的表名, 如:sys_user" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
<el-option
v-for="(table, index) in tables"
:key="index"
:label="table.tableName + ':' + table.tableComment"
:value="table.tableName"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
子表关联的外键名
<el-tooltip content="子表关联的外键名, 如:user_id" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-select v-model="info.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>
</el-form>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
props: {
info: {
type: Object,
default: null,
},
tables: {
type: Array,
default: null,
},
menus: {
type: Array,
default: [],
},
},
data() {
return {
subColumns: [],
rules: {
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" },
],
entityPath: [
{ required: true, message: "请输入实体类根路径", trigger: "blur" },
],
mapperPath: [
{ required: true, message: "请输入业务根路径", trigger: "blur" },
],
},
};
},
watch: {
"info.subTableName": function(val) {
this.setSubTableColumns(val);
},
"info.tplWebType": function(val) {
if (val === "") {
this.info.tplWebType = "element-ui";
}
},
},
methods: {
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.menuId,
label: node.menuName,
children: node.children,
};
},
/** 选择子表名触发 */
subSelectChange(value) {
this.info.subTableFkName = "";
},
/** 选择生成模板触发 */
tplSelectChange(value) {
if (value !== "sub") {
this.info.subTableName = "";
this.info.subTableFkName = "";
}
},
/** 设置关联外键 */
setSubTableColumns(value) {
for (var item in this.tables) {
const name = this.tables[item].tableName;
if (value === name) {
this.subColumns = this.tables[item].columns;
break;
}
}
},
},
};
</script>