Files
SpringBootCodeGenerator/generator-web/src/main/resources/templates/newui2.html

260 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<#include "/newui-header.html">
<title>代码生成器</title>
<style>
.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {
color: #f9faff;
background-color: #91979d;
border-color: #d9ecff;
font-weight: bold;
}
.header-bar {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 10px;
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.header-bar .logo {
font-size: 24px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.header-bar .logo i {
margin-right: 10px;
}
.header-bar .links a {
margin-left: 10px;
text-decoration: none;
color: #007bff;
}
.container {
margin-top: 20px; /* 增加输入SQL区域与顶部的距离 */
}
.footer-bar {
text-align: center;
padding: 10px;
background-color: #f8f9fa;
border-top: 1px solid #e9ecef;
position: fixed;
width: 100%;
bottom: 0;
z-index: 1000;
}
.last-card {
margin-bottom: 70px; /* 增加输出代码区域与底部的距离 */
}
</style>
</head>
<body>
<div id="app">
<div class="header-bar">
<div class="logo">
<i class="bi bi-code"></i>
${(value.title)!!}
</div>
<small>${(value.slogan)!!}</small>
<div class="links">
<a href="https://github.com/moshowgame/SpringBootCodeGenerator/" target="_blank">GitHub</a> <a href="https://zhengkai.blog.csdn.net/" target="_blank">CSDN</a>
</div>
</div>
<div class="container">
<div class="row">
<blockquote class="quote-secondary">
${(value.description)!!}
</blockquote>
<div class="col-lg-12">
<div id="rrapp" v-cloak>
<div>
<el-form ref="form" :inline="true" :model="formData" label-width="100px">
<div class="card">
<div class="card-header">
<h5 class="card-title m-0">输入SQL</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="折叠">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<textarea id="inputArea" placeholder="请输入表结构信息..." style="height: 250px;" v-model="formData.tableSql"></textarea>
</div>
</div>
<hr>
<div class="card">
<div class="card-header">
<h5 class="card-title m-0">生成设置</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="折叠">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<el-form-item label="🌟🌟🌟引擎">
<el-select v-model="formData.options.dataType">
<el-option label="DDL SQL@自研SQL解析引擎" value="sql"></el-option>
<el-option label="SELECT SQL@JSqlParser引擎" value="select-sql"></el-option>
<el-option label="CREATE SQL@JSqlParser引擎" value="create-sql"></el-option>
<el-option label="JSON(Beta)" value="json"></el-option>
<el-option label="INSERT SQL" value="insert-sql"></el-option>
</el-select>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="formData.options.authorName"></el-input>
</el-form-item>
<el-form-item label="包名">
<el-input v-model="formData.options.packageName"></el-input>
</el-form-item>
<el-form-item label="返回(成功)">
<el-input v-model="formData.options.returnUtilSuccess"></el-input>
</el-form-item>
<el-form-item label="返回(失败)">
<el-input v-model="formData.options.returnUtilFailure"></el-input>
</el-form-item>
<el-form-item label="忽略前缀">
<el-input v-model="formData.options.ignorePrefix"></el-input>
</el-form-item>
<el-form-item label="TinyInt转换">
<el-select v-model="formData.options.tinyintTransType">
<el-option value="boolean" label="boolean"></el-option>
<el-option value="Boolean" label="Boolean"></el-option>
<el-option value="Integer" label="Integer"></el-option>
<el-option value="int" label="int"></el-option>
<el-option value="String" label="String"></el-option>
<el-option value="Short" label="Short"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间类型">
<el-select v-model="formData.options.timeTransType">
<el-option value="Date" label="Date"></el-option>
<el-option value="DateTime" label="DateTime"></el-option>
<el-option value="Time" label="Time"></el-option>
<el-option value="Timestamp" label="Timestamp"></el-option>
<el-option value="Calendar" label="Calendar"></el-option>
<el-option value="LocalDate" label="LocalDate"></el-option>
<el-option value="LocalDateTime" label="LocalDateTime"></el-option>
<el-option value="LocalTime" label="LocalTime"></el-option>
</el-select>
</el-form-item>
<el-form-item label="命名类型">
<el-select v-model="formData.options.nameCaseType">
<el-option label="驼峰" value="CamelCase"></el-option>
<el-option label="下划线" value="UnderScoreCase"></el-option>
</el-select>
</el-form-item>
<el-form-item label="包装类型">
<el-switch v-model="formData.options.isPackageType"></el-switch>
</el-form-item>
<el-form-item label="swaggerUI">
<el-switch v-model="formData.options.isSwagger"></el-switch>
</el-form-item>
<el-form-item label="字段注释">
<el-switch v-model="formData.options.isComment"></el-switch>
</el-form-item>
<el-form-item label="自动引包">
<el-switch v-model="formData.options.isAutoImport"></el-switch>
</el-form-item>
<el-form-item label="带包路径">
<el-switch v-model="formData.options.isWithPackage"></el-switch>
</el-form-item>
<el-form-item label="Lombok">
<el-switch v-model="formData.options.isLombok"></el-switch>
</el-form-item>
</div>
</div>
<hr>
<div class="card">
<div class="card-header">
<el-button type="primary" icon="el-icon-caret-right" @click="generate">生成</el-button>
<el-button type="primary" icon="el-icon-document-copy" @click="copy" plain>复制</el-button>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="折叠">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<span v-if="historicalData.length > 0">
<el-button-group>
<el-button type="primary" plain disabled round>历史记录</el-button>
<span v-for="(item, index) in historicalData" :key="index">
<el-button @click="switchHistoricalData">{{ item }}</el-button>
</span>
</el-button-group>
</span>
</div>
</div>
<hr>
<div class="card">
<div class="card-header">
<h5 class="card-title m-0">模板选择</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="折叠">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<el-form ref="form" :inline="true" :model="formData" label-width="100px" size="mini">
<div v-for="(item, index) in templates" :key="index">
<el-button-group>
<el-button type="primary" plain disabled>{{ item.group }}</el-button>
<span v-for="(childItem, index) in item.templates" :key="index">
<el-button @click="setOutputModel">{{ childItem.name }}</el-button>
</span>
</el-button-group>
</div>
</el-form>
</div>
</div>
<hr>
<div class="card last-card">
<div class="card-header">
<h5 class="card-title m-0">输出代码</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="折叠">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<textarea id="outputArea" placeholder="请输入表结构信息..." style="height: 250px;" v-model="outputStr"></textarea>
</div>
</div>
</el-form>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bar">
<p>${(value.copyright)!!} </p>
</div>
</div>
<script src="${request.contextPath}/statics/js/main.js"></script>
<script>
//console.log(vm);
vm.formData.options.authorName="${(value.author)!!}";
vm.formData.options.packageName="${(value.packageName)!!}";
vm.formData.options.returnUtilSuccess="${(value.returnUtilSuccess)!!}";
vm.formData.options.returnUtilFailure="${(value.returnUtilFailure)!!}";
vm.outputStr="${(value.outputStr)!!}";
loadAllCookie()
</script>
</body>
</html>