bug fixes

0a6d469d · 王鹏飞 · 6a6fb4a8 · 0a6d469d · 0a6d469d · 0a6d469d
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
        "vue-loader": "^15.9.7",
        "vue-router": "^3.5.1",
        "vue-template-compiler": "^2.6.12",
+        "vuedraggable": "^2.24.3",
        "vuex": "^3.6.2"
      },
      "devDependencies": {
@@ -11071,6 +11072,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
    "node_modules/source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -12624,6 +12630,14 @@
      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
    },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
    "node_modules/vuex": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -22545,6 +22559,11 @@
        "is-plain-obj": "^1.0.0"
      }
    },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -23797,6 +23816,14 @@
      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
      "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
    },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
    "vuex": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
    "vue-loader": "^15.9.7",
    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
+    "vuedraggable": "^2.24.3",
    "vuex": "^3.6.2"
  },
  "engines": {

--- a/src/components/base/upload.vue
+++ b/src/components/base/upload.vue
 <template>
  <div class="app-upload">
+    <draggable
+      v-model="fileList"
+      group="people"
+      class="file-list el-upload-list--picture-card"
+      @end="onEnd"
+      v-if="showFileList"
+    >
+      <div class="file-item" v-for="(file, index) in fileList" :key="index">
+        <!-- <el-image style="width: 100%; height: 100%" :src="file.url" :preview-src-list="fileList.map(item => item.url)"> -->
+        <img :src="file.url" />
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="handlePreview(file)">
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span v-if="!$attrs.disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </div>
+    </draggable>
    <el-upload
      action="https://webapp-pub.oss-cn-beijing.aliyuncs.com"
      type="drag"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
-      :on-preview="handlePreview"
-      :on-remove="handleRemove"
+      :show-file-list="false"
      :on-exceed="handleExceed"
      :data="data"
-      :file-list="fileList"
      v-bind="$attrs"
      v-on="$listeners"
+      style="display: inline"
    >
      <slot>
        <i class="el-icon-plus"></i>
@@ -25,18 +44,22 @@
 <script>
 import { getSignature } from '@/api/base'
 import md5 from 'blueimp-md5'
+import draggable from 'vuedraggable'
 export default {
  name: 'AppUpload',
+  components: { draggable },
  props: {
    value: { type: [String, Array] },
-    prefix: { type: String, default: 'upload/shop-admin/' }
+    prefix: { type: String, default: 'upload/shop-admin/' },
+    showFileList: { type: Boolean, default: true }
  },
  data() {
    return {
      data: {}, // 请求参数
      fileList: [], // 文件列表
      dialogVisible: false,
-      previewFile: {}
+      previewFile: {},
+      message: null
    }
  },
  watch: {
@@ -65,6 +88,12 @@ export default {
  },
  methods: {
    beforeUpload(file) {
+      const limit = this.$attrs.limit
+      if (limit && this.fileList.length >= limit) {
+        this.message && this.message.close()
+        this.message = this.$message({ type: 'error', message: '文件超出个数限制' })
+        return false
+      }
      const fileName = file.name
      const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
      return new Promise((resolve, reject) => {
@@ -84,6 +113,10 @@ export default {
    handleSuccess(response, file) {
      let value = null
      if (this.isMultiple) {
+        const limit = this.$attrs.limit
+        if (limit && this.fileList.length >= limit) {
+          return
+        }
        this.fileList.push({ name: file.name, url: file.raw.url })
        value = this.fileList
      } else {
@@ -94,19 +127,22 @@ export default {
      this.dispatch('ElFormItem', 'el.form.change', value)
    },
    // 删除
-    handleRemove(file, fileList) {
-      const value = this.isMultiple ? fileList : ''
-      this.$emit('input', value)
-      this.dispatch('ElFormItem', 'el.form.change', value)
+    handleRemove(index) {
+      this.fileList.splice(index, 1)
+      this.$emit('input', this.fileList)
+      this.dispatch('ElFormItem', 'el.form.change', this.fileList)
    },
    // 预览
    handlePreview(file) {
      this.previewFile = file
      this.dialogVisible = true
    },
-    handleExceed(file, fileList) {
+    handleExceed() {
      this.$message({ type: 'error', message: '文件超出个数限制' })
    },
+    onEnd() {
+      this.$emit('input', this.fileList)
+    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName
@@ -132,4 +168,27 @@ export default {
 .el-upload-list__item {
  transition: none !important;
 }
+.file-list {
+  margin: 0;
+  display: inline;
+  vertical-align: top;
+}
+.file-item {
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #c0ccda;
+  border-radius: 6px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 148px;
+  height: 148px;
+  margin: 0 8px 8px 0;
+  display: inline-block;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 </style>
--- a/src/components/goods/sku.vue
+++ b/src/components/goods/sku.vue
@@ -10,7 +10,7 @@
      :key="index"
    ></sku-group>
    <el-button type="text" @click="addSku">
-      <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
+      <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加规格项目
    </el-button>
  </div>
 </template>