feat: 图片支持拖动

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "license": "GPL",
   "scripts": {
-    "dev": "cross-env BUILD_ENV=test node build/dev-server.js",
+    "dev": "cross-env BUILD_ENV=dev node build/dev-server.js",
     "local": "cross-env BUILD_ENV=development node build/dev-server.js",
     "build": "node build/build.js",
     "build:dev": "cross-env BUILD_ENV=dev node build/build.js",

src/views/goods/common/data.js

-const imgList = [
-  {
-    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040888.jpg',
-    id: 1706164241654,
-  },
-  {
-    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040885.jpg',
-    id: 1706164241695,
-  },
-  {
-    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
-    id: 1706164253118,
-  },
-  {
-    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
-    id: 17061642531112,
-  },
-  {
-    url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
-    id: 1706164253111231231,
-  },
-];
-
-export default imgList;

src/views/goods/common/upload-img.vue

-<template>
-  <div class="base-updata">
-    <div class="img-sort">
-      <ul class="el-upload-list el-upload-list--picture-card">
-        <draggable
-          v-model="imgList"
-          :animation="1000"
-          :sort="true"
-          v-if="showDraggable"
-        >
-          <li
-            class="el-upload-list__item is-success animated"
-            v-for="(item, index) in imgList"
-            :key="index"
-            style="margin-right: 10px"
-          >
-            <img
-              :src="item.url"
-              alt=""
-              class="el-upload-list__item is-success"
-            />
-            <!--   <i class="el-icon-close"></i> -->
-            <span class="el-upload-list__item-actions">
-              <!-- 预览 -->
-              <span
-                class="el-upload-list__item-preview"
-                @click="handlePictureCardPreview(item)"
-              >
-                <i class="el-icon-zoom-in"></i>
-              </span>
-              <!-- 删除 -->
-              <span
-                class="el-upload-list__item-delete"
-                @click="handleRemove(index)"
-                v-if="!disabled"
-              >
-                <i class="el-icon-delete"></i>
-              </span>
-            </span>
-          </li>
-        </draggable>
-        <template v-else>
-          <li
-            class="el-upload-list__item is-success animated"
-            v-for="(item, index) in imgList"
-            :key="index"
-            style="margin-right: 10px"
-          >
-            <img
-              :src="item.url"
-              alt=""
-              class="el-upload-list__item is-success"
-            />
-            <i class="el-icon-close"></i>
-            <span class="el-upload-list__item-actions">
-              <!-- 预览 -->
-              <span
-                class="el-upload-list__item-preview"
-                @click="handlePictureCardPreview(item)"
-              >
-                <i class="el-icon-zoom-in"></i>
-              </span>
-              <!-- 删除 -->
-              <span
-                class="el-upload-list__item-delete"
-                @click="handleRemove(index)"
-                v-if="!disabled"
-              >
-                <i class="el-icon-delete"></i>
-              </span>
-            </span>
-          </li>
-        </template>
-      </ul>
-      <el-upload
-        style="display: inline-block"
-        ref="uploadFilemain"
-        :show-file-list="false"
-        :file-list="imgList"
-        list-type="picture-card"
-        :before-upload="beforeUpload"
-        :http-request="(file, fileList) => requestImgHttps(file)"
-        :on-preview="handlePictureCardPreview"
-        :limit="limit"
-        :disabled="disabled"
-        :class="imgList.length == limit ? 'mf' : ''"
-      >
-        <!--            :disabled="optType == 'detail'" -->
-        <i class="el-icon-plus"></i>
-      </el-upload>
-      <span style="position: relative; top: 116px; left: 10px"
-        >{{ imgList.length }}
-        <span v-if="limit != 100">{{ "/" + limit }}</span>
-        <span v-if="showDraggable">（拖拽排序）</span></span
-      >
-    </div>
-    <!-- 图片预览 -->
-    <el-dialog v-model:visible="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import draggable from "vuedraggable";
-
-export default {
-  name: "base-updata",
-  components: { draggable },
-  props: {
-    //图片列表
-    imgList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    //是否显示拖拽
-    showDraggable: {
-      type: Boolean,
-      default: () => {
-        return false;
-      },
-    },
-    //上传图片署名
-    imgTypeName: {
-      type: String,
-      Request: true,
-    },
-    //上传图片下标
-    imgTypeIdex: {
-      type: Number,
-      Request: true,
-    },
-    //图片限制
-    limit: {
-      type: Number,
-      default: () => {
-        return 100;
-      },
-    },
-    //图片禁止
-    disabled: {
-      type: Boolean,
-      default: () => {
-        return false;
-      },
-    },
-  },
-  data() {
-    return {
-      dialogVisible: false, //图片预览
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    //图片上传验证
-    beforeUpload(file) {
-      return new Promise((resolve, reject) => {
-        this.changeLimt(file).then((res) => {
-          file.isFlag = res;
-          if (file.isFlag) {
-            return resolve(true);
-          } else {
-            return reject(false);
-          }
-        });
-      });
-    },
-    changeLimt(file) {
-      const _this = this;
-      const isSize = new Promise(function (resolve, reject) {
-        const _URL = window.URL || window.webkitURL;
-        const img = new Image();
-        img.src = _URL.createObjectURL(file);
-        img.onload = function () {
-          let e_width = img.width >= 600 && img.width <= 1200;
-          let e_height = img.height >= 600 && img.height <= 1200;
-          if (
-            file.type == "image/png" ||
-            file.type == "image/jpg" ||
-            file.type == "image/jpeg"
-          ) {
-            const valid = e_width && e_height;
-            if (valid) {
-              return resolve();
-            } else {
-              return reject();
-            }
-          } else {
-            return reject();
-          }
-        };
-      }).then(
-        () => {
-          return true;
-        },
-        () => {
-          _this.$message.warning({
-            message:
-              "图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
-            btn: false,
-          });
-          return false;
-        }
-      );
-
-      return isSize;
-    },
-    //预览
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    //删除
-    handleRemove(index) {
-      this.$emit("handleRemove", this.imgTypeName, index);
-    },
-    /**
-     * 上传图片 请求
-     * @param {string} file 图片文件
-     * @param {string} imgTypeName 图片署名
-     * @param {string} imgTypeIdex 图片位置下标
-     * @return {Function} 抛出函数requestImgHttps
-     */
-    requestImgHttps(file) {
-      this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
-    },
-  },
-};
-</script>
-<style lang='scss' scoped>
-.img-sort {
-  display: flex;
-  flex-wrap: wrap;
-}
-.mf {
-  ::v-deep .el-upload--picture-card {
-    display: none !important;
-  }
-}
-</style>
-
-
-

src/views/goods/create-good-new.vue

@@ -591,8 +591,6 @@ import { closeLoading, openLoading, signFigures } from "@/utils/utils";
 import { originForm, originForm1, originForm3 } from './common/forms';
 import { originRules, originRules1, originRules3 } from './common/rules';
 import draggable from "vuedraggable";
-import uploadImg from './common/upload-img.vue';
-import imgList from './common/data';
 
   let vm = null;
 
@@ -600,12 +598,10 @@ import imgList from './common/data';
     components: {
       BreadCrumb,
       Cropper,
-      draggable,
-      uploadImg
+      draggable
     },
     data(){
       return{
-        imgList: imgList,
         shoImgDialog: false, // 查看展示
         medicalCategoryList: [], // 药品分类
         isShowGoodsMsg: false,