Browse Source

素材库

dev
xuhuajiao 3 years ago
parent
commit
d7276d257e
  1. 9
      src/assets/styles/adminIndex.scss
  2. 3
      src/views/components/upload.vue
  3. 8
      src/views/materialContent/index.vue
  4. 78
      src/views/materialContent/materialList/index.vue

9
src/assets/styles/adminIndex.scss

@ -427,10 +427,17 @@
.cont_upload_btn { .cont_upload_btn {
background: linear-gradient(to right, #fc8c6f, #fa544e) !important; background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
} }
.mkdir_btn {
.mkdir_btn,.return_btn {
margin-left: 0; margin-left: 0;
margin-top: 16px; margin-top: 16px;
} }
.return_btn{
span,a{
display: block;
height: 34px;
line-height: 34px;
}
}
} }
.folder { .folder {
border: 1px solid #dcdde3; border: 1px solid #dcdde3;

3
src/views/components/upload.vue

@ -209,8 +209,7 @@ export default {
setTimeout(() => { setTimeout(() => {
_this.$emit('saveMaterial') _this.$emit('saveMaterial')
}, 200) }, 200)
// console.log(_this.fileUrl.push({ name: _this.file.name, url: _this.fileUrl }))
// console.log(_this.fileUrl)
document.getElementById('upFile').value = ''
} }
} }
// //

8
src/views/materialContent/index.vue

@ -7,6 +7,7 @@
ref="MaterialList" ref="MaterialList"
:is-multi-selected="isMultiSelected" :is-multi-selected="isMultiSelected"
:mulit-text="mulitText" :mulit-text="mulitText"
@changedMultiSelected="changedMultiSelected"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="second"> <el-tab-pane name="second">
@ -66,6 +67,13 @@ export default {
this.mulitText = '多选' this.mulitText = '多选'
} }
// this.$refs.MaterialList.multiSelectList() // this.$refs.MaterialList.multiSelectList()
},
//
changedMultiSelected() {
if (this.isMultiSelected) {
this.isMultiSelected = false
this.mulitText = '多选'
}
} }
} }
} }

78
src/views/materialContent/materialList/index.vue

