Teams/shgx_tz_mes_backend_sync
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

开发代码生成功能

Browse Source
This commit is contained in:
izory
2021-09-09 18:18:37 +08:00
parent d581934a39
commit 9ff6fb8c98
16 changed files with 557 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
ZR.Vue/src/views/tool/index.vue
View File

@@ -1,44 +1,15 @@
<template>
<div class="app-container">
<!-- <div class="filter-container">
<el-card>
<el-form ref="searchDbform" :inline="true" :model="searchform" class="demo-form-inline" size="small">
<el-form-item label="数据库地址" prop="DbAddress">
<el-input v-model="searchDbform.DbAddress" placeholder="请输入数据库地址" autocomplete="off" clearable />
</el-form-item>
<el-form-item label="数据库名称" prop="DbName">
<el-input v-model="searchDbform.DbName" placeholder="请输入数据库名称" autocomplete="off" clearable />
</el-form-item>
<el-form-item label="用户名" prop="DbUserName">
<el-input v-model="searchDbform.DbUserName" placeholder="请输入用户名" autocomplete="off" clearable />
</el-form-item>
<el-form-item label="访问密码" prop="DbPassword">
<el-input v-model="searchDbform.DbPassword" placeholder="请输入访问密码" autocomplete="off" clearable />
</el-form-item>
<el-form-item label="数据库类型" prop="DbType">
<el-select v-model="searchDbform.DbType" clearable placeholder="请选数据库类型">
<el-option v-for="item in selectDbTypes" :key="item.Id" :label="item.Title" :value="item.Id" />
</el-select>
</el-form-item>
<el-form-item label="数据库端口" prop="DbPort">
<el-input v-model="searchDbform.DbPort" placeholder="请输入数据库端口" autocomplete="off" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleDbConn()">链接</el-button>
</el-form-item>
</el-form>
</el-card>
</div> -->
<el-card>
<div class="list-btn-container">
<el-form ref="codeform" :inline="true" :rules="rules" :model="codeform" class="demo-form-inline" size="small">
<div>
<el-form ref="codeform" :inline="true" :rules="rules" :model="codeform" size="small">
<el-form-item label="数据库" prop="dbName">
<el-select v-model="codeform.dbName" clearable placeholder="请选择" @change="handleShowTable">
<el-option v-for="item in selectedDataBase" :key="item.Id" :label="item.dbName" :value="item.dbName" />
<el-option v-for="item in selectedDataBase" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="表名">
<el-input v-model="searchform.tableName" clearable placeholder="输入要查询的表名" />
<el-input v-model="codeform.tableName" clearable placeholder="输入要查询的表名" />
</el-form-item>
<!-- <el-form-item label="项目命名空间：" prop="baseSpace">
<el-tooltip class="item" effect="dark" content="系统会根据项目命名空间自动生成IService、Service、Models等子命名空间" placement="bottom">
@@ -46,32 +17,89 @@
</el-tooltip>
</el-form-item> -->
<el-form-item label="去掉表名前缀：">
<el-tooltip class="item" effect="dark" content="表名直接变为类名，去掉表名前缀。多个前缀用“;”隔开和结束" placement="bottom">
<el-input v-model="codeform.replaceTableNameStr" clearable width="300" placeholder="多个前缀用“;”隔开" />
<el-tooltip class="item" effect="dark" content="表名直接变为类名，去掉表名前缀。" placement="bottom">
<el-input v-model="codeform.replaceTableNameStr" clearable width="300" placeholder="例如：sys_" />
</el-tooltip>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch()">查询</el-button>
<!-- <el-button type="primary" icon="iconfont icon-code" @click="handleGenerate()">生成代码</el-button> -->
<el-button type="default" icon="el-icon-refresh" size="small" @click="loadTableData()">刷新</el-button>
</el-form-item>
</el-form>
</div>
<el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe highlight-current-row style="width: 100%" @selection-change="handleSelectChange">
<el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe highlight-current-row style="width: 100%">
<!-- <el-table-column type="selection" width="50" /> -->
<el-table-column prop="name" label="表名" sortable="custom" width="380" />
<el-table-column prop="description" label="表描述" />
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-view">预览</el-button>
<el-button type="text" icon="el-icon-download" @click="handleGenerate(scope.row)">生成代码</el-button>
<el-button type="text" icon="el-icon-view" @click="handlePreview()">预览</el-button>
<el-button type="text" icon="el-icon-download" @click="handleShowDialog(scope.row)">生成代码</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination background :current-page="pagination.pageNum" :page-sizes="[5,10,20,50,100, 200, 300, 400]" :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<el-pagination background :current-page="pagination.pageNum" :page-sizes="[5,10,20,50,100, 200, 300, 400]" :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</el-card>
<el-dialog :visible.sync="showGenerate" title="代码生成" width="800px">
<el-form ref="codeGenerateForm" label-width="140px">
<el-form-item label="要生成的文件">
<el-checkbox-group v-model="checkedCodeGenerateForm">
<el-checkbox :label="1">生成Model</el-checkbox>
<el-checkbox :label="2">生成Dto</el-checkbox>
<el-checkbox :label="3">生成Repository</el-checkbox>
<el-checkbox :label="4">生成Service</el-checkbox>
<el-checkbox :label="5">生成Controller</el-checkbox>
<el-checkbox :label="6">生成Views和js</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否覆盖生成">
<el-radio v-model="coverd" :label="true">是</el-radio>
<el-radio v-model="coverd" :label="false">否</el-radio>
</el-form-item>
<el-form-item label="生成查询的列">
<!-- <el-checkbox-group v-model="checkedQueryColumn">
<el-checkbox :label="item.dbColumnName" v-for="item in columnData" :key="item.dbColumnName">{{item.dbColumnName}}</el-checkbox>
</el-checkbox-group> -->
<el-table :data="columnData" height="300px">
<el-table-column type="selection" width="60" />
<el-table-column label="字段列名" prop="dbColumnName" />
<el-table-column label="字段描述" prop="columnDescription">
<template slot-scope="scope">
<el-input v-model="scope.row.columnDescription" />
</template>
</el-table-column>
<el-table-column label="表数据类型" prop="dataType" />
<el-table-column label="C#类型">
<template slot-scope="scope">
<el-select v-model="scope.row.dataType">
<el-option value="int">int</el-option>
<el-option value="bigint">bigint</el-option>
<el-option value="varchar">varchar</el-option>
</el-select>
</template>
</el-table-column>
<!-- <el-table-column label="显示类型">
<el-select v-model="selectType">
<el-option value="input">文本框</el-option>
<el-option value="textArea">文本域</el-option>
<el-option value="select">下拉框</el-option>
<el-option value="radio">单选框</el-option>
<el-option value="datetime">日期控件</el-option>
<el-option value="upload">图片上传</el-option>
<el-option value="fileUpload">文件上传</el-option>
</el-select>
</el-table-column> -->
</el-table>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleGenerate">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -81,43 +109,28 @@ import {
codeGetDBList,
codeGetTableList,
codeGenerator,
queryColumnInfo,
} from "@/api/tool/gen";
import { downloadFile } from "@/utils/index";
// import { downloadFile } from "@/utils/index";
import { Loading } from "element-ui";
import defaultSettings from "@/settings";
import template from "../../../document/template.vue";
// import defaultSettings from "@/settings";
export default {
components: { template },
name: "CodeGenerator",
data() {
return {
searchDbform: {
DbName: "",
DbAddress: "",
DbPort: "1433",
DbUserName: "",
DbPassword: "",
DbType: "",
},
searchform: {
codeform: {
dbName: "",
tableName: "",
},
codeform: {
baseSpace: "",
replaceTableNameStr: "",
},
showGenerate: false,
checkedCodeGenerateForm: [1, 2, 3, 4, 5, 6],
rules: {
// baseSpace: [
// { required: true, message: "请输入项目名称", trigger: "blur" },
// {
// min: 2,
// max: 50,
// message: "长度在 2 到 50 个字符",
// trigger: "blur",
// },
// ],
dbName: [
{ required: true, message: "请选择数据库名称", trigger: "blur" },
],
@@ -125,16 +138,6 @@ export default {
{ min: 0, max: 50, message: "长度小于50个字符", trigger: "blur" },
],
},
selectDbTypes: [
{
Id: "SqlServer",
Title: "SqlServer",
},
{
Id: "MySql",
Title: "MySql",
},
],
tableData: [],
tableloading: false,
pagination: {
@@ -142,30 +145,35 @@ export default {
pagesize: 20,
pageTotal: 0,
},
sortableData: {
order: "",
sort: "",
},
currentSelected: [],
// 选中行的表
currentSelected: {},
selectedDataBase: [],
// 列信息
columnData: [],
// 选中的列
checkedQueryColumn: [],
//是否覆盖原先代码
coverd: true,
};
},
created() {
this.pagination.pageNum = 1;
this.loadData();
// this.loadTableData();
this.loadTableData();
},
methods: {
loadData: function () {
loadData() {
codeGetDBList().then((res) => {
this.selectedDataBase = res.data;
const { dbList, defaultDb } = res.data;
this.codeform.dbName = defaultDb;
this.selectedDataBase = dbList;
});
},
/**
* 加载页面table数据
*/
loadTableData: function () {
if (this.codeform.dataBaseName !== "") {
loadTableData() {
if (this.codeform.dbName !== "") {
this.tableloading = true;
var seachdata = {
pageNum: this.pagination.pageNum,
@@ -183,46 +191,53 @@ export default {
/**
* 点击查询
*/
handleSearch: function () {
handleSearch() {
this.$refs["codeform"].validate((valid) => {
if (valid) {
this.tableloading = true;
this.pagination.pageNum = 1;
this.loadTableData();
}else{
} else {
return false;
}
});
},
handleShowTable: function () {
this.pagination.pageNum = 1;
// this.loadTableData();
},
handleDbConn: function () {
var dataInfo = {
DbAddress: this.searchDbform.DbAddress,
DbPort: this.searchDbform.DbPort,
DbName: this.searchDbform.DbName,
DbUserName: this.searchDbform.DbUserName,
DbPassword: this.searchDbform.DbPassword,
DbType: this.searchDbform.DbType,
};
createGetDBConn(dataInfo).then((res) => {
this.selectedDataBase = res.ResData;
this.searchform.DbName = this.searchDbform.DbName;
});
handleShowTable() {
this.pagination.pageNum = 1;
this.loadTableData();
},
handlePreview() {
this.msgSuccess("敬请期待");
},
handleShowDialog(row) {
console.log(row);
this.showGenerate = true;
this.currentSelected = row.name;
queryColumnInfo({
dbName: this.codeform.dbName,
tableName: row.name,
}).then((res) => {
if (res.code === 200) {
const columnData = res.data;
// for (let i = 0; i < columnData.length; i++) {
// this.$set(columnData[i], "selectType", 1);
// }
this.columnData = columnData;
// this.checkedQueryColumn = res.data.map((r) => r.dbColumnName);
}
});
},
/**
* 点击生成服务端代码
*/
handleGenerate: async function (row) {
console.log(JSON.stringify(row));
// if (this.currentSelected.length === 0 || this.currentSelected.length > 3) {
// this.msgError("请先选择要生成代码的数据表", "提示");
// return false;
// } else {
handleGenerate: async function () {
console.log(JSON.stringify(this.checkedCodeGenerateForm));
if (!this.currentSelected) {
this.msgError("请先选择要生成代码的数据表");
return false;
}
this.$refs["codeform"].validate((valid) => {
if (valid) {
var loadop = {
@@ -235,10 +250,15 @@ export default {
var seachdata = {
dbName: this.codeform.dbName,
tables: row.name, // this.currentSelected.toString(),
tables: this.currentSelected.name,
baseSpace: this.codeform.baseSpace,
replaceTableNameStr: this.codeform.replaceTableNameStr,
genFiles: this.checkedCodeGenerateForm,
coverd: this.coverd,
queryColumn: this.checkedQueryColumn,
};
console.log(JSON.stringify(seachdata));
//return;
codeGenerator(seachdata)
.then((res) => {
if (res.code == 200) {
@@ -246,7 +266,7 @@ export default {
// defaultSettings.fileUrl + res.ResData[0],
// res.ResData[1]
// );
this.showGenerate = false;
this.msgSuccess("恭喜你，代码生成完成！");
} else {
this.msgError(res.msg);
@@ -260,14 +280,6 @@ export default {
return false;
}
});
// }
},
/**
* 当用户手动勾选checkbox数据行事件
*/
handleSelectChange: function (selection, row) {
console.log(JSON.stringify(selection));
this.currentSelected = selection.map((item) => item.name);
},
/**
* 选择每页显示数量
@@ -284,6 +296,10 @@ export default {
this.pagination.pageNum = val;
this.loadTableData();
},
cancel() {
this.showGenerate = false;
this.currentSelected = {};
},
},
};
</script>