chore: 🔨 合并排序、代码下载和生成菜单路由的代码

src/api/generator.ts

@@ -38,6 +38,15 @@ class GeneratorAPI {
       method: "get",
     });
   }
+
+  /** 重置代码生成配置 */
+  static resetGenConfig(tableName: string) {
+    return request({
+      url: `${GENERATOR_BASE_URL}/${tableName}/config`,
+      method: "delete",
+    });
+  }
+
   /**
    * 下载 ZIP 文件
    * @param url
@@ -122,6 +131,9 @@ export interface GenConfigForm {
   /** 上级菜单 */
   parentMenuId?: number;
 
+  /** 字段排序 */
+  fieldSort?: number;
+
   /** 字段配置列表 */
   fieldConfigs?: FieldConfig[];
 }

src/views/generator/index.vue

@@ -96,7 +96,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="表名">
-                <el-input v-model="formData.tableName" />
+                <el-input v-model="formData.tableName" readonly />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -136,132 +136,108 @@
           </el-row>
 
           <el-row>
-            <el-col :span="24">
-              <el-form-item label="父菜单">
+            <el-col :span="12">
+              <el-form-item label="上级菜单">
                 <el-tree-select
                   v-model="formData.parentMenuId"
-                  placeholder="选择父菜单"
+                  placeholder="选择上级菜单"
                   :data="menuOptions"
-                  filterable
                   check-strictly
                   :render-after-expand="false"
+                  filterable
+                  clearable
                 />
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
 
-        <el-table
-          v-show="active == 1"
-          v-loading="loading"
-          :element-loading-text="loadingText"
-          highlight--currentrow
-          :data="formData.fieldConfigs"
-        >
-          <el-table-column label="字段列名" width="100">
-            <template #default="scope">
-              <el-form-item>
+        <div class="elTableCustom" v-show="active == 1">
+          <el-table
+            v-loading="fieldLoading"
+            row-key="id"
+            :element-loading-text="loadingText"
+            highlight--currentrow
+            :data="formData.fieldConfigs"
+          >
+            <el-table-column type="index" label="序号" width="80" />
+            <el-table-column label="字段列名" width="150">
+              <template #default="scope">
                 {{ scope.row.columnName }}
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="字段类型" width="100">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="字段类型" width="80">
+              <template #default="scope">
                 {{ scope.row.columnType }}
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column label="Java属性" width="120">
-            <template #default="scope">
-              <el-form-item
-                :prop="'fieldConfigs.' + scope.$index + '.fieldName'"
-              >
+              </template>
+            </el-table-column>
+            <el-table-column label="Java属性" width="120">
+              <template #default="scope">
                 <el-input v-model="scope.row.fieldName" />
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column label="Java类型" width="120">
-            <template #default="scope">
-              <el-form-item
-                :prop="'fieldConfigs.' + scope.$index + '.fieldType'"
-              >
+              </template>
+            </el-table-column>
+            <el-table-column label="Java类型" width="120">
+              <template #default="scope">
                 <el-input v-model="scope.row.fieldType" />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="字段描述">
-            <template #default="scope">
-              <el-form-item
-                :prop="'fieldConfigs.' + scope.$index + '.fieldComment'"
-              >
+            <el-table-column label="字段描述" min-width="120">
+              <template #default="scope">
                 <el-input v-model="scope.row.fieldComment" />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="最大长度" width="100">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="最大长度" width="100">
+              <template #default="scope">
                 <el-input v-model="scope.row.maxLength" />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="查询" width="70">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="查询" width="70">
+              <template #default="scope">
                 <el-checkbox
                   v-model="scope.row.isShowInQuery"
                   :true-value="1"
                   :false-value="0"
                 />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="列表" width="70">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="列表" width="70">
+              <template #default="scope">
                 <el-checkbox
                   v-model="scope.row.isShowInList"
                   :true-value="1"
                   :false-value="0"
                 />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="表单" width="70">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="表单" width="70">
+              <template #default="scope">
                 <el-checkbox
                   v-model="scope.row.isShowInForm"
                   :true-value="1"
                   :false-value="0"
                 />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="是否必填" width="100">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="必填" width="70">
