diff --git a/src/api/generator.ts b/src/api/generator.ts index 481fc346..84179977 100644 --- a/src/api/generator.ts +++ b/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[]; } diff --git a/src/views/generator/index.vue b/src/views/generator/index.vue index 5f284490..36405610 100644 --- a/src/views/generator/index.vue +++ b/src/views/generator/index.vue @@ -96,7 +96,7 @@ - + @@ -136,132 +136,108 @@ - - + + - - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + + + @@ -325,7 +301,9 @@
- + + + 一键复制
@@ -346,13 +324,19 @@ @@ -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({ + keywords: undefined, pageNum: 1, pageSize: 10, }); const pageData = ref([]); -const formData = ref({}); +const formData = ref({ + fieldConfigs: [], +}); const formTypeOptions: Record = FormTypeEnum; const queryTypeOptions: Record = QueryTypeEnum; const dictOptions = ref(); @@ -412,6 +401,8 @@ const cmOptions: EditorConfiguration = { const prevBtnText = ref(""); const nextBtnText = ref("下一步，字段配置"); const active = ref(0); +const currentTableName = ref(""); +const sortFlag = ref(); interface TreeNode { label: string; @@ -421,11 +412,66 @@ interface TreeNode { const treeData = ref([]); +const initSort = () => { + if (sortFlag.value) { + return; + } + const table = document.querySelector( + ".elTableCustom .el-table__body-wrapper tbody" + ); + sortFlag.value = Sortable.create(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; + }); } /**