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.
713 lines
25 KiB
713 lines
25 KiB
<template>
|
|
|
|
<div class="app-container theme_main">
|
|
<!-- 右上角btn -->
|
|
<div class="home_publish_btn">
|
|
<el-button round class="el_button_green" @click="addEditClassify(0)">新增</el-button>
|
|
<el-button round type="primary" @click="addEditClassify(1)">编辑</el-button>
|
|
<el-button round class="el_button_red" @click="uploadTheme()">上传</el-button>
|
|
</div>
|
|
<div style="position:relative">
|
|
<!-- 主题库list -->
|
|
<ThemeGalleryList
|
|
ref="ThemeGalleryList"
|
|
:is-multi-selected="isMultiSelected"
|
|
:mulit-text="mulitText"
|
|
:show-item-info="showItemInfo"
|
|
:tab-item="tabItem"
|
|
:is-my-album="isMyAlbum"
|
|
@pf="parent"
|
|
@changedMultiSelected="changedMultiSelected"
|
|
/>
|
|
<MyAlbum v-show="isMyAlbum" ref="MyAlbum" :is-multi-selected="isMultiSelected" />
|
|
<div class="material_btn">
|
|
<el-button round type="primary" @click="uploadHistoryVisible=true">上传历史</el-button>
|
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 平台技术人员-新增/编辑分类 -->
|
|
<div class="upload_layer">
|
|
<el-dialog append-to-body :show-close="false" :visible.sync="addDialogVisible" :close-on-click-modal="false" :title="layerTitle" width="620px">
|
|
<el-form ref="classifyForm" inline :model="classifyForm" size="small" label-width="80px">
|
|
<el-form-item
|
|
v-if="isAddEdit==0"
|
|
label="类别名称"
|
|
prop="class_name"
|
|
:rules="[
|
|
{ required: true, message: '请输入类别名称', trigger: 'blur' }
|
|
]"
|
|
>
|
|
<el-input v-model="classifyForm.class_name" style="width: 360px;" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-else
|
|
label="类别名称"
|
|
prop="class_name"
|
|
:rules="[
|
|
{ required: true, message: '请选择类别名称', trigger: 'change' }
|
|
]"
|
|
>
|
|
<el-select v-model="classifyForm.class_name" placeholder="请选择" value-key="class_name" style="width: 360px;" @change="selectName">
|
|
<el-option v-for="item in tabItem" :key="item.id" :label="item.class_name" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="所属机构"
|
|
prop="searchClassify"
|
|
>
|
|
<el-select v-model="searchClassify" multiple placeholder="请选择" style="width: 360px;" @change="changeSelect">
|
|
<el-option
|
|
v-for="item in organOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">保 存</el-button>
|
|
<el-button round @click="resetForm('classifyForm')">关 闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 平台技术人员-上传 -->
|
|
<el-dialog append-to-body :show-close="false" :visible.sync="uploadDialogVisible" :close-on-click-modal="false" :title="uploadTitle" class="upload_layer">
|
|
<el-form ref="uploadForm" :model="uploadForm" size="small" label-width="80px">
|
|
<el-form-item label="类别名称" prop="selectClassifyList">
|
|
<el-checkbox-group v-model="selectClassifyList">
|
|
<el-checkbox v-for="item in tabItem" :key="item.id" :label="item.id" :value="item.id">{{ item.class_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="设备方向" prop="device_direction">
|
|
<el-radio-group v-model="uploadForm.device_direction">
|
|
<el-radio :label="1" value="1">横屏</el-radio>
|
|
<el-radio :label="2" value="2">竖屏</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item v-if="isUploadThemeType == 1" prop="material_name" label="文件名称">
|
|
<el-input v-model="uploadForm.material_name" style="width:336px" />
|
|
</el-form-item>
|
|
<el-form-item class="upload_source" label="上传内容" prop="deposit_url">
|
|
<div v-if="formatType != -1" class="source_cont">
|
|
<img v-if="formatType==0" :src="uploadForm.deposit_url" alt="" width="150" />
|
|
<video v-if="formatType==1" :src="uploadForm.deposit_url" controls width="200"></video>
|
|
<audio v-if="formatType==2" :src="uploadForm.deposit_url" controls></audio>
|
|
<!-- <p>文件名：{{ fileNames }}</p> -->
|
|
</div>
|
|
<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()">确 定</el-button>
|
|
<el-button round @click="resetForm('uploadForm')">关 闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 上传历史layer -->
|
|
<div class="upload_layer">
|
|
<el-dialog title="上传历史" :close-on-click-modal="false" :visible.sync="uploadHistoryVisible" width="1100px">
|
|
<!-- 上传历史 - 搜索 -->
|
|
<el-form ref="form" :model="queryForm" label-width="80px" class="query_history">
|
|
<el-form-item label="文件名称">
|
|
<el-input v-model="queryForm.name" style="width:200px" @keyup.enter.native="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
|
|
</el-form-item>
|
|
<el-form-item label="时间">
|
|
<el-date-picker v-model="queryForm.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getThemeHistoryList(pager = 1)" @blur="getThemeHistoryList(pager = 1)" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 上传历史 - table-list -->
|
|
<el-table :data="uploadHistoryListData" :header-cell-style="{ color: '#333' }">
|
|
<el-table-column align="center" prop="material_name" label="文件名称" />
|
|
<el-table-column align="center" prop="cover" label="发布内容">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.img_path">
|
|
<img width="48px" height="64px" size="medium" :src="scope.row.img_path" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="classes" label="类别名称" width="180">
|
|
<template slot-scope="scope">
|
|
<div class="tag_list">
|
|
<el-tag v-for="tag in scope.row.classes.split(',')" :key="tag" type="primary">{{ tag }}</el-tag>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="device_direction" label="设备方向">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.device_direction==2 ? "竖屏" : "横屏" }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column align="center" prop="agency" label="所属机构" /> -->
|
|
<el-table-column align="center" prop="create_time" label="上传时间" width="150">
|
|
<template slot-scope="{row}">
|
|
<div>{{ row.create_time | parseTime }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="create_by" label="发布人" />
|
|
<el-table-column align="center" prop="handle" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" round class="edit_btn" @click="editUploadTheme(scope.row)">编辑</el-button>
|
|
<el-button type="primary" round :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.row)">{{ scope.row.is_state == 1 ? "停用" : "恢复" }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页器 -->
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchAddOrEdit, FetchThemeHistoryList, FetchUpdateThemeState, FetchFindThemeClassDetails } from '@/api/theme/theme.js'
|
|
import { saveMaterial } from '@/api/material/material'
|
|
import ThemeGalleryList from '../components/ThemeGalleryList'
|
|
import MyAlbum from '../components/MyAlbum'
|
|
import Upload from '../components/upload'
|
|
import UploadCover from '../components/upload_cover'
|
|
import { parseTime } from '@/utils/index.js'
|
|
export default {
|
|
name: 'ThemeGallery',
|
|
components: { ThemeGalleryList, MyAlbum, UploadCover, Upload },
|
|
filters: {
|
|
parseTime(time, cFormat) {
|
|
return parseTime(time, cFormat)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isMyAlbum: false,
|
|
isTheme: true,
|
|
orga_id: '133221333123111', // 机构ID
|
|
addDialogVisible: false, // 新增编辑-分类弹框
|
|
layerTitle: '新增',
|
|
isAddEdit: 0, // 判断分类菜单是新增还是编辑
|
|
classifyForm: { // 主题库分类菜单form
|
|
class_name: '',
|
|
is_all: false,
|
|
id: '',
|
|
orga_ids: []
|
|
},
|
|
tabItem: [], // 分类菜单data
|
|
isAllSelect: [],
|
|
searchClassify: [], // 机构选择多选操作
|
|
oldSearchClassify: [],
|
|
organOptions: [ // 机构list-data
|
|
{
|
|
label: '全部',
|
|
value: 'ALL_SELECT',
|
|
id: 'ALL_SELECT'
|
|
},
|
|
{
|
|
label: '武汉图书馆',
|
|
value: '01',
|
|
id: '133221333123111'
|
|
}
|
|
],
|
|
mulitText: '多选', // 主题库list - 多选操作
|
|
isMultiSelected: false,
|
|
showItemInfo: true, // 判断是否显示画册
|
|
uploadDialogVisible: false, // 上传主题内容 - 弹框
|
|
uploadHistoryVisible: false, // 上传主题历史 - 弹框
|
|
uploadTitle: '上传', // 上传-弹框内
|
|
isUploadThemeType: 0, // 判断上传-新增还是编辑
|
|
uploadForm: { // 上传素材
|
|
class_ids: [
|
|
// 素材类id集合
|
|
],
|
|
deposit_url: null, // 素材存放路径
|
|
device_direction: null, // 横竖屏 1.横屏 2.竖屏,
|
|
duration: null, // 时长s
|
|
material_id: null,
|
|
folder_id: null, // 文件夹id
|
|
img_path: null, // 封面图片id
|
|
material_name: null, // 素材名称
|
|
material_type: null, // 素材类别
|
|
file_size: null, // 文件大小
|
|
orga_id: null, // 机构id
|
|
store_type: null // 库类型 1.素材库 2.主题库
|
|
},
|
|
fileNames: '',
|
|
formatType: -1,
|
|
materialImgPath: null,
|
|
materialDuration: null,
|
|
selectClassifyList: [],
|
|
queryForm: { // 历史list - 搜索
|
|
name: '',
|
|
date: []
|
|
},
|
|
uploadHistoryListData: [], // 上传历史list
|
|
isEditTheme: false,
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
selectContVisible: true
|
|
}
|
|
},
|
|
watch: {
|
|
},
|
|
mounted() {
|
|
// 上传历史list
|
|
this.getThemeHistoryList()
|
|
},
|
|
methods: {
|
|
parent() {
|
|
this.isMyAlbum = this.$refs.ThemeGalleryList.themeItemActive == 2
|
|
console.log(this.$refs.ThemeGalleryList.themeItemActive)
|
|
this.$refs.MyAlbum.selectInFolderid = []
|
|
this.$refs.MyAlbum.getMyAlbum()
|
|
},
|
|
// 机构选择 全选 / 多选
|
|
changeSelect(val) {
|
|
const allValues = []
|
|
// 保留所有值
|
|
for (const item of this.organOptions) {
|
|
allValues.push(item.id)
|
|
}
|
|
// 用来储存上一次的值，可以进行对比
|
|
const oldVal = this.oldSearchClassify.length === 1 ? this.oldSearchClassify[0] : []
|
|
// 若是全部选择
|
|
if (val.includes('ALL_SELECT')) this.searchClassify = allValues
|
|
// 取消全部选中 上次有 当前没有 表示取消全选
|
|
if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchClassify = []
|
|
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
|
|
// 新老数据都有全部选中
|
|
if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
|
|
const index = val.indexOf('ALL_SELECT')
|
|
val.splice(index, 1) // 排除全选选项
|
|
this.searchClassify = val
|
|
}
|
|
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
|
|
if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
|
|
if (val.length === allValues.length - 1) this.searchClassify = ['ALL_SELECT'].concat(val)
|
|
}
|
|
// 储存当前最后的结果 作为下次的老数据
|
|
this.oldSearchClassify[0] = this.searchClassify
|
|
},
|
|
// 编辑分类 - 类型名称选择
|
|
selectName(vId) {
|
|
this.classifyForm.id = vId.id
|
|
this.classifyForm.class_name = vId.class_name
|
|
},
|
|
// 主题库分类菜单 - 新增 / 编辑
|
|
addEditClassify(index) {
|
|
this.addDialogVisible = true
|
|
if (index == 1) {
|
|
this.layerTitle = '编辑'
|
|
this.isAddEdit = 1
|
|
this.tabItem = this.$refs.ThemeGalleryList.tabItem
|
|
this.activeIndex = this.$refs.ThemeGalleryList.activeIndex
|
|
this.classifyForm.class_name = this.tabItem[this.activeIndex].class_name
|
|
this.classifyForm.id = this.tabItem[this.activeIndex].id
|
|
// 利用这个，来判断是否机构全选
|
|
this.isAllSelect = []
|
|
for (const item of this.organOptions) {
|
|
this.isAllSelect.push(item.id)
|
|
}
|
|
const params = {
|
|
theme_class_id: this.classifyForm.id
|
|
}
|
|
FetchFindThemeClassDetails(params).then(res => {
|
|
if (res.code == 200) {
|
|
if (res.data.is_all) {
|
|
this.searchClassify = this.isAllSelect
|
|
} else {
|
|
this.searchClassify.push(res.data.orgs)
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
this.layerTitle = '新增'
|
|
this.isAddEdit = 0
|
|
this.classifyForm.id = null
|
|
this.classifyForm.class_name = ''
|
|
}
|
|
},
|
|
// 新增/编辑 - 分类菜单 - 提交
|
|
submitForm(formName) {
|
|
this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT')
|
|
this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
if (this.searchClassify.length == 0) {
|
|
this.$message.error('请选择所属机构！')
|
|
return false
|
|
}
|
|
FetchAddOrEdit(this.classifyForm).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: this.classifyForm.id ? '编辑成功' : '新增成功'
|
|
})
|
|
this.addDialogVisible = false
|
|
this.searchClassify = []
|
|
this.$refs.ThemeGalleryList.getThemeClassList()
|
|
}
|
|
})
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
// 表单 - 关闭btn
|
|
resetForm(formName) {
|
|
this.addDialogVisible = false
|
|
this.uploadDialogVisible = false
|
|
this.searchClassify = []
|
|
// 上传表单重置
|
|
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[formName].resetFields()
|
|
},
|
|
// list - 多选btn
|
|
multiSelectBtn() {
|
|
this.isMultiSelected = !this.isMultiSelected
|
|
if (this.isMultiSelected) {
|
|
this.mulitText = '取消'
|
|
} else {
|
|
this.mulitText = '多选'
|
|
}
|
|
},
|
|
// 新增 - 上传
|
|
uploadTheme() {
|
|
this.isEditTheme = false
|
|
this.$nextTick(() => {
|
|
this.tabItem = this.$refs.ThemeGalleryList.tabItem
|
|
})
|
|
this.uploadDialogVisible = true
|
|
this.isUploadThemeType = 0
|
|
this.uploadTitle = '新增'
|
|
this.uploadForm.device_direction = 0
|
|
},
|
|
// 编辑 - 上传
|
|
editUploadTheme(row) {
|
|
this.isEditTheme = true
|
|
this.uploadDialogVisible = true
|
|
this.isUploadThemeType = 1
|
|
this.uploadTitle = '编辑'
|
|
this.$nextTick(() => {
|
|
this.tabItem = this.$refs.ThemeGalleryList.tabItem
|
|
const classifyListName = row.classes.split(',')
|
|
if (classifyListName) {
|
|
this.selectClassifyList = []
|
|
this.tabItem.filter(item => {
|
|
if (classifyListName.indexOf(item.class_name) != -1) {
|
|
this.selectClassifyList.push(item.id)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.uploadForm.device_direction = row.device_direction
|
|
this.uploadForm.material_name = row.material_name
|
|
this.fileNames = row.material_name
|
|
this.uploadForm.deposit_url = row.deposit_url
|
|
|
|
this.formatType = row.material_type
|
|
if (this.formatType != 0) {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.childUpload) {
|
|
this.$refs.childUpload.imageUrl = row.img_path
|
|
}
|
|
})
|
|
} else {
|
|
this.uploadForm.img_path = row.deposit_url
|
|
}
|
|
this.uploadForm.material_type = this.formatType
|
|
this.uploadForm.duration = row.duration
|
|
this.uploadForm.file_size = row.file_size
|
|
this.uploadForm.material_id = row.material_id
|
|
},
|
|
// 素材上传完之后 - 获取相关info
|
|
saveMaterial() {
|
|
const formatType = this.$refs.uploadMaterial.formatType
|
|
const uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl
|
|
// 视频和音频的时长
|
|
const duration = this.$refs.uploadMaterial.duration
|
|
switch (formatType) {
|
|
case 'image':
|
|
this.formatType = 0
|
|
this.materialImgPath = uploadFileUrl
|
|
this.materialDuration = 0
|
|
break
|
|
case 'video':
|
|
this.formatType = 1
|
|
this.materialDuration = duration
|
|
this.materialImgPath = null
|
|
break
|
|
case 'audio':
|
|
this.formatType = 2
|
|
this.materialDuration = duration
|
|
this.materialImgPath = null
|
|
break
|
|
}
|
|
this.uploadForm.deposit_url = uploadFileUrl
|
|
this.fileNames = this.$refs.uploadMaterial.fileNames
|
|
this.uploadForm.material_name = this.$refs.uploadMaterial.fileNames
|
|
this.uploadForm.material_type = this.formatType
|
|
this.uploadForm.file_size = this.$refs.uploadMaterial.fileSize
|
|
this.uploadForm.img_path = this.materialImgPath
|
|
this.uploadForm.duration = this.materialDuration
|
|
},
|
|
// 上传 - 提交btn
|
|
uploadSubmit(formName) {
|
|
if (this.isEditTheme) {
|
|
this.$nextTick(() => {
|
|
if (this.$refs.childUpload) {
|
|
this.uploadForm.img_path = this.$refs.childUpload.imageUrl
|
|
}
|
|
})
|
|
}
|
|
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
|
|
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
|
|
}
|
|
})
|
|
this.$refs.uploadForm.resetFields()
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
}, 200)
|
|
},
|
|
// 上传历史list - 主题库
|
|
getThemeHistoryList(pager = 1) {
|
|
this.page = pager
|
|
let start_time = ''
|
|
let end_time = ''
|
|
if (this.queryForm.date) {
|
|
start_time = this.queryForm.date[0]
|
|
end_time = this.queryForm.date[1]
|
|
} else {
|
|
start_time = end_time = null
|
|
}
|
|
const params = {
|
|
theme_name: this.queryForm.name,
|
|
theme_class: null,
|
|
device_direction: null,
|
|
orga_id: null,
|
|
start_time: start_time,
|
|
end_time: end_time,
|
|
folder_id: null,
|
|
page: this.page,
|
|
size: this.size
|
|
}
|
|
FetchThemeHistoryList(params).then(res => {
|
|
if (res.code === 200) {
|
|
this.uploadHistoryListData = res.data.content
|
|
this.total = res.data.totalElements
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
},
|
|
// 每条显示数据改变时的事件
|
|
handleSizeChange(size) {
|
|
// 整理参数
|
|
this.size = size
|
|
this.getThemeHistoryList()
|
|
},
|
|
// 上传历史-停用/恢复
|
|
isStopHandle(row) {
|
|
row.is_state = row.is_state == 1 ? 2 : 1
|
|
const params = {
|
|
id: row.material_id,
|
|
state: row.is_state
|
|
}
|
|
FetchUpdateThemeState(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message.success(res.msg)
|
|
this.getThemeHistoryList()
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
},
|
|
// 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消
|
|
changedMultiSelected() {
|
|
if (this.isMultiSelected) {
|
|
this.isMultiSelected = false
|
|
this.mulitText = '多选'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.theme_main {
|
|
position: relative;
|
|
padding: 0;
|
|
background: none;
|
|
::v-deep .el-tabs {
|
|
height: 55px;
|
|
padding: 0 24px;
|
|
margin-bottom: 24px;
|
|
line-height: 55px;
|
|
background: #fff;
|
|
}
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
display: none;
|
|
}
|
|
::v-deep .el-tabs__active-bar {
|
|
display: none;
|
|
}
|
|
::v-deep .theme_item_tab {
|
|
margin-bottom: 0;
|
|
.el-tabs__header {
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
::v-deep .theme_img {
|
|
align-content: flex-start;
|
|
height: calc(100vh - 246px);
|
|
padding: 18px 24px 0 24px;
|
|
overflow-y: auto;
|
|
background: #fff;
|
|
}
|
|
.material_btn {
|
|
top: 93px;
|
|
}
|
|
}
|
|
.upload_layer {
|
|
.query_history {
|
|
display: flex;
|
|
margin-top: -16px;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
.el-form-item__label {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.el-input__inner {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.el-range-separator {
|
|
line-height: 26px;
|
|
}
|
|
.el-checkbox__label {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
.upload_source {
|
|
::v-deep .el-form-item__content{
|
|
display: flex;
|
|
}
|
|
.source_cont{
|
|
margin-right: 20px;
|
|
p{
|
|
font-size: 12px;
|
|
padding: 0 10px;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
video{
|
|
display: block;
|
|
}
|
|
audio{
|
|
display: block;
|
|
}
|
|
img{
|
|
display: block;
|
|
}
|
|
}
|
|
::v-deep .components_upload{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
text-align: center;
|
|
width: 128px;
|
|
height: 120px;
|
|
font-size: 14px;
|
|
border: 1px dashed #dcdde3;
|
|
background: #f2f7ff;
|
|
border-radius: 6px;
|
|
.cont_upload_btn{
|
|
display: block;
|
|
width: 100px;
|
|
height: 34px;
|
|
font-size: 14px;
|
|
left: 50%;
|
|
top: 14px;
|
|
margin-left: -50px;
|
|
}
|
|
#upFile{
|
|
margin: 0 auto;
|
|
}
|
|
.start_upload{
|
|
display: block;
|
|
width: 100px;
|
|
height: 34px;
|
|
color: #fff;
|
|
text-align: center;
|
|
border: none;
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e);
|
|
border-radius: 34px;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
.tag_list{
|
|
::v-deep .el-tag{
|
|
margin: 0 5px 5px 0;
|
|
}
|
|
}
|
|
</style>
|