+              <template #default="scope">
                 <el-checkbox
                   v-model="scope.row.isRequired"
                   :true-value="1"
                   :false-value="0"
                   :disabled="scope.row.isShowInForm !== 1"
                 />
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="查询方式">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="查询方式" min-width="100">
+              <template #default="scope">
                 <el-select v-model="scope.row.queryType" placeholder="请选择">
                   <el-option
                     v-for="(item, key) in queryTypeOptions"
@@ -270,13 +246,11 @@
                     :value="item.value"
                   />
                 </el-select>
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="表单类型">
-            <template #default="scope">
-              <el-form-item>
+            <el-table-column label="表单类型" min-width="110">
+              <template #default="scope">
                 <el-select v-model="scope.row.formType" placeholder="请选择">
                   <el-option
                     v-for="(item, key) in formTypeOptions"
@@ -285,14 +259,16 @@
                     :value="item.value"
                   />
                 </el-select>
-              </el-form-item>
-            </template>
-          </el-table-column>
+              </template>
+            </el-table-column>
 
-          <el-table-column label="字典类型">
-            <template #default="scope">
-              <el-form-item>
-                <el-select v-model="scope.row.dictType" placeholder="请选择">
+            <el-table-column label="字典类型" min-width="100">
+              <template #default="scope">
+                <el-select
+                  v-model="scope.row.dictType"
+                  placeholder="请选择"
+                  clearable
+                >
                   <el-option
                     v-for="item in dictOptions"
                     :key="item.value"
@@ -300,10 +276,10 @@
                     :value="item.value"
                   />
                 </el-select>
-              </el-form-item>
-            </template>
-          </el-table-column>
-        </el-table>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
 
         <el-row v-show="active == 2">
           <el-col :span="6">
@@ -325,7 +301,9 @@
             <el-scrollbar max-height="72vh">
               <div class="absolute-rt z-36 right-5 top-2">
                 <el-link @click="handleCopyCode" type="primary">
-                  <el-icon><CopyDocument /></el-icon>
+                  <el-icon>
+                    <CopyDocument />
+                  </el-icon>
                   一键复制
                 </el-link>
               </div>
@@ -346,13 +324,19 @@
 
       <template #footer>
         <el-button type="success" @click="handlePrevClick" v-if="active !== 0">
-          <el-icon><Back /></el-icon>
+          <el-icon>
+            <Back />
+          </el-icon>
           {{ prevBtnText }}
         </el-button>
         <el-button type="primary" @click="handleNextClick">
           {{ nextBtnText }}
-          <el-icon v-if="active !== 2"><Right /></el-icon>
-          <el-icon v-else><Download /></el-icon>
+          <el-icon v-if="active !== 2">
+            <Right />
+          </el-icon>
+          <el-icon v-else>
+            <Download />
+          </el-icon>
         </el-button>
       </template>
     </el-drawer>
@@ -363,7 +347,8 @@
 defineOptions({
   name: "Generator",
 });
-
+//导入sortablejs
+import Sortable from "sortablejs";
 import "codemirror/mode/javascript/javascript.js";
 import Codemirror from "codemirror-editor-vue3";
 import type { CmComponentRef } from "codemirror-editor-vue3";
@@ -384,14 +369,18 @@ import MenuAPI from "@/api/menu";
 const queryFormRef = ref(ElForm);
 
 const loading = ref(false);
+const fieldLoading = ref(false);
 const loadingText = ref("loading...");
 const total = ref(0);
 const queryParams = reactive<TablePageQuery>({
+  keywords: undefined,
   pageNum: 1,
   pageSize: 10,
 });
 const pageData = ref<TablePageVO[]>([]);
-const formData = ref<GenConfigForm>({});
+const formData = ref<GenConfigForm>({
+  fieldConfigs: [],
+});
 const formTypeOptions: Record<string, OptionType> = FormTypeEnum;
 const queryTypeOptions: Record<string, OptionType> = QueryTypeEnum;
 const dictOptions = ref<OptionType[]>();
