cxc/yshopb2c-qd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#I1FWLV bug:修复图片素材库批量上传多张，只会成功1-2张。

Browse Source
This commit is contained in:
xwb
2020-04-29 16:39:39 +08:00
parent 52f6b038d0
commit 359029c673
1 changed files with 310 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
src/components/material/index.vue
View File

@ -145,319 +145,325 @@
</template>
<script>
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup'
import { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
name: 'MaterialList',
props: {
// 素材数据
value: {
type: Array,
default() {
return []
}
},
// 素材类型
type: {
type: String
},
// 素材限制数量，默认5个
num: {
type: Number,
default() {
return 5
}
},
// 宽度
width: {
type: Number,
default() {
return 150
}
},
// 宽度
height: {
type: Number,
default() {
return 150
}
export default {
name: 'MaterialList',
props: {
// 素材数据
value: {
type: Array,
default() {
return []
}
},
data() {
return {
headers: {
Authorization: getToken()
},
dialogVisible: false,
url: '',
listDialogVisible: false,
materialgroupList: [],
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 12, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time'// 降序字段
},
tableLoading: false,
groupId: null,
urls: []
// 素材类型
type: {
type: String
},
// 素材限制数量，默认5个
num: {
type: Number,
default() {
return 5
}
},
computed: {
...mapGetters([
'uploadApi'
])
// 宽度
width: {
type: Number,
default() {
return 150
}
},
methods: {
moveMaterial(index, type) {
if (type == 'up') {
const tempOption = this.value[index - 1]
this.$set(this.value, index - 1, this.value[index])
this.$set(this.value, index, tempOption)
}
if (type == 'down') {
const tempOption = this.value[index + 1]
this.$set(this.value, index + 1, this.value[index])
this.$set(this.value, index, tempOption)
}
},
zoomMaterial(index) {
this.dialogVisible = true
this.url = this.value[index]
},
deleteMaterial(index) {
const that = this
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
that.value.splice(index, 1)
that.urls = []
})
},
toSeleteMaterial() {
this.listDialogVisible = true
if (this.tableData.length <= 0) {
this.materialgroupPage()
}
},
materialgroupPage() {
this.materialgroupLoading = true
materialgroupPage({
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 100, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time'// 降序字段
}).then(response => {
this.materialgroupLoading = false
const materialgroupList = response.content
materialgroupList.unshift({
id: '-1',
name: '全部分组'
})
this.materialgroupList = materialgroupList
this.tabClick({
index: 0
})
})
},
materialgroupDelete(materialgroupObj) {
const that = this
this.$confirm('是否确认删除该分组？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
materialgroupDel(materialgroupObj.id)
.then(function() {
that.$delete(that.materialgroupList, materialgroupObj.index)
})
})
},
materialgroupEdit(materialgroupObj) {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: materialgroupObj.name
}).then(({ value }) => {
materialgroupEdit({
id: materialgroupObj.id,
name: value
}).then(function() {
materialgroupObj.name = value
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
})
}).catch(() => {
})
},
materialgroupAdd() {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function() {
that.materialgroupPage()
})
}).catch(() => {
})
},
tabClick(tab, event) {
this.urls = []
const index = Number(tab.index)
const materialgroupObj = this.materialgroupList[index]
materialgroupObj.index = index
this.materialgroupObj = materialgroupObj
this.materialgroupObjId = materialgroupObj.id
this.page.currentPage = 1
this.page.total = 0
if (materialgroupObj.id != '-1') {
this.groupId = materialgroupObj.id
} else {
this.groupId = null
}
this.getPage(this.page)
},
getPage(page, params) {
this.tableLoading = true
getPage(Object.assign({
page: page.currentPage - 1,
size: page.pageSize,
descs: this.page.descs,
ascs: this.page.ascs,
sort: 'createTime,desc'
}, {
groupId: this.groupId
})).then(response => {
const tableData = response.content
this.page.total = response.totalElements
this.page.currentPage = page.currentPage
this.page.pageSize = page.pageSize
this.tableData = tableData
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizeChange(val) {
console.log(val)
this.page.currentPage = 1
this.page.pageSize = val
this.getPage(this.page)
},
pageChange(val) {
console.log(val)
this.page.currentPage = val
// this.page.pageSize = val
this.getPage(this.page)
},
materialRename(item) {
const that = this
this.$prompt('请输入素材名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.name
}).then(({ value }) => {
putObj({
id: item.id,
name: value
}).then(function() {
that.getPage(that.page)
})
}).catch(() => {
})
},
materialUrl(item) {
const that = this
this.$prompt('素材链接', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.url
}).then(({ value }) => {
}).catch(() => {
})
},
materialDel(item) {
const that = this
this.$confirm('是否确认删除该素材？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
delObj(item.id)
.then(function() {
that.getPage(that.page)
})
})
},
handleCommand(command) {
const that = this
const s = command.split('-')
putObj({
id: s[0],
groupId: s[1]
}).then(function() {
that.getPage(that.page)
})
},
handleProgress(event, file, fileList) {
// let uploadProgress = file.percentage.toFixed(0)
// this.uploadProgress = uploadProgress
},
handleSuccess(response, file, fileList) {
const that = this
this.uploadProgress = 0
addObj({
type: '1',
groupId: this.groupId != '-1' ? this.groupId : null,
name: file.name,
url: response.link
}).then(function() {
that.getPage(that.page)
})
},
beforeUpload(file) {
const isPic =
file.type === 'image/jpeg' ||
file.type === 'image/png' ||
file.type === 'image/gif' ||
file.type === 'image/jpg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isPic) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
return false
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isPic && isLt2M
},
sureUrls() {
this.urls.forEach(item => {
this.$set(this.value, this.value.length, item)
})
this.listDialogVisible = false
// 宽度
height: {
type: Number,
default() {
return 150
}
}
},
data() {
return {
headers: {
Authorization: getToken()
},
dialogVisible: false,
url: '',
listDialogVisible: false,
materialgroupList: [],
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
resultNumber: 0,
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 12, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time'// 降序字段
},
tableLoading: false,
groupId: null,
urls: []
}
},
computed: {
...mapGetters([
'uploadApi'
])
},
methods: {
moveMaterial(index, type) {
if (type == 'up') {
const tempOption = this.value[index - 1]
this.$set(this.value, index - 1, this.value[index])
this.$set(this.value, index, tempOption)
}
if (type == 'down') {
const tempOption = this.value[index + 1]
this.$set(this.value, index + 1, this.value[index])
this.$set(this.value, index, tempOption)
}
},
zoomMaterial(index) {
this.dialogVisible = true
this.url = this.value[index]
},
deleteMaterial(index) {
const that = this
this.$confirm('是否确认删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
that.value.splice(index, 1)
that.urls = []
})
},
toSeleteMaterial() {
this.listDialogVisible = true
if (this.tableData.length <= 0) {
this.materialgroupPage()
}
},
materialgroupPage() {
this.materialgroupLoading = true
materialgroupPage({
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 100, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time'// 降序字段
}).then(response => {
this.materialgroupLoading = false
const materialgroupList = response.content
materialgroupList.unshift({
id: '-1',
name: '全部分组'
})
this.materialgroupList = materialgroupList
this.tabClick({
index: 0
})
})
},
materialgroupDelete(materialgroupObj) {
const that = this
this.$confirm('是否确认删除该分组？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
materialgroupDel(materialgroupObj.id)
.then(function() {
that.$delete(that.materialgroupList, materialgroupObj.index)
})
})
},
materialgroupEdit(materialgroupObj) {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: materialgroupObj.name
}).then(({ value }) => {
materialgroupEdit({
id: materialgroupObj.id,
name: value
}).then(function() {
materialgroupObj.name = value
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj)
})
}).catch(() => {
})
},
materialgroupAdd() {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function() {
that.materialgroupPage()
})
}).catch(() => {
})
},
tabClick(tab, event) {
this.urls = []
const index = Number(tab.index)
const materialgroupObj = this.materialgroupList[index]
materialgroupObj.index = index
this.materialgroupObj = materialgroupObj
this.materialgroupObjId = materialgroupObj.id
this.page.currentPage = 1
this.page.total = 0
if (materialgroupObj.id != '-1') {
this.groupId = materialgroupObj.id
} else {
this.groupId = null
}
this.getPage(this.page)
},
getPage(page, params) {
this.tableLoading = true
getPage(Object.assign({
page: page.currentPage - 1,
size: page.pageSize,
descs: this.page.descs,
ascs: this.page.ascs,
sort: 'createTime,desc'
}, {
groupId: this.groupId
})).then(response => {
const tableData = response.content
this.page.total = response.totalElements
this.page.currentPage = page.currentPage
this.page.pageSize = page.pageSize
this.tableData = tableData
this.tableLoading = false
}).catch(() => {
this.tableLoading = false
})
},
sizeChange(val) {
console.log(val)
this.page.currentPage = 1
this.page.pageSize = val
this.getPage(this.page)
},
pageChange(val) {
console.log(val)
this.page.currentPage = val
// this.page.pageSize = val
this.getPage(this.page)
},
materialRename(item) {
const that = this
this.$prompt('请输入素材名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.name
}).then(({ value }) => {
putObj({
id: item.id,
name: value
}).then(function() {
that.getPage(that.page)
})
}).catch(() => {
})
},
materialUrl(item) {
const that = this
this.$prompt('素材链接', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.url
}).then(({ value }) => {
}).catch(() => {
})
},
materialDel(item) {
const that = this
this.$confirm('是否确认删除该素材？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
delObj(item.id)
.then(function() {
that.getPage(that.page)
})
})
},
handleCommand(command) {
const that = this
const s = command.split('-')
putObj({
id: s[0],
groupId: s[1]
}).then(function() {
that.getPage(that.page)
})
},
handleProgress(event, file, fileList) {
console.log(event)
// let uploadProgress = file.percentage.toFixed(0)
// this.uploadProgress = uploadProgress
},
handleSuccess(response, file, fileList) {
const that = this
this.uploadProgress = 0
addObj({
type: '1',
groupId: this.groupId != '-1' ? this.groupId : null,
name: file.name,
url: response.link
}).then(() => {
this.resultNumber++
if (fileList.length === this.resultNumber) {
that.getPage(that.page)
this.resultNumber = 0
}
})
},
beforeUpload(file) {
const isPic =
file.type === 'image/jpeg' ||
file.type === 'image/png' ||
file.type === 'image/gif' ||
file.type === 'image/jpg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isPic) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
return false
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isPic && isLt2M
},
sureUrls() {
this.urls.forEach(item => {
this.$set(this.value, this.value.length, item)
})
this.listDialogVisible = false
}
}
}
</script>
<style lang="scss" scoped>