|
|
|
@ -1,11 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="material_content"> |
|
|
|
<!-- 上传 / 创建文件夹 --> |
|
|
|
<div class="material_item cont_upload"> |
|
|
|
<Upload rel="upload" /> |
|
|
|
<el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button> |
|
|
|
<Upload rel="uploadMaterial" /> |
|
|
|
<el-button class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button> |
|
|
|
</div> |
|
|
|
<div v-for="item in materialFolders" :key="item.id" class="material_item folder"> |
|
|
|
<!-- 文件夹list --> |
|
|
|
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click="editFolder(item,index)"> |
|
|
|
<div class="icon_bg"> |
|
|
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
@ -13,7 +15,9 @@ |
|
|
|
<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" |
|
|
|
@ -37,9 +41,8 @@ |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="mkdirVisible" |
|
|
|
width="616px" |
|
|
|
height="384px" |
|
|
|
> |
|
|
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> |
|
|
|
<el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px"> |
|
|
|
<el-form-item |
|
|
|
:label="labelTxt" |
|
|
|
prop="name" |
|
|
|
@ -47,32 +50,43 @@ |
|
|
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="form.name" style="width: 336px" /> |
|
|
|
<el-input v-model="folderForm.name" style="width: 336px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="formType !== 'JPG'" label="封面" prop="file"> |
|
|
|
<UploadCover /> |
|
|
|
<el-form-item v-if="formType !== 'JPG'" label="封面"> |
|
|
|
<UploadCover ref="childUpload" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>保 存</el-button> |
|
|
|
<el-button round @click="mkdirVisible=false">取 消</el-button> |
|
|
|
<el-button type="primary" round @click="submitForm('folderForm')">保 存</el-button> |
|
|
|
<el-button round @click="resetForm()">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 多选操作 --> |
|
|
|
<div v-if="contentIds.length !== 0" class="multi_handle"> |
|
|
|
<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="contentIds.length > 1" |
|
|
|
@click="editContent()" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button type="button" class="mulit_btn">下载</el-button> |
|
|
|
<el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button> |
|
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn">删除</el-button> |
|
|
|
<div v-if="contentIds.length !== 0 || folderChecked != -1" class="multi_handle"> |
|
|
|
<div v-if="isEditFolder != true"> |
|
|
|
<el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button> |
|
|
|
<el-button v-if="isEditFolder != true" type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button> |
|
|
|
<el-button |
|
|
|
type="button" |
|
|
|
class="mulit_btn" |
|
|
|
:disabled="contentIds.length > 1" |
|
|
|
@click="editContent()" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button type="button" class="mulit_btn">下载</el-button> |
|
|
|
<el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button> |
|
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn">删除</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 --> |
|
|
|
@ -90,7 +104,7 @@ |
|
|
|
<div |
|
|
|
v-for="(item, index) in wjjList" |
|
|
|
:key="index" |
|
|
|
:class="['wjj_item', { 'wjj_item_active': movingChecked === index }]" |
|
|
|
:class="['wjj_item', { 'wjj_item_active': folderChecked === index }]" |
|
|
|
@click="wjjSelected(index)" |
|
|
|
> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
@ -109,66 +123,38 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getMaterialList } from '@/api/material/material' |
|
|
|
import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial } from '@/api/material/material' |
|
|
|
import Upload from '../../components/upload' |
|
|
|
import UploadCover from '../../components/upload_cover' |
|
|
|
export default { |
|
|
|
name: 'MaterialList', |
|
|
|
components: { Upload, UploadCover }, |
|
|
|
props: { |
|
|
|
isMultiSelected: { |
|
|
|
type: Boolean, |
|
|
|
required: true |
|
|
|
}, |
|
|
|
mulitText: { |
|
|
|
type: String, |
|
|
|
required: true |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
orga_id: '133221333123111', // 机构ID |
|
|
|
materialFolders: [], // 文件夹list |
|
|
|
materialList: [], // 素材库list |
|
|
|
folderForm: { // form |
|
|
|
fid: '', |
|
|
|
id: '', |
|
|
|
img_path: '', |
|
|
|
name: '', |
|
|
|
orga_id: '' |
|
|
|
}, |
|
|
|
isEditFolder: false, // 是否编辑文件夹 |
|
|
|
mkdirVisible: false, // 新建编辑layer |
|
|
|
folderChecked: -1, // 文件夹是否单击选中 |
|
|
|
// uploadListVisible: false, |
|
|
|
|
|
|
|
// progressLoading: true, |
|
|
|
// percentage: 0, |
|
|
|
colors: '#1e9f4c', |
|
|
|
// colors: '#1e9f4c', |
|
|
|
layerTitle: '创建文件夹', |
|
|
|
labelTxt: '文件夹名称', |
|
|
|
mkdirVisible: false, |
|
|
|
formType: null, |
|
|
|
movingVisible: false, |
|
|
|
movingChecked: null, |
|
|
|
form: { |
|
|
|
id: null, |
|
|
|
name: '', |
|
|
|
file: null |
|
|
|
}, |
|
|
|
uploadListData: [ |
|
|
|
], |
|
|
|
listData: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '人工智能', |
|
|
|
type: 'JPG', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '防控疫情小贴士', |
|
|
|
type: 'vedio', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '防控疫情小贴士2', |
|
|
|
type: 'audio', |
|
|
|
coverImg: '', |
|
|
|
time: '01:20' |
|
|
|
} |
|
|
|
], |
|
|
|
contentIds: [], |
|
|
|
wjjList: [ |
|
|
|
@ -203,14 +189,132 @@ export default { |
|
|
|
'folder_id': '', |
|
|
|
'material_name': '', |
|
|
|
'material_type': 0, |
|
|
|
'orga_id': '133221333123111' |
|
|
|
'orga_id': this.orga_id |
|
|
|
} |
|
|
|
getMaterialList(params).then(res => { |
|
|
|
this.materialFolders = res.data.materialFolders |
|
|
|
this.materialList = res.data.pageThemeVO |
|
|
|
console.log(this.materialFolders) |
|
|
|
// 创建文件夹获取data |
|
|
|
this.folderForm.fid = res.data.thisFoldId |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 新建 / 编辑 文件夹 |
|
|
|
handleMkdir(mkdirType) { |
|
|
|
this.mkdirVisible = true |
|
|
|
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 |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 选择 编辑 文件夹 |
|
|
|
editFolder(item, index) { |
|
|
|
console.log(item) |
|
|
|
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 id = this.folderForm.id |
|
|
|
deleteMaterialFolder(id).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' |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
saveMaterial() { |
|
|
|
const params = { |
|
|
|
'class_ids': [ |
|
|
|
// 素材类id集合 |
|
|
|
], |
|
|
|
'deposit_url': '', // 素材存放路径 |
|
|
|
'device_direction': 1, // 横竖屏 1.横屏 2.竖屏, |
|
|
|
'folder_id': '', // 文件夹id |
|
|
|
'img_path': '', // 封面图片id |
|
|
|
'material_id': '', // 素材id |
|
|
|
'material_name': '', // 素材名称 |
|
|
|
'material_type': '', // 素材类别 |
|
|
|
'orga_id': this.orga_id, // 机构id |
|
|
|
'store_type': 1 // 库类型 1.素材库 2.主题库 |
|
|
|
} |
|
|
|
saveMaterialFolder(params).then(res => { |
|
|
|
// if (res.code == 200) { |
|
|
|
|
|
|
|
// } |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 提交表单 - 新建/编辑 |
|
|
|
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) { |
|
|
|
this.$router.push( |
|
|
|
{ |
|
|
|
@ -218,15 +322,11 @@ export default { |
|
|
|
} |
|
|
|
) |
|
|
|
}, |
|
|
|
handleMkdir() { |
|
|
|
this.mkdirVisible = true |
|
|
|
}, |
|
|
|
UploadList() { |
|
|
|
this.uploadListVisible = true |
|
|
|
}, |
|
|
|
selectedItem(id, type) { |
|
|
|
console.log('type', type) |
|
|
|
|
|
|
|
const arr = this.contentIds |
|
|
|
// includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 |
|
|
|
if (arr.includes(id)) { |
|
|
|
@ -239,7 +339,6 @@ export default { |
|
|
|
this.contentIds.push(id) |
|
|
|
this.formType = type |
|
|
|
} |
|
|
|
|
|
|
|
console.log('formType', this.formType) |
|
|
|
}, |
|
|
|
editContent() { |
|
|
|
@ -253,19 +352,18 @@ export default { |
|
|
|
} else { |
|
|
|
this.layerTitle = '图片编辑' |
|
|
|
} |
|
|
|
|
|
|
|
const resType = this.listData.filter(item => { |
|
|
|
return item.id === this.contentIds[0] |
|
|
|
}) |
|
|
|
this.form.name = resType[0].name |
|
|
|
this.folderForm.name = resType[0].name |
|
|
|
}, |
|
|
|
moveingTo(index) { |
|
|
|
this.movingVisible = true |
|
|
|
// this.movingChecked = index |
|
|
|
}, |
|
|
|
wjjSelected(index) { |
|
|
|
this.movingChecked = index |
|
|
|
console.log(this.movingChecked) |
|
|
|
this.folderChecked = index |
|
|
|
console.log(this.folderChecked) |
|
|
|
}, |
|
|
|
format(percentage) { |
|
|
|
return percentage === 100 ? '100%' : `${percentage}%` |
|
|
|
@ -292,16 +390,6 @@ export default { |
|
|
|
// that.progressLoading = false |
|
|
|
// }, 300) |
|
|
|
} |
|
|
|
// handleRemove(file) { |
|
|
|
// console.log(file) |
|
|
|
// }, |
|
|
|
// handlePictureCardPreview(file) { |
|
|
|
// this.dialogImageUrl = file.url |
|
|
|
// this.dialogVisible = true |
|
|
|
// }, |
|
|
|
// handleDownload(file) { |
|
|
|
// console.log(file) |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -317,6 +405,7 @@ export default { |
|
|
|
height: 182px; |
|
|
|
border-radius: 4px; |
|
|
|
margin: 0 20px 20px 0; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.item_cont { |
|
|
|
border-color: #dcdde3; |
|
|
|
@ -344,13 +433,5 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-upload--picture-card { |
|
|
|
width: 128px; |
|
|
|
height: 120px; |
|
|
|
background-color: #f2f7ff; |
|
|
|
} |
|
|
|
::v-deep .el-upload-list--picture-card .el-upload-list__item { |
|
|
|
width: 128px; |
|
|
|
height: 120px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
wz_shi
3 years ago