diff --git a/src/api/generator.ts b/src/api/generator.ts index 4686ad22..31e19a2b 100644 --- a/src/api/generator.ts +++ b/src/api/generator.ts @@ -100,7 +100,7 @@ export interface GenConfigForm { author?: string; /** 字段配置列表 */ - fieldConfigs?: FieldConfig[]; + fieldConfigs: FieldConfig[]; } /** 字段配置 */ diff --git a/src/views/generator/index.vue b/src/views/generator/index.vue index fc4ae20c..9987514a 100644 --- a/src/views/generator/index.vue +++ b/src/views/generator/index.vue @@ -123,117 +123,92 @@ - - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + - - + + + @@ -297,7 +272,9 @@
- + + + 一键复制
@@ -318,13 +295,19 @@ @@ -335,7 +318,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"; @@ -355,14 +339,18 @@ import DictAPI from "@/api/dict"; 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(); @@ -382,6 +370,8 @@ const cmOptions: EditorConfiguration = { const prevBtnText = ref(""); const nextBtnText = ref("下一步，字段配置"); const active = ref(0); +const currentTableName = ref(""); +const sortFlag = ref(); interface TreeNode { label: string; @@ -391,11 +381,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; @@ -403,7 +448,7 @@ function handleNextClick() { ElMessage.error("表名不能为空"); return; } - loading.value = true; + fieldLoading.value = true; loadingText.value = "代码生成中，请稍后..."; GeneratorAPI.saveGenConfig(tableName, formData.value) .then(() => { @@ -413,11 +458,13 @@ function handleNextClick() { if (active.value++ >= 2) active.value = 2; }) .finally(() => { - loading.value = false; + fieldLoading.value = false; loadingText.value = "loading..."; }); } else { - if (active.value++ >= 2) active.value = 2; + if (active.value++ >= 2) { + active.value = 2; + } } } @@ -445,6 +492,7 @@ function handleQuery() { loading.value = false; }); } + /** 重置查询 */ function handleResetQuery() { queryFormRef.value.resetFields(); @@ -458,8 +506,9 @@ function handleCloseDialog() { /** 打开弹窗 */ function handleOpenDialog(tableName: string) { + active.value = 0; dialog.visible = true; - + currentTableName.value = tableName; // 获取字典数据 DictAPI.getList().then((data) => { dictOptions.value = data;