xuhuajiao 3 years ago
parent
commit
8db403d9dd
  1. 37
      src/assets/styles/adminIndex.scss
  2. 103
      src/views/ThemeGallery/index.vue
  3. 25
      src/views/components/MyAlbum.vue
  4. 53
      src/views/components/ThemeGalleryList.vue
  5. 1
      src/views/components/upload.vue
  6. 2
      src/views/dashboard/PublishProcess.vue
  7. 41
      src/views/materialContent/index.vue
  8. 20
      src/views/materialContent/materialList/index.vue

37
src/assets/styles/adminIndex.scss

@ -10,6 +10,9 @@
background-color: #c1c1c1;
border-radius: 3px;
}
img[src=""],img:not([src]){opacity:0;}
.home_item {
height: 248px;
padding: 0 18px;
@ -243,13 +246,7 @@
display: block;
width: 164px;
height: 140px;
}
.radio_img {
width: 164px;
height: 140px;
background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
background-size: 98px 98px;
object-fit: cover;
}
.item_player {
position: absolute;
@ -264,6 +261,22 @@
}
}
.radio_img {
width: 164px;
height: 140px;
background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
background-size: 98px 98px;
}
.set_radio{
.radio_img {
width: 140px;
height: 250px;
background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
background-size: 98px 98px;
}
}
.content_warp {
i {
font-style: normal;
@ -402,14 +415,22 @@
overflow: hidden;
margin: 0 24px 24px 0;
img {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
&::after{
content: "222222";
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
}
}
}
.cont_upload {
display: flex;
flex-wrap: wrap;

103
src/views/ThemeGallery/index.vue

@ -94,14 +94,14 @@
<audio v-if="formatType==2" :src="uploadForm.deposit_url" controls></audio>
<!-- <p>文件名{{ fileNames }}</p> -->
</div>
<Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" @uploadSubmit="uploadSubmit" />
<Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" />
</el-form-item>
<el-form-item v-if="formatType != 0" label="添加封面" prop="img_path">
<UploadCover ref="childUpload" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" round @click="uploadSubmit('uploadForm')"> </el-button>
<el-button type="primary" round @click="uploadSubmit()"> </el-button>
<el-button round @click="resetForm('uploadForm')"> </el-button>
</div>
</el-dialog>
@ -158,6 +158,23 @@
<el-pagination style="margin-top: 20px;" background :current-page="page" :total="total" :page-size="size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getThemeHistoryList" @size-change="handleSizeChange" />
</el-dialog>
</div>
<!-- <div class="release_layer upload_layer">
<el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px">
<div slot="title" class="layer_tab_title">
<span>主题库</span>
</div>
<ThemeGalleryList
ref="ThemeGalleryList"
:is-multi-selected="isMultiSelected"
:mulit-text="mulitText"
:show-item-info="showItemInfo"
:tab-item="tabItem"
@changedMultiSelected="changedMultiSelected"
/>
</el-dialog>
</div> -->
</div>
</template>
@ -241,7 +258,8 @@ export default {
isEditTheme: false,
page: 1,
size: 10,
total: 0
total: 0,
selectContVisible: true
}
},
watch: {
@ -466,46 +484,53 @@ export default {
})
}
this.uploadForm.class_ids = this.selectClassifyList
if (this.uploadForm.class_ids.length == 0) {
this.$message.error('请选择类别名称')
return
} else if (!this.uploadForm.device_direction) {
this.$message.error('请选择设备方向')
return
} else if (!this.uploadForm.deposit_url) {
this.$message.error('请上传资源内容')
return
} else if (!this.uploadForm.material_name) {
this.$message.error('请输入文件名称')
return
}
// this.uploadForm.orga_id = this.orga_id
this.uploadForm.store_type = 2
this.$refs[formName].validate((valid) => {
if (valid) {
setTimeout(() => {
saveMaterial(this.uploadForm).then(res => {
if (res.code === 200) {
this.$message({
message: '上传素材成功',
type: 'success'
})
this.uploadDialogVisible = false
this.getThemeHistoryList()
//
this.selectClassifyList = []
this.uploadForm.device_direction = 0
this.uploadForm.deposit_url = null
this.formatType = -1
this.uploadForm.material_type = null
this.uploadForm.img_path = null
this.materialImgPath = null
this.$nextTick(() => {
if (this.$refs.uploadMaterial) {
this.$refs.uploadMaterial.filePercent = 0
}
if (this.$refs.childUpload) {
this.$refs.childUpload.imageUrl = null
}
})
this.$refs.uploadForm.resetFields()
} else {
this.$message.error(res.msg)
setTimeout(() => {
saveMaterial(this.uploadForm).then(res => {
if (res.code === 200) {
this.$message({
message: '上传素材成功',
type: 'success'
})
this.uploadDialogVisible = false
this.getThemeHistoryList()
this.$refs.ThemeGalleryList.getThemeGallery()
//
this.selectClassifyList = []
this.uploadForm.device_direction = 0
this.uploadForm.deposit_url = null
this.formatType = -1
this.uploadForm.material_type = null
this.uploadForm.img_path = null
this.materialImgPath = null
this.$nextTick(() => {
if (this.$refs.uploadMaterial) {
this.$refs.uploadMaterial.filePercent = 0
}
if (this.$refs.childUpload) {
this.$refs.childUpload.imageUrl = null
}
})
}, 200)
} else {
console.log('error submit!!')
return false
}
})
this.$refs.uploadForm.resetFields()
} else {
this.$message.error(res.msg)
}
})
}, 200)
},
// list -
getThemeHistoryList(pager = 1) {

25
src/views/components/MyAlbum.vue

@ -16,7 +16,7 @@
<el-button class="mkdir_btn" round type="primary">创建文件夹</el-button>
</div>
<div v-else class="theme_mkdir cont_upload">
<el-button class="cont_upload_btn" round type="primary">添加</el-button>
<el-button class="cont_upload_btn" round type="primary" @click="addThemeToAlbum">添加</el-button>
<el-button class="return_btn" round type="primary" @click="breadcrumbToAlbum">返回</el-button>
</div>
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['theme_mkdir', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)">
@ -30,7 +30,7 @@
<span v-if="folderChecked == index" class="checked_btn"></span>
</div>
<!-- 画册list -->
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectInFolderid.includes(item.in_folder_id) }]">
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item',{'set_radio': !item.img_path && item.material_type == 2}, { 'item_multi': selectInFolderid.includes(item.in_folder_id) }]">
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
<div class="item_format">
@ -41,7 +41,6 @@
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span>
</div>
</div>
<!-- 多选操作 -->
<div v-if="selectInFolderid.length !== 0 || folderChecked != -1" class="multi_handle">
<div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected">
@ -98,6 +97,7 @@
</div>
</el-dialog>
</div>
</div>
</template>
@ -108,6 +108,7 @@ import UploadCover from './upload_cover'
export default {
name: 'ThemeGalleryList',
components: { UploadCover },
inject: ['selectContVisible'],
filters: {
getSeconds(s) {
return getSeconds(s)
@ -150,7 +151,8 @@ export default {
img_path: '',
name: '',
orga_id: ''
}
},
selectContVisible2: 0
}
},
computed: {
@ -171,6 +173,9 @@ export default {
document.addEventListener('click', this.hiddenFolderActiveClick)
},
methods: {
addThemeToAlbum() {
this.$emit('test', this.selectContVisible2)
},
breadcrumbToAlbum() {
this.$router.push('/theme')
this.getMyAlbum()
@ -457,12 +462,6 @@ export default {
}
</script>
<style lang="scss" scoped>
.el-tabs {
margin-bottom: 0;
}
::v-deep .el-tabs__item.is-active {
color: #3a8aeb;
}
.theme_img {
.theme_mkdir {
position: relative;
@ -479,6 +478,7 @@ export default {
height: 69px;
}
.icon_bg{
height: 220px;
img{
display: block;
width: 140px;
@ -489,11 +489,6 @@ export default {
.theme_item {
width: 140px;
height: 250px;
}
.icon_bg {
height: 220px;
}
.theme_item {
.file_name {
position: absolute;
left: 0;

53
src/views/components/ThemeGalleryList.vue

@ -15,8 +15,10 @@
</div>
<div v-if="themeItemActive!=2" style="display:flex">
<!-- 主题库list -->
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectedListId.includes(item.material_id) }]">
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
<div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', {'set_radio': !item.img_path && item.material_type == 2}, { 'item_multi': selectedListId.includes(item.material_id) }]">
<!-- :onerror="defaultImg" -->
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" alt />
<div v-if="!item.img_path && item.material_type == 1 " class="error_img"></div>
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
<div v-if="showItemInfo" class="item_format">
<span class="item_type">{{ item.deposit_url | getFileFormat }}</span>
@ -38,6 +40,8 @@
</div>
</div>
</div>
<!-- <List ref="list" :select-cont-visible="selectContVisible" :tab-item="tabItem" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" /> -->
</div>
</template>
@ -45,6 +49,7 @@
import { FetchThemeClassList, FetchThemeGallery, FetchAddToMyAlbum } from '@/api/theme/theme.js'
import { getSeconds, getFileFormat } from '@/utils/index.js'
import MyAlbum from './MyAlbum'
// import List from './list2'
export default {
name: 'ThemeGalleryList',
components: { MyAlbum },
@ -68,6 +73,10 @@ export default {
showItemInfo: {
type: Boolean,
required: true
},
isLayer: {
type: Boolean,
required: true
}
},
data() {
@ -93,7 +102,8 @@ export default {
themeGalleryList: [], //
selectedListId: [],
selectInFolderid: [], // ID
selectedMaterial: [] //
selectedMaterial: [], //
selectContVisible: false
}
},
computed: {
@ -254,36 +264,9 @@ export default {
color: #3a8aeb;
}
.theme_img {
.theme_mkdir {
position: relative;
width: 140px;
height: 250px;
margin: 0 24px 24px 0;
&.cont_upload .font-icon {
width: 45px;
height: 45px;
margin-bottom: 20px;
}
&.folder .font-icon {
width: 84px;
height: 69px;
}
.icon_bg{
img{
display: block;
width: 140px;
height: 250px;
}
}
}
.theme_item {
width: 140px;
height: 250px;
}
.icon_bg {
height: 220px;
}
.theme_item {
.file_name {
position: absolute;
left: 0;
@ -293,6 +276,16 @@ export default {
background: rgba(255, 255, 255, 0.6);
line-height: 30px;
}
.error_img{
position: absolute;
left: 0;
top: 0;
display: block;
width: 140px;
height: 250px;
background: url("../../assets/images/menu_bg_02.png") no-repeat left top;
background-size: cover;
}
}
}
</style>

1
src/views/components/upload.vue

@ -217,7 +217,6 @@ export default {
_this.getVideoDuration(_this.uploadFileUrl)
setTimeout(() => {
_this.$emit('saveMaterial')
_this.$emit('uploadSubmit')
}, 200)
document.getElementById('upFile').value = ''
}

2
src/views/dashboard/PublishProcess.vue

@ -36,6 +36,8 @@ export default {
},
methods: {
publishHandle(index) {
localStorage.removeItem('selectedMaterial')
localStorage.removeItem('releaseId')
this.$router.push(
{
path: '/release', query: { tag: index }

41
src/views/materialContent/index.vue

@ -2,30 +2,24 @@
<div class="app-container">
<div class="content_warp">
<el-tabs v-model="activeIndex" @tab-click="handleClick">
<el-tab-pane label="全部" name="first" />
<el-tab-pane name="second">
<el-tab-pane label="全部" name="0" />
<el-tab-pane name="1">
<span slot="label">
图片
<i class="emrgencyCount">1</i>
图片<i class="emrgencyCount">1</i>
</span>
tp
</el-tab-pane>
<el-tab-pane name="third">
<el-tab-pane name="2">
<span slot="label">
视频
<i class="emrgencyCount">1</i>
视频<i class="emrgencyCount">1</i>
</span>
ship
</el-tab-pane>
<el-tab-pane name="fourth">
<el-tab-pane name="3">
<span slot="label">
音频
<i class="emrgencyCount">1</i>
音频<i class="emrgencyCount">1</i>
</span>
yinp
</el-tab-pane>
</el-tabs>
<MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" @changedMultiSelected="changedMultiSelected" />
<MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :active-index="activeIndex" @changedMultiSelected="changedMultiSelected" />
</div>
<div class="material_btn">
<el-button round type="primary" @click="handleUpload">上传列表</el-button>
@ -41,14 +35,29 @@ export default {
components: { MaterialList },
data() {
return {
activeIndex: 0,
activeIndex: 0 || '0',
isMultiSelected: false,
mulitText: '多选'
}
},
methods: {
handleClick(tab) {
console.log(tab.index)
this.activeIndex = tab.index
switch (this.activeIndex) {
case '0':
this.$refs.MaterialList.tabType = null
break
case '1':
this.$refs.MaterialList.tabType = 0
break
case '2':
this.$refs.MaterialList.tabType = 1
break
case '3':
this.$refs.MaterialList.tabType = 2
break
}
this.$refs.MaterialList.getMaterialList()
},
handleUpload() {
this.$refs.MaterialList.UploadList()

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

@ -118,6 +118,10 @@ export default {
isMultiSelected: {
type: Boolean,
required: true
},
activeIndex: {
type: String,
required: true
}
},
data() {
@ -157,7 +161,8 @@ export default {
movingVisible: false,
uploadListData: [ //
],
folderListChecked: -1
folderListChecked: -1,
tabType: null
}
},
computed: {
@ -172,10 +177,17 @@ export default {
this.selectedListId = []
}
},
activeIndex(newName, oldName) {
// console.log(newName)
this.tabIndex = newName
},
'$route.query.folderTag'(Val) {
console.log(Val)
}
},
created() {
console.log(localStorage.getItem('materialTabIndex'))
},
mounted: function() {
console.log(this.$route.query.folderTag)
this.getMaterialList()
@ -193,7 +205,8 @@ export default {
params = {
'folder_id': this.currentFolderId,
'material_name': null,
'material_type': null,
'material_type': this.tabType,
'material_type_not': null,
'orga_id': this.orga_id
}
} else {
@ -204,7 +217,7 @@ export default {
params = {
'folder_id': null,
'material_name': null,
'material_type': null,
'material_type': this.tabType,
'material_type_not': null,
'orga_id': this.orga_id
}
@ -583,6 +596,7 @@ export default {
<style lang="scss" scoped>
.material_crumbs {
padding: 0 24px 15px 24px;
margin-top: -20px;
::v-deep .el-breadcrumb {
font-size: 12px;
color: #999999;

Loading…
Cancel
Save