From 8cf908658c6786e5ff13aaf9cfe33271b8e46cc0 Mon Sep 17 00:00:00 2001
From: liuzewei <909920273@qq.com>
Date: Wed, 29 Sep 2021 18:43:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=A7=E6=9C=AC=E8=B5=84=E6=BA=90=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/sce/sceInfo/index.vue | 4730 ++++++++++++++++---------------
 1 file changed, 2370 insertions(+), 2360 deletions(-)

diff --git a/src/views/sce/sceInfo/index.vue b/src/views/sce/sceInfo/index.vue
index 5765238..e573186 100644
--- a/src/views/sce/sceInfo/index.vue
+++ b/src/views/sce/sceInfo/index.vue
@@ -1,2365 +1,2375 @@
-<template>
-  <div style="padding:10px;">
-    <!-- 搜索栏 -->
-    <div class="search">
-      <el-form :inline="true">
-        <el-form-item label="剧本标题:" style="margin-right:50px;">
-          <el-input
-            v-model="queryParams.query.title"
-            style="height:30px;"
-            placeholder="请输入剧本标题"
-          />
-        </el-form-item>
-        <el-form-item label="工作室:" style="margin-right:50px;">
-          <el-input
-            v-model="queryParams.query.studioName"
-            style="height:30px;"
-            placeholder="请输入工作室"
-          />
-        </el-form-item>
-        <el-form-item label="标签:" style="margin-right:50px;">
-          <el-input
-            v-model="queryParams.query.labelName"
-            style="height:30px;"
-            placeholder="请输入标签"
-          />
-        </el-form-item>
-      </el-form>
-      <div class="search-button">
-        <el-button
-          size="medium"
-          type="primary"
-          style="height:36px;width:100px;"
-          @click="search"
-          >搜索</el-button
-        >
-        <el-button
-          size="medium"
-          style="margin-left:20px;height:36px;width:100px;"
-          @click="refresh"
-          >重置</el-button
-        >
+<template>
+  <div style="padding:10px;">
+    <!-- 搜索栏 -->
+    <div class="search">
+      <el-form :inline="true">
+        <el-form-item label="剧本标题:" style="margin-right:50px;">
+          <el-input
+            v-model="queryParams.query.title"
+            style="height:30px;"
+            placeholder="请输入剧本标题"
+          />
+        </el-form-item>
+        <el-form-item label="工作室:" style="margin-right:50px;">
+          <el-input
+            v-model="queryParams.query.studioName"
+            style="height:30px;"
+            placeholder="请输入工作室"
+          />
+        </el-form-item>
+        <el-form-item label="标签:" style="margin-right:50px;">
+          <el-input
+            v-model="queryParams.query.labelName"
+            style="height:30px;"
+            placeholder="请输入标签"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="search-button">
+        <el-button
+          size="medium"
+          type="primary"
+          style="height:36px;width:100px;"
+          @click="search"
+          >搜索</el-button
+        >
+        <el-button
+          size="medium"
+          style="margin-left:20px;height:36px;width:100px;"
+          @click="refresh"
+          >重置</el-button
+        >
       </div>
-      <div class="about">
+      <!-- <div class="about">
           <el-button @click="getWangyi">获取链接</el-button>
