|
|
@ -1,31 +1,26 @@ |
|
|
<template> |
|
|
<template> |
|
|
|
|
|
|
|
|
<div class="app-container theme_main"> |
|
|
<div class="app-container theme_main"> |
|
|
<el-tabs v-model="activeIndex" @tab-click="tabThemeClassifyClick"> |
|
|
|
|
|
<el-tab-pane v-for="(item,index) in tabItem" :key="index" :label="item.class_name" :name="item.name" /> |
|
|
|
|
|
</el-tabs> |
|
|
|
|
|
<!-- 右上角btn --> |
|
|
<!-- 右上角btn --> |
|
|
<div class="home_publish_btn"> |
|
|
<div class="home_publish_btn"> |
|
|
<el-button round class="el_button_green" @click="addEditClassify(0)">新增</el-button> |
|
|
<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 type="primary" @click="addEditClassify(1)">编辑</el-button> |
|
|
<el-button round class="el_button_red" @click="upload()">上传</el-button> |
|
|
|
|
|
|
|
|
<el-button round class="el_button_red" @click="uploadTheme()">上传</el-button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
|
|
|
<el-tabs v-if="showItemInfo" v-model="themeItemActive" class="theme_item_tab" @tab-click="tabItemClick"> |
|
|
|
|
|
<el-tab-pane label="竖屏" name="1" /> |
|
|
|
|
|
<el-tab-pane label="横屏" name="2" /> |
|
|
|
|
|
<el-tab-pane label="我的画册" name="3" /> |
|
|
|
|
|
</el-tabs> |
|
|
|
|
|
|
|
|
<div style="position:relative"> |
|
|
|
|
|
<!-- 主题库list --> |
|
|
|
|
|
<ThemeGalleryList |
|
|
|
|
|
ref="ThemeGalleryList" |
|
|
|
|
|
:is-multi-selected="isMultiSelected" |
|
|
|
|
|
:mulit-text="mulitText" |
|
|
|
|
|
:show-item-info="showItemInfo" |
|
|
|
|
|
:tab-item="tabItem" |
|
|
|
|
|
/> |
|
|
<div class="material_btn"> |
|
|
<div class="material_btn"> |
|
|
<!-- @click="uploadListVisible=true" --> |
|
|
|
|
|
<el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button> |
|
|
|
|
|
|
|
|
<el-button round type="primary" @click="uploadHistoryVisible=true">上传历史</el-button> |
|
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button> |
|
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="position:relative"> |
|
|
|
|
|
<!-- 主题库list --> |
|
|
|
|
|
<ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="showItemInfo" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 平台技术人员-新增/编辑分类 --> |
|
|
<!-- 平台技术人员-新增/编辑分类 --> |
|
|
<div class="upload_layer"> |
|
|
<div class="upload_layer"> |
|
|
@ -68,41 +63,134 @@ |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</el-form> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">保存</el-button> |
|
|
|
|
|
<el-button round @click="resetForm('classifyForm')">关闭</el-button> |
|
|
|
|
|
|
|
|
<el-button type="primary" round @click="submitForm('classifyForm')">保 存</el-button> |
|
|
|
|
|
<el-button round @click="resetForm('classifyForm')">关 闭</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
</div> |
|
|
</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" 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('uploadForm')">确 定</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> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { FetchThemeClassList, FetchAddOrEdit } from '@/api/theme/theme.js' |
|
|
|
|
|
|
|
|
import { FetchAddOrEdit, FetchThemeHistoryList, FetchUpdateThemeState } from '@/api/theme/theme.js' |
|
|
|
|
|
import { saveMaterial } from '@/api/material/material' |
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue' |
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue' |
|
|
|
|
|
import Upload from '../components/upload' |
|
|
|
|
|
import UploadCover from '../components/upload_cover' |
|
|
|
|
|
import { parseTime } from '@/utils/index.js' |
|
|
export default { |
|
|
export default { |
|
|
name: 'ThemeGallery', |
|
|
name: 'ThemeGallery', |
|
|
components: { ThemeGalleryList }, |
|
|
|
|
|
|
|
|
components: { ThemeGalleryList, UploadCover, Upload }, |
|
|
|
|
|
filters: { |
|
|
|
|
|
parseTime(time, cFormat) { |
|
|
|
|
|
return parseTime(time, cFormat) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
isTheme: true, |
|
|
orga_id: '133221333123111', // 机构ID |
|
|
orga_id: '133221333123111', // 机构ID |
|
|
|
|
|
addDialogVisible: false, // 新增编辑-分类弹框 |
|
|
|
|
|
layerTitle: '新增', |
|
|
|
|
|
isAddEdit: 0, // 判断分类菜单是新增还是编辑 |
|
|
classifyForm: { // 主题库分类菜单form |
|
|
classifyForm: { // 主题库分类菜单form |
|
|
class_name: '', |
|
|
class_name: '', |
|
|
is_all: false, |
|
|
is_all: false, |
|
|
id: '', |
|
|
id: '', |
|
|
orga_ids: [] |
|
|
orga_ids: [] |
|
|
}, |
|
|
}, |
|
|
|
|
|
tabItem: [], // 分类菜单data |
|
|
searchClassify: [], // 机构选择多选操作 |
|
|
searchClassify: [], // 机构选择多选操作 |
|
|
oldSearchClassify: [], |
|
|
oldSearchClassify: [], |
|
|
addDialogVisible: false, |
|
|
|
|
|
layerTitle: '新增', |
|
|
|
|
|
isAddEdit: 0, // 判断分类菜单是新增还是编辑 |
|
|
|
|
|
mulitText: '多选', |
|
|
|
|
|
isMultiSelected: false, |
|
|
|
|
|
showItemInfo: true, |
|
|
|
|
|
themeItemActive: '1', |
|
|
|
|
|
uploadDialogVisible: false, |
|
|
|
|
|
uploadTitle: '上传', |
|
|
|
|
|
organOptions: [ // 机构list-data |
|
|
organOptions: [ // 机构list-data |
|
|
{ |
|
|
{ |
|
|
label: '全部', |
|
|
label: '全部', |
|
|
@ -115,24 +203,53 @@ export default { |
|
|
id: '133221333123111' |
|
|
id: '133221333123111' |
|
|
} |
|
|
} |
|
|
], |
|
|
], |
|
|
// 导航栏的lsit |
|
|
|
|
|
tabItem: [], |
|
|
|
|
|
activeIndex: 0 |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.getThemeClassList() |
|
|
|
|
|
|
|
|
// 上传历史list |
|
|
|
|
|
this.getThemeHistoryList() |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
// 根据机构id查询主题库分类列表 |
|
|
|
|
|
getThemeClassList() { |
|
|
|
|
|
const { orga_id } = this |
|
|
|
|
|
FetchThemeClassList(orga_id).then(res => { |
|
|
|
|
|
if (res.code == 200) { |
|
|
|
|
|
this.tabItem = res.data |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
// 机构选择 全选 / 多选 |
|
|
// 机构选择 全选 / 多选 |
|
|
changeSelect(val) { |
|
|
changeSelect(val) { |
|
|
const allValues = [] |
|
|
const allValues = [] |
|
|
@ -171,6 +288,8 @@ export default { |
|
|
if (index == 1) { |
|
|
if (index == 1) { |
|
|
this.layerTitle = '编辑' |
|
|
this.layerTitle = '编辑' |
|
|
this.isAddEdit = 1 |
|
|
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.class_name = this.tabItem[this.activeIndex].class_name |
|
|
this.classifyForm.id = this.tabItem[this.activeIndex].id |
|
|
this.classifyForm.id = this.tabItem[this.activeIndex].id |
|
|
// if (this.classifyForm.is_all) { |
|
|
// if (this.classifyForm.is_all) { |
|
|
@ -186,7 +305,7 @@ export default { |
|
|
this.classifyForm.class_name = '' |
|
|
this.classifyForm.class_name = '' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 新增编辑 |
|
|
|
|
|
|
|
|
// 新增/编辑 - 分类菜单 - 提交 |
|
|
submitForm(formName) { |
|
|
submitForm(formName) { |
|
|
this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT') |
|
|
this.classifyForm.is_all = !!this.searchClassify.includes('ALL_SELECT') |
|
|
this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify |
|
|
this.classifyForm.orga_ids = this.searchClassify.includes('ALL_SELECT') ? [] : this.searchClassify |
|
|
@ -204,7 +323,7 @@ export default { |
|
|
}) |
|
|
}) |
|
|
this.addDialogVisible = false |
|
|
this.addDialogVisible = false |
|
|
this.searchClassify = [] |
|
|
this.searchClassify = [] |
|
|
this.getThemeClassList() |
|
|
|
|
|
|
|
|
this.$refs.ThemeGalleryList.getThemeClassList() |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
} else { |
|
|
} else { |
|
|
@ -213,22 +332,14 @@ export default { |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
// 表单 - 关闭btn |
|
|
resetForm(formName) { |
|
|
resetForm(formName) { |
|
|
this.addDialogVisible = false |
|
|
this.addDialogVisible = false |
|
|
this.uploadDialogVisible = false |
|
|
this.uploadDialogVisible = false |
|
|
this.searchClassify = [] |
|
|
this.searchClassify = [] |
|
|
this.$refs[formName].resetFields() |
|
|
this.$refs[formName].resetFields() |
|
|
}, |
|
|
}, |
|
|
// 主题分类菜单-操作 |
|
|
|
|
|
tabThemeClassifyClick(tab) { |
|
|
|
|
|
this.activeIndex = tab.index |
|
|
|
|
|
}, |
|
|
|
|
|
// tabClick |
|
|
|
|
|
tabItemClick(tab, event) { |
|
|
|
|
|
console.log(this.themeItemActive) |
|
|
|
|
|
console.log(tab, event) |
|
|
|
|
|
}, |
|
|
|
|
|
// 多选btn |
|
|
|
|
|
|
|
|
// list - 多选btn |
|
|
multiSelectBtn() { |
|
|
multiSelectBtn() { |
|
|
this.isMultiSelected = !this.isMultiSelected |
|
|
this.isMultiSelected = !this.isMultiSelected |
|
|
if (this.isMultiSelected) { |
|
|
if (this.isMultiSelected) { |
|
|
@ -237,14 +348,190 @@ export default { |
|
|
this.mulitText = '多选' |
|
|
this.mulitText = '多选' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
// 新增 - 上传 |
|
|
|
|
|
uploadTheme() { |
|
|
|
|
|
this.isEditTheme = false |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
this.tabItem = this.$refs.ThemeGalleryList.tabItem |
|
|
|
|
|
}) |
|
|
|
|
|
this.uploadDialogVisible = true |
|
|
|
|
|
this.isUploadThemeType = 0 |
|
|
|
|
|
this.uploadTitle = '新增' |
|
|
|
|
|
}, |
|
|
|
|
|
// 编辑 - 上传 |
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
const postfix = row.deposit_url.substring(row.deposit_url.lastIndexOf('.') + 1, row.deposit_url.length) |
|
|
|
|
|
if (postfix == 'mp3') { |
|
|
|
|
|
this.formatType = 2 |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
if (this.$refs.childUpload) { |
|
|
|
|
|
this.$refs.childUpload.imageUrl = row.img_path |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} else if (postfix == 'mp4') { |
|
|
|
|
|
this.formatType = 1 |
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
|
if (this.$refs.childUpload) { |
|
|
|
|
|
this.$refs.childUpload.imageUrl = row.img_path |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} else if (postfix == ('jpg' || 'png' || 'gif')) { |
|
|
|
|
|
this.formatType = 0 |
|
|
|
|
|
} |
|
|
|
|
|
// this.materialImgPath = row.img_path |
|
|
|
|
|
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() { |
|
|
|
|
|
console.log(this.$refs.uploadMaterial) |
|
|
|
|
|
console.log(this.$refs.uploadMaterial.uploadFileUrl) |
|
|
|
|
|
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 |
|
|
|
|
|
// 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.$refs.uploadForm.resetFields() |
|
|
|
|
|
} else { |
|
|
|
|
|
this.$message.error(res.msg) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, 200) |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log('error submit!!') |
|
|
|
|
|
return false |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
// 上传历史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(index, row) { |
|
|
|
|
|
row.enabled = !row.enabled |
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
// 上传 |
|
|
|
|
|
upload() { |
|
|
|
|
|
// 通知子组件发请求 |
|
|
|
|
|
this.$refs.ThemeGalleryList.saveMaterial() |
|
|
|
|
|
|
|
|
// 当复选框发生改变的时候 |
|
|
|
|
|
handleCheckedCitiesChange(val) { |
|
|
|
|
|
// const class_ids = [] |
|
|
|
|
|
// val.forEach(item => { |
|
|
|
|
|
// class_ids.push(item) |
|
|
|
|
|
// }) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -288,6 +575,7 @@ export default { |
|
|
.upload_layer { |
|
|
.upload_layer { |
|
|
.query_history { |
|
|
.query_history { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
margin-top: -16px; |
|
|
} |
|
|
} |
|
|
::v-deep .el-dialog__body { |
|
|
::v-deep .el-dialog__body { |
|
|
.el-form-item__label { |
|
|
.el-form-item__label { |
|
|
@ -306,4 +594,67 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.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> |
|
|
</style> |
