这是第二节，第一节请看前一份博客。
3.代码详情
<!--节目编辑页-->
<template>
<div class="channel-edit-container">
<!--顶部操作按钮区 控件类型，1=图文 2=图片 3=文字 4=字幕 5=分类容器(子项焦点) 6=滚动图-->
<div class="header">
<el-button
:title="$t('program.addImaTex')"
size="small"
plain
class="self_button"
@click="addImageTextItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/imageText.png" alt />
</el-button>
<el-button
:title="$t('program.addImage')"
size="small"
plain
class="self_button"
@click="addImageItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/media-icon.png" alt />
</el-button>
<el-button
:title="$t('program.addText')"
size="small"
plain
class="self_button"
@click="addTextItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/text-icon.png" alt />
</el-button>
<el-button
:title="$t('program.addCaption')"
size="small"
plain
class="self_button"
@click="addCaptionItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/subtitles-icon.png" alt />
</el-button>
<el-button
:title="$t('program.addClassificationContainer')"
size="small"
plain
class="self_button"
@click="addClassContainerItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/classcontainer.png" alt />
</el-button>
<el-button
:title="$t('programModel.banner')"
size="small"
plain
class="self_button"
@click="addBannerItem"
>
<img style="height:18px;width:18px;" src="@/assets/program/banner.png" alt />
</el-button>
<div class="right">
<!-- 缩放 -->
<span style="margin-top: 8px;float:left;font-size:14px;color:#99a9bf">{{ $t('program.scale') }}：</span>
<el-slider v-model="value" :min="30" :step="10" style="width:200px;float:left;"></el-slider>
<span style="margin-left:20px;" @click="toggleMaxize">
<svg-icon
icon-class="maximize"
style="width:25px;height:25px;margin-top:5px;cursor:pointer;"
></svg-icon>
</span>
<el-button
:loading="subloading"
type="primary"
size="medium "
class="p-button"
@click="submitProgramEdit"
>{{ $t('program.submit') }}</el-button>
<el-button
size="medium"
class="p-button"
style="margin-right:10px;"
@click="closeProgramEdit"
>{{ $t('program.close') }}</el-button>
</div>
</div>
<div class="editer_content">
<!--中间内容编辑区-->
<div ref="editarea" class="editer_content_area">
<div
ref="editbox"
:style="{background:backgroundEditScre,height: wrapheight +'px', width: wrapwidth + 'px', transformOrigin: '0% 0%',transform: 'scale('+scaleRadio+')',backgroundColor: bgColor}"
class="edit_screen"
>
<dragable-item
v-for="(item,index) in items"
:id="index"
:key="item.identification"
:item="item"
:scale="scaleRadio"
:isresizable="isresizable"
:isdraggable="isdraggable"
:widthisreadonly="widthisreadonly"
:heightisreadonly="heightisreadonly"
@changeisresizable="changeisresizable2"
@changingData="getChangingData"
@changingData_keypress="changingData_keypress"
@updateFinalData="getUpdateFinalData"
@contextmenu.prevent.native="openMenu($event)"
@noclonedate="noCloneDate"
></dragable-item>
</div>
</div>
<!--右侧信息区-->
<div class="editer_content_sidebar">
<!-- 节目名称 -->
<div>
<span style="font-size:14px;color:#99a9bf"> {{ $t('programModel.channelName') }}:</span>
<el-input
v-model="name"
:placeholder="$t('programModel.channelName')"
size="mini"
style="width: 200px;display: inline-block;"
></el-input>
</div>
<!-- 屏幕尺寸： -->
<div style="margin-top:10px;">
<span style="font-size:14px;color:#99a9bf">{{ $t('program.screenSize') }}：</span><span style="font-size:12px">
{{ wrapwidth }} *
<el-input-number
v-model="wrapheight"
:min="minWrapheight"
:max="100000000"
controls-position="right"
size="mini"
@change="maxWrapheight"
></el-input-number>
<!--
<el-input
v-model="wrapheight"
size="mini"
style="width:70px;display: inline-block;"
></el-input> -->
</span>
</div>
<div style="margin-top:10px;">
<span style="font-size:14px;color:#99a9bf">{{ $t('programModel.eyeSaveMode') }}：</span><span style="font-size:12px">
<el-select
v-model="eyeProMode"
size="mini"
@change="eyeProMode_select()"
>
<el-option
v-for="item in eyeProModeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</span>
</div>
<el-tabs v-model="activeName">
<!-- 当前区域 -->
<el-tab-pane :label="$t('program.currentRegion')" name="first">
<div class="title">
<span v-if="activeItem.type == 1">{{ $t('programModel.imageText') }}</span>
<span v-else-if="activeItem.type == 2">{{ $t('program.image') }}</span>
<span v-else-if="activeItem.type == 3">{{ $t('program.text') }}</span>
<span v-else-if="activeItem.type == 4">{{ $t('program.caption') }}</span>
<span v-else-if="activeItem.type == 5">{{ $t('programModel.classContainer') }}</span>
<span v-else-if="activeItem.type == 6">{{ $t('programModel.banner1') }}</span>
</div>
<div class="common-setting">
<!-- 通用信息 -->
<div class="common-setting-title">{{ $t('program.commonInformation') }} </div>
<div class="common-setting-body">
<el-row>
<el-col :span="24" style="margin-bottom:10px;">
<div v-if="items[activeItem.id]">
<el-row style="margin-bottom:10px;">
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;width:20px;">X:</span>
<el-input-number
v-model="items[activeItem.id].x"
:disabled="!isdraggable"
:min="0"
:max="maxX"
controls-position="right"
size="mini"
></el-input-number>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;width:20px;">Y:</span>
<el-input-number
v-model="items[activeItem.id].y"
:disabled="!isdraggable"
:min="0"
:max="maxY"
controls-position="right"
size="mini"
></el-input-number>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;width:20px;">W:</span>
<el-input-number
v-model="items[activeItem.id].width"
:min="10"
:max="maxWidth"
:disabled="widthisreadonly"
controls-position="right"
size="mini"
></el-input-number>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;width:20px;">H:</span>
<el-input-number
v-model="items[activeItem.id].height"
:min="10"
:max="maxHeight"
:disabled="heightisreadonly"
controls-position="right"
size="mini"
></el-input-number>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div style="margin-bottom:10px;margin-top:10px">
<!-- 背景颜色： -->
<span style="color:#99a9bf">{{ $t('program.backgroundColor') }}：</span>
<span style="margin-top:10px">
<el-color-picker v-model="items[activeItem.id].bgColor" size="mini"></el-color-picker></span>
</div>
</el-col>
<el-col :span="12">
<!-- 背景透明度： -->
<span style="color:#99a9bf;margin-top:18px;float:left">{{ $t('program.backgroundOpacity') }}：
</span>
<el-slider
v-model="items[activeItem.id].bgOpacity"
:min="0"
:max="1"
:step="0.1"
style="width:30%;float:left;margin-top:10px"
></el-slider>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<!-- 连接设置 -->
<div v-if="items[activeItem.id]">
<div class="common-setting-title">{{ $t('programModel.linkSet') }} </div>
<div class="common-setting-body">
<el-row >
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;">{{ $t('programModel.windowMode') }}:</span>
<el-select v-model="items[activeItem.id].linkFormModel" :placeholder="$t('programModel.selectplease')" size="mini" clearable >
<el-option
v-for="item in linkFormModelList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;">{{ $t('programModel.focusEnable') }}:</span>
<el-switch v-model="items[activeItem.id].focusEnable" :active-text="$t('common.yes')" :inactive-text="$t('common.no')" size="mini"></el-switch>
</el-col>
</el-row>
<el-row style="margin-top:10px">
<el-col :span="12">
<span style="color:#99a9bf;display:inline-block;">{{ $t('programModel.linkType') }}:</span>
<el-select
v-model="items[activeItem.id].linkType"
:placeholder="$t('programModel.selectplease')"
:clearable="true"
size="mini"
@change="clearLinkInfo2()"
>
<el-option
v-for="item in linkTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col v-if="items[activeItem.id] && items[activeItem.id].linkType>0" :span="12">
<span style="margin-right:26px;;color:#99a9bf;display:">
{{ $t('programModel.linkId') }}:</span>
<span v-if="items[activeItem.id].linkType>0">
<el-input
v-model="items[activeItem.id].linkName"
:readonly="true"
size="mini"
style="width:60%"
></el-input>
<i style="color:#409EFF" class="el-icon-plus" @click="show_categoryOrMaterial()"></i>
<i style="color:#409EFF" class="el-icon-delete" @click="clearLinkInfo2()"></i>
</span>
</el-col>
</el-row>
<el-row v-if="items[activeItem.id].linkType>0" style="margin-top:10px">
<el-col :span="24">
<span style="color:#99a9bf;display:inline-block;">{{ $t('programModel.filterLabelClas') }}:</span>
<el-cascader
v-model="items[activeItem.id].clasTag"
:options="tagListSelect"
:props="props"
separator=":"
size="mini"
style="width:82%"
clearable></el-cascader>
</el-col>
<el-col :span="24" style="margin-top:10px">
<span style="color:#99a9bf;display:inline-block;">{{ $t('programModel.filterLabelSource') }}:</span>
<el-cascader
v-model="items[activeItem.id].itemTag"
:options="tagListSelect"
:props="props"
separator=":"
size="mini"
style="width:82%"
clearable></el-cascader>
</el-col>
</el-row>
</div>
</div>
<!-- 基本设置 -->
<div class="common-setting-title">{{ $t('program.basicSetting') }}</div>
<div class="common-setting-body">
<!--基本信息/图文-->
<div v-if="activeItem.type === 1 &&items[activeItem.id]">
<div style="margin-bottom:20px;">
<el-row>
<el-col :span="12" style="margin-top:10px">
<!-- 字体大小 -->
<span style="color:#99a9bf">{{ $t('program.fontSize') }}：</span>
<el-input
v-model="items[activeItem.id].fontSize"
size="mini"
style="width:68%"
></el-input>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf">{{ $t('program.fontColor') }}：</span>
<el-color-picker v-model="items[activeItem.id].fontColor" size="mini"></el-color-picker>
</el-col>
</el-row>
<el-row style="margin-top:10px">
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.text') }}：</span>
<el-input
v-model="items[activeItem.id].text"
size="mini"
style="width:70%"
></el-input>
</el-col>
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.fontStyle') }}：</span>
<el-select v-model="items[activeItem.id].font" :placeholder="$t('common.choseFont')" style="width:68%" size="mini">
<el-option label="sans" value="sans"></el-option>
<el-option label="serif" value="serif"></el-option>
<el-option label="monospace" value="monospace"></el-option>
</el-select>
</el-col>
</el-row>
<el-row style="margin-top:10px">
<el-col :span="12">
<div style="display:flex;flex-direction:row">
<div style="margin-right:29px;color:#99a9bf">{{ $t('programModel.linkType3') }}：</div>
<div v-if="(imgVidiolistInfo.length==0 || !imgVidiolistInfo[0].pic)">
<div class="avatar-uploader" >
<div @click="selectMaterial(1)">
<i class="el-icon-plus avatar-uploader-icon"></i>
</div>
</div>
<!-- <el-upload
ref="upload"
:auto-upload="false"
:show-file-list="false"
action="#"
accept=".png, .jpg, .jpeg, .gif, .webp"
class="avatar-uploader"
@click="selectMaterial(1)">
<div>
<i class="el-icon-plus avatar-uploader-icon"></i>
</div>
</el-upload> -->
</div>
<div
v-if="imgVidiolistInfo.length > 0 && imgVidiolistInfo[0].pic"
style="position:relative;width:180px;height:101px; background: #ebebeb;"
class="imageDiv"
>
<div
style="z-index:995;position:absolute;right:0px;top:0px;width:180px;height:101px;"
>
<span
class="el-upload-list__item-preview "
>
<el-image
:src="imgVidiolistInfo[0].pic"
:preview-src-list="[imgVidiolistInfo[0].pic]"
class="avatar"
fit="contain"
></el-image>
</span>
</div>
<div style="position:absolute;z-index:9999;left:0px;top:0px;width:180px;height:101px;">
<i class="el-icon-error" @click.stop="handleDelete()"></i>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 选择素材 -->
<!-- <el-button
v-show=" items[activeItem.id].pic ==''"
type="primary"
icon="el-icon-plus"
size="mini"
@click="selectMaterial(1)"
>{{ $t('program.selectMaterial') }}</el-button>
<el-row>
<el-col :span="24" style="margin-bottom:10px;">
<el-table
:data="imgVidiolistInfo"
size="mini"
>
<el-table-column type="index" align="left" width="35">
</el-table-column>
<el-table-column :label="$t('program.image')" align="center">
<template slot-scope="scope">
<span >
<el-image
:src="scope.row.pic"
:preview-src-list="[scope.row.pic]"
style="width:50px;height:20px;"
fit="contain"
></el-image>
</span>
</template>
</el-table-column>
<el-table-column
:label="$t('program.operations')"
align="center"
width="80"
>
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-close"
@click="handleDelete()"
></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row> -->
</div>
<!-- 图片 -->
<div v-if="activeItem.type === 2 &&items[activeItem.id]">
<el-row style="margin-top:10px">
<el-col :span="12">
<div style="display:flex;flex-direction:row">
<div style="margin-right:29px;color:#99a9bf">{{ $t('programModel.linkType3') }}：</div>
<div v-if="(imgVidiolistInfo2.length==0 || !imgVidiolistInfo2[0].pic)">
<div class="avatar-uploader" >
<div @click="selectMaterial(1)">
<i class="el-icon-plus avatar-uploader-icon"></i>
</div>
</div>
</div>
<div
v-if="imgVidiolistInfo2.length > 0 && imgVidiolistInfo2[0].pic"
style="position:relative;width:180px;height:101px; background: #ebebeb;"
class="imageDiv"
>
<div
style="z-index:995;position:absolute;right:0px;top:0px;width:180px;height:101px;"
>
<span
class="el-upload-list__item-preview "
>
<el-image
:src="imgVidiolistInfo2[0].pic"
:preview-src-list="[imgVidiolistInfo2[0].pic]"
class="avatar"
fit="contain"
></el-image>
</span>
</div>
<div style="position:absolute;z-index:9999;left:0px;top:0px;width:180px;height:101px;">
<i class="el-icon-error" @click.stop="handleDelete()"></i>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 选择素材 -->
<!-- <el-button
v-if="imgVidiolistInfo2 && imgVidiolistInfo2.length ==0"
type="primary"
icon="el-icon-plus"
size="mini"
@click="selectMaterial(1)"
>{{ $t('program.selectMaterial') }}</el-button>
<el-row>
<el-col :span="24" style="margin-bottom:10px;">
<el-table
:data="imgVidiolistInfo2"
row-key="key"
size="mini"
>
<el-table-column type="index" align="left" width="35">
</el-table-column>
<el-table-column :label="$t('program.image')" align="center">
<template slot-scope="scope">
<span >
<el-image
:src="scope.row.pic"
:preview-src-list="[scope.row.pic]"
style="width:50px;height:20px;"
fit="contain"
></el-image>
</span>
</template>
</el-table-column>
<el-table-column
:label="$t('program.operations')"
align="center"
width="80"
>
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-close"
@click="handleDelete(scope.row,scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row> -->
</div>
<!--文本-->
<div v-else-if="activeItem.type === 3 &&items[activeItem.id] ">
<el-row>
<el-col :span="12" style="margin-top:10px">
<!-- 字体大小 -->
<span style="color:#99a9bf">{{ $t('program.fontSize') }}：</span>
<el-input
v-model="items[activeItem.id].fontSize"
size="mini"
style="width:68%"
></el-input>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf">{{ $t('program.fontColor') }}：</span>
<el-color-picker v-model="items[activeItem.id].fontColor" size="mini"></el-color-picker>
</el-col>
</el-row>
<el-row style="margin-top:10px">
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.text') }}：</span>
<el-input
v-model="items[activeItem.id].text"
size="mini"
style="width:70%"
></el-input>
</el-col>
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.fontStyle') }}：</span>
<el-select
v-model="items[activeItem.id].font"
:placeholder="$t('common.choseFont')"
style="width:68%"
size="mini">
<el-option label="sans" value="sans"></el-option>
<el-option label="serif" value="serif"></el-option>
<el-option label="monospace" value="monospace"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<!--字幕-->
<div v-else-if="activeItem.type === 4 &&items[activeItem.id]">
<el-row>
<el-col :span="12" style="margin-top:10px">
<!-- 字体大小 -->
<span style="color:#99a9bf">{{ $t('program.fontSize') }}：</span>
<el-input
v-model="items[activeItem.id].fontSize"
size="mini"
style="width:68%"
></el-input>
</el-col>
<el-col :span="12">
<span style="color:#99a9bf">{{ $t('program.fontColor') }}：</span>
<el-color-picker v-model="items[activeItem.id].fontColor" size="mini"></el-color-picker>
</el-col>
</el-row>
<el-row style="margin-top:10px">
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.text') }}：</span>
<el-input
v-model="items[activeItem.id].text"
size="mini"
style="width:70%"
></el-input>
</el-col>
<el-col :span="12">
<span style="margin-right:26px;color:#99a9bf">{{ $t('program.fontStyle') }}：</span>
<el-select
v-model="items[activeItem.id].font"
:placeholder="$t('common.choseFont')"
style="width:68%"
size="mini">
<el-option label="sans" value="sans"></el-option>
<el-option label="serif" value="serif"></el-option>
<el-option label="monospace" value="monospace"></el-option>
</el-select>
</el-col>
</el-row>
</div>
<!--容器 -->
<!-- <div v-else-if="activeItem.type === 5">
<el-row>
<el-col :span="24">
<span style="color:#99a9bf">{{ $t('programModel.classContainer') }}：</span>
<el-switch v-model="items[activeItem.id].multiline" :active-text="$t('common.yes')" :inactive-text="$t('common.no')"></el-switch>
</el-col>
</el-row>
</div> -->
<!--滚动图 -->
<div v-show="activeItem.type === 6">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="selectMaterial(0)"
>{{ $t('program.selectMaterial') }}</el-button>
<el-row>
<el-col :span="24" style="margin-bottom:10px;">
<el-table
ref="mediaDragTable"
:data="imgVidiolistInfo3"
row-key="key"
size="mini"
>
<el-table-column type="index" align="left" width="35">
</el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline="" class="table-expand">
<el-form-item v-if="props.row.linkType>0" :label="$t('programModel.filterLabelClas')">
<span>{{ props.row.clasTag }}</span>
</el-form-item>
<el-form-item v-if="props.row.linkType>0" :label="$t('programModel.filterLabelSource')">
<span>{{ props.row.itemTag }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column :label="$t('program.image')" align="center">
<template slot-scope="scope">
<span >
<el-image
:src="scope.row.pic"
:preview-src-list="[scope.row.pic]"
style="width:50px;height:20px;"
fit="contain"
></el-image>
</span>
</template>
</el-table-column>
<!-- 连接类型 -->
<el-table-column :label="$t('programModel.linkType')" align="center">
<template slot-scope="{row}">
<span>{{ row.linkType | linkTypeList_String(te) }}</span>
</template>
</el-table-column>
<!-- 连接名称 -->
<el-table-column :label="$t('programModel.linkName')" align="center">
<template slot-scope="{row}">
<span>{{ row.linkName }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('programModel.windowMode')" align="center">
<template slot-scope="{row}">
<span>{{ row.linkFormModel | linkFormModel_string(te) }}</span>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column
:label="$t('program.operations')"
align="center"
width="80"
>
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-setting"
@click="handleSetting(scope.row,scope.$index)"
></el-button>
<el-button
type="text"
size="mini"
icon="el-icon-close"
@click="handleDelete3(scope.row,scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<!--自定义右键菜单-->
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="moveUpOneStep">{{ $t('program.moveUp') }}</li>
<li @click="moveDownOneStep">{{ $t('program.moveDown') }}</li>
<li @click="moveUpTop">{{ $t('program.moveToTop') }}</li>
<li @click="moveDownBottom">{{ $t('program.moveToDown') }}</li>
<li @click="copyBottom">{{ $t('common.copy') }}</li>
<li @click="handleDeleteMenu">{{ $t('program.delete') }}</li>
</ul>
<!-- 图片和视频多媒体素材选择弹窗 -->
<material-dialog
:show.sync="showMaterialDialog"
:count.sync="picCount"
:res-type = "resType"
@choosedMaterial="choosedMaterial"></material-dialog>
<!-- 图片和视频多媒体素材选择弹窗 只能选一个-->
<single-material-dialog
:show.sync="show_SingleMaterialDialog"
:res-type = "resType"
@choosedMaterialSingle="choosedMaterialSingle">
</single-material-dialog>
<!--图片素材设置弹窗-->
<img-setting-dialog
:show.sync="showImgSettingDialog"
:setdata="setImgData"
:img-index="imgIndex"
:tag-list-select = "tagListSelect"
@imgSettingUpdate="imgSettingUpdate"
></img-setting-dialog>
<!--图片素材设置弹窗-->
<material-linkid-dialog
:show.sync="show_linkId_materialList"
:link-type.sync="linkType"
:tag-list-select="tagListSelect"
@sourceClasChoose="sourceClasChoose"
></material-linkid-dialog>
</div>
</template>
<script>
import Vue from 'vue'
import MaterialDialog from '@/components/MaterialList' // 图片视频模块选择素材弹框
import SingleMaterialDialog from '@/components/SingleMaterialList' // 图片视频模块选择素材弹框
import ImgSettingDialog from './components/img-setting-dialog' // 图片视频素材设置音量等
import DragableItem from '@/components/dragableItem' // 所以编辑模块源组件
import MaterialLinkidDialog from '@/components/materialLinkidList' // 图片视频模块选择素材弹框
import html2canvas from 'html2canvas'
import Sortable from 'sortablejs' // 引入拖拽排序包
import { uuid } from 'vue-uuid' // 引入uuid生成包
import { _throttle } from '@/prototypeEx'
export default {
name: 'ProgramEdit',
components: {
DragableItem,
MaterialDialog,
ImgSettingDialog,
SingleMaterialDialog,
MaterialLinkidDialog
},
filters: {
linkTypeList_String(id, te) {
if (id == -2) {
return te('programModel.linkTypeburden2')
} else if (id == -1) {
return te('programModel.linkTypeburden1')
} else if (id == 1) {
return te('programModel.linkType1')
} else if (id == 2) { return te('programModel.linkType99') }
},
linkFormModel_string(id, te) {
if (id == 1) {
return te('programModel.linkFormModel1')
} else {
return te('programModel.linkFormModel2')
}
}
},
data() {
return {
eyeProMode: 1,
minWrapheight: 600,
props: { multiple: true, emitPath: false, checkStrictly: true },
linkType: 0,
show_linkId_materialList: false,
show_linkId_categoryList: false,
show_SingleMaterialDialog: false,
name: '', // 节目名称
common_: this.$route.query.common == 'true',
wrapwidth: 1000, // 屏幕（画布）宽
wrapheight: 600, // 屏幕（画布）高
picCount: 0,
imgVidiolistInfo: [], // 激活块可编辑信息列表
imgVidiolistInfo2: [], // 激活块可编辑信息列表
imgVidiolistInfo3: [],
linkTypeList: [ // -2=历史记录 -1=收藏夹 1=资源 2=分类
{ id: -2, name: this.$t('programModel.linkTypeburden2') },
{ id: -1, name: this.$t('programModel.linkTypeburden1') },
{ id: 1, name: this.$t('programModel.linkType1') },
{ id: 2, name: this.$t('programModel.linkType99') }
],
eyeProModeList: [
{ id: 1, name: this.$t('programModel.eyeProMode1') },
{ id: 2, name: this.$t('programModel.eyeProMode2') },
{ id: 3, name: this.$t('programModel.eyeProMode3') }
],
linkFormModelList: [
{ id: 1, name: this.$t('programModel.linkFormModel1') },
{ id: 2, name: this.$t('programModel.linkFormModel2') }
],
pageRollingList: [
{ id: 0, name: this.$t('programModel.autoScrollSetting0') },
{ id: 1, name: this.$t('programModel.autoScrollSetting1') },
{ id: 2, name: this.$t('programModel.autoScrollSetting2') },
{ id: 3, name: this.$t('programModel.autoScrollSetting3') },
{ id: 4, name: this.$t('programModel.autoScrollSetting4') },
{ id: 5, name: this.$t('programModel.autoScrollSetting5') }
],
imgIndex: undefined,
heightisreadonly: false,
widthisreadonly: false,
isresizable: true,
isdraggable: true,
bgColor: '#FFFFFF', // 节目背景颜色
bgColorList: ['#FFFFFF', '#000000', '#409EFF'],
backgroundEditScre: 'linear-gradient(-90deg, rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px',
backgroundEditScreList: ['linear-gradient(-90deg, rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px',
'linear-gradient(-90deg, rgba(250, 250, 250, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(250, 250, 250, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px',
'linear-gradient(-90deg, rgba(250, 250, 250, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(250, 250, 250, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px'
],
divBackColorList: ['#409EFF', '#FFFFFF', '#FFFFFF'],
value: 100, // 缩放操作滑块的绑定值
showMaterialDialog: false, // 选择素材弹窗
showImgSettingDialog: false, // 图片素材设置弹框
resType: -1, // 文件类型
items: [], // 编辑块数据列表(节目数据列表)
activeItem: {
x: 0,
y: 0,
width: 0,
height: 0,
pic: '',
type: 0,
bgColor: '#FFFFFF',
bgOpacity: 1,
linkType: -2,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
fontSize: 14, // 默认字体大小
fontColor: '#000000', // 默认字体颜色
text: '',
font: 'serif', // “sans”, “serif”, “monospace"
focusEnable: false,
// multiline: false,
id: 0 // id其实就是数组的索引值index
},
actveItemData: null, // 激活某块的数据信息
activeItemFlag: true, // 激活模块拷贝数据的flag，性能优化
visible: false,
top: 0,
left: 0,
dataURL: '', // 保持截屏操作后的base64数据地址
ratio: 1, // 缩略值，截缩略图操作需要
setImgData: null, // 传递给弹窗图片设置数据
activeName: 'first', // 右侧tab选项卡激活标签
tagsflag: false, // tags标签默认不渲染，有数据才渲染
sortable: null, // 拖拽排序
mediaSortable: null, // 多媒体素材拖拽排序
activeNames: ['1'],
subloading: false,
mode: undefined,
programId: undefined,
tagListSelect: [],
pagination: {
layout: 'prev,pager,next,jumper,sizes,->, total',
pageSizes: [10, 20, 30, 40],
currentPage: 1,
pageSize: 10,
total: 0
}
}
},
computed: {
scaleRadio() {
return this.value / 100
},
// 最大x值：屏幕宽 - item宽
maxX() {
return this.wrapwidth - this.items[this.activeItem.id].width
},
// 最大y值：屏幕宽 - item宽
maxY() {
return this.wrapheight - this.items[this.activeItem.id].height
},
// 最大w宽度值：屏幕宽 - item的x坐标
maxWidth() {
return this.wrapwidth - this.items[this.activeItem.id].x
},
// 最大h高度值：屏幕宽 - item的y坐标
maxHeight() {
return this.wrapheight - this.items[this.activeItem.id].y
}
},
watch: {
visible(value) {
// 监测，关闭右键菜单
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
},
$route() {
// fix 未关闭当前编辑页面从其他节目进入编辑页为刷新bug，必须与固定affix中meta设置noCache字段配合使用才能解决bug
this.initScreen()
}
},
created() {
this.label_list()
this.initScreen()
},
activated() {
this.initActiveData()
},
destroyed() {
if (this.sortable) {
this.sortable.destroy()
}
if (this.mediaSortable) {
this.mediaSortable.destroy()
}
},
mounted() {
},
methods: {
te(arg) {
const hasKey = this.$te(arg)
if (hasKey) {
const result = this.$t(arg)
return result
}
return arg
},
label_list() {
const reqPara = {
data: {
pageIndex: 1,
pageSize: 9999,
include: 0
}
}
this.urlmethod(this.url.label.list, reqPara)
.then(res => {
var tagList = res.data && res.data.list ? [...res.data.list] : []
var obj = {}
var childOjb = {}
tagList.forEach(v => {
obj = {}
obj.label = v.name
obj.value = v.name
obj.disabled = true
obj.children = []
v.value.forEach(val => {
childOjb = {}
childOjb.label = val
childOjb.value = v.name + ':' + val
obj.children.push(childOjb)
})
this.tagListSelect.push(obj)
})
})
.catch(err => {
console.log('err', err)
})
},
maxWrapheight() {
this.items.forEach((item, index, arr) => {
if (index == 0) {
this.minWrapheight = item.y + item.height + 15
} else {
this.minWrapheight = item.y + item.height + 15 > this.minWrapheight ? item.y + item.height + 15 : this.minWrapheight
}
})
console.log('change' + this.minWrapheight + this.wrapheight + this.items[this.activeItem.id].y)
},
// keep-alive后，判断需不需要重新获取数据
initActiveData() {
if (this.$route.query.mode) {
if (
this.$route.query.programId &&
this.$route.query.programId !== this.programId
) {
this.initScreen()
return
}
if (this.$route.query.mode !== this.mode) {
this.initScreen()
return
}
}
},
// 初始化屏幕大小
initScreen() {
this.mode = this.$route.query.mode
this.programId = this.$route.query.programId
const para = {
data: {
id: Number(this.$route.query.programId)
}
}
if (this.$route.query.mode === 'edit' || this.$route.query.mode === 'copy') {
this.urlmethod(this.url.channel.detail, para).then((res) => {
this.name = this.$route.query.mode === 'edit' ? res.data.name : (res.data.name + '[copy]')
this.items = [...res.data.layout]
this.items.forEach((item, index, arr) => {
if (index == 0) {
this.minWrapheight = item.y + item.height
} else {
this.minWrapheight = item.y + item.height > this.minWrapheight ? item.y + item.height : this.minWrapheight
}
this.wrapheight = this.minWrapheight + 15
if (item.linkType > 0 && item.clasTag) {
item.clasTag = item.clasTag.split(',')
}
if (item.linkType > 0 && item.itemTag) {
item.itemTag = item.itemTag.split(',')
}
if (!item.linkId > 0) {
this.$set(item, 'linkId', undefined)
}
if (!item.linkName) {
this.$set(item, 'linkName', undefined)
}
if (!item.clasTag) {
this.$set(item, 'clasTag', undefined)
}
if (!item.itemTag) {
this.$set(item, 'itemTag', undefined)
}
if (item.type == 6 && item.picUnitList && item.picUnitList.length > 0) {
item.picUnitList.forEach((item2, index) => {
if (!item2.linkId > 0) {
this.$set(item2, 'linkId', undefined)
}
if (!item2.linkName) {
this.$set(item2, 'linkName', undefined)
}
if (!item2.clasTag) {
this.$set(item2, 'clasTag', undefined)
}
if (!item2.itemTag) {
this.$set(item2, 'itemTag', undefined)
}
item2.key = uuid.v1()
if (item2.linkType > 0 && item2.clasTag) {
item2.clasTag = item2.clasTag.split(',')
}
if (item2.linkType > 0 && item2.itemTag) {
item2.itemTag = item2.itemTag.split(',')
}
})
}
})
if (this.wrapwidth > this.wrapheight) {
this.ratio = 400 / this.wrapwidth
} else {
this.ratio = 400 / this.wrapheight
}
this.$nextTick(() => {
if (this.$refs.mediaDragTable) {
this.setMediaSort()
}
})
})
.catch((err) => {
console.log(err)
})
} else {
// 通过name存在判断是否有存在的节目数据
if (this.name) {
this.reset()
}
if (this.$route.query.screen) {
this.wrapwidth = this.width
this.wrapheight = this.height
if (this.wrapwidth > this.wrapheight) {
this.ratio = 400 / this.wrapwidth
} else {
this.ratio = 400 / this.wrapheight
}
}
}
},
// 图文添加
addImageTextItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 1,
width: 200,
height: 200,
x: 0,
y: 0,
pic: '',
fontSize: 14, // 默认字体大小
fontColor: '#000000', // 默认字体颜色
font: 'serif',
text: '',
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1()
}
this.items.push(temObj)
},
// 点击图片模块
addImageItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 2,
width: 200,
height: 200,
x: 0,
y: 0,
pic: '',
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1()
}
this.items.push(temObj)
},
// 添加文本模块
addTextItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 3,
width: 200,
height: 200,
x: 0,
y: 0,
pic: '',
fontSize: 14, // 默认字体大小
fontColor: '#000000', // 默认字体颜色
font: 'serif',
text: '',
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1()
}
this.items.push(temObj)
},
// 添加字幕模块
addCaptionItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 4,
width: 200,
height: 200,
x: 0,
y: 0,
pic: '',
fontSize: 14, // 默认字体大小
fontColor: '#000000', // 默认字体颜色
font: 'serif',
text: '',
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
linkId: undefined,
clasTag: undefined,
itemTag: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1()
}
this.items.push(temObj)
},
// 分类容器
addClassContainerItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 5,
width: 200,
height: 200,
x: 0,
y: 0,
// multiline: false,
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1()
}
this.items.push(temObj)
},
addBannerItem() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
const temObj = {
type: 6,
width: 200,
height: 200,
x: 0,
y: 0,
bgColor: this.divBackColorList[this.eyeProMode - 1],
bgOpacity: 1,
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
focusEnable: false,
identification: uuid.v1(),
picUnitList: []
}
this.items.push(temObj)
},
changeisresizable2(value2) {
this.isresizable = value2
this.widthisreadonly = !value2
this.heightisreadonly = !value2
},
eyeProMode_select() {
this.bgColor = this.bgColorList[this.eyeProMode - 1]
this.backgroundEditScre = this.backgroundEditScreList[this.eyeProMode - 1]
},
changingData_keypress: _throttle(function(val) {
this.items[this.activeItem.id].x = this.items[this.activeItem.id].x + val.x
this.items[this.activeItem.id].y = this.items[this.activeItem.id].y + val.y
}, 200),
getChangingData: _throttle(function(val) {
// 获取激活模块的实时的位置信息（拖动中、改变中、激活前后等等）
// this.activeItem.x = val.x
// this.activeItem.y = val.y
// this.activeItem.width = val.width
// this.activeItem.height = val.height
console.log(JSON.stringify(this.items[this.activeItem.id]))
this.activeItem.type = val.type
this.isdraggable = true
this.activeItem.id = val.id // id其实就是数组的索引值index
this.items[this.activeItem.id].x = val.x
this.items[this.activeItem.id].y = val.y
this.items[this.activeItem.id].width = val.width
this.items[this.activeItem.id].height = val.height
this.items[this.activeItem.id].pageRolling = val.pageRolling != 'undefined' ? val.pageRolling : 0
if (this.activeItem.type == 6) {
this.imgVidiolistInfo3 = this.items[this.activeItem.id].picUnitList
}
if (this.activeItem.type == 1) {
this.imgVidiolistInfo = []
if (this.items[this.activeItem.id].pic) {
this.imgVidiolistInfo.push(this.items[this.activeItem.id])
}
}
if (this.activeItem.type == 2) {
this.imgVidiolistInfo2 = []
if (this.items[this.activeItem.id].pic) {
this.imgVidiolistInfo2.push(this.items[this.activeItem.id])
}
}
}, 200),
// 监听拖拽模块的拖拽中、缩放中，这段时间内不需要拷贝数据
noCloneDate() {
this.activeItemFlag = false
},
getUpdateFinalData(val) {
// 获取激活模块最后确定的位置信息
this.activeItemFlag = true
this.items.forEach((item, index, arr) => {
if (index === val.id) {
item.x = val.x
item.y = val.y
item.width = val.width
item.height = val.height
}
})
// console.log('update', this.items)
},
// 右键上移一层
moveUpOneStep() {
// console.log(this.activeItem.id)
// console.log(item, this.items)
if (this.activeItem.id === this.items.length - 1) {
return
}
this.swapItems(this.items, this.activeItem.id + 1, this.activeItem.id)
// console.log(this.items)
},
// 右键下移一层
moveDownOneStep() {
if (this.activeItem.id === 0) {
return
}
this.swapItems(this.items, this.activeItem.id, this.activeItem.id - 1)
// console.log(this.items)
},
// 右键上移至顶层
moveUpTop() {
if (this.activeItem.id === this.items.length - 1) {
return
}
this.items.push(this.items.splice(this.activeItem.id, 1)[0])
},
copyBottom() {
this.isresizable = true
this.isdraggable = true
this.widthisreadonly = false
this.heightisreadonly = false
var temObj = JSON.parse(JSON.stringify(this.items[this.activeItem.id]))
temObj.x = 0
temObj.y = 0
temObj.identification = uuid.v1()
this.items.push(temObj)
},
// 右键下移至底部
moveDownBottom() {
if (this.activeItem.id === 0) {
return
}
this.items.unshift(this.items.splice(this.activeItem.id, 1)[0])
},
// 视频-图片点击选择素材按钮
selectMaterial(type) {
if (type == 1) {
this.resType = 1
this.show_SingleMaterialDialog = true
} else {
this.resType = 1
this.picCount = type
this.showMaterialDialog = true
}
},
// 右键删除
handleDeleteMenu() {
this.items.splice(this.activeItem.id, 1)
},
// 工具函数，交互数组的两个元素
swapItems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
return arr
},
// 打开右键菜单
openMenu(e) {
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft // 15: margin right
if (left > maxLeft) {
this.left = maxLeft
} else {
this.left = left
}
this.top = e.clientY - 60 // fix 位置bug
this.visible = true
},
// 关闭右键菜单
closeMenu() {
this.visible = false
},
choosedMaterialSingle(material) {
var temObj = {}
temObj = {
pic: material.url
}
this.items[this.activeItem.id].pic = material.url
if (this.items[this.activeItem.id].type == 1) {
this.imgVidiolistInfo = []
this.imgVidiolistInfo.push(temObj)
} else {
this.imgVidiolistInfo2 = []
this.imgVidiolistInfo2.push(temObj)
}
},
// 获取选中的素材列表,监听子组件事件，获取传参数据
choosedMaterial(materiallist) {
var temObj = {}
materiallist.forEach((item) => {
temObj = {
linkType: 1,
clasTag: undefined,
itemTag: undefined,
linkId: undefined,
linkName: undefined,
linkFormModel: 1,
pic: item.url,
key: uuid.v1()
}
this.isresizable = true
this.isdraggable = true
this.items[this.activeItem.id].picUnitList.push(temObj)
})
this.imgVidiolistInfo3 = this.items[this.activeItem.id].picUnitList
this.$nextTick(() => {
if (this.items[this.activeItem.id].type == 6) { this.setMediaSort() }
})
},
// 设置列表设置操作
handleSetting(row, $index) {
this.imgIndex = $index
this.showImgSettingDialog = true
this.setImgData = row
},
sourceClasChoose(v) {
this.items[this.activeItem.id].linkId = v.id
this.items[this.activeItem.id].linkName = v.name
},
// 监听图片设置弹窗组件传递过来的更新数据
imgSettingUpdate(v, allset, index) {
this.items[this.activeItem.id].picUnitList.forEach((i, index2) => {
if (v.url === i.url && index == index2) {
i.linkType = v.linkType
i.clasTag = v.clasTag
i.itemTag = v.itemTag
i.linkId = v.linkId
i.linkName = v.linkName
i.linkFormModel = v.linkFormModel
}
})
if (allset) {
this.items[this.activeItem.id].picUnitList.forEach((i) => {
i.linkType = v.linkType
i.clasTag = v.clasTag
i.itemTag = v.itemTag
i.linkId = v.linkId
i.linkName = v.linkName
i.linkFormModel = v.linkFormModel
})
}
},
// 设置列表删除操作
handleDelete() {
this.items[this.activeItem.id].pic = ''
this.items[this.activeItem.id].type == 1 ? this.imgVidiolistInfo = [] : this.imgVidiolistInfo2 = []
},
show_categoryOrMaterial() {
this.show_linkId_materialList = true
this.linkType = this.items[this.activeItem.id] && this.items[this.activeItem.id].linkType ? this.items[this.activeItem.id].linkType : 0
},
handleDelete3(row, $index) {
this.items[this.activeItem.id].picUnitList.forEach((item, index, arr) => {
if (index == $index) {
arr.splice(index, 1)
}
})
},
// 提交节目编辑
async submitProgramEdit() {
if (this.name === '') {
this.$message({
message: this.$t('programModel.channelNameNotNull'), // 请输入节目名称
type: 'warning'
})
return
}
this.subloading = true
this.items.forEach((item, index, arr) => {
if (index == 0) {
this.wrapheight = item.y + item.height + 15
} else {
this.wrapheight = (item.y + item.height + 15) > this.wrapheight ? (item.y + item.height) + 15 : this.wrapheight
}
if (item.linkType > 0 && item.clasTag && item.clasTag.length > 0) {
item.clasTag = item.clasTag.join()
}
if (item.linkType > 0 && item.itemTag && item.itemTag.length > 0) {
item.itemTag = item.itemTag.join()
}
if (item.type == 6 && item.picUnitList && item.picUnitList.length > 0) {
item.picUnitList.forEach((item2) => {
if (item2.linkType > 0 && item2.clasTag && item2.clasTag.length > 0) {
item2.clasTag = item2.clasTag.join()
}
if (item2.linkType > 0 && item2.itemTag && item2.itemTag.length > 0) {
item2.itemTag = item2.itemTag.join()
}
})
}
})
// 截缩略图,是异步操作，拿到结果后再下一步提交
await this.toImage().then((dataURL) => {
const base64String = dataURL
.toString()
.substring(dataURL.indexOf(',') + 1) // 截取base64以便上传
const para = {
data: {
pic: base64String,
name: this.name,
common: this.$route.query.common == 'true',
layout: this.items
}
}
para.data.id = Number(this.$route.query.programId)
if (this.$route.query.mode === 'edit') {
this.urlmethod(this.url.channel.update, para).then(() => {
this.subloading = false
this.$message({
message: this.$t('common.updateSuccess'),
type: 'success'
})
// 最有是最大化显示的时候恢复正常显示
if (!this.$store.state.app.navbar.opened) {
this.toggleMaxize()
}
// 删除节目编辑的tagsview
this.$store.dispatch('tagsView/delView', this.$route)
this.$route.query.common == 'true' ? this.$router.push({
name: 'publicchannelmanagement'
}) : this.$router.push({
name: '/channel-management'
})
})
.catch((err) => {
this.subloading = false
console.log(err)
})
} else {
para.data.id = undefined
this.urlmethod(this.url.channel.add, para).then(() => {
this.subloading = false
this.$message({
message: this.$t('common.addSuccess'), // 新增成功
type: 'success'
})
this.$store.dispatch('tagsView/delView', this.$route)
this.$route.query.common == 'true' ? this.$router.push({
name: 'publicchannelmanagement'
}) : this.$router.push({
name: '/channel-management'
})
})
.catch((err) => {
this.subloading = false
console.log(err)
})
}
})
},
// 点击关闭节目编辑页面，不更新数据
closeProgramEdit() {
// 只有当最大化显示的时候，才关闭最大化
// console.log(this.$store.state.app.navbar.opened)
if (!this.$store.state.app.navbar.opened) {
this.toggleMaxize()
}
// 删除节目编辑的tagsview
this.$store.dispatch('tagsView/delView', this.$route)
localStorage.removeItem('worldRegion') // 清除世界区域数据
this.$route.query.common == 'true' ? this.$router.push({
name: 'publicchannelmanagement'
}) : this.$router.push({
name: '/channel-management'
})
},
// 截屏操作，将画布转换成base64图片数据
toImage() {
return new Promise((resolve, reject) => {
html2canvas(this.$refs.editbox, {
useCORS: true,
allowTaint: true,
// dpi: 300,
scale: this.ratio / this.scaleRadio, // 这里和缩放条关联起来，fix缩放后导致截图bug
width: this.wrapwidth * this.scaleRadio, // 这里和缩放条关联起来，fix缩放后导致截图bug
height: this.wrapheight * this.scaleRadio // 这里和缩放条关联起来，fix缩放后导致截图bug
}).then((canvas) => {
const dataURL = canvas.toDataURL('image/png')
this.dataURL = dataURL
console.log(dataURL)
resolve(dataURL)
})
})
},
// tag删除
handleTagClose(tag) {
this.tags.splice(this.tags.indexOf(tag), 1)
},
// 多媒体素材拖拽排序
setMediaSort() {
const el = this.$refs.mediaDragTable.$el.querySelectorAll(
'.el-table__body-wrapper > table > tbody'
)[0]
this.mediaSortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: (evt) => {
const targetRow = this.imgVidiolistInfo3.splice(evt.oldIndex, 1)[0]
this.imgVidiolistInfo3.splice(evt.newIndex, 0, targetRow)
this.items[this.activeItem.id].picUnitList = this.imgVidiolistInfo3
}
})
},
// 最大化和最小化切换
toggleMaxize() {
// 导航栏和菜单栏状态一致才切换菜单栏
if (
this.$store.state.app.navbar.opened ===
this.$store.state.app.sidebar.opened
) {
this.$store.dispatch('app/toggleSideBar')
}
this.$store.dispatch('app/toggleNavBar')
},
clearLinkInfo2() {
this.items[this.activeItem.id].linkId = undefined
this.items[this.activeItem.id].linkName = undefined
// = undefined
// this.items[this.activeItem.id].linkName = ''
// alert(this.items[this.activeItem.id].linkName)
// this.items[this.activeItem.id].clasTag = undefined
// this.items[this.activeItem.id].itemTag = undefined
},
// 重置
reset() {
this.name = ''
this.bgColor = this.bgColorList[0]
this.eyeProMode = 1
this.backgroundEditScre = this.backgroundEditScreList[0]
this.wrapwidth = 1000
this.wrapheight = 600
this.items = []
this.imgVidiolistInfo = []
this.imgVidiolistInfo2 = []
this.imgVidiolistInfo3 = []
this.activeItem.type = 0
}
}
}
</script>
<style lang="scss" scoped>
.channel-edit-container {
background-color: #fff;
color: #424f63;
position: relative;
.avatar-uploader {
border: 1px dashed #d9d9d9;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 180px;
height: 101px;
line-height: 101px;
text-align: center;
}
.avatar {
width: 180px;
height: 101px;
display: block;
}
.el-icon-error {
height: 20px;
width: 180px;
text-align: right;
background-size: 100% 100%;
color: #F56C6C;
font-size: 15px;
opacity: 0;
}
.imageDiv:hover{
opacity: 0.8;
.el-icon-error {
font-size:18px;
color:#F56C6C;
opacity: 0.9;
}
}
.el-icon-error:hover {
opacity: 1 !important;
}
.header {
padding: 10px 10px;
border-bottom: 1px solid #ccc;
.right {
float: right;
.p-button {
float: right;
}
}
}
.editer_content {
// padding: 20px; // 此内边距会导致截图白边bug
height: calc(100vh - 153px);
width: 100%;
position: relative;
.editer_content_area {
border: 1px solid #ccc;
background-color: rgb(230, 230, 230);
overflow: auto;
height: 100%;
// width: 75%;
width: calc(100% - 580px);
display: inline-block;
position: relative;
.edit_screen {
position: absolute;
}
}
.editer_content_sidebar {
// background-color: green;
padding: 10px;
width: 580px;
height: 100%;
// height: calc(100vh - 153px);
overflow: auto;
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
.title {
font-size: 20px;
color: darkcyan;
margin-bottom: 10px;
}
.common-setting {
border: 1px solid #ccc;
height: 650px;
.common-setting-title {
background-color: #f9f9f9;
padding: 5px;
font-size:15px;
color: #409EFF;
}
.common-setting-body {
padding: 10px;
font-size: 13px;
}
}
}
.edit_screen {
width: 1000px;
background-color: #fff;
border: 1px solid #000;
}
.el-icon-plus {
cursor: pointer;
}
.el-icon-delete {
cursor: pointer;
}
.editScrennBack{
background: linear-gradient(-90deg, rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(9, 27, 126, 0.6) 1px, transparent 1px) 0% 0% / 20px 20px;
}
}
// .editer_footer {
// padding: 0 10px;
// height: 50px;
// line-height: 50px;
// width: 100%;
// border-top: 1px solid #ccc;
// }
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
.common-setting-title {
background-color: #f9f9f9;
padding: 5px;
font-size:15px;
color: #409EFF;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius:5px;
background: #ccc;
}
::-webkit-scrollbar-track {
background-color: #eee;
}
</style>
<style lang="scss">
.channel-edit-container {
.demo-table-expand {
margin-left:100px;
font-size: 0;
}
.demo-table-expand label {
width:150px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 100%;
}
.self_button {
padding: 6px 15px;
}
.el-form-item {
margin-bottom: 5px;
}
.tag {
margin-left: 10px;
}
.el-date-editor .el-range-separator {
width: 10%; // fix css bug
}
// 折叠面包样式覆盖
.el-collapse-item__wrap {
padding-left: 20px;
}
}
// 最大化时候重置的覆盖样式
.hideNavbar {
.editer_content {
height: calc(100vh - 59px) !important;
}
.editer_content_sidebar {
height: calc(100vh - 59px) !important;
}
}
/**
拖拽样式
*/
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #dcdfe6 !important;
}
.labelcolor .el-form-item__label{
color:#99a9bf;
}
.my-autocomplete {
li {
line-height: normal;
padding: 7px;
.name {
text-overflow: ellipsis;
overflow: hidden;
}
.anchor {
font-size: 12px;
color: #b4b4b4;
}
.highlighted .anchor {
color: #ddd;
}
}
}
</style>
7880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
