18 changed files with 3802 additions and 30 deletions
-
16src/api/login.js
-
9src/api/system/role.js
-
9src/api/system/user.js
-
1src/router/index.js
-
14src/router/routers.js
-
11src/store/modules/user.js
-
98src/views/content/material/index.vue
-
674src/views/content/material/materialList/index.vue
-
139src/views/content/publish/historyList/index.vue
-
65src/views/content/publish/index.vue
-
224src/views/content/publish/publishList/index.vue
-
530src/views/content/publish/urgentMessage/index.vue
-
713src/views/content/theme/index.vue
-
530src/views/device/config/index.vue
-
363src/views/device/list/index.vue
-
6src/views/login.vue
-
31src/views/system/user/index.vue
-
399src/views/user/menu1.vue
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="content_warp"> |
||||
|
<el-tabs v-model="activeIndex" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="全部" name="0" /> |
||||
|
<el-tab-pane name="1"> |
||||
|
<span slot="label"> |
||||
|
图片<i class="emrgencyCount">{{ imgNum }}</i> |
||||
|
</span> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane name="2"> |
||||
|
<span slot="label"> |
||||
|
视频<i class="emrgencyCount">{{ videoNum }}</i> |
||||
|
</span> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane name="3"> |
||||
|
<span slot="label"> |
||||
|
音频<i class="emrgencyCount">{{ audioNum }}</i> |
||||
|
</span> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
<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> |
||||
|
<el-button round @click="multiSelectBtn">{{ mulitText }}</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import MaterialList from './materialList/index' |
||||
|
export default { |
||||
|
name: 'MaterialContent', |
||||
|
components: { MaterialList }, |
||||
|
data() { |
||||
|
return { |
||||
|
activeIndex: 0 || '0', |
||||
|
isMultiSelected: false, |
||||
|
mulitText: '多选', |
||||
|
audioNum: 0, |
||||
|
imgNum: 0, |
||||
|
videoNum: 0 |
||||
|
} |
||||
|
}, |
||||
|
mounted: function() { |
||||
|
setTimeout(() => { |
||||
|
this.audioNum = this.$refs.MaterialList.audioNum |
||||
|
this.imgNum = this.$refs.MaterialList.imgNum |
||||
|
this.videoNum = this.$refs.MaterialList.videoNum |
||||
|
}, 1000) |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick(tab) { |
||||
|
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() |
||||
|
}, |
||||
|
multiSelectBtn() { |
||||
|
this.isMultiSelected = !this.isMultiSelected |
||||
|
this.mulitText = this.isMultiSelected ? '取消' : '多选' |
||||
|
}, |
||||
|
// 有选择中的文件夹时，同时存在素材多选操作时，素材多选操作取消 |
||||
|
changedMultiSelected() { |
||||
|
if (this.isMultiSelected) { |
||||
|
this.isMultiSelected = false |
||||
|
this.mulitText = '多选' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app-container { |
||||
|
position: relative; |
||||
|
padding: 6px 0 20px 0; |
||||
|
} |
||||
|
.emrgencyCount{ |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,674 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-if="isToFolder" class="material_crumbs"> |
||||
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
||||
|
<el-breadcrumb-item><a href="/content">素材库</a></el-breadcrumb-item> |
||||
|
<el-breadcrumb-item>{{ currentFolder }}</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
<div class="material_content"> |
||||
|
<!-- 上传 / 创建文件夹 --> |
||||
|
<div class="material_item cont_upload"> |
||||
|
<Upload ref="uploadMaterial" :is-theme="isTheme" @saveMaterial="saveMaterial" /> |
||||
|
<el-button v-if="!isToFolder && tabType == null" class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button> |
||||
|
<el-button v-if="isToFolder" class="return_btn" round type="primary"><a href="/content">返回</a></el-button> |
||||
|
</div> |
||||
|
<!-- 文件夹list --> |
||||
|
<div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)"> |
||||
|
<div class="icon_bg"> |
||||
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-wenjianjia" /> |
||||
|
</svg> |
||||
|
<img v-else :src="item.imgPath" /> |
||||
|
</div> |
||||
|
<p class="file_name">{{ item.name }}</p> |
||||
|
<span v-if="folderChecked == index" class="checked_btn"></span> |
||||
|
</div> |
||||
|
<!-- 素材库list --> |
||||
|
<div v-for="(item, index) in materialList" :key="'list-'+index" :class="['material_item', 'item_cont', { 'item_multi': selectedListId.includes(item.material_id) }]"> |
||||
|
<div v-if="item.img_path || item.material_type == 1" class="img_box"> |
||||
|
<img :src="item.img_path" :onerror="defaultImg" alt /> |
||||
|
</div> |
||||
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> |
||||
|
<div class="item_format"> |
||||
|
<span class="item_type">{{ item.deposit_url | getFileFormat }}</span> |
||||
|
<span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span> |
||||
|
</div> |
||||
|
<div class="file_name">{{ item.material_name }}</div> |
||||
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 创建文件夹layer / 编辑 --> |
||||
|
<div class="publish_layer"> |
||||
|
<el-dialog :title="layerTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px"> |
||||
|
<el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px"> |
||||
|
<el-form-item |
||||
|
:label="labelTxt" |
||||
|
prop="name" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
||||
|
]" |
||||
|
> |
||||
|
<el-input v-model="folderForm.name" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="formatType != 0" label="封面"> |
||||
|
<UploadCover ref="childUpload" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button v-if="!isEditMaterial" type="primary" round @click="submitForm('folderForm')">保 存</el-button> |
||||
|
<el-button v-else type="primary" round @click="saveMaterial">保 存</el-button> |
||||
|
<el-button round @click="resetForm()">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 多选操作 --> |
||||
|
<div v-if="selectedListId.length != 0 || folderChecked != -1" class="multi_handle"> |
||||
|
<div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected"> |
||||
|
<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" :disabled="selectedListId.length > 1" @click="editContent()">编辑</el-button> |
||||
|
<el-button type="button" class="mulit_btn">下载</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> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button> |
||||
|
<el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 移动至layer --> |
||||
|
<div class="wjj_layer"> |
||||
|
<el-dialog title="移动至" :close-on-click-modal="false" :show-close="false" :visible.sync="movingVisible" width="576px" height="384px"> |
||||
|
<div class="wjj_list"> |
||||
|
<div v-for="(item, index) in folderList" :key="index" :class="['wjj_item', { 'wjj_item_active': folderListChecked == index }]" @click="wjjSelected(item,index)"> |
||||
|
<svg class="font-icon icon" aria-hidden="true"> |
||||
|
<use xlink:href="#icon-wenjianjia" /> |
||||
|
</svg> |
||||
|
<p class="wjj_name">{{ item.name }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" round @click="moveFile">确定</el-button> |
||||
|
<el-button round @click="movingVisible=false">取消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial, deleteMyMaterial, moveMyMaterial } from '@/api/material/material' |
||||
|
import Upload from '../../../components/upload' |
||||
|
import UploadCover from '../../../components/upload_cover' |
||||
|
import { getSeconds, getFileFormat } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'Material', |
||||
|
components: { Upload, UploadCover }, |
||||
|
filters: { |
||||
|
getSeconds(s) { |
||||
|
return getSeconds(s) |
||||
|
}, |
||||
|
getFileFormat(s) { |
||||
|
return getFileFormat(s) |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
isMultiSelected: { |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
}, |
||||
|
activeIndex: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isTheme: false, |
||||
|
orga_id: '133221333123111', // 机构ID |
||||
|
rootFolderId: null, // 根目录文件夹ID |
||||
|
thisFoldId: null, // 当前父文件夹ID |
||||
|
folderList: [], // 文件夹list |
||||
|
materialFolders: [], // 文件夹list |
||||
|
folderForm: { // form |
||||
|
fid: '', |
||||
|
id: '', |
||||
|
img_path: '', |
||||
|
name: '', |
||||
|
orga_id: '' |
||||
|
}, |
||||
|
isEditFolder: false, // 是否编辑文件夹 |
||||
|
mkdirVisible: false, // 新建编辑layer |
||||
|
folderChecked: -1, // 文件夹是否单击选中 |
||||
|
materialList: [], // 素材库list |
||||
|
isEditMaterial: false, // 是否是编辑素材 |
||||
|
formatType: null, // 上传素材类型 0 img 1 video 2 audio |
||||
|
materialId: null, // 编辑时需要参数 id |
||||
|
materialImgPath: '', // 素材封面 |
||||
|
materialDuration: 0, // 时长 |
||||
|
materialName: '', // 素材名称 |
||||
|
uploadFileUrl: null, // 素材保存路径 |
||||
|
selectedMaterial: [], // 素材选中 |
||||
|
selectedListId: [], // 素材选中的material_id |
||||
|
selectInFolderid: [], // 素材选中的和文件关联表id -- in_folder_id |
||||
|
layerTitle: '创建文件夹', // 文件夹/素材编辑框title |
||||
|
labelTxt: '文件夹名称', |
||||
|
isToFolder: false, // 是否进入文件夹 |
||||
|
currentFolder: '', // 当前进入的文件夹名 |
||||
|
currentFolderId: null, |
||||
|
movingVisible: false, |
||||
|
uploadListData: [ // 上传列表 |
||||
|
], |
||||
|
folderListChecked: -1, |
||||
|
tabType: null, |
||||
|
audioNum: 0, |
||||
|
imgNum: 0, |
||||
|
videoNum: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
defaultImg() { |
||||
|
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
isMultiSelected(newName, oldName) { |
||||
|
console.log('newName', newName) |
||||
|
if (newName === false) { |
||||
|
this.selectedListId = [] |
||||
|
} |
||||
|
}, |
||||
|
activeIndex(newName, oldName) { |
||||
|
this.tabIndex = newName |
||||
|
this.$nextTick(() => { |
||||
|
switch (this.tabIndex) { |
||||
|
case '0': |
||||
|
this.$refs.uploadMaterial.isActiveType = null |
||||
|
break |
||||
|
case '1': |
||||
|
this.formatType = 1 |
||||
|
this.$refs.uploadMaterial.isActiveType = 0 |
||||
|
break |
||||
|
case '2': |
||||
|
this.formatType = 2 |
||||
|
this.$refs.uploadMaterial.isActiveType = 1 |
||||
|
break |
||||
|
case '3': |
||||
|
this.formatType = 2 |
||||
|
this.$refs.uploadMaterial.isActiveType = 2 |
||||
|
break |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
'$route.query.folderTag'(Val) { |
||||
|
console.log(Val) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// console.log(localStorage.getItem('materialTabIndex')) |
||||
|
}, |
||||
|
mounted: function() { |
||||
|
console.log(this.$route.query.folderTag) |
||||
|
this.getMaterialList() |
||||
|
document.addEventListener('click', this.hiddenFolderActiveClick) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取素材库list |
||||
|
getMaterialList() { |
||||
|
let params |
||||
|
if (this.$route.query.folderTag) { |
||||
|
console.log('文件夹内') |
||||
|
this.isToFolder = true |
||||
|
this.currentFolder = localStorage.getItem('currentFolder') |
||||
|
this.currentFolderId = localStorage.getItem('currentFolderId') |
||||
|
params = { |
||||
|
'folder_id': this.currentFolderId, |
||||
|
'material_name': null, |
||||
|
'material_type': this.tabType, |
||||
|
'material_type_not': null, |
||||
|
'orga_id': this.orga_id |
||||
|
} |
||||
|
} else { |
||||
|
console.log('文件夹外') |
||||
|
this.isToFolder = false |
||||
|
localStorage.removeItem('currentFolder') |
||||
|
localStorage.removeItem('currentFolderId') |
||||
|
params = { |
||||
|
'folder_id': null, |
||||
|
'material_name': null, |
||||
|
'material_type': this.tabType, |
||||
|
'material_type_not': null, |
||||
|
'orga_id': this.orga_id |
||||
|
} |
||||
|
} |
||||
|
getMaterialList(params).then(res => { |
||||
|
if (!this.$route.query.folderTag) { |
||||
|
localStorage.setItem('rootFolderId', res.data.thisFoldId) |
||||
|
} |
||||
|
this.materialFolders = res.data.materialFolders |
||||
|
this.materialList = res.data.pageThemeVO |
||||
|
this.audioNum = res.data.audioNum |
||||
|
this.imgNum = res.data.imgNum |
||||
|
this.videoNum = res.data.videoNum |
||||
|
// 创建文件夹获取data |
||||
|
this.thisFoldId = res.data.thisFoldId |
||||
|
}) |
||||
|
}, |
||||
|
// 新建 / 编辑 文件夹 |
||||
|
handleMkdir(mkdirType) { |
||||
|
this.mkdirVisible = true |
||||
|
this.folderForm.fid = this.thisFoldId |
||||
|
this.folderForm.orga_id = this.orga_id |
||||
|
if (mkdirType === 0) { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.childUpload.imageUrl = '' |
||||
|
this.folderForm.img_path = '' |
||||
|
this.folderForm.name = '' |
||||
|
}) |
||||
|
delete this.folderForm.id |
||||
|
} else { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.childUpload.imageUrl = this.folderForm.img_path |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
// 文件夹双击操作 |
||||
|
floderDbClick(item, index) { |
||||
|
this.isEditMaterial = false |
||||
|
this.$router.replace( |
||||
|
{ |
||||
|
path: '/content', query: { folderTag: 1 } |
||||
|
} |
||||
|
) |
||||
|
this.currentFolder = item.name |
||||
|
this.currentFolderId = item.id |
||||
|
localStorage.setItem('currentFolder', this.currentFolder) |
||||
|
localStorage.setItem('currentFolderId', this.currentFolderId) |
||||
|
this.getMaterialList() |
||||
|
this.selectedListId = [] |
||||
|
this.folderChecked = -1 |
||||
|
this.isEditFolder = false |
||||
|
}, |
||||
|
// 点击其他区域选中的文件夹 去掉选中样式 |
||||
|
hiddenFolderActiveClick() { |
||||
|
this.folderChecked = -1 |
||||
|
this.isEditFolder = false |
||||
|
}, |
||||
|
// 选择 编辑 文件夹 |
||||
|
editFolder(item, index) { |
||||
|
this.isEditMaterial = false |
||||
|
this.selectedListId = [] |
||||
|
// 有选择中的文件夹时，同时存在素材多选操作时 |
||||
|
this.$emit('changedMultiSelected') |
||||
|
if (index != this.folderChecked) { |
||||
|
this.folderChecked = index |
||||
|
this.isEditFolder = true |
||||
|
this.folderForm = { |
||||
|
fid: item.fid, |
||||
|
id: item.id, |
||||
|
name: item.name, |
||||
|
img_path: item.imgPath, |
||||
|
orga_id: item.orgaId |
||||
|
} |
||||
|
} else { |
||||
|
this.folderChecked = -1 |
||||
|
this.isEditFolder = false |
||||
|
} |
||||
|
}, |
||||
|
// 删除 文件夹 |
||||
|
deleteMaterialFolder() { |
||||
|
this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const params = { |
||||
|
id: this.folderForm.id |
||||
|
} |
||||
|
deleteMaterialFolder(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '删除文件夹成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.getMaterialList() |
||||
|
this.folderChecked = -1 |
||||
|
this.isEditFolder = false |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
message: '已取消删除', |
||||
|
type: 'info' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 提交表单 - 新建/编辑 |
||||
|
submitForm(formName) { |
||||
|
this.folderForm.img_path = this.$refs.childUpload.imageUrl |
||||
|
this.$refs[formName].validate((valid) => { |
||||
|
if (valid) { |
||||
|
saveMaterialFolder(this.folderForm).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '创建文件夹成功', |
||||
|
duration: 2000, |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.mkdirVisible = false |
||||
|
this.getMaterialList() |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
message: '创建文件夹失败', |
||||
|
duration: 2000, |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 重置表单 |
||||
|
resetForm() { |
||||
|
// 强制重置folderForm表单 |
||||
|
// Object.assign(this.$data.folderForm, this.$options.data.call(this).folderForm) |
||||
|
this.mkdirVisible = false |
||||
|
}, |
||||
|
// 选择素材 - to 即时发布/定时发布 |
||||
|
publishHandle(index) { |
||||
|
localStorage.removeItem('selectedMaterial') |
||||
|
localStorage.removeItem('releaseId') |
||||
|
localStorage.setItem('selectedMaterial', JSON.stringify(this.selectedMaterial)) |
||||
|
// 判断是否选择了多个音频文件 |
||||
|
const resultAudio = [] |
||||
|
this.selectedMaterial.map(item => { |
||||
|
if (item.material_type == 2) { |
||||
|
resultAudio.push(item) |
||||
|
} |
||||
|
}) |
||||
|
if (resultAudio.length > 1) { |
||||
|
this.$message.error('音频类型的文件只可选择1个') |
||||
|
return |
||||
|
} |
||||
|
this.$router.push( |
||||
|
{ |
||||
|
path: '/release', query: { tag: index } |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
// 素材 - 编辑 |
||||
|
editContent() { |
||||
|
this.mkdirVisible = true |
||||
|
this.labelTxt = '文件名称' |
||||
|
this.isEditMaterial = true |
||||
|
if (this.formatType == 1) { |
||||
|
this.layerTitle = '视频编辑' |
||||
|
} else if (this.formatType == 2) { |
||||
|
this.layerTitle = '音频编辑' |
||||
|
} else { |
||||
|
this.layerTitle = '图片编辑' |
||||
|
} |
||||
|
const checkedMaterial = this.materialList.filter(item => { |
||||
|
return item.material_id == this.selectedListId[0] |
||||
|
}) |
||||
|
this.materialId = checkedMaterial[0].material_id |
||||
|
this.folderForm.name = checkedMaterial[0].material_name |
||||
|
this.materialDuration = checkedMaterial[0].duration |
||||
|
this.uploadFileUrl = checkedMaterial[0].deposit_url |
||||
|
this.materialImgPath = checkedMaterial[0].img_path |
||||
|
}, |
||||
|
// 上传素材 |
||||
|
saveMaterial() { |
||||
|
if (!this.isEditMaterial) { |
||||
|
console.log(this.$refs.uploadMaterial.fileSize) |
||||
|
const formatType = this.$refs.uploadMaterial.formatType |
||||
|
this.uploadFileUrl = this.$refs.uploadMaterial.uploadFileUrl |
||||
|
// 视频和音频的时长 |
||||
|
const duration = this.$refs.uploadMaterial.duration |
||||
|
this.materialName = this.$refs.uploadMaterial.fileNames |
||||
|
switch (formatType) { |
||||
|
case 'image': |
||||
|
this.formatType = 0 |
||||
|
this.materialImgPath = this.uploadFileUrl |
||||
|
this.materialDuration = 0 |
||||
|
break |
||||
|
case 'video': |
||||
|
this.formatType = 1 |
||||
|
this.materialDuration = duration |
||||
|
break |
||||
|
case 'audio': |
||||
|
this.formatType = 2 |
||||
|
this.materialDuration = duration |
||||
|
break |
||||
|
} |
||||
|
} else { |
||||
|
this.materialName = this.folderForm.name |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.childUpload) { |
||||
|
this.materialImgPath = this.$refs.childUpload.imageUrl |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
setTimeout(() => { |
||||
|
const params = { |
||||
|
'class_ids': [ |
||||
|
// 素材类id集合 |
||||
|
], |
||||
|
'deposit_url': this.uploadFileUrl, // 素材存放路径 |
||||
|
'device_direction': 1, // 横竖屏 1.横屏 2.竖屏, |
||||
|
'duration': this.materialDuration, // 时长s |
||||
|
'material_id': this.materialId, |
||||
|
'folder_id': this.thisFoldId, // 文件夹id |
||||
|
'img_path': this.materialImgPath, // 封面图片id |
||||
|
'material_name': this.materialName, // 素材名称 |
||||
|
'material_type': this.formatType, // 素材类别 |
||||
|
'file_size': this.$refs.uploadMaterial.fileSize, // 文件大小 |
||||
|
'orga_id': this.orga_id, // 机构id |
||||
|
'store_type': 1 // 库类型 1.素材库 2.主题库 |
||||
|
} |
||||
|
console.log(params) |
||||
|
if (!this.isEditMaterial) { |
||||
|
// 新上传素材时不需要该字段 |
||||
|
delete params.material_id |
||||
|
} |
||||
|
saveMaterial(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '上传素材成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.mkdirVisible = false |
||||
|
this.getMaterialList() |
||||
|
this.materialImgPath = '' |
||||
|
} |
||||
|
}) |
||||
|
}, 200) |
||||
|
}, |
||||
|
// 素材 - 多选 |
||||
|
selectedItem(item) { |
||||
|
const id = item.material_id |
||||
|
const inFolderId = item.in_folder_id |
||||
|
const type = item.material_type |
||||
|
const arr = this.selectedListId |
||||
|
if (arr.includes(id)) { |
||||
|
const index = arr.indexOf(id) |
||||
|
if (index > -1) { |
||||
|
arr.splice(index, 1) |
||||
|
this.selectInFolderid.splice(index, 1) |
||||
|
this.selectedMaterial.splice(index, 1) |
||||
|
} |
||||
|
} else { |
||||
|
this.selectedListId.push(id) |
||||
|
this.selectInFolderid.push(inFolderId) |
||||
|
this.selectedMaterial.push(item) |
||||
|
this.formatType = type |
||||
|
} |
||||
|
}, |
||||
|
// 素材 - 删除 |
||||
|
deleteMyMaterial() { |
||||
|
this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const params = { |
||||
|
ids: this.selectedListId |
||||
|
} |
||||
|
deleteMyMaterial(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '删除素材成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.getMaterialList() |
||||
|
this.selectedListId = [] |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
message: '已取消删除', |
||||
|
type: 'info' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
UploadList() { |
||||
|
this.uploadListVisible = true |
||||
|
}, |
||||
|
// 点击-移动btn |
||||
|
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 |
||||
|
}, |
||||
|
// 文件夹list - 选中操作 |
||||
|
wjjSelected(item, index) { |
||||
|
this.folderListChecked = index |
||||
|
this.thisFoldId = item.id |
||||
|
}, |
||||
|
// 点击确定 - 移动素材 |
||||
|
moveFile() { |
||||
|
if (this.materialFolders.length > 0) { |
||||
|
if (this.thisFoldId == this.rootFolderId) { |
||||
|
this.$message({ |
||||
|
message: '不能讲文件移动到自身目录下哦~', |
||||
|
type: 'error' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
} else { |
||||
|
this.thisFoldId = this.rootFolderId |
||||
|
} |
||||
|
const params = { |
||||
|
'folder_id': this.thisFoldId, |
||||
|
'ids': this.selectInFolderid, |
||||
|
'material_ids': this.selectedListId |
||||
|
} |
||||
|
moveMyMaterial(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '移动成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.movingVisible = false |
||||
|
this.getMaterialList() |
||||
|
this.selectedListId = [] |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
format(percentage) { |
||||
|
return percentage === 100 ? '100%' : `${percentage}%` |
||||
|
}, |
||||
|
start() { |
||||
|
const that = this |
||||
|
that.$nextTick(() => { |
||||
|
that.progressLoading = true |
||||
|
that.percentage = 0 |
||||
|
that.timeStart = setInterval(() => { |
||||
|
if (that.percentage < 100) { |
||||
|
that.percentage += 1 |
||||
|
} |
||||
|
}, 100) |
||||
|
}) |
||||
|
}, |
||||
|
// 进度条结束 |
||||
|
end() { |
||||
|
this.loading_txt = '继续' |
||||
|
// const that = this |
||||
|
// that.percentage = 100 |
||||
|
clearInterval(this.timeStart) |
||||
|
// setTimeout(() => { |
||||
|
// that.progressLoading = false |
||||
|
// }, 300) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.material_crumbs { |
||||
|
padding: 0 24px 15px 24px; |
||||
|
margin-top: -20px; |
||||
|
::v-deep .el-breadcrumb { |
||||
|
font-size: 12px; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
.material_content { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-left: 24px; |
||||
|
.material_item { |
||||
|
position: relative; |
||||
|
width: 174px; |
||||
|
height: 182px; |
||||
|
border-radius: 4px; |
||||
|
margin: 0 20px 20px 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.item_cont { |
||||
|
border-color: #dcdde3; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 148px; |
||||
|
} |
||||
|
.radio_img { |
||||
|
width: 100%; |
||||
|
height: 148px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.upload_layer { |
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 0 20px 30px 20px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-table { |
||||
|
.el-button { |
||||
|
padding: 0 10px; |
||||
|
height: 24px; |
||||
|
&.upload_delt { |
||||
|
background-color: #f76b6b; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.multi_handle { |
||||
|
div { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,139 @@ |
|||||
|
<template> |
||||
|
<div class="list_warp"> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-table ref="table" :data="publishHistoryList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<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> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布时间" align="center" prop="date"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.release_type==0">{{ scope.row.release_start }}</div> |
||||
|
<div v-else>{{ scope.row.release_start+" 至 "+scope.row.release_end }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布周期" align="center" prop="cycle"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.release_cycle==0?(''):((scope.row.release_cycle==1?'每天':'每周'+scope.row.release_weekly)) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布类型" align="center" prop="type"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.release_type==1 ? '定时发布' : '即时发布' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布人" align="center" prop="nick_name" /> |
||||
|
<el-table-column label="状态" align="center" prop="enabled"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div :class="{ stop_txt: scope.row.is_state }"> |
||||
|
{{ scope.row.is_state==0 ? '':(scope.row.is_state==1? '停止':'发布中') }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="release_device" align="center" label="发布设备"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
{{ scope.row.release_device == 2 ? "" : "全部设备" }} |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-tag v-for="tag in scope.row.binding_device" :key="tag">{{ tag }}</el-tag> |
||||
|
</div> |
||||
|
</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="getPublishHistory" @size-change="handleSizeChange" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { parseTime, setWeekly } from '@/utils/index.js' |
||||
|
import { reqPublishHistory } from '@/api/publish/publishHistory' |
||||
|
export default { |
||||
|
name: 'HistoryList', |
||||
|
filters: { |
||||
|
parseTime(time, cFormat) { |
||||
|
return parseTime(time, cFormat) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
orga_id: '133221333123111', |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 发布历史列表 |
||||
|
publishHistoryList: [], |
||||
|
selectedList: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getPublishHistory() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取发布历史列表 |
||||
|
getPublishHistory(pager = 1) { |
||||
|
this.page = pager |
||||
|
const params = { |
||||
|
release_name: '', |
||||
|
orga_id: this.orga_id, |
||||
|
page: this.page, |
||||
|
size: this.size |
||||
|
} |
||||
|
reqPublishHistory(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.publishHistoryList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.publishHistoryList.forEach(item => { |
||||
|
item.release_start = parseTime(item.release_start).split('00:00:00')[0] |
||||
|
item.release_end = parseTime(item.release_end).split('00:00:00')[0] |
||||
|
if (item.binding_device) { |
||||
|
item.binding_device = item.binding_device.split(',') |
||||
|
} |
||||
|
if (item.release_weekly) { |
||||
|
item.release_weekly = setWeekly(item.release_weekly) |
||||
|
} else { |
||||
|
item.release_weekly = '' |
||||
|
} |
||||
|
}) |
||||
|
console.log(this.publishHistoryList) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.selectedList = val |
||||
|
if (val.length > 0) { |
||||
|
this.clearBtnDisabled = false |
||||
|
} else { |
||||
|
this.clearBtnDisabled = true |
||||
|
} |
||||
|
console.log(val) |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.size = size |
||||
|
this.getPublishHistory() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list_warp { |
||||
|
padding: 0 24px; |
||||
|
.stop_txt { |
||||
|
color: #3a8aeb; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,65 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="content_warp"> |
||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="发布列表" name="first"> |
||||
|
<PublistList /> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="发布历史" name="second"> |
||||
|
<HistoryList /> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="紧急通知" name="third"> |
||||
|
<UrgentMessage ref="message" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
<div v-if="activeName !== 'third'" class="home_publish_btn"> |
||||
|
<el-button round class="el_button_red" @click="publishHandle(0)">即时发布</el-button> |
||||
|
<el-button round type="primary" @click="publishHandle(1)">定时发布</el-button> |
||||
|
</div> |
||||
|
<div v-else class="home_publish_btn"> |
||||
|
<el-button type="primary" round @click="addMessage">紧急发布</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import PublistList from './publishList/index' |
||||
|
import HistoryList from './historyList/index' |
||||
|
import UrgentMessage from './urgentMessage/index' |
||||
|
export default { |
||||
|
name: 'PublishContent', |
||||
|
components: { PublistList, HistoryList, UrgentMessage }, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'first', |
||||
|
mulitText: '多选' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick(tab, event) { |
||||
|
console.log(tab, event) |
||||
|
}, |
||||
|
publishHandle(index) { |
||||
|
localStorage.removeItem('selectedMaterial') |
||||
|
localStorage.removeItem('releaseId') |
||||
|
this.$router.push( |
||||
|
{ |
||||
|
path: '/release', query: { tag: index } |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
// 紧急发布 通知子组件发请求 |
||||
|
addMessage() { |
||||
|
this.$refs.message.addFormData() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.app-container { |
||||
|
position: relative; |
||||
|
padding: 6px 0 20px 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,224 @@ |
|||||
|
<template> |
||||
|
<div class="list_warp"> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-table ref="table" :data="publishList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" class="publish_table"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column label="发布名称" align="center" prop="relaase_name" /> |
||||
|
<el-table-column label="发布内容" align="center" prop="content"> |
||||
|
<template slot-scope="scope"> |
||||
|
<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> |
||||
|
<el-table-column label="发布时间" align="center" prop="date" width="200px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.release_type==0">{{ scope.row.release_start }}</div> |
||||
|
<div v-else-if="scope.row.release_cycle==2">{{ scope.row.release_start+" 至 "+scope.row.release_end +'每周'+ scope.row.release_weekly }}</div> |
||||
|
<div v-else>{{ scope.row.release_start+" 至 "+scope.row.release_end +'每天' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布类型" align="center" prop="type"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.release_type==1 ? "定时发布" : "即时发布" }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="发布人" align="center" prop="nick_name" /> |
||||
|
<el-table-column label="状态" align="center" prop="is_state"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div :class="{ stop_txt: scope.row.is_state == 2 }"> |
||||
|
{{ scope.row.is_state == 2 ? '停止' : (scope.row.stateTxt ? '发布中' : '未发布') }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="release_device" align="center" label="发布设备" width="300px"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
{{ scope.row.release_device == 2 ? "" : "全部设备" }} |
||||
|
<div class="tag_list"> |
||||
|
<el-tag v-for="tag in scope.row.binding_device" :key="tag" type="primary">{{ tag }}</el-tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="220px" align="center" fixed="right"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" :class="['top_btn', { top_btn_active: scope.row.is_topping }]" @click="isTophandle(scope.row)">{{ scope.row.is_topping ? "取消" : "置顶" }}</el-button> |
||||
|
<el-button type="primary" class="edit_btn" @click="editRelease(scope.row)">编辑</el-button> |
||||
|
<el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state==1 }]" @click="isStopHandle(scope.row)">{{ scope.row.is_state==1 ? "停止" : "恢复" }}</el-button> |
||||
|
<el-button type="info" class="delt_btn" @click="deltHandle(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 分页器 --> |
||||
|
<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="getPublishList" @size-change="handleSizeChange" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { parseTime, setWeekly, getNowFormatDate } from '@/utils/index.js' |
||||
|
import { FetchGetReleaseList, FetchUpdateReleaseState, FetchDeleteRelease, FetchToppingRelease } from '@/api/release/release' |
||||
|
export default { |
||||
|
name: 'PublishList', |
||||
|
data() { |
||||
|
return { |
||||
|
orga_id: '133221333123111', |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
total: 0, |
||||
|
stateTxt: null, |
||||
|
publishList: [] // 发布list |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getPublishList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取发布列表的数据 |
||||
|
getPublishList(pager = 1) { |
||||
|
this.page = pager |
||||
|
const params = { |
||||
|
release_name: '', |
||||
|
orga_id: this.orga_id, |
||||
|
page: this.page, |
||||
|
size: this.size |
||||
|
} |
||||
|
FetchGetReleaseList(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.publishList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.publishList.forEach(item => { |
||||
|
item.release_start = parseTime(item.release_start).split('00:00:00')[0] |
||||
|
item.release_end = parseTime(item.release_end).split('00:00:00')[0] |
||||
|
if (item.binding_device) { |
||||
|
item.binding_device = item.binding_device.split(',') |
||||
|
} |
||||
|
if (item.release_weekly) { |
||||
|
item.release_weekly = setWeekly(item.release_weekly) |
||||
|
} else { |
||||
|
item.release_weekly = '' |
||||
|
} |
||||
|
// 发布开始时间与当天时间比较 |
||||
|
const todayDate = getNowFormatDate() |
||||
|
item.stateTxt = this.dateCompare(item.release_start, todayDate) |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.size = size |
||||
|
this.getPublishList() |
||||
|
}, |
||||
|
// 是否置顶 |
||||
|
isTophandle(row) { |
||||
|
const params = { |
||||
|
id: row.release_id, |
||||
|
is_topping: !row.is_topping |
||||
|
} |
||||
|
FetchToppingRelease(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message.success(res.msg) |
||||
|
this.getPublishList() |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
editRelease(row) { |
||||
|
localStorage.setItem('releaseId', JSON.stringify(row.release_id)) |
||||
|
this.$router.push( |
||||
|
{ |
||||
|
path: '/release', query: { tag: row.release_type } |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
// 是否停止发布 |
||||
|
isStopHandle(row) { |
||||
|
row.is_state = row.is_state == 1 ? 2 : 1 |
||||
|
const params = { |
||||
|
id: row.release_id, |
||||
|
state: row.is_state |
||||
|
} |
||||
|
FetchUpdateReleaseState(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message.success(res.msg) |
||||
|
this.getPublishList(this.page) |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 删除发布信息 |
||||
|
deltHandle(row) { |
||||
|
this.$confirm('此操作将永久删除该列表, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const params = { |
||||
|
id: row.release_id, |
||||
|
is_del: true |
||||
|
} |
||||
|
FetchDeleteRelease(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message.success(res.msg) |
||||
|
this.getPublishList(this.page) |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
message: '已取消删除', |
||||
|
type: 'info' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 时间比较 - 未发布状态 |
||||
|
dateCompare(str1, str2) { |
||||
|
const arr = str1.split('-') |
||||
|
const startDate = new Date(arr[0], arr[1], arr[2]) |
||||
|
const startTimes = startDate.getTime() |
||||
|
const arr2 = str2.split('-') |
||||
|
const currentDate = new Date(arr2[0], arr2[1], arr2[2]) |
||||
|
const currentTimes = currentDate.getTime() |
||||
|
if (startTimes > currentTimes) { |
||||
|
return false |
||||
|
} else { |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list_warp { |
||||
|
padding: 0 24px; |
||||
|
.stop_txt { |
||||
|
color: #3a8aeb; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.publish_table { |
||||
|
.tag_list { |
||||
|
// text-align: left; |
||||
|
.el-tag { |
||||
|
height: 26px; |
||||
|
line-height: 26px; |
||||
|
margin: 5px 10px 5px 0; |
||||
|
background: #cbe3ff; |
||||
|
color: #3a8aeb; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,530 @@ |
|||||
|
<template> |
||||
|
<div class="list_warp"> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<!-- v-loading="crud.loading" --> |
||||
|
<el-table ref="table" :data="urgentMessage" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<!-- prop="name" --> |
||||
|
<el-table-column label="序号" type="index" align="center" width="50" /> |
||||
|
<el-table-column label="发布内容" align="center" prop="context" width="400"> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<div>{{ row.context }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="通知时间" align="center" prop="create_time"> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<div>{{ row.create_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="发布人" align="center" prop="creater_name" /> |
||||
|
<el-table-column label="状态" align="center" prop="is_state"> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<div :class="{ stop_txt: row.is_state }"> |
||||
|
{{ row.is_state == 1 ? "发布中" : "停止" }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="120px" align="center" fixed="right"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button> |
||||
|
<el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.is_state == 1 ? "停止" : "恢复" }}</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 分页器 --> |
||||
|
<el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUrgentMessage" @size-change="handleSizeChange" /> |
||||
|
|
||||
|
<!-- 编辑紧急通知 --> |
||||
|
<div class="publish_layer"> |
||||
|
<el-dialog :title="form.notice_id==null? '紧急发布':'编辑'" :close-on-click-modal="false" :show-close="false" :visible.sync="messageVisible" width="872px"> |
||||
|
<el-form ref="form" :model="form" size="small" label-width="100px"> |
||||
|
<el-form-item |
||||
|
label="文本颜色" |
||||
|
prop="context_color" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择文本颜色', trigger: '' }, |
||||
|
]" |
||||
|
> |
||||
|
<colorPicker v-model="form.context_color" class="txt_color" @change="headleChangeColor" /> |
||||
|
<el-input v-show="false" v-model="form.context_color" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="文本内容" |
||||
|
prop="context" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请输入文本内容', trigger: 'blur' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-input v-model="form.context" type="textarea" rows="6" style="width: 674px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="文本大小" |
||||
|
prop="context_size_name" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择文本大小', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.context_size_name" size="small" class="filter-item" @change="selectSize"> |
||||
|
<el-option v-for="item in sizeData" :key="item.key" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="文本位置" |
||||
|
prop="context_position_name" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择文本位置', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.context_position_name" size="small" value-key="name" class="filter-item" @change="selectPosition"> |
||||
|
<el-option v-for="item in positionData" :key="item.key" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="滚动速度" |
||||
|
prop="context_speed_name" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择滚动速度', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.context_speed_name" size="small" class="filter-item" @change="selectSpeed"> |
||||
|
<el-option v-for="item in speedData" :key="item.key" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="选择设备" |
||||
|
prop="notice_device" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择设备', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-radio-group v-model="form.notice_device" @change="clearCheckbox()"> |
||||
|
<el-radio :label="1" value="all">所有设备</el-radio> |
||||
|
<el-radio :label="2" value="other">部分设备<i v-if="form.notice_device === 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<div v-if="form.notice_device == 1" class="select_all_tip"> |
||||
|
所有设备都将被发送 |
||||
|
</div> |
||||
|
<div v-if="deviceTags.length > 0 && form.notice_device == 2" class="select_other"> |
||||
|
<el-row> |
||||
|
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-button round class="delt_btn" @click="clearDevice()">清空</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" context_color="#cbe3ff" @close="handleClose(tag)"> |
||||
|
{{ tag.device_name }} |
||||
|
</el-tag> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<!-- :loading="crud.status.cu === 2" |
||||
|
@click="crud.submitCU"--> |
||||
|
<el-button type="primary" round @click="submit">保存</el-button> |
||||
|
<el-button round @click="closeDialog">关闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
<!-- 添加发布的设备 --> |
||||
|
<div class="add_device_layer"> |
||||
|
<el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px"> |
||||
|
<el-tag v-for="tag in deviceList" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)"> |
||||
|
{{ tag.device_name }} |
||||
|
</el-tag> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { parseTime } from '@/utils/index.js' |
||||
|
import { ReqDeviceList } from '@/api/device/deviceList.js' |
||||
|
import { |
||||
|
reqUrgentMessage, |
||||
|
reqQueryMessage, |
||||
|
reqEditMessage, |
||||
|
reqChangeMessage |
||||
|
} from '@/api/publish/urgentMessage' |
||||
|
export default { |
||||
|
name: 'UrgentMessage', |
||||
|
filters: { |
||||
|
parseTime(time, cFormat) { |
||||
|
return parseTime(time, cFormat) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isAddEdit: false, |
||||
|
form: { |
||||
|
context_color: '#ff0000', // 文本的颜色 |
||||
|
context: '', // 文本的内容 |
||||
|
context_position: null, // 文本的位置 |
||||
|
context_position_name: null, |
||||
|
context_speed_name: null, |
||||
|
context_speed: null, // 文本的速度 |
||||
|
context_size_name: null, |
||||
|
context_size: null, // 文字的大小 |
||||
|
// create_by:'', //发布人 |
||||
|
notice_device: null, |
||||
|
notice_devices: [], |
||||
|
notice_id: '', // 紧急通知的id |
||||
|
orga_id: '133221333123111' |
||||
|
}, |
||||
|
queryInfo: { |
||||
|
notice_name: '', |
||||
|
orga_id: '133221333123111', |
||||
|
page: 1, |
||||
|
size: 10 |
||||
|
}, |
||||
|
total: 0, |
||||
|
messageVisible: false, |
||||
|
selectDeviceVisible: false, |
||||
|
sizeData: [ |
||||
|
{ key: 0, name: 16 }, |
||||
|
{ key: 1, name: 22 }, |
||||
|
{ key: 2, name: 24 }, |
||||
|
{ key: 3, name: 30 } |
||||
|
], |
||||
|
positionData: [ |
||||
|
{ key: 1, name: '顶部' }, |
||||
|
{ key: 2, name: '中间' }, |
||||
|
{ key: 3, name: '底部' } |
||||
|
], |
||||
|
speedData: [ |
||||
|
{ key: 0, name: '1s' }, |
||||
|
{ key: 1, name: '2s' }, |
||||
|
{ key: 2, name: '3s' } |
||||
|
], |
||||
|
selectedList: [], |
||||
|
// 部分设备列表的数据 |
||||
|
deviceList: [], |
||||
|
// newArr:[], |
||||
|
deviceTags: [], |
||||
|
// 紧急通知列表 |
||||
|
urgentMessage: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getUrgentMessage() |
||||
|
this.getDevice() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取紧急通知的列表 |
||||
|
getUrgentMessage(pager = 1) { |
||||
|
this.queryInfo.page = pager |
||||
|
const params = this.queryInfo |
||||
|
reqUrgentMessage(params).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.urgentMessage = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
// console.log(this.urgentMessage); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取设备列表的信息 |
||||
|
getDevice() { |
||||
|
const params = this.queryInfo |
||||
|
ReqDeviceList(params).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.deviceList = res.data.content |
||||
|
} else { |
||||
|
return this.$message.error('获取设备列表失败！') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 紧急通知的状态 is_state为1 发布中 2 停止 |
||||
|
// row.is_state == 1 ? "停止" : "恢复" |
||||
|
isStopHandle(index, row) { |
||||
|
console.log(row) |
||||
|
// console.log(index) |
||||
|
if (row.is_state == 1) { |
||||
|
row.is_state = 2 |
||||
|
} else { |
||||
|
row.is_state = 1 |
||||
|
} |
||||
|
const params = { |
||||
|
id: row.notice_id, |
||||
|
state: row.is_state |
||||
|
} |
||||
|
reqChangeMessage(params).then(res => { |
||||
|
// console.log(res) |
||||
|
if (res.code == 200) { |
||||
|
if (params.state == 1) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '已发布成功！' |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '已停止！' |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
return this.$message.error('失败了~~~~') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
editFormData(row) { |
||||
|
this.messageVisible = true |
||||
|
// 根据id查询返回的紧急通知的数据 |
||||
|
const params = { |
||||
|
notice_id: row.notice_id |
||||
|
} |
||||
|
reqQueryMessage(params).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.form.notice_device = res.data.notice.noticeDevice |
||||
|
this.deviceTags = res.data.noticeDeviceDetailsVO |
||||
|
this.form.context_color = res.data.notice.contextColor |
||||
|
this.form.context = res.data.notice.context |
||||
|
this.form.context_speed = res.data.notice.contextSpeed |
||||
|
this.form.context_position = res.data.notice.contextPosition |
||||
|
this.form.context_size = res.data.notice.contextSize |
||||
|
this.form.notice_id = row.notice_id |
||||
|
// 判断文字位置 |
||||
|
if (this.form.context_position == 1) { |
||||
|
this.form.context_position_name = '顶部' |
||||
|
} else if (this.form.context_position == 2) { |
||||
|
this.form.context_position_name = '中部' |
||||
|
} else { |
||||
|
this.form.context_position_name = '底部' |
||||
|
} |
||||
|
// 判断速度 |
||||
|
if (this.form.context_speed == 0) { |
||||
|
this.form.context_speed_name = '1s' |
||||
|
} else if (this.form.context_speed == 1) { |
||||
|
this.form.context_speed_name = '2s' |
||||
|
} else { |
||||
|
this.form.context_speed_name = '3s' |
||||
|
} |
||||
|
// 判断文字大小 |
||||
|
if (this.form.context_size == 0) { |
||||
|
this.form.context_size_name = '16' |
||||
|
} else if (this.form.context_size == 1) { |
||||
|
this.form.context_size_name = '22' |
||||
|
} else if (this.form.context_size == 2) { |
||||
|
this.form.context_size_name = '24' |
||||
|
} else { |
||||
|
this.form.context_size_name = '30' |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 新增 |
||||
|
addFormData() { |
||||
|
this.messageVisible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.form.notice_id = null |
||||
|
}) |
||||
|
}, |
||||
|
// 提交 |
||||
|
submit() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
console.log(this.deviceTags) |
||||
|
console.log(this.form.notice_devices) |
||||
|
if (this.form.notice_device == 2) { |
||||
|
if (this.deviceTags.length != 0) { |
||||
|
this.deviceTags.forEach(item => { |
||||
|
this.form.notice_devices.push({ deviceId: item.device_id }) |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error('请添加设备！') |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
// 修改 |
||||
|
if (valid) { |
||||
|
const params = { |
||||
|
context: this.form.context, |
||||
|
context_color: this.form.context_color, |
||||
|
context_position: this.form.context_position, |
||||
|
context_size: this.form.context_size, |
||||
|
context_speed: this.form.context_speed, |
||||
|
notice_device: this.form.notice_device, |
||||
|
notice_devices: this.form.notice_devices, |
||||
|
notice_id: this.form.notice_id, |
||||
|
orga_id: '133221333123111' |
||||
|
} |
||||
|
console.log(params) |
||||
|
reqEditMessage(params).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: this.form.notice_id |
||||
|
? '修改紧急通知成功' |
||||
|
: '添加紧急通知成功' |
||||
|
}) |
||||
|
this.messageVisible = false |
||||
|
this.$refs.form.resetFields() |
||||
|
this.getUrgentMessage(this.queryInfo.page) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 所有设备和部分设备的切换数据处理 |
||||
|
clearCheckbox() { |
||||
|
if (this.form.notice_device == 1) { |
||||
|
this.form.notice_devices = [] |
||||
|
} |
||||
|
}, |
||||
|
// 多选框 |
||||
|
handleSelectionChange(val) { |
||||
|
this.selectedList = val |
||||
|
// if (val.length > 0) { |
||||
|
// this.clearBtnDisabled = false; |
||||
|
// } else { |
||||
|
// this.clearBtnDisabled = true; |
||||
|
// } |
||||
|
}, |
||||
|
// 改变文字的颜色 |
||||
|
headleChangeColor() { |
||||
|
this.form.context_size |
||||
|
}, |
||||
|
// 改变文字的大小 |
||||
|
selectSize(selVal) { |
||||
|
this.form.context_size = selVal.key |
||||
|
this.form.context_size_name = selVal.name |
||||
|
}, |
||||
|
// 改变文字的位置 |
||||
|
selectPosition(selVal) { |
||||
|
console.log(selVal) |
||||
|
this.form.context_position = selVal.key |
||||
|
this.form.context_position_name = selVal.name |
||||
|
}, |
||||
|
// 速度 |
||||
|
selectSpeed(selVal) { |
||||
|
this.form.context_speed = selVal.key |
||||
|
this.form.context_speed_name = selVal.name |
||||
|
}, |
||||
|
// 添加设备的对话框 |
||||
|
addDeviceTag() { |
||||
|
this.selectDeviceVisible = true |
||||
|
}, |
||||
|
// 添加设备 |
||||
|
tagHandle(tag) { |
||||
|
// 添加设备不能重复 不重复才添加 |
||||
|
if (this.deviceTags.length == 0) { |
||||
|
this.deviceTags.push(tag) |
||||
|
} else { |
||||
|
const current = |
||||
|
this.deviceTags && |
||||
|
this.deviceTags.some((item) => item.device_id == tag.device_id) |
||||
|
if (!current) { |
||||
|
this.deviceTags.push(tag) |
||||
|
} else { |
||||
|
this.$message('请勿添加重复的设备！') |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 单独删除某一个设备 |
||||
|
handleClose(tag) { |
||||
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1) |
||||
|
}, |
||||
|
// 清空设备 |
||||
|
clearDevice() { |
||||
|
this.deviceTags = [] |
||||
|
this.form.notice_devices = [] |
||||
|
}, |
||||
|
// 关闭重置表单 |
||||
|
closeDialog() { |
||||
|
this.messageVisible = false |
||||
|
this.$refs.form.resetFields() |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.queryInfo.size = size |
||||
|
this.getUrgentMessage() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list_warp { |
||||
|
padding: 0 24px; |
||||
|
.stop_txt { |
||||
|
color: #3a8aeb; |
||||
|
} |
||||
|
} |
||||
|
.txt_color { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
::v-deep .el-radio-group { |
||||
|
display: block; |
||||
|
.el-radio { |
||||
|
position: relative; |
||||
|
line-height: 40px; |
||||
|
.radio_tip { |
||||
|
position: absolute; |
||||
|
right: -45px; |
||||
|
top: 0; |
||||
|
display: block; |
||||
|
width: 42px; |
||||
|
height: 21px; |
||||
|
line-height: 21px; |
||||
|
font-size: 12px; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
background: url(~@/assets/images/an-tj.png) no-repeat; |
||||
|
background-size: 42px 21px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.select_all_tip { |
||||
|
width: 336px; |
||||
|
height: 32px; |
||||
|
line-height: 32px; |
||||
|
margin: -20px 0 0 100px; |
||||
|
padding: 0 14px; |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
background: #fff; |
||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.14); |
||||
|
} |
||||
|
.select_other { |
||||
|
width: 600px; |
||||
|
margin: -20px 0 0 100px; |
||||
|
padding: 18px 23px; |
||||
|
background: #f8f8f8; |
||||
|
border: 1px solid #dcdde3; |
||||
|
border-radius: 4px; |
||||
|
.other_tip { |
||||
|
line-height: 24px; |
||||
|
span { |
||||
|
display: inline-block; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.el-button { |
||||
|
padding: 5px 8px; |
||||
|
border: none !important; |
||||
|
} |
||||
|
.delt_btn { |
||||
|
color: #fff; |
||||
|
background-color: #ee5747 !important; |
||||
|
} |
||||
|
} |
||||
|
.el-tag--small { |
||||
|
height: 28px; |
||||
|
line-height: 26px; |
||||
|
padding: 0 24px; |
||||
|
margin: 18px 16px 0 0; |
||||
|
font-size: 14px; |
||||
|
// color: #3a8aeb; |
||||
|
::v-deep .el-icon-close { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
.add_device_layer { |
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 0 20px 30px 20px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,713 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,530 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="head-container"> |
||||
|
<el-row type="flex"> |
||||
|
<el-col :span="20" class="col_flex"> |
||||
|
<div class="form_item"> |
||||
|
<span>设备ID:</span> |
||||
|
<el-input v-model="queryInfo.device_id" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" /> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>设备名称：</span> |
||||
|
<el-input v-model="queryInfo.device_name" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="page_add" :span="4"> |
||||
|
<el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled" @click="removeStartUp(sels)">清空</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<!-- 配置开关机列表 --> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-table style="width: 100%;" :data="startUpList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="device_id" label="设备ID" align="center" /> |
||||
|
<el-table-column prop="device_account" label="设备账号" align="center" width="150" /> |
||||
|
<el-table-column prop="device_name" label="设备名称" align="center" /> |
||||
|
<el-table-column label="设备方向" align="center"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div>{{ row.device_direction==1? '竖屏' : '横屏' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="period" label="配置周期" align="center" width="300"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div v-show="row.open_setting">{{ row.open_setting==1? '每天 - 开机 '+row.open_time :'每周'+setWeekly(row.open_weekly)+'开机'+row.open_time }}</div> |
||||
|
<div v-show="row.open_setting">{{ row.close_setting==1?'每天 - 关机'+row.close_time :'每周'+setWeekly(row.close_weekly)+'关机'+row.close_time }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="启动画面" align="center"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<el-image v-show="row.startup_screen" class="cover_img" :src="row.startup_screen" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="update_time" label="创建时间" align="center" width="200"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div>{{ row.update_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" align="center" width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button> |
||||
|
<el-button type="info" class="record_btn">记录</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getStartUpList" @size-change="handleSizeChange" /> |
||||
|
|
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 编辑设备 --> |
||||
|
<div class="layer device_layer"> |
||||
|
<el-dialog title="编辑" :close-on-click-modal="false" :show-close="false" :visible.sync="addFromVisible" width="880px"> |
||||
|
<el-form ref="form" :model="form"> |
||||
|
<div class="setting_item"> |
||||
|
<h4>开机时间</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设置时间：</span> |
||||
|
<div> |
||||
|
<el-form-item |
||||
|
prop="open_setting" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
:class="{'no_margin': form.open_setting === 2}" |
||||
|
> |
||||
|
<el-radio-group v-model="form.open_setting" @change="clearCheckbox()"> |
||||
|
<el-radio :label="1" value="everyday">每天</el-radio> |
||||
|
<el-radio :label="2" value="weekly">每周</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="form.open_setting === 2" |
||||
|
:class="{'weekly_margin': form.open_setting === 2}" |
||||
|
prop="open_weekly" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-checkbox-group v-model="selectOpenWeekly"> |
||||
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
prop="open_time" |
||||
|
:rules="[ |
||||
|
{type: 'string', required: true, message: '请选择具体开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-time-picker |
||||
|
v-model="form.open_time" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:59' |
||||
|
}" |
||||
|
placeholder="任意时间点" |
||||
|
value-format="HH:mm:ss" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>关机时间</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设置时间：</span> |
||||
|
<div> |
||||
|
<el-form-item |
||||
|
prop="close_setting" |
||||
|
:rules="[ |
||||
|
{required: true, message: '请选择关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
:class="{'no_margin': form.close_setting === 2}" |
||||
|
> |
||||
|
<el-radio-group v-model="form.close_setting" @change="clearCheckbox()"> |
||||
|
<el-radio :label="1" value="everyday">每天</el-radio> |
||||
|
<el-radio :label="2" value="weekly">每周</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="form.close_setting === 2" |
||||
|
:class="{'weekly_margin': form.close_setting === 2}" |
||||
|
prop="close_weekly" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择每周关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-checkbox-group v-model="selectCloseweekly"> |
||||
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
prop="close_time" |
||||
|
:rules="[ |
||||
|
{type: 'string', required: true, message: '请选择具体关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-time-picker |
||||
|
v-model="form.close_time" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:59' |
||||
|
}" |
||||
|
placeholder="任意时间点" |
||||
|
value-format="HH:mm:ss" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>设备方向</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设备方向：</span> |
||||
|
<el-form-item |
||||
|
prop="device_direction_name" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择具体设备方向', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.device_direction_name" size="small" class="filter-item" value-key="name" @change="selectDirection"> |
||||
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>启动画面</h4> |
||||
|
<!-- action="https://jsonplaceholder.typicode.com/posts/" --> |
||||
|
<div class="setting_cont upload_img"> |
||||
|
<el-form-item prop="startup_screen"> |
||||
|
<UploadCover ref="childUpload" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button> |
||||
|
<el-button round @click="resetForm('form')">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import UploadCover from '../../components/upload_cover.vue' |
||||
|
import { reqStartUpList, reqEditStartUp, reqClearStartUp } from '@/api/device/startUpList.js' |
||||
|
import { parseTime } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'DeviceConfig', |
||||
|
components: { UploadCover }, |
||||
|
filters: { |
||||
|
parseTime(time, cFormat) { |
||||
|
return parseTime(time, cFormat) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
blurry: '' |
||||
|
}, |
||||
|
// 获取开关机列表的参数 |
||||
|
queryInfo: { |
||||
|
device_id: '', |
||||
|
device_name: '', |
||||
|
is_state: '', |
||||
|
page: 1, |
||||
|
size: 10 |
||||
|
}, |
||||
|
total: 0, |
||||
|
// 开关机列表的数据 |
||||
|
startUpList: [], |
||||
|
form: { |
||||
|
device_direction: null, |
||||
|
device_direction_name: null, |
||||
|
device_id: '', |
||||
|
open_setting: null, // 开机状态的每天和每周 |
||||
|
close_setting: null, // 关机状态的每天和每周 |
||||
|
open_time: '', // 具体的开机时间 |
||||
|
close_time: '', // 具体的关机时间 |
||||
|
startup_screen: '', // 启动画面的图片 |
||||
|
open_weekly: [], |
||||
|
close_weekly: [] |
||||
|
}, |
||||
|
selectOpenWeekly: [], // 选中的开机每周状态 |
||||
|
selectCloseweekly: [], // 选中的关机机每周状态 |
||||
|
addFromVisible: false, |
||||
|
// 被选中的行 |
||||
|
sels: [], |
||||
|
clearBtnDisabled: true, |
||||
|
deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }], |
||||
|
weeklyList: [ |
||||
|
{ |
||||
|
id: '0', |
||||
|
name: '周日' |
||||
|
}, |
||||
|
{ |
||||
|
id: '1', |
||||
|
name: '周一' |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
name: '周二' |
||||
|
}, |
||||
|
{ |
||||
|
id: '3', |
||||
|
name: '周三' |
||||
|
}, |
||||
|
{ |
||||
|
id: '4', |
||||
|
name: '周四' |
||||
|
}, |
||||
|
{ |
||||
|
id: '5', |
||||
|
name: '周五' |
||||
|
}, |
||||
|
{ |
||||
|
id: '6', |
||||
|
name: '周六' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 将字符串渲染成汉字显示到页面 |
||||
|
setWeekly() { |
||||
|
const a = { |
||||
|
0: '日', |
||||
|
1: '一', |
||||
|
2: '二', |
||||
|
3: '三', |
||||
|
4: '四', |
||||
|
5: '五', |
||||
|
6: '六' |
||||
|
} |
||||
|
return function(str) { |
||||
|
if (str) { |
||||
|
return str.split(',').map(i => a[i]).join('/') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.getStartUpList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取开关机列表 |
||||
|
getStartUpList() { |
||||
|
// this.queryInfo.page = pager |
||||
|
const params = this.queryInfo |
||||
|
reqStartUpList(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.startUpList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.queryInfo.size = res.data.size |
||||
|
} else { |
||||
|
return this.$message.error('获取设备列表失败！') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑开关机 |
||||
|
editFormData(row) { |
||||
|
this.addFromVisible = true |
||||
|
this.form.device_id = row.device_id |
||||
|
this.form.open_setting = row.open_setting |
||||
|
this.form.close_setting = row.close_setting |
||||
|
this.form.open_time = row.open_time |
||||
|
this.form.close_time = row.close_time |
||||
|
this.form.startup_screen = row.startup_screen |
||||
|
this.form.open_weekly = row.open_weekly |
||||
|
if (row.open_weekly) { |
||||
|
this.selectOpenWeekly = row.open_weekly.split(',') |
||||
|
} |
||||
|
this.form.close_weekly = row.close_weekly |
||||
|
if (row.close_weekly) { |
||||
|
this.selectCloseweekly = row.close_weekly.split(',') |
||||
|
} |
||||
|
this.form.device_direction_name = row.device_direction == 1 ? '竖屏' : '横屏' |
||||
|
this.form.device_direction = row.device_direction |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.childUpload.imageUrl = this.form.startup_screen |
||||
|
}) |
||||
|
}, |
||||
|
// 每天/每周切换的情况下数据处理 |
||||
|
clearCheckbox() { |
||||
|
if (this.form.open_setting === 1) { |
||||
|
this.open_weekly = [] |
||||
|
this.form.open_weekly = null |
||||
|
} |
||||
|
if (this.form.close_setting === 1) { |
||||
|
this.close_weekly = [] |
||||
|
this.form.close_weekly = null |
||||
|
} |
||||
|
}, |
||||
|
// 选择设备方向处理 |
||||
|
selectDirection(selVal) { |
||||
|
console.log(selVal) |
||||
|
this.form.device_direction = selVal.key |
||||
|
this.form.device_direction_name = selVal.name |
||||
|
}, |
||||
|
// 重置表单数据 |
||||
|
resetForm(formName) { |
||||
|
this.addFromVisible = false |
||||
|
this.$refs[formName].resetFields() |
||||
|
}, |
||||
|
// 提交表单数据 |
||||
|
submitForm(formName) { |
||||
|
this.form.startup_screen = this.$refs.childUpload.imageUrl |
||||
|
if (this.form.open_setting === 2) { |
||||
|
this.form.open_weekly = this.selectOpenWeekly.join(',') |
||||
|
} |
||||
|
if (this.form.close_setting === 2) { |
||||
|
this.form.close_weekly = this.selectCloseweekly.join(',') |
||||
|
} |
||||
|
this.$refs[formName].validate(valid => { |
||||
|
if (valid) { |
||||
|
const params = { |
||||
|
close_setting: this.form.close_setting, |
||||
|
close_time: this.form.close_time, |
||||
|
close_weekly: this.form.close_weekly, |
||||
|
device_id: this.form.device_id, |
||||
|
open_setting: this.form.open_setting, |
||||
|
open_time: this.form.open_time, |
||||
|
open_weekly: this.form.open_weekly, |
||||
|
device_direction: this.form.device_direction, |
||||
|
startup_screen: this.form.startup_screen |
||||
|
} |
||||
|
console.log(params) |
||||
|
reqEditStartUp(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改设备成功' |
||||
|
}) |
||||
|
this.addFromVisible = false |
||||
|
this.getStartUpList(this.queryInfo.page) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 列表多选操作 - 清空btn状态 |
||||
|
// 单选单个复选框 |
||||
|
handleSelectionChange(sels) { |
||||
|
this.sels = sels |
||||
|
if (sels.length > 0) { |
||||
|
this.clearBtnDisabled = false |
||||
|
} else { |
||||
|
this.clearBtnDisabled = true |
||||
|
} |
||||
|
}, |
||||
|
// 清空 |
||||
|
removeStartUp(rows) { |
||||
|
const ids = [] |
||||
|
rows.forEach(item => { |
||||
|
ids.push(item.device_id) |
||||
|
}) |
||||
|
// console.log(ids) |
||||
|
this.$confirm('确定要清空选中的配置周期和启动画面吗?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const params = { |
||||
|
ids |
||||
|
} |
||||
|
reqClearStartUp(params).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.code == 200) { |
||||
|
this.$message({ |
||||
|
message: '清空成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.getStartUpList(this.startUpList.length > 1 ? this.queryInfo.page : this.queryInfo.page - 1) |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
message: '清空失败', |
||||
|
type: 'info' |
||||
|
}) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.queryInfo.size = size |
||||
|
this.getStartUpList() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.setting_btn { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.clear_btn { |
||||
|
color: #3a8aeb; |
||||
|
border-color: #3a8aeb; |
||||
|
} |
||||
|
.cover_img { |
||||
|
width: 65px; |
||||
|
} |
||||
|
.device_layer { |
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
.setting_item { |
||||
|
padding-top: 24px; |
||||
|
color: #333; |
||||
|
h4 { |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.setting_cont { |
||||
|
display: flex; |
||||
|
span { |
||||
|
display: block; |
||||
|
width: 80px; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
.no_margin { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.weekly_margin { |
||||
|
margin-bottom: 6px; |
||||
|
::v-deep .el-form-item__error { |
||||
|
top: 70%; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-form-item--small.el-form-item:last-child { |
||||
|
margin: 0; |
||||
|
} |
||||
|
::v-deep .el-radio-group { |
||||
|
display: block; |
||||
|
// line-height: 32px; |
||||
|
.el-radio { |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.upload_img { |
||||
|
padding-left: 82px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.avatar-uploader .el-upload { |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.avatar-uploader .el-upload:hover { |
||||
|
border-color: #409eff; |
||||
|
} |
||||
|
.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
line-height: 178px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.avatar { |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,363 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="head-container"> |
||||
|
<el-row type="flex"> |
||||
|
<el-col :span="20" class="col_flex"> |
||||
|
<div class="form_item"> |
||||
|
<span>状态：</span> |
||||
|
<el-select v-model="query.state" size="small" class="filter-item" style="width: 120px"> |
||||
|
<el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>设备ID：</span> |
||||
|
<el-input v-model="queryInfo.device_id" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @clear="getDevice" @blur="queryDevice(queryInfo.device_id)" @keyup.enter.native="queryDevice(queryInfo.device_id)" /> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>设备名称：</span> |
||||
|
<el-input v-model="queryInfo.device_name" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @clear="getDevice" @blur="getDevice" @keyup.enter.native="getDevice" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="page_add" :span="4"> |
||||
|
<el-button class="table_add clear_btn" plain disabled>清空</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<!-- table :data="deviceList"--> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-table style="width: 100%;" :data="deviceList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="device_id" label="设备ID" align="center" /> |
||||
|
<el-table-column prop="device_account" label="设备账号" align="center" /> |
||||
|
<el-table-column prop="device_name" label="设备名称" align="center" /> |
||||
|
<el-table-column label="设备方向" align="center"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div>{{ row.device_direction==1? '竖屏' : '横屏' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="organ_name" label="所属机构" align="center" /> > |
||||
|
|
||||
|
<el-table-column prop="isDel" label="设备状态" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.isDel ? '在线' : '离线' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="content" label="发布内容" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="update_time" label="创建时间" align="center" width="160"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div>{{ row.update_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" align="center" width="160"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button> |
||||
|
<el-button type="danger" class="record_btn" @click="recordData(scope.$index, scope.row)">记录</el-button> |
||||
|
<el-button type="danger" @click="removeDevice(scope.row)">解绑</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getDevice" @size-change="handleSizeChange" /> |
||||
|
<!-- 编辑设备 --> |
||||
|
<div class="layer"> |
||||
|
<el-dialog :title="dialogTitle" :close-on-click-modal="false" :show-close="false" :visible.sync="addFromVisible" width="576px"> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||
|
<el-form-item label="设备账号" prop="account"> |
||||
|
<el-input v-model="form.account" autocomplete="off" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备名称" prop="name"> |
||||
|
<el-input v-model="form.name" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="设备方向" prop="orientation_name"> |
||||
|
<el-select v-model="form.orientation_name" size="small" class="filter-item" @change="selectDirection"> |
||||
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button> |
||||
|
<el-button round @click="addFromVisible = false">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
<div class="publish_layer"> |
||||
|
<el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="970px" height="590px"> |
||||
|
<div class="content_warp"> |
||||
|
<div v-for="(items,index) in contentDevice" :key="index" class="release_list"> |
||||
|
<h4>发布名称 {{ items.relaase_name }} </h4> |
||||
|
<p style="margin-bottom: 10px"> 发布时间 {{ items.release_start.split("00:00:00")[0] }} </p> |
||||
|
<div class="device_cont_list"> |
||||
|
<!-- <div v-if="items.bgm_main != null && items.bgm_name != null" class="material_item item_cont"> |
||||
|
<div class="radio_img"></div> |
||||
|
<div class="file_name">{{ items.bgm_name }}</div> |
||||
|
</div> --> |
||||
|
<div v-for="(item, i) in items.show_materials" :key="'list-'+i" class="material_item item_cont"> |
||||
|
<div class="img_box"> |
||||
|
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" alt /> |
||||
|
</div> |
||||
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> |
||||
|
<div class="item_format"> |
||||
|
<span class="item_type">{{ item.deposit_url | getFileFormat }}</span> |
||||
|
<!-- <span v-if="item.material_type !== '0'" class="item_time">{{ item.duration | getSeconds }}</span> --> |
||||
|
</div> |
||||
|
<div class="file_name">{{ item.material_name }}</div> |
||||
|
<div v-if="item.bgm_name && item.material_type == 0" class="bgm_name">背景音乐:{{ item.bgm_name }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 记录 --> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="recordVisible" title="记录" class="record_layer" width="750px"> |
||||
|
<el-table :data="recordData"> |
||||
|
<el-table-column property="name" label="操作人" /> |
||||
|
<el-table-column property="permissionType" label="角色权限" /> |
||||
|
<el-table-column property="account" label="登录账号" /> |
||||
|
<el-table-column property="type" label="操作类型" /> |
||||
|
<el-table-column property="date" label="操作时间" /> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { ReqDeviceEdit, ReqDeviceList, ReqQueryDevice, ReqRemoveDevice, FetchFindReleaseDetailsByDeviceId } from '@/api/device/deviceList.js' |
||||
|
import { parseTime, getSeconds, getFileFormat } from '@/utils/index.js' |
||||
|
export default { |
||||
|
name: 'Device', |
||||
|
filters: { |
||||
|
parseTime(time, cFormat) { |
||||
|
return parseTime(time, cFormat) |
||||
|
}, |
||||
|
getSeconds(s) { |
||||
|
return getSeconds(s) |
||||
|
}, |
||||
|
getFileFormat(s) { |
||||
|
return getFileFormat(s) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
queryInfo: { |
||||
|
device_id: '', |
||||
|
device_name: '', |
||||
|
is_state: '', |
||||
|
page: 1, |
||||
|
size: 10 |
||||
|
}, |
||||
|
total: 0, |
||||
|
// device_id:'', |
||||
|
dialogTitle: '', |
||||
|
// 编辑的对话框 |
||||
|
addFromVisible: false, |
||||
|
contentVisible: false, |
||||
|
contentDevice: [], |
||||
|
recordVisible: false, |
||||
|
// 设备列表的数据 |
||||
|
deviceList: [], |
||||
|
stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }], |
||||
|
deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }], |
||||
|
query: { |
||||
|
state: null |
||||
|
}, |
||||
|
// 收集表单数据 |
||||
|
form: { |
||||
|
account: null, |
||||
|
name: null, |
||||
|
orientation_name: null, |
||||
|
orientation: null, |
||||
|
device_id: '', |
||||
|
orga_id: '1310000' |
||||
|
}, |
||||
|
rules: { |
||||
|
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }], |
||||
|
orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: {}, |
||||
|
mounted() { |
||||
|
this.getDevice() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取设备列表的数据 |
||||
|
getDevice() { |
||||
|
// this.queryInfo.page = pager |
||||
|
const params = this.queryInfo |
||||
|
ReqDeviceList(params).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.code == 200) { |
||||
|
this.deviceList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.queryInfo.size = res.data.size |
||||
|
} else { |
||||
|
return this.$message.error('获取设备列表失败！') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
editFormData(row) { |
||||
|
this.addFromVisible = true |
||||
|
this.form.account = row.device_account |
||||
|
this.form.name = row.device_name |
||||
|
this.form.orientation_name = row.device_direction == 1 ? '竖屏' : '横屏' |
||||
|
this.form.orientation = row.device_direction |
||||
|
this.form.device_id = row.device_id |
||||
|
}, |
||||
|
// 选择设备方向处理 |
||||
|
selectDirection(selVal) { |
||||
|
console.log(selVal) |
||||
|
this.form.orientation = selVal.key |
||||
|
this.form.orientation_name = selVal.name |
||||
|
}, |
||||
|
// 解绑 |
||||
|
removeDevice(row) { |
||||
|
// console.log(row.device_id) |
||||
|
this.$confirm(`你确定解绑${row.device_name}?`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const params = { |
||||
|
id: row.device_id |
||||
|
} |
||||
|
ReqRemoveDevice(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
this.$message({ |
||||
|
message: '解绑成功', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
// 解绑时 如果一页设备只剩下一个 则返回上一页 |
||||
|
this.getDevice(this.deviceList.length > 1 ? this.queryInfo.page : this.queryInfo.page - 1) |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
message: '已取消解绑', |
||||
|
type: 'info' |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
recordData(index, row) { |
||||
|
this.recordVisible = true |
||||
|
}, |
||||
|
// 查看 |
||||
|
handleClick(row) { |
||||
|
console.log(row) |
||||
|
this.contentVisible = true |
||||
|
const params = { |
||||
|
device_id: row.device_id |
||||
|
} |
||||
|
FetchFindReleaseDetailsByDeviceId(params).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
console.log(res) |
||||
|
this.contentDevice = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 修改设备信息并提交 |
||||
|
submitForm(formName) { |
||||
|
this.$refs[formName].validate(valid => { |
||||
|
if (valid) { |
||||
|
const params = { |
||||
|
account: this.form.account, |
||||
|
device_name: this.form.name, |
||||
|
device_direction: this.form.orientation, |
||||
|
device_id: this.form.device_id, |
||||
|
orga_id: '13000' |
||||
|
} |
||||
|
console.log(params) |
||||
|
ReqDeviceEdit(params).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '修改设备成功' |
||||
|
}) |
||||
|
} |
||||
|
this.addFromVisible = false |
||||
|
this.getDevice(this.queryInfo.page) |
||||
|
}) |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 查询设备 |
||||
|
queryDevice(id) { |
||||
|
const params = { |
||||
|
device_id: id |
||||
|
} |
||||
|
ReqQueryDevice(params).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.code == 200) { |
||||
|
this.getDevice() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.queryInfo.size = size |
||||
|
this.getDevice() |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.clear_btn { |
||||
|
color: #3a8aeb; |
||||
|
border-color: #3a8aeb; |
||||
|
} |
||||
|
.publish_layer { |
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 0 20px 30px 20px; |
||||
|
height: 590px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
} |
||||
|
.content_warp { |
||||
|
padding-top: 16px; |
||||
|
h4 { |
||||
|
margin: 6px 0 16px 0; |
||||
|
font-size: 16px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
.release_list{ |
||||
|
margin-bottom: 40px; |
||||
|
} |
||||
|
.device_cont_list{ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.item_cont{ |
||||
|
overflow: inherit; |
||||
|
} |
||||
|
.bgm_name{ |
||||
|
font-size: 12px; |
||||
|
padding: 10px 0; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 1; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
-moz-user-select: none; /*火狐*/ |
||||
|
-webkit-user-select: none; /*webkit浏览器*/ |
||||
|
-ms-user-select: none; /*IE10*/ |
||||
|
-khtml-user-select: none; /*早期浏览器*/ |
||||
|
user-select: none; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,399 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<el-row type="flex"> |
||||
|
<el-col :span="20" class="col_flex"> |
||||
|
<!-- 搜索 --> |
||||
|
<div class="form_item"> |
||||
|
<span>角色名称：</span> |
||||
|
<el-input |
||||
|
v-model="query.role_name" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="角色名称" |
||||
|
style="width: 200px;" |
||||
|
class="filter-item" |
||||
|
@keyup.enter.native="getUserList(page,query.role_name)" |
||||
|
@clear="getUserList(page,query.role_name)" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>管理员名称：</span> |
||||
|
<el-input |
||||
|
v-model="query.nickName" |
||||
|
clearable |
||||
|
size="small" |
||||
|
placeholder="管理员名称" |
||||
|
style="width: 200px;" |
||||
|
class="filter-item" |
||||
|
@keyup.enter.native="getUserList(page,query.nickName)" |
||||
|
@clear="getUserList(page,query.nickName)" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col class="page_add" :span="4"> |
||||
|
<el-button class="table_add" type="primary" round @click="addDialogVisible = true">新增</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<!--新增用户--> |
||||
|
<el-dialog |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
:show-close="false" |
||||
|
:visible.sync="addDialogVisible" |
||||
|
title="新增" |
||||
|
width="576px" |
||||
|
> |
||||
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> |
||||
|
<el-form-item |
||||
|
label="手机号" |
||||
|
prop="account" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请输入手机号', trigger: 'blur' } |
||||
|
]" |
||||
|
> |
||||
|
<el-input v-model="form.account" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="管理员名称" |
||||
|
prop="nickName" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请输入管理员名称', trigger: 'blur' }, |
||||
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
||||
|
]" |
||||
|
> |
||||
|
<el-input v-model="form.nickName" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="管理员角色" |
||||
|
prop="roles" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择管理员角色', trigger: 'change' } |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.roles" placeholder="请选择管理员角色" style="width: 336px"> |
||||
|
<el-option label="机构超级管理员" value="1" /> |
||||
|
<el-option label="普通用户" value="2" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="管理员状态" |
||||
|
prop="enabled" |
||||
|
:rules="[ |
||||
|
{ required: true, trigger: 'change', message: '请选择管理员状态' } |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.enabled" placeholder="请选择管理员状态" style="width: 336px"> |
||||
|
<el-option label="启用" value="1" /> |
||||
|
<el-option label="关闭" value="0" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" round>保存</el-button> |
||||
|
<el-button round @click="addDialogVisible=false">关闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!-- 编辑用户 --> |
||||
|
<el-dialog |
||||
|
append-to-body |
||||
|
:close-on-click-modal="false" |
||||
|
:show-close="false" |
||||
|
:visible.sync="editDialogVisible" |
||||
|
title="编辑" |
||||
|
width="576px" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="form" |
||||
|
:inline="true" |
||||
|
:model="editForm" |
||||
|
:rules="rules" |
||||
|
size="small" |
||||
|
label-width="100px" |
||||
|
> |
||||
|
<el-form-item label="管理员名称" prop="nickName"> |
||||
|
<el-input v-model="editForm.nickName" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="管理员角色" prop="roles"> |
||||
|
<el-input v-model="editForm.roles" disabled style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="机构名称" prop="orgName"> |
||||
|
<el-input v-model="editForm.orgName" disabled style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="更改手机号" prop="phone"> |
||||
|
<el-input v-model.number="editForm.phone" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="验证码" prop="code" class="auth_code"> |
||||
|
<el-input v-model.number="editForm.code" style="width: 336px" /> |
||||
|
<div class="login-code"> |
||||
|
<span @click="countdown()">{{ verification }}</span> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="登录密码" prop="password"> |
||||
|
<el-input v-model="editForm.password" style="width: 336px" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" round>保存</el-button> |
||||
|
<el-button round @click="editDialogVisible=false">关闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!--表格渲染--> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="userList" |
||||
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" |
||||
|
style="width: 100%;" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="username" width="135" align="center" label="登录账号" /> |
||||
|
<el-table-column prop="nickName" align="center" label="管理员名称" /> |
||||
|
<el-table-column prop="roles" align="center" label="管理角色"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-for="(item,index) in scope.row.roles" :key="index"> |
||||
|
<div>{{ item.name }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="org" align="center" label="机构名称"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.org ? scope.row.org.name : '' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="phone" align="center" label="手机号码" /> |
||||
|
<el-table-column label="状态" align="center" prop="enabled"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.enabled ? '启用' : '关闭' }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" width="155" align="center" label="创建日期"> |
||||
|
<template slot-scope="{row}"> |
||||
|
<div>{{ row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- v-if="checkPer(['admin','user:edit','user:del'])" --> |
||||
|
<el-table-column label="操作" width="120" align="center" fixed="right"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- <udOperation |
||||
|
:data="scope.row" |
||||
|
:permission="permission" |
||||
|
:disabled-dle="scope.row.id === user.id" |
||||
|
/>--> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
class="edit_btn" |
||||
|
@click="editFormData(scope.$index, scope.row)" |
||||
|
>编辑</el-button> |
||||
|
<el-button type="danger" class="delt_btn">删除</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="getUserList" @size-change="handleSizeChange" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchUserList } from '@/api/system/user' |
||||
|
import { FetchDropDownList } from '@/api/system/role' |
||||
|
import { isvalidPhone } from '@/utils/validate' |
||||
|
import { parseTime } from '@/utils/index.js' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
export default { |
||||
|
name: 'User', |
||||
|
filters: { |
||||
|
parseTime(time, cFormat) { |
||||
|
return parseTime(time, cFormat) |
||||
|
} |
||||
|
}, |
||||
|
components: { }, |
||||
|
// 数据字典 |
||||
|
data() { |
||||
|
// 自定义验证 |
||||
|
const validPhone = (rule, value, callback) => { |
||||
|
if (!value) { |
||||
|
callback(new Error('请输入电话号码')) |
||||
|
} else if (!isvalidPhone(value)) { |
||||
|
callback(new Error('请输入正确的11位手机号码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
userList: [], |
||||
|
total: 0, |
||||
|
page: 0, |
||||
|
size: 10, |
||||
|
addDialogVisible: false, |
||||
|
editDialogVisible: false, |
||||
|
query: { |
||||
|
role_name: '', |
||||
|
nickName: '' |
||||
|
}, |
||||
|
form: { |
||||
|
account: null, |
||||
|
nickName: '', |
||||
|
roles: null, |
||||
|
enabled: '' |
||||
|
}, |
||||
|
editForm: { |
||||
|
nickName: '', |
||||
|
roles: '', |
||||
|
orgName: '', |
||||
|
phone: '', |
||||
|
code: '', |
||||
|
password: '' |
||||
|
}, |
||||
|
disabledSendCode: false, |
||||
|
verification: '获取验证码', |
||||
|
countNum: 60, |
||||
|
height: document.documentElement.clientHeight - 180 + 'px;', |
||||
|
permission: { |
||||
|
add: ['admin', 'user:add'], |
||||
|
edit: ['admin', 'user:edit'], |
||||
|
del: ['admin', 'user:del'] |
||||
|
}, |
||||
|
rules: { |
||||
|
nickName: [ |
||||
|
{ required: true, message: '请输入管理员名称', trigger: 'blur' }, |
||||
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' } |
||||
|
], |
||||
|
phone: [ |
||||
|
{ required: true, trigger: 'blur', validator: validPhone } |
||||
|
], |
||||
|
code: [ |
||||
|
{ required: true, trigger: 'blur', message: '请输入验证码' } |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, trigger: 'blur', message: '请输入密码' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user' |
||||
|
]) |
||||
|
}, |
||||
|
mounted: function() { |
||||
|
this.getUserList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取用户列表的数据 |
||||
|
getUserList(pager = 0, name) { |
||||
|
this.page = pager |
||||
|
const param = { |
||||
|
page: this.page, |
||||
|
size: this.size, |
||||
|
blurry: name |
||||
|
} |
||||
|
FetchUserList(param).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.userList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.size = res.data.size |
||||
|
} else { |
||||
|
return this.$message.error('获取用户列表数据失败！') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 每条显示数据改变时的事件 |
||||
|
handleSizeChange(size) { |
||||
|
// 整理参数 |
||||
|
this.size = size |
||||
|
this.getUserList() |
||||
|
}, |
||||
|
getDropdownList() { |
||||
|
const param = { |
||||
|
|
||||
|
} |
||||
|
FetchDropDownList(param).then(res => { |
||||
|
if (res.code == 200) { |
||||
|
this.userList = res.data.content |
||||
|
this.total = res.data.totalElements |
||||
|
this.size = res.data.size |
||||
|
} else { |
||||
|
return this.$message.error('获取角色下拉列表数据失败！') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑 |
||||
|
editFormData(index, row) { |
||||
|
this.editDialogVisible = true |
||||
|
this.editForm.nickName = row.nickName |
||||
|
if (row.roles) { |
||||
|
row.roles.forEach(item => { |
||||
|
this.editForm.roles = item.name |
||||
|
}) |
||||
|
} |
||||
|
if (row.org) { |
||||
|
this.editForm.orgName = row.org.name |
||||
|
} |
||||
|
this.editForm.phone = row.phone |
||||
|
this.editForm.enabled = row.enabled |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
getAuthCode() { |
||||
|
// const param = { |
||||
|
// phone: this.editForm.phone |
||||
|
// } |
||||
|
// proxy.$http |
||||
|
// .post(proxy.$API.SENDMSGCODE, |
||||
|
// param |
||||
|
// ) |
||||
|
// .then(res => { |
||||
|
// if (res.type == 200) { |
||||
|
// this.countdown() |
||||
|
// } else { |
||||
|
// console.log(res.content) |
||||
|
// } |
||||
|
// }) |
||||
|
// .catch(res => { |
||||
|
// console.log(res) |
||||
|
// }) |
||||
|
}, |
||||
|
countdown() { |
||||
|
if (this.disabledSendCode) { |
||||
|
return |
||||
|
} |
||||
|
if (!/^1\d{10}$/.test(this.editForm.phone)) { |
||||
|
this.$message.error('手机号错误，请重新输入') |
||||
|
return |
||||
|
} |
||||
|
this.getAuthCode() |
||||
|
this.disabledSendCode = true |
||||
|
// this.isSendAuth = true |
||||
|
this.countNum = 60 |
||||
|
const timer = setInterval(() => { |
||||
|
this.verification = this.countNum + '重新获取' |
||||
|
this.countNum -= 1 |
||||
|
if (this.countNum < 1) { |
||||
|
clearInterval(timer) |
||||
|
this.verification = '重新获取' |
||||
|
this.disabledSendCode = false |
||||
|
// this.isSendAuth = false |
||||
|
console.log('倒计时结束') |
||||
|
} |
||||
|
}, 1000) |
||||
|
}, |
||||
|
checkboxT(row, rowIndex) { |
||||
|
return row.id !== this.user.id |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
.el-dialog__header { |
||||
|
background-color: #f1f1f1; |
||||
|
} |
||||
|
.edit_code { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue