From 2dfe85a778e8b5f6a49b377426369f3acdebe483 Mon Sep 17 00:00:00 2001
From: Tuzki <1720599558@qq.com>
Date: Sat, 22 Feb 2025 14:23:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(cjy):=20=E4=B8=BA=E6=A0=8F=E7=9B=AE?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E8=A1=A8=E5=8D=95=E6=B7=BB=E5=8A=A0=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 ColumnInfoForm.vue 中添加排序字段，使用 el-input-number 组件
- 更新 ImageUpload 组件，添加图片预览和删除功能，并使用 vuedraggable 实现图片拖拽排序
- 在 package.json 中更新 vuedraggable 依赖版本
---
 package.json                                |  2 +-
 src/components/ImageUpload/index.vue        | 42 +++++++++++++++++++--
 src/views/cjy/columninfo/ColumnInfoForm.vue |  5 +++
 yarn.lock                                   |  4 +-
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index b2bc542..5f6d5f0 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "vue-router": "3.4.9",
     "vue-seamless-scroll": "^1.1.23",
     "vue-video-player": "^5.0.2",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.6.2",
     "xml-js": "1.6.11"
   },
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index a181f19..469bb18 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -11,7 +11,7 @@
         :on-exceed="handleExceed"
         name="file"
         :on-remove="handleRemove"
-        :show-file-list="true"
+        :show-file-list="false"
         :headers="headers"
         :file-list="fileList"
         :on-preview="handlePictureCardPreview"
@@ -19,7 +19,24 @@
     >
       <i class="el-icon-plus"></i>
     </el-upload>
-
+    <ul class="el-upload-list el-upload-list--picture-card">
+          <draggable v-model="fileList" @end="end" @start="start">
+              <li v-for="(item, index) in fileList" :key="item.uid" class="el-upload-list__item is-success animated">
+                  <img :src="item.url" alt="" class="el-upload-list__item-thumbnail ">
+                  <i class="el-icon-close"></i>
+                  <span class="el-upload-list__item-actions">
+                    <!-- 预览 -->
+                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreviewFileDetail(item)">
+                      <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <!-- 删除 -->
+                    <span class="el-upload-list__item-delete" @click="handleRemoveFileDetail(index)">
+                      <i class="el-icon-delete"></i>
+                    </span>
+                  </span>
+              </li>
+          </draggable>
+      </ul>
     <!-- 上传提示 -->
     <div class="el-upload__tip" slot="tip" v-if="showTip">
       请上传
@@ -68,8 +85,11 @@
 
 <script>
 import { getAccessToken } from "@/utils/auth";
-
+import draggable from 'vuedraggable'
 export default {
+  components: {
+            draggable,
+        },
   props: {
     value: [String, Object, Array],
     // 图片数量限制
@@ -151,7 +171,21 @@ export default {
     },
   },
   methods: {
-    // 删除图片
+    start(e) {  
+      console.log(this.fileList,e); // 可选：打印当前 fileList 顺序
+    },
+    end(e) {
+      this.$emit("input", this.listToString(this.fileList));
+    },
+    // 放大
+    handlePictureCardPreviewFileDetail(file) {
+      this.dialogImageUrl = file.url;
+      this.previewDialogVisible = true;
+    },
+    // 删除
+    handleRemoveFileDetail(index) {
+      this.fileList.splice(index, 1);
+    },    // 删除图片
     handleRemove(file, fileList) {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
       if (findex > -1) {
diff --git a/src/views/cjy/columninfo/ColumnInfoForm.vue b/src/views/cjy/columninfo/ColumnInfoForm.vue
index 5f864f1..5b42170 100644
--- a/src/views/cjy/columninfo/ColumnInfoForm.vue
+++ b/src/views/cjy/columninfo/ColumnInfoForm.vue
@@ -21,6 +21,9 @@
               :value="dict.value" />
           </el-select>
         </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="formData.sort" :min="1" :max="999999" placeholder="请输入排序" />
+        </el-form-item>
         <el-form-item label="标题" prop="title">
           <el-input v-model="formData.title" placeholder="请输入标题" />
         </el-form-item>
@@ -90,6 +93,7 @@
           logo: undefined,
           image: undefined,
           content: undefined,
+          sort: undefined,
         },
         // 表单校验
         formRules: {
@@ -163,6 +167,7 @@
           logo: undefined,
           image: undefined,
           content: undefined,
+          sort: undefined,
         };
         this.resetForm("formRef");
       }
diff --git a/yarn.lock b/yarn.lock
index 744f114..e678d71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10603,9 +10603,9 @@ vue@2.7.14:
     "@vue/compiler-sfc" "2.7.14"
     csstype "^3.1.0"
 
-vuedraggable@2.24.3:
+vuedraggable@^2.24.3:
   version "2.24.3"
-  resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz"
+  resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
   integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
   dependencies:
     sortablejs "1.10.2"