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="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 v-model="searchForm.categoriesId"
                    style="width:100%"
                    :options="tree"
                    placeholder="请选择分类"

                    clearable
                    :show-all-levels="true"
                    :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="编号">
          <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="type" label="类型">
          <template slot-scope="scope">
            {{ scope.row.type | songUseTypeFormat }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="subjectNames"
          label="声部"
          width="180px"
        >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.subjectNames">
              <div class="remark">{{scope.row.subjectNames}}</div>
            </el-tooltip>
          </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"
          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.url || scope.row.clientType != 'SMART_PRACTICE'"
              >预览</el-button
            >
            <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/'
export default {
  name: "accompaniment",
  components: {
    saveform,
    pagination,
    "submit-form": form,
  },
  data() {
    return {
      type: "",
      activeUrl: "",
      songUseType,
      lookVisible: false,
      accompanyUrl: null, // 预览地址
      audioVisible: false,
      tableList: [],
      searchForm: {
        search: "",
        type: "",
        subjectId: "",
        categoriesId: null,
        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
      }
    };
  },
  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;
      if(params.categoriesId){
       this.searchForm.categoriesId = [params.categoriesId];
    }
    this.$store.dispatch("setSubjects");
    await this.FetchTree()
    await this.FetchList();
  },
  methods: {
    async FetchTree() {
      try {
        const res = await queryTree()
        this.tree = res.data
      } catch (error) {

      }
    },
    async FetchList() {
      try {
        let { categoriesId, ...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) {
      this.accompanyUrl = vaildTeachingUrl() + '/accompany?Authorization=' + getToken() + '&platform=web#/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) {}
    },
  },
};
</script>
<style lang="less" scoped>
.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>