图库上传bug

2024-08-07 11:44:05 +08:00
parent 5377a76365
commit 7f54c59092
4 changed files with 68 additions and 32 deletions
--- a/src/components/uploadImg/index.vue
+++ b/src/components/uploadImg/index.vue
@@ -36,7 +36,7 @@ export default {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
-            files: [],
+            // files: [],
            headers: {
                'Authorization': getToken()
            }
@@ -45,7 +45,13 @@ export default {
    methods: {
        handleSuccess(response, file, fileList) {
            // console.log('上传成功', response)
-            this.files = response.data
+            setTimeout(() => {
+                this.fileList.push({
+                    url: response.data[0],
+                    id: response.data.id
+                })
+            }, 100);
+            // this.files = response.data
            this.$emit('success', response.data)
        },
        // 监听上传失败
@@ -69,6 +75,9 @@ export default {
        },
        handleRemove(file, fileList) {
            let arr = fileList.map(item => item.url)
+            // 删除数据
+            let index = this.fileList.findIndex(ele => ele.url == file.url)
+            this.fileList.splice(index, 1);
            this.$emit('remove', arr)
        },
        clearFiles() {
@@ -76,4 +85,11 @@ export default {
        }
    }
 }
-</script>
+</script>
+<style>
+.el-upload-list__item {
+
+    transition: none;
+
+}
+</style>
--- a/src/views/product/add_shop.vue
+++ b/src/views/product/add_shop.vue
@@ -552,15 +552,20 @@ export default {
  },
  methods: {
    successEvent(d) {
-      // 删除重复数据
-      // let index = this.files.findIndex(ele => ele.name == file.name)
-      // this.files.splice(index, 1);
-      d.forEach(item => {
-        item.uid = item.id
-        item.url = item.url
-        this.form.images.push(item.url);
-      })
-      this.$refs.uploadImg.fileList.push(...d)
+      if (this.$refs.uploadImg.fileList.length < 9) {
+        d.forEach(item => {
+          item.uid = item.id
+          item.url = item.url
+          this.form.images.push(item.url);
+        })
+        this.$refs.uploadImg.fileList.push(...d)
+        console.log(this.$refs.uploadImg.fileList, '调试1')
+      } else {
+        this.$notify.error({
+          title: '错误',
+          message: '最多选择9张图片'
+        });
+      }
    },
    priceFormat(item, key) {
      const messageheight = 48;
@@ -740,6 +745,7 @@ export default {
    },
    // 删除突破按
    uploadRemove(arr) {
+  
      this.form.images = arr;
    },
    // 选择规格属性
--- a/src/views/product/components/addImages.vue
+++ b/src/views/product/components/addImages.vue
@@ -4,14 +4,23 @@
            <el-select v-model="value" placeholder="请选择" @change="changeEvent">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
-                    <span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
-                            @click="deleteType(item.id)"></i></span>
+                    <template v-if="item.id != '681'">
+                        <template v-if="item.id != '682'">
+                            <template v-if="item.id != '699'">
+                                <span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
+                                        @click="deleteType(item.id)"></i></span>
+                            </template>
+                        </template>
+                    </template>
                </el-option>
            </el-select>
            <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
            <el-button type="primary" @click="showUpload = true">新增图片</el-button>
-            <imageComponent @onSelectImage="onSelectImage" @getList="getList" @getlists="getlists" :list='dataImages'>
+            <imageComponent @onSelectImage="onSelectImage" @getList="getList" :list='dataImages'>
            </imageComponent>
+            <el-pagination layout="prev, pager, next" :total="total" :page-size="20"
+                @current-change="handleCurrentChange">
+            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sumbit">确 定</el-button>
@@ -27,7 +36,7 @@
        </el-dialog>
        <!-- 新增图片 -->
        <template v-if="showUpload">
-            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
+            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
                @close="showUpload = false">
                <el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
                    :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
@@ -69,6 +78,7 @@ export default {
            typedata: '',
            showUpload: false,
            page: 1,
+            total: 0
        }
    },
    mounted() {
@@ -79,6 +89,10 @@ export default {
            this.page = 1
            this.getList()
        },
+        handleCurrentChange(i) {
+            this.page = i
+            this.getList()
+        },
        // 删除类型
        deleteType(id) {
            this.$confirm('删除该类型, 是否继续?', '提示', {
@@ -93,10 +107,10 @@ export default {
                this.getType()
                this.$message({
                    type: 'success',
-                    message: '删除成功!'
+                    message: res.msg
                });
            }).catch(() => {
-
+                this.$message.error(res.msg);
            });
        },
        // 刷新列表数据
@@ -143,10 +157,7 @@ export default {
                }
            }
        },
-        getlists() {
-            this.page++
-            this.getList()
-        },
+
        sumbit() {
            this.dialogVisible = false
            this.$emit('successEvent', this.selectImage)
@@ -163,11 +174,8 @@ export default {

            }
            const res = await getcommonpicture(obj);
-            if (this.page == 1) {
-                this.dataImages = res.data
-            } else {
-                this.dataImages.push(...res.data)
-            }
+            this.dataImages = res.data
+            this.total = res.count
        },
        async getType(valueIndex) {
            const res = await getcommonCategor({
--- a/src/views/product/components/imageComponent.vue
+++ b/src/views/product/components/imageComponent.vue
@@ -1,11 +1,17 @@
 <template>
    <div>
-        <ul class="ulStyle" v-infinite-scroll="load">
+        <ul class="ulStyle"  >
            <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
                @click="clickEvent(item)">
                <img :src="item.url" style="width: 100px;height: 100px;" alt="">
                <el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
-                    <i class="el-icon-error buttonstyle" slot="reference"></i>
+                    <template v-if="item.pid != '681'">
+                        <template v-if="item.pid != '682'">
+                            <template v-if="item.pid != '699'">
+                                <i class="el-icon-error buttonstyle" slot="reference"></i>
+                            </template>
+                        </template>
+                    </template>
                </el-popconfirm>
            </li>
        </ul>
@@ -25,9 +31,7 @@ export default {

    },
    methods: {
-        load() {
-            this.$emit('getlists')
-        },
+       
        clickEvent(d) {
            this.selectList = d
            this.$emit('onSelectImage', d)
@@ -51,6 +55,7 @@ ul,
 li {
    list-style: none;
 }
+
 .show {
    position: absolute;
    right: -10px;
@@ -68,6 +73,7 @@ li {
    background-color: #fff;
    font-size: 20px;
 }
+
 .ulStyle {
    display: flex;
    flex-wrap: wrap;