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>
    <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)"
              >查看</el-button
            >
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
              >编辑</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)"
              >删除</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 :title="dialog.title" :visible.sync="dialog.Visible" width="1000px">
      <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 v-model="ruleForm.title" style="width:300px;" />
        </el-form-item>
        <el-form-item label="工作室:" prop="studioName" style="width:45%">
          <el-input v-model="ruleForm.studioName" style="width:300px;" />
        </el-form-item>
        <el-form-item label="标签:" prop="labelName" style="width:100%">
          <el-input v-model="ruleForm.labelName" style="width:300px;" />
        </el-form-item>
        <h3 class="form-title">剧本图片</h3>
        <el-form-item label="封面" prop="cover">
          <el-upload
            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%">
          <el-upload
            action
            class="avatar-uploader"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="changeImgs"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <h3 class="form-title">剧本简介</h3>
        <el-form-item label="简介" style="width:100%">
          <!-- <el-input
            v-model="ruleForm.desc"
            style="width:500px"
            rows="10"
            type="textarea"
          /> -->
          <Tinymce
            ref="editor"
            v-model="ruleForm.introduction"
            :height="400"
            :width="700"
          />
        </el-form-item>
        <h3 class="form-title">开本流程</h3>
        <el-table
          v-if="type != 'view'"
          :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="流程标题">
            <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="流程编号">
            <template slot-scope="scope">
              <el-input v-model="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="排序">
            <template slot-scope="scope">
              <el-input v-model="ruleForm.processesList[scope.$index].sort" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="Del(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-if="type == 'view'"
          :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="排序">
          </el-table-column>
        </el-table>
        <div style="margin-top:15px;" v-if="type != 'view'">
          <el-button
            type="success"
            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 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 v-if="radioImg == 1">
          <div v-for="(item, i) in imgData" :key="i" 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, i, 'img')"
                  style="font-size: 20px; padding-left: 30px"
                ></i>
              </p>
            </div>
            <div class="sz_container" style="text-align:center">
              <span>{{ item.processName }}</span>
            </div>
            <div class="sz_container" style="text-align:center">
              <el-button size="mini" type="text" @click="setLc(item, i, 'img')"
                >关联流程</el-button
              >
            </div>
          </div>
          <el-upload
            v-if="type != 'view'"
            class="avatar-uploader"
            style="float:left;margin-left:60px"
            action
            list-type="picture-card"
            :show-file-list="false"
            :http-request="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-form-item
          v-if="radioImg == 2"
          style="width: 100%;"
          class="urlTable"
        >
          <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="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 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="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">
                {{ mapForChannel(scope.row.processId) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top:15px;" v-if="type != 'view'">
            <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 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>
            <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.processName }}</span>
            </div>
            <div class="sz_container" style="text-align:center">
              <el-button
                size="mini"
                type="text"
                @click="setLc(item, i, 'music')"
                >关联流程</el-button
              >
            </div>
          </div>
          <el-upload
            v-if="type != 'view'"
            class="avatar-uploader"
            style="float:left;margin-left:60px"
            action
            list-type="picture-card"
            :show-file-list="false"
            :http-request="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-form-item
          v-if="radioMusic == 2"
          style="width: 100%;"
          class="urlTable"
        >
          <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">
                <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="资源标题" />
            <el-table-column align="center" property="url" label="资源URL" />
            <el-table-column
              align="center"
              property="processId"
              label="关联流程"
            >
              <template slot-scope="scope">
                {{ mapForChannel(scope.row.processId) }}
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top:15px;" v-if="type != 'view'">
            <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 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 v-if="radioVideo == 1">
          <div v-for="(item, i) in videoData" :key="i" class="imgdata">
            <el-image
              style="width: 146px; height: 146px"
              :src="item.url"
              fit="fill"
            >
            </el-image>
            <div class="imgdialog">
              <p>
                <i class="el-icon-zoom-in" style="font-size: 20px"></i>
                <i
                  class="el-icon-delete"
                  @click="deldialogimg(item, i, 'video')"
                  style="font-size: 20px; padding-left: 30px"
                ></i>
              </p>
            </div>
            <div class="sz_container" style="text-align:center">
              <span>{{ item.processName }}</span>
            </div>
            <div class="sz_container" style="text-align:center">
              <el-button
                size="mini"
                type="text"
                @click="setLc(item, i, 'video')"
                >关联流程</el-button
              >
            </div>
          </div>
          <el-upload
            v-if="type != 'view'"
            class="avatar-uploader"
            style="float:left;margin-left:60px"
            action
            list-type="picture-card"
            :show-file-list="false"
            :http-request="labeluploadvideo"
          >
            <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-form-item
          v-if="radioVideo == 2"
          style="width: 100%;"
          class="urlTable"
        >
          <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="资源标题">
              <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 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="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">
                {{ mapForChannel(scope.row.processId) }}
              </template>
            </el-table-column>
          </el-table>
          <div v-if="type != 'view'" 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="dialog.Visible = false">取 消</el-button>
        <el-button v-if="type != 'view'" 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="请选择流程"
          >
            <el-option
              v-for="item in ruleForm.processesList"
              :key="item.value"
              :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";
