|
|
|
@ -1,34 +1,35 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div v-if="type == 'image'"> |
|
|
|
<div v-if="type == 'image'"> |
|
|
|
<ul class="el-upload-list el-upload-list--picture-card" v-for="(item,index) in value" :key="index"> |
|
|
|
<ul v-for="(item,index) in value" :key="index" class="el-upload-list el-upload-list--picture-card"> |
|
|
|
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'"> |
|
|
|
<li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<img :src="item" alt="" class="el-upload-list__item-thumbnail"> |
|
|
|
<img :src="item" alt="" class="el-upload-list__item-thumbnail"> |
|
|
|
<span class="el-upload-list__item-actions"> |
|
|
|
<span class="el-upload-list__item-actions"> |
|
|
|
<span class="el-upload-list__item-preview" v-if="index != 0" @click="moveMaterial(index,'up')"> |
|
|
|
<span v-if="index != 0" class="el-upload-list__item-preview" @click="moveMaterial(index,'up')"> |
|
|
|
<i class="el-icon-back"></i> |
|
|
|
<i class="el-icon-back" /> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)"> |
|
|
|
<span class="el-upload-list__item-preview" @click="zoomMaterial(index)"> |
|
|
|
<i class="el-icon-view"></i> |
|
|
|
<i class="el-icon-view" /> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)"> |
|
|
|
<span class="el-upload-list__item-delete" @click="deleteMaterial(index)"> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
<i class="el-icon-delete" /> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span class="el-upload-list__item-preview" v-if="index != value.length-1" @click="moveMaterial(index,'down')"> |
|
|
|
<span v-if="index != value.length-1" class="el-upload-list__item-preview" @click="moveMaterial(index,'down')"> |
|
|
|
<i class="el-icon-right"></i> |
|
|
|
<i class="el-icon-right" /> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</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;'"> |
|
|
|
<div v-if="num > value.length" tabindex="0" class="el-upload el-upload--picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'" @click="toSeleteMaterial"> |
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
<i class="el-icon-plus" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
<el-dialog |
|
|
|
append-to-body |
|
|
|
append-to-body |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="35%"> |
|
|
|
width="35%" |
|
|
|
|
|
|
|
> |
|
|
|
<img :src="url" alt="" style="width: 100%"> |
|
|
|
<img :src="url" alt="" style="width: 100%"> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
@ -36,22 +37,26 @@ |
|
|
|
title="图片素材库" |
|
|
|
title="图片素材库" |
|
|
|
append-to-body |
|
|
|
append-to-body |
|
|
|
:visible.sync="listDialogVisible" |
|
|
|
:visible.sync="listDialogVisible" |
|
|
|
width="70%"> |
|
|
|
width="70%" |
|
|
|
|
|
|
|
> |
|
|
|
<el-container> |
|
|
|
<el-container> |
|
|
|
<el-aside width="unset"> |
|
|
|
<el-aside width="unset"> |
|
|
|
<div style="margin-bottom: 10px"> |
|
|
|
<div style="margin-bottom: 10px"> |
|
|
|
<el-button |
|
|
|
<el-button |
|
|
|
class="el-icon-plus" |
|
|
|
class="el-icon-plus" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
@click="materialgroupAdd()"> |
|
|
|
@click="materialgroupAdd()" |
|
|
|
|
|
|
|
> |
|
|
|
添加分组 |
|
|
|
添加分组 |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-tabs tab-position="left" v-model="materialgroupObjId" v-loading="materialgroupLoading" @tab-click="tabClick"> |
|
|
|
<el-tabs v-model="materialgroupObjId" v-loading="materialgroupLoading" tab-position="left" @tab-click="tabClick"> |
|
|
|
<el-tab-pane v-for="(item,index) in materialgroupList" |
|
|
|
<el-tab-pane |
|
|
|
:key="index" |
|
|
|
v-for="(item,index) in materialgroupList" |
|
|
|
:name="item.id"> |
|
|
|
:key="index" |
|
|
|
<span slot="label"> {{item.name}}</span> |
|
|
|
:name="item.id" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<span slot="label"> {{ item.name }}</span> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</el-tabs> |
|
|
|
</el-aside> |
|
|
|
</el-aside> |
|
|
|
@ -60,7 +65,7 @@ |
|
|
|
<div slot="header"> |
|
|
|
<div slot="header"> |
|
|
|
<el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-col :span="12"> |
|
|
|
<span>{{materialgroupObj.name}}</span> |
|
|
|
<span>{{ materialgroupObj.name }}</span> |
|
|
|
<span v-if="materialgroupObj.id != '-1'"> |
|
|
|
<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-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> |
|
|
|
<el-button size="small" type="text" class="el-icon-delete" style="margin-left: 10px;color: red" @click="materialgroupDelete(materialgroupObj)">删除</el-button> |
|
|
|
@ -73,7 +78,8 @@ |
|
|
|
:file-list="[]" |
|
|
|
:file-list="[]" |
|
|
|
:on-progress="handleProgress" |
|
|
|
:on-progress="handleProgress" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
:before-upload="beforeUpload" |
|
|
|
:on-success="handleSuccess"> |
|
|
|
:on-success="handleSuccess" |
|
|
|
|
|
|
|
> |
|
|
|
<el-button size="small" type="primary">点击上传</el-button> |
|
|
|
<el-button size="small" type="primary">点击上传</el-button> |
|
|
|
</el-upload> |
|
|
|
</el-upload> |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
@ -86,42 +92,43 @@ |
|
|
|
type="info" |
|
|
|
type="info" |
|
|
|
:closable="false" |
|
|
|
:closable="false" |
|
|
|
center |
|
|
|
center |
|
|
|
show-icon> |
|
|
|
show-icon |
|
|
|
</el-alert> |
|
|
|
/> |
|
|
|
<el-row :gutter="5"> |
|
|
|
<el-row :gutter="5"> |
|
|
|
<el-checkbox-group v-model="urls" :max="num - value.length"> |
|
|
|
<el-checkbox-group v-model="urls" :max="num - value.length"> |
|
|
|
<el-col :span="4" v-for="(item,index) in tableData" :key="index"> |
|
|
|
<el-col v-for="(item,index) in tableData" :key="index" :span="4"> |
|
|
|
<el-card :body-style="{ padding: '5px' }"> |
|
|
|
<el-card :body-style="{ padding: '5px' }"> |
|
|
|
<el-image |
|
|
|
<el-image |
|
|
|
style="width: 100%;height: 100px" |
|
|
|
style="width: 100%;height: 100px" |
|
|
|
:src="item.url" |
|
|
|
:src="item.url" |
|
|
|
fit="contain" |
|
|
|
fit="contain" |
|
|
|
:preview-src-list="[item.url]"></el-image> |
|
|
|
:preview-src-list="[item.url]" |
|
|
|
<div> |
|
|
|
/> |
|
|
|
<el-checkbox class="material-name" :label="item.url"> |
|
|
|
<div> |
|
|
|
选择 |
|
|
|
<el-checkbox class="material-name" :label="item.url"> |
|
|
|
</el-checkbox> |
|
|
|
选择 |
|
|
|
<el-row> |
|
|
|
</el-checkbox> |
|
|
|
<el-col :span="24" class="col-do"> |
|
|
|
<el-row> |
|
|
|
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button> |
|
|
|
<el-col :span="24" class="col-do"> |
|
|
|
</el-col> |
|
|
|
<el-button type="text" size="medium" @click="materialDel(item)">删除</el-button> |
|
|
|
</el-row> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-col> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-pagination |
|
|
|
<el-pagination |
|
|
|
@size-change="sizeChange" |
|
|
|
|
|
|
|
@current-change="pageChange" |
|
|
|
|
|
|
|
:current-page.sync="page.currentPage" |
|
|
|
:current-page.sync="page.currentPage" |
|
|
|
:page-sizes="[12, 24]" |
|
|
|
:page-sizes="[12, 24]" |
|
|
|
:page-size="page.pageSize" |
|
|
|
:page-size="page.pageSize" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
:total="page.total" |
|
|
|
:total="page.total" |
|
|
|
class="pagination"> |
|
|
|
class="pagination" |
|
|
|
</el-pagination> |
|
|
|
@size-change="sizeChange" |
|
|
|
|
|
|
|
@current-change="pageChange" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
</el-main> |
|
|
|
</el-main> |
|
|
|
@ -136,318 +143,318 @@ |
|
|
|
</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, |
|
|
|
let 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'){ |
|
|
|
}, |
|
|
|
let 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){ |
|
|
|
|
|
|
|
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){ |
|
|
|
dialogVisible: false, |
|
|
|
let that = this |
|
|
|
url: '', |
|
|
|
this.$prompt('请输入分组名', '提示', { |
|
|
|
listDialogVisible: false, |
|
|
|
confirmButtonText: '确定', |
|
|
|
materialgroupList: [], |
|
|
|
cancelButtonText: '取消', |
|
|
|
materialgroupObjId: '', |
|
|
|
inputValue: materialgroupObj.name, |
|
|
|
materialgroupObj: {}, |
|
|
|
}).then(({ value }) => { |
|
|
|
materialgroupLoading: false, |
|
|
|
materialgroupEdit({ |
|
|
|
tableData: [], |
|
|
|
id: materialgroupObj.id, |
|
|
|
page: { |
|
|
|
name: value |
|
|
|
total: 0, // 总页数 |
|
|
|
}).then(function() { |
|
|
|
currentPage: 1, // 当前页数 |
|
|
|
materialgroupObj.name = value |
|
|
|
pageSize: 12, // 每页显示多少条 |
|
|
|
that.$set(that.materialgroupList, materialgroupObj.index, materialgroupObj) |
|
|
|
ascs: [], // 升序字段 |
|
|
|
}) |
|
|
|
descs: 'create_time'// 降序字段 |
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
materialgroupAdd(){ |
|
|
|
tableLoading: false, |
|
|
|
let that = this |
|
|
|
groupId: null, |
|
|
|
this.$prompt('请输入分组名', '提示', { |
|
|
|
urls: [] |
|
|
|
confirmButtonText: '确定', |
|
|
|
} |
|
|
|
cancelButtonText: '取消', |
|
|
|
}, |
|
|
|
}).then(({ value }) => { |
|
|
|
computed: { |
|
|
|
materialgroupAdd({ |
|
|
|
...mapGetters([ |
|
|
|
name: value |
|
|
|
'uploadApi' |
|
|
|
}).then(function() { |
|
|
|
]) |
|
|
|
that.materialgroupPage() |
|
|
|
}, |
|
|
|
}) |
|
|
|
methods: { |
|
|
|
}).catch(() => { |
|
|
|
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 |
|
|
|
tabClick(tab,event){ |
|
|
|
this.tabClick({ |
|
|
|
this.urls = [] |
|
|
|
index: 0 |
|
|
|
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) |
|
|
|
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){ |
|
|
|
|
|
|
|
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(() => { |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
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){ |
|
|
|
|
|
|
|
let that = this |
|
|
|
|
|
|
|
this.$prompt('素材链接', '提示', { |
|
|
|
|
|
|
|
confirmButtonText: '确定', |
|
|
|
|
|
|
|
cancelButtonText: '取消', |
|
|
|
|
|
|
|
inputValue: item.url, |
|
|
|
|
|
|
|
}).then(({ value }) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
materialDel(item){ |
|
|
|
materialgroupAdd() { |
|
|
|
let that = this |
|
|
|
const that = this |
|
|
|
this.$confirm('是否确认删除该素材？', '提示', { |
|
|
|
this.$prompt('请输入分组名', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
cancelButtonText: '取消' |
|
|
|
type: 'warning' |
|
|
|
}).then(({ value }) => { |
|
|
|
|
|
|
|
materialgroupAdd({ |
|
|
|
|
|
|
|
name: value |
|
|
|
}).then(function() { |
|
|
|
}).then(function() { |
|
|
|
delObj(item.id) |
|
|
|
that.materialgroupPage() |
|
|
|
.then(function() { |
|
|
|
|
|
|
|
that.getPage(that.page) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}).catch(() => { |
|
|
|
handleCommand(command) { |
|
|
|
|
|
|
|
let that = this |
|
|
|
}) |
|
|
|
let 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 |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
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 |
|
|
|
let 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() { |
|
|
|
|
|
|
|
that.getPage(that.page) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
materialDel(item) { |
|
|
|
beforeUpload(file){ |
|
|
|
const that = this |
|
|
|
const isPic = |
|
|
|
this.$confirm('是否确认删除该素材？', '提示', { |
|
|
|
file.type === "image/jpeg" || |
|
|
|
confirmButtonText: '确定', |
|
|
|
file.type === "image/png" || |
|
|
|
cancelButtonText: '取消', |
|
|
|
file.type === "image/gif" || |
|
|
|
type: 'warning' |
|
|
|
file.type === "image/jpg" |
|
|
|
}).then(function() { |
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2 |
|
|
|
delObj(item.id) |
|
|
|
if (!isPic) { |
|
|
|
.then(function() { |
|
|
|
this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!") |
|
|
|
that.getPage(that.page) |
|
|
|
return false |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
if (!isLt2M) { |
|
|
|
}, |
|
|
|
this.$message.error('上传头像图片大小不能超过 2MB!') |
|
|
|
handleCommand(command) { |
|
|
|
} |
|
|
|
const that = this |
|
|
|
return isPic && isLt2M |
|
|
|
const s = command.split('-') |
|
|
|
}, |
|
|
|
putObj({ |
|
|
|
sureUrls(){ |
|
|
|
id: s[0], |
|
|
|
this.urls.forEach(item => { |
|
|
|
groupId: s[1] |
|
|
|
this.$set(this.value,this.value.length, item) |
|
|
|
}).then(function() { |
|
|
|
}) |
|
|
|
that.getPage(that.page) |
|
|
|
this.listDialogVisible=false |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
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 |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
hupeng
5 years ago