图库上传bug
This commit is contained in:
@@ -36,7 +36,7 @@ export default {
|
|||||||
dialogImageUrl: '',
|
dialogImageUrl: '',
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
fileList: [],
|
fileList: [],
|
||||||
files: [],
|
// files: [],
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': getToken()
|
'Authorization': getToken()
|
||||||
}
|
}
|
||||||
@@ -45,7 +45,13 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
handleSuccess(response, file, fileList) {
|
handleSuccess(response, file, fileList) {
|
||||||
// console.log('上传成功', response)
|
// 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)
|
this.$emit('success', response.data)
|
||||||
},
|
},
|
||||||
// 监听上传失败
|
// 监听上传失败
|
||||||
@@ -69,6 +75,9 @@ export default {
|
|||||||
},
|
},
|
||||||
handleRemove(file, fileList) {
|
handleRemove(file, fileList) {
|
||||||
let arr = fileList.map(item => item.url)
|
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)
|
this.$emit('remove', arr)
|
||||||
},
|
},
|
||||||
clearFiles() {
|
clearFiles() {
|
||||||
@@ -77,3 +86,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style>
|
||||||
|
.el-upload-list__item {
|
||||||
|
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -552,15 +552,20 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
successEvent(d) {
|
successEvent(d) {
|
||||||
// 删除重复数据
|
if (this.$refs.uploadImg.fileList.length < 9) {
|
||||||
// let index = this.files.findIndex(ele => ele.name == file.name)
|
d.forEach(item => {
|
||||||
// this.files.splice(index, 1);
|
item.uid = item.id
|
||||||
d.forEach(item => {
|
item.url = item.url
|
||||||
item.uid = item.id
|
this.form.images.push(item.url);
|
||||||
item.url = item.url
|
})
|
||||||
this.form.images.push(item.url);
|
this.$refs.uploadImg.fileList.push(...d)
|
||||||
})
|
console.log(this.$refs.uploadImg.fileList, '调试1')
|
||||||
this.$refs.uploadImg.fileList.push(...d)
|
} else {
|
||||||
|
this.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: '最多选择9张图片'
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
priceFormat(item, key) {
|
priceFormat(item, key) {
|
||||||
const messageheight = 48;
|
const messageheight = 48;
|
||||||
@@ -740,6 +745,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 删除突破按
|
// 删除突破按
|
||||||
uploadRemove(arr) {
|
uploadRemove(arr) {
|
||||||
|
|
||||||
this.form.images = arr;
|
this.form.images = arr;
|
||||||
},
|
},
|
||||||
// 选择规格属性
|
// 选择规格属性
|
||||||
|
|||||||
@@ -4,14 +4,23 @@
|
|||||||
<el-select v-model="value" placeholder="请选择" @change="changeEvent">
|
<el-select v-model="value" placeholder="请选择" @change="changeEvent">
|
||||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
|
<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: left">{{ item.name }}</span>
|
||||||
<span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
|
<template v-if="item.id != '681'">
|
||||||
@click="deleteType(item.id)"></i></span>
|
<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-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
|
<el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
|
||||||
<el-button type="primary" @click="showUpload = 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>
|
</imageComponent>
|
||||||
|
<el-pagination layout="prev, pager, next" :total="total" :page-size="20"
|
||||||
|
@current-change="handleCurrentChange">
|
||||||
|
</el-pagination>
|
||||||
<span slot="footer" class="dialog-footer">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
<el-button type="primary" @click="sumbit">确 定</el-button>
|
<el-button type="primary" @click="sumbit">确 定</el-button>
|
||||||
@@ -27,7 +36,7 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 新增图片 -->
|
<!-- 新增图片 -->
|
||||||
<template v-if="showUpload">
|
<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">
|
@close="showUpload = false">
|
||||||
<el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
|
<el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
|
||||||
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
|
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
|
||||||
@@ -69,6 +78,7 @@ export default {
|
|||||||
typedata: '',
|
typedata: '',
|
||||||
showUpload: false,
|
showUpload: false,
|
||||||
page: 1,
|
page: 1,
|
||||||
|
total: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -79,6 +89,10 @@ export default {
|
|||||||
this.page = 1
|
this.page = 1
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
handleCurrentChange(i) {
|
||||||
|
this.page = i
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
// 删除类型
|
// 删除类型
|
||||||
deleteType(id) {
|
deleteType(id) {
|
||||||
this.$confirm('删除该类型, 是否继续?', '提示', {
|
this.$confirm('删除该类型, 是否继续?', '提示', {
|
||||||
@@ -93,10 +107,10 @@ export default {
|
|||||||
this.getType()
|
this.getType()
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: '删除成功!'
|
message: res.msg
|
||||||
});
|
});
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
|
this.$message.error(res.msg);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 刷新列表数据
|
// 刷新列表数据
|
||||||
@@ -143,10 +157,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getlists() {
|
|
||||||
this.page++
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
sumbit() {
|
sumbit() {
|
||||||
this.dialogVisible = false
|
this.dialogVisible = false
|
||||||
this.$emit('successEvent', this.selectImage)
|
this.$emit('successEvent', this.selectImage)
|
||||||
@@ -163,11 +174,8 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
const res = await getcommonpicture(obj);
|
const res = await getcommonpicture(obj);
|
||||||
if (this.page == 1) {
|
this.dataImages = res.data
|
||||||
this.dataImages = res.data
|
this.total = res.count
|
||||||
} else {
|
|
||||||
this.dataImages.push(...res.data)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
async getType(valueIndex) {
|
async getType(valueIndex) {
|
||||||
const res = await getcommonCategor({
|
const res = await getcommonCategor({
|
||||||
|
|||||||
@@ -1,11 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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' : '']"
|
<li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
|
||||||
@click="clickEvent(item)">
|
@click="clickEvent(item)">
|
||||||
<img :src="item.url" style="width: 100px;height: 100px;" alt="">
|
<img :src="item.url" style="width: 100px;height: 100px;" alt="">
|
||||||
<el-popconfirm title="确定删除吗?" class="show" @confirm="deleteEvent(item.id)">
|
<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>
|
</el-popconfirm>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -25,9 +31,7 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
load() {
|
|
||||||
this.$emit('getlists')
|
|
||||||
},
|
|
||||||
clickEvent(d) {
|
clickEvent(d) {
|
||||||
this.selectList = d
|
this.selectList = d
|
||||||
this.$emit('onSelectImage', d)
|
this.$emit('onSelectImage', d)
|
||||||
@@ -51,6 +55,7 @@ ul,
|
|||||||
li {
|
li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show {
|
.show {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
@@ -68,6 +73,7 @@ li {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ulStyle {
|
.ulStyle {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
Reference in New Issue
Block a user