const baseUrl = process.env.VUE_APP_BASE_API;
export default {
  components: { Tinymce },
  data() {
    return {
      baseUrl,
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        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" }]
      },
      dialog: {
        title: "新增剧本",
        Visible: false
      },
      ruleForm: {
        processesList: [],
        imgUrl: "",
        imgUrls: [],
        radioImg: [],
        radioMusic: [],
        radioVideo: [],
        resourcesList: []
      },
      dialogVisible: false,
      active: "",
      imageUrl: "",
      total: 0,
      dialogVisible: false,
      dialogImageUrl: "",
      dataImg: [],
      lcData: [],
      radioImg: "1",
      radioMusic: "1",
      radioVideo: "1",
      type: "add",
      imgData: [],
      musicData: [],
      videoData: [],
      processId: [],
      process: {
        Visible: false
      },
      list: {},
      typeUrl: "",
      imgType: false,
      musicType: false,
      videoType: false,
      imgIndex: "",
      musicIdnex: "",
      videoIndex: "",
      dataList: {}
    };
  },
  mounted() {
    this.queryList();
    this.queryFindList();
  },
  methods: {
    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;
          }
        }
      }
    },
    //获取列表
    async queryList() {
      this.loading = true;
      try {
        let res = await queryJbInfo(this.queryParams);
        console.log(res);
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      } catch (err) {
        console.log(err);
      }
    },
    //搜索
    search() {
      this.queryList();
    },
    //重置
    refresh() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        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({});
        // console.log(res.data, "流程列表");
        this.lcData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //获取详情
    async queryListDetail(id) {
      try {
        this.ruleForm = {
          studioName: "",
          title: "",
          labelName: "",
          imgUrl: "",
          cover: "",
          introduction: "",
          processesList: [],
          imgUrl: "",
          radioImg: [],
          radioMusic: [],
          radioVideo: [],
          resourcesList: []
        };
        let res = await queryJbDetail(id);
        console.log(res, "详情");
        this.ruleForm = res.data;
        res.data.resourcesList.map(n => {
          var a = [];
          var b = [];
          var c = [];
          if (n.mediaType == 1 && n.sourceType == 2) {
            a.push(n);
            this.ruleForm.radioImg = a.map(n => {
              return {
                mediaType: n.mediaType,
                sourceType: n.sourceType,
                title: n.title,
                url: n.url,
                processId: n.processId.split(",")
              };
            });
            this.radioImg = n.sourceType;
          } else if (n.mediaType == 1 && n.sourceType == 1) {
            a.push(n);
            var tmp = []
            this.imgData = a
            
            this.radioImg = n.sourceType;
          }
          if (n.mediaType == 2 && n.sourceType == 1) {
            b.push(n);
            this.musicData = b;
            this.radioMusic = n.sourceType;
          } else if (n.mediaType == 2 && n.sourceType == 2) {
            console.log("进来了1");
            b.push(n);
            this.ruleForm.radioMusic = b.map(n => {
              return {
                mediaType: n.mediaType,
                sourceType: n.sourceType,
                title: n.title,
                url: n.url,
                processId: n.processId.split(",")
              };
            });
            this.radioMusic = n.sourceType;
          }
          if (n.mediaType == 3 && n.sourceType == 1) {
            c.push(n);
            this.videoData = c;
            this.radioVideo = n.sourceType;
          } else 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,
                processId: n.processId.split(",")
              };
            });
            this.radioVideo = n.sourceType;
          }
        });
        console.log(
          this.ruleForm,
          this.musicData,
          this.imgData,
          this.videoData,
          "处理后详情"
        );
      } catch (err) {
        console.log(err);
      }
    },
    // 新增
    handleAdd() {
      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;
      this.dialog.Visible = true;
      this.type = "add";
      this.dialog.title = "新增剧本";
    },
    async subMit() {
      console.log(this.imgType, this.musicType, this.videoType);
      console.log(this.radioImg, this.radioMusic, this.radioVideo);
      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 list = [];
      data.map(n => {
        if (n.url != "") {
          list.push(n);
        }
      });
      this.ruleForm.resourcesList = list.map(n => {
        return {
          mediaType: n.mediaType,
          sourceType: n.sourceType,
          title: n.title,
          url: n.url,
          processId: n.processId.join(",")
        };
      });
      console.log(this.imgData, "有变化吗");
      console.log(this.ruleForm, "参数");
      try {
        this.$refs["ruleForm"].validate(async valid => {
          if (valid) {
            if (this.type == "add") {
              var res = await addJbInfo(this.ruleForm);
            } 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) {
        console.log(err);
      }
    },
    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.dialog.Visible = true;
      this.type = "edit";
      this.dialog.title = "编辑剧本";
    },
    // 查看
    handleView(row) {
      this.queryListDetail(row.id);
      this.type = "view";
      this.dialog.Visible = true;
    },
    // 删除
    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) {
        console.log(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);
        console.log(this.ruleForm.cover);
      } catch (err) {
        console.log(err);
      }
    },
    async changeImgs(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);
        console.log(res, 142131);
        this.dataImg.push(res.data.wjUrl);
      } catch (err) {
        console.log(err);
      }
    },
    beforeAvatarUpload(file) {
      console.log(file, 41231);
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 开本流程新增
    handleAddK() {
      this.ruleForm.processesList.push({
        title: "",
        code: "",
        introduction: "",
        sort: ""
      });
    },
    // 开本流程删除
    Del(index) {
      this.ruleForm.processesList.splice(index, 1);
    },
    // 图片预览
    dialogimg(e) {
      console.log(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);
    },
    // 图片删除
    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
      });
    },
    handleAddMusic() {
      this.ruleForm.radioMusic.push({
        title: "",
        url: "",
        processId: [],
        mediaType: 2,
        sourceType: this.radioMusic
      });
    },
    handleAddVideo() {
      this.ruleForm.radioVideo.push({
        title: "",
        url: "",
        processId: [],
        mediaType: 3,
        sourceType: this.radioVideo
      });
    },
    // 上传资源蹄片
    labeluploadimg({ file }) {
      const formdata = new FormData();
      formdata.append("file", file);
      formdata.append("type", "product");
      uploadFile(formdata).then(res => {
        this.imgData.push({
          url: res.data.wjUrl,
          processName: "",
          title: res.data.wjDx
        });
        this.imgType = true;
      });
    },
    labeluploadmusic({ file }) {
      const formdata = new FormData();
      formdata.append("file", file);
      formdata.append("type", "product");
      uploadFile(formdata).then(res => {
        this.musicData.push({
          url: res.data.wjUrl,
          processName: "",
          title: res.data.wjDx
        });
        this.musicType = true;
      });
    },
    labeluploadvideo({ file }) {
      const formdata = new FormData();
      formdata.append("file", file);
      formdata.append("type", "product");
      uploadFile(formdata).then(res => {
        this.videoData.push({
          url: res.data.wjUrl,
          processName: "",
          title: res.data.wjDx
        });
        this.radioType = true;
      });
    },
    // 图片删除
    deldialogimg(item, index, type) {
      console.log(index, type);
      if (type == "img") {
        this.imgData.splice(index, 1);
      }
      if (type == "music") {
        this.musicData.splice(index, 1);
      }
      if (type == "video") {
        this.videoData.splice(index, 1);
      }
      console.log(item);
      delFile({ wjUrl: item.url }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
        }
      });
    },
    //关联流程
    setLc(item, i, type) {
      console.log(item, i, this.imgData);
      if (this.ruleForm.processesList.length == 0) {
        this.$message({
          message: "请新建流程",
          type: "error"
        });
        return false;
      }
      if (type == "img") {
        this.imgIndex = i;
      } else if (type == "music") {
        this.musicIndex = i;
      } else if (type == "video") {
        this.videoIndex = i;
      }
      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].processName = tmp.join(",");
        this.imgData[this.imgIndex].processId = this.processId;
        this.imgData[this.imgIndex].mediaType = 1;
        this.imgData[this.imgIndex].sourceType = this.radioImg;
        console.log(this.imgData, "处理后img数据");
      }
      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].processName = tmp.join(",");
        this.musicData[this.musicIndex].processId = this.processId;
        this.musicData[this.musicIndex].mediaType = 2;
        this.musicData[this.musicIndex].sourceType = this.radioMusic;
      }
      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].processName = tmp.join(",");
        this.videoData[this.videoIndex].processId = this.processId;
        this.videoData[this.videoIndex].mediaType = 3;
        this.videoData[this.videoIndex].sourceType = this.radioVideo;
      }
    }
  }
};
</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;
}
.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;
}
</style>