You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
465 lines
14 KiB
465 lines
14 KiB
<template> |
|
<div v-if="type == 'image'"> |
|
<ul class="el-upload-list el-upload-list--picture-card" v-for="(item,index) in value" :key="index"> |
|
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'"> |
|
<div> |
|
<img :src="item" alt="" class="el-upload-list__item-thumbnail"> |
|
<span class="el-upload-list__item-actions"> |
|
<span class="el-upload-list__item-preview" v-if="index != 0" @click="moveMaterial(index,'up')"> |
|
<i class="el-icon-back"></i> |
|
</span> |
|
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)"> |
|
<i class="el-icon-view"></i> |
|
</span> |
|
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)"> |
|
<i class="el-icon-delete"></i> |
|
</span> |
|
<span class="el-upload-list__item-preview" v-if="index != value.length-1" @click="moveMaterial(index,'down')"> |
|
<i class="el-icon-right"></i> |
|
</span> |
|
</span> |
|
</div> |
|
</li> |
|
</ul> |
|
<div tabindex="0" class="el-upload el-upload--picture-card" v-if="num > value.length" @click="toSeleteMaterial" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'"> |
|
<i class="el-icon-plus"></i> |
|
</div> |
|
|
|
<el-dialog |
|
append-to-body |
|
:visible.sync="dialogVisible" |
|
width="35%"> |
|
<img :src="url" alt="" style="width: 100%"> |
|
</el-dialog> |
|
|
|
<el-dialog |
|
title="图片素材库" |
|
append-to-body |
|
:visible.sync="listDialogVisible" |
|
width="70%"> |
|
<el-container> |
|
<el-aside width="unset"> |
|
<div style="margin-bottom: 10px"> |
|
<el-button |
|
class="el-icon-plus" |
|
size="small" |
|
@click="materialgroupAdd()"> |
|
添加分组 |
|
</el-button> |
|
</div> |
|
<el-tabs tab-position="left" v-model="materialgroupObjId" v-loading="materialgroupLoading" @tab-click="tabClick"> |
|
<el-tab-pane v-for="(item,index) in materialgroupList" |
|
:key="index" |
|
:name="item.id"> |
|
<span slot="label"> {{item.name}}</span> |
|
</el-tab-pane> |
|
</el-tabs> |
|
</el-aside> |
|
<el-main> |
|
<el-card> |
|
<div slot="header"> |
|
<el-row> |
|
<el-col :span="12"> |
|
<span>{{materialgroupObj.name}}</span> |
|
<span v-if="materialgroupObj.id != '-1'"> |
|
<el-button size="small" type="text" class="el-icon-edit" style="margin-left: 10px;" @click="materialgroupEdit(materialgroupObj)">重命名</el-button> |
|
<el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button> |
|
</span> |
|
</el-col> |
|
<el-col :span="12" style="text-align: right;"> |
|
<el-upload |
|
:action="uploadApi" |
|
:headers="headers" |
|
:file-list="[]" |
|
:on-progress="handleProgress" |
|
:before-upload="beforeUpload" |
|
:on-success="handleSuccess"> |
|
<el-button size="small" type="primary">点击上传</el-button> |
|
</el-upload> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
<div v-loading="tableLoading"> |
|
<el-alert |
|
v-if="tableData.length <= 0" |
|
title="暂无数据" |
|
type="info" |
|
:closable="false" |
|
center |
|
show-icon> |
|
</el-alert> |
|
<el-row :gutter="5"> |
|
<el-checkbox-group v-model="urls" :max="num - value.length"> |
|
<el-col :span="4" v-for="(item,index) in tableData" :key="index"> |
|
<el-card :body-style="{ padding: '5px' }"> |
|
<el-image |
|
style="width: 100%;height: 100px" |
|
:src="item.url" |
|
fit="contain" |
|
:preview-src-list="[item.url]"></el-image> |
|
<div> |
|
<el-checkbox class="material-name" :label="item.url"> |
|
选择 |
|
</el-checkbox> |
|
<el-row> |
|
<el-col :span="24" class="col-do"> |
|
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button> |
|
</el-col> |
|
</el-row> |
|
|
|
</div> |
|
</el-card> |
|
</el-col> |
|
</el-checkbox-group> |
|
</el-row> |
|
<el-pagination |
|
@size-change="sizeChange" |
|
@current-change="pageChange" |
|
:current-page.sync="page.currentPage" |
|
:page-sizes="[12, 24]" |
|
:page-size="page.pageSize" |
|
layout="total, sizes, prev, pager, next, jumper" |
|
:total="page.total" |
|
class="pagination"> |
|
</el-pagination> |
|
</div> |
|
</el-card> |
|
</el-main> |
|
</el-container> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="listDialogVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="sureUrls">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
|
|
</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' |
|
|
|
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 |
|
} |
|
} |
|
}, |
|
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: [] |
|
} |
|
}, |
|
computed: { |
|
...mapGetters([ |
|
'uploadApi' |
|
]) |
|
}, |
|
methods:{ |
|
moveMaterial(index,type){ |
|
if(type == 'up'){ |
|
let tempOption = this.value[index - 1] |
|
this.$set(this.value, index - 1, this.value[index]) |
|
this.$set(this.value, index, tempOption) |
|
} |
|
if(type == 'down'){ |
|
let 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){ |
|
let 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 |
|
let materialgroupList = response.content |
|
materialgroupList.unshift({ |
|
id: '-1', |
|
name: '全部分组' |
|
}) |
|
this.materialgroupList = materialgroupList |
|
this.tabClick({ |
|
index: 0 |
|
}) |
|
}) |
|
}, |
|
materialgroupDelete(materialgroupObj){ |
|
let that = this |
|
this.$confirm('是否确认删除该分组？', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(function() { |
|
materialgroupDel(materialgroupObj.id) |
|
.then(function() { |
|
that.$delete(that.materialgroupList, materialgroupObj.index) |
|
}) |
|
}) |
|
}, |
|
materialgroupEdit(materialgroupObj){ |
|
let 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(){ |
|
let that = this |
|
this.$prompt('请输入分组名', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
}).then(({ value }) => { |
|
materialgroupAdd({ |
|
name: value |
|
}).then(function() { |
|
that.materialgroupPage() |
|
}) |
|
}).catch(() => { |
|
|
|
}) |
|
}, |
|
tabClick(tab,event){ |
|
this.urls = [] |
|
let index = Number(tab.index) |
|
let 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, |
|
}, { |
|
groupId: this.groupId |
|
})).then(response => { |
|
let 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){ |
|
let 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){ |
|
let that = this |
|
this.$prompt('素材链接', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
inputValue: item.url, |
|
}).then(({ value }) => { |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
}, |
|
materialDel(item){ |
|
let that = this |
|
this.$confirm('是否确认删除该素材？', '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning' |
|
}).then(function() { |
|
delObj(item.id) |
|
.then(function() { |
|
that.getPage(that.page) |
|
}) |
|
}) |
|
}, |
|
handleCommand(command) { |
|
let that = this |
|
let 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){ |
|
let 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 |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.material-name{ |
|
padding: 8px 0px; |
|
} |
|
.col-do{ |
|
text-align: center; |
|
} |
|
.button-do{ |
|
padding: unset!important; |
|
font-size: 12px; |
|
} |
|
</style> |
|
|
|
|