Browse Source

主题库

dev
xuhuajiao 3 years ago
parent
commit
26a8369e79
  1. 18
      src/api/theme/theme.js
  2. 471
      src/views/ThemeGallery/index.vue
  3. 277
      src/views/components/ThemeGalleryList.vue
  4. 35
      src/views/components/upload.vue
  5. 3
      src/views/materialContent/materialList/index.vue
  6. 6
      src/views/publishContent/publishList/index.vue

18
src/api/theme/theme.js

@ -27,3 +27,21 @@ export function FetchAddOrEdit(parameter) {
data: parameter
})
}
// 主题库素材历史列表
export function FetchThemeHistoryList(parameter) {
return request({
url: 'api/material/getThemeHistoryList',
method: 'get',
params: parameter
})
}
// 改变素材库状态
export function FetchUpdateThemeState(parameter) {
return request({
url: 'api/material/updateState',
method: 'post',
data: parameter
})
}

471
src/views/ThemeGallery/index.vue

@ -1,31 +1,26 @@
<template>
<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 -->
<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="upload()">上传</el-button>
<el-button round class="el_button_red" @click="uploadTheme()">上传</el-button>
</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">
<!-- @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>
</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">
@ -68,41 +63,134 @@
</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>
<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" 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>
</template>
<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 Upload from '../components/upload'
import UploadCover from '../components/upload_cover'
import { parseTime } from '@/utils/index.js'
export default {
name: 'ThemeGallery',
components: { ThemeGalleryList },
components: { ThemeGalleryList, UploadCover, Upload },
filters: {
parseTime(time, cFormat) {
return parseTime(time, cFormat)
}
},
data() {
return {
isTheme: true,
orga_id: '133221333123111', // ID
addDialogVisible: false, // -
layerTitle: '新增',
isAddEdit: 0, //
classifyForm: { // form
class_name: '',
is_all: false,
id: '',
orga_ids: []
},
tabItem: [], // data
searchClassify: [], //
oldSearchClassify: [],
addDialogVisible: false,
layerTitle: '新增',
isAddEdit: 0, //
mulitText: '多选',
isMultiSelected: false,
showItemInfo: true,
themeItemActive: '1',
uploadDialogVisible: false,
uploadTitle: '上传',
organOptions: [ // list-data
{
label: '全部',
@ -115,24 +203,53 @@ export default {
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() {
this.getThemeClassList()
// list
this.getThemeHistoryList()
},
methods: {
// id
getThemeClassList() {
const { orga_id } = this
FetchThemeClassList(orga_id).then(res => {
if (res.code == 200) {
this.tabItem = res.data
}
})
},
// /
changeSelect(val) {
const allValues = []
@ -171,6 +288,8 @@ export default {
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
// if (this.classifyForm.is_all) {
@ -186,7 +305,7 @@ export default {
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
@ -204,7 +323,7 @@ export default {
})
this.addDialogVisible = false
this.searchClassify = []
this.getThemeClassList()
this.$refs.ThemeGalleryList.getThemeClassList()
}
})
} else {
@ -213,22 +332,14 @@ export default {
}
})
},
// - btn
resetForm(formName) {
this.addDialogVisible = false
this.uploadDialogVisible = false
this.searchClassify = []
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() {
this.isMultiSelected = !this.isMultiSelected
if (this.isMultiSelected) {
@ -237,14 +348,190 @@ export default {
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 {
.query_history {
display: flex;
margin-top: -16px;
}
::v-deep .el-dialog__body {
.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>

277
src/views/components/ThemeGalleryList.vue

@ -1,80 +1,13 @@
<template>
<div>
<!-- 平台技术人员-上传 -->
<el-dialog append-to-body :show-close="false" :visible.sync="uploadDialogVisible" :title="uploadTitle" class="upload_layer">
<el-form ref="classifyForm" :model="classifyForm" :rules="rules" size="small" label-width="80px">
<el-form-item label="类别名称" prop="tabItem">
<el-checkbox-group v-model="classifyForm.selectNameList" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in tabItem" :key="item.id" :label="item.id">{{ item.class_name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="设备方向" prop="direction">
<el-radio-group v-model="classifyForm.direction" @change="clearCheckbox">
<el-radio :label="1" value="across">横屏</el-radio>
<el-radio :label="2" value="vertical">竖屏</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="文件名称">
<el-input v-model="classifyForm.name" style="width:336px" />
</el-form-item> -->
<el-form-item label="上传内容" prop="img_path">
<img v-if="formatType==0" :src="imgSrc" alt="" width="200" height="150" />
<video v-else-if="formatType==1" width="320" height="240" controls>
<source :src="videoSrc" type="video/mp4" />
</video>
<audio v-else width="200" height="150" controls>
<source :src="audioSrc" />
</audio>
<Upload ref="uploadMaterial" @saveMaterial="saveMaterial" />
</el-form-item>
<el-form-item v-if="formatType != 0" el-form-item label="上传封面" prop="img_path">
<UploadCover ref="childUpload" />
</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">关闭</el-button>
</div>
</el-dialog>
<!-- 上传历史layer -->
<div class="upload_layer">
<el-dialog title="上传历史" :close-on-click-modal="false" :visible.sync="uploadListVisible" height="384px">
<el-form ref="form" :model="form" label-width="80px" class="query_history">
<el-form-item label="文件名称">
<el-input v-model="form.name" style="width:200px" />
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="form.date" type="daterange" range-separator="" start-placeholder="开始日期" end-placeholder="结束日期" />
</el-form-item>
</el-form>
<el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
<el-table-column align="center" prop="name" label="文件名称" />
<el-table-column align="center" prop="cover" label="发布内容">
<template slot-scope="scope">
<div>
<img width="48px" height="64px" size="medium" :src="scope.row.cover" />
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="type" label="类别名称" />
<el-table-column align="center" prop="direction" label="设备方向">
<template slot-scope="scope">
{{ scope.row.direction ? "竖屏" : "横屏" }}
</template>
</el-table-column>
<el-table-column align="center" prop="agency" label="所属机构" />
<el-table-column align="center" prop="date" label="上传时间" width="150" />
<el-table-column align="center" prop="publisher" label="发布人" />
<el-table-column align="center" prop="handle" label="操作">
<template slot-scope="scope">
<el-button type="primary" class="edit_btn" @click="saveMaterial(scope.$index, scope.row)">编辑</el-button>
<el-button type="primary" :class="['start_btn', { stop_btn: scope.row.enabled }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
<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>
<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 class="theme_img">
<!-- 我的画册-创建文件夹btn -->
<div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir">
@ -141,7 +74,6 @@
</div>
</el-dialog>
</div>
<!-- 移动至layer -->
<div class="wjj_layer">
<!-- width="736px" -->
@ -160,17 +92,13 @@
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { FetchThemeGallery } from '@/api/theme/theme.js'
// import { saveMaterial } from '@/api/material/material'
import Upload from './upload'
import UploadCover from './upload_cover'
import { FetchThemeClassList, FetchThemeGallery } from '@/api/theme/theme.js'
export default {
name: 'ThemeGalleryList',
components: { UploadCover, Upload },
components: {},
props: {
isMultiSelected: {
type: Boolean,
@ -187,35 +115,6 @@ export default {
},
data() {
return {
orga_id: '133221333123111', // ID
queryInfo: {
theme_name: '', //
theme_class: '', //
device_direction: null, //
orga_id: 133221333123111,
start_time: '', //
end_time: '', //
folder_id: '', // id
page: 1,
size: 3
},
// id
class_ids: [],
// lsit
tabItem: [],
uploadFileUrl: null, //
classifyForm: {
class_name: '',
is_all_name: '',
is_all: false,
id: '',
orga_ids: ['133221333123111'],
selectName: null,
direction: 1, //
selectNameList: [],
img_path: ''
},
total: 0,
themeItemActive: '1',
mkdirVisible: false,
movingVisible: false,
@ -295,37 +194,14 @@ export default {
],
uploadDialogVisible: false,
uploadTitle: '上传',
rules: {
// name: [{ required: true, message: '', trigger: 'blur' }],
selectName: [
{ required: true, message: '请选择类别名称', trigger: 'change' }
],
selectNameList: [
{ required: true, message: '请选择类别名称', trigger: 'change' }
],
is_all: [
{ required: true, message: '请选择所属机构', trigger: 'change' }
],
direction: [
{ required: true, message: '请选择设备方向', trigger: 'change' }
]
},
uploadListVisible: false,
uploadData: [
{
name: '图片1',
cover: require('@/assets/images/background.jpg'),
type: '为你推荐',
direction: 0,
agency: '全部',
date: '2022-1-1 15:00',
publisher: '张三',
enabled: false
}
],
imgSrc: '',
videoSrc: '',
audioSrc: ''
audioSrc: '',
// lsit
tabItem: [],
activeIndex: 0
}
},
watch: {
@ -336,75 +212,81 @@ export default {
}
},
mounted() {
this.getThemeClassList()
this.getThemeGallery()
},
methods: {
// list
getThemeGallery() {
const params = this.queryInfo
FetchThemeGallery(params).then(res => {
console.log(res)
// id
getThemeClassList() {
const { orga_id } = this
FetchThemeClassList(orga_id).then(res => {
if (res.code == 200) {
this.themeGalleryList = res.data.content
console.log(this.themeGalleryList)
this.total = res.data.totalElements
this.tabItem = res.data
}
})
},
clearCheckbox(label) {
this.classifyForm.direction = label
console.log(this.classifyForm.direction)
},
//
handleCheckedCitiesChange(val) {
const class_ids = []
val.forEach(item => {
class_ids.push(item)
})
// list
getThemeGallery() {
const params = this.queryInfo
// FetchThemeGallery(params).then(res => {
// console.log(res)
// if (res.code == 200) {
// this.themeGalleryList = res.data.content
// console.log(this.themeGalleryList)
// this.total = res.data.totalElements
// }
// })
},
//
saveMaterial() {
console.log('-----------')
console.log(this.formatType)
this.uploadDialogVisible = true
this.$nextTick(() => {
if (formatType == 0) {
this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl
} else if (formatType == 1) {
this.videoSrc = this.$refs.uploadMaterial.uploadFileUrl
} else {
this.audioSrc = this.$refs.uploadMaterial.uploadFileUrl
}
// console.log(this.formatType)
const duration = this.$refs.uploadMaterial.duration
this.fileSize = this.$refs.uploadMaterial.fileSize
//
this.materialName = this.$refs.uploadMaterial.fileNames
//
const formatType = this.$refs.uploadMaterial.formatType
console.log(this.$refs.uploadMaterial.uploadFileUrl)
})
const params = {
class_ids: this.class_ids, // id
deposit_url: this.uploadFileUrl, //
device_direction: this.classifyForm.direction, //
material_id: null,
folder_id: null, // id
img_path: this.materialImgPath, // id
material_type: this.formatType,
file_size: this.fileSize, //
orga_id: this.queryInfo.orga_id, // id
store_type: 2// 1. 2.
}
// -
tabThemeClassifyClick(tab) {
this.activeIndex = tab.index
},
resetForm() {
this.addDialogVisible = false
this.uploadDialogVisible = false
this.$refs.classifyForm.resetFields()
// tabClick
tabItemClick(tab, event) {
console.log(this.themeItemActive)
console.log(tab, event)
},
//
// saveMaterial() {
// console.log('-----------')
// console.log(this.formatType)
// this.uploadDialogVisible = true
// this.$nextTick(() => {
// if (formatType == 0) {
// this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl
// } else if (formatType == 1) {
// this.videoSrc = this.$refs.uploadMaterial.uploadFileUrl
// } else {
// this.audioSrc = this.$refs.uploadMaterial.uploadFileUrl
// }
// // console.log(this.formatType)
// const duration = this.$refs.uploadMaterial.duration
// this.fileSize = this.$refs.uploadMaterial.fileSize
// //
// this.materialName = this.$refs.uploadMaterial.fileNames
// //
// const formatType = this.$refs.uploadMaterial.formatType
// console.log(this.$refs.uploadMaterial.uploadFileUrl)
// })
// const params = {
// class_ids: this.class_ids, // id
// deposit_url: this.uploadFileUrl, //
// device_direction: this.classifyForm.direction, //
// material_id: null,
// folder_id: null, // id
// img_path: this.materialImgPath, // id
// material_type: this.formatType,
// file_size: this.fileSize, //
// orga_id: this.queryInfo.orga_id, // id
// store_type: 2// 1. 2.
// }
// },
// resetForm() {
// this.addDialogVisible = false
// this.uploadDialogVisible = false
// this.$refs.classifyForm.resetFields()
// },
//
handleMkdir() {
this.mkdirVisible = true
@ -441,7 +323,6 @@ export default {
}
)
}
}
}
</script>

35
src/views/components/upload.vue

@ -1,13 +1,17 @@
<template>
<div class="components_upload">
<el-button class="cont_upload_btn" round type="primary">上传</el-button>
<input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
<input type="button" name="开始上传" value="开始上传" @click="uploadFile()" />
<div v-if="isTheme">
<el-button class="cont_upload_btn" round type="primary">选择文件</el-button>
<input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
</div>
<el-button v-if="!isTheme" class="cont_upload_btn" round type="primary">上传</el-button>
<input v-if="!isTheme" id="upFile" type="file" name="upFile" @change="changeFile($event)" />
<input type="button" name="开始上传" value="开始上传" class="start_upload" @click="uploadFile()" />
<!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> -->
<el-progress :percentage="filePercent" />
{{ filePercent }}
<el-progress v-if="filePercent" :percentage="filePercent" />
<!-- {{ filePercent }} -->
<!-- 上传列表layer -->
<div class="upload_layer">
<div v-if="!isTheme" class="upload_layer">
<!-- width="736px" -->
<el-dialog
title="上传列表"
@ -73,6 +77,12 @@ import * as qiniu from 'qiniu-js'
import { getQiniuToken } from '@/api/upload/upload'
export default {
name: 'Qiniu',
props: {
isTheme: {
type: Boolean,
required: true
}
},
data() {
return {
file: null,
@ -152,7 +162,6 @@ export default {
uploadFile() {
// VUEthis _this this
const _this = this
// token
const token = _this.token
console.log(token)
@ -228,12 +237,12 @@ export default {
}
#upFile{
display: block;
width: 114px;
height: 34px;
padding: 0;
font-size: 14px;
border: none;
opacity: 0;
width: 114px;
height: 34px;
padding: 0;
font-size: 14px;
border: none;
opacity: 0;
}
.cont_upload_btn{
position: absolute;

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

@ -157,8 +157,7 @@ export default {
movingVisible: false,
uploadListData: [ //
],
folderListChecked: -1,
wjjList: []
folderListChecked: -1
}
},
computed: {

6
src/views/publishContent/publishList/index.vue

@ -7,8 +7,8 @@
<el-table-column label="文件名称" align="center" prop="relaase_name" />
<el-table-column label="发布内容" align="center" prop="content">
<template slot-scope="scope">
<div>
<img width="100px" size="medium" :src="scope.row.release_first_img" />
<div v-if="scope.row.release_first_img">
<img width="48px" height="63px" size="medium" :src="scope.row.release_first_img" />
</div>
</template>
</el-table-column>
@ -210,7 +210,7 @@ export default {
.publish_table {
.tag_list {
text-align: left;
// text-align: left;
.el-tag {
height: 26px;
line-height: 26px;

Loading…
Cancel
Save