Merge branch '0601Action'

src/components/copy-text/index.vue

@@ -1,61 +1,83 @@
 <template>
-  <span class="copy" v-if="content">
-    <slot/>{{text}}
-    <i v-if="!!content" @click.stop="copyText" title="复制" class="el-icon-document-copy"></i>
+  <span class="copyWrap">
+    <span class="copy" v-if="content" :style="{ width: width }">
+      <slot />
+    </span>
+    <i
+      v-if="!!content"
+      @click.stop="copyText"
+      title="复制"
+      class="el-icon-document-copy"
+    ></i>
   </span>
 </template>
 
 <script>
-import copy from 'copy-to-clipboard'
+import copy from "copy-to-clipboard";
 
 export default {
-  name: 'copy-text',
+  name: "copy-text",
   props: {
     text: {
       type: String,
-      default: ''
+      default: "",
     },
     hint: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
+    width: {
+      type: String,
+      default: "auto",
+    },
   },
   data() {
     return {
-      content: ''
-    }
+      content: "",
+    };
   },
   mounted() {
-    this.getTextContent()
+    this.getTextContent();
   },
   updated() {
-    this.getTextContent()
+    this.getTextContent();
   },
   methods: {
     getTextContent() {
-      const slot = this.$slots.default || []
-      const text = slot[0]?.text || this.text
-      this.content = text
-      return text
+      const slot = this.$slots.default || [];
+      const text = slot[0]?.text || this.text;
+      this.content = text;
+      return text;
     },
     copyText(e) {
-
-      const text = this.content.replace(/(^\s*)|(\s*$)/g, "")
+      const text = this.content.replace(/(^\s*)|(\s*$)/g, "");
       if (text) {
-        copy(text)
+        copy(text);
         if (this.hint) {
-          this.$message.success('复制成功')
+          this.$message.success("复制成功");
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.copy{
-  .el-icon-document-copy{
+.copyWrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+  justify-content: center;
+  .copy {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+  .el-icon-document-copy {
     cursor: pointer;
+    margin-left: 2px;
   }
 }
 </style>

src/router/index.js

@@ -456,7 +456,9 @@ export const asyncRoutes = {
   activeMarketing:()=>import ('@/views/activityScheduling/activeMarketing'),
   // 2021双11
   '2021double11List':()=>import ('@/views/activityScheduling/2021double11List'),
-  backManager:()=>import ('@/views/backManager')
+  backManager:()=>import ('@/views/backManager'),
+  // 教材列表
+  teachManager:()=>import ('@/views/teachManager')
 }
 
 export default router

src/views/accompaniment/index.vue

@@ -40,19 +40,29 @@
           </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
+            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-cascader
+            ref="myCascader"
+            popper-class="myCascader"
+            v-model="searchForm.categoriesId"
+            style="width: 100%"
+            :options="tree"
+            placeholder="请选择分类"
+            clearable
+            :show-all-levels="true"
+            :props="treeProps"
+            @change="changeCategor"
+          ></el-cascader>
         </el-form-item>
         <!-- <el-form-item
           prop="subjectId"
@@ -67,13 +77,23 @@
           </el-select>
         </el-form-item> -->
         <el-form-item prop="rankType">
-          <el-select v-model="searchForm.rankType" clearable filterable placeholder="请选择是否收费">
+          <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-select
+            v-model="searchForm.showFlag"
+            clearable
+            filterable
+            placeholder="请选择伴奏状态"
+          >
             <el-option :value="1" label="启用"></el-option>
             <el-option :value="0" label="停用"></el-option>
           </el-select>
@@ -88,7 +108,7 @@
         :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
         :data="tableList"
       >
-        <el-table-column align="center" prop="id" label="编号">
+        <el-table-column align="center" prop="id" label="编号" width="80px">
           <template slot-scope="scope">
             <div>
               <copy-text>{{ scope.row.id }}</copy-text>
@@ -107,19 +127,8 @@
             {{ 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
+
+        <!--  <el-table-column
           align="center"
           prop="speed"
           label="速度"
@@ -130,22 +139,34 @@
           label="分类"
           width="180px"
         />
-        <el-table-column
-          align="center"
-          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.rankIds ? '收费' : '免费' }}
+            {{ scope.row.isOpenMetronome ? "播放" : "不播放" }}
           </template>
         </el-table-column>
         <el-table-column
           align="center"
-          label="伴奏状态"
-          width="180px"
+          prop="subjectNames"
+          label="是否上传伴奏"
+          width="120px"
         >
           <template slot-scope="scope">
-            {{ scope.row.showFlag ? '启用' : '停用' }}
+            <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
@@ -154,11 +175,11 @@
           label="客户端类型"
           width="180px"
         >
-        <template slot-scope="scope">
-          <div>
-            {{scope.row.clientType | clientType}}
-          </div>
-        </template>
+          <template slot-scope="scope">
+            <div>
+              {{ scope.row.clientType | clientType }}
+            </div>
+          </template>
         </el-table-column>
         <!-- clientType -->
         <el-table-column
@@ -183,7 +204,9 @@
             <el-button
               type="text"
               @click="looker(scope.row)"
-              :disabled="!scope.row.url || scope.row.clientType != 'SMART_PRACTICE'"
+              :disabled="
+                !scope.row.url || scope.row.clientType != 'SMART_PRACTICE'
+              "
               >预览</el-button
             >
             <el-button
@@ -192,10 +215,9 @@
               :disabled="!scope.row.url"
               >播放</el-button
             >
-            <el-button
-              type="text"
-              @click="changeStatus(scope.row)"
-              >{{ scope.row.showFlag ? '停用' : '启用' }}</el-button>
+            <el-button type="text" @click="changeStatus(scope.row)">{{
+              scope.row.showFlag ? "停用" : "启用"
+            }}</el-button>
             <el-button
               type="text"
               @click="edit(scope.row)"
@@ -232,7 +254,7 @@
     <el-dialog
       :title="title"
       :visible.sync="visible"
-      width="700px"
+      width="740px"
       v-if="visible"
     >
       <submit-form
@@ -249,7 +271,13 @@
       :visible.sync="lookVisible"
       title="预览"
     >
-      <iframe id="iframe" v-if="lookVisible" style="width: 667px; height: 386px" ref="iframe" :src="accompanyUrl" />
+      <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>
@@ -262,9 +290,9 @@ 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 { vaildTeachingUrl } from "@/utils/validate";
+import { getToken } from "@/utils/auth";
+import deepClone from "@/helpers/deep-clone/";
 export default {
   name: "accompaniment",
   components: {
@@ -285,10 +313,10 @@ export default {
         search: "",
         type: "",
         subjectId: "",
-        categoriesId: null,
-        clientType:'',
+        categoriesId: [],
+        clientType: "",
         rankType: null,
-        showFlag: null
+        showFlag: null,
       },
       rules: {
         // 分页规则
@@ -301,10 +329,12 @@ export default {
       visible: false,
       tree: [],
       treeProps: {
-        value: 'id',
-        label: 'name',
-        children: 'sysMusicScoreCategoriesList',
-      }
+        value: "id",
+        label: "name",
+        children: "sysMusicScoreCategoriesList",
+        checkStrictly: true,
+        expandTrigger: "hover",
+      },
     };
   },
   computed: {
@@ -318,25 +348,30 @@ export default {
     },
   },
   async mounted() {
+    const { query, params } = this.$route;
+    if (params.categoriesId) {
+      this.searchForm.categoriesId = [params.categoriesId];
+    }
     this.$store.dispatch("setSubjects");
-    await this.FetchTree()
+    await this.FetchTree();
     await this.FetchList();
+
+    // 点击Cascader  label选中
   },
   methods: {
     async FetchTree() {
       try {
-        const res = await queryTree()
-        this.tree = res.data
-      } catch (error) {
-
-      }
+        const res = await queryTree();
+        this.tree = res.data;
+      } catch (error) {}
     },
     async FetchList() {
       try {
-        let { categoriesId, ...search } = deepClone(this.searchForm)
+        let { categoriesId, ...search } = deepClone(this.searchForm);
         const res = await QueryPage({
           ...search,
-          categoriesId: categoriesId && categoriesId.length > 0 ? categoriesId.pop() : null,
+          categoriesId:
+            categoriesId && categoriesId.length > 0 ? categoriesId.pop() : null,
           page: this.rules.page,
           rows: this.rules.limit,
         });
@@ -357,8 +392,13 @@ export default {
       this.FetchList();
     },
     looker(row) {
-      this.accompanyUrl = vaildTeachingUrl() + '/accompany?Authorization=' + getToken() + '&platform=web#/detail/' + row.id
-      this.lookVisible = true
+      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
@@ -374,14 +414,14 @@ export default {
     },
     async changeStatus(row) {
       try {
-        let status = row.showFlag ? '停用' : '启用'
-        await this.$confirm("是否确认"+ status +"此伴奏?", "提示", {
+        let status = row.showFlag ? "停用" : "启用";
+        await this.$confirm("是否确认" + status + "此伴奏?", "提示", {
           type: "warning",
         });
         await Show({
           sysMusicScoreId: row.id,
-          showFlag: row.showFlag ? 0 : 1
-        })
+          showFlag: row.showFlag ? 0 : 1,
+        });
         this.$message.success(status + "成功");
         this.FetchList();
       } catch (error) {}
@@ -405,9 +445,30 @@ export default {
         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>
 .remark {
   display: inline;
@@ -440,11 +501,11 @@ export default {
   margin-top: -35px;
 }
 .iframe_header_back {
-    background: transparent;
-    width: 225px;
-    height: 50px;
-    position: absolute;
-    top: 65px;
-    left: 20px;
+  background: transparent;
+  width: 225px;
+  height: 50px;
+  position: absolute;
+  top: 65px;
+  left: 20px;
 }
 </style>

src/views/accompaniment/modals/form.vue

@@ -1,23 +1,25 @@
 <template>
   <div>
-    <el-form ref="form" :model="form" label-width="100px">
+    <el-form ref="form" :model="form" label-width="150px">
       <el-form-item
         prop="sysMusicScore.name"
         label="曲名"
-        :rules="[{required: true, message: '请输入曲名'}]"
+        :rules="[{ required: true, message: '请输入曲名' }]"
       >
-        <el-input placeholder="请输入曲名" v-model="form.sysMusicScore.name"/>
+        <el-input placeholder="请输入曲名" v-model="form.sysMusicScore.name" />
       </el-form-item>
       <el-form-item
         prop="sysMusicScore.musicScoreCategoriesId"
         label="分类"
-        :rules="[{required: true, message: '请选择分类'}]"
+        :rules="[{ required: true, message: '请选择分类' }]"
       >
-      <el-cascader v-model="form.sysMusicScore.musicScoreCategoriesId"
-                    style="width:100%"
-                    :options="tree"
-                     placeholder="请选择分类"
-                    :props="treeProps"></el-cascader>
+        <el-cascader
+          v-model="form.sysMusicScore.musicScoreCategoriesId"
+          style="width: 100%"
+          :options="tree"
+          placeholder="请选择分类"
+          :props="treeProps"
+        ></el-cascader>
         <!-- <el-select style="width: 100%!important;" v-model="form.sysMusicScore.musicScoreCategoriesId" placeholder="请选择声部">
           <el-option
             v-for="item in selects.subjects"
@@ -31,51 +33,79 @@
       <el-form-item
         prop="rankIdType"
         label="是否收费"
-        :rules="[{required: true, message: '请选择是否收费'}]"
+        :rules="[{ required: true, message: '请选择是否收费' }]"
       >
-        <el-select style="width: 100%!important;" v-model="form.rankIdType" placeholder="请选择是否收费" @change="rankChange">
+        <el-select
+          style="width: 100% !important"
+          v-model="form.rankIdType"
+          placeholder="请选择是否收费"
+          @change="rankChange"
+        >
           <!-- <el-option
             :value="item.id"
             :label="item.name"
             v-for="item in memberRankList"
             :key="item.id"
           ></el-option> -->
-          <el-option
-            :value="0"
-            label="免费"
-          ></el-option>
-          <el-option
-            :value="1"
-            label="收费"
-          ></el-option>
+          <el-option :value="0" label="免费"></el-option>
+          <el-option :value="1" label="收费"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        prop="sysMusicScore.isOpenMetronome"
+        label="节拍器"
+        :rules="[{ required: true, message: '请选择节拍器' }]"
+      >
+        <el-select
+          style="width: 100% !important"
+          v-model="form.sysMusicScore.isOpenMetronome"
+          placeholder="请选择节拍器"
+          @change="rankChange"
+        >
+          <!-- <el-option
+            :value="item.id"
+            :label="item.name"
+            v-for="item in memberRankList"
+            :key="item.id"
+          ></el-option> -->
+          <el-option :value="0" label="不播放"></el-option>
+          <el-option :value="1" label="播放"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item
         prop="sysMusicScore.clientType"
         label="客户端类型"
-        :rules="[{required: true, message: '请选择客户端类型'}]"
+        :rules="[{ required: true, message: '请选择客户端类型' }]"
       >
-        <el-select style="width: 100%!important;" v-model="form.sysMusicScore.clientType" placeholder="请选择客户端类型">
-          <el-option
-            value="NETWORK_ROOM"
-            label="网络教室"
-          ></el-option>
-          <el-option
-            value="SMART_PRACTICE"
-            label="智能陪练"
-          ></el-option>
+        <el-select
+          style="width: 100% !important"
+          v-model="form.sysMusicScore.clientType"
+          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="sysMusicScore.order"
         label="排序"
-        :rules="[{required: true, message: '请输入排序'}]"
+        :rules="[{ required: true, message: '请输入排序' }, {
+              pattern: /^([1-9]\d*|[0]{1,1})$/,
+              message: '请输入正确的排序',
+              trigger: 'blur',
+            },]"
       >
-        <el-input placeholder="请输入排序" v-model="form.sysMusicScore.order"/>
+        <el-input placeholder="请输入排序" v-model="form.sysMusicScore.order" />
       </el-form-item>
       <el-form-item
-        label="原音"
+        label="原音(不含节拍器)"
         prop="sysMusicScore.url"
+        :rules="[
+          {
+            required: form.sysMusicScore.isOpenMetronome ? false : true,
+            message: '请上传原音',
+          },
+        ]"
       >
         <singe-file-upload
           tips="仅支持上传 mp3/aac 格式音频文件"
@@ -83,15 +113,40 @@
           v-model="form.sysMusicScore.url"
         />
       </el-form-item>
-      <div class="files" v-for="(song, index) in form.sysMusicScoreAccompaniments" :key="index">
+      <el-form-item
+        label="原音(含节拍器)"
+        prop="sysMusicScore.metronomeUrl"
+        :rules="[
+          {
+            required: form.sysMusicScore.isOpenMetronome ? true : false,
+            message: '原音(含节拍器)',
+          },
+        ]"
+      >
+        <singe-file-upload
+          tips="仅支持上传 mp3/aac 格式音频文件"
+          accept=".mp3, .aac"
+          v-model="form.sysMusicScore.metronomeUrl"
+        />
+      </el-form-item>
+      <div
+        class="files"
+        v-for="(song, index) in form.sysMusicScoreAccompaniments"
+        :key="index"
+      >
         <el-row>
           <el-col :span="12">
             <el-form-item
               :prop="`sysMusicScoreAccompaniments.${index}.subjectId`"
               label="声部"
             >
-            <!-- :rules="[{required: true, message: '请选择声部'}]" -->
-              <el-select style="width: 100%!important;" v-model="song.subjectId" clearable placeholder="请选择声部">
+              <!-- :rules="[{required: true, message: '请选择声部'}]" -->
+              <el-select
+                style="width: 100% !important"
+                v-model="song.subjectId"
+                clearable
+                placeholder="请选择声部"
+              >
                 <el-option
                   v-for="item in selects.subjects"
                   :value="item.id"
@@ -106,26 +161,28 @@
             <el-form-item
               :prop="`sysMusicScoreAccompaniments.${index}.speed`"
               label="速度"
-              :rules="[{required: true, message: '请输入速度'}]"
+              :rules="[{ required: true, message: '请输入速度' }]"
             >
-              <el-input type="number" placeholder="请输入速度" v-model="song.speed"/>
+              <el-input
+                type="number"
+                placeholder="请输入速度"
+                v-model="song.speed"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
               :prop="`sysMusicScoreAccompaniments.${index}.isShowFingering`"
               label="指法展示"
-              :rules="[{required: true, message: '请选择是否展示指法'}]"
+              :rules="[{ required: true, message: '请选择是否展示指法' }]"
             >
-              <el-select style="width: 100%!important;" v-model="song.isShowFingering" placeholder="请选择是否展示指法">
-                <el-option
-                  :value="true"
-                  label="是"
-                ></el-option>
-                <el-option
-                  :value="false"
-                  label="否"
-                ></el-option>
+              <el-select
+                style="width: 100% !important"
+                v-model="song.isShowFingering"
+                placeholder="请选择是否展示指法"
+              >
+                <el-option :value="true" label="是"></el-option>
+                <el-option :value="false" label="否"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -134,12 +191,12 @@
               :prop="`sysMusicScoreAccompaniments.${index}.memo`"
               label="描述"
             >
-              <el-input placeholder="请输入描述" v-model="song.memo"/>
+              <el-input placeholder="请输入描述" v-model="song.memo" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item
-              label="mp3文件"
+              label="伴奏(不含节拍器)"
               :prop="`sysMusicScoreAccompaniments.${index}.mp3Url`"
             >
               <singe-file-upload
@@ -151,9 +208,23 @@
           </el-col>
           <el-col :span="12">
             <el-form-item
+              label="伴奏(含节拍器)"
+              :prop="`sysMusicScoreAccompaniments.${index}.metronomeUrl`"
+            >
+              <singe-file-upload
+                tips="仅支持上传 mp3/aac 格式音频文件"
+                accept=".mp3, .aac"
+                v-model="song.metronomeUrl"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
               label="MusicXML"
               :prop="`sysMusicScoreAccompaniments.${index}.xmlUrl`"
-              :rules="[{required: true, message: '请选择MusicXML文件'}]"
+              :rules="[{ required: true, message: '请选择MusicXML文件' }]"
             >
               <singe-file-upload
                 tips="仅支持上传 xml 格式文件"
@@ -163,9 +234,21 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-button class="file-remove" type="text" @click="removeSys(index)" :disabled="form.sysMusicScoreAccompaniments.length == 1">删除</el-button>
+        <el-button
+          class="file-remove"
+          type="text"
+          @click="removeSys(index)"
+          :disabled="form.sysMusicScoreAccompaniments.length == 1"
+          >删除</el-button
+        >
       </div>
-      <el-button @click="createSys" type="info" style="width: 100%;margin-bottom: 20px;" plain>添加伴奏</el-button>
+      <el-button
+        @click="createSys"
+        type="info"
+        style="width: 100%; margin-bottom: 20px"
+        plain
+        >添加伴奏</el-button
+      >
       <div class="btns">
         <el-button type="primary" @click="submit">提交</el-button>
         <el-button @click="$listeners.close">取消</el-button>
@@ -174,76 +257,81 @@
   </div>
 </template>
 <script>
-import { Add, Update, queryPageSysExam, queryTree } from '../api'
+import { Add, Update, queryPageSysExam, queryTree } from "../api";
 import { getAllmemberRank } from "@/views/resetTeaming/api";
 export default {
-  props: ['detail', 'type'],
+  props: ["detail", "type"],
   data() {
     return {
       tree: [],
       memberRankList: [], // 会员列表
       form: {
         rankIdType: 0, // 收费会员类型 默认免费
+
         sysMusicScore: {
-          name: '',
-          rankIds: '', // 收费会员编号
-          url: '',
-          order: '',
+            isOpenMetronome: 0, // 是否开启节拍器 默认关闭
+          name: "",
+          rankIds: "", // 收费会员编号
+          url: "",
+          order: "",
           musicScoreCategoriesId: [],
-          clientType: '',
+          clientType: "",
         },
         sysMusicScoreAccompaniments: [
           {
-            subjectId: '',
-            speed: '',
-            mp3Url: '',
-            xmlUrl: '',
+            subjectId: "",
+            speed: "",
+            mp3Url: "",
+            xmlUrl: "",
             isShowFingering: null,
-            mome: '',
+            mome: "",
           },
         ],
-        delExamSongAccompanimentIds: []
+        delExamSongAccompanimentIds: [],
       },
       treeProps: {
-        value: 'id',
-        label: 'name',
-        children: 'sysMusicScoreCategoriesList',
-      }
-    }
+        value: "id",
+        label: "name",
+        children: "sysMusicScoreCategoriesList",
+      },
+    };
   },
   async mounted() {
-    this.$store.dispatch('setSubjects')
-    await this.FetchTree()
-    await this.memberRank()
+    this.$store.dispatch("setSubjects");
+    await this.FetchTree();
+    await this.memberRank();
     if (this.detail) {
-      // console.log(this.detail)
-      this.$set(this.form, 'sysMusicScore', {
+      console.log(this.detail)
+      this.$set(this.form, "sysMusicScore", {
+        isOpenMetronome:Number(this.detail.isOpenMetronome),
         name: this.detail.name,
         url: this.detail.url,
         rankIds: this.detail.rankIds,
         order: this.detail.order,
         clientType: this.detail.clientType,
-        musicScoreCategoriesId: this.detail.categoriesId ? this.formatParentId(this.detail.categoriesId, this.tree) : [],
-      })
-      if(this.detail.rankIds) {
-        this.form.rankIdType = 1
+        musicScoreCategoriesId: this.detail.categoriesId
+          ? this.formatParentId(this.detail.categoriesId, this.tree)
+          : [],
+      });
+      if (this.detail.rankIds) {
+        this.form.rankIdType = 1;
       } else {
-        this.form.rankIdType = 0
+        this.form.rankIdType = 0;
       }
-      this.FeatchDetailList()
+      this.FeatchDetailList();
     }
   },
   methods: {
     rankChange(value) {
-      if(value) {
-        let tempIds = []
-        this.memberRankList.forEach(item => {
-          tempIds.push(item.id)
-        })
-        this.form.sysMusicScore.rankIds = tempIds.join(',')
+      if (value) {
+        let tempIds = [];
+        this.memberRankList.forEach((item) => {
+          tempIds.push(item.id);
+        });
+        this.form.sysMusicScore.rankIds = tempIds.join(",");
       } else {
         // 会员购买重置
-        this.form.sysMusicScore.rankIds = ''
+        this.form.sysMusicScore.rankIds = "";
       }
     },
     async memberRank() {
@@ -257,65 +345,69 @@ export default {
     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
+          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, id];
         }
       }
-      return ids
+      return ids;
     },
     async FetchTree() {
       try {
-        const res = await queryTree()
-        this.tree = res.data
-      } catch (error) {
-
-      }
+        const res = await queryTree();
+        this.tree = res.data;
+      } catch (error) {}
     },
     async FeatchDetailList() {
       try {
         const res = await queryPageSysExam({
-          sysMusicScoreId: this.detail.id
-        })
-        const result = res.data || []
-        result.forEach(item => {
-          if(!item.subjectId) {
-            item.subjectId = null
+          sysMusicScoreId: this.detail.id,
+        });
+        const result = res.data || [];
+        result.forEach((item) => {
+          if (!item.subjectId) {
+            item.subjectId = null;
           }
-        })
-        this.$set(this.form, 'sysMusicScoreAccompaniments', result)
+        });
+        this.$set(this.form, "sysMusicScoreAccompaniments", result);
       } catch (error) {}
     },
     createSys() {
       this.form.sysMusicScoreAccompaniments.push({
-        subjectId: '',
-        speed: '',
-        mp3Url: '',
-        xmlUrl: ''
-      })
+        subjectId: "",
+        speed: "",
+        mp3Url: "",
+        xmlUrl: "",
+      });
     },
     async removeSys(index) {
       try {
-        await this.$confirm('是否确认删除此伴奏?', '提示', {
-          type: 'warning'
-        })
+        await this.$confirm("是否确认删除此伴奏?", "提示", {
+          type: "warning",
+        });
         if (this.form.sysMusicScoreAccompaniments[index]) {
-          this.form.delExamSongAccompanimentIds.push(this.form.sysMusicScoreAccompaniments[index].id)
+          this.form.delExamSongAccompanimentIds.push(
+            this.form.sysMusicScoreAccompaniments[index].id
+          );
         }
 
-        this.form.sysMusicScoreAccompaniments.splice(index, 1)
+        this.form.sysMusicScoreAccompaniments.splice(index, 1);
       } catch (error) {}
     },
     hasSubjectId(id) {
-      const ids = []
+      const ids = [];
       for (const item of this.form.sysMusicScoreAccompaniments) {
-        ids.push(item.subjectId)
+        ids.push(item.subjectId);
       }
-      return ids.includes(id)
+      return ids.includes(id);
     },
     async submit() {
       this.$refs.form.validate(async (valid) => {
@@ -325,48 +417,52 @@ export default {
               ...this.form,
               sysMusicScore: {
                 ...this.form.sysMusicScore,
-                type: 'COMMON',
+                type: "COMMON",
                 showFlag: 0,
-                musicScoreCategoriesId: (this.form.sysMusicScore.musicScoreCategoriesId || []).pop(),
-              }
-            })
-            this.$message.success('提交成功')
+                musicScoreCategoriesId: (
+                  this.form.sysMusicScore.musicScoreCategoriesId || []
+                ).pop(),
+              },
+            });
+            this.$message.success("提交成功");
           } else {
             await Update({
               ...this.form,
               sysMusicScore: {
                 ...this.form.sysMusicScore,
-                type: 'COMMON',
+                type: "COMMON",
                 id: this.detail.id,
                 showFlag: this.detail.showFlag,
-                musicScoreCategoriesId: (this.form.sysMusicScore.musicScoreCategoriesId || []).pop(),
-              }
-            })
-            this.$message.success('修改成功')
+                musicScoreCategoriesId: (
+                  this.form.sysMusicScore.musicScoreCategoriesId || []
+                ).pop(),
+              },
+            });
+            this.$message.success("修改成功");
           }
