470 lines
16 KiB
Vue
470 lines
16 KiB
Vue
<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="ass"/>
|
||
<el-option label="主子表（增删改查）" value="sub"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12">
|
||
<el-form-item prop="packageName">
|
||
<span slot="label">
|
||
生成包路径
|
||
<el-tooltip content="生成在哪个java包下，例如 com.hchyun.system" 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="moduleName">
|
||
<span slot="label">
|
||
生成模块名
|
||
<el-tooltip content="可理解为子系统名，例如 system" 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="businessName">
|
||
<span slot="label">
|
||
生成业务名
|
||
<el-tooltip content="可理解为功能英文名，例如 user" 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="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>
|
||
<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="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="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>
|
||
<div v-if="info.tplCategory == 'ass'">
|
||
<el-row>
|
||
<h4 class="form-header">关联关系</h4>
|
||
<el-col :span="8">
|
||
<el-form-item>
|
||
<span slot="label">
|
||
主表id
|
||
<el-tooltip content="主表id， 如：acc_id" placement="top">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</span>
|
||
<el-select v-model="info.assTableColumn" placeholder="请选择表名">
|
||
<el-option
|
||
v-for="(column , index) in info.columns"
|
||
:key="index"
|
||
:label="column.columnName+':'+column.columnComment"
|
||
:value="column.columnName"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<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.assTableName" @change="assSelectChang" placeholder="请选择表名">
|
||
<el-option
|
||
v-for="(table , index) in tableInfo"
|
||
:key="index"
|
||
:label="table.table_name + ':'+table.table_comment"
|
||
:value="table.table_name"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<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.assTableFkColumn" @change="assSelectChang" placeholder="请选择表名">
|
||
<el-option
|
||
v-for="(cloumn , index) in assCloumns"
|
||
:key="index"
|
||
:label="cloumn.columnName + ':'+cloumn.columnComment"
|
||
:value="cloumn.columnName"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-table ref="assCloumnTable" :data="assCloumns" row-key="columnId" :max-height="tableHeight">
|
||
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
|
||
<el-table-column
|
||
label="字段列名"
|
||
prop="columnName"
|
||
min-width="10%"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column label="字段描述" min-width="10%">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.columnComment"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="物理类型"
|
||
prop="columnType"
|
||
min-width="10%"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column label="Java类型" min-width="11%">
|
||
<template slot-scope="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="Date" value="Date" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="java属性" min-width="10%">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.javaField"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="列表" min-width="5%">
|
||
<template slot-scope="scope">
|
||
<el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="查询" min-width="5%">
|
||
<template slot-scope="scope">
|
||
<el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="查询方式" min-width="10%">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.queryType">
|
||
<el-option label="=" value="EQ" />
|
||
<el-option label="!=" value="NE" />
|
||
<el-option label=">" value="GT" />
|
||
<el-option label=">=" value="GTE" />
|
||
<el-option label="<" value="LT" />
|
||
<el-option label="<=" value="LTE" />
|
||
<el-option label="LIKE" value="LIKE" />
|
||
<el-option label="BETWEEN" value="BETWEEN" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="显示类型" min-width="12%">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.htmlType">
|
||
<el-option label="文本框" value="input" />
|
||
<el-option label="下拉框" value="select" />
|
||
<el-option label="单选框" value="radio" />
|
||
<el-option label="复选框" value="checkbox" />
|
||
<el-option label="日期控件" value="datetime" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="字典类型" min-width="12%">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||
<el-option
|
||
v-for="dict in dictOptions"
|
||
:key="dict.dictType"
|
||
:label="dict.dictName"
|
||
:value="dict.dictType">
|
||
<span style="float: left">{{ dict.dictName }}</span>
|
||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-form>
|
||
</template>
|
||
<script>
|
||
import Treeselect from "@riophae/vue-treeselect";
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
import {getTableInfos, getAssColumns,getAssColumnsByTableId} from "@/api/tool/associated"
|
||
|
||
export default {
|
||
name: "BasicInfoForm",
|
||
components: {Treeselect},
|
||
props: {
|
||
info: {
|
||
type: Object,
|
||
default: null
|
||
},
|
||
tables: {
|
||
type: Array,
|
||
default: null
|
||
},
|
||
menus: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
dictOptions:{
|
||
type:Array,
|
||
default:[]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
subColumns: [],
|
||
// 表格的高度
|
||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||
assCloumns:[],
|
||
tableInfo: [],
|
||
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"}
|
||
],
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
const tableId = this.$route.params && this.$route.params.tableId;
|
||
getTableInfos().then(res => {
|
||
this.tableInfo = res.data
|
||
})
|
||
getAssColumnsByTableId(tableId).then(res => {
|
||
this.assCloumns = res.data
|
||
})
|
||
},
|
||
watch: {
|
||
'info.subTableName': function (val) {
|
||
this.setSubTableColumns(val);
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
/** 关联表该表 */
|
||
assSelectChang() {
|
||
getAssColumns(this.info.assTableName, this.info.tableId).then(res => {
|
||
this.assCloumns = res.data
|
||
})
|
||
},
|
||
|
||
/** 转换菜单数据结构 */
|
||
normalizer(node) {
|
||
if (node.children && !node.children.length) {
|
||
delete node.children;
|
||
}
|
||
return {
|
||
id: node.menuId,
|
||
label: node.menuName,
|
||
children: node.children
|
||
};
|
||
},
|
||
/** 选择子表名触发 */
|
||
subSelectChange() {
|
||
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>
|