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="'sysExamSong/add'">添加公用伴奏</el-button>
      <!-- <el-button @click="open('PERSON')" type="primary" v-permission="'sysExamSong/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="subjectId">
          <el-select v-model="searchForm.subjectId" clearable filterable 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-button @click="submit" type="primary">搜索</el-button>
        <el-button @click="reset" type="danger">重置</el-button>
      </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>
        <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="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="player(scope.row)"
              :disabled="!scope.row.url"
            >播放</el-button>
            <el-button type="text"
              @click="edit(scope.row)"
              v-permission="'sysExamSong/update'"
            >修改</el-button>
            <el-button type="text"
              @click="remove(scope.row)"
              v-permission="'sysExamSong/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 width="400px" :visible.sync="audioVisible" title="播放伴奏">
      <audio v-if="audioVisible" style="display: block; margin: auto" controls :src="activeUrl"/>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="500px"
    >
      <submit-form
        v-if="visible"
        :detail="detail"
        :type="type"
        @submited="FetchList"
        @close="visible = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import saveform from '@/components/save-form'
import pagination from '@/components/Pagination/index'
import { songUseType } from '@/constant'
import { QueryPage, Del } from './api'
import form from './modals/form'
export default {
  name: 'accompaniment',
  components: {
    saveform,
    pagination,
    'submit-form': form
  },
  data() {
    return {
      type: '',
      activeUrl: '',
      songUseType,
      audioVisible: false,
      tableList: [],
      searchForm: {
        search: '',
        type: '',
        subjectId: ''
      },
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
      detail: null,
      visible: false,
    }
  },
  computed: {
    title() {
      const t1 = this.detail ? '修改' : '添加'
      let t2 = this.type === 'COMMON' ? '公用' : '个人'
      if (this.detail) {
        t2 = this.detail.type === 'COMMON' ? '公用' : '个人'
      }
      return t1 + t2 + '伴奏'
    },
  },
  mounted() {
    this.$store.dispatch('setSubjects')
    this.FetchList()
  },
  methods: {
    async FetchList() {
      try {
        const res = await QueryPage({
          ...this.searchForm,
          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()
    },
    player(row) {
      this.activeUrl = row.url
      this.audioVisible = true
    },
    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;
  }
</style>