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="'musicSheetApplicationExtend/saveBatch'"
        >添加曲目</el-button
      >
      <saveform
        ref="searchForm"
        :model.sync="searchForm"
        inline
        style="margin-top: 20px"
      >
        <el-form-item prop="search">
          <el-input
            v-model="searchForm.search"
            @submit="submit"
            @reset="reset"
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                submit();
              }
            "
            clearable
            placeholder="伴奏编号/伴奏名称"
          />
        </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-button
            @click="onExport"
            type="primary"
            v-permission="'export/exportMusicScoreList'"
            >导出</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="cbsMusicSheetId"
          label="编号"
          width="120px"
        >
          <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.cbsMusicSheetId }}</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="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="categoriesName"
          label="分类"
          width="180px"
        />
        <el-table-column align="center" label="是否收费">
          <template slot-scope="scope">
            {{ scope.row.rankIds ? "收费" : "免费" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            {{ scope.row.showFlag ? "启用" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createUserName" label="上传人" />
        <el-table-column align="center" prop="createTime" label="上传时间" />
        <el-table-column
          align="center"
          width="180px"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="looker(scope.row, 1)"
              >预览</el-button
            >
            <el-button
              v-permission="'musicSheetApplicationExtend/status'"
              type="text"
              @click="changeStatus(scope.row)"
              >{{ scope.row.showFlag ? "停用" : "启用" }}</el-button
            >
            <!-- <el-button
              type="text"
              @click="transcod(scope.row)"
              :disabled="!!scope.row.showFlag"
              v-permission="'sysMusicScore/transcod'"
              >转码</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 :title="title" :visible.sync="visible" width="1100px">
      <EditMusic
        v-if="visible"
        :tree="this.tree"
        @close="visible = false"
        @getList="FetchList"
      />
    </el-dialog>

    <el-dialog title="修改曲谱" :visible.sync="muiscVisible" width="500px">
      <EditExtra
        v-if="muiscVisible"
        :tree="this.tree"
        :detail="detail"
        @close="muiscVisible = false"
        @getList="FetchList"
      />
    </el-dialog>

    <el-dialog
      v-if="lookVisible"
      width="667px"
      class="lookForm"
      :visible.sync="lookVisible"
      title="预览"
    >
      <template slot="title">
        <span style="color: #fff;">预览</span>
        <el-select
          v-model="selectPart"
          placeholder="请选择分谱"
          @change="onPartChange"
        >
          <el-option
            v-for="(item, index) in parts"
            :key="item"
            :label="item"
            :value="index"
          >
          </el-option>
        </el-select>
      </template>
      <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,
  api_sysMusicScoreState,
  queryTree,
  Transcod,
  musicSheetApplicationExtendStatus
} from "./api";
import form from "./modals/form";
import EditMusic from "./modals/edit-music";
import EditExtra from "./modals/edit-extra";
import { vaildTeachingUrl } from "@/utils/validate";
import { getToken } from "@/utils/auth";
import deepClone from "@/helpers/deep-clone/";
import Tooltip from "@/components/Tooltip/index";
import { Export } from "@/utils/downLoadFile";
import qs from "qs";
import cleanDeep from "clean-deep";
export default {
  name: "accompaniment",
  components: {
    saveform,
    pagination,
    "submit-form": form,
    Tooltip,
    EditMusic,
    EditExtra
  },
  data() {
    return {
      parts: [],
      selectPart: 0,
      tabName: "first",
      type: "",
      activeUrl: "",
      songUseType,
      lookVisible: false,
      lookNum: 0,
      lookRow: {},
      accompanyUrl: null, // 预览地址
      accompanyUrl2: null, // 预览地址
      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,
      muiscVisible: 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 + "曲目";
    }
  },
  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;
        this.formatTree(this.tree);

        console.log(this.tree);
      } catch (error) {}
    },
    formatTree(data) {
      for (let i of data) {
        if (
          i.sysMusicScoreCategoriesList &&
          i.sysMusicScoreCategoriesList.length > 0
        ) {
          this.formatTree(i.sysMusicScoreCategoriesList, i);
        } else {
          i.sysMusicScoreCategoriesList = null;
        }
      }
    },
    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();
    },
    getPartListNames(xml) {
      if (!xml) return [];
      const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
      const partList =
        xmlParse
          .getElementsByTagName("part-list")?.[0]
          ?.getElementsByTagName("score-part") || [];
      const partListNames = Array.from(partList).map(
        item => item.getElementsByTagName("part-name")?.[0].textContent || ""
      );
      this.xmlFirstSpeed =
        xmlParse.getElementsByTagName("per-minute")?.[0]?.textContent || "";
      return partListNames.filter(
        text => text.toLocaleUpperCase() !== "COMMON"
      );
    },
    async looker(row, num) {
      try {
        this.selectPart = 0;
        const res = await fetch(row.xmlUrl);
        const text = await res.text();
        this.parts = this.getPartListNames(text);
      } catch (error) {
        this.parts = [];
        this.selectPart = 0;
      }
      let url = location.origin + "/accompany-web/";
      if (/dayaedu.com/.test(location.origin)) {
        url = location.origin + "/accompany/";
      }

      this.accompanyUrl =
        url +
        "?Authorization=" +
        getToken() +
        "&platform=web" +
        "#/detail/" +
        row.id +
        "?part-index=" +
        this.selectPart;
      this.lookVisible = true;
      this.lookNum = num;
      this.lookRow = row;

      // 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'
      //   }
      // })
    },
    onPartChange(val) {
      let url = location.origin + "/accompany-web/";
      if (/dayaedu.com/.test(location.origin)) {
        url = location.origin + "/accompany/";
      }
      //         url +
      this.accompanyUrl =
        url +
        "?Authorization=" +
        getToken() +
        "&platform=web&isOpenMetronome=" +
        this.lookNum +
        "&t=" +
        new Date().getTime() +
        "#/detail/" +
        this.lookRow.id +
        "?part-index=" +
        val;
    },
    async changeStatus(row) {
      try {
        let status = row.showFlag ? "停用" : "启用";
        await this.$confirm("是否确认" + status + "此曲目?", "提示", {
          type: "warning"
        });
        await api_sysMusicScoreState(row.id);
        this.$message.success(status + "成功");
        this.FetchList();
      } catch (error) {}
    },
    edit(row) {
      this.detail = row;
      this.muiscVisible = true;
    },
    async transcod(row) {
      try {
        const res = await Transcod(row);
        console.log(res);
      } catch (error) {}
    },
    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;
    },
    onExport() {
      let { categoriesId, organId, ...search } = deepClone(this.searchForm);
      Export(
        this,
        {
          url: "/api-web/export/exportMusicScoreList",
          params: {
            ...search,
            categoriesId:
              categoriesId && categoriesId.length > 0
                ? categoriesId.pop()
                : null
          },
          fileName: `教学伴奏导出.xls`,
          method: "get"
        },
        "确定导出教学伴奏"
      );
    }
  }
};
</script>
<style lang="less" scoped>
.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;
  }
}
::v-deep .el-dropdown {
  margin-right: 10px;
  color: #14928a;
}
.remark {
  display: inline;
  overflow: hidden;
  white-space: pre;
}
.lookForm {
  ::v-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>