@ -11,7 +11,7 @@
<div class="material_item cont_upload"> <div class="material_item cont_upload">
<Upload ref="uploadMaterial" @saveMaterial="saveMaterial" /> <Upload ref="uploadMaterial" @saveMaterial="saveMaterial" />
<el-button v-if="!isToFolder" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button> <el-button v-if="!isToFolder" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
<el-button v-else class="mkdir_btn" round type="primary"><a href="/content">返回</a></el-button>
<el-button v-else class="return_btn" round type="primary"><a href="/content">返回</a></el-button>
</div> </div>
<!-- 文件夹list --> <!-- 文件夹list -->
@ -38,7 +38,7 @@
<span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span> <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span>
</div> </div>
<div class="file_name">{{ item.material_name }}</div> <div class="file_name">{{ item.material_name }}</div>
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.material_id, item.material_type)"></span>
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.material_id, item.in_folder_id, item.material_type)"></span>
</div> </div>
</div> </div>
@ -74,8 +74,8 @@
</div> </div>
<!-- 多选操作 --> <!-- 多选操作 -->
<div v-if="selectedList.length !== 0 || folderChecked != -1" class="multi_handle">
<div v-if="isEditFolder != true">
<div v-if="selectedList.length != 0 || folderChecked != -1" class="multi_handle">
<div v-if="isEditFolder != true && folderChecked == -1 && isMultiSelected">
<el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button> <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" @click="publishHandle(1)">定时发布</el-button>
<el-button <el-button
@ -85,7 +85,7 @@
@click="editContent()" @click="editContent()"
>编辑</el-button> >编辑</el-button>
<el-button type="button" class="mulit_btn">下载</el-button> <el-button type="button" class="mulit_btn">下载</el-button>
<el-button v-if="!isToFolder" type="button" class="mulit_btn" @click="moveingTo()">移动</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> <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMyMaterial">删除</el-button>
</div> </div>
<div v-else> <div v-else>
@ -96,7 +96,6 @@
>编辑</el-button> >编辑</el-button>
<el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button> <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button>
</div> </div>
</div> </div>
<!-- 移动至layer --> <!-- 移动至layer -->
@ -112,7 +111,7 @@
> >
<div class="wjj_list"> <div class="wjj_list">
<div <div
v-for="(item, index) in materialFolders"
v-for="(item, index) in folderList"
:key="index" :key="index"
:class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]"
@click="wjjSelected(item,index)" @click="wjjSelected(item,index)"
@ -149,18 +148,15 @@ export default {
isMultiSelected: { isMultiSelected: {
type: Boolean, type: Boolean,
required: true required: true
},
mulitText: {
type: String,
required: true
} }
}, },
data() { data() {
return { return {
orga_id: '133221333123111', // ID orga_id: '133221333123111', // ID
rootFolderId: null, // ID
thisFoldId: null, // ID thisFoldId: null, // ID
folderList: [], // list
materialFolders: [], // list materialFolders: [], // list
materialList: [], // list
folderForm: { // form folderForm: { // form
fid: '', fid: '',
id: '', id: '',
@ -171,6 +167,8 @@ export default {
isEditFolder: false, // isEditFolder: false, //
mkdirVisible: false, // layer mkdirVisible: false, // layer
folderChecked: -1, // folderChecked: -1, //
materialList: [], // list
isPropMultiSelected: this.isMultiSelected,
isEditMaterial: false, // isEditMaterial: false, //
formatType: null, // 0 img 1 video 2 audio formatType: null, // 0 img 1 video 2 audio
materialId: null, // id materialId: null, // id
@ -179,7 +177,8 @@ export default {
materialDuration: 0, // materialDuration: 0, //
materialName: '', // materialName: '', //
uploadFileUrl: null, // uploadFileUrl: null, //
selectedList: [], //
selectedList: [], // material_id
selectinFolderid: [], // id -- in_folder_id
layerTitle: '创建文件夹', // /title layerTitle: '创建文件夹', // /title
labelTxt: '文件夹名称', labelTxt: '文件夹名称',
isToFolder: false, // isToFolder: false, //
@ -200,9 +199,11 @@ export default {
}, },
watch: { watch: {
isMultiSelected(newName, oldName) { isMultiSelected(newName, oldName) {
console.log('newName', newName)
if (newName === false) { if (newName === false) {
this.selectedList = [] this.selectedList = []
} }
this.isPropMultiSelected = newName
}, },
'$route.query.folderTag'(Val) { '$route.query.folderTag'(Val) {
console.log(Val) console.log(Val)
@ -246,6 +247,9 @@ export default {
} }
} }
getMaterialList(params).then(res => { getMaterialList(params).then(res => {
if (!this.$route.query.folderTag) {
localStorage.setItem('rootFolderId', res.data.thisFoldId)
}
this.materialFolders = res.data.materialFolders this.materialFolders = res.data.materialFolders
this.materialList = res.data.pageThemeVO this.materialList = res.data.pageThemeVO
// data // data
@ -281,7 +285,7 @@ export default {
// //
floderDbClick(item, index) { floderDbClick(item, index) {
this.isEditMaterial = false this.isEditMaterial = false
this.$router.push(
this.$router.replace(
{ {
path: '/content', query: { folderTag: 1 } path: '/content', query: { folderTag: 1 }
} }
@ -291,15 +295,22 @@ export default {
localStorage.setItem('currentFolder', this.currentFolder) localStorage.setItem('currentFolder', this.currentFolder)
localStorage.setItem('currentFolderId', this.currentFolderId) localStorage.setItem('currentFolderId', this.currentFolderId)
this.getMaterialList() this.getMaterialList()
this.selectedList = []
this.folderChecked = -1
this.isEditFolder = false
}, },
// //
hiddenFolderActiveClick() { hiddenFolderActiveClick() {
this.folderChecked = -1 this.folderChecked = -1
this.isEditFolder = false
}, },
// //
editFolder(item, index) { editFolder(item, index) {
this.isEditMaterial = false this.isEditMaterial = false
if (index !== this.folderChecked) {
this.selectedList = []
//
this.$emit('changedMultiSelected')
if (index != this.folderChecked) {
this.folderChecked = index this.folderChecked = index
this.isEditFolder = true this.isEditFolder = true
this.folderForm = { this.folderForm = {
@ -471,18 +482,17 @@ export default {
}, 200) }, 200)
}, },
// - // -
selectedItem(id, type) {
console.log(id)
console.log(type)
selectedItem(id, inFolderId, type) {
const arr = this.selectedList const arr = this.selectedList
if (arr.includes(id)) { if (arr.includes(id)) {
const index = arr.indexOf(id) const index = arr.indexOf(id)
console.log(index)
if (index > -1) { if (index > -1) {
arr.splice(index, 1) arr.splice(index, 1)
this.selectinFolderid.splice(index, 1)
} }
} else { } else {
this.selectedList.push(id) this.selectedList.push(id)
this.selectinFolderid.push(inFolderId)
this.formatType = type this.formatType = type
} }
}, },
@ -518,21 +528,41 @@ export default {
}, },
// -btn // -btn
moveingTo(index) { 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 this.movingVisible = true
}, },
// list - // list -
wjjSelected(item, index) { wjjSelected(item, index) {
console.log(item)
this.folderListChecked = index this.folderListChecked = index
this.thisFoldId = item.id this.thisFoldId = item.id
console.log(this.folderListChecked)
}, },
// - // -
moveFile() { moveFile() {
if (this.materialFolders.length > 0) {
console.log(this.materialFolders)
if (this.thisFoldId == this.rootFolderId) {
this.$message({
message: '不能讲文件移动到自身目录下哦~',
type: 'error'
})
return
}
} else {
this.thisFoldId = this.rootFolderId
}
const params = { const params = {
'folder_id': this.thisFoldId, 'folder_id': this.thisFoldId,
'ids': this.selectedList,
'material_id': null
'ids': this.selectinFolderid,
'material_ids': this.selectedList
} }
moveMyMaterial(params).then(res => { moveMyMaterial(params).then(res => {
if (res.code === 200) { if (res.code === 200) {
@ -541,6 +571,8 @@ export default {
type: 'success' type: 'success'
}) })
this.movingVisible = false this.movingVisible = false
this.getMaterialList()
this.selectedList = []
} }
}) })
}, },

Loading…
Cancel
Save