<template>
|
<div>
|
<el-row>
|
<div class="search-warp">
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
<el-form-item label="数据库">
|
<el-input clearable @clear="search" size="small" v-model="searchForm.dataBaseName" placeholder="数据库名"></el-input>
|
</el-form-item>
|
<el-form-item label="表">
|
<el-select v-model="searchForm.tableName" @change="search" size="small" placeholder="请选择表">
|
<el-option v-for="(value, key) in tables" :key="key" :label="value.tableName" :value="value.tableName"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="search">查找</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-row>
|
<el-row>
|
<el-form ref="genForm" :model="genForm" :inline="true" :rules="genRules">
|
<el-form-item label="为哪个模块生成代码：" prop="whichModule">
|
<el-input type="text" size="small" v-model="genForm.whichModule"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="generateCode">生成代码</el-button>
|
</el-form-item>
|
</el-form>
|
</el-row>
|
<el-row>
|
<el-table
|
:data="columnList"
|
border
|
style="width: 100%">
|
<el-table-column
|
width="150px"
|
prop="columnName"
|
label="字段名">
|
<template slot-scope="scope">
|
<div v-if="scope.row.refTableName">{{ scope.row.columnName }}(连)</div>
|
<div v-else>{{ scope.row.columnName }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="columnType"
|
width="90px"
|
label="字段类型">
|
</el-table-column>
|
<el-table-column
|
prop="stringLength"
|
width="90px"
|
label="字段长度">
|
</el-table-column>
|
<el-table-column
|
prop="required"
|
:formatter="requireFormatter"
|
width="90px"
|
label="能否为空">
|
</el-table-column>
|
<el-table-column
|
prop="comment"
|
width="200px"
|
label="注释(会在代码中使用)">
|
<template slot-scope="scope">
|
<el-input type="text" size="small" v-model="scope.row.comment">关联表</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="addRequired"
|
width="90px"
|
label="新增必填">
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.addRequired"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="editRequired"
|
width="90px"
|
label="修改必填">
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.editRequired"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="inputWay"
|
width="190px"
|
label="前端输入方式">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.inputWay" placeholder="前端的组件类型">
|
<el-option label="文本框" value="input"></el-option>
|
<el-option label="文本域" value="textarea"></el-option>
|
<el-option label="数字框" value="number"></el-option>
|
<el-option label="下拉框" value="select"></el-option>
|
<el-option label="单选框" value="radio"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="dataSourceId"
|
width="190px"
|
label="数据来源">
|
<template slot-scope="scope">
|
<el-select :disabled="scope.row.inputWay !== 'select'" filterable remote :remote-method="dictTypeList" reserve-keyword :loading="dictLoading" v-model="scope.row.dataSourceId" placeholder="字典类型">
|
<el-option v-for="type in typeList" :key="type.id" :label="type.value" :value="type.id"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="editRequired"
|
width="90px"
|
label="搜索条件">
|
<template slot-scope="scope">
|
<el-switch
|
v-model="scope.row.search"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="searchType"
|
label="搜索类型">
|
<template slot-scope="scope">
|
<el-radio v-model="scope.row.searchType" label="select">下拉选择(外键根据关联表查数据)</el-radio>
|
<el-radio v-model="scope.row.searchType" label="OTHER">其它</el-radio>
|
</template>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="120">
|
<template slot-scope="scope">
|
<el-popover
|
placement="right"
|
width="600"
|
trigger="click">
|
<el-form :inline="false" :model="scope.row" label-width="150px">
|
<el-form-item label="关联表">
|
<el-select v-model="scope.row.refTableName" @change="(value) => changeColumnList(value, scope.row)" size="small" placeholder="请选择表">
|
<el-option v-for="(value, key) in tables" :key="key" :label="value.tableName" :value="value.tableName"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="关联字段">
|
<el-select v-model="scope.row.refColumn" filterable remote reserve-keyword :remote-method="(value) => searchColumnList(value, scope.row.tableName)" :loading="loading" size="small" placeholder="请选择关联字段">
|
<el-option v-for="item in refColumnList" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="查询字段">
|
<div class="returnColumn" v-for="(item,index) in scope.row.returnColumnList" :key="index">
|
<div class="column">
|
<el-select v-model="item.column" filterable remote reserve-keyword :remote-method="(value) => searchColumnList(value, scope.row.tableName)" :loading="loading" size="small" :placeholder="formatPlaceholder(index)">
|
<el-option v-for="item in refColumnList" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
</div>
|
<div class="column">
|
<el-input v-model="item.asColumn" size="small" placeholder="别名(SQL中的 as)"></el-input>
|
</div>
|
<div class="column">
|
<el-button @click="delRefColumn(scope.row.returnColumnList, index)" size="small">删除</el-button>
|
</div>
|
|
</div>
|
<el-button @click="addRefColumn(scope.row.returnColumnList)" size="small">添加</el-button>
|
</el-form-item>
|
<el-form-item label="关联关系">
|
<el-radio v-model="scope.row.refType" label="OTO">一对一</el-radio>
|
<el-radio v-model="scope.row.refType" label="OTM">一对多</el-radio>
|
</el-form-item>
|
<!-- <el-form-item label="行为跟随">-->
|
<!-- <el-radio v-model="scope.row.logic" label="YES">随关联表新增删除</el-radio>-->
|
<!-- <el-radio v-model="scope.row.logic" label="NO">不做任何操作</el-radio>-->
|
<!-- </el-form-item>-->
|
</el-form>
|
<div slot="reference">
|
<el-button type="text" size="small">关联表</el-button>
|
<el-button type="text" size="small">更多配置</el-button>
|
</div>
|
|
</el-popover>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-row>
|
|
</div>
|
</template>
|
|
<script>
|
import {getTables, generateCode, getTableColumns, getTableColumnsSelect} from "@/api/generator";
|
import {notify} from "@/common/common";
|
import {typeList} from "@/api/dict-type";
|
export default {
|
name: "CodeGenView",
|
data() {
|
return {
|
typeList: [],
|
dictLoading: false,
|
loading: false,
|
refOpen: false,
|
searchForm: {
|
tableName: "",
|
dataBaseName: "start"
|
},
|
tables: [], // 表下拉数据
|
columnList: [], // 列
|
refColumnList: [],
|
genForm: {
|
tableName: '',
|
whichModule: 'dev-test',
|
tablePrefix: "t_",
|
columns: [],
|
},
|
genRules: {
|
whichModule: [
|
{ required: true, message: '请输入为哪个模块生成代码', trigger: 'blur' },
|
],
|
},
|
}
|
},
|
methods: {
|
formatPlaceholder(index) {
|
return "关联字段" + (index + 1)
|
},
|
addRefColumn(list) {
|
let obj = {
|
"columnName": "",
|
"asColumn": ""
|
}
|
list.push(obj)
|
},
|
delRefColumn(list, index) {
|
list.splice(index, 1)
|
},
|
changeColumnList(value, row) {
|
let params = {
|
dataBaseName: this.searchForm.dataBaseName,
|
tableName: value,
|
}
|
getTableColumnsSelect(params).then(res => {
|
row.refColumn = ""
|
this.refColumnList = res.data.data;
|
})
|
},
|
searchColumnList(keyword, tableName) {
|
console.log(keyword, "eeee", tableName)
|
if (keyword) {
|
let params = {
|
dataBaseName: this.searchForm.dataBaseName,
|
tableName: tableName,
|
keyword: keyword,
|
}
|
getTableColumnsSelect(params).then(res => {
|
this.refColumnList = res.data.data;
|
})
|
}
|
|
},
|
|
requireFormatter(row) {
|
if (row.required === 'NO') {
|
return "不能"
|
}
|
if (row.required === 'YES') {
|
return "能"
|
}
|
},
|
search() {
|
getTableColumns(this.searchForm).then(res => {
|
this.columnList = res.data.data;
|
})
|
},
|
generateCode() {
|
this.$refs['genForm'].validate((valid) => {
|
if (valid) {
|
if (!this.searchForm.tableName) {
|
notify("warning", "请选择为哪张表生成代码")
|
return false
|
}
|
this.genForm.tableName = this.searchForm.tableName;
|
this.genForm.columns = this.columnList;
|
generateCode(this.genForm).then((res) => {
|
this.$message.success(res.data.msg);
|
})
|
} else {
|
return false;
|
}
|
});
|
},
|
dictTypeList(value) {
|
let params = {
|
keyword: value
|
}
|
typeList(params).then(res => {
|
this.typeList = res.data.data
|
})
|
},
|
},
|
mounted() {
|
getTables(this.searchForm).then((res) => {
|
this.tables = res.data.data;
|
})
|
this.dictTypeList('');
|
}
|
}
|
</script>
|
|
<style scoped>
|
.returnColumn {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
.column {
|
flex: 1;
|
margin-right: 5px;
|
}
|
</style>
|
