From d995a8ce0d075e40b0d30d3a2050410ac3d57ad4 Mon Sep 17 00:00:00 2001
From: JaguarJack <82664165@qq.com>
Date: Sun, 21 Apr 2024 13:46:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=88=9B=E5=BB=BA=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E5=AD=97=E6=AE=B5=EF=BC=8C=E6=94=AF=E6=8C=81=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Develop/views/schema/steps/structure.vue  | 58 ++++++++++---------
 package.json                                  |  1 +
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/modules/Develop/views/schema/steps/structure.vue b/modules/Develop/views/schema/steps/structure.vue
index b7672d6..0483b65 100644
--- a/modules/Develop/views/schema/steps/structure.vue
+++ b/modules/Develop/views/schema/steps/structure.vue
@@ -1,27 +1,29 @@
 <template>
   <div>
-    <el-table :data="structures" class="draggable">
-      <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
-      <el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
-        <template #default="scope">
-          <el-tag type="success">{{ scope.row.type }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
-        <template #default="scope">
-          <el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
-          <el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
-      <!--<el-table-column prop="comment" label="注释" />-->
-      <el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
-        <template #default="scope">
-          <el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
-          <el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
-        </template>
-      </el-table-column>
-    </el-table>
+      <VueDraggable v-model="structures" target=".el-table__body tbody" animation="150" @end="onEnd">
+          <el-table :data="structures" class="draggable" :lazy="false">
+          <el-table-column prop="field" :label="$t('generate.schema.structure.field_name.name')" />
+          <el-table-column prop="type" :label="$t('generate.schema.structure.type.name')">
+            <template #default="scope">
+              <el-tag type="success">{{ scope.row.type }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="nullable" :label="$t('generate.schema.structure.nullable')" width="90px">
+            <template #default="scope">
+              <el-tag v-if="scope.row.nullable">{{ $t('system.yes') }}</el-tag>
+              <el-tag v-else type="info">{{ $t('system.no') }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="default" :label="$t('generate.schema.structure.default')" />
+          <!--<el-table-column prop="comment" label="注释" />-->
+          <el-table-column prop="id" :label="$t('generate.schema.structure.operate')" width="120px">
+            <template #default="scope">
+              <el-button type="primary" :icon="Edit" @click="updateField(scope.row.id)" size="small" />
+              <el-button type="danger" :icon="Delete" @click="deleteField(scope.row.id)" size="small" />
+            </template>
+          </el-table-column>
+        </el-table>
+    </VueDraggable>
 
     <div class="flex justify-end mt-4">
       <el-button type="success" :icon="Plus" @click="addField">{{ $t('system.add') }}</el-button>
@@ -95,14 +97,14 @@ import type { FormInstance } from 'element-plus'
 import Message from '/admin/support/message'
 import http from '/admin/support/http'
 import { Code } from '/admin/enum/app'
+import { VueDraggable } from 'vue-draggable-plus'
 
 const schemaStore = useSchemaStore()
 const emits = defineEmits(['prev', 'next'])
 const visible = ref(false)
 
-const structures = computed(() => {
-  return schemaStore.getStructures
-})
+// 初始化
+const structures = ref(schemaStore.getStructures)
 
 const structure: Ref<Structure> = ref(schemaStore.initStructure())
 // structure
@@ -149,7 +151,11 @@ const next = () => {
     })
   }
 }
-
+// 调整数据结构
+const onEnd = () => {
+    console.log(structures.value)
+    schemaStore.setStructures(structures.value)
+}
 const types: string[] = [
   'id',
   'smallIncrements',
diff --git a/package.json b/package.json
index a87a300..58d261f 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "pinia": "^2.1.7",
         "terser": "^5.29.2",
         "vue": "^3.4.21",
+        "vue-draggable-plus": "^0.4.0",
         "vue-i18n": "9",
         "vue-router": "4.3.0",
         "vuedraggable": "^2.24.3"