fix:增加上传拖拽排序功能

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 dist
 *.local
+.history
 src/.eslintrc.json
 src/components.d.ts
 src/auto-imports.d.ts

src/components/ElUploadImage.vue

@@ -1,18 +1,30 @@
 <template>
     <div class="upload-box">
-        <el-upload
-            v-bind="props"
-            action=""
-            :before-upload="handleBeforeUpload"
-            :class="{ max: imgList.length === props.limit }"
-            :file-list="imgList"
-            :http-request="handleUpload"
-            list-type="picture-card"
-            :on-exceed="handleExceed"
-            :on-preview="handlePreview"
-        >
-            <el-icon name="Plus" />
-        </el-upload>
+        <div :class="sortable && 'upload-box__sortable'">
+            <ul class="sortable" ref="sortableRef" v-if="sortable">
+                <li class="sortable--item" v-for="(item, idx) in imgList" :key="item.uid">
+                    <img :src="item.url" />
+                    <span class="sortable--item-hover">
+                        <el-icon class="sortable--item-icon" name="ZoomIn" @click="handlePreview(item)"></el-icon>
+                        <el-icon class="sortable--item-icon" name="Delete" @click="handleRemove(idx)"></el-icon>
+                    </span>
+                </li>
+            </ul>
+            <el-upload
+                v-bind="props"
+                :before-upload="handleBeforeUpload"
+                :class="{ max: imgList.length === props.limit, 'sortable--submit': sortable }"
+                :file-list="imgList"
+                :show-file-list="!sortable"
+                :list-type="!sortable && 'picture-card'"
+                :http-request="handleUpload"
+                :on-exceed="handleExceed"
+                :on-preview="handlePreview"
+            >
+                <el-icon name="Plus" />
+            </el-upload>
+        </div>
+
         <el-image
             v-if="preview"
             ref="refsPreview"
@@ -29,11 +41,16 @@
     import { upload } from '@/api/file';
     import { ElMessage } from '@/plugins/element-plus';
     import 'element-plus/es/components/image/style/css';
+    import Sortable from 'sortablejs';
     const props = defineProps({
         configId: {
             type: String,
             required: true,
         },
+        sortable: {
+            type: Boolean,
+            default: false,
+        },
         serviceName: {
             type: String,
             default: 'mall-product',
@@ -105,6 +122,9 @@
         console.info('[upload] preview', file);
         preview.value = file.url;
     };
+    const handleRemove = (idx) => {
+        imgList.value.splice(idx, 1);
+    };
     const handleExceed = (list) => {
         console.info('[upload] exceed', list);
         ElMessage.error('超出最大上传数量');
@@ -136,6 +156,25 @@
         }
         return res + units[unit];
     });
+    const sortableRef = ref(null);
+    const sortableInit = () => {
+        new Sortable(sortableRef.value, {
+            animation: 150,
+            // swapThreshold: 1,
+            // fallbackOnBody: true,
+            onUpdate({ newIndex, oldIndex }) {
+                const newData = imgList.value[newIndex];
+                const oldData = imgList.value[oldIndex];
+                imgList.value[newIndex] = oldData;
+                imgList.value[oldIndex] = newData;
+            },
+        });
+    };
+    onMounted(() => {
+        if (props.sortable) {
+            sortableInit();
+        }
+    });
 </script>
 <style lang="less" scoped>
     .max {
@@ -143,4 +182,64 @@
             display: none;
         }
     }
+    .upload-box__sortable {
+        display: flex;
+    }
+    .sortable {
+        --img-size: 148px;
+        display: inline-flex;
+        flex-wrap: wrap;
+        margin: 0;
+        &--item {
+            overflow: hidden;
+            background-color: var(--el-fill-color-blank);
+            border: 1px solid #c0ccda;
+            border-radius: 6px;
+            box-sizing: border-box;
+            width: var(--img-size);
+            height: var(--img-size);
+            margin: 0 8px 8px 0;
+            padding: 0;
+            display: inline-flex;
+            position: relative;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            &-icon {
+                margin: 0 10px;
+                font-size: 20px;
+            }
+            &-hover {
+                background: rgba(0, 0, 0, 0.5);
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                color: #fff;
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                display: flex;
+                cursor: pointer;
+            }
+            &:hover {
+                .sortable--item-hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    ::v-deep .el-upload {
+        width: 148px;
+        height: 148px;
+        border: 1px dashed #c0ccda;
+        &:hover {
+            border-color: var(--el-color-primary-light-1);
+            color: var(--el-color-primary-light-1);
+        }
+    }
 </style>

src/views/sales/product/form/step1.vue

@@ -34,7 +34,7 @@
                     <el-input-number v-show="form.postage === 0" v-model="form.remoteAreaPostage" :min="0" />
                 </el-form-item>
                 <el-form-item label="商品图片" prop="pictureList">
-                    <el-upload-image v-model="form.pictureList" config-id="product" :limit="5" />
+                    <el-upload-image v-model="form.pictureList" config-id="product" :limit="5" sortable multiple />
                 </el-form-item>
                 <el-form-item label="商品详情" prop="detail">
                     <el-editor v-model="form.detail" />