完成伴奏部分

src/constant/index.js

@@ -32,3 +32,8 @@ export const saleType = {
   SCHOOL_BUY: '学校采购',
   OTHER: '其他',
 }
+
+export const songUseType = {
+  PERSON: '个人',
+  COMMON: '公用',
+}

src/router/index.js

@@ -146,6 +146,7 @@ export const asyncRoutes = {
   main: () => import('@/views/main/index'),
   // 内容管理
   contentManager: () => import('@/views/contentManager/index'),
+  accompaniment: () => import('@/views/accompaniment'),
   contentOperation: () => import('@/views/contentManager/contentOperation'),
   // 系统日志
   journal: () => import('@/views/workBenchManager/journal/index'),

src/router/notKeepAliveList.js

@@ -1,4 +1,5 @@
 export default [
   '/setSilder/save-form',
-  '/operateManager/HumanResources'
+  '/contentManager/accompaniment',
+  // '/operateManager/HumanResources'
 ]

src/store/index.js

@@ -7,6 +7,7 @@ import user from './modules/user'
 import permission from './modules/permission'
 import buildTeam from './modules/buildTeam'
 import tagsView from './modules/tagsView'
+import selects from './modules/selects'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     permission,
     buildTeam,
-    tagsView
+    tagsView,
+    selects
   },
   getters
 })

src/store/modules/selects.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-empty */
+import { branchQueryPage } from '@/api/specialSetting'
+import { getSubject } from '@/api/buildTeam'
+
+/**
+ *
+ * 为避免重复请求全局参数，将需要使用的全局参数放到vuex中缓存
+ *
+ * 使用:
+ *
+ * 按照需要直接使用 this.$store.dispatch('action', force: Bool 是否强制刷新)
+ *
+ * 直接从this.$store.state.name 中获取数据
+ */
+
+export default {
+  state: {
+    branchs: [],
+    subjects: [],
+  },
+  mutations: {
+    commit_branchs: (state, branchs) => {
+      state.branchs = branchs
+    },
+    commit_subjects: (state, subjects) => {
+      state.subjects = subjects
+    },
+  },
+  actions: {
+    async setBranchs({ commit, state }, force) {
+      if (!state.branchs.length || force === true) {
+        try {
+          const res = await branchQueryPage({rows: 9999})
+          commit('commit_branchs', res.data.rows)
+        } catch (error) {}
+      }
+    },
+    async setSubject({ commit, state }, force) {
+      if (!state.subjects.length || force === true) {
+        try {
+          const res = await getSubject({rows: 9999})
+          commit('commit_subjects', res.data)
+        } catch (error) {}
+      }
+    }
+  }
+}

src/utils/vueFilter.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import dayjs from 'dayjs'
 import numeral from 'numeral'
