Browse Source

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

master
xwb 5 years ago
parent
commit
359029c673
  1. 584
      src/components/material/index.vue

584
src/components/material/index.vue

@ -145,319 +145,325 @@
</template> </template>
<script> <script>
import { getPage as materialgroupPage, addObj as materialgroupAdd, delObj as materialgroupDel, putObj as materialgroupEdit } from '@/api/tools/materialgroup' 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 { getPage, addObj, delObj, putObj } from '@/api/tools/material'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'MaterialList', name: 'MaterialList',
props: { props: {
// //
value: { value: {
type: Array, type: Array,
default() { default() {
return [] return []
}
},
//
type: {
type: String
},
// 5
num: {
type: Number,
default() {
return 5
}
},
//
width: {
type: Number,
default() {
return 150
}
},
//
height: {
type: Number,
default() {
return 150
}
} }
}, },
data() { //
return { type: {
headers: { type: String
Authorization: getToken() },
}, // 5
dialogVisible: false, num: {
url: '', type: Number,
listDialogVisible: false, default() {
materialgroupList: [], return 5
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
page: {
total: 0, //
currentPage: 1, //
pageSize: 12, //
ascs: [], //
descs: 'create_time'//
},
tableLoading: false,
groupId: null,
urls: []
} }
}, },
computed: { //
...mapGetters([ width: {
'uploadApi' type: Number,
]) default() {
return 150
}
}, },
methods: { //
moveMaterial(index, type) { height: {
if (type == 'up') { type: Number,
const tempOption = this.value[index - 1] default() {
this.$set(this.value, index - 1, this.value[index]) return 150
this.$set(this.value, index, tempOption) }
} }
if (type == 'down') { },
const tempOption = this.value[index + 1] data() {
this.$set(this.value, index + 1, this.value[index]) return {
this.$set(this.value, index, tempOption) headers: {
} Authorization: getToken()
},
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) { dialogVisible: false,
const that = this url: '',
this.$confirm('是否确认删除该分组?', '提示', { listDialogVisible: false,
confirmButtonText: '确定', materialgroupList: [],
cancelButtonText: '取消', materialgroupObjId: '',
type: 'warning' materialgroupObj: {},
}).then(function() { materialgroupLoading: false,
materialgroupDel(materialgroupObj.id) tableData: [],
.then(function() { resultNumber: 0,
that.$delete(that.materialgroupList, materialgroupObj.index) page: {
}) total: 0, //
}) currentPage: 1, //
pageSize: 12, //
ascs: [], //
descs: 'create_time'//
}, },
materialgroupEdit(materialgroupObj) { tableLoading: false,
const that = this groupId: null,
this.$prompt('请输入分组名', '提示', { urls: []
confirmButtonText: '确定', }
cancelButtonText: '取消', },
inputValue: materialgroupObj.name computed: {
}).then(({ value }) => { ...mapGetters([
materialgroupEdit({ 'uploadApi'
id: materialgroupObj.id, ])
name: value },
}).then(function() { methods: {
materialgroupObj.name = value moveMaterial(index, type) {
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj) if (type == 'up') {
}) const tempOption = this.value[index - 1]
}).catch(() => { this.$set(this.value, index - 1, this.value[index])
this.$set(this.value, index, tempOption)
}) }
}, if (type == 'down') {
materialgroupAdd() { const tempOption = this.value[index + 1]
const that = this this.$set(this.value, index + 1, this.value[index])
this.$prompt('请输入分组名', '提示', { this.$set(this.value, index, tempOption)
confirmButtonText: '确定', }
cancelButtonText: '取消' },
}).then(({ value }) => { zoomMaterial(index) {
materialgroupAdd({ this.dialogVisible = true
name: value this.url = this.value[index]
}).then(function() { },
that.materialgroupPage() deleteMaterial(index) {
}) const that = this
}).catch(() => { 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
tabClick(tab, event) { this.tabClick({
this.urls = [] index: 0
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) materialgroupDelete(materialgroupObj) {
this.page.currentPage = 1 const that = this
this.page.pageSize = val this.$confirm('是否确认删除该分组?', '提示', {
this.getPage(this.page) confirmButtonText: '确定',
}, cancelButtonText: '取消',
pageChange(val) { type: 'warning'
console.log(val) }).then(function() {
this.page.currentPage = val materialgroupDel(materialgroupObj.id)
// this.page.pageSize = val .then(function() {
this.getPage(this.page) that.$delete(that.materialgroupList, materialgroupObj.index)
},
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(() => { })
},
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(() => {
materialUrl(item) {
const that = this
this.$prompt('素材链接', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.url
}).then(({ value }) => {
}).catch(() => { })
},
}) materialgroupAdd() {
}, const that = this
materialDel(item) { this.$prompt('请输入分组名', '提示', {
const that = this confirmButtonText: '确定',
this.$confirm('是否确认删除该素材?', '提示', { cancelButtonText: '取消'
confirmButtonText: '确定', }).then(({ value }) => {
cancelButtonText: '取消', materialgroupAdd({
type: 'warning' name: value
}).then(function() { }).then(function() {
delObj(item.id) that.materialgroupPage()
.then(function() {
that.getPage(that.page)
})
}) })
}, }).catch(() => {
handleCommand(command) {
const that = this })
const s = command.split('-') },
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({ putObj({
id: s[0], id: item.id,
groupId: s[1] name: value
}).then(function() { }).then(function() {
that.getPage(that.page) that.getPage(that.page)
}) })
}, }).catch(() => {
handleProgress(event, file, fileList) {
// let uploadProgress = file.percentage.toFixed(0) })
// this.uploadProgress = uploadProgress },
}, materialUrl(item) {
handleSuccess(response, file, fileList) { const that = this
const that = this this.$prompt('素材链接', '提示', {
this.uploadProgress = 0 confirmButtonText: '确定',
addObj({ cancelButtonText: '取消',
type: '1', inputValue: item.url
groupId: this.groupId != '-1' ? this.groupId : null, }).then(({ value }) => {
name: file.name,
url: response.link }).catch(() => {
}).then(function() {
})
},
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) 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() { beforeUpload(file) {
this.urls.forEach(item => { const isPic =
this.$set(this.value, this.value.length, item) file.type === 'image/jpeg' ||
}) file.type === 'image/png' ||
this.listDialogVisible = false 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Loading…
Cancel
Save