style: 优化

src/components/ElUploadFile.vue

@@ -1,33 +1,21 @@
 <template>
     <div class="upload-box">
-        <div :class="sortable && 'upload-box__sortable'">
-            <ul v-if="sortable" ref="sortableRef" class="sortable">
-                <li v-for="(item, idx) in imgList" :key="item.uid" class="sortable--item">
-                    <img :src="item.url" />
-                    <span class="sortable--item-hover">
-                        <el-icon class="sortable--item-icon" name="ZoomIn" @click="handlePreview(item)" />
-                        <el-icon class="sortable--item-icon" name="Delete" @click="handleRemove(idx)" />
-                    </span>
-                </li>
-            </ul>
-            <el-upload
-                v-bind="props"
-                action="none"
-                :before-upload="handleBeforeUpload"
-                :class="{ max: imgList.length === props.limit, 'sortable--submit': sortable }"
-                :file-list="imgList"
-                :http-request="handleUpload"
-                list-type="text"
-                :on-exceed="handleExceed"
-                :show-file-list="!sortable"
-            >
-                <el-button type="primary">
-                    <el-icon name="Plus" style="top: 0" />
-                    <span>上传文件</span>
-                </el-button>
-            </el-upload>
-        </div>
-
+        <el-upload
+            v-bind="props"
+            action="none"
+            :before-upload="handleBeforeUpload"
+            :class="{ max: imgList.length === props.limit, 'sortable--submit': sortable }"
+            :file-list="imgList"
+            :http-request="handleUpload"
+            list-type="text"
+            :on-exceed="handleExceed"
+            :show-file-list="!sortable"
+        >
+            <el-button type="primary">
+                <el-icon name="Plus" style="top: 0" />
+                <span>上传文件</span>
+            </el-button>
+        </el-upload>
         <div class="el-upload__tip">支持小于 {{ fmtSize }} 的 文件</div>
     </div>
 </template>
@@ -35,16 +23,11 @@
     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',
@@ -110,9 +93,6 @@
         },
         { deep: true }
     );
-    const handleRemove = (idx) => {
-        imgList.value.splice(idx, 1);
-    };
     const handleExceed = (list) => {
         console.info('[upload] exceed', list);
         ElMessage.error('超出最大上传数量');
@@ -144,80 +124,11 @@
         }
         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 {
-        :deep(.el-upload) {
-            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;
-                }
-            }
+    .upload-box {
+        :deep(.el-upload-list__item-name) {
+            padding-right: 20px;
         }
     }
 </style>

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

@@ -107,6 +107,7 @@
                     detail: [{ required: true, message: '商品详情不能为空' }],
                     virtualProductModifyDTOList: [
                         {
+                            required: true,
                             validator(rule, value, cb) {
                                 if (!state.form.fileList.length && !state.form.autoSend) {
                                     cb('自动发货内容不能为空');

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

@@ -69,7 +69,7 @@
                 </el-table-column>
                 <el-table-column align="center" header-align="center" label="改后库存" prop="stockAfter" width="160px">
                     <template #default="{ row }">
-                        {{ row.id ? stockAfter : row.stock }}
+                        {{ row.id ? row.stockAfter : row.stock }}
                     </template>
                 </el-table-column>
                 <el-table-column