dy-admin-manager/src/views/accompaniment/index.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      教学伴奏
    </h2>
    <div class="m-core">
      <el-button
        @click="open('COMMON')"
        type="primary"
        v-permission="'sysMusicScore/add'"
        >添加公用伴奏</el-button
      >
      <!-- <el-button @click="open('PERSON')" type="primary" v-permission="'sysMusicScore/add'">添加个人伴奏</el-button> -->
      <saveform
        ref="searchForm"
        :model.sync="searchForm"
        inline
        style="margin-top: 20px"
      >
        <el-form-item prop="search">
          <el-input
            v-model="searchForm.search"
            clearable
            placeholder="伴奏编号/伴奏名称"
          />
        </el-form-item>
        <!-- <el-form-item prop="organId">
          <el-select
            class="multiple"
            v-model.trim="searchForm.organId"
            filterable
            multiple
            collapse-tags
            clearable
            placeholder="请选择分部"
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="type">
          <el-select
            v-model="searchForm.type"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="(item, key) in songUseType"
              :key="key"
              :label="item"
              :value="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="clientType">
          <el-select
            v-model="searchForm.clientType"
            clearable
            filterable
            placeholder="请选择客户端类型"
          >
            <el-option value="NETWORK_ROOM" label="网络教室"></el-option>
            <el-option value="SMART_PRACTICE" label="智能陪练"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="categoriesId">
          <el-cascader
            ref="myCascader"
            popper-class="myCascader"
            @change="changeCategor"
            :show-all-levels="true"
             clearable
            v-model="searchForm.categoriesId"
            style="width: 100%"
            :options="tree"
            placeholder="请选择分类"

            :props="treeProps"
          ></el-cascader>
        </el-form-item>
        <el-form-item prop="subjectId">
          <el-select
            v-model="searchForm.subjectId"
            clearable
            placeholder="请选择声部"
          >
            <el-option
              v-for="item in selects.subjects"
              :value="item.id"
              :label="item.name"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="rankType">
          <el-select
            v-model="searchForm.rankType"
            clearable
            filterable
            placeholder="请选择是否收费"
          >
            <el-option :value="0" label="免费"></el-option>
            <el-option :value="1" label="收费"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="showFlag">
          <el-select
            v-model="searchForm.showFlag"
            clearable
            filterable
            placeholder="请选择伴奏状态"
          >
            <el-option :value="1" label="启用"></el-option>
            <el-option :value="0" label="停用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit" type="primary">搜索</el-button>
          <el-button @click="reset" type="danger">重置</el-button>
        </el-form-item>
      </saveform>
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column align="center" prop="id" label="编号" width="80px">
          <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.id }}</copy-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="名称" width="180px">
          <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.name }}</copy-text>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="organName"
          label="所属分部"
          width="180px"
        >
          <template slot-scope="scope">
            <div>
              <Tooltip :content="scope.row.organName" />
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="subjectName"
          label="所属声部"
          width="180px"
        >
          <template slot-scope="scope">
            <div>
              <Tooltip :content="scope.row.subjectName" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型">
          <template slot-scope="scope">
            {{ scope.row.type | songUseTypeFormat }}
          </template>
        </el-table-column>

        <!--  <el-table-column
          align="center"
          prop="speed"
          label="速度"
        /> -->
        <el-table-column
          align="center"
          prop="categoriesName"
          label="分类"
          width="180px"
        />
        <el-table-column align="center" label="是否收费" width="180px">
          <template slot-scope="scope">
            {{ scope.row.rankIds ? "收费" : "免费" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="节拍器" width="180px">
          <template slot-scope="scope">
            {{ scope.row.isOpenMetronome ? "播放" : "不播放" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="subjectNames"
          label="是否上传伴奏"
          width="120px"
        >
          <template slot-scope="scope">
            <div>
              <p>
                含节拍器:{{ scope.row.accompanimentMetronomeUrl ? "是" : "否" }}
              </p>
              <p>不含节拍器:{{ scope.row.accompanimentUrl ? "是" : "否" }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="伴奏状态" width="180px">
          <template slot-scope="scope">
            {{ scope.row.showFlag ? "启用" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="categoriesName"
          label="客户端类型"
          width="180px"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.clientType | clientType }}
            </div>
          </template>
        </el-table-column>
        <!-- clientType -->
        <el-table-column
          align="center"
          prop="createUserName"
          label="上传人"
          width="180px"
        />
        <el-table-column
          align="center"
          prop="createTime"
          label="上传时间"
          width="180px"
        />
        <el-table-column
          align="center"
          width="180px"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              @click="looker(scope.row)"
              :disabled="
                (scope.row.isOpenMetronome
                  ? !scope.row.url
                  : !scope.row.metronomeUrl) ||
                scope.row.clientType != 'SMART_PRACTICE'
              "
              >预览</el-button
            > -->
            <el-dropdown :disabled="(scope.row.isOpenMetronome ? !scope.row.url : !scope.row.metronomeUrl) || scope.row.clientType != 'SMART_PRACTICE'">
                <span class="el-dropdown-link">
                  预览<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" @click="looker(scope.row, 1)" >系统自带节拍器</el-button></el-dropdown-item>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="looker(scope.row, 0)" >原音自带节拍器</el-button></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            <el-button
              type="text"
              @click="player(scope.row)"
              :disabled="!scope.row.url"
              >播放</el-button
            >
            <el-button type="text" @click="changeStatus(scope.row)">{{
              scope.row.showFlag ? "停用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              @click="edit(scope.row)"
              :disabled="!!scope.row.showFlag"
              v-permission="'sysMusicScore/update'"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="remove(scope.row)"
              v-permission="'sysMusicScore/del'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="FetchList"
      />
    </div>
    <el-dialog
      v-if="audioVisible"
      width="400px"
      :visible.sync="audioVisible"
      title="播放伴奏"
    >
      <audio style="display: block; margin: auto" controls :src="activeUrl" />
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="740px"
      v-if="visible"
    >
      <submit-form
        :detail="detail"
        :type="type"
        @submited="FetchList"
        @close="visible = false"
      />
    </el-dialog>
    <el-dialog
      v-if="lookVisible"
      width="667px"
      class="lookForm"
      :visible.sync="lookVisible"
      title="预览"
    >
      <iframe
        id="iframe"
        v-if="lookVisible"
        style="width: 667px; height: 386px"
        ref="iframe"
        :src="accompanyUrl"
      />
      <div class="iframe_back"></div>
      <div class="iframe_help"></div>
      <div class="iframe_header_back"></div>
    </el-dialog>
  </div>
</template>
<script>
import saveform from "@/components/save-form";
import pagination from "@/components/Pagination/index";
import { songUseType } from "@/constant";
import { QueryPage, Del, Show, queryTree } from "./api";
import form from "./modals/form";
import { vaildTeachingUrl } from "@/utils/validate";
import { getToken } from "@/utils/auth";
import deepClone from "@/helpers/deep-clone/";
import Tooltip from "@/components/Tooltip/index";
export default {
  name: "accompaniment",
  components: {
    saveform,
    pagination,
    "submit-form": form,
    Tooltip,
  },
  data() {
    return {
      tabName: 'first',
      type: "",
      activeUrl: "",
      songUseType,
      lookVisible: false,
      accompanyUrl: null, // 预览地址
      accompanyUrl2: null, // 预览地址
      audioVisible: false,
      tableList: [],
      searchForm: {
        search: "",
        type: "",
        subjectId: "",
        categoriesId: [],
        clientType: "",
        rankType: null,
        showFlag: null,
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      detail: null,
      visible: false,
      tree: [],
      treeProps: {
        value: "id",
        label: "name",
        children: "sysMusicScoreCategoriesList",
        checkStrictly: true,
        expandTrigger: "hover",
      },
    };
  },
  computed: {
    title() {
      const t1 = this.detail ? "修改" : "添加";
      let t2 = this.type === "COMMON" ? "公用" : "个人";
      if (this.detail) {
        t2 = this.detail.type === "COMMON" ? "公用" : "个人";
      }
      return t1 + t2 + "伴奏";
    },
  },
  async mounted() {
    const { query, params } = this.$route;
      await this.FetchTree();
    if (params.categoriesId) {
      // console.log(this.tree)
      // console.log(this.formatParentId(params.categoriesId, this.tree))
      this.searchForm.categoriesId = this.formatParentId(params.categoriesId, this.tree);
    }
    this.$store.dispatch("setSubjects");
    this.$store.dispatch("setBranchs");
    await this.FetchList();

    // 点击Cascader  label选中
  },
  methods: {
    formatParentId(id, list, ids = []) {
      for (const item of list) {
        if (item.sysMusicScoreCategoriesList) {
          const cIds = this.formatParentId(
            id,
            item.sysMusicScoreCategoriesList,
            [...ids, item.id]
          );
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
      }
      return ids;
    },
    async FetchTree() {
      try {
        const res = await queryTree();
        this.tree = res.data;
      } catch (error) {}
    },
    async FetchList() {
      try {
        let { categoriesId, organId, ...search } = deepClone(this.searchForm);
        const res = await QueryPage({
          ...search,
          categoriesId:
            categoriesId && categoriesId.length > 0 ? categoriesId.pop() : null,
          page: this.rules.page,
          rows: this.rules.limit,
        });
        this.tableList = res.data.rows;
        this.$set(this.rules, "total", res.data.total);
      } catch (error) {}
    },
    submit() {
      this.$set(this.rules, "page", 1);
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.FetchList();
        }
      });
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.FetchList();
    },
    looker(row, num) {
      this.accompanyUrl =
        vaildTeachingUrl() +
        "/accompany?Authorization=" +
        getToken() +
        "&platform=web&isOpenMetronome="+ num +"#/detail/" +
        row.id;
      this.lookVisible = true;


      // this.$nextTick(() => {
      //   console.log(this.$refs.iframe)
      //   let iframe = this.$refs.iframe
      //   iframe.onload = function() {
      //     console.log('完成', iframe)
      //     iframe.contentWindow.document.querySelector('#tips-step-0').style.display = 'none'
      //   }
      // })
    },
    player(row) {
      this.activeUrl = row.url;
      this.audioVisible = true;
    },
    async changeStatus(row) {
      try {
        let status = row.showFlag ? "停用" : "启用";
        await this.$confirm("是否确认" + status + "此伴奏?", "提示", {
          type: "warning",
        });
        await Show({
          sysMusicScoreId: row.id,
          showFlag: row.showFlag ? 0 : 1,
        });
        this.$message.success(status + "成功");
        this.FetchList();
      } catch (error) {}
    },
    edit(row) {
      this.detail = row;
      this.visible = true;
    },
    open(type) {
      this.type = type;
      this.detail = null;
      this.visible = true;
    },
    async remove(row) {
      try {
        await this.$confirm("是否确认删除此伴奏?", "提示", {
          type: "warning",
        });
        await Del(row.id);
        this.$message.success("删除成功");
        this.FetchList();
      } catch (error) {}
    },
    changeCategor(e) {
      this.$refs.myCascader.dropDownVisible = false;
    },
  },
};
</script>
<style lang="less">
.myCascader {
  .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .el-radio__input {
    visibility: hidden;
  }
  .el-cascader-node__postfix {
    top: 10px;
  }
}
</style>
<style lang="less" scoped>
/deep/.el-dropdown {
  margin-right: 10px;
  color: #14928A;
}
.remark {
  display: inline;
  overflow: hidden;
  white-space: pre;
}
.lookForm {
  /deep/.el-dialog__body {
    padding: 0;
  }
}
.iframe_back {
  width: 195px;
  height: 45px;
  position: absolute;
  bottom: 50px;
  background: transparent;
  left: 50%;
  z-index: 99;
  margin-left: -100px;
}
.iframe_help {
  position: absolute;
  background: transparent;
  width: 50px;
  height: 120px;
  top: 50%;
  right: 0;
  margin-top: -35px;
}
.iframe_header_back {
  background: transparent;
  width: 225px;
  height: 50px;
  position: absolute;
  top: 65px;
  left: 20px;
}
</style>