jbs_front/src/views/sce/sceInfo/index.vue

<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">
          <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"
      @close="closeDialog"
      :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
            list-type="picture-card"
            :show-file-list="false"
            :on-progress="uploadImg" 
            :on-success="handleAvatar"
            :before-upload="beforeAvatarUpload"
            element-loading-text="正在上传..."
            v-loading="loadingCover"
          >
            <!-- :on-change="uploadImg" -->
            <!-- :auto-upload="false" -->

          	<!-- <el-upload class="avatar-uploader" :show-file-list="false" action  list-type="picture-card"
				 :on-progress="uploadChange" > -->




            <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-progress :percentage="jinduCoverNum" v-if="jinduShowCover"></el-progress>
        <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"
            :http-request="changeImgs"
            :show-file-list="false"
            element-loading-text="正在上传..."
            v-loading="loadingOtherImg"
          >
            <!-- :on-progress="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>
        <el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg"></el-progress>
        <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
                  disabled
                  @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"
          >
            <!-- :on-progress="labeluploadimg" -->
            <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"></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].neteaseUrl" />
              </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
            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="请输入标题" :disabled='disabled'></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"
          >
            <!-- :on-progress='labeluploadmusic' -->
            <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"></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 slot-scope="scope">
                {{ scope.row.title }}
              </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"
            :http-request="labeluploadvideo"
            :before-upload="uploadVideo"
            element-loading-text="正在上传..."
            v-loading="loading"
          >
            <!-- :on-progress='labeluploadvideo' -->
          <!-- :on-progress='startVideo' -->
            <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"></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,
      jinduCoverNum:0,//封面图片进度
      jinduOtherImgNum:0,//其他图片进度
      jinduImgNum:0,
      jinduAudioNum:0,
      jinduVideoNum:0,
      jinduShowCover:false,//封面进度条是否显示
      jinduShowOtherImg:false,//其他进度条显示
      jinduShowImg:false,
      jinduShowAudio:false,
      jinduShowVideo:false,
      imgTime:null,
      audioTime:null,
      videoTime:null,

      liuChengLeixingType:'',
      loadingOtherImg:false,//其他图片加载圈
      loadingCover:false,//封面加载圈
      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();
  },
  watch:{
    jinduCoverNum(newV,oldV){
      console.log('新',newV);
      console.log('旧',oldV);
    },
    jinduVideoNum(newV,oldV){
      console.log('新',newV);
      console.log('旧',oldV);
    }
  },
  methods: {
    format(percentage) {
       console.log(percentage);
        return percentage === 100 ? `${percentage}%` : `${percentage}%`;
    },
    uploadChange(e){
      console.log('123');
      console.log('e',e.percent); //文件上传进度
    },
    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;
    },
    //关闭弹窗
    closeDialog(){
      console.log('关闭');
      // uploadFile=null;
      // var uploadFile=null;
      this.ruleForm = {
        processesList: [],
        imgUrl: "",
        imgUrls: [],
        radioImg: [],
        radioMusic: [],
        radioVideo: [],
        resourcesList: []
      };
    },
    //新增剧本流程数据
    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 musicBendi = [];//本地音乐回显
        var musicWangyi = [];//网易云回显
        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;
            this.wangyiyunType = 'wangyiyun'
            musicWangyi.push(res.data.resourcesList[i]);
          }
          if ( //本地音乐回显
            res.data.resourcesList[i].mediaType == 2 && //音乐类型
            res.data.resourcesList[i].sourceType == 1 //本地
          ) {
            this.radioMusic = 1;
            musicBendi.push(res.data.resourcesList[i]);
            // console.log('本地音乐',music);
          }
        }
        if (this.radioMusic == 1) { //本地回显
          this.musicData = musicBendi;
        } 
    
        if (this.wangyiyunType == 'wangyiyun') { //网易云回显
          console.log('wangyiyun',musicWangyi);
          this.ruleForm.radioMusic = musicWangyi.map(n => { 
            return {
              mediaType: n.mediaType,
              sourceType: n.sourceType,
              title: n.title,
              // url: n.url,
              url: n.neteaseUrl,
              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?this.ruleForm.radioMusic:[])
        .concat(this.musicData)
        .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") {
              // return;
              var res = await addJbInfo(this.ruleForm);
              if (res.code == 200) {
                this.$message.success("新增成功");
                this.dialog.Visible = false;
                this.queryList();
              } else {
                //  console.log('新增提交失败');
                // 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 {
                console.log('编辑提交失败');
                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(e,file, fileList) {
      console.log('进度',parseInt(e.percent));
     
      this.loadingCover=true;//显示加载
      // this.jinduCoverNum= parseInt(e.percent);//进度从0开始
      this.jinduCoverNum = Math.floor(e.percent);//进度从0开始
      this.jinduShowCover=true;//显示进度条
      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);
        this.loadingCover=false;
        if (this.jinduCoverNum >= 100) {
					this.jinduCoverNum = 100
					setTimeout(() => {
						this.jinduShowCover = false;
					}, 1000) // 一秒后关闭进度条
				}
        // this.successVideo('cover')
      } catch (err) {}
    },
    //其他图片
    changeImgs({ file }) {
    // changeImgs(e,file) {
      // console.log('其他图片进度',parseInt(e.percent));
      this.loadingOtherImg = true; //显示加载
      this.jinduOtherImgNum = 0;//进度条从0开始
      this.jinduShowOtherImg = true; //是否显示进度条
      let formData = new FormData();
      formData.append("file", file);
      formData.append("type", "product");
      uploadFile(formData).then(res => {
        this.dataImg.push(res.data.wjUrl);
        this.loadingOtherImg = false; //显示加载
         this.jinduOtherImgNum = 100;
        if (this.jinduOtherImgNum >= 100) {
					this.jinduOtherImgNum = 100
					setTimeout(() => {
						this.jinduShowOtherImg = false;
					}, 1000) // 一秒后关闭进度条
				}
      });
    },
    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);
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.ruleForm.radioMusic.splice(index, 1);
          this.tongbuliuchen();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "已取消删除"
          });
        });
    },
    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;
      if(this.ruleForm.radioMusic.length<=0){
        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() {
      // console.log('新增',this.ruleForm.radioMusic);
      
      // console.log(this);
      // console.log('ruleForm',this.ruleForm);
      // console.log(this.ruleForm.radioMusic);
      // if(this.ruleForm.radioMusic){
      //   this.ruleForm.radioMusic = [];
      // }
      if(!Array.isArray(this.ruleForm.radioMusic)){
         this.ruleForm.radioMusic = [];
      }
      
      let list = this.ruleForm.radioMusic;
      if(list.length!=0){
        if(list[list.length-1].title==''||list[list.length-1].url==''||list[list.length-1].processId==''){
          this.$message.warning('一次只能添加一条')
          return false;
        }
      }
      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 }) {
    // labeluploadimg(e, file ) {
      // console.log('上传资源图片进度',parseInt(e.percent));
      // 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;
        if (this.jinduImgNum >= 100) {
					this.jinduImgNum = 100
					setTimeout(() => {
						this.jinduShowImg = false;
					}, 1000) // 一秒后关闭进度条
				}
      });
    },
    //音频
    labeluploadmusic({ file }) {
    // labeluploadmusic(e,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.jinduAudioNum = 100;
        this.loadingAudio = false;
        this.musicType = true;
        if (this.jinduAudioNum >= 100) {
					this.jinduAudioNum = 100
					setTimeout(() => {
						this.jinduShowAudio = false;
					}, 1000) // 一秒后关闭进度条
				}
      });
    },
    //视频
    labeluploadvideo({ file }) {
    // labeluploadvideo( e,file ) {
      this.jinduVideoNum = 0;

      this.loading = true;
      this.radioVideo = 1;
      this.jinduShowVideo = true;
  // console.log(file.raw, 'file.rawfile.rawfile.raw');
      // this.jinduVideoNum = 0;
      const formdata = new FormData();
      formdata.append("file", file);
      formdata.append("type", "product");
      uploadFile(formdata).then(res => {
        console.log(res);
        this.videoData.push({
          url: res.data.wjUrl,
          processNames: "",
          // title: res.data.wjDx,
          title: '',
          mediaType: 3,
          sourceType: 1
        });
        this.jinduVideoNum = 100;
        this.loading = false; //取消加载
        this.radioType = true;
         if (this.jinduVideoNum >= 100) {
					this.jinduVideoNum = 100
					setTimeout(() => {
						this.jinduShowVideo = false;
					}, 1000) // 一秒后关闭进度条
				}
      }) 
    },
    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;
      if(this.dialog.title == "新增剧本"){
        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>