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.
697 lines
23 KiB
697 lines
23 KiB
<template>
|
|
<div>
|
|
<div v-if="isToFolder" class="material_crumbs">
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item><a href="/content/material">素材库</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="material_content">
|
|
<!-- 上传 / 创建文件夹 -->
|
|
<div class="material_item cont_upload">
|
|
<Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" />
|
|
<el-button v-if="!isToFolder && tabType == null" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
|
|
<el-button v-if="isToFolder" class="return_btn" round type="primary"><a href="/content/material">返回</a></el-button>
|
|
</div>
|
|
<!-- 文件夹list -->
|
|
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
|
|
<div class="icon_bg">
|
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wenjianjia" />
|
|
</svg>
|
|
<img v-else :src="item.imgPath" />
|
|
</div>
|
|
<p class="file_name">{{ item.name }}</p>
|
|
<span v-if="folderChecked == index" class="checked_btn"></span>
|
|
</div>
|
|
<!-- 素材库list -->
|
|
<div v-for="(item, index) in materialList" :key="'list-'+index" :class="['material_item', 'item_cont', { 'item_multi': selectedListId.includes(item.material_id) }]" @click.stop="previewMaterial(item)">
|
|
<div v-if="item.img_path || item.material_type == 1" class="img_box">
|
|
<img :src="item.img_path" :onerror="defaultImg" alt />
|
|
</div>
|
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ item.deposit_url | getFileFormat }}</span>
|
|
<span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
|
|
</div>
|
|
<div class="file_name">{{ item.material_name }}</div>
|
|
<span v-if="isMultiSelected" class="checked_btn" @click.stop="selectedItem(item)"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 素材点击预览 -->
|
|
<div class="">
|
|
<el-dialog
|
|
title="预览"
|
|
:visible.sync="previewVisible"
|
|
:show-close="false"
|
|
>
|
|
<el-image v-if="previewType==0" :src="previewSrc" :onerror="defaultImg" fit="contain" />
|
|
<video v-if="previewType==1" :src="previewSrc" controls width="100%"></video>
|
|
<audio v-if="previewType==2" :src="previewSrc" controls></audio>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 创建文件夹layer / 编辑 -->
|
|
<div class="publish_layer">
|
|
<el-dialog :title="layerTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px">
|
|
<el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px">
|
|
<el-form-item
|
|
:label="labelTxt"
|
|
prop="name"
|
|
:rules="[
|
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
|
]"
|
|
>
|
|
<el-input v-model="folderForm.name" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item v-if="formatType != 0" label="封面">
|
|
<UploadCover ref="childUpload" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button v-if="!isEditMaterial" type="primary" round @click="submitForm('folderForm')">保 存</el-button>
|
|
<el-button v-else type="primary" round @click="saveMaterial">保 存</el-button>
|
|
<el-button round @click="resetForm()">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 多选操作 -->
|
|
<div v-if="selectedListId.length != 0 || folderChecked != -1" class="multi_handle">
|
|
<div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected">
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button>
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
|
|
<el-button type="button" class="mulit_btn" :disabled="selectedListId.length > 1" @click="editContent()">编辑</el-button>
|
|
<el-button type="button" class="mulit_btn" :disabled="selectedListId.length > 1" @click="downloadMaterial">下载</el-button>
|
|
<el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
|
|
</div>
|
|
<div v-else>
|
|
<el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button>
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 移动至layer -->
|
|
<div class="wjj_layer">
|
|
<el-dialog title="移动至" :close-on-click-modal="false" :show-close="false" :visible.sync="movingVisible" width="576px" height="384px">
|
|
<div class="wjj_list">
|
|
<div v-for="(item, index) in folderList" :key="index" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" @click="wjjSelected(item,index)">
|
|
<svg class="font-icon icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wenjianjia" />
|
|
</svg>
|
|
<p class="wjj_name">{{ item.name }}</p>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="moveFile">确定</el-button>
|
|
<el-button round @click="movingVisible=false">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial, moveMyMaterial } from '@/api/material/material'
|
|
import Upload from '@/views/components/upload'
|
|
import UploadCover from '@/views/components/upload_cover'
|
|
import { getSeconds, getFileFormat } from '@/utils/index.js'
|
|
export default {
|
|
name: 'Material',
|
|
components: { Upload, UploadCover },
|
|
filters: {
|
|
getSeconds(s) {
|
|
return getSeconds(s)
|
|
},
|
|
getFileFormat(s) {
|
|
return getFileFormat(s)
|
|
}
|
|
},
|
|
props: {
|
|
isMultiSelected: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
activeIndex: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isTheme: false,
|
|
orga_id: '133221333123111', // 机构ID
|
|
rootFolderId: null, // 根目录文件夹ID
|
|
thisFoldId: null, // 当前父文件夹ID
|
|
folderList: [], // 文件夹list
|
|
materialFolders: [], // 文件夹list
|
|
folderForm: { // form
|
|
fid: '',
|
|
id: '',
|
|
img_path: '',
|
|
name: '',
|
|
orga_id: ''
|
|
},
|
|
isEditFolder: false, // 是否编辑文件夹
|
|
mkdirVisible: false, // 新建编辑layer
|
|
folderChecked: -1, // 文件夹是否单击选中
|
|
materialList: [], // 素材库list
|
|
isEditMaterial: false, // 是否是编辑素材
|
|
formatType: null, // 上传素材类型 0 img 1 video 2 audio
|
|
materialId: null, // 编辑时需要参数 id
|
|
materialImgPath: '', // 素材封面
|
|
materialDuration: 0, // 时长
|
|
materialName: '', // 素材名称
|
|
uploadFileUrl: null, // 素材保存路径
|
|
selectedMaterial: [], // 素材选中
|
|
selectedListId: [], // 素材选中的material_id
|
|
selectInFolderid: [], // 素材选中的和文件关联表id -- in_folder_id
|
|
layerTitle: '创建文件夹', // 文件夹/素材编辑框title
|
|
labelTxt: '文件夹名称',
|
|
isToFolder: false, // 是否进入文件夹
|
|
currentFolder: '', // 当前进入的文件夹名
|
|
currentFolderId: null,
|
|
movingVisible: false,
|
|
uploadListData: [ // 上传列表
|
|
],
|
|
folderListChecked: -1,
|
|
tabType: null,
|
|
audioNum: 0,
|
|
imgNum: 0,
|
|
videoNum: 0,
|
|
previewVisible: false, // 预览
|
|
previewSrc: null,
|
|
previewType: null
|
|
}
|
|
},
|
|
computed: {
|
|
defaultImg() {
|
|
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
|
|
}
|
|
},
|
|
watch: {
|
|
isMultiSelected(newName, oldName) {
|
|
if (newName === false) {
|
|
this.selectedListId = []
|
|
}
|
|
},
|
|
activeIndex(newName, oldName) {
|
|
this.tabIndex = newName
|
|
this.$nextTick(() => {
|
|
switch (this.tabIndex) {
|
|
case '0':
|
|
this.$refs.uploadMaterial.isActiveType = null
|
|
break
|
|
case '1':
|
|
this.formatType = 1
|
|
this.$refs.uploadMaterial.isActiveType = 0
|
|
break
|
|
case '2':
|
|
this.formatType = 2
|
|
this.$refs.uploadMaterial.isActiveType = 1
|
|
break
|
|
case '3':
|
|
this.formatType = 2
|
|
this.$refs.uploadMaterial.isActiveType = 2
|
|
break
|
|
}
|
|
})
|
|
},
|
|
'$route.query.folderTag'(Val) {
|
|
// console.log(Val)
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.getMaterialList()
|
|
document.addEventListener('click', this.hiddenFolderActiveClick)
|
|
},
|
|
methods: {
|
|
// 素材下载
|
|
downloadMaterial() {
|
|
// console.log(this.selectedMaterial[0])
|
|
// const url = this.selectedMaterial[0].deposit_url.lastIndexOf('.')
|
|
// console.log(url)
|
|
},
|
|
// 素材单击预览
|
|
previewMaterial(item) {
|
|
this.previewVisible = true
|
|
this.folderChecked = -1
|
|
this.isEditFolder = false
|
|
switch (item.material_type) {
|
|
case '0':
|
|
this.previewType = 0
|
|
this.previewSrc = item.img_path
|
|
break
|
|
case '1':
|
|
this.previewType = 1
|
|
this.previewSrc = item.deposit_url
|
|
break
|
|
case '2':
|
|
this.previewType = 2
|
|
this.previewSrc = item.deposit_url
|
|
break
|
|
}
|
|
},
|
|
// 获取素材库list
|
|
getMaterialList() {
|
|
let params
|
|
if (this.$route.query.folderTag) {
|
|
this.isToFolder = true
|
|
this.currentFolder = localStorage.getItem('currentFolder')
|
|
this.currentFolderId = localStorage.getItem('currentFolderId')
|
|
params = {
|
|
'folder_id': this.currentFolderId,
|
|
'material_name': null,
|
|
'material_type': this.tabType,
|
|
'material_type_not': null,
|
|
'orga_id': this.orga_id
|
|
}
|
|
} else {
|
|
this.isToFolder = false
|
|
localStorage.removeItem('currentFolder')
|
|
localStorage.removeItem('currentFolderId')
|
|
params = {
|
|
'folder_id': null,
|
|
'material_name': null,
|
|
'material_type': this.tabType,
|
|
'material_type_not': null,
|
|
'orga_id': this.orga_id
|
|
}
|
|
}
|
|
getMaterialList(params).then(res => {
|
|
if (!this.$route.query.folderTag) {
|
|
localStorage.setItem('rootFolderId', res.data.thisFoldId)
|
|
}
|
|
this.materialFolders = res.data.materialFolders
|
|
this.materialList = res.data.pageThemeVO
|
|
this.audioNum = res.data.audioNum
|
|
this.imgNum = res.data.imgNum
|
|
this.videoNum = res.data.videoNum
|
|
// 创建文件夹获取data
|
|
this.thisFoldId = res.data.thisFoldId
|
|
})
|
|
},
|
|
// 新建 / 编辑 文件夹
|
|
handleMkdir(mkdirType) {
|
|
this.mkdirVisible = true
|
|
this.folderForm.fid = this.thisFoldId
|
|
this.folderForm.orga_id = this.orga_id
|
|
if (mkdirType === 0) {
|
|
this.$nextTick(() => {
|
|
this.$refs.childUpload.imageUrl = ''
|
|
this.folderForm.img_path = ''
|
|
this.folderForm.name = ''
|
|
})
|
|
delete this.folderForm.id
|
|
} else {
|
|
this.$nextTick(() => {
|
|
this.$refs.childUpload.imageUrl = this.folderForm.img_path
|
|
})
|
|
}
|
|
},
|
|
// 文件夹双击操作
|
|
floderDbClick(item, index) {
|
|
this.isEditMaterial = false
|
|
this.$router.replace(
|
|
{
|
|
path: '/content/material', query: { folderTag: 1 }
|
|
}
|
|
)
|
|
this.currentFolder = item.name
|
|
this.currentFolderId = item.id
|
|
localStorage.setItem('currentFolder', this.currentFolder)
|
|
localStorage.setItem('currentFolderId', this.currentFolderId)
|
|
this.getMaterialList()
|
|
this.selectedListId = []
|
|
this.folderChecked = -1
|
|
this.isEditFolder = false
|
|
},
|
|
// 点击其他区域选中的文件夹 去掉选中样式
|
|
hiddenFolderActiveClick() {
|
|
this.folderChecked = -1
|
|
this.isEditFolder = false
|
|
},
|
|
// 选择 编辑 文件夹
|
|
editFolder(item, index) {
|
|
this.isEditMaterial = false
|
|
this.selectedListId = []
|
|
// 有选择中的文件夹时，同时存在素材多选操作时
|
|
this.$emit('changedMultiSelected')
|
|
if (index != this.folderChecked) {
|
|
this.folderChecked = index
|
|
this.isEditFolder = true
|
|
this.folderForm = {
|
|
fid: item.fid,
|
|
id: item.id,
|
|
name: item.name,
|
|
img_path: item.imgPath,
|
|
orga_id: item.orgaId
|
|
}
|
|
} else {
|
|
this.folderChecked = -1
|
|
this.isEditFolder = false
|
|
}
|
|
},
|
|
// 删除 文件夹
|
|
deleteMaterialFolder() {
|
|
this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const params = {
|
|
id: this.folderForm.id
|
|
}
|
|
deleteMaterialFolder(params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: '删除文件夹成功',
|
|
type: 'success'
|
|
})
|
|
this.getMaterialList()
|
|
this.folderChecked = -1
|
|
this.isEditFolder = false
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
message: '已取消删除',
|
|
type: 'info'
|
|
})
|
|
})
|
|
},
|
|
// 提交表单 - 新建/编辑
|
|
submitForm(formName) {
|
|
this.folderForm.img_path = this.$refs.childUpload.imageUrl
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
saveMaterialFolder(this.folderForm).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: '创建文件夹成功',
|
|
duration: 2000,
|
|
type: 'success'
|
|
})
|
|
this.mkdirVisible = false
|
|
this.getMaterialList()
|
|
} else {
|
|
this.$message({
|
|
message: '创建文件夹失败',
|
|
duration: 2000,
|
|
type: 'warning'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
// 重置表单
|
|
resetForm() {
|
|
// 强制重置folderForm表单
|
|
// Object.assign(this.$data.folderForm, this.$options.data.call(this).folderForm)
|
|
this.mkdirVisible = false
|
|
},
|
|
// 选择素材 - to 即时发布/定时发布
|
|
publishHandle(index) {
|
|
localStorage.removeItem('selectedMaterial')
|
|
localStorage.removeItem('releaseId')
|
|
localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial))
|
|
// 判断是否选择了多个音频文件
|
|
const resultAudio = []
|
|
this.selectedMaterial.map(item => {
|
|
if (item.material_type == 2) {
|
|
resultAudio.push(item)
|
|
}
|
|
})
|
|
if (resultAudio.length > 1) {
|
|
this.$message.error('音频类型的文件只可选择1个')
|
|
return
|
|
}
|
|
this.$router.push(
|
|
{
|
|
path: '/release', query: { tag: index }
|
|
}
|
|
)
|
|
},
|
|
// 素材 - 编辑
|
|
editContent() {
|
|
this.mkdirVisible = true
|
|
this.labelTxt = '文件名称'
|
|
this.isEditMaterial = true
|
|
if (this.formatType == 1) {
|
|
this.layerTitle = '视频编辑'
|
|
} else if (this.formatType == 2) {
|
|
this.layerTitle = '音频编辑'
|
|
} else {
|
|
this.layerTitle = '图片编辑'
|
|
}
|
|
const checkedMaterial = this.materialList.filter(item => {
|
|
return item.material_id == this.selectedListId[0]
|
|
})
|
|
this.materialId = checkedMaterial[0].material_id
|
|
this.folderForm.name = checkedMaterial[0].material_name
|
|
this.materialDuration = checkedMaterial[0].duration
|
|
this.uploadFileUrl = checkedMaterial[0].deposit_url
|
|
this.materialImgPath = checkedMaterial[0].img_path
|
|
},
|
|
// 上传素材
|
|
saveMaterial() {
|
|
if (!this.isEditMaterial) {
|
|
const formatType = this.$refs.uploadMaterial.formatType
|
|
this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
|
|
// 视频和音频的时长
|
|
const duration = this.$refs.uploadMaterial.duration
|
|
this.materialName = this.$refs.uploadMaterial.fileNames
|
|
switch (formatType) {
|
|
case 'image':
|
|
this.formatType = 0
|
|
this.materialImgPath = this.uploadFileUrl
|
|
this.materialDuration = 0
|
|
break
|
|
case 'video':
|
|
this.formatType = 1
|
|
this.materialDuration = duration
|
|
break
|
|
case 'audio':
|
|
this.formatType = 2
|
|
this.materialDuration = duration
|
|
break
|
|
}
|
|
} else {
|
|
this.materialName = this.folderForm.name
|
|
this.$nextTick(() => {
|
|
if (this.$refs.childUpload) {
|
|
this.materialImgPath = this.$refs.childUpload.imageUrl
|
|
}
|
|
})
|
|
}
|
|
setTimeout(() => {
|
|
const params = {
|
|
'class_ids': [
|
|
// 素材类id集合
|
|
],
|
|
'deposit_url': this.uploadFileUrl, // 素材存放路径
|
|
'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
|
|
'duration': this.materialDuration, // 时长s
|
|
'material_id': this.materialId,
|
|
'folder_id': this.thisFoldId, // 文件夹id
|
|
'img_path': this.materialImgPath, // 封面图片id
|
|
'material_name': this.materialName, // 素材名称
|
|
'material_type': this.formatType, // 素材类别
|
|
'file_size': this.$refs.uploadMaterial.fileSize, // 文件大小
|
|
'orga_id': this.orga_id, // 机构id
|
|
'store_type': 1 // 库类型 1.素材库 2.主题库
|
|
}
|
|
if (!this.isEditMaterial) {
|
|
// 新上传素材时不需要该字段
|
|
delete params.material_id
|
|
}
|
|
saveMaterial(params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: '上传素材成功',
|
|
type: 'success'
|
|
})
|
|
this.mkdirVisible = false
|
|
this.getMaterialList()
|
|
this.materialImgPath = ''
|
|
}
|
|
})
|
|
}, 200)
|
|
},
|
|
// 素材 - 多选
|
|
selectedItem(item) {
|
|
const id = item.material_id
|
|
const inFolderId = item.in_folder_id
|
|
const type = item.material_type
|
|
const arr = this.selectedListId
|
|
if (arr.includes(id)) {
|
|
const index = arr.indexOf(id)
|
|
if (index > -1) {
|
|
arr.splice(index, 1)
|
|
this.selectInFolderid.splice(index, 1)
|
|
this.selectedMaterial.splice(index, 1)
|
|
}
|
|
} else {
|
|
this.selectedListId.push(id)
|
|
this.selectInFolderid.push(inFolderId)
|
|
this.selectedMaterial.push(item)
|
|
this.formatType = type
|
|
}
|
|
},
|
|
// 素材 - 删除
|
|
deleteMyMaterial() {
|
|
this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const params = {
|
|
ids: this.selectedListId
|
|
}
|
|
deleteMyMaterial(params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: '删除素材成功',
|
|
type: 'success'
|
|
})
|
|
this.getMaterialList()
|
|
this.selectedListId = []
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
message: '已取消删除',
|
|
type: 'info'
|
|
})
|
|
})
|
|
},
|
|
UploadList() {
|
|
this.$refs.uploadMaterial.uploadListVisible = true
|
|
},
|
|
// 点击-移动btn
|
|
moveingTo(index) {
|
|
this.folderList = []
|
|
if (this.materialFolders.length > 0) {
|
|
this.folderList = this.materialFolders.slice(0, this.materialFolders.length)
|
|
}
|
|
this.rootFolderId = localStorage.getItem('rootFolderId')
|
|
const returnFolder = {
|
|
id: this.rootFolderId,
|
|
name: '返回上一级'
|
|
}
|
|
this.folderList.unshift(returnFolder)
|
|
this.movingVisible = true
|
|
},
|
|
// 文件夹list - 选中操作
|
|
wjjSelected(item, index) {
|
|
this.folderListChecked = index
|
|
this.thisFoldId = item.id
|
|
},
|
|
// 点击确定 - 移动素材
|
|
moveFile() {
|
|
if (this.materialFolders.length > 0) {
|
|
if (this.thisFoldId == this.rootFolderId) {
|
|
this.$message({
|
|
message: '不能讲文件移动到自身目录下哦~',
|
|
type: 'error'
|
|
})
|
|
return
|
|
}
|
|
} else {
|
|
this.thisFoldId = this.rootFolderId
|
|
}
|
|
const params = {
|
|
'folder_id': this.thisFoldId,
|
|
'ids': this.selectInFolderid,
|
|
'material_ids': this.selectedListId
|
|
}
|
|
moveMyMaterial(params).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: '移动成功',
|
|
type: 'success'
|
|
})
|
|
this.movingVisible = false
|
|
this.getMaterialList()
|
|
this.selectedListId = []
|
|
}
|
|
})
|
|
},
|
|
format(percentage) {
|
|
return percentage === 100 ? '100%' : `${percentage}%`
|
|
},
|
|
start() {
|
|
const that = this
|
|
that.$nextTick(() => {
|
|
that.progressLoading = true
|
|
that.percentage = 0
|
|
that.timeStart = setInterval(() => {
|
|
if (that.percentage < 100) {
|
|
that.percentage += 1
|
|
}
|
|
}, 100)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.material_crumbs {
|
|
padding: 0 24px 15px 24px;
|
|
margin-top: -20px;
|
|
::v-deep .el-breadcrumb {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.material_content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: 24px;
|
|
.material_item {
|
|
position: relative;
|
|
width: 174px;
|
|
height: 182px;
|
|
border-radius: 4px;
|
|
margin: 0 20px 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
.item_cont {
|
|
border-color: #dcdde3;
|
|
img {
|
|
width: 100%;
|
|
height: 148px;
|
|
}
|
|
.radio_img {
|
|
width: 100%;
|
|
height: 148px;
|
|
}
|
|
}
|
|
}
|
|
.upload_layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 0 20px 30px 20px;
|
|
}
|
|
}
|
|
::v-deep .el-table {
|
|
.el-button {
|
|
padding: 0 10px;
|
|
height: 24px;
|
|
&.upload_delt {
|
|
background-color: #f76b6b;
|
|
}
|
|
}
|
|
}
|
|
.multi_handle {
|
|
div {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|