feat(cjy): 为栏目信息表单添加排序功能并优化图片上传组件

- 在 ColumnInfoForm.vue 中添加排序字段，使用 el-input-number 组件
- 更新 ImageUpload 组件，添加图片预览和删除功能，并使用 vuedraggable 实现图片拖拽排序
- 在 package.json 中更新 vuedraggable 依赖版本

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"
   },

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) {

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");
       }

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"