-        </div>
-    </div>
-    <div class="add-button">
-      <el-button
-        size="medium"
-        type="primary"
-        style="height:36px;width:100px;"
-        @click="handleAdd"
-        >新建</el-button
-      >
-    </div>
-    <!-- 列表 -->
-    <div class="content">
-      <el-table
-        v-loading="loading"
-        ref="singleTable"
-        :data="tableData"
-        border
-        style="width: 100%"
-      >
-        <el-table-column align="center" type="index" label="序号" width="50" />
-        <el-table-column align="center" property="title" label="剧本标题" />
-        <el-table-column align="center" property="studioName" label="工作室" />
-        <el-table-column align="center" property="labelName" label="标签" />
-        <el-table-column
-          align="center"
-          property="createTime"
-          label="创建时间"
-        />
-        <el-table-column align="center" label="操作">
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="handleView(scope.row)"
-              ><div style="color:#000;">查看</div></el-button
-            >
-            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
-              ><div style="color:#02A7F0;">编辑</div></el-button
-            >
-            <el-button type="text" size="mini" @click="handleTips(scope.row)"
-              >Tips维护</el-button
-            >
-            <el-button type="text" size="mini" @click="hanDel(scope.row)"
-              ><div style="color:#D9001B;">删除</div></el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="queryList"
-      />
-    </div>
-    <!-- 新增表单 -->
-    <el-dialog
-      @open="openDialog"
-      :title="dialog.title"
-      :visible.sync="dialog.Visible"
-      width="1000px"
-      :before-close="handleClose"
-    >
-      <el-form
-        ref="ruleForm"
-        :model="ruleForm"
-        :rules="rules"
-        :inline="true"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <h3 class="form-title">基本信息</h3>
-        <el-form-item label="剧本标题:" prop="title" style="width:45%">
-          <el-input
-            :disabled="disabled"
-            v-model="ruleForm.title"
-            style="width:300px;"
-          />
-        </el-form-item>
-        <el-form-item label="工作室:" prop="studioName" style="width:45%">
-          <el-input
-            :disabled="disabled"
-            v-model="ruleForm.studioName"
-            style="width:300px;"
-          />
-        </el-form-item>
-        <el-form-item label="标签:" prop="labelName" style="width:100%">
-          <el-input
-            :disabled="disabled"
-            v-model="ruleForm.labelName"
-            style="width:300px;"
-          />
-        </el-form-item>
-        <h3 class="form-title">剧本图片</h3>
-        <el-form-item label="封面" prop="cover">
-          <el-image
-            v-if="type == 'view'"
-            style="width: 146px; height: 146px"
-            :src="ruleForm.cover"
-            fit="fill"
-          >
-          </el-image>
-          <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            class="avatar-uploader"
-            action
-            :show-file-list="false"
-            :auto-upload="false"
-            :on-change="uploadImg"
-            :on-success="handleAvatar"
-            :before-upload="beforeAvatarUpload"
-          >
-            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="其它图片" style="width:100%">
-          <div
-            v-for="(item, l) in dataImg"
-            :key="l"
-            class="imgdata"
-            style="margin-left:10px;"
-          >
-            <el-image
-              style="width: 146px; height: 146px"
-              :src="item"
-              fit="fill"
-            >
-            </el-image>
-            <div class="imgdialog" v-if="type == 'add' || type == 'edit'">
-              <p>
-                <i
-                  class="el-icon-delete"
-                  @click="delDataImg(item, l)"
-                  style="font-size: 20px;"
-                ></i>
-              </p>
-            </div>
-          </div>
-          <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            class="avatar-uploader"
-            style="float:left;margin-left: 10px;"
-            action
-            list-type="picture-card"
-            :show-file-list="false"
-            :http-request="changeImgs"
-          >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-          <!-- <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            action
-            class="avatar-uploader"
-            list-type="picture-card"
-            :auto-upload="false"
-            :on-change="changeImgs"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
-            :file-list="dataImgs"
-          >
-            <i class="el-icon-plus" />
-            <div slot="file" slot-scope="{ file }">
-              <img
-                class="el-upload-list__item-thumbnail"
-                :src="file.url"
-                alt=""
-              />
-              <span class="el-upload-list__item-actions">
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleRemove(file)"
-                >
-                  <i class="el-icon-delete"></i>
-                </span>
-              </span>
-            </div>
-          </el-upload> -->
-        </el-form-item>
-        <h3 class="form-title">剧本简介</h3>
-        <el-form-item label="简介" prop="introduction" style="width:100%">
-          <!-- <el-input
-            v-if="type == 'view'"
-            :disabled="disabled"
-            v-model="ruleForm.introduction"
-            style="width:700px"
-            rows="10"
-            type="textarea"
-          /> -->
-          <div
-            v-if="type == 'view'"
-            style="width:700px;height:400px;border:1px solid #ddd;padding:10px;"
-            v-html="ruleForm.introduction"
-          ></div>
-          <!-- <Tinymce
-            v-if="type == 'add' || type == 'edit'"
-            ref="editor"
-            v-model="ruleForm.introduction"
-            :height="400"
-            :width="700"
-          /> -->
-          <el-input
-            type="textarea"
-            v-if="type == 'add' || type == 'edit'"
-            style="width:700px"
-            rows="10"
-            placeholder="请输入内容"
-            v-model="ruleForm.introduction"
-          ></el-input>
-        </el-form-item>
-        <h3 class="form-title">开本流程</h3>
-        <div v-if="type == 'add' || type == 'edit'">
-          <el-table
-            :header-cell-style="{ background: '#eee', color: '#606266' }"
-            :data="ruleForm.processesList"
-            border
-            style="width: 90%;margin-left:30px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column
-              align="center"
-              property="title"
-              label="流程标题"
-              width="130"
-            >
-              <template slot-scope="scope">
-                <el-input
-                  v-model="ruleForm.processesList[scope.$index].title"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="code"
-              label="流程编号"
-              width="100"
-            >
-              <template slot-scope="scope">
-                <el-input
-                  @input="changCode"
-                  v-model.number="ruleForm.processesList[scope.$index].code"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="introduction"
-              label="简介"
-            >
-              <template slot-scope="scope">
-                <el-input
-                  v-model="ruleForm.processesList[scope.$index].introduction"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="sort"
-              label="排序"
-              width="100"
-            >
-              <template slot-scope="scope">
-                <el-input
-                  type="number"
-                  @input="changSort"
-                  @mousewheel.native.prevent
-                  @keyup.native="prevent($event)"
-                  v-model="ruleForm.processesList[scope.$index].sort"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作" width="100">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" @click="Del(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <div v-if="type == 'view'">
-          <el-table
-            :header-cell-style="{ background: '#eee', color: '#606266' }"
-            :data="ruleForm.processesList"
-            border
-            style="width: 90%;margin-left:30px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="流程标题">
-            </el-table-column>
-            <el-table-column align="center" property="code" label="流程编号">
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="introduction"
-              label="简介"
-            >
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="sort"
-              label="排序"
-              width="50"
-            >
-            </el-table-column>
-          </el-table>
-        </div>
-        <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
-          <el-button
-            type="success"
-            :disabled="disabledButton"
-            style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-            @click="handleAddK"
-            >新增</el-button
-          >
-        </div>
-        <h3 class="form-title">剧本资源</h3>
-        <!-- <el-form-item label="图片" prop="imgUrls" style="width: 100%;">
-          <el-radio-group
-            :disabled="disabled"
-            v-model="radioImg"
-            @change="changeImg"
-          >
-            <el-radio :label="1">本地上传</el-radio>
-            <el-radio :label="2">网易云地址</el-radio>
-          </el-radio-group>
-        </el-form-item> -->
-
-        <el-form-item
-          label="图片"
-          prop="imgUrls"
-          style="width: 100%;"
-          :style="dialog.title != '查看剧本' ? '' : 'pointer-events:none'"
-          v-if="radioImg == 1"
-        >
-          <div v-for="(item, s) in imgData" :key="s" class="imgdata">
-            <el-image
-              style="width: 146px; height: 146px"
-              :src="item.url"
-              fit="fill"
-            >
-            </el-image>
-            <div class="imgdialog">
-              <p>
-                <i
-                  class="el-icon-delete"
-                  @click="deldialogimg(item, s, 'img')"
-                  style="font-size: 20px;"
-                ></i>
-              </p>
-            </div>
-            <div class="sz_container" style="text-align:center">
-              <span>{{ item.processNames }}</span>
-            </div>
-            <div  v-if="type == 'add' || type == 'edit'"     class="sz_container" style="text-align:center"     >
-              <el-button size="mini" type="text" @click="setLc(item, s, 'img')">关联流程</el-button
-              >
-            </div>
-            <div style="display:flex;width:130px">
-              <div style="flex:1;">标题:</div>
-              <el-input v-model="imgData[s].title" placeholder="请输入图片标题" style="flex:2;" @change="changeTitle(item, s, 'img')"></el-input>
-            </div>
-          </div>
-          <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            class="avatar-uploader"
-            style="float:left;margin-left:60px"
-            action
-            list-type="picture-card"
-            :show-file-list="false"
-            :http-request="labeluploadimg"
-            element-loading-text="正在上传..."
-            v-loading="loadingImg"
-          >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="" />
-          </el-dialog>
-        </el-form-item>
-        <el-progress :percentage="jinduImgNum" v-if="jinduShowImg" status="success"></el-progress>
-
-
-        <el-form-item
-          v-if="radioImg == 2"
-          style="width: 100%;"
-          class="urlTable"
-        >
-          <el-table
-            ref="img"
-            v-if="type == 'add' || type == 'edit'"
-            :data="ruleForm.radioImg"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="date" label="资源标题">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioImg[scope.$index].title" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" property="url" label="资源URL">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioImg[scope.$index].url" />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                <el-select
-                  v-model="ruleForm.radioImg[scope.$index].processId"
-                  clearable
-                  multiple
-                  @change="changePro('img')"
-                  placeholder="请选择流程"
-                >
-                  <el-option
-                    v-for="(item, o) in ruleForm.processesList"
-                    :key="o"
-                    :label="item.title"
-                    :value="item.code"
-                  >
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" @click="DelImg(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-table
-            v-if="type == 'view'"
-            :data="ruleForm.radioImg"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="资源标题" />
-            <el-table-column align="center" property="url" label="资源URL" />
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                {{ scope.row.processNames }}
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
-            <el-button
-              type="success"
-              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddImg"
-              >新增</el-button
-            >
-          </div>
-        </el-form-item>
-        <el-form-item label="音频" prop="imgUrls" style="width: 100%;">
-          <el-radio-group
-            :disabled="disabled"
-            v-model="radioMusic"
-            @change="changeMusic"
-          >
-            <el-radio :label="1">本地上传</el-radio>
-            <el-radio :label="2">网易云地址</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item
-          style="margin-left: 100px;"
-          class="audioUpload"
-          v-if="radioMusic == 1"
-        >
-          <div v-for="(item, i) in musicData" :key="i" class="imgdata">
-            <!-- <el-image
-              style="width: 146px; height: 146px"
-              :src="item.url"
-              fit="fill"
-            >
-            </el-image> -->
-            <audio
-              :src="item.url"
-              width="178px"
-              height="178px"
-              controls="controls"
-              v-if="musicData.length > 0"
-            ></audio>
-            <!-- <audio
-              style="width: 146px; height: 146px"
-              :src="item.url"
-              v-if="musicData.length > 0 "
-            ></audio> -->
-            <!-- <div class="imgdialog">
-              <p>
-                <i class="el-icon-zoom-in" style="font-size: 20px"></i>
-                <i
-                  class="el-icon-delete"
-                  @click="deldialogimg(item, i, 'music')"
-                  style="font-size: 20px; padding-left: 30px"
-                ></i>
-              </p>
-            </div> -->
-            <div class="sz_container" style="text-align:center">
-              <span>{{ item.processNames }}</span>
-            </div>
-            <div
-              v-if="type == 'add' || type == 'edit'"
-              class="sz_container"
-              style="display: flex;justify-content: space-around;"
-            >
-              <el-button
-                size="mini"
-                type="text"
-                @click="setLc(item, i, 'music')"
-                >关联流程</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                @click="deldialogimg(item, i, 'music')"
-                >删除音频</el-button
-              >
-            </div>
-            <div style="display:flex;width:280px">
-                <div style="width:70px;">标题:</div>
-                <el-input v-model="audioTitle" placeholder="请输入标题"></el-input>
-            </div>
-          </div>
-          <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            class="avatar-uploader"
-            style="float:left;margin-left:60px"
-            action
-            list-type="picture-card"
-            :show-file-list="false"
-            :before-upload="uploadAudio"
-            :http-request="labeluploadmusic"
-            element-loading-text="正在上传..."
-            v-loading="loadingAudio"
-          >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="" />
-          </el-dialog>
-        </el-form-item>
-        <el-progress :percentage="jinduAudioNum" v-if="jinduShowAudio" status="success"></el-progress>
-        <el-form-item
-          v-if="radioMusic == 2"
-          style="width: 100%;"
-          class="urlTable"
-        >
-          <el-table
-            ref="music"
-            v-if="type == 'add' || type == 'edit'"
-            :data="ruleForm.radioMusic"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="资源标题">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioMusic[scope.$index].title" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" property="url" label="资源URL">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioMusic[scope.$index].url" />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                <el-select
-                  v-model="ruleForm.radioMusic[scope.$index].processId"
-                  clearable
-                  multiple
-                  @change="changePro('music')"
-                  placeholder="请选择流程"
-                >
-                  <el-option
-                    v-for="item in ruleForm.processesList"
-                    :key="item.value"
-                    :label="item.title"
-                    :value="item.code"
-                  >
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作">
-              <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="DelMusic(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-table
-            v-if="type == 'view'"
-            :data="ruleForm.radioMusic"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="资源标题">
-              <template>
-                <div>
-                  11111111
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" property="url" label="资源URL" />
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                {{ scope.row.processNames }}
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
-            <el-button
-              type="success"
-              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddMusic"
-              >新增</el-button
-            >
-          </div>
-        </el-form-item>
-        <!-- <el-form-item label="视频" prop="imgUrls" style="width: 100%;">
-          <el-radio-group
-            :disabled="disabled"
-            v-model="radioVideo"
-            @change="changeVideo"
-          >
-            <el-radio :label="1">本地上传</el-radio>
-            <el-radio :label="2">网易云地址</el-radio>
-          </el-radio-group>
-        </el-form-item> -->
-        <el-form-item
-          label="视频"
-          prop="imgUrls"
-          style="width: 100%;"
-          class="videoUpload"
-          v-if="radioVideo == 1"
-        >
-          <div v-for="(item, idx) in videoData" :key="idx" class="imgdata">
-            <!-- <el-image
-              style="width: 146px; height: 146px"
-              :src="item.url"
-              fit="fill"
-            >
-            </el-image> -->
-            <video
-              :src="item.url"
-              width="178px"
-              height="178px"
-              controls="controls"
-              v-if="videoData.length > 0"
-            ></video>
-            <!-- <div class="imgdialog">
-              <p>
-                <i class="el-icon-zoom-in" @click="handleView(item,idx)" style="font-size: 20px"></i>
-                <i
-                  class="el-icon-delete"
-                  @click="deldialogimg(item, idx, 'video')"
-                  style="font-size: 20px; padding-left: 30px"
-                ></i>
-              </p>
-            </div> -->
-            <div
-              class="sz_container"
-              style="width:178px; text-align:center;margin-right:20px;"
-            >
-              <span>{{ item.processNames }}</span>
-            </div>
-            <div
-              v-if="type == 'add' || type == 'edit'"
-              class="sz_container"
-              style="width:178px"
-            >
-              <el-button
-                style="margin-right:60px;"
-                size="mini"
-                type="text"
-                @click="setLc(item, idx, 'video')"
-                >关联流程</el-button
-              >
-              <el-button
-                size="mini"
-                type="text"
-                @click="deldialogimg(item, idx, 'video')"
-                >删除视频</el-button
-              >
-              <div style="display:flex;width:170px">
-                <div style="flex:1;">标题:</div>
-                <el-input v-model="videoTitle" placeholder="请输入标题" style="flex:2;"></el-input>
-              </div>
-            </div>
-          </div>
-          <el-upload
-            v-if="type == 'add' || type == 'edit'"
-            class="avatar-uploader"
-            style="float:left;margin-left:60px"
-            action
-            list-type="picture-card"
-            :show-file-list="false"
-            :before-upload="uploadVideo"
-            :http-request="labeluploadvideo"
-            :on-success="successVideo"
-            element-loading-text="正在上传..."
-            v-loading="loading"
-          >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-          <!-- <el-dialog :visible.sync="dialogVideo"> </el-dialog> -->
-        </el-form-item>
-        <el-progress :percentage="jinduVideoNum" v-if="jinduShowVideo" status="success"></el-progress>
-        <el-form-item
-          v-if="radioVideo == 2"
-          style="width: 100%;"
-          class="urlTable"
-        >
-          <el-table
-            ref="video"
-            v-if="type == 'add' || type == 'edit'"
-            :data="ruleForm.radioVideo"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="资源标题">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioVideo[scope.$index].title" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" property="url" label="资源URL">
-              <template slot-scope="scope">
-                <el-input v-model="ruleForm.radioVideo[scope.$index].url" />
-              </template>
-            </el-table-column>
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                <el-select
-                  v-model="ruleForm.radioVideo[scope.$index].processId"
-                  clearable
-                  multiple
-                  @change="changePro('video')"
-                  placeholder="请选择流程"
-                >
-                  <el-option
-                    v-for="(item, u) in ruleForm.processesList"
-                    :key="u"
-                    :label="item.title"
-                    :value="item.code"
-                  >
-                  </el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="操作">
-              <template slot-scope="scope">
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="DelVideo(scope.$index)"
-                  >删除</el-button
-                >
-              </template>
-            </el-table-column>
-          </el-table>
-          <el-table
-            v-if="type == 'view'"
-            :data="ruleForm.radioVideo"
-            border
-            style="width: 80%;margin-left:100px;"
-          >
-            <el-table-column
-              align="center"
-              type="index"
-              label="序号"
-              width="50"
-            />
-            <el-table-column align="center" property="title" label="资源标题" />
-            <el-table-column align="center" property="url" label="资源URL" />
-            <el-table-column
-              align="center"
-              property="processId"
-              label="关联流程"
-            >
-              <template slot-scope="scope">
-                {{ scope.row.processNames }}
-              </template>
-            </el-table-column>
-          </el-table>
-          <div v-if="type == 'add' || type == 'edit'" style="margin-top:15px;">
-            <el-button
-              type="success"
-              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
-              @click="handleAddVideo"
-              >新增</el-button
-            >
-          </div>
-        </el-form-item>
-        <!-- <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-          <el-button @click="resetForm('ruleForm')">重置</el-button>
-        </el-form-item> -->
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="subEsc">取 消</el-button>
-        <el-button
-          v-if="type == 'add' || type == 'edit'"
-          type="primary"
-          @click="subMit"
-          >确 定</el-button
-        >
-      </span>
-    </el-dialog>
-    <!-- 关联流程 -->
-    <el-dialog
-      title="关联流程"
-      :visible.sync="process.Visible"
-      width="30%"
-      center
-    >
-      <el-form>
-        <el-form-item label="关联流程">
-          <el-select
-            v-model="processId"
-            clearable
-            multiple
-            placeholder="请选择流程"
-            @change="changeLiuc"
-          >
-            <el-option
-              v-for="(item, y) in ruleForm.processesList"
-              :key="y"
-              :label="item.title"
-              :value="item.code"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="process.Visible = false">取 消</el-button>
-        <el-button type="primary" @click="subMitLc">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import Tinymce from "@/components/Tinymce";
-import {
-  queryJbInfo,
-  addJbInfo,
-  updateJbInfo,
-  queryJbDetail,
-  deleteJbInfo,
-  queryFindList //获取流程列表
-} from "@/api/sce/sce.js";
+        </div> -->
+    </div>
+    <div class="add-button">
+      <el-button
+        size="medium"
+        type="primary"
+        style="height:36px;width:100px;"
+        @click="handleAdd"
+        >新建</el-button
+      >
+    </div>
+    <!-- 列表 -->
+    <div class="content">
+      <el-table
+        v-loading="loading"
+        ref="singleTable"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column align="center" type="index" label="序号" width="50" />
+        <el-table-column align="center" property="title" label="剧本标题" />
+        <el-table-column align="center" property="studioName" label="工作室" />
+        <el-table-column align="center" property="labelName" label="标签" />
+        <el-table-column
+          align="center"
+          property="createTime"
+          label="创建时间"
+        />
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="handleView(scope.row)"
+              ><div style="color:#000;">查看</div></el-button
+            >
+            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
+              ><div style="color:#02A7F0;">编辑</div></el-button
+            >
+            <el-button type="text" size="mini" @click="handleTips(scope.row)"
+              >Tips维护</el-button
+            >
+            <el-button type="text" size="mini" @click="hanDel(scope.row)"
+              ><div style="color:#D9001B;">删除</div></el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="queryList"
+      />
+    </div>
+    <!-- 新增表单 -->
+    <el-dialog
+      @open="openDialog"
+      :title="dialog.title"
+      :visible.sync="dialog.Visible"
+      width="1000px"
+      :before-close="handleClose"
+    >
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        :inline="true"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <h3 class="form-title">基本信息</h3>
+        <el-form-item label="剧本标题:" prop="title" style="width:45%">
+          <el-input
+            :disabled="disabled"
+            v-model="ruleForm.title"
+            style="width:300px;"
+          />
+        </el-form-item>
+        <el-form-item label="工作室:" prop="studioName" style="width:45%">
+          <el-input
+            :disabled="disabled"
+            v-model="ruleForm.studioName"
+            style="width:300px;"
+          />
+        </el-form-item>
+        <el-form-item label="标签:" prop="labelName" style="width:100%">
+          <el-input
+            :disabled="disabled"
+            v-model="ruleForm.labelName"
+            style="width:300px;"
+          />
+        </el-form-item>
+        <h3 class="form-title">剧本图片</h3>
+        <el-form-item label="封面" prop="cover">
+          <el-image
+            v-if="type == 'view'"
+            style="width: 146px; height: 146px"
+            :src="ruleForm.cover"
+            fit="fill"
+          >
+          </el-image>
+          <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            action
+            :show-file-list="false"
+            :auto-upload="false"
+            :on-change="uploadImg"
+            :on-success="handleAvatar"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="其它图片" style="width:100%">
+          <div
+            v-for="(item, l) in dataImg"
+            :key="l"
+            class="imgdata"
+            style="margin-left:10px;"
+          >
+            <el-image
+              style="width: 146px; height: 146px"
+              :src="item"
+              fit="fill"
+            >
+            </el-image>
+            <div class="imgdialog" v-if="type == 'add' || type == 'edit'">
+              <p>
+                <i
+                  class="el-icon-delete"
+                  @click="delDataImg(item, l)"
+                  style="font-size: 20px;"
+                ></i>
+              </p>
+            </div>
+          </div>
+          <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            style="float:left;margin-left: 10px;"
+            action
+            list-type="picture-card"
+            :show-file-list="false"
+            :http-request="changeImgs"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            action
+            class="avatar-uploader"
+            list-type="picture-card"
+            :auto-upload="false"
+            :on-change="changeImgs"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+            :file-list="dataImgs"
+          >
+            <i class="el-icon-plus" />
+            <div slot="file" slot-scope="{ file }">
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url"
+                alt=""
+              />
+              <span class="el-upload-list__item-actions">
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemove(file)"
+                >
+                  <i class="el-icon-delete"></i>
+                </span>
+              </span>
+            </div>
+          </el-upload> -->
+        </el-form-item>
+        <h3 class="form-title">剧本简介</h3>
+        <el-form-item label="简介" prop="introduction" style="width:100%">
+          <!-- <el-input
+            v-if="type == 'view'"
+            :disabled="disabled"
+            v-model="ruleForm.introduction"
+            style="width:700px"
+            rows="10"
+            type="textarea"
+          /> -->
+          <div
+            v-if="type == 'view'"
+            style="width:700px;height:400px;border:1px solid #ddd;padding:10px;"
+            v-html="ruleForm.introduction"
+          ></div>
+          <!-- <Tinymce
+            v-if="type == 'add' || type == 'edit'"
+            ref="editor"
+            v-model="ruleForm.introduction"
+            :height="400"
+            :width="700"
+          /> -->
+          <el-input
+            type="textarea"
+            v-if="type == 'add' || type == 'edit'"
+            style="width:700px"
+            rows="10"
+            placeholder="请输入内容"
+            v-model="ruleForm.introduction"
+          ></el-input>
+        </el-form-item>
+        <h3 class="form-title">开本流程</h3>
+        <div v-if="type == 'add' || type == 'edit'">
+          <el-table
+            :header-cell-style="{ background: '#eee', color: '#606266' }"
+            :data="ruleForm.processesList"
+            border
+            style="width: 90%;margin-left:30px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column
+              align="center"
+              property="title"
+              label="流程标题"
+              width="130"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="ruleForm.processesList[scope.$index].title"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="code"
+              label="流程编号"
+              width="100"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  @input="changCode"
+                  v-model.number="ruleForm.processesList[scope.$index].code"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="introduction"
+              label="简介"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  v-model="ruleForm.processesList[scope.$index].introduction"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="sort"
+              label="排序"
+              width="100"
+            >
+              <template slot-scope="scope">
+                <el-input
+                  type="number"
+                  @input="changSort"
+                  @mousewheel.native.prevent
+                  @keyup.native="prevent($event)"
+                  v-model="ruleForm.processesList[scope.$index].sort"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作" width="100">
+              <template slot-scope="scope">
+                <el-button type="text" size="mini" @click="Del(scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div v-if="type == 'view'">
+          <el-table
+            :header-cell-style="{ background: '#eee', color: '#606266' }"
+            :data="ruleForm.processesList"
+            border
+            style="width: 90%;margin-left:30px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="流程标题">
+            </el-table-column>
+            <el-table-column align="center" property="code" label="流程编号">
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="introduction"
+              label="简介"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="sort"
+              label="排序"
+              width="50"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
+          <el-button
+            type="success"
+            :disabled="disabledButton"
+            style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
+            @click="handleAddK"
+            >新增</el-button
+          >
+        </div>
+        <h3 class="form-title">剧本资源</h3>
+        <!-- <el-form-item label="图片" prop="imgUrls" style="width: 100%;">
+          <el-radio-group
+            :disabled="disabled"
+            v-model="radioImg"
+            @change="changeImg"
+          >
+            <el-radio :label="1">本地上传</el-radio>
+            <el-radio :label="2">网易云地址</el-radio>
+          </el-radio-group>
+        </el-form-item> -->
+
+        <el-form-item
+          label="图片"
+          prop="imgUrls"
+          style="width: 100%;"
+          :style="dialog.title != '查看剧本' ? '' : 'pointer-events:none'"
+          v-if="radioImg == 1"
+        >
+          <div v-for="(item, s) in imgData" :key="s" class="imgdata">
+            <el-image
+              style="width: 146px; height: 146px"
+              :src="item.url"
+              fit="fill"
+            >
+            </el-image>
+            <div class="imgdialog">
+              <p>
+                <i
+                  class="el-icon-delete"
+                  @click="deldialogimg(item, s, 'img')"
+                  style="font-size: 20px;"
+                ></i>
+              </p>
+            </div>
+            <div class="sz_container" style="text-align:center">
+              <span>{{ item.processNames }}</span>
+            </div>
+            <div  v-if="type == 'add' || type == 'edit'"     class="sz_container" style="text-align:center"     >
+              <el-button size="mini" type="text" @click="setLc(item, s, 'img')">关联流程</el-button
+              >
+            </div>
+            <div style="display:flex;width:130px">
+              <div style="flex:1;">标题:</div>
+              <el-input v-model="imgData[s].title" placeholder="请输入标题" style="flex:2;"></el-input>
+            </div>
+          </div>
+          <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            style="float:left;margin-left:60px"
+            action
+            list-type="picture-card"
+            :show-file-list="false"
+            :http-request="labeluploadimg"
+            element-loading-text="正在上传..."
+            v-loading="loadingImg"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="" />
+          </el-dialog>
+        </el-form-item>
+        <el-progress :percentage="jinduImgNum" v-if="jinduShowImg" status="success"></el-progress>
+
+
+        <el-form-item
+          v-if="radioImg == 2"
+          style="width: 100%;"
+          class="urlTable"
+        >
+          <el-table
+            ref="img"
+            v-if="type == 'add' || type == 'edit'"
+            :data="ruleForm.radioImg"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="date" label="资源标题">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioImg[scope.$index].title" />
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="url" label="资源URL">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioImg[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                <el-select
+                  v-model="ruleForm.radioImg[scope.$index].processId"
+                  clearable
+                  multiple
+                  @change="changePro('img')"
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="(item, o) in ruleForm.processesList"
+                    :key="o"
+                    :label="item.title"
+                    :value="item.code"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" size="mini" @click="DelImg(scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-table
+            v-if="type == 'view'"
+            :data="ruleForm.radioImg"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="资源标题" />
+            <el-table-column align="center" property="url" label="资源URL" />
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.processNames }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
+            <el-button
+              type="success"
+              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
+              @click="handleAddImg"
+              >新增</el-button
+            >
+          </div>
+        </el-form-item>
+        <el-form-item label="音频" prop="imgUrls" style="width: 100%;">
+          <el-radio-group
+            :disabled="disabled"
+            v-model="radioMusic"
+            @change="changeMusic"
+          >
+            <el-radio :label="1">本地上传</el-radio>
+            <el-radio :label="2">网易云地址</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          style="margin-left: 100px;"
+          class="audioUpload"
+          v-if="radioMusic == 1"
+        >
+          <div v-for="(item, i) in musicData" :key="i" class="imgdata">
+            <!-- <el-image
+              style="width: 146px; height: 146px"
+              :src="item.url"
+              fit="fill"
+            >
+            </el-image> -->
+            <audio
+              :src="item.url"
+              width="178px"
+              height="178px"
+              controls="controls"
+              v-if="musicData.length > 0"
+            ></audio>
+            <!-- <audio
+              style="width: 146px; height: 146px"
+              :src="item.url"
+              v-if="musicData.length > 0 "
+            ></audio> -->
+            <!-- <div class="imgdialog">
+              <p>
+                <i class="el-icon-zoom-in" style="font-size: 20px"></i>
+                <i
+                  class="el-icon-delete"
+                  @click="deldialogimg(item, i, 'music')"
+                  style="font-size: 20px; padding-left: 30px"
+                ></i>
+              </p>
+            </div> -->
+            <div class="sz_container" style="text-align:center">
+              <span>{{ item.processNames }}</span>
+            </div>
+            <div
+              v-if="type == 'add' || type == 'edit'"
+              class="sz_container"
+              style="display: flex;justify-content: space-around;"
+            >
+              <el-button
+                size="mini"
+                type="text"
+                @click="setLc(item, i, 'music')"
+                >关联流程</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                @click="deldialogimg(item, i, 'music')"
+                >删除音频</el-button
+              >
+            </div>
+            <div style="display:flex;width:280px">
+                <div style="width:70px;">标题:</div>
+                <el-input v-model="item.title" placeholder="请输入标题"></el-input>
+            </div>
+          </div>
+          <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            style="float:left;margin-left:60px"
+            action
+            list-type="picture-card"
+            :show-file-list="false"
+            :before-upload="uploadAudio"
+            :http-request="labeluploadmusic"
+            element-loading-text="正在上传..."
+            v-loading="loadingAudio"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="" />
+          </el-dialog>
+        </el-form-item>
+        <el-progress :percentage="jinduAudioNum" v-if="jinduShowAudio" status="success"></el-progress>
+        <el-form-item
+          v-if="radioMusic == 2"
+          style="width: 100%;"
+          class="urlTable"
+        >
+          <el-table
+            ref="music"
+            v-if="type == 'add' || type == 'edit'"
+            :data="ruleForm.radioMusic"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="资源标题">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioMusic[scope.$index].title" />
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="url" label="资源URL">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioMusic[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                <el-select
+                  v-model="ruleForm.radioMusic[scope.$index].processId"
+                  clearable
+                  multiple
+                  @change="changePro('music')"
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="item in ruleForm.processesList"
+                    :key="item.value"
+                    :label="item.title"
+                    :value="item.code"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="DelMusic(scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-table
+            v-if="type == 'view'"
+            :data="ruleForm.radioMusic"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="资源标题">
+              <template>
+                <div>
+                  11111111
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="url" label="资源URL" />
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.processNames }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top:15px;" v-if="type == 'add' || type == 'edit'">
+            <el-button
+              type="success"
+              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
+              @click="handleAddMusic"
+              >新增</el-button
+            >
+          </div>
+        </el-form-item>
+        <!-- <el-form-item label="视频" prop="imgUrls" style="width: 100%;">
+          <el-radio-group
+            :disabled="disabled"
+            v-model="radioVideo"
+            @change="changeVideo"
+          >
+            <el-radio :label="1">本地上传</el-radio>
+            <el-radio :label="2">网易云地址</el-radio>
+          </el-radio-group>
+        </el-form-item> -->
+        <el-form-item
+          label="视频"
+          prop="imgUrls"
+          style="width: 100%;"
+          class="videoUpload"
+          v-if="radioVideo == 1"
+        >
+          <div v-for="(item, idx) in videoData" :key="idx" class="imgdata">
+            <!-- <el-image
+              style="width: 146px; height: 146px"
+              :src="item.url"
+              fit="fill"
+            >
+            </el-image> -->
+            <video
+              :src="item.url"
+              width="178px"
+              height="178px"
+              controls="controls"
+              v-if="videoData.length > 0"
+            ></video>
+            <!-- <div class="imgdialog">
+              <p>
+                <i class="el-icon-zoom-in" @click="handleView(item,idx)" style="font-size: 20px"></i>
+                <i
+                  class="el-icon-delete"
+                  @click="deldialogimg(item, idx, 'video')"
+                  style="font-size: 20px; padding-left: 30px"
+                ></i>
+              </p>
+            </div> -->
+            <div
+              class="sz_container"
+              style="width:178px; text-align:center;margin-right:20px;"
+            >
+              <span>{{ item.processNames }}</span>
+            </div>
+            <div
+              v-if="type == 'add' || type == 'edit'"
+              class="sz_container"
+              style="width:178px"
+            >
+              <el-button
+                style="margin-right:60px;"
+                size="mini"
+                type="text"
+                @click="setLc(item, idx, 'video')"
+                >关联流程</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                @click="deldialogimg(item, idx, 'video')"
+                >删除视频</el-button
+              >
+              <div style="display:flex;width:170px">
+                <div style="flex:1;">标题:</div>
+                <el-input v-model="item.title" placeholder="请输入标题" style="flex:2;"></el-input>
+              </div>
+            </div>
+          </div>
+          <el-upload
+            v-if="type == 'add' || type == 'edit'"
+            class="avatar-uploader"
+            style="float:left;margin-left:60px"
+            action
+            list-type="picture-card"
+            :show-file-list="false"
+            :before-upload="uploadVideo"
+            :http-request="labeluploadvideo"
+            :on-success="successVideo"
+            element-loading-text="正在上传..."
+            v-loading="loading"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- <el-dialog :visible.sync="dialogVideo"> </el-dialog> -->
+        </el-form-item>
+        <el-progress :percentage="jinduVideoNum" v-if="jinduShowVideo" status="success"></el-progress>
+        <el-form-item
+          v-if="radioVideo == 2"
+          style="width: 100%;"
+          class="urlTable"
+        >
+          <el-table
+            ref="video"
+            v-if="type == 'add' || type == 'edit'"
+            :data="ruleForm.radioVideo"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="资源标题">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioVideo[scope.$index].title" />
+              </template>
+            </el-table-column>
+            <el-table-column align="center" property="url" label="资源URL">
+              <template slot-scope="scope">
+                <el-input v-model="ruleForm.radioVideo[scope.$index].url" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                <el-select
+                  v-model="ruleForm.radioVideo[scope.$index].processId"
+                  clearable
+                  multiple
+                  @change="changePro('video')"
+                  placeholder="请选择流程"
+                >
+                  <el-option
+                    v-for="(item, u) in ruleForm.processesList"
+                    :key="u"
+                    :label="item.title"
+                    :value="item.code"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="DelVideo(scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-table
+            v-if="type == 'view'"
+            :data="ruleForm.radioVideo"
+            border
+            style="width: 80%;margin-left:100px;"
+          >
+            <el-table-column
+              align="center"
+              type="index"
+              label="序号"
+              width="50"
+            />
+            <el-table-column align="center" property="title" label="资源标题" />
+            <el-table-column align="center" property="url" label="资源URL" />
+            <el-table-column
+              align="center"
+              property="processId"
+              label="关联流程"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.processNames }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div v-if="type == 'add' || type == 'edit'" style="margin-top:15px;">
+            <el-button
+              type="success"
+              style="height:36px;width:100px;margin-left:30px;color:#fff;background:#33DB99"
+              @click="handleAddVideo"
+              >新增</el-button
+            >
+          </div>
+        </el-form-item>
+        <!-- <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item> -->
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="subEsc">取 消</el-button>
+        <el-button
+          v-if="type == 'add' || type == 'edit'"
+          type="primary"
+          @click="subMit"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <!-- 关联流程 -->
+    <el-dialog
+      title="关联流程"
+      :visible.sync="process.Visible"
+      width="30%"
+      center
+    >
+      <el-form>
+        <el-form-item label="关联流程">
+          <el-select
+            v-model="processId"
+            clearable
+            multiple
+            placeholder="请选择流程"
+            @change="changeLiuc"
+          >
+            <el-option
+              v-for="(item, y) in ruleForm.processesList"
+              :key="y"
+              :label="item.title"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="process.Visible = false">取 消</el-button>
+        <el-button type="primary" @click="subMitLc">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Tinymce from "@/components/Tinymce";
+import {
+  queryJbInfo,
+  addJbInfo,
+  updateJbInfo,
+  queryJbDetail,
+  deleteJbInfo,
+  queryFindList //获取流程列表
+} from "@/api/sce/sce.js";
 import { uploadFile, delFile } from "@/api/upload/upload.js";
-import axios from '@/api/axios.js' /*引入封装的axios*/
-const baseUrl = process.env.VUE_APP_BASE_API;
-export default {
-  components: { Tinymce },
-  data() {
-    return {
-      imgTitle:"",//上传的图片标题
-      audioTitle:'',//上传音频标题
-      videoTitle:'',//上传音频标题
-      jindu:0,
-      jinduImgNum:0,
-      jinduAudioNum:0,
-      jinduVideoNum:0,
-      jinduShowImg:false,
-      jinduShowAudio:false,
-      jinduShowVideo:false,
-      imgTime:null,
-      audioTime:null,
-      videoTime:null,
-
-      liuChengLeixingType:'',
-      loadingAudio: false,
-      loadingImg:false,
-      baseUrl,
-      loading: true,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        query: {
-          title: undefined,
-          studioName: undefined,
-          labelName: undefined
-        }
-      },
-      tableData: [],
-      rules: {
-        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
-        labelName: [
-          { required: true, message: "请输入标签名称", trigger: "blur" }
-        ],
-        cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
-        introduction: [
-          { required: true, message: "请输入简介", trigger: "blur" }
-        ]
-      },
-      dialog: {
-        title: "新增剧本",
-        Visible: false
-      },
-      ruleForm: {
-        processesList: [],
-        imgUrl: "",
-        imgUrls: [],
-        radioImg: [],
-        radioMusic: [],
-        radioVideo: [],
-        resourcesList: []
-      },
-      dialogVisible: false,
-      active: "",
-      imageUrl: "",
-      total: 0,
-      dialogVisible: false,
-      dialogImageUrl: "",
-      dataImg: [],
-      dataImgs: [],
-      lcData: [],
-      radioImg: "1",
-      radioMusic: "1",
-      radioVideo: "1",
-      type: "",
-      imgData: [],
-      musicData: [],
-      videoData: [],
-      processId: [],
-      process: {
-        Visible: false
-      },
-      list: {},
-      typeUrl: "",
-      imgType: false,
-      musicType: false,
-      videoType: false,
-      imgIndex: "",
-      musicIdnex: "",
-      videoIndex: "",
-      dataList: {},
-      disabled: false,
-      disabledButton: false,
-      dialogVideo: false
-    };
-  },
-
-  mounted() {
-    this.queryList();
-    // this.queryFindList();
-  },
+import axios from '@/api/axios.js' /*引入封装的axios*/
+const baseUrl = process.env.VUE_APP_BASE_API;
+export default {
+  components: { Tinymce },
+  data() {
+    return {
+      imgTitle:"",//上传的图片标题
+      audioTitle:'',//上传音频标题
+      videoTitle:'',//上传音频标题
+      jindu:0,
+      jinduImgNum:0,
+      jinduAudioNum:0,
+      jinduVideoNum:0,
+      jinduShowImg:false,
+      jinduShowAudio:false,
+      jinduShowVideo:false,
+      imgTime:null,
+      audioTime:null,
+      videoTime:null,
+
+      liuChengLeixingType:'',
+      loadingAudio: false,
+      loadingImg:false,
+      baseUrl,
+      loading: true,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        query: {
+          title: undefined,
+          studioName: undefined,
+          labelName: undefined
+        }
+      },
+      tableData: [],
+      rules: {
+        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
+        labelName: [
+          { required: true, message: "请输入标签名称", trigger: "blur" }
+        ],
+        cover: [{ required: true, message: "请选择封面", trigger: "blur" }],
+        introduction: [
+          { required: true, message: "请输入简介", trigger: "blur" }
+        ]
+      },
+      dialog: {
+        title: "新增剧本",
+        Visible: false
+      },
+      ruleForm: {
+        processesList: [],
+        imgUrl: "",
+        imgUrls: [],
+        radioImg: [],
+        radioMusic: [],
+        radioVideo: [],
+        resourcesList: []
+      },
+      dialogVisible: false,
+      active: "",
+      imageUrl: "",
+      total: 0,
+      dialogVisible: false,
+      dialogImageUrl: "",
+      dataImg: [],
+      dataImgs: [],
+      lcData: [],
+      radioImg: "1",
+      radioMusic: "1",
+      radioVideo: "1",
+      type: "",
+      imgData: [],
+      musicData: [],
+      videoData: [],
+      processId: [],
+      process: {
+        Visible: false
+      },
+      list: {},
+      typeUrl: "",
+      imgType: false,
+      musicType: false,
+      videoType: false,
+      imgIndex: "",
+      musicIdnex: "",
+      videoIndex: "",
+      dataList: {},
+      disabled: false,
+      disabledButton: false,
+      dialogVideo: false
+    };
+  },
+
+  mounted() {
+    this.queryList();
+    // this.queryFindList();
+  },
   methods: {
 
-    getWangyi () {
      axios({
        url: '/song/url?id=38358820',  /*热门音乐链接接口地址*/
        method: 'post'
      })
        .then(res => {
          console.log("我拿到的数据：", res.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
-
-    changeLiuc(e){
-      // console.log(e);
-    },
-    //音频校验
-    uploadAudio(file) {
-      console.log(file);
-      if (
-        [
-          "audio/mpeg"
-          // "video/ogg",
-          // "video/flv",
-          // "video/avi",
-          // "video/rmvb",
-          // "video/mkv",
-          // "video/x-matroska"
-        ].indexOf(file.type) == -1
-      ) {
-        this.$message.error("上传视频只能是 mp3格式!");
-        return false;
-      }
-      const isLt2G = file.size / 1024 / 1024 < 2000000;
-      if (!isLt2G) {
-        this.$message.error("上传文件大小不能超过 2GB!");
-      }
-      return isLt2G;
-    },
-    //视频上传格式校验
-    uploadVideo(file) {
-      if (
-        [
-          "video/mp4",
-          "video/ogg",
-          "video/flv",
-          "video/avi",
-          "video/rmvb",
-          "video/mkv",
-          "video/x-matroska"
-        ].indexOf(file.type) == -1
-      ) {
-        this.$message.error(
-          "上传视频只能是 mp4、ogg、flv、avi、rmvb 、x-matroska格式!"
-        );
-        return false;
-      }
-      const isLt2G = file.size / 1024 / 1024 < 2000000;
-      if (!isLt2G) {
-        this.$message.error("上传文件大小不能超过 2GB!");
-      }
-      return isLt2G;
-    },
-    //新增剧本流程数据
-    openDialog() {
-      if (this.dialog.title == "新增剧本") {
-        //随机生成4位数函数
-        function rand(min, max) {
-          return Math.floor(Math.random() * (max - min)) + min;
-        }
-        this.queryFindList();
-        this.ruleForm.processesList.push(
-          {
-            title: "开场", //标题
-            // code: 1233, //随机4位数
-            code: rand(1000, 9999), //随机4位数
-            introduction: "开场", //介绍
-            sort: "1", //排序
-            type: "1" //类型
-          },
-          {
-            title: "选角",
-            code: rand(1000, 9999),
-            introduction: "选角",
-            sort: "2",
-            type: "2"
-          },
-          {
-            title: "复盘",
-            code: rand(1000, 9999),
-            introduction: "复盘",
-            sort: "99",
-            type: "9"
-          }
-        );
-        console.log('type',this.ruleForm.processesList)
-      }
-    },
-    mapForChannel(e) {
-      for (var i = 0; i < this.lcData.length; i++) {
-        if (this.lcData[i].id == e) {
-          return this.lcData[i].title;
-        }
-      }
-    },
-    ForChannel(e) {
-      var a = e.split(",");
-      var tmp = [];
-      for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-        for (var s = 0; s < a.length; s++) {
-          if (this.ruleForm.processesList[i].code == e[s]) {
-            tmp.push(this.ruleForm.processesList[i].title);
-            return tmp;
-          }
-        }
-      }
-    },
-    handleClose(done) {
-      this.$confirm("确认关闭？")
-        .then(_ => {
-          done();
-          this.type = "";
-        })
-        .catch(_ => {});
-    },
-    changSort(val) {
-      if (this.ruleForm.processesList.length > 1) {
-        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-          let s = i + 1;
-          if (
-            s < this.ruleForm.processesList.length ||
-            s == this.ruleForm.processesList.length
-          ) {
-            if (
-              this.ruleForm.processesList[i].sort ==
-              this.ruleForm.processesList[s].sort
-            ) {
-              // this.$message({
-              //   message: "输入的流程排序有重复,请重新输入",
-              //   type: "error"
-              // });
-              // this.ruleForm.processesList[s].sort = "";
-              // console.log(val);
-              // this.disabledButton = true;
-            } else {
-              this.disabledButton = false;
-            }
-          }
-        }
-      }
-    },
-    changCode(val) {
-      if (this.ruleForm.processesList.length > 1) {
-        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-          let s = i + 1;
-          if (
-            s < this.ruleForm.processesList.length ||
-            s == this.ruleForm.processesList.length
-          ) {
-            if (
-              this.ruleForm.processesList[i].code ==
-              this.ruleForm.processesList[s].code
-            ) {
-              this.$message({
-                message: "输入的流程编号有重复,请重新输入",
-                type: "error"
-              });
-              this.ruleForm.processesList[s].code = "";
-              console.log(val);
-              this.disabledButton = true;
-            } else {
-              this.disabledButton = false;
-            }
-          }
-        }
-      }
-    },
-    //获取列表
-    async queryList() {
-      this.loading = true;
-      try {
-        let res = await queryJbInfo(this.queryParams);
-        this.tableData = res.data.rows;
-        this.total = res.data.total;
-        this.loading = false;
-      } catch (err) {}
-    },
-    //搜索
-    search() {
-      this.queryList();
-    },
-    //重置
-    refresh() {
-      this.queryParams = {
-        pageNum: 1,
-        pageSize: 10,
-        query: {
-          title: undefined,
-          studioName: undefined,
-          labelName: undefined
-        }
-      };
-      this.queryList();
-    },
-    //跳转Tips维护
-    handleTips(row) {
-      this.$router.push({
-        name: "Tips/index",
-        query: { scenarioId: row.id, type: "sceinfo" }
-      });
-    },
-    //获取流程
-    async queryFindList() {
-      try {
-        let res = await queryFindList({});
-        this.lcData = res.data;
-      } catch (err) {}
-    },
-    //获取详情
-    async queryListDetail(id) {
-      try {
-        this.ruleForm = {
-          studioName: "",
-          title: "",
-          labelName: "",
-          imgUrl: "",
-          cover: "",
-          introduction: "",
-          processesList: [],
-          imgUrl: "",
-          radioImg: [],
-          radioMusic: [],
-          radioVideo: [],
-          resourcesList: []
-        };
-        this.imgData = [];
-        this.musicData = [];
-        this.videoData = [];
-        this.radioMusic = 1;
-        this.radioVideo = 1;
-        this.radioImg = 1;
-        let res = await queryJbDetail(id);
-        this.ruleForm = res.data;
-        if (this.ruleForm.imgUrl != null) {
-          this.dataImg = this.ruleForm.imgUrl.split(",");
-        }
-
-        var img = [];
-        var music = [];
-        var video = [];
-        for (var i in res.data.resourcesList) {
-          if (
-            res.data.resourcesList[i].mediaType == 1 &&
-            res.data.resourcesList[i].sourceType == 2
-          ) {
-            this.radioImg = 2;
-            img.push(res.data.resourcesList[i]);
-          }
-          if (
-            res.data.resourcesList[i].mediaType == 1 &&
-            res.data.resourcesList[i].sourceType == 1
-          ) { //图片
-            this.radioImg = 1;
-            img.push(res.data.resourcesList[i]);
-          }
-        }
-        if (this.radioImg == 1) {
-          this.imgData = img;
-        } else if (this.radioImg == 2) {
-          this.ruleForm.radioImg = img.map(n => {
-            return {
-              mediaType: n.mediaType,
-              sourceType: n.sourceType,
-              title: n.title,
-              url: n.url,
-              processNames: n.processNames,
-              processId: n.processId.split(",")
-            };
-          });
-        }
-        for (var i in res.data.resourcesList) {
-          if (
-            res.data.resourcesList[i].mediaType == 2 &&
-            res.data.resourcesList[i].sourceType == 2
-          ) {
-            this.radioMusic = 2;
-            music.push(res.data.resourcesList[i]);
-          }
-          if (
-            res.data.resourcesList[i].mediaType == 2 &&
-            res.data.resourcesList[i].sourceType == 1
-          ) {
-            this.radioMusic = 1;
-            music.push(res.data.resourcesList[i]);
-             console.log('music',res.data.resourcesList[i]);
-          }
-        }
-        if (this.radioMusic == 1) {
-          this.musicData = music;
-        } else if (this.radioMusic == 2) {
-          this.ruleForm.radioMusic = music.map(n => {
-            return {
-              mediaType: n.mediaType,
-              sourceType: n.sourceType,
-              title: n.title,
-              url: n.url,
-              processNames: n.processNames,
-              processId: n.processId.split(",")
-            };
-          });
-        }
-        for (var i in res.data.resourcesList) {
-          if (
-            res.data.resourcesList[i].mediaType == 3 &&
-            res.data.resourcesList[i].sourceType == 2
-          ) {
-            this.radioVideo = 2;
-            video.push(res.data.resourcesList[i]);
-          }
-          if (
-            res.data.resourcesList[i].mediaType == 3 &&
-            res.data.resourcesList[i].sourceType == 1
-          ) {
-            this.radioVideo = 1;
-            video.push(res.data.resourcesList[i]);
-          }
-        }
-        if (this.radioVideo == 1) {
-          this.videoData = video;
-        } else if (this.radioVideo == 2) {
-          this.ruleForm.radioVideo = video.map(n => {
-            return {
-              mediaType: n.mediaType,
-              sourceType: n.sourceType,
-              title: n.title,
-              url: n.url,
-              processNames: n.processNames,
-              processId: n.processId.split(",")
-            };
-          });
-        }
-        // res.data.resourcesList.map(n => {
-        //   var a = [];
-        //   var b = [];
-        //   var c = [];
-        //   if (n.mediaType == 2 && n.sourceType == 1) {
-        //     consooe.log(1111);
-        //     b.push(n);
-        //     this.musicData = b;
-        //     this.radioMusic = 1;
-        //   }
-        //   if (n.mediaType == 2 && n.sourceType == 2) {
-        //     b.push(n);
-        //     this.ruleForm.radioMusic = b.map(n => {
-        //       return {
-        //         mediaType: n.mediaType,
-        //         sourceType: n.sourceType,
-        //         title: n.title,
-        //         url: n.url,
-        //         processNames: n.processNames,
-        //         processId: n.processId.split(",")
-        //       };
-        //     });
-        //     this.radioMusic = 2;
-        //   }
-        //   if (n.mediaType == 3 && n.sourceType == 1) {
-        //     c.push(n);
-        //     this.videoData = c;
-        //     this.radioVideo = 1;
-        //   }
-        //   if (n.mediaType == 3 && n.sourceType == 2) {
-        //     c.push(n);
-        //     this.ruleForm.radioVideo = c.map(n => {
-        //       return {
-        //         mediaType: n.mediaType,
-        //         sourceType: n.sourceType,
-        //         title: n.title,
-        //         url: n.url,
-        //         processNames: n.processNames,
-        //         processId: n.processId.split(",")
-        //       };
-        //     });
-        //     this.radioVideo = 2;
-        //   }
-        // });
-      } catch (err) {}
-    },
-    // 新增
-    handleAdd() {
-      this.type = "add";
-      this.ruleForm = {
-        studioName: "",
-        title: "",
-        labelName: "",
-        imgUrl: "",
-        cover: "",
-        introduction: "",
-        processesList: [],
-        imgUrl: "",
-        radioImg: [],
-        radioMusic: [],
-        radioVideo: [],
-        resourcesList: []
-      };
-      this.dataImg = [];
-      this.imgData = [];
-      this.musicData = [];
-      this.videoData = [];
-      this.radioMusic = 1;
-      this.radioVideo = 1;
-      this.radioImg = 1;
-      this.disabled = false;
-      this.dialog.title = "新增剧本";
-      setTimeout(() => {
-        this.dialog.Visible = true;
-      }, 500);
-    },
-    async subMit() {
-      // if (this.imgType == true && this.radioImg == 1) {
-      //   this.$message({
-      //     message: "请绑定图片相关流程",
-      //     type: "error"
-      //   });
-      //   return false;
-      // }
-      // if (this.musicType == true && this.radioMusic == 1) {
-      //   this.$message({
-      //     message: "请绑定音频相关流程",
-      //     type: "error"
-      //   });
-      //   return false;
-      // }
-      // if (this.videoType == true && this.radioVideo == 1) {
-      //   this.$message({
-      //     message: "请绑定视频相关流程",
-      //     type: "error"
-      //   });
-      //   return false;
-      // }
-      this.ruleForm.imgUrl = this.dataImg.join(",");
-      if (this.radioImg == 1) {
-        this.ruleForm.radioImg = this.imgData;
-      }
-      if (this.radioMusic == 1) {
-        this.ruleForm.radioMusic = this.musicData;
-      }
-      if (this.radioVideo == 1) {
-        this.ruleForm.radioVideo = this.videoData;
-      }
-      let data = this.ruleForm.radioImg
-        .concat(this.ruleForm.radioMusic)
-        .concat(this.ruleForm.radioVideo);
-      let a = [];
-      let b = this.ruleForm.processesList.map(n => {
-        if (n.title != "") {
-          a.push(n);
-        }
-      });
-      this.ruleForm.processesList = a.map(n => {
-        return {
-          title: n.title,
-          code: n.code,
-          introduction: n.introduction,
-          sort: n.sort,
-          type:n.type,
-        };
-      });
-      let list = [];
-      data.map(n => {
-        if (n.url != "") {
-          list.push(n);
-        }
-      });
-      this.ruleForm.resourcesList = list.map(n => {
-        let type = typeof n.processId;
-        var processId = "";
-        if (type == "string") {
-          processId = n.processId;
-        } else if (type == "object") {
-          processId = n.processId.join(",");
-        }
-        return {
-          mediaType: n.mediaType,
-          sourceType: n.sourceType,
-          title: n.title,
-          url: n.url,
-          processId: processId
-        };
-      });
-      try {
-        this.$refs["ruleForm"].validate(async valid => {
-          if (valid) {
-            if (this.type == "add") {
-              var res = await addJbInfo(this.ruleForm);
-              if (res.code == 200) {
-                this.$message.success("新增成功");
-                this.dialog.Visible = false;
-                this.queryList();
-              } else {
-                this.$message({
-                  message: res.msg,
-                  type: "error"
-                });
-              }
-            } else if (this.type == "edit") {
-              var res = await updateJbInfo(this.ruleForm);
-              if (res.code == 200) {
-                this.$message.success("编辑成功");
-                this.dialog.Visible = false;
-                this.queryList();
-              } else {
-                this.$message({
-                  message: res.msg,
-                  type: "error"
-                });
-              }
-            }
-          }
-        });
-      } catch (err) {}
-    },
-    subEsc() {
-      this.type = "";
-      this.ruleForm = {
-        studioName: "",
-        title: "",
-        labelName: "",
-        imgUrl: "",
-        cover: "",
-        introduction: "",
-        processesList: [],
-        imgUrl: "",
-        radioImg: [],
-        radioMusic: [],
-        radioVideo: [],
-        resourcesList: []
-      };
-      this.radioImg = 1;
-      this.radioMusic = 1;
-      this.radioVideo = 1;
-      this.dialog.Visible = false;
-    },
-    dealRdata(attchments, keyname) {
-      //attchments:数组，键值
-      let list = [...attchments];
-      let result = [];
-      let obj = {};
-      for (let i = 0; i < list.length; i++) {
-        if (!obj[list[i][keyname]]) {
-          result.push(list[i]);
-          obj[list[i].wjDx] = true;
-        }
-      }
-      return result;
-    },
-    // 编辑
-    handleEdit(row) {
-      this.queryListDetail(row.id);
-      this.type = "edit";
-      this.disabled = false;
-      this.dialog.title = "编辑剧本";
-      setTimeout(() => {
-        this.dialog.Visible = true;
-      }, 500);
-    },
-    // 查看
-    handleView(row) {
-      console.log(this.type, 41231);
-      this.type = "view";
-      this.dialog.title = "查看剧本";
-      console.log(this.type, 41231222);
-      this.queryListDetail(row.id);
-      this.disabled = true;
-      setTimeout(() => {
-        this.dialog.Visible = true;
-      }, 500);
-    },
-    // 删除
-    async hanDel(row) {
-      try {
-        await this.$confirm("此操作将永久删除该剧本,是否继续?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        });
-        let res = await deleteJbInfo(row.id);
-        if (res.code == 200) {
-          this.$message.success("删除成功");
-          this.queryList();
-        } else {
-          this.$message({
-            message: res.msg,
-            type: "error"
-          });
-        }
-      } catch (err) {}
-    },
-    handleAvatar(res, file, fileList) {
-      // console.log(res, file, "整个");
-    },
-    handleAvatarSuccess(res, file) {
-      // console.log(res, file, "成功了吗");
-    },
-    //上传图片
-    async uploadImg(file, fileList) {
-      try {
-        let formData = new FormData();
-        let type = file.raw.type;
-        formData.append("file", file.raw);
-        formData.append("type", type);
-        let res = await uploadFile(formData);
-        // this.ruleForm.cover = res.data.wjUrl;
-        this.$set(this.ruleForm, "cover", res.data.wjUrl);
-      } catch (err) {}
-    },
-    changeImgs({ file }) {
-      let formData = new FormData();
-      formData.append("file", file);
-      formData.append("type", "product");
-      uploadFile(formData).then(res => {
-        this.dataImg.push(res.data.wjUrl);
-      });
-    },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type;
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        this.$message.error("上传头像图片大小不能超过 2MB!");
-      }
-      return isJPG && isLt2M;
-    },
-    // 开本流程新增
-    handleAddK() {
-      //为空不能进行添加
-      let list = this.ruleForm.processesList;
-      if(list.length!=0){
-         if (list[list.length-1].title=="" || list[list.length-1].code=="" ||list[list.length-1].introduction=="" ||list[list.length-1].sort==""  ) {
-          this.$message({
-          message: '一次只能添加一条',
-          type: 'warning'
-        });
-            return false
-          }
-      }
-      //随机生成4位数函数
-      // let thit = this;
-      function rand(min, max) {
-        // thit.ruleForm.processesList.forEach(item=>{
-        //   let num = Math.floor(Math.random() * (max - min)) + min;
-        //   console.log(num);
-        //   if(item.code == num){
-        //     rand(1000,9999);
-        //   }
-        //   if(item.code != num){
-        //     return num;
-        //   }
-        // })
-          return Math.floor(Math.random() * (max - min)) + min;
-      }
-
-      this.ruleForm.processesList.push({
-        title: "",
-        code: rand(1000,9999),
-        introduction: "",
-        sort: "",
-        type: "5"
-      });
-    },
-    //同步流程
-    tongbuliuchen(){
-      try{
-        //删除图片
-        this.imgData.forEach((item,index)=>{
-         let imgProcessId=this.imgData[index].processId?this.imgData[index].processId.split(","):[]
-          let data=[]
-          let name=[]
-          if(this.ruleForm.processesList.length<1){ //this.ruleForm.processesList table上的数据
-            this.imgData[index].processId=null      //this.imgData 图片的关联流程
-            this.imgData[index].processNames=null
-          }else{
-            console.log('else');
-            for(let x=0;x<this.ruleForm.processesList.length;x++){ //遍历table有数据
-              for(let y=0;y<imgProcessId.length;y++){ //遍历图片关联流程数据
-                if(this.ruleForm.processesList[x].code.indexOf(imgProcessId[y])>-1 ){ //如果table上的code在图片的关联数据上,就把图片的关联放到data中
-                  data.push(imgProcessId[y])
-                  console.log(data);
-                };
-                if(this.ruleForm.processesList[x].code==imgProcessId[y]){ //如果图片关联的数据中有table上的code,就把table上的title放到name上
-                  name.push(this.ruleForm.processesList[x].title)
-                  console.log(name);
-                }
-              }
-            }
-            this.imgData[index].processId=data.join(","); //把data上的数据变成字符串赋值到当前图片的下拉框上
-            this.imgData[index].processNames=name.join(',')
-            console.log(this.imgData);
-          }
-        })
-        //删除音频
-        this.musicData.forEach((item,index)=>{
-          let musicProcessId=this.musicData[index].processId?this.musicData[index].processId.split(","):[]
-          let data=[]
-          let name=[]
-          if(this.ruleForm.processesList.length<1){
-            this.musicData[index].processId=null
-            this.musicData[index].processNames=null
-          }else{
-            for(let x=0;x<this.ruleForm.processesList.length;x++){
-              for(let y=0;y<musicProcessId.length;y++){
-                if(this.ruleForm.processesList[x].code.indexOf(musicProcessId[y])>-1 ){
-                  data.push(musicProcessId[y])
-                }
-                if(this.ruleForm.processesList[x].code==musicProcessId[y]){
-                  name.push(this.ruleForm.processesList[x].title)
-                }
-              }
-              this.musicData[index].processId=data.join(",")
-              this.musicData[index].processNames=name.join(",")
-            }
-          }
-        })
-        //删除视频
-        this.videoData.forEach((item,index)=>{
-           let videoProcessId=this.videoData[index].processId?this.videoData[index].processId.split(","):[]
-            let data=[]
-            let name=[]
-            if(this.ruleForm.processesList.length<1){
-              this.videoData[index].processId=null
-              this.videoData[index].processNames=null
-            }else{
-              for(let x=0;x<this.ruleForm.processesList.length;x++){
-                for(let y=0;y<videoProcessId.length;y++){
-                  if(this.ruleForm.processesList[x].code.indexOf(videoProcessId[y])>-1 ){
-                    data.push(videoProcessId[y])
-                  }
-                  if(this.ruleForm.processesList[x].code==videoProcessId[y]){
-                    name.push(this.ruleForm.processesList[x].title)
-                  }
-                }
-                this.videoData[index].processId=data.join(",")
-                this.videoData[index].processNames=name.join(",")
-              }
-            }
-        })
-      }catch(err){}
-    },
-    // 开本流程删除
-    Del(index) {
-      this.$confirm("此操作将永久删除该剧本流程,是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          console.log('点击删除');
-          this.ruleForm.processesList.splice(index, 1),
-          this.tongbuliuchen();
-          this.$message({
-            type: "success",
-            message: "删除成功!"
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "error",
-            message: "已取消删除"
-          });
-        });
-    },
-    // 图片预览
-    dialogimg(e) {
-      this.dialogVisible = true;
-      this.dialogImageUrl = this.ruleForm.imgUrls[e];
-    },
-    //资源删除
-    DelImg(index) {
-      this.ruleForm.radioImg.splice(index, 1);
-    },
-    DelMusic(index) {
-      this.ruleForm.radioMusic.splice(index, 1);
-    },
-    DelVideo(index) {
-      this.ruleForm.radioVideo.splice(index, 1);
-    },
-    handleRemove(file) {
-      // delFile({ wjUrl: item.url }).then(res => {
-      //   if (res.code == 200) {
-      //     this.$message.success("删除成功");
-      //   }
-      // });
-    },
-    // 图片删除
-    deldialogimg(index) {
-      this.ruleForm.imgUrls.splice(index, 1);
-      var img = this.ruleForm.imgUrl[index];
-      // proUpdate({ wjUrl: img }).then((res) => {
-      //   if (res.code == 200) {
-      //     that.back();
-      //   }
-      // });
-    },
-    changeImg(val) {
-      this.radioImg = val;
-      this.ruleForm.radioImg = [];
-      this.imgData = [];
-    },
-    changeMusic(val) {
-      this.radioMusic = val;
-      this.ruleForm.radioMusic = [];
-      this.musicData = [];
-    },
-    changeVideo(val) {
-      this.radioVideo = val;
-      this.ruleForm.radioVideo = [];
-      this.videoData = [];
-    },
-    changePro(type) {
-      if (type == "img") {
-        this.imgType = false;
-      } else if (type == "music") {
-        this.musicType = false;
-      } else if (type == "video") {
-        this.videoType = false;
-      }
-    },
-    //新增图片资源
-    handleAddImg() {
-      this.ruleForm.radioImg.push({
-        title: "",
-        url: "",
-        processId: [],
-        mediaType: 1,
-        sourceType: this.radioImg
-      });
-
-      if (this.$refs.img.data.length == 0) {
-        this.$refs.img.data = this.ruleForm.radioImg;
-      }
-    },
-    handleAddMusic() {
-      this.ruleForm.radioMusic.push({
-        title: "",
-        url: "",
-        processId: [],
-        mediaType: 2,
-        sourceType: this.radioMusic
-      });
-      if (this.$refs.music.data.length == 0) {
-        this.$refs.music.data = this.ruleForm.radioMusic;
-      }
-    },
-    handleAddVideo() {
-      this.ruleForm.radioVideo.push({
-        title: "",
-        url: "",
-        processId: [],
-        mediaType: 3,
-        sourceType: this.radioVideo
-      });
-      if (this.$refs.video.data.length == 0) {
-        this.$refs.video.data = this.ruleForm.radioVideo;
-      }
-    },
-    // 上传资源图片
-    labeluploadimg({ file }) {
-      console.log(file);
-      const formdata = new FormData();
-      formdata.append("file", file);
-      formdata.append("type", "product");
-      this.loadingImg = true;
-      this.jinduShowImg = true;
-      this.jinduImgNum = 0;
-      this.radioImg = 1;
-      uploadFile(formdata).then(res => {
-        this.imgData.push({
-          name:res.data.wjCsmc,
-          url: res.data.wjUrl,
-          processNames: "",
-          title: res.data.wjDx,
-          mediaType: 1,
-          sourceType: 1
-        });
-        this.imgType = true;
-        this.loadingImg = false;
-        this.jinduImgNum = 100;
-        this.jinduShowImg = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('img');
-      });
-       let videoJindu1 = setTimeout(() => {
-        this.jinduImgNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduImgNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduImgNum = 99;
-      }, 1500);
-    },
-    //音频
-    labeluploadmusic({ file }) {
-      this.radioMusic = 1;
-      this.loadingAudio = true;
-      this.jinduShowAudio = true;
-       this.jinduAudioNum = 0;
-      const formdata = new FormData();
-      formdata.append("file", file);
-      formdata.append("type", "product");
-      uploadFile(formdata).then(res => {
-        this.musicData.push({
-          url: res.data.wjUrl,
-          processNames: "",
-          title: res.data.wjDx,
-          mediaType: 2,
-          sourceType: 1
-        });
-        this.loadingAudio = false;
-        this.musicType = true;
-        this.jinduAudioNum = 100;
-        this.jinduShowAudio = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('audio');
-      });
-      let videoJindu1 = setTimeout(() => {
-        this.jinduAudioNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduAudioNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduAudioNum = 98;
-      }, 1500);
-    },
-    //视频
-    labeluploadvideo({ file }) {
-      this.videoTime
-      this.loading = true;
-      this.radioVideo = 1;
-      this.jinduShowVideo = true;
-      this.jinduVideoNum = 0;
-      const formdata = new FormData();
-      formdata.append("file", file);
-      formdata.append("type", "product");
-      uploadFile(formdata).then(res => {
-        this.videoData.push({
-          url: res.data.wjUrl,
-          processNames: "",
-          title: res.data.wjDx,
-          mediaType: 3,
-          sourceType: 1
-        });
-        this.loading = false; //取消加载
-        this.radioType = true;
-        // this.jinduVideoNum = 100;
-        // this.jinduShowVideo = false;
-        clearInterval(this.videoTime);
-        this.videoTime = null;
-        this.successVideo('video');
-        // this.findvideocover(res.data.wjUrl, file);
-      });
-      let videoJindu1 = setTimeout(() => {
-        this.jinduVideoNum = 30;
-      }, 500);
-      let videoJindu2 = setTimeout(() => {
-        videoJindu1
-        this.jinduVideoNum = 80;
-      }, 1000);
-      this.videoTime = setTimeout(() => {
-        videoJindu2
-        this.jinduVideoNum = 90;
-      }, 1500);
-    },
-    successVideo(type){
-      console.log('上传成功');
-      switch (type) {
-        case 'img':
-          this.jinduImgNum = 100;
-          setTimeout(() => {
-            this.jinduShowImg = false;
-          }, 1200);
-          break;
-        case 'audio':
-          console.log('音频');
-          this.jinduAudioNum = 100;
-          setTimeout(() => {
-            this.jinduShowAudio = false;
-          }, 1200);
-          break;
-        case 'video':
-          this.jinduVideoNum = 100;
-          setTimeout(() => {
-            this.jinduShowVideo = false;
-          }, 1200);
-          break;
-      }
-      // setTimeout(() => {
-      //   this.jinduShowVideo = false;
-      // }, 800);
-    },
-    delDataImg(item, index) {
-      this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          this.dataImg.splice(index, 1);
-          delFile({ wjUrl: item }).then(res => {
-            if (res.code == 200) {
-              this.$message.success("删除成功");
-            }
-          });
-          this.$message({
-            type: "success",
-            message: "删除成功!"
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "error",
-            message: "已取消删除"
-          });
-        });
-    },
-    // 图片删除
-    deldialogimg(item, index, type) {
-      this.$confirm("此您确定要删除吗,是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          switch (type) {
-            case "img":
-              this.imgData.splice(index, 1);
-              break;
-            case "music":
-              this.musicData.splice(index, 1);
-              break;
-            case "video":
-              this.videoData.splice(index, 1);
-              break;
-            default:
-              break;
-          }
-          delFile({ wjUrl: item.url }).then(res => {
-            if (res.code == 200) {
-              this.$message.success("删除成功");
-            }
-          });
-        })
-        .catch(() => {
-          this.$message({
-            type: "error",
-            message: "已取消删除"
-          });
-        });
-    },
-    changeTitle(item, i, type,e){
-      console.log(item,i,type,e);
-
-    },
-    //关联流程
-    setLc(item, i, type) {
-      if (this.ruleForm.processesList.length == 0) {
-        this.$message({
-          message: "请新建流程",
-          type: "error"
-        });
-        return false;
-      }
-      if (type == "img") {
-        this.liuChengLeixingType = 'img'
-        this.imgIndex = i;
-        console.log('musicIndex',this.imgIndex);
-         try{
-           if(this.imgData[i].processNames == ''){
-            this.processId = "";
-          }else{
-            // this.processId = this.imgData[i].processId.split(',') //数组
-            let processId = this.imgData[i].processId.split(',') //数组
-            //图片添加的时候下拉多选框回显
-            this.ruleForm.resourcesList.forEach(item=>{
-              if(item.processId == processId) {
-                this.processId = processId;
-              }
-            })
-          }
-        }catch(err){}
-      } else if (type == "music") {
-        this.liuChengLeixingType = 'music'
-        this.musicIndex = i;
-         console.log('musicIndex',this.musicIndex);
-        try{
-          if(this.musicData[i].processNames == ''){
-            this.processId = "";
-          }else{
-            // this.processId = this.musicData[i].processId.split(',')
-            let processId = this.musicData[i].processId.split(',')
-            //音频添加的时候下拉多选框回显
-            this.ruleForm.resourcesList.forEach(item=>{
-              if(item.processId == processId) {
-                this.processId = processId;
-              }
-            })
-          }
-        }catch(err){}
-      } else if (type == "video") {
-        this.liuChengLeixingType = 'video'
-        this.videoIndex = i;
-        console.log('videoIndex',this.videoIndex);
-        try{
-          if(this.videoData[i].processNames == ''){
-            this.processId = "";
-          }else{
-            // this.processId = this.videoData[i].processId.split(',')
-            let processId = this.videoData[i].processId.split(',')
-             //视频添加的时候下拉多选框回显
-            this.ruleForm.resourcesList.forEach(item=>{
-              if(item.processId == processId) {
-                this.processId = processId;
-              }
-            })
-          }
-        }catch(err){}
-      }
-      this.list = item;
-      this.typeUrl = type;
-      // this.processId = "";
-      this.process.Visible = true;
-    },
-    subMitLc() {
-      this.process.Visible = false;
-      if (this.typeUrl == "img") {
-        this.imgType = false;
-        var tmp = [];
-        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-          for (var s = 0; s < this.processId.length; s++) {
-            if (this.ruleForm.processesList[i].code == this.processId[s]) {
-              tmp.push(this.ruleForm.processesList[i].title);
-            }
-          }
-        }
-        this.imgData[this.imgIndex].processNames = tmp.join(",");
-        this.imgData[this.imgIndex].processId = this.processId.join(',');
-        this.imgData[this.imgIndex].mediaType = 1;
-        this.imgData[this.imgIndex].sourceType = this.radioImg;
-        this.imgData[this.imgIndex].title = this.imgTitle;
-      }
-      if (this.typeUrl == "music") {
-        this.musicType = false;
-        var tmp = [];
-        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-          for (var s = 0; s < this.processId.length; s++) {
-            if (this.ruleForm.processesList[i].code == this.processId[s]) {
-              tmp.push(this.ruleForm.processesList[i].title);
-            }
-          }
-        }
-        this.musicData[this.musicIndex].processNames = tmp.join(",");
-        this.musicData[this.musicIndex].processId = this.processId.join(',');
-        this.musicData[this.musicIndex].mediaType = 2;
-        this.musicData[this.musicIndex].sourceType = this.radioMusic;
-        this.musicData[this.musicIndex].title = this.audioTitle;
-
-      }
-      if (this.typeUrl == "video") {
-        this.videoType = false;
-        var tmp = [];
-        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
-          for (var s = 0; s < this.processId.length; s++) {
-            if (this.ruleForm.processesList[i].code == this.processId[s]) {
-              tmp.push(this.ruleForm.processesList[i].title);
-            }
-          }
-        }
-        this.videoData[this.videoIndex].processNames = tmp.join(",");
-        this.videoData[this.videoIndex].processId = this.processId.join(',');
-        this.videoData[this.videoIndex].mediaType = 3;
-        this.videoData[this.videoIndex].sourceType = this.radioVideo;
-        this.videoData[this.videoIndex].title = this.videoTitle;
-      }
-    },
-    prevent(e) {
-      var keynum = window.event ? e.keyCode : e.which; //获取键盘码
-      if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
-        this.$message.warning("禁止输入小数以及负数");
-        e.target.value = "";
-      }
-    },
-    //查看视频
-    // handleView(item) {
-    //   console.log(item, "视频地址");
-    // }
-  }
-};
-</script>
-<style scoped>
-.content {
-  background: #fff;
-  margin-top: 15px;
-}
-.add-button {
-  margin-top: 15px;
-}
-/deep/ .el-input__inner {
-  height: 30px;
-}
-.search-button {
-  display: flex;
-}
-.form-title {
-  margin-left: 30px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #000;
-}
-/deep/ .avatar-uploader .el-upload {
-  border: 1px dashed #000;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-/deep/ .avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-/deep/ input::-webkit-outer-spin-button,
-/deep/ input::-webkit-inner-spin-button {
-  -webkit-appearance: none !important;
-}
-/deep/ input[type="number"] {
-  -moz-appearance: textfield !important;
-}
-.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;
-}
-.urlTable /deep/ .el-form-item__content {
-  width: 100%;
-}
-</style>
-<style lang="scss" scope>
-.imgdata {
-  position: relative;
-  // display: inline-block;
-  float: left;
-  margin-left: 60px;
-
-  .imgdialog {
-    width: 146px;
-    height: 146px;
-    display: none;
-    position: absolute;
-    background: rgba(127, 127, 127, 0.5);
-    top: 0;
-    left: 0;
-    justify-content: space-between;
-    align-content: center;
-
-    p {
-      margin: auto;
-
-      i {
-        cursor: pointer;
-        color: white;
-      }
-    }
-  }
-}
-
-.imgdata:hover .imgdialog {
-  display: flex !important;
-}
-
-.audioUpload {
-  .el-form-item__content {
-    display: flex;
-    // flex-direction: column-reverse;
-    flex-wrap: wrap;
-    .imgdata {
-      margin-top: 20px;
-    }
-  }
-}
-
-.videoUpload {
-  .el-form-item__content {
-    margin-left: 100px;
-    display: flex;
-    // flex-direction: column-reverse;
-    flex-wrap: wrap;
-    .imgdata {
-      margin-top: 20px;
-      display: block !important;
-      flex-wrap: nowrap;
-    }
-  }
-}
-</style>
+    getWangyi () {
+      axios({
+        url: '/song/url?id=38358820',  /*热门音乐链接接口地址*/
+        method: 'post'
+      })
+        .then(res => {
+          console.log("我拿到的数据：", res.data)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    changeLiuc(e){
+      // console.log(e);
+    },
+    //音频校验
+    uploadAudio(file) {
+      console.log(file);
+      if (
+        [
+          "audio/mpeg"
+          // "video/ogg",
+          // "video/flv",
+          // "video/avi",
+          // "video/rmvb",
+          // "video/mkv",
+          // "video/x-matroska"
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error("上传视频只能是 mp3格式!");
+        return false;
+      }
+      const isLt2G = file.size / 1024 / 1024 < 2000000;
+      if (!isLt2G) {
+        this.$message.error("上传文件大小不能超过 2GB!");
+      }
+      return isLt2G;
+    },
+    //视频上传格式校验
+    uploadVideo(file) {
+      if (
+        [
+          "video/mp4",
+          "video/ogg",
+          "video/flv",
+          "video/avi",
+          "video/rmvb",
+          "video/mkv",
+          "video/x-matroska"
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error(
+          "上传视频只能是 mp4、ogg、flv、avi、rmvb 、x-matroska格式!"
+        );
+        return false;
+      }
+      const isLt2G = file.size / 1024 / 1024 < 2000000;
+      if (!isLt2G) {
+        this.$message.error("上传文件大小不能超过 2GB!");
+      }
+      return isLt2G;
+    },
+    //新增剧本流程数据
+    openDialog() {
+      if (this.dialog.title == "新增剧本") {
+        //随机生成4位数函数
+        function rand(min, max) {
+          return Math.floor(Math.random() * (max - min)) + min;
+        }
+        this.queryFindList();
+        this.ruleForm.processesList.push(
+          {
+            title: "开场", //标题
+            // code: 1233, //随机4位数
+            code: rand(1000, 9999), //随机4位数
+            introduction: "开场", //介绍
+            sort: "1", //排序
+            type: "1" //类型
+          },
+          {
+            title: "选角",
+            code: rand(1000, 9999),
+            introduction: "选角",
+            sort: "2",
+            type: "2"
+          },
+          {
+            title: "复盘",
+            code: rand(1000, 9999),
+            introduction: "复盘",
+            sort: "99",
+            type: "9"
+          }
+        );
+        console.log('type',this.ruleForm.processesList)
+      }
+    },
+    mapForChannel(e) {
+      for (var i = 0; i < this.lcData.length; i++) {
+        if (this.lcData[i].id == e) {
+          return this.lcData[i].title;
+        }
+      }
+    },
+    ForChannel(e) {
+      var a = e.split(",");
+      var tmp = [];
+      for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+        for (var s = 0; s < a.length; s++) {
+          if (this.ruleForm.processesList[i].code == e[s]) {
+            tmp.push(this.ruleForm.processesList[i].title);
+            return tmp;
+          }
+        }
+      }
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then(_ => {
+          done();
+          this.type = "";
+        })
+        .catch(_ => {});
+    },
+    changSort(val) {
+      if (this.ruleForm.processesList.length > 1) {
+        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+          let s = i + 1;
+          if (
+            s < this.ruleForm.processesList.length ||
+            s == this.ruleForm.processesList.length
+          ) {
+            if (
+              this.ruleForm.processesList[i].sort ==
+              this.ruleForm.processesList[s].sort
+            ) {
+              // this.$message({
+              //   message: "输入的流程排序有重复,请重新输入",
+              //   type: "error"
+              // });
+              // this.ruleForm.processesList[s].sort = "";
+              // console.log(val);
+              // this.disabledButton = true;
+            } else {
+              this.disabledButton = false;
+            }
+          }
+        }
+      }
+    },
+    changCode(val) {
+      if (this.ruleForm.processesList.length > 1) {
+        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+          let s = i + 1;
+          if (
+            s < this.ruleForm.processesList.length ||
+            s == this.ruleForm.processesList.length
+          ) {
+            if (
+              this.ruleForm.processesList[i].code ==
+              this.ruleForm.processesList[s].code
+            ) {
+              this.$message({
+                message: "输入的流程编号有重复,请重新输入",
+                type: "error"
+              });
+              this.ruleForm.processesList[s].code = "";
+              console.log(val);
+              this.disabledButton = true;
+            } else {
+              this.disabledButton = false;
+            }
+          }
+        }
+      }
+    },
+    //获取列表
+    async queryList() {
+      this.loading = true;
+      try {
+        let res = await queryJbInfo(this.queryParams);
+        this.tableData = res.data.rows;
+        this.total = res.data.total;
+        this.loading = false;
+      } catch (err) {}
+    },
+    //搜索
+    search() {
+      this.queryList();
+    },
+    //重置
+    refresh() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        query: {
+          title: undefined,
+          studioName: undefined,
+          labelName: undefined
+        }
+      };
+      this.queryList();
+    },
+    //跳转Tips维护
+    handleTips(row) {
+      this.$router.push({
+        name: "Tips/index",
+        query: { scenarioId: row.id, type: "sceinfo" }
+      });
+    },
+    //获取流程
+    async queryFindList() {
+      try {
+        let res = await queryFindList({});
+        this.lcData = res.data;
+      } catch (err) {}
+    },
+    //获取详情
+    async queryListDetail(id) {
+      try {
+        this.ruleForm = {
+          studioName: "",
+          title: "",
+          labelName: "",
+          imgUrl: "",
+          cover: "",
+          introduction: "",
+          processesList: [],
+          imgUrl: "",
+          radioImg: [],
+          radioMusic: [],
+          radioVideo: [],
+          resourcesList: []
+        };
+        this.imgData = [];
+        this.musicData = [];
+        this.videoData = [];
+        this.radioMusic = 1;
+        this.radioVideo = 1;
+        this.radioImg = 1;
+        let res = await queryJbDetail(id);
+        this.ruleForm = res.data;
+        if (this.ruleForm.imgUrl != null) {
+          this.dataImg = this.ruleForm.imgUrl.split(",");
+        }
+
+        var img = [];
+        var music = [];
+        var video = [];
+        for (var i in res.data.resourcesList) {
+          if (
+            res.data.resourcesList[i].mediaType == 1 &&
+            res.data.resourcesList[i].sourceType == 2
+          ) {
+            this.radioImg = 2;
+            img.push(res.data.resourcesList[i]);
+          }
+          if (
+            res.data.resourcesList[i].mediaType == 1 &&
+            res.data.resourcesList[i].sourceType == 1
+          ) { //图片
+            this.radioImg = 1;
+            img.push(res.data.resourcesList[i]);
+          }
+        }
+        if (this.radioImg == 1) {
+          this.imgData = img;
+        } else if (this.radioImg == 2) {
+          this.ruleForm.radioImg = img.map(n => {
+            return {
+              mediaType: n.mediaType,
+              sourceType: n.sourceType,
+              title: n.title,
+              url: n.url,
+              processNames: n.processNames,
+              processId: n.processId.split(",")
+            };
+          });
+        }
+        for (var i in res.data.resourcesList) {
+          if (
+            res.data.resourcesList[i].mediaType == 2 &&
+            res.data.resourcesList[i].sourceType == 2
+          ) {
+            this.radioMusic = 2;
+            music.push(res.data.resourcesList[i]);
+          }
+          if (
+            res.data.resourcesList[i].mediaType == 2 &&
+            res.data.resourcesList[i].sourceType == 1
+          ) {
+            this.radioMusic = 1;
+            music.push(res.data.resourcesList[i]);
+             console.log('music',res.data.resourcesList[i]);
+          }
+        }
+        if (this.radioMusic == 1) {
+          this.musicData = music;
+        } else if (this.radioMusic == 2) {
+          this.ruleForm.radioMusic = music.map(n => {
+            return {
+              mediaType: n.mediaType,
+              sourceType: n.sourceType,
+              title: n.title,
+              url: n.url,
+              processNames: n.processNames,
+              processId: n.processId.split(",")
+            };
+          });
+        }
+        for (var i in res.data.resourcesList) {
+          if (
+            res.data.resourcesList[i].mediaType == 3 &&
+            res.data.resourcesList[i].sourceType == 2
+          ) {
+            this.radioVideo = 2;
+            video.push(res.data.resourcesList[i]);
+          }
+          if (
+            res.data.resourcesList[i].mediaType == 3 &&
+            res.data.resourcesList[i].sourceType == 1
+          ) {
+            this.radioVideo = 1;
+            video.push(res.data.resourcesList[i]);
+          }
+        }
+        if (this.radioVideo == 1) {
+          this.videoData = video;
+        } else if (this.radioVideo == 2) {
+          this.ruleForm.radioVideo = video.map(n => {
+            return {
+              mediaType: n.mediaType,
+              sourceType: n.sourceType,
+              title: n.title,
+              url: n.url,
+              processNames: n.processNames,
+              processId: n.processId.split(",")
+            };
+          });
+        }
+        // res.data.resourcesList.map(n => {
+        //   var a = [];
+        //   var b = [];
+        //   var c = [];
+        //   if (n.mediaType == 2 && n.sourceType == 1) {
+        //     consooe.log(1111);
+        //     b.push(n);
+        //     this.musicData = b;
+        //     this.radioMusic = 1;
+        //   }
+        //   if (n.mediaType == 2 && n.sourceType == 2) {
+        //     b.push(n);
+        //     this.ruleForm.radioMusic = b.map(n => {
+        //       return {
+        //         mediaType: n.mediaType,
+        //         sourceType: n.sourceType,
+        //         title: n.title,
+        //         url: n.url,
+        //         processNames: n.processNames,
+        //         processId: n.processId.split(",")
+        //       };
+        //     });
+        //     this.radioMusic = 2;
+        //   }
+        //   if (n.mediaType == 3 && n.sourceType == 1) {
+        //     c.push(n);
+        //     this.videoData = c;
+        //     this.radioVideo = 1;
+        //   }
+        //   if (n.mediaType == 3 && n.sourceType == 2) {
+        //     c.push(n);
+        //     this.ruleForm.radioVideo = c.map(n => {
+        //       return {
+        //         mediaType: n.mediaType,
+        //         sourceType: n.sourceType,
+        //         title: n.title,
+        //         url: n.url,
+        //         processNames: n.processNames,
+        //         processId: n.processId.split(",")
+        //       };
+        //     });
+        //     this.radioVideo = 2;
+        //   }
+        // });
+      } catch (err) {}
+    },
+    // 新增
+    handleAdd() {
+      this.type = "add";
+      this.ruleForm = {
+        studioName: "",
+        title: "",
+        labelName: "",
+        imgUrl: "",
+        cover: "",
+        introduction: "",
+        processesList: [],
+        imgUrl: "",
+        radioImg: [],
+        radioMusic: [],
+        radioVideo: [],
+        resourcesList: []
+      };
+      this.dataImg = [];
+      this.imgData = [];
+      this.musicData = [];
+      this.videoData = [];
+      this.radioMusic = 1;
+      this.radioVideo = 1;
+      this.radioImg = 1;
+      this.disabled = false;
+      this.dialog.title = "新增剧本";
+      setTimeout(() => {
+        this.dialog.Visible = true;
+      }, 500);
+    },
+    async subMit() {
+      // if (this.imgType == true && this.radioImg == 1) {
+      //   this.$message({
+      //     message: "请绑定图片相关流程",
+      //     type: "error"
+      //   });
+      //   return false;
+      // }
+      // if (this.musicType == true && this.radioMusic == 1) {
+      //   this.$message({
+      //     message: "请绑定音频相关流程",
+      //     type: "error"
+      //   });
+      //   return false;
+      // }
+      // if (this.videoType == true && this.radioVideo == 1) {
+      //   this.$message({
+      //     message: "请绑定视频相关流程",
+      //     type: "error"
+      //   });
+      //   return false;
+      // }
+      this.ruleForm.imgUrl = this.dataImg.join(",");
+      if (this.radioImg == 1) {
+        this.ruleForm.radioImg = this.imgData;
+      }
+      if (this.radioMusic == 1) {
+        this.ruleForm.radioMusic = this.musicData;
+      }
+      if (this.radioVideo == 1) {
+        this.ruleForm.radioVideo = this.videoData;
+      }
+      let data = this.ruleForm.radioImg
+        .concat(this.ruleForm.radioMusic)
+        .concat(this.ruleForm.radioVideo);
+      let a = [];
+      let b = this.ruleForm.processesList.map(n => {
+        if (n.title != "") {
+          a.push(n);
+        }
+      });
+      this.ruleForm.processesList = a.map(n => {
+        return {
+          title: n.title,
+          code: n.code,
+          introduction: n.introduction,
+          sort: n.sort,
+          type:n.type,
+        };
+      });
+      let list = [];
+      data.map(n => {
+        if (n.url != "") {
+          list.push(n);
+        }
+      });
+      this.ruleForm.resourcesList = list.map(n => {
+        let type = typeof n.processId;
+        var processId = "";
+        if (type == "string") {
+          processId = n.processId;
+        } else if (type == "object") {
+          processId = n.processId.join(",");
+        }
+        return {
+          mediaType: n.mediaType,
+          sourceType: n.sourceType,
+          title: n.title,
+          url: n.url,
+          processId: processId
+        };
+      });
+      try {
+        this.$refs["ruleForm"].validate(async valid => {
+          if (valid) {
+            if (this.type == "add") {
+              var res = await addJbInfo(this.ruleForm);
+              if (res.code == 200) {
+                this.$message.success("新增成功");
+                this.dialog.Visible = false;
+                this.queryList();
+              } else {
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            } else if (this.type == "edit") {
+              var res = await updateJbInfo(this.ruleForm);
+              if (res.code == 200) {
+                this.$message.success("编辑成功");
+                this.dialog.Visible = false;
+                this.queryList();
+              } else {
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
+              }
+            }
+          }
+        });
+      } catch (err) {}
+    },
+    subEsc() {
+      this.type = "";
+      this.ruleForm = {
+        studioName: "",
+        title: "",
+        labelName: "",
+        imgUrl: "",
+        cover: "",
+        introduction: "",
+        processesList: [],
+        imgUrl: "",
+        radioImg: [],
+        radioMusic: [],
+        radioVideo: [],
+        resourcesList: []
+      };
+      this.radioImg = 1;
+      this.radioMusic = 1;
+      this.radioVideo = 1;
+      this.dialog.Visible = false;
+    },
+    dealRdata(attchments, keyname) {
+      //attchments:数组，键值
+      let list = [...attchments];
+      let result = [];
+      let obj = {};
+      for (let i = 0; i < list.length; i++) {
+        if (!obj[list[i][keyname]]) {
+          result.push(list[i]);
+          obj[list[i].wjDx] = true;
+        }
+      }
+      return result;
+    },
+    // 编辑
+    handleEdit(row) {
+      this.queryListDetail(row.id);
+      this.type = "edit";
+      this.disabled = false;
+      this.dialog.title = "编辑剧本";
+      setTimeout(() => {
+        this.dialog.Visible = true;
+      }, 500);
+    },
+    // 查看
+    handleView(row) {
+      console.log(this.type, 41231);
+      this.type = "view";
+      this.dialog.title = "查看剧本";
+      console.log(this.type, 41231222);
+      this.queryListDetail(row.id);
+      this.disabled = true;
+      setTimeout(() => {
+        this.dialog.Visible = true;
+      }, 500);
+    },
+    // 删除
+    async hanDel(row) {
+      try {
+        await this.$confirm("此操作将永久删除该剧本,是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        let res = await deleteJbInfo(row.id);
+        if (res.code == 200) {
+          this.$message.success("删除成功");
+          this.queryList();
+        } else {
+          this.$message({
+            message: res.msg,
+            type: "error"
+          });
+        }
+      } catch (err) {}
+    },
+    handleAvatar(res, file, fileList) {
+      // console.log(res, file, "整个");
+    },
+    handleAvatarSuccess(res, file) {
+      // console.log(res, file, "成功了吗");
+    },
+    //上传图片
+    async uploadImg(file, fileList) {
+      try {
+        let formData = new FormData();
+        let type = file.raw.type;
+        formData.append("file", file.raw);
+        formData.append("type", type);
+        let res = await uploadFile(formData);
+        // this.ruleForm.cover = res.data.wjUrl;
+        this.$set(this.ruleForm, "cover", res.data.wjUrl);
+      } catch (err) {}
+    },
+    changeImgs({ file }) {
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", "product");
+      uploadFile(formData).then(res => {
+        this.dataImg.push(res.data.wjUrl);
+      });
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type;
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    // 开本流程新增
+    handleAddK() {
+      //为空不能进行添加
+      let list = this.ruleForm.processesList;
+      if(list.length!=0){
+         if (list[list.length-1].title=="" || list[list.length-1].code=="" ||list[list.length-1].introduction=="" ||list[list.length-1].sort==""  ) {
+          this.$message({
+          message: '一次只能添加一条',
+          type: 'warning'
+        });
+            return false
+          }
+      }
+      //随机生成4位数函数
+      // let thit = this;
+      function rand(min, max) {
+        // thit.ruleForm.processesList.forEach(item=>{
+        //   let num = Math.floor(Math.random() * (max - min)) + min;
+        //   console.log(num);
+        //   if(item.code == num){
+        //     rand(1000,9999);
+        //   }
+        //   if(item.code != num){
+        //     return num;
+        //   }
+        // })
+          return Math.floor(Math.random() * (max - min)) + min;
+      }
+
+      this.ruleForm.processesList.push({
+        title: "",
+        code: rand(1000,9999),
+        introduction: "",
+        sort: "",
+        type: "5"
+      });
+    },
+    //同步流程
+    tongbuliuchen(){
+      try{
+        //删除图片
+        this.imgData.forEach((item,index)=>{
+         let imgProcessId=this.imgData[index].processId?this.imgData[index].processId.split(","):[]
+          let data=[]
+          let name=[]
+          if(this.ruleForm.processesList.length<1){ //this.ruleForm.processesList table上的数据
+            this.imgData[index].processId=null      //this.imgData 图片的关联流程
+            this.imgData[index].processNames=null
+          }else{
+            console.log('else');
+            for(let x=0;x<this.ruleForm.processesList.length;x++){ //遍历table有数据
+              for(let y=0;y<imgProcessId.length;y++){ //遍历图片关联流程数据
+                if(this.ruleForm.processesList[x].code.indexOf(imgProcessId[y])>-1 ){ //如果table上的code在图片的关联数据上,就把图片的关联放到data中
+                  data.push(imgProcessId[y])
+                  console.log(data);
+                };
+                if(this.ruleForm.processesList[x].code==imgProcessId[y]){ //如果图片关联的数据中有table上的code,就把table上的title放到name上
+                  name.push(this.ruleForm.processesList[x].title)
+                  console.log(name);
+                }
+              }
+            }
+            this.imgData[index].processId=data.join(","); //把data上的数据变成字符串赋值到当前图片的下拉框上
+            this.imgData[index].processNames=name.join(',')
+            console.log(this.imgData);
+          }
+        })
+        //删除音频
+        this.musicData.forEach((item,index)=>{
+          let musicProcessId=this.musicData[index].processId?this.musicData[index].processId.split(","):[]
+          let data=[]
+          let name=[]
+          if(this.ruleForm.processesList.length<1){
+            this.musicData[index].processId=null
+            this.musicData[index].processNames=null
+          }else{
+            for(let x=0;x<this.ruleForm.processesList.length;x++){
+              for(let y=0;y<musicProcessId.length;y++){
+                if(this.ruleForm.processesList[x].code.indexOf(musicProcessId[y])>-1 ){
+                  data.push(musicProcessId[y])
+                }
+                if(this.ruleForm.processesList[x].code==musicProcessId[y]){
+                  name.push(this.ruleForm.processesList[x].title)
+                }
+              }
+              this.musicData[index].processId=data.join(",")
+              this.musicData[index].processNames=name.join(",")
+            }
+          }
+        })
+        //删除视频
+        this.videoData.forEach((item,index)=>{
+           let videoProcessId=this.videoData[index].processId?this.videoData[index].processId.split(","):[]
+            let data=[]
+            let name=[]
+            if(this.ruleForm.processesList.length<1){
+              this.videoData[index].processId=null
+              this.videoData[index].processNames=null
+            }else{
+              for(let x=0;x<this.ruleForm.processesList.length;x++){
+                for(let y=0;y<videoProcessId.length;y++){
+                  if(this.ruleForm.processesList[x].code.indexOf(videoProcessId[y])>-1 ){
+                    data.push(videoProcessId[y])
+                  }
+                  if(this.ruleForm.processesList[x].code==videoProcessId[y]){
+                    name.push(this.ruleForm.processesList[x].title)
+                  }
+                }
+                this.videoData[index].processId=data.join(",")
+                this.videoData[index].processNames=name.join(",")
+              }
+            }
+        })
+      }catch(err){}
+    },
+    // 开本流程删除
+    Del(index) {
+      this.$confirm("此操作将永久删除该剧本流程,是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          console.log('点击删除');
+          this.ruleForm.processesList.splice(index, 1),
+          this.tongbuliuchen();
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "error",
+            message: "已取消删除"
+          });
+        });
+    },
+    // 图片预览
+    dialogimg(e) {
+      this.dialogVisible = true;
+      this.dialogImageUrl = this.ruleForm.imgUrls[e];
+    },
+    //资源删除
+    DelImg(index) {
+      this.ruleForm.radioImg.splice(index, 1);
+    },
+    DelMusic(index) {
+      this.ruleForm.radioMusic.splice(index, 1);
+    },
+    DelVideo(index) {
+      this.ruleForm.radioVideo.splice(index, 1);
+    },
+    handleRemove(file) {
+      // delFile({ wjUrl: item.url }).then(res => {
+      //   if (res.code == 200) {
+      //     this.$message.success("删除成功");
+      //   }
+      // });
+    },
+    // 图片删除
+    deldialogimg(index) {
+      this.ruleForm.imgUrls.splice(index, 1);
+      var img = this.ruleForm.imgUrl[index];
+      // proUpdate({ wjUrl: img }).then((res) => {
+      //   if (res.code == 200) {
+      //     that.back();
+      //   }
+      // });
+    },
+    changeImg(val) {
+      this.radioImg = val;
+      this.ruleForm.radioImg = [];
+      this.imgData = [];
+    },
+    changeMusic(val) {
+      this.radioMusic = val;
+      this.ruleForm.radioMusic = [];
+      this.musicData = [];
+    },
+    changeVideo(val) {
+      this.radioVideo = val;
+      this.ruleForm.radioVideo = [];
+      this.videoData = [];
+    },
+    changePro(type) {
+      if (type == "img") {
+        this.imgType = false;
+      } else if (type == "music") {
+        this.musicType = false;
+      } else if (type == "video") {
+        this.videoType = false;
+      }
+    },
+    //新增图片资源
+    handleAddImg() {
+      this.ruleForm.radioImg.push({
+        title: "",
+        url: "",
+        processId: [],
+        mediaType: 1,
+        sourceType: this.radioImg
+      });
+
+      if (this.$refs.img.data.length == 0) {
+        this.$refs.img.data = this.ruleForm.radioImg;
+      }
+    },
+    handleAddMusic() {
+      this.ruleForm.radioMusic.push({
+        title: "",
+        url: "",
+        processId: [],
+        mediaType: 2,
+        sourceType: this.radioMusic
+      });
+      if (this.$refs.music.data.length == 0) {
+        this.$refs.music.data = this.ruleForm.radioMusic;
+      }
+    },
+    handleAddVideo() {
+      this.ruleForm.radioVideo.push({
+        title: "",
+        url: "",
+        processId: [],
+        mediaType: 3,
+        sourceType: this.radioVideo
+      });
+      if (this.$refs.video.data.length == 0) {
+        this.$refs.video.data = this.ruleForm.radioVideo;
+      }
+    },
+    // 上传资源图片
+    labeluploadimg({ file }) {
+      console.log(file);
+      const formdata = new FormData();
+      formdata.append("file", file);
+      formdata.append("type", "product");
+      this.loadingImg = true;
+      this.jinduShowImg = true;
+      this.jinduImgNum = 0;
+      this.radioImg = 1;
+      uploadFile(formdata).then(res => {
+        this.imgData.push({
+          name:res.data.wjCsmc,
+          url: res.data.wjUrl,
+          processNames: "",
+          // title: res.data.wjDx,
+          title: '',
+          mediaType: 1,
+          sourceType: 1
+        });
+        this.imgType = true;
+        this.loadingImg = false;
+        this.jinduImgNum = 100;
+        this.jinduShowImg = false;
+        clearInterval(this.videoTime);
+        this.videoTime = null;
+        this.successVideo('img');
+      });
+       let videoJindu1 = setTimeout(() => {
+        this.jinduImgNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduImgNum = 80;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduImgNum = 99;
+      }, 1500);
+    },
+    //音频
+    labeluploadmusic({ file }) {
+      this.radioMusic = 1;
+      this.loadingAudio = true;
+      this.jinduShowAudio = true;
+       this.jinduAudioNum = 0;
+      const formdata = new FormData();
+      formdata.append("file", file);
+      formdata.append("type", "product");
+      uploadFile(formdata).then(res => {
+        this.musicData.push({
+          url: res.data.wjUrl,
+          processNames: "",
+          // title: res.data.wjDx,
+          title: '',
+          mediaType: 2,
+          sourceType: 1
+        });
+        this.loadingAudio = false;
+        this.musicType = true;
+        this.jinduAudioNum = 100;
+        this.jinduShowAudio = false;
+        clearInterval(this.videoTime);
+        this.videoTime = null;
+        this.successVideo('audio');
+      });
+      let videoJindu1 = setTimeout(() => {
+        this.jinduAudioNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduAudioNum = 80;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduAudioNum = 98;
+      }, 1500);
+    },
+    //视频
+    labeluploadvideo({ file }) {
+      this.videoTime
+      this.loading = true;
+      this.radioVideo = 1;
+      this.jinduShowVideo = true;
+      this.jinduVideoNum = 0;
+      const formdata = new FormData();
+      formdata.append("file", file);
+      formdata.append("type", "product");
+      uploadFile(formdata).then(res => {
+        this.videoData.push({
+          url: res.data.wjUrl,
+          processNames: "",
+          // title: res.data.wjDx,
+          title: '',
+          mediaType: 3,
+          sourceType: 1
+        });
+        this.loading = false; //取消加载
+        this.radioType = true;
+        // this.jinduVideoNum = 100;
+        // this.jinduShowVideo = false;
+        clearInterval(this.videoTime);
+        this.videoTime = null;
+        this.successVideo('video');
+        // this.findvideocover(res.data.wjUrl, file);
+      });
+      let videoJindu1 = setTimeout(() => {
+        this.jinduVideoNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduVideoNum = 80;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduVideoNum = 90;
+      }, 1500);
+    },
+    successVideo(type){
+      console.log('上传成功');
+      switch (type) {
+        case 'img':
+          this.jinduImgNum = 100;
+          setTimeout(() => {
+            this.jinduShowImg = false;
+          }, 1200);
+          break;
+        case 'audio':
+          console.log('音频');
+          this.jinduAudioNum = 100;
+          setTimeout(() => {
+            this.jinduShowAudio = false;
+          }, 1200);
+          break;
+        case 'video':
+          this.jinduVideoNum = 100;
+          setTimeout(() => {
+            this.jinduShowVideo = false;
+          }, 1200);
+          break;
+      }
+      // setTimeout(() => {
+      //   this.jinduShowVideo = false;
+      // }, 800);
+    },
+    delDataImg(item, index) {
+      this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.dataImg.splice(index, 1);
+          delFile({ wjUrl: item }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+            }
+          });
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "error",
+            message: "已取消删除"
+          });
+        });
+    },
+    // 图片删除
+    deldialogimg(item, index, type) {
+      this.$confirm("此您确定要删除吗,是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          switch (type) {
+            case "img":
+              this.imgData.splice(index, 1);
+              break;
+            case "music":
+              this.musicData.splice(index, 1);
+              break;
+            case "video":
+              this.videoData.splice(index, 1);
+              break;
+            default:
+              break;
+          }
+          delFile({ wjUrl: item.url }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "error",
+            message: "已取消删除"
+          });
+        });
+    },
+    //关联流程
+    setLc(item, i, type) {
+      if (this.ruleForm.processesList.length == 0) {
+        this.$message({
+          message: "请新建流程",
+          type: "error"
+        });
+        return false;
+      }
+      if (type == "img") {
+        this.liuChengLeixingType = 'img'
+        this.imgIndex = i;
+        console.log('musicIndex',this.imgIndex);
+         try{
+           if(this.imgData[i].processNames == ''){
+            this.processId = "";
+          }else{
+            // this.processId = this.imgData[i].processId.split(',') //数组
+            let processId = this.imgData[i].processId.split(',') //数组
+            //图片添加的时候下拉多选框回显
+            this.ruleForm.resourcesList.forEach(item=>{
+              if(item.processId == processId) {
+                this.processId = processId;
+              }
+            })
+          }
+        }catch(err){}
+      } else if (type == "music") {
+        this.liuChengLeixingType = 'music'
+        this.musicIndex = i;
+         console.log('musicIndex',this.musicIndex);
+        try{
+          if(this.musicData[i].processNames == ''){
+            this.processId = "";
+          }else{
+            // this.processId = this.musicData[i].processId.split(',')
+            let processId = this.musicData[i].processId.split(',')
+            //音频添加的时候下拉多选框回显
+            this.ruleForm.resourcesList.forEach(item=>{
+              if(item.processId == processId) {
+                this.processId = processId;
+              }
+            })
+          }
+        }catch(err){}
+      } else if (type == "video") {
+        this.liuChengLeixingType = 'video'
+        this.videoIndex = i;
+        console.log('videoIndex',this.videoIndex);
+        try{
+          if(this.videoData[i].processNames == ''){
+            this.processId = "";
+          }else{
+            // this.processId = this.videoData[i].processId.split(',')
+            let processId = this.videoData[i].processId.split(',')
+             //视频添加的时候下拉多选框回显
+            this.ruleForm.resourcesList.forEach(item=>{
+              if(item.processId == processId) {
+                this.processId = processId;
+              }
+            })
+          }
+        }catch(err){}
+      }
+      this.list = item;
+      this.typeUrl = type;
+      // this.processId = "";
+      this.process.Visible = true;
+    },
+    subMitLc() {
+      this.process.Visible = false;
+      if (this.typeUrl == "img") {
+        this.imgType = false;
+        var tmp = [];
+        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+          for (var s = 0; s < this.processId.length; s++) {
+            if (this.ruleForm.processesList[i].code == this.processId[s]) {
+              tmp.push(this.ruleForm.processesList[i].title);
+            }
+          }
+        }
+        this.imgData[this.imgIndex].processNames = tmp.join(",");
+        this.imgData[this.imgIndex].processId = this.processId.join(',');
+        this.imgData[this.imgIndex].mediaType = 1;
+        this.imgData[this.imgIndex].sourceType = this.radioImg;
+        this.imgData[this.imgIndex].title = this.imgTitle;
+      }
+      if (this.typeUrl == "music") {
+        this.musicType = false;
+        var tmp = [];
+        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+          for (var s = 0; s < this.processId.length; s++) {
+            if (this.ruleForm.processesList[i].code == this.processId[s]) {
+              tmp.push(this.ruleForm.processesList[i].title);
+            }
+          }
+        }
+        this.musicData[this.musicIndex].processNames = tmp.join(",");
+        this.musicData[this.musicIndex].processId = this.processId.join(',');
+        this.musicData[this.musicIndex].mediaType = 2;
+        this.musicData[this.musicIndex].sourceType = this.radioMusic;
+        this.musicData[this.musicIndex].title = this.audioTitle;
+
+      }
+      if (this.typeUrl == "video") {
+        this.videoType = false;
+        var tmp = [];
+        for (var i = 0; i < this.ruleForm.processesList.length; i++) {
+          for (var s = 0; s < this.processId.length; s++) {
+            if (this.ruleForm.processesList[i].code == this.processId[s]) {
+              tmp.push(this.ruleForm.processesList[i].title);
+            }
+          }
+        }
+        this.videoData[this.videoIndex].processNames = tmp.join(",");
+        this.videoData[this.videoIndex].processId = this.processId.join(',');
+        this.videoData[this.videoIndex].mediaType = 3;
+        this.videoData[this.videoIndex].sourceType = this.radioVideo;
+        this.videoData[this.videoIndex].title = this.videoTitle;
+      }
+    },
+    prevent(e) {
+      var keynum = window.event ? e.keyCode : e.which; //获取键盘码
+      if (keynum == 189 || keynum == 190 || keynum == 109 || keynum == 110) {
+        this.$message.warning("禁止输入小数以及负数");
+        e.target.value = "";
+      }
+    },
+    //查看视频
+    // handleView(item) {
+    //   console.log(item, "视频地址");
+    // }
+  }
+};
+</script>
+<style scoped>
+.content {
+  background: #fff;
+  margin-top: 15px;
+}
+.add-button {
+  margin-top: 15px;
+}
+/deep/ .el-input__inner {
+  height: 30px;
+}
+.search-button {
+  display: flex;
+}
+.form-title {
+  margin-left: 30px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #000;
+}
+/deep/ .avatar-uploader .el-upload {
+  border: 1px dashed #000;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+/deep/ .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+/deep/ input::-webkit-outer-spin-button,
+/deep/ input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+/deep/ input[type="number"] {
+  -moz-appearance: textfield !important;
+}
+.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;
+}
+.urlTable /deep/ .el-form-item__content {
+  width: 100%;
+}
+</style>
+<style lang="scss" scope>
+.imgdata {
+  position: relative;
+  // display: inline-block;
+  float: left;
+  margin-left: 60px;
+
+  .imgdialog {
+    width: 146px;
+    height: 146px;
+    display: none;
+    position: absolute;
+    background: rgba(127, 127, 127, 0.5);
+    top: 0;
+    left: 0;
+    justify-content: space-between;
+    align-content: center;
+
+    p {
+      margin: auto;
+
+      i {
+        cursor: pointer;
+        color: white;
+      }
+    }
+  }
+}
+
+.imgdata:hover .imgdialog {
+  display: flex !important;
+}
+
+.audioUpload {
+  .el-form-item__content {
+    display: flex;
+    // flex-direction: column-reverse;
+    flex-wrap: wrap;
+    .imgdata {
+      margin-top: 20px;
+    }
+  }
+}
+
+.videoUpload {
+  .el-form-item__content {
+    margin-left: 100px;
+    display: flex;
+    // flex-direction: column-reverse;
+    flex-wrap: wrap;
+    .imgdata {
+      margin-top: 20px;
+      display: block !important;
+      flex-wrap: nowrap;
+    }
+  }
+}
+</style>