xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

素材库-1

dev
xuhuajiao 3 years ago
parent
96f58cb306
commit
42aec0b99a
2 changed files with 100 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 184
      src/views/immediateRelease/index.vue
  2. 1
      src/views/materialContent/materialList/index.vue

184
src/views/immediateRelease/index.vue
View File

@ -8,7 +8,7 @@
<div class="input_wrap"> <div class="input_wrap">
<span class="input_label">名称</span> <span class="input_label">名称</span>
<el-input <el-input
v-model="form.name"
v-model="form.relaase_name"
:placeholder="changePlaceholder" :placeholder="changePlaceholder"
class="input_name" class="input_name"
/> />
@ -19,6 +19,7 @@
round round
class="release_btn" class="release_btn"
type="primary" type="primary"
@click="releaseSubmit"
>发布</el-button> >发布</el-button>
<el-button round type="primary">关闭</el-button> <el-button round type="primary">关闭</el-button>
</el-col> </el-col>
@ -29,21 +30,23 @@
<el-col class="step_form"> <el-col class="step_form">
<el-form-item <el-form-item
label="发布时间" label="发布时间"
prop="date"
prop="release_start"
:rules="[ :rules="[
{ required: true, message: '请选择发布时间', trigger: 'change' } { required: true, message: '请选择发布时间', trigger: 'change' }
]" ]"
label-width="100px" label-width="100px"
> >
<el-date-picker <el-date-picker
v-if="publishType === 0"
v-model="form.date"
v-if="publishType == 0"
v-model="form.release_start"
value-format="yyyy-MM-dd HH:mm:ss"
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
/> />
<el-date-picker <el-date-picker
v-else v-else
v-model="form.date"
v-model="form.release_start"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期"
@ -51,36 +54,36 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="publishType === 1"
v-if="publishType == 1"
label="设置周期" label="设置周期"
prop="timePeriod"
prop="release_cycle"
:rules="[ :rules="[
{ required: true, message: '请设置周期：', trigger: 'change' }, { required: true, message: '请设置周期：', trigger: 'change' },
]" ]"
:class="['set_weekly',{'no_margin': form.timePeriod === '每周'}]"
:class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]"
label-width="100px" label-width="100px"
> >
<el-radio-group v-model="form.timePeriod" @change="clearCheckbox()">
<el-radio-group v-model="form.release_cycle" @change="clearCheckbox()">
<el-radio label="每天" value="everyday" /> <el-radio label="每天" value="everyday" />
<el-radio label="每周" value="weekly" /> <el-radio label="每周" value="weekly" />
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="form.timePeriod === '每周'"
:class="{'weekly_margin': form.timePeriod === '每周'}"
prop="onweek"
v-if="form.release_cycle === '每周'"
:class="{'weekly_margin': form.release_cycle === '每周'}"
prop="release_weekly"
:rules="[ :rules="[
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, { required: true, message: '请选择每周开机时间', trigger: 'change' },
]" ]"
> >
<el-checkbox-group v-model="form.onweek">
<el-checkbox label="周一" name="onweek" />
<el-checkbox label="周二" name="onweek" />
<el-checkbox label="周三" name="onweek" />
<el-checkbox label="周四" name="onweek" />
<el-checkbox label="周五" name="onweek" />
<el-checkbox label="周六" name="onweek" />
<el-checkbox label="周日" name="onweek" />
<el-checkbox-group v-model="form.release_weekly">
<el-checkbox label="周一" name="release_weekly" />
<el-checkbox label="周二" name="release_weekly" />
<el-checkbox label="周三" name="release_weekly" />
<el-checkbox label="周四" name="release_weekly" />
<el-checkbox label="周五" name="release_weekly" />
<el-checkbox label="周六" name="release_weekly" />
<el-checkbox label="周日" name="release_weekly" />
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<!-- :rules="[ <!-- :rules="[
@ -88,10 +91,11 @@
]" --> ]" -->
<el-form-item <el-form-item
label="是否置顶" label="是否置顶"
prop="isTop"
prop="is_topping"
label-width="100px" label-width="100px"
> >
<el-radio v-model="form.isTop" label="1">置顶</el-radio>
<!-- <el-radio v-model="form.is_topping" label="1">置顶</el-radio> -->
<el-checkbox v-model="form.is_topping">置顶</el-checkbox>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -107,25 +111,26 @@
<div class="step_select_list"> <div class="step_select_list">
<div class="step_upload" @click="selectContVisible = true"></div> <div class="step_upload" @click="selectContVisible = true"></div>
<draggable <draggable
v-model="listSelectedData"
v-model="materialSelected"
class="drag_list" class="drag_list"
@end="dragEnd" @end="dragEnd"
> >
<div <div
v-for="(item, index) in listSelectedData"
:key="index"
v-for="(item, index) in materialSelected"
:key="'list-'+index"
:class="['material_item', 'item_cont']" :class="['material_item', 'item_cont']"
@click="selectedItem(item.id,item)"
@click="selectedItem(item.material_id,item)"
> >
<img v-if="item.coverImg" :src="item.coverImg" alt />
<div v-if="item.type == 'audio'" class="radio_img"></div>
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
<div class="item_format"> <div class="item_format">
<span class="item_type">{{ item.type }}</span>
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
<span class="item_type">{{ 1 }}</span>
<span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span>
</div> </div>
<div class="file_name">{{ item.name }}</div>
<div v-if="contentIds.includes(item.id)" class="select_handle">
<div class="select_delt" @click.stop="selectDelt(item.id,index)">
<div class="file_name">{{ item.material_name }}</div>
<!-- <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span> -->
<div v-if="contentIds.includes(item.material_id)" class="select_handle">
<div class="select_delt" @click.stop="selectDelt(item.material_id,index)">
<svg class="font-icon icon1" aria-hidden="true"> <svg class="font-icon icon1" aria-hidden="true">
<use xlink:href="#icon-guanbi2" /> <use xlink:href="#icon-guanbi2" />
</svg> </svg>
@ -147,18 +152,18 @@
<el-col class="step_form"> <el-col class="step_form">
<el-form-item <el-form-item
label="" label=""
prop="deviceSelect"
prop="release_device"
:rules="[ :rules="[
{ required: true, message: '请选择设备', trigger: 'change' }, { required: true, message: '请选择设备', trigger: 'change' },
]" ]"
> >
<el-radio-group v-model="form.deviceSelect">
<el-radio-group v-model="form.release_device">
<el-radio label="all" value="all">所有设备</el-radio> <el-radio label="all" value="all">所有设备</el-radio>
<el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio> <el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<div v-if="form.deviceSelect === 'all'" class="select_all_tip">所有设备都将被发送</div>
<div v-if="deviceTags.length > 0 && form.deviceSelect === 'other'" class="select_other">
<div v-if="form.release_device === 'all'" class="select_all_tip">所有设备都将被发送</div>
<div v-if="deviceTags.length > 0 && form.release_device === 'other'" class="select_other">
<el-row> <el-row>
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col> <el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
<el-col :span="4"> <el-col :span="4">
@ -213,7 +218,7 @@
<div v-if="item.type == 'audio'" class="radio_img"></div> <div v-if="item.type == 'audio'" class="radio_img"></div>
<div class="item_format"> <div class="item_format">
<span class="item_type">{{ item.type }}</span> <span class="item_type">{{ item.type }}</span>
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
<!-- <span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span> -->
</div> </div>
<div class="file_name">{{ item.name }}</div> <div class="file_name">{{ item.name }}</div>
<span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span> <span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span>
@ -234,7 +239,7 @@
<div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div> <div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" round @click="submitForm('form')">确 定</el-button>
<el-button type="primary" round>确 定</el-button>
<el-button round @click="cancelContSelect">取 消</el-button> <el-button round @click="cancelContSelect">取 消</el-button>
</div> </div>
</el-dialog> </el-dialog>
@ -255,17 +260,17 @@
class="edit_material" class="edit_material"
> >
<div class="edit_img"> <div class="edit_img">
<img v-if="item.coverImg" :src="item.coverImg" alt />
<div v-if="item.type == 'audio'" class="radio_img"></div>
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt />
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div>
<span class="">{{ index+1 }}</span> <span class="">{{ index+1 }}</span>
</div> </div>
<div class="edit_cont"> <div class="edit_cont">
<div class="edit_cont_base"> <div class="edit_cont_base">
<p>{{ item.name }}</p>
<span>{{ item.type }}</span>
<p>{{ item.material_name }}</p>
<span>{{ item.material_type }}</span>
<span>{{ item.size }}</span> <span>{{ item.size }}</span>
</div> </div>
<div v-if="item.type === 'JPG'" class="edit_cont_set">
<div v-if="item.material_type == 0" class="edit_cont_set">
<div class="set_time"> <div class="set_time">
<span>展示时长</span> <span>展示时长</span>
<el-input v-model="time" type="text" style="width: 66px" /> <el-input v-model="time" type="text" style="width: 66px" />
@ -286,7 +291,7 @@
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button> <el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
</div> </div>
</div> </div>
<div v-else class="edit_cont_other">内容时长：{{ item.time }}</div>
<div v-else class="edit_cont_other">内容时长：{{ item.duration | getSeconds }}</div>
</div> </div>
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@ -363,15 +368,22 @@
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import ThemeGalleryList from '../components/ThemeGalleryList.vue' import ThemeGalleryList from '../components/ThemeGalleryList.vue'
import { getSeconds } from '@/utils/index.js'
export default { export default {
name: 'ImmediateRelease', name: 'ImmediateRelease',
components: { components: {
draggable, draggable,
ThemeGalleryList ThemeGalleryList
}, },
filters: {
getSeconds(s) {
return getSeconds(s)
}
},
data() { data() {
return { return {
publishType: 0,
materialSelected: [], // 从其他页面选择带过来的素材
publishType: 0, // 判断是定时发布还是即时发布页面
time: 15, time: 15,
audio_name: 'audio.mp3', audio_name: 'audio.mp3',
animation: null, animation: null,
@ -392,7 +404,32 @@ export default {
isTop: null, isTop: null,
deviceSelect: '', deviceSelect: '',
timePeriod: null, timePeriod: null,
onweek: []
onweek: [],
actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”,
is_topping: false, // 是否置顶,
orga_id: '', // "机构id"
relaase_name: '', // 发布名称
release_cycle: '', // 发布周期 0.无 1.每天 2.每周
release_weekly: '', // 发布每周 如果设置为每天则为空
release_device: '', // 发布设备 1.全部 2.部分
release_deviceDTOs: [], // {"device_id": "设备id"}
release_end: '', // “发布结束时间 yyyy-MM-dd HH:mm:ss”
release_id: null, // 发布id 为null则为新增
// {
// "duration": 时长(s),
// "effect": 切换动效,
// "material_id": "素材id",
// "material_name": "素材名称",
// "img_path","显示图片路径",
// "bgm_path":"背景音乐",
// "file_size":"文件大小",
// "ranking": 排序,
// "rm_id": "关联id 新增则为null"
// }
release_materialDTOs: [],
release_start: '', // 发布开始时间 yyyy-MM-dd HH:mm:ss
release_type: '' // 发布类型
}, },
listData: [ listData: [
{ {
@ -428,40 +465,6 @@ export default {
time: '01:20' time: '01:20'
} }
], ],
listSelectedData: [
{
id: '1',
name: '1',
type: 'JPG',
size: '12kb',
coverImg: require('@/assets/images/background.jpg'),
time: ''
},
{
id: '2',
name: '2',
type: 'JPG',
size: '12kb',
coverImg: require('@/assets/images/background.jpg'),
time: ''
},
{
id: '3',
name: '4',
type: 'VEDIO',
size: '12kb',
coverImg: require('@/assets/images/background.jpg'),
time: '03:00'
},
{
id: '4',
name: '4',
type: 'audio',
size: '12kb',
coverImg: '',
time: '01:20'
}
],
contentIds: [], contentIds: [],
uploadContentIds: [], uploadContentIds: [],
selectedData: [], // 选择内容 - 选择的item selectedData: [], // 选择内容 - 选择的item
@ -492,8 +495,15 @@ export default {
computed: { computed: {
changePlaceholder() { changePlaceholder() {
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01'
},
defaultImg() {
return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"'
} }
}, },
created() {
this.materialSelected = JSON.parse(localStorage.getItem('selectedMaterial'))
console.log(this.materialSelected)
},
mounted() { mounted() {
console.log(this.$route.query.tag) console.log(this.$route.query.tag)
if (this.$route.path === '/release') { if (this.$route.path === '/release') {
@ -502,11 +512,17 @@ export default {
if (this.$route.query.tag) { if (this.$route.query.tag) {
this.publishType = this.$route.query.tag this.publishType = this.$route.query.tag
} }
console.log(this.$router.options.routes)
console.log(this.$route.path)
}, },
methods: { methods: {
// 发布提交
releaseSubmit() {
console.log(this.form)
console.log(this.form.relaase_name)
console.log(this.form.release_start)
console.log(this.form.is_topping)
console.log(this.form.release_materialDTOs)
},
selectEdit() { selectEdit() {
this.listEditVisible = true this.listEditVisible = true
// console.log(this.selectedData) // console.log(this.selectedData)

1
src/views/materialContent/materialList/index.vue
View File

@ -168,7 +168,6 @@ export default {
mkdirVisible: false, // 新建编辑layer mkdirVisible: false, // 新建编辑layer
folderChecked: -1, // 文件夹是否单击选中 folderChecked: -1, // 文件夹是否单击选中
materialList: [], // 素材库list materialList: [], // 素材库list
isPropMultiSelected: this.isMultiSelected,
isEditMaterial: false, // 是否是编辑素材 isEditMaterial: false, // 是否是编辑素材
formatType: null, // 上传素材类型 0 img 1 video 2 audio formatType: null, // 上传素材类型 0 img 1 video 2 audio
materialId: null, // 编辑时需要参数 id materialId: null, // 编辑时需要参数 id

Write Preview
Loading…
Cancel
Save