-          this.$listeners.close()
-          this.$listeners.submited()
+          this.$listeners.close();
+          this.$listeners.submited();
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
-  .btns{
-    text-align: right;
-  }
-  .files{
-    background-color: #f8f8f8;
-    padding: 20px 0;
-    padding-right: 20px;
-    margin-bottom: 20px;
-    border-radius: 5px;
-    position: relative;
-    .file-remove{
-      position: absolute;
-      right: 20px;
-      bottom: 10px;
-    }
+.btns {
+  text-align: right;
+}
+.files {
+  background-color: #f8f8f8;
+  padding: 20px 0;
+  padding-right: 20px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  position: relative;
+  .file-remove {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
   }
+}
 </style>

src/views/studentManager/components/studentVip.vue

@@ -40,9 +40,12 @@
           prop="vipGroupName"
         >
           <template slot-scope="scope">
-            <el-button type="text" @click="gotoVip(scope.row.vipGroupName)">
-              <copy-text>{{ scope.row.vipGroupName }}</copy-text>
-            </el-button>
+            <!-- class="vipGroupName" -->
+            <div >
+              <el-button type="text"  @click="gotoVip(scope.row.vipGroupName)">
+                <copy-text width='110px'>{{ scope.row.vipGroupName }}</copy-text>
+              </el-button>
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="VIP课状态" align="center">
@@ -226,12 +229,12 @@ export default {
       findStudentVipGroups({
         vipGroupId: this.activeRow.vipGroupId,
         studentId: this.userId,
-        page:this.studentInfo.page,
-        rows:this.studentInfo.limit
+        page: this.studentInfo.page,
+        rows: this.studentInfo.limit,
       }).then((res) => {
         this.dialogTitle = this.activeRow.vipGroupName;
         if (res.code == 200) {
-          this.studentInfo.total = res.data.total
+          this.studentInfo.total = res.data.total;
           this.gridData = res.data.rows;
           this.dialogTableVisible = true;
         }
@@ -250,7 +253,13 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.vipGroupName {
+  width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .studentvip {
   .topCard {
     display: flex;

src/views/teachManager/api.js

@@ -0,0 +1,45 @@
+import request2 from '@/utils/request2'
+
+export const addsysMusicScore = data => request2({
+  url: '/api-web/sysMusicScoreCategories/save',
+  data: data,
+  method: 'post',
+  requestType:'json'
+})
+
+// 教材列表
+export const getSysMusicScoreList = data => request2({
+  url: '/api-web/sysMusicScoreCategories/queryPage',
+  params: data,
+  method: 'get',
+})
+
+// 获取教材详情
+
+export const getSysMusicScoreDetail = data => request2({
+  url: '/api-web/sysMusicScoreCategories/get',
+  params: data,
+  method: 'get',
+})
+
+// 修改教程
+export const resetsysMusicScore = data => request2({
+  url: '/api-web/sysMusicScoreCategories/update',
+  data: data,
+  method: 'post',
+  requestType:'json'
+})
+// 启用 停用
+export const enableSysMusicScore = data => request2({
+  url: '/api-web/sysMusicScoreCategories/enable',
+  params: data,
+  method: 'get',
+})
+
+// 删除
+export const removeSysMusicScore = data => request2({
+  url: '/api-web/sysMusicScoreCategories/delete',
+  data: data,
+  method: 'post',
+  requestType:'form'
+})

src/views/teachManager/index.vue

@@ -0,0 +1,292 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <h2>
+      <div class="squrt"></div>
+      教材列表
+    </h2>
+    <div class="m-core">
+      <save-form
+        :inline="true"
+        :model="searchForm"
+        @submit="search"
+        @reset="onReSet"
+      >
+        <el-form-item prop="search">
+          <el-input
+            v-model.trim="searchForm.search"
+            clearable
+            @keyup.enter.native="search"
+            placeholder="教材编号、名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="enable">
+          <el-select
+            v-model.trim="searchForm.enable"
+            placeholder="教材状态"
+            clearable
+          >
+            <el-option label="启用" value="1"></el-option>
+            <el-option label="停用" value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary">搜索</el-button>
+          <el-button native-type="reset" type="danger">重置</el-button>
+        </el-form-item>
+      </save-form>
+      <div class="btnList">
+        <auth auths="sysMusicScoreCategories/save">
+          <el-button type="primary" @click="addTeach">新增教材</el-button>
+        </auth>
+      </div>
+      <div class="tableWrap">
+        <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>
+          <el-table-column
+            align="center"
+            prop="name"
+            label="教材名称"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="organNames"
+            label="可见分部"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="musicScoreNum"
+            label="曲目数量"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="updateTime"
+            label="最后更新时间"
+          ></el-table-column>
+          <el-table-column align="center" prop="studentId" label="教材状态">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.enable ? "启用" : "停用" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="studentId" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <auth
+                  auths="/accompaniment"
+                >
+                  <el-button type="text" @click="lookMusic(scope.row)">查看</el-button>
+                </auth>
+
+                <auth auths="sysMusicScoreCategories/update">
+                  <el-button
+                    type="text"
+                    @click="resetTeach(scope.row)"
+                    v-if="!scope.row.enable"
+                    >修改</el-button
+                  >
+                </auth>
+                <auth auths="sysMusicScoreCategories/enable">
+                  <el-button
+                    type="text"
+                    v-if="scope.row.enable"
+                    @click="stopTeach(scope.row)"
+                    >停用</el-button
+                  >
+                  <el-button
+                    type="text"
+                    v-if="!scope.row.enable"
+                    @click="stopTeach(scope.row)"
+                    >启用</el-button
+                  >
+                </auth>
+                <auth auths="sysMusicScoreCategories/delete">
+                  <el-button
+                    type="text"
+                    v-if="!scope.row.enable"
+                    @click="removeTeach(scope.row)"
+                    >删除</el-button
+                  >
+                </auth>
+              </div>
+            </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="getList"
+        />
+      </div>
+    </div>
+    <el-dialog
+      title="新增教材"
+      :visible.sync="teachVisible"
+      width="800px"
+      v-if="teachVisible"
+    >
+      <addTeach
+        @close="teachVisible = false"
+        @getList="getList"
+        ref="addTeach"
+        v-if="teachVisible"
+        :activeRow="activeRow"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="teachVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitAdd">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import load from "@/utils/loading";
+import addTeach from "./modals/addTeach";
+import {
+  getSysMusicScoreList,
+  enableSysMusicScore,
+  removeSysMusicScore,
+} from "./api";
+export default {
+  components: { pagination, addTeach },
+  data() {
+    return {
+      searchForm: {
+        search: null,
+        enable: null,
+      },
+
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      teachVisible: false,
+      activeRow: null,
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 获取分部
+
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getList();
+    },
+    async getList() {
+      try {
+        const res = await getSysMusicScoreList({
+          ...this.searchForm,
+          page: this.rules.page,
+          rows: this.rules.limit,
+        });
+        this.rules.total = res.data.total;
+        this.tableList = res.data.rows;
+      } catch (e) {}
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.$refs.searchForm.resetFields();
+      this.search();
+    },
+    addTeach() {
+      this.activeRow = null;
+      this.teachVisible = true;
+    },
+    submitAdd() {
+      this.$refs.addTeach.addSubmit();
+    },
+    resetTeach(row) {
+      this.activeRow = row;
+      this.teachVisible = true;
+    },
+    async stopTeach(row) {
+      let str = "";
+      if (row.enable) {
+        str = `是否停用${row.name}该教材`;
+      } else {
+        str = `是否启用${row.name}该教材`;
+      }
+      this.$confirm(str, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          try {
+            const res = await enableSysMusicScore({ categoriesId: row.id });
+            if (row.enable) {
+              this.$message.success("停用成功");
+            } else {
+              this.$message.success("启用成功");
+            }
+
+            this.getList();
+          } catch (e) {
+            console.log(e);
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    async removeTeach(row) {
+      this.$confirm(`是否删除${row.name}`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          try {
+            const res = await removeSysMusicScore({ id: row.id });
+            this.$message.success("删除成功");
+            this.getList();
+          } catch (e) {
+            console.log(e);
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    lookMusic(row){
+          this.$router.push({
+        name: "accompaniment",
+        params: { categoriesId: row.id },
+      });
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+.btnList {
+  margin-bottom: 20px;
+}
+</style>

src/views/teachManager/modals/addTeach.vue

@@ -0,0 +1,346 @@
+<template>
+  <div>
+    <el-alert title="教材信息" :closable="false" class="alert" type="info" />
+    <el-form
+      :model="form"
+      :inline="true"
+      label-width="120px"
+      class="form"
+      ref="form"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+            label="教材名称"
+            prop="name"
+            :rules="[
+              {
+                required: true,
+                message: '请输入教材名称',
+                trigger: 'blur',
+              },
+            ]"
+          >
+            <el-input v-model="form.name" style="width: 260px"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="适用分部"
+            prop="organId"
+            :rules="[
+              {
+                required: true,
+                message: '请选择适用分部',
+                trigger: 'change',
+              },
+            ]"
+          >
+            <select-all
+              style="width: 260px"
+              v-model.trim="form.organId"
+              class="organSelect"
+              filterable
+              placeholder="请选择分部"
+              multiple
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in selects.branchs"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </select-all>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item
+          label="教材封面图"
+          prop="coverImg"
+          :rules="[
+            {
+              required: true,
+              message: '请上传教材封面图',
+              trigger: 'blur',
+            },
+          ]"
+          label-width="120px"
+        >
+          <!--      v-show="!form.coverImg"  -->
+          <upload
+            class="uploadImg"
+            v-model="form.coverImg"
+            :imageWidthM="210"
+            :imageHeightM="268"
+            ref="uploadImg"
+          ></upload>
+          <!-- <img v-show="form.coverImg" :src="form.coverImg" alt="" width="105px" height="134px" @click="uploadImg"/> -->
+          <p style="color: red">
+            请上传210*268像素，大小2M以内，格式为jpg、png、gif图片
+          </p>
+        </el-form-item>
+      </el-row>
+      <el-alert
+        title="教材曲目分类"
+        :closable="false"
+        class="alert"
+        type="info"
+      />
+
+      <div class="treeWrap">
+        <el-button type="primary" @click="addCate" class="addCateBtn"
+          >添加分类</el-button
+        >
+        <el-tree
+          :data="form.sysMusicScoreCategoriesList"
+          node-key="index"
+          default-expand-all
+          :expand-on-click-node="false"
+          draggable
+          accordion
+          ref="tree"
+          :props="treeProps"
+          :allow-drop="allowDrop"
+        >
+          >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span :class="node.level == 1 ? 'title' : ''">{{
+              node.label
+            }}</span>
+            <span>
+              <i class="el-icon-edit" @click="() => editItem(data)"></i>
+              <i
+                class="el-icon-remove-outline"
+                @click="() => removeItem(node, data)"
+              ></i>
+              <i
+                class="el-icon-circle-plus-outline"
+                v-if="node.level == 1"
+                @click="() => appendItem(data)"
+              ></i>
+            </span>
+          </span>
+        </el-tree>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import Upload from "@/components/Upload/index";
+import {
+  addsysMusicScore,
+  getSysMusicScoreDetail,
+  resetsysMusicScore,
+} from "../api";
+export default {
+  props: ["activeRow"],
+  components: {
+    Upload,
+  },
+  data() {
+    return {
+      form: {
+        organId: [],
+        name: null,
+        coverImg: "",
+        sysMusicScoreCategoriesList: [],
+        delCategoriesIds: [],
+      },
+      index: 0,
+      treeProps: {
+        children: "sysMusicScoreCategoriesList",
+        label: "name",
+      },
+    };
+  },
+  async mounted() {
+    await this.$store.dispatch("setBranchs");
+    if (this.activeRow?.id) {
+      try {
+        const res = await getSysMusicScoreDetail({ id: this.activeRow.id });
+        this.form.name = res.data.name;
+        this.form.organId = res.data.organId.split(",").map((item) => {
+          return Number(item);
+        });
+        this.form.coverImg = res.data.coverImg;
+        this.form.sysMusicScoreCategoriesList =
+          this.recursionDate(res.data.sysMusicScoreCategoriesList) || [];
+      } catch (e) {}
+    }
+  },
+  methods: {
+    // 递归遍历数组
+    recursionDate(arr) {
+      // 这里来了
+      if (arr.length > 0) {
+        let newArr = [];
+        for (let i = 0; i < arr.length; i++) {
+          let obj = {
+            ...arr[i],
+            index: arr[i].id,
+          };
+
+          if (
+            arr[i].sysMusicScoreCategoriesList &&
+            arr[i].sysMusicScoreCategoriesList.length > 0
+          ) {
+            obj.sysMusicScoreCategoriesList = this.recursionDate(
+              arr[i].sysMusicScoreCategoriesList
+            );
+          }
+
+          newArr.push(obj);
+        }
+
+        return newArr;
+      }
+    },
+    appendItem(data) {
+      this.$prompt("请输入二级分类名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputPattern: /^.{1,30}$/,
+        inputErrorMessage: "请输入1到15个汉字或字符",
+      })
+        .then(({ value }) => {
+          this.index += 1;
+          // this.form.data.push({ index: `xxx${this.index}`, label: value });
+          const newChild = {
+            index: `xxx${this.index}`,
+            name: value,
+            sysMusicScoreCategoriesList: [],
+          };
+          if (!data.sysMusicScoreCategoriesList) {
+            this.$set(data, "sysMusicScoreCategoriesList", []);
+          }
+          data.sysMusicScoreCategoriesList.push(newChild);
+        })
+        .catch(() => {});
+    },
+    removeItem(node, data) {
+      const parent = node.parent;
+      const children = parent.data.sysMusicScoreCategoriesList || parent.data;
+
+      const index = children.findIndex((d) => {
+        this.form.delCategoriesIds.push(data.id);
+        return d.id === data.id;
+      });
+      children.splice(index, 1);
+      this.form.delCategoriesIds = [...new Set(this.form.delCategoriesIds)];
+    },
+    editItem(data) {
+      this.$prompt("请输入修改的分类名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputValue: data.name,
+        inputPattern: /^.{1,30}$/,
+        inputErrorMessage: "请输入1到15个汉字或字符",
+      })
+        .then(({ value }) => {
+          data.name = value;
+          // this.form.data.push({ index: `xxx${this.index}`, label: value });
+        })
+        .catch(() => {});
+    },
+    addCate() {
+      this.$prompt("请输入一级分类名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        closeOnClickModal: false,
+        inputPattern: /^.{1,30}$/,
+        inputErrorMessage: "请输入1到15个汉字或字符",
+      })
+        .then(({ value }) => {
+          this.index += 1;
+          this.form.sysMusicScoreCategoriesList.push({
+            index: `xxx${this.index}`,
+            name: value,
+          });
+        })
+        .catch(() => {});
+      // this.form.data.push({})
+    },
+    addSubmit() {
+      this.$refs.form.validate(async (flag) => {
+        if (flag) {
+          let { organId, delCategoriesIds, ...rest } = this.form;
+          let obj = {
+            ...rest,
+            organId: organId.join(","),
+            delCategoriesIds: delCategoriesIds.join(","),
+          };
+          try {
+            if (this.activeRow?.id) {
+              obj.id = this.activeRow.id;
+              const resut = await resetsysMusicScore(obj);
+              this.$message.success("修改成功");
+              this.$emit("getList");
+              this.$emit("close");
+            } else {
+              const resut = await addsysMusicScore(obj);
+              this.$message.success("添加成功");
+              this.$emit("getList");
+              this.$emit("close");
+            }
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      });
+    },
+    uploadImg() {
+      this.$refs.uploadImg.$refs.upload.submit();
+    },
+    allowDrop(draggingNode, dropNode, type) {
+      let flag = true;
+      // console.log(type, dropNode, draggingNode);
+      if (draggingNode.childNodes.length > 0 && type == "inner") {
+        flag = false;
+      } else {
+        if (dropNode.level != 1 && type == "inner") {
+          flag = false;
+        }
+      }
+      if(draggingNode.childNodes.length > 0&&dropNode.level!=1){
+        flag = false;
+      }
+      return flag;
+    },
+  },
+  computed: {},
+};
+</script>
+<style lang="scss" scoped>
+.alert {
+  margin-bottom: 20px;
+}
+.form {
+  /deep/.el-form-item {
+    margin-right: 0 !important;
+  }
+}
+.addCateBtn {
+  margin-bottom: 20px;
+}
+
+.custom-tree-node {
+  .title {
+    font-size: 16px;
+  }
+  font-size: 14px;
+  i {
+    // font-size: 20px;
+    margin-left: 5px;
+  }
+}
+.uploadImg {
+  /deep/.avatar {
+    width: 105px;
+    height: 134px;
+  }
+}
+</style>