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
Split 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">
<span class="input_label">名称</span>
<el-input
v-model="form.name"
v-model="form.relaase_name"
:placeholder="changePlaceholder"
class="input_name"
/>
@ -19,6 +19,7 @@
round
class="release_btn"
type="primary"
@click="releaseSubmit"
>发布</el-button>
<el-button round type="primary">关闭</el-button>
</el-col>
@ -29,21 +30,23 @@
<el-col class="step_form">
<el-form-item
label="发布时间"
prop="date"
prop="release_start"
:rules="[
{ required: true, message: '请选择发布时间', trigger: 'change' }
]"
label-width="100px"
>
<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"
placeholder="选择日期"
/>
<el-date-picker
v-else
v-model="form.date"
v-model="form.release_start"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
@ -51,36 +54,36 @@
/>
</el-form-item>
<el-form-item
v-if="publishType === 1"
v-if="publishType == 1"
label="设置周期"
prop="timePeriod"
prop="release_cycle"
:rules="[
{ required: true, message: '请设置周期：', trigger: 'change' },
]"
:class="['set_weekly',{'no_margin': form.timePeriod === '每周'}]"
:class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]"
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="weekly" />
</el-radio-group>
</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="[
{ 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-form-item>
<!-- :rules="[
@ -88,10 +91,11 @@
]" -->
<el-form-item
label="是否置顶"
prop="isTop"
prop="is_topping"
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-col>
</el-row>
@ -107,25 +111,26 @@
<div class="step_select_list">
<div class="step_upload" @click="selectContVisible = true"></div>
<draggable
v-model="listSelectedData"
v-model="materialSelected"
class="drag_list"
@end="dragEnd"
>
<div
v-for="(item, index) in listSelectedData"
:key="index"
v-for="(item, index) in materialSelected"
:key="'list-'+index"
: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">
<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 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">
<use xlink:href="#icon-guanbi2" />
</svg>
@ -147,18 +152,18 @@
<el-col class="step_form">
<el-form-item
label=""
prop="deviceSelect"
prop="release_device"
:rules="[
{ 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="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
</el-radio-group>
</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-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
<el-col :span="4">
@ -213,7 +218,7 @@
<div v-if="item.type == 'audio'" class="radio_img"></div>
<div class="item_format">
<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 class="file_name">{{ item.name }}</div>
<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>
<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>
</div>
</el-dialog>
@ -255,17 +260,17 @@
class="edit_material"
>
<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>
</div>
<div class="edit_cont">
<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>
</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">
<span>展示时长</span>
<el-input v-model="time" type="text" style="width: 66px" />
@ -286,7 +291,7 @@
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
</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 slot="footer" class="dialog-footer">
@ -363,15 +368,22 @@
<script>
import draggable from 'vuedraggable'
import ThemeGalleryList from '../components/ThemeGalleryList.vue'
import { getSeconds } from '@/utils/index.js'
export default {
name: 'ImmediateRelease',
components: {
draggable,
ThemeGalleryList
},
filters: {
getSeconds(s) {
return getSeconds(s)
}
},
data() {
return {
publishType: 0,
materialSelected: [], // 从其他页面选择带过来的素材
publishType: 0, // 判断是定时发布还是即时发布页面
time: 15,
audio_name: 'audio.mp3',
animation: null,
@ -392,7 +404,32 @@ export default {
isTop: null,
deviceSelect: '',
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: [
{
@ -428,40 +465,6 @@ export default {
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: [],
uploadContentIds: [],
selectedData: [], // 选择内容 - 选择的item
@ -492,8 +495,15 @@ export default {
computed: {
changePlaceholder() {
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() {
console.log(this.$route.query.tag)
if (this.$route.path === '/release') {
@ -502,11 +512,17 @@ export default {
if (this.$route.query.tag) {
this.publishType = this.$route.query.tag
}
console.log(this.$router.options.routes)
console.log(this.$route.path)
},
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() {
this.listEditVisible = true
// console.log(this.selectedData)

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

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

Write Preview
Loading…
Cancel
Save