-import { feeProject, feeType, saleType } from '../constant'
+import { feeProject, feeType, saleType, songUseType } from '../constant'
 
 // 合并数组
 Vue.filter('joinArray', (value, type) => {
@@ -661,3 +661,7 @@ Vue.filter('receiveFormat', value => {
   }
   return template[value]
 })
+
+Vue.filter('songUseTypeFormat', value => {
+  return songUseType[value]
+})

src/views/accompaniment/api.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request2'
+
+export const QueryPage = params => {
+  return request({
+    url: '/api-web/sysExamSong/queryPage',
+    data: {},
+    params,
+    requestType: 'form'
+  })
+}
+
+export const Add = data => {
+  return request({
+    url: '/api-web/sysExamSong/add',
+    method: 'post',
+    data,
+    params: {},
+  })
+}
+
+export const Update = data => {
+  return request({
+    url: '/api-web/sysExamSong/update',
+    method: 'post',
+    data,
+    params: {},
+  })
+}
+
+export const Del = id => {
+  return request({
+    url: '/api-web/sysExamSong/del/' + id,
+    method: 'post',
+    data: {},
+    params: {},
+    requestType: 'form'
+  })
+}

src/views/accompaniment/index.vue

@@ -0,0 +1,238 @@
+<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 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="伴奏编号"
+        />
+        <el-table-column
+          align="center"
+          prop="name"
+          label="伴奏名称"
+          width="180px"
+        />
+        <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
+        :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: {
+    selects() {
+      return this.$store.state.selects
+    },
+    title() {
+      const t1 = this.detail ? '修改' : '添加'
+      const t2 = this.type === 'COMMON' ? '公用' : '个人'
+      return t1 + t2 + '伴奏'
+    },
+  },
+  mounted() {
+    this.$store.dispatch('setSubject')
+    this.FetchList()
+  },
+  methods: {
+    async FetchList() {
+      try {
+        const res = await QueryPage({
+          ...this.searchForm,
+          page: this.rules.page,
+          limit: 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.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>

src/views/accompaniment/modals/form.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item
+        prop="name"
+        label="伴奏名称"
+        :rules="[{required: true, message: '请输入伴奏名称'}]"
+      >
+        <el-input placeholder="请输入伴奏名称" v-model="form.name"/>
+      </el-form-item>
+      <el-form-item
+        prop="subjectIds"
+        label="伴奏声部"
+        :rules="[{required: true, message: '请选择伴奏声部'}]"
+      >
+        <el-select style="width: 100%!important;" collapse-tags multiple v-model="form.subjectIds" placeholder="请选择伴奏声部">
+          <el-option v-for="item in selects.subjects" :value="String(item.id)" :label="item.name" :key="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        prop="speed"
+        label="伴奏速度"
+        :rules="[{required: true, message: '请输入伴奏速度'}]"
+      >
+        <el-input type="number" placeholder="请输入伴奏速度" v-model="form.speed"/>
+      </el-form-item>
+      <el-form-item
+        label="伴奏文件"
+        prop="url"
+        :rules="[{required: true, message: '请选择伴奏文件'}]"
+      >
+        <el-upload
+          action="/api-web/uploadFile"
+          :headers="headers"
+          :on-success="success"
+          :on-remove="remove"
+          :limit="1"
+          :file-list="filelist"
+          accept=".mp3, .aac">
+          <el-button size="small" type="primary" plain>点击上传</el-button>
+          <div slot="tip" class="el-upload__tip">仅支持上传 mp3/aac 格式音频文件</div>
+        </el-upload>
+      </el-form-item>
+      <div class="btns">
+        <el-button type="primary" @click="submit">提交</el-button>
+        <el-button @click="$listeners.close">取消</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import { getToken } from "@/utils/auth"
+import { Add, Update } from '../api'
+export default {
+  props: ['detail', 'type'],
+  data() {
+    return {
+      headers: {
+        Authorization: getToken()
+      },
+      filelist: [],
+      form: {
+        name: '',
+        subjectIds: [],
+        speed: '',
+        url: ''
+      }
+    }
+  },
+  computed: {
+    selects() {
+      return this.$store.state.selects
+    }
+  },
+  mounted() {
+    this.$store.dispatch('setSubject')
+    if (this.detail) {
+      for (const key in this.form) {
+        if (this.form.hasOwnProperty(key)) {
+          if (key === 'subjectIds') {
+            this.$set(this.form, 'subjectIds', (this.detail[key] || '').split(','))
+          } else {
+            this.$set(this.form, key, this.detail[key])
+          }
+        }
+      }
+      this.filelist = [{
+        name: this.detail.url,
+        url: this.detail.url,
+      }]
+    }
+  },
+  methods: {
+    remove() {
+      this.filelist = []
+      this.$set(this.form, 'url', '')
+    },
+    success(res) {
+      if (res.code == 200) {
+        this.filelist = [{
+          name: res.data.url,
+          url: res.data.url,
+        }]
+        this.$set(this.form, 'url', res.data.url)
+      } else {
+        this.$message.error(res.msg || '上传失败')
+      }
+    },
+    async submit() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          if (!this.detail) {
+            await Add({
+              ...this.form,
+              type: this.type,
+            })
+            this.$message.success('提交成功')
+          } else {
+            await Update({
+              ...this.form,
+              type: this.type,
+              id: this.detail.id
+            })
+            this.$message.success('修改成功')
+          }
+          this.$listeners.close()
+          this.$listeners.submited()
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .btns{
+    text-align: right;
+  }
+</style>