@@ -412,6 +401,8 @@ const cmOptions: EditorConfiguration = {
 const prevBtnText = ref("");
 const nextBtnText = ref("下一步，字段配置");
 const active = ref(0);
+const currentTableName = ref("");
+const sortFlag = ref<Object>();
 
 interface TreeNode {
   label: string;
@@ -421,11 +412,66 @@ interface TreeNode {
 
 const treeData = ref<TreeNode[]>([]);
 
+const initSort = () => {
+  if (sortFlag.value) {
+    return;
+  }
+  const table = document.querySelector(
+    ".elTableCustom .el-table__body-wrapper tbody"
+  );
+  sortFlag.value = Sortable.create(<HTMLElement>table, {
+    group: "shared",
+    animation: 150,
+    ghostClass: "sortable-ghost", //拖拽样式
+    easing: "cubic-bezier(1, 0, 0, 1)",
+    onStart: (item: any) => {},
+
+    // 结束拖动事件
+    onEnd: (item: any) => {
+      setNodeSort(item.oldIndex, item.newIndex);
+    },
+  });
+};
+
+const setNodeSort = (oldIndex: number, newIndex: number) => {
+  // 使用arr复制一份表格数组数据
+  let arr = Object.assign([], formData.value.fieldConfigs);
+  const currentRow = arr.splice(oldIndex, 1)[0];
+  arr.splice(newIndex, 0, currentRow);
+  arr.forEach((item, index) => {
+    item.fieldSort = index + 1;
+  });
+  formData.value.fieldConfigs = [];
+  nextTick(async () => {
+    formData.value.fieldConfigs = arr;
+  });
+};
+
 function handlePrevClick() {
+  if (active.value === 2) {
+    //这里需要重新获取一次数据，如果第一次生成代码后，再次点击上一步，数据不重新获取，再次点击下一步，会再次插入数据，导致索引重复报错
+    formData.value = {
+      fieldConfigs: [],
+    };
+    nextTick(() => {
+      fieldLoading.value = true;
+      GeneratorAPI.getGenConfig(currentTableName.value)
+        .then((data) => {
+          formData.value = data;
+        })
+        .finally(() => {
+          fieldLoading.value = false;
+        });
+    });
+    initSort();
+  }
   if (active.value-- <= 0) active.value = 0;
 }
 
 function handleNextClick() {
+  if (active.value === 0) {
+    initSort();
+  }
   if (active.value === 1) {
     // 保存生成配置
     const tableName = formData.value.tableName;
@@ -433,7 +479,7 @@ function handleNextClick() {
       ElMessage.error("表名不能为空");
       return;
     }
-    loading.value = true;
+    fieldLoading.value = true;
     loadingText.value = "代码生成中，请稍后...";
     GeneratorAPI.saveGenConfig(tableName, formData.value)
       .then(() => {
@@ -443,7 +489,7 @@ function handleNextClick() {
         if (active.value++ >= 2) active.value = 2;
       })
       .finally(() => {
-        loading.value = false;
+        fieldLoading.value = false;
         loadingText.value = "loading...";
       });
   } else {
@@ -485,6 +531,7 @@ function handleQuery() {
       loading.value = false;
     });
 }
+
 /** 重置查询 */
 function handleResetQuery() {
   queryFormRef.value.resetFields();
@@ -495,9 +542,11 @@ function handleResetQuery() {
 /** 打开弹窗 */
 async function handleOpenDialog(tableName: string) {
   dialog.visible = true;
+  active.value = 0;
 
-  menuOptions.value = await MenuAPI.getOptions();
+  menuOptions.value = await MenuAPI.getOptions(true);
 
+  currentTableName.value = tableName;
   // 获取字典数据
   DictAPI.getList().then((data) => {
     dictOptions.value = data;
@@ -535,18 +584,22 @@ function handleResetConfig(tableName: string) {
 /** 获取生成预览 */
 function handlePreview(tableName: string) {
   treeData.value = [];
-  GeneratorAPI.getPreviewData(tableName).then((data) => {
-    dialog.title = `代码生成 ${tableName}`;
-    // 组装树形结构完善代码
-    const tree = buildTree(data);
-    treeData.value = [tree];
+  GeneratorAPI.getPreviewData(tableName)
+    .then((data) => {
+      dialog.title = `代码生成 ${tableName}`;
+      // 组装树形结构完善代码
+      const tree = buildTree(data);
+      treeData.value = [tree];
 
-    // 默认选中第一个叶子节点并设置 code 值
-    const firstLeafNode = findFirstLeafNode(tree);
-    if (firstLeafNode) {
-      code.value = firstLeafNode.content || "";
-    }
-  });
+      // 默认选中第一个叶子节点并设置 code 值
+      const firstLeafNode = findFirstLeafNode(tree);
+      if (firstLeafNode) {
+        code.value = firstLeafNode.content || "";
+      }
+    })
+    .catch(() => {
+      active.value = 0;
+    });
 }
 
 /**