✨ 填写生成表单信息

generator-code-server/generator-code/src/main/resources/static/views/components/AppHeader.js

@@ -8,7 +8,7 @@ const AppHeader = defineComponent({
      <div class="text-center mb-4">
         <h2 class="text-primary fw-bold">
             <i class="bi bi-code-square me-2"></i>
-            代码生成器
+            Bunny代码生成器
         </h2>
         <p class="text-muted">快速生成数据库表对应的代码</p>
     </div>

generator-code-server/generator-code/src/main/resources/static/views/index/MainCard.js

@@ -21,9 +21,14 @@ const MainCard = defineComponent({
         }
     },
     template: `
-    <div class="card shadow-sm">
+    <div class="card shadow-sm position-relative">
         <!-- 卡片头部 -->
-        <div class="card-header bg-primary bg-opacity-10 border-bottom">
+        <div class="position-absolute top-50 start-50" v-if="dbLoading">
+            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        <div class="card-header bg-primary bg-opacity-10 border-bottom" v-else>
             <div class="d-flex justify-content-between align-items-center">
                 <div>
                     <h5 class="card-title mb-0">

generator-code-server/generator-code/src/main/resources/static/views/index/MainForm.js

@@ -0,0 +1,149 @@
+const MainForm = {
+    name: "MainForm",
+    template: `
+    <div class="card shadow-sm mt-2 bg-body-secondary">
+        <div class="card-header p-3">
+            <a aria-controls="generatorFormCollapse"
+               aria-expanded="false"
+               class="d-flex align-items-center text-decoration-none"
+               data-bs-toggle="collapse"
+               href="#generatorFormCollapse">
+                <i class="bi bi-pencil me-2"></i>
+                <span class="fw-semibold">填写生成表单信息</span>
+                <i class="bi bi-chevron-down ms-auto transition-transform rotate-180"></i>
+            </a>
+        </div>
+
+        <div class="collapse" :class="{ 'show': defaultCollapse }" id="generatorFormCollapse">
+            <form class="card-body row">
+                <!-- 基本信息输入 -->
+                <div class="col-md-4 mb-3">
+                    <label class="form-label fw-medium" for="authorName">作者名称</label>
+                    <input class="form-control border-secondary" id="authorName" placeholder="输入作者名称" required
+                          v-model="authorName" type="text">
+                </div>
+                <div class="col-md-4 mb-3">
+                    <label class="form-label fw-medium"
+                           for="requestMapping">requestMapping名称</label>
+                    <input class="form-control border-secondary" id="requestMapping" placeholder="输入requestMapping名称" required
+                           v-model="requestMapping" type="text">
+                </div>
+                <div class="col-md-4 mb-3">
+                    <label class="form-label fw-medium" for="packageName">包名称</label>
+                    <input class="form-control border-secondary" id="packageName" placeholder="输入包名称" required
+                           v-model="packageName" type="text">
+                </div>
+                <div class="col-md-4 mb-3">
+                    <label class="form-label fw-medium" for="simpleDateFormat">时间格式</label>
+                    <input class="form-control border-secondary" id="simpleDateFormat" placeholder="输入时间格式" required
+                           v-model="simpleDateFormat" type="text">
+                </div>
+                <div class="col-md-4 mb-3">
+                    <label class="form-label fw-medium" for="comment">去除开头前缀</label>
+                    <input class="form-control border-secondary" id="comment" placeholder="去除开头前缀" required
+                           v-model="comment" type="text">
+                </div>
+
+                <!-- 前端模板选项 -->
+                <div class="col-12 mt-3 mb-3 p-3 bg-light rounded">
+                    <label class="form-check-inline col-form-label fw-medium">生成前端模板：</label>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input border-secondary" id="inlineCheckbox1" type="checkbox"
+                               value="option1">
+                        <label class="form-check-label" for="inlineCheckbox1">路径1</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input border-secondary" id="inlineCheckbox2" type="checkbox"
+                               value="option2">
+                        <label class="form-check-label" for="inlineCheckbox2">路径12</label>
+                    </div>
+                    <div class="form-check form-check-inline btn-group ms-2">
+                        <button class="btn btn-outline-primary btn-sm" type="button">全选</button>
+                        <button class="btn btn-outline-secondary btn-sm" type="button">反选</button>
+                        <button class="btn btn-outline-danger btn-sm" type="button">全不选</button>
+                    </div>
+                </div>
+
+                <!-- 后端模板选项 -->
+                <div class="col-12 mt-2 mb-3 p-3 bg-light rounded">
+                    <label class="form-check-inline col-form-label fw-medium">生成后端模板：</label>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input border-secondary" id="inlineCheckbox3" type="checkbox"
+                               value="option1">
+                        <label class="form-check-label" for="inlineCheckbox3">路径11</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input border-secondary" id="inlineCheckbox4" type="checkbox"
+                               value="option2">
+                        <label class="form-check-label" for="inlineCheckbox4">路径12</label>
+                    </div>
+                    <div class="form-check form-check-inline btn-group ms-2">
+                        <button class="btn btn-outline-primary btn-sm" type="button">全选</button>
+                        <button class="btn btn-outline-secondary btn-sm" type="button">反选</button>
+                        <button class="btn btn-outline-danger btn-sm" type="button">全不选</button>
+                    </div>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="row mt-4">
+                    <div class="col-md-4 btn-group">
+                        <button class="btn btn-outline-primary" data-bs-title="选择数据表中所有的内容"
+                                data-bs-toggle="tooltip" type="button">
+                            全部选择
+                        </button>
+                        <button class="btn btn-outline-secondary" data-bs-title="将选择的表格内容反向选择"
+                                data-bs-toggle="tooltip" type="button">
+                            全部反选
+                        </button>
+                        <button class="btn btn-outline-danger" data-bs-title="取消全部已经选择的数据表"
+                                data-bs-toggle="tooltip" type="button">
+                            全部取消
+                        </button>
+                    </div>
+                    <div class="col-md-4 btn-group">
+                        <button class="btn btn-primary" data-bs-title="取消全部已经选择的数据表"
+                                data-bs-toggle="tooltip" type="button">
+                            开始生成
+                        </button>
+                        <button class="btn btn-warning" type="button">清空生成记录</button>
+                        <button class="btn btn-success" type="button">下载全部</button>
+                    </div>
+                    <div class="col-md-4 d-grid gap-2">
+                        <button class="btn btn-primary text-white" type="button">下载ZIP</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    `,
+    data() {
+        return {
+            // 默认是否折叠编辑表单
+            defaultCollapse: false,
+            // 作者名称
+            authorName: "Bunny",
+            // requestMapping名称
+            requestMapping: "/api",
+            // // 表名称
+            // tableName: "",
+            // // 类名称
+            // className: "",
+            // 包名称
+            packageName: "cn.bunny",
+            // 时间格式
+            simpleDateFormat: "yyyy-MM-dd HH:mm:ss",
+            // 去除开头前缀
+            comment: "t_,sys_"
+        }
+    },
+    methods: {
+        /* 选择全部 */
+        onSelectAll() {
+
+        },
+        /* 开始生成 */
+        onGenerator() {
+
+        },
+    }
+}

generator-code-server/generator-code/src/main/resources/static/views/index/MainTable.js

@@ -2,7 +2,7 @@ const MainTable = defineComponent({
     name: "MainTable",
     props: ["tableList", "rawTableList", "loading"],
     template: `
-    <div class="card mt-4 shadow-sm">
+    <div class="card mt-2 shadow-sm">
         <div class="card-header bg-primary bg-opacity-10">
             <h5 class="card-title mb-0">
                 <i class="bi bi-table me-2"></i>数据表列表
@@ -22,15 +22,21 @@ const MainTable = defineComponent({
                 <table class="table table-striped table-bordered table-hover mb-0" v-else>
                     <thead class="table-light">
                     <tr>
+                        <th scope="col" width="2%">
+                            <input class="form-check-input border-secondary" type="checkbox" value="option2">
+                        </th>
                         <th scope="col" width="5%">#</th>
                         <th scope="col" width="30%">表名</th>
                         <th scope="col" width="35%">注释</th>
-                        <th scope="col" width="20%">所属数据库</th>
+                        <th scope="col" width="18%">所属数据库</th>
                         <th class="text-center" scope="col" width="10%">操作</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr :key="index" v-for="(table,index) in paginatedTableList">
+                        <th scope="row">
+                         <input class="form-check-input border-secondary" type="checkbox" value="option2">
+                       </th>
                         <th scope="row">{{index + 1}}</th>
                         <td><a class="text-decoration-none" href="#">{{ table.tableName}}</a></td>
                         <td>{{ table.comment }}</td>
@@ -49,7 +55,7 @@ const MainTable = defineComponent({
         <!-- 在表格显示卡片底部添加分页 -->
         <div class="card-footer bg-light">
             <div class="d-flex justify-content-between align-items-center">
-                <div class="form-text">共 {{ totalItems }} 条</div>
+                <div class="form-text">共 {{ rawTableList.length }} 条</div>
 
                 <nav aria-label="Page navigation">
                     <ul class="pagination mb-0">
@@ -106,8 +112,6 @@ const MainTable = defineComponent({
             currentPage: ref(1),
             // 每页数
             itemsPerPage: ref(10),
-            // 总的数据条数
-            totalItems: ref(0),
             // 表格选项
             tablePageOptions: [5, 10, 20, 50, 100, 150, 200]
         }
@@ -115,7 +119,8 @@ const MainTable = defineComponent({
     computed: {
         // 计算总页数
         totalPages() {
-            return Math.ceil(this.totalItems / this.itemsPerPage);
+            const totalItems = this.rawTableList.length;
+            return Math.ceil(totalItems / this.itemsPerPage);
         },
         // 分页后的数据
         paginatedTableList() {

generator-code-server/generator-code/src/main/resources/templates/index.html

@@ -10,7 +10,9 @@
     <!-- 本地引入 Vue.js -->
     <script th:src="@{/lib/js/vue/vue.global.js}"></script>
     <!-- 本地引入 Bootstrap JS -->
-    <script th:src="@{/lib/js/bootstrap.bundle.min.js}"></script>
+    <script th:src="@{/lib/js/boostrap/bootstrap.bundle.min.js}"></script>
+    <!-- 本地引入 popper JS -->
+    <script th:src="@{/lib/js/boostrap/popper.min.js}"></script>
     <!-- 本地引入 axios JS -->
     <script th:src="@{/lib/js/axios/axios.min.js}"></script>
     <!-- 加载全局axios配置 -->
@@ -28,15 +30,26 @@
                    @get-database-table-list="getDatabaseTableList"
                    v-model:db-select="dbSelect" v-model:table-select="tableSelect"></main-card>
 
+        <!-- 填写生成表单 -->
+        <main-form></main-form>
+
         <!-- 表格显示 -->
         <main-table :loading="loading" :raw-table-list="rawTableList" :table-list="tableList"></main-table>
     </div>
 </div>
 </body>
 
-<script th:src="@{/lib/vue/index/AppHeader.js}"></script>
-<script th:src="@{/lib/vue/index/MainCard.js}"></script>
-<script th:src="@{/lib/vue/index/MainTable.js}"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // 初始化所有tooltip
+        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        [...tooltips].forEach(t => new bootstrap.Tooltip(t));
+    });
+</script>
+<script th:src="@{/views/components/AppHeader.js}"></script>
+<script th:src="@{/views/index/MainCard.js}"></script>
+<script th:src="@{/views/index/MainForm.js}"></script>
+<script th:src="@{/views/index/MainTable.js}"></script>
 <script>
     const {createApp, ref} = Vue
 
@@ -69,8 +82,6 @@
                 this.tableList = data;
                 this.rawTableList = data;
 
-                // 更新总条数
-                this.totalItems = data.length;
                 // 重置到第一页
                 this.currentPage = 1;
 
@@ -98,6 +109,7 @@
 
     app.component('AppHeader', AppHeader);
     app.component('MainCard', MainCard);
+    app.component('MainForm', MainForm);
     app.component('MainTable', MainTable);
     app.mount('#app');
 </script>