yanghao
/
yunshengtai-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
xwb 5 years ago
parent
52f6b038d0
commit
359029c673
1 changed files with 295 additions and 289 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 584
      src/components/material/index.vue

584
src/components/material/index.vue
Unescape 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
})
})
// 宽度
height: {
type: Number,
default() {
return 150
}
}
},
data() {
return {
headers: {
Authorization: getToken()
},
materialgroupDelete(materialgroupObj) {
const that = this
this.$confirm('是否确认删除该分组？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
materialgroupDel(materialgroupObj.id)
.then(function() {
that.$delete(that.materialgroupList, materialgroupObj.index)
})
})
dialogVisible: false,
url: '',
listDialogVisible: false,
materialgroupList: [],
materialgroupObjId: '',
materialgroupObj: {},
materialgroupLoading: false,
tableData: [],
resultNumber: 0,
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 12, // 每页显示多少条
ascs: [], // 升序字段
descs: 'create_time'// 降序字段
},
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(() => {
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: '全部分组'
})
},
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
this.materialgroupList = materialgroupList
this.tabClick({
index: 0
})
},
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)
})
},
materialgroupDelete(materialgroupObj) {
const that = this
this.$confirm('是否确认删除该分组？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function() {
materialgroupDel(materialgroupObj.id)
.then(function() {
that.$delete(that.materialgroupList, materialgroupObj.index)
})
}).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)
})
},
materialUrl(item) {
const that = this
this.$prompt('素材链接', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: item.url
}).then(({ value }) => {
}).catch(() => {
}).catch(() => {
})
},
materialDel(item) {
const that = this
this.$confirm('是否确认删除该素材？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
materialgroupAdd() {
const that = this
this.$prompt('请输入分组名', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
materialgroupAdd({
name: value
}).then(function() {
delObj(item.id)
.then(function() {
that.getPage(that.page)
})
that.materialgroupPage()
})
},
handleCommand(command) {
const that = this
const s = command.split('-')
}).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: s[0],
groupId: s[1]
id: item.id,
name: value
}).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() {
}).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)
})
},
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!')
this.resultNumber = 0
}
return isPic && isLt2M
},
sureUrls() {
this.urls.forEach(item => {
this.$set(this.value, this.value.length, item)
})
this.listDialogVisible = false
})
},
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>

Write Preview
Loading…
Cancel
Save