Merge branch 'iteration-20240711-subject' into 11/24SAAS

src/utils/directive.js

@@ -1,44 +1,59 @@
-import Vue from 'vue'
+import Vue from "vue";
 // import store from '@/store'
 
 // let permissionArr = store.getters.permission
 
-Vue.directive('permission', {
-  inserted (el, binding) {
-    let value = binding.value
-    let permission = window.localStorage.getItem('permission')
-    permission = permission.split(',')
+Vue.directive("permission", {
+  inserted(el, binding) {
+    let value = binding.value;
+    let permission = window.localStorage.getItem("permission");
+    permission = permission.split(",");
     // 如果一个权限判断不了则用两个
     // 格式： v-permission="{child: 'child', parent: 'parent'}"
     // 在特殊情况下才会用到两个参数，基本情况只会用到一个标识
-    if (typeof value == 'string') {
+    if (typeof value == "string") {
       if (!permission.includes(value)) {
         // el.style.display = 'none'
-        el.parentNode && el.parentNode.removeChild(el)
+        el.parentNode && el.parentNode.removeChild(el);
       }
     } else {
-      if (permission.includes(value.parent) && permission.includes(value.child)) {
+      if (
+        permission.includes(value.parent) &&
+        permission.includes(value.child)
+      ) {
         // el.style.display = 'none'
       } else {
-        el.parentNode && el.parentNode.removeChild(el)
+        el.parentNode && el.parentNode.removeChild(el);
       }
     }
-
   }
-})
+});
 
+Vue.directive("number", {
+  inserted(el) {
+    el.oninput = function(e) {
+      let value = "" + e.target.value;
+      if (value.indexOf(".") != -1) {
+        let arr = value.split("");
+        arr.splice(arr.length - 1);
+        let str2 = arr.join("");
+        e.target.value = +str2;
+        return;
+      }
+    };
+  }
+});
 
-Vue.directive('number', {
-  inserted (el) {
-    el.oninput = function (e) {
-      let value = '' + e.target.value
-      if (value.indexOf('.') != -1) {
-        let arr = value.split('')
-        arr.splice(arr.length - 1)
-        let str2 = arr.join('')
-        e.target.value = +str2
-        return
+/** 防止重复点击指令 */
+Vue.directive("preventReClick", {
+  mounted(el, binding) {
+    el.addEventListener("click", () => {
+      if (!el.disabled) {
+        el.disabled = true;
+        setTimeout(() => {
+          el.disabled = false;
+        }, binding.value || 2000);
       }
-    }
+    });
   }
-})
+});

src/views/accompaniment/api.js

@@ -1,80 +1,132 @@
-import request from '@/utils/request2'
-import request2 from '@/utils/request'
+import request from "@/utils/request2";
+import request2 from "@/utils/request";
 
 export const QueryPage = params => {
   return request({
-    url: '/api-web/sysMusicScore/queryPage',
+    url: "/api-web/sysMusicScore/queryPage",
     data: {},
     params,
-    requestType: 'form'
-  })
-}
+    requestType: "form"
+  });
+};
 
 export const Transcod = params => {
   return request({
-    url: '/api-web/sysMusicScore/transcod',
+    url: "/api-web/sysMusicScore/transcod",
     data: {},
     params: {
-      sysMusicScoreId: params.id,
+      sysMusicScoreId: params.id
     },
-    requestType: 'json',
-    method: 'post'
-  })
-}
+    requestType: "json",
+    method: "post"
+  });
+};
 
 export const Add = data => {
   return request({
-    url: '/api-web/sysMusicScore/add',
-    method: 'post',
+    url: "/api-web/sysMusicScore/add",
+    method: "post",
     data,
-    params: {},
-  })
-}
+    params: {}
+  });
+};
 
 export const Update = data => {
   return request2({
-    url: '/api-web/sysMusicScore/update',
-    method: 'post',
+    url: "/api-web/sysMusicScore/update",
+    method: "post",
     data,
-    params: {},
-  })
-}
+    params: {}
+  });
+};
 
 export const Show = data => {
   return request({
-    url: '/api-web/sysMusicScore/show',
-    method: 'post',
+    url: "/api-web/sysMusicScore/show",
+    method: "post",
     data,
-    requestType: 'form'
-  })
-}
+    requestType: "form"
+  });
+};
+
+export const api_sysMusicScoreState = id => {
+  return request({
+    url: "/api-web/sysMusicScore/state/" + id,
+    method: "post"
+  });
+};
 
 export const queryPageSysExam = data => {
   return request({
-    url: '/api-web/sysMusicScoreAccompaniment/queryPage',
-    method: 'get',
-    params: data,
-  })
-}
+    url: "/api-web/sysMusicScoreAccompaniment/queryPage",
+    method: "get",
+    params: data
+  });
+};
 
 export const Del = id => {
   return request({
-    url: '/api-web/sysMusicScore/del',
-    method: 'post',
+    url: "/api-web/sysMusicScore/del",
+    method: "post",
     data: {},
     params: {
       id
     },
-    requestType: 'form'
-  })
-}
+    requestType: "form"
+  });
+};
 
-export const queryTree = (data) => {
+export const queryTree = data => {
   return request({
-    url: '/api-web/sysMusicScoreCategories/queryTree',
-    method: 'get',
+    url: "/api-web/sysMusicScoreCategories/queryTree",
+    method: "get",
     data: {},
     params: data,
-    requestType: 'form'
-  })
-}
+    requestType: "form"
+  });
+};
+
+// 曲目列表
+export const api_pageByApplication = data => {
+  return request2({
+    url: "/api-web/musicSheetApplicationExtend/pageByApplication",
+    method: "post",
+    data
+  });
+};
+
+/**
+ *  @description: 曲目应用拓展表 批量保存
+ * @param params
+ */
+export const musicSheetApplicationExtendSaveBatch = data => {
+  return request2({
+    url: "/api-web/musicSheetApplicationExtend/saveBatch",
+    method: "post",
+    data
+  });
+};
+
+/**
+ *  @description: 启用停用
+ * @param params
+ */
+export const musicSheetApplicationExtendStatus = data => {
+  return request2({
+    url: "/api-web/musicSheetApplicationExtend/status",
+    method: "post",
+    data
+  });
+};
+
+/**
+ *  @description: 修改
+ * @param params
+ */
+export const musicSheetApplicationExtendUpdate = data => {
+  return request2({
+    url: "/api-web/musicSheetApplicationExtend/update",
+    method: "post",
+    data
+  });
+};

src/views/accompaniment/index.vue

@@ -8,10 +8,9 @@
       <el-button
         @click="open('COMMON')"
         type="primary"
-        v-permission="'sysMusicScore/add'"
-        >添加公用伴奏</el-button
+        v-permission="'musicSheetApplicationExtend/saveBatch'"
+        >添加曲目</el-button
       >
-      <!-- <el-button @click="open('PERSON')" type="primary" v-permission="'sysMusicScore/add'">添加个人伴奏</el-button> -->
       <saveform
         ref="searchForm"
         :model.sync="searchForm"
@@ -21,75 +20,30 @@
         <el-form-item prop="search">
           <el-input
             v-model="searchForm.search"
-                 @submit="submit"
-        @reset="reset"
-             @keyup.enter.native="
-              (e) => {
+            @submit="submit"
+            @reset="reset"
+            @keyup.enter.native="
+              e => {
                 e.target.blur();
                 $refs.searchForm.save();
-                submit()
+                submit();
               }
             "
             clearable
             placeholder="伴奏编号/伴奏名称"
           />
         </el-form-item>
-        <!-- <el-form-item prop="organId">
-          <el-select
-            class="multiple"
-            v-model.trim="searchForm.organId"
-            filterable
-            multiple
-            collapse-tags
-            clearable
-            placeholder="请选择分部"
-          >
-            <el-option
-              v-for="(item, index) in selects.branchs"
-              :key="index"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </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
             ref="myCascader"
             popper-class="myCascader"
             @change="changeCategor"
             :show-all-levels="true"
-             clearable
+            clearable
             v-model="searchForm.categoriesId"
             style="width: 100%"
             :options="tree"
             placeholder="请选择分类"
-
             :props="treeProps"
           ></el-cascader>
         </el-form-item>
@@ -123,7 +77,7 @@
             v-model="searchForm.showFlag"
             clearable
             filterable
-            placeholder="请选择伴奏状态"
+            placeholder="请选择状态"
           >
             <el-option :value="1" label="启用"></el-option>
             <el-option :value="0" label="停用"></el-option>
@@ -132,12 +86,12 @@
         <el-form-item>
           <el-button @click="submit" type="primary">搜索</el-button>
           <el-button @click="reset" type="danger">重置</el-button>
-                  <el-button
+          <!-- <el-button
             @click="onExport"
             type="primary"
             v-permission="'export/exportMusicScoreList'"
             >导出</el-button
-          >
+          > -->
         </el-form-item>
       </saveform>
 
@@ -146,10 +100,15 @@
         :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
         :data="tableList"
       >
-        <el-table-column align="center" prop="id" label="编号" width="80px">
+        <el-table-column
+          align="center"
+          prop="cbsMusicSheetId"
+          label="编号"
+          width="120px"
+        >
           <template slot-scope="scope">
             <div>
-              <copy-text>{{ scope.row.id }}</copy-text>
+              <copy-text>{{ scope.row.cbsMusicSheetId }}</copy-text>
             </div>
           </template>
         </el-table-column>
@@ -160,18 +119,6 @@
             </div>
           </template>
         </el-table-column>
-        <!-- <el-table-column
-          align="center"
-          prop="organName"
-          label="所属分部"
-          width="180px"
-        >
-          <template slot-scope="scope">
-            <div>
-              <Tooltip :content="scope.row.organName" />
-            </div>
-          </template>
-        </el-table-column> -->
         <el-table-column
           align="center"
           prop="subjectName"
@@ -189,73 +136,24 @@
             {{ scope.row.type | songUseTypeFormat }}
           </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">
+        <el-table-column align="center" label="是否收费">
           <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"
-          prop="subjectNames"
-          label="是否上传伴奏"
-          width="120px"
-        >
-          <template slot-scope="scope">
-            <div>
-              <p>
-                含节拍器:{{ scope.row.accompanimentMetronomeUrl ? "是" : "否" }}
-              </p>
-              <p>不含节拍器:{{ scope.row.accompanimentUrl ? "是" : "否" }}</p>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="伴奏状态" width="180px">
+        <el-table-column align="center" label="状态">
           <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" prop="createUserName" label="上传人" />
+        <el-table-column align="center" prop="createTime" label="上传时间" /> -->
         <el-table-column
           align="center"
           width="180px"
@@ -263,45 +161,22 @@
           fixed="right"
         >
           <template slot-scope="scope">
-            <!-- <el-button
-              type="text"
-              @click="looker(scope.row)"
-              :disabled="
-                (scope.row.isOpenMetronome
-                  ? !scope.row.url
-                  : !scope.row.metronomeUrl) ||
-                scope.row.clientType != 'SMART_PRACTICE'
-              "
+            <el-button type="text" @click="looker(scope.row, 1)"
               >预览</el-button
-            > -->
-            <el-dropdown :disabled="scope.row.clientType != 'SMART_PRACTICE'">
-                <span class="el-dropdown-link">
-                  预览<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item>
-                    <el-button type="text" @click="looker(scope.row, 1)" >系统自带节拍器</el-button></el-dropdown-item>
-                  </el-dropdown-item>
-                  <el-dropdown-item>
-                    <el-button type="text" @click="looker(scope.row, 0)" >原音自带节拍器</el-button></el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+            >
             <el-button
+              v-permission="'musicSheetApplicationExtend/status'"
               type="text"
-              @click="player(scope.row)"
-              :disabled="!scope.row.url"
-              >播放</el-button
+              @click="changeStatus(scope.row)"
+              >{{ scope.row.showFlag ? "停用" : "启用" }}</el-button
             >
-            <el-button type="text" @click="changeStatus(scope.row)">{{
-              scope.row.showFlag ? "停用" : "启用"
-            }}</el-button>
-            <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)"
@@ -309,12 +184,12 @@
               v-permission="'sysMusicScore/update'"
               >修改</el-button
             >
-            <el-button
+            <!-- <el-button
               type="text"
               @click="remove(scope.row)"
               v-permission="'sysMusicScore/del'"
               >删除</el-button
-            >
+            > -->
           </template>
         </el-table-column>
       </el-table>
@@ -327,27 +202,26 @@
         @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 :title="title" :visible.sync="visible" width="1100px">
+      <EditMusic
+        v-if="visible"
+        :tree="this.tree"
+        @close="visible = false"
+        @getList="FetchList"
+      />
     </el-dialog>
-    <el-dialog
-      :title="title"
-      :visible.sync="visible"
-      width="740px"
-      v-if="visible"
-    >
-      <submit-form
+
+    <el-dialog title="修改曲谱" :visible.sync="muiscVisible" width="500px">
+      <EditExtra
+        v-if="muiscVisible"
+        :tree="this.tree"
         :detail="detail"
-        :type="type"
-        @submited="FetchList"
-        @close="visible = false"
+        @close="muiscVisible = false"
+        @getList="FetchList"
       />
     </el-dialog>
+
     <el-dialog
       v-if="lookVisible"
       width="667px"
@@ -357,12 +231,17 @@
     >
       <template slot="title">
         <span style="color: #fff;">预览</span>
-        <el-select v-model="selectPart" placeholder="请选择分谱" @change="onPartChange">
+        <el-select
+          v-model="selectPart"
+          placeholder="请选择分谱"
+          @change="onPartChange"
+        >
           <el-option
             v-for="(item, index) in parts"
             :key="item"
             :label="item"
-            :value="index">
+            :value="index"
+          >
           </el-option>
         </el-select>
       </template>
@@ -383,8 +262,17 @@
 import saveform from "@/components/save-form";
 import pagination from "@/components/Pagination/index";
 import { songUseType } from "@/constant";
-import { QueryPage, Del, Show, queryTree, Transcod } from "./api";
+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/";
@@ -399,6 +287,8 @@ export default {
     pagination,
     "submit-form": form,
     Tooltip,
+    EditMusic,
+    EditExtra
   },
   data() {
     return {
@@ -413,7 +303,6 @@ export default {
       lookRow: {},
       accompanyUrl: null, // 预览地址
       accompanyUrl2: null, // 预览地址
-      audioVisible: false,
       tableList: [],
       searchForm: {
         search: "",
@@ -422,36 +311,37 @@ export default {
         categoriesId: [],
         clientType: "",
         rankType: null,
-        showFlag: null,
+        showFlag: null
       },
       rules: {
         // 分页规则
         limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [10, 20, 40, 50], // 选择限制显示条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
       detail: null,
       visible: false,
+      muiscVisible: false,
       tree: [],
       treeProps: {
         value: "id",
         label: "name",
         children: "sysMusicScoreCategoriesList",
         checkStrictly: true,
-        expandTrigger: "hover",
-      },
+        expandTrigger: "hover"
+      }
     };
   },
   computed: {
     title() {
       const t1 = this.detail ? "修改" : "添加";
-      let t2 = this.type === "COMMON" ? "公用" : "个人";
-      if (this.detail) {
-        t2 = this.detail.type === "COMMON" ? "公用" : "个人";
-      }
-      return t1 + t2 + "伴奏";
-    },
+      // let t2 = this.type === "COMMON" ? "公用" : "个人";
+      // if (this.detail) {
+      //   t2 = this.detail.type === "COMMON" ? "公用" : "个人";
+      // }
+      return t1 + "曲目";
+    }
   },
   async mounted() {
     const { query, params } = this.$route;
@@ -494,6 +384,8 @@ export default {
         const res = await queryTree();
         this.tree = res.data;
         this.formatTree(this.tree);
+
+        console.log(this.tree);
       } catch (error) {}
     },
     formatTree(data) {
@@ -516,7 +408,7 @@ export default {
           categoriesId:
             categoriesId && categoriesId.length > 0 ? categoriesId.pop() : null,
           page: this.rules.page,
-          rows: this.rules.limit,
+          rows: this.rules.limit
         });
         this.tableList = res.data.rows;
         this.$set(this.rules, "total", res.data.total);
@@ -524,7 +416,7 @@ export default {
     },
     submit() {
       this.$set(this.rules, "page", 1);
-      this.$refs.searchForm.validate((valid) => {
+      this.$refs.searchForm.validate(valid => {
         if (valid) {
           this.FetchList();
         }
@@ -542,11 +434,13 @@ export default {
           .getElementsByTagName("part-list")?.[0]
           ?.getElementsByTagName("score-part") || [];
       const partListNames = Array.from(partList).map(
-        (item) => item.getElementsByTagName("part-name")?.[0].textContent || ""
+        item => item.getElementsByTagName("part-name")?.[0].textContent || ""
       );
       this.xmlFirstSpeed =
         xmlParse.getElementsByTagName("per-minute")?.[0]?.textContent || "";
-      return partListNames.filter(text => text.toLocaleUpperCase() !== 'COMMON');
+      return partListNames.filter(
+        text => text.toLocaleUpperCase() !== "COMMON"
+      );
     },
     async looker(row, num) {
       try {
@@ -558,24 +452,23 @@ export default {
         this.parts = [];
         this.selectPart = 0;
       }
-      let url = location.origin +
-        "/accompany-web/"
-      if(/dayaedu.com/.test(location.origin)) {
-        url = location.origin +
-        "/accompany/"
+      let url = location.origin + "/accompany-web/";
+      if (/dayaedu.com/.test(location.origin)) {
+        url = location.origin + "/accompany/";
       }
 
       this.accompanyUrl =
         url +
         "?Authorization=" +
         getToken() +
-        "&platform=web&isOpenMetronome=" +
-        num +
+        "&platform=web" +
         "#/detail/" +
-        row.id  + '?part-index=' + this.selectPart + '&isMove=1';
+        row.id +
+        "?part-index=" +
+        this.selectPart;
       this.lookVisible = true;
-      this.lookNum = num
-      this.lookRow = row
+      this.lookNum = num;
+      this.lookRow = row;
 
       // this.$nextTick(() => {
       //   console.log(this.$refs.iframe)
@@ -587,44 +480,36 @@ export default {
       // })
     },
     onPartChange(val) {
-      console.log(val, 'val', this.$refs.iframe)
-      let url = location.origin +
-        "/accompany-web/"
-      if(/dayaedu.com/.test(location.origin)) {
-        url = location.origin +
-        "/accompany/"
+      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() +
+        "&platform=web&t=" +
+        new Date().getTime() +
         "#/detail/" +
-        this.lookRow.id  + '?part-index=' + val + '&isMove=1';
-    },
-    player(row) {
-      this.activeUrl = row.url;
-      this.audioVisible = true;
+        this.lookRow.id +
+        "?part-index=" +
+        val;
     },
     async changeStatus(row) {
       try {
         let status = row.showFlag ? "停用" : "启用";
-        await this.$confirm("是否确认" + status + "此伴奏?", "提示", {
-          type: "warning",
-        });
-        await Show({
-          sysMusicScoreId: row.id,
-          showFlag: row.showFlag ? 0 : 1,
+        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.visible = true;
+      this.muiscVisible = true;
     },
     async transcod(row) {
       try {
@@ -640,7 +525,7 @@ export default {
     async remove(row) {
       try {
         await this.$confirm("是否确认删除此伴奏?", "提示", {
-          type: "warning",
+          type: "warning"
         });
         await Del(row.id);
         this.$message.success("删除成功");
@@ -661,18 +546,18 @@ export default {
             categoriesId:
               categoriesId && categoriesId.length > 0
                 ? categoriesId.pop()
-                : null,
+                : null
           },
           fileName: `教学伴奏导出.xls`,
-          method: "get",
+          method: "get"
         },
         "确定导出教学伴奏"
       );
-    },
-  },
+    }
+  }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .myCascader {
   .el-radio {
     width: 100%;
@@ -689,8 +574,6 @@ export default {
     top: 10px;
   }
 }
-</style>
-<style lang="less" scoped>
 ::v-deep .el-dropdown {
   margin-right: 10px;
   color: #14928a;

src/views/accompaniment/modals/edit-extra.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <el-form
+      :model="form"
+      ref="formRef"
+      label-position="right"
+      label-width="100px"
+    >
+      <el-form-item
+        label="曲谱分类"
+        prop="musicSheetCategoryId"
+        :rules="[
+          {
+            required: true,
+            message: '请选择曲谱分类'
+          }
+        ]"
+      >
+        <el-cascader
+          v-model="form.musicSheetCategoryId"
+          style="width: 100%"
+          :options="tree"
+          placeholder="请选择分类"
+          :props="treeProps"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item
+        label="是否收费"
+        prop="paymentType"
+        :rules="[
+          {
+            required: true,
+            message: '请选择是否收费'
+          }
+        ]"
+      >
+        <el-select
+          v-model="form.paymentType"
+          clearable
+          filterable
+          placeholder="请选择是否收费"
+          style="width: 100% !important"
+        >
+          <el-option value="FREE" label="免费"></el-option>
+          <el-option value="VIP" label="收费"></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item
+        label="排序值"
+        prop="sortNo"
+        :rules="[
+          {
+            required: true,
+            message: '请输入排序值'
+          }
+        ]"
+      >
+        <el-input-number
+          style="width: 100% !important"
+          placeholder="请输入排序值"
+          v-model="form.sortNo"
+          :min="0"
+          :max="9999"
+          :controls="false"
+        />
+      </el-form-item> -->
+    </el-form>
+
+    <div class="dialog-footer">
+      <el-button @click="onCancel">
+        取消
+      </el-button>
+      <el-button type="primary" @click="onSubmit" v-preventReClick>
+        确定</el-button
+      >
+    </div>
+  </div>
+</template>
+<script>
+import { Update } from "../api";
+export default {
+  name: "edit-extra",
+  props: ["detail", "tree"],
+  data() {
+    return {
+      treeProps: {
+        value: "id",
+        label: "name",
+        children: "sysMusicScoreCategoriesList"
+      },
+      form: {
+        musicSheetCategoryId: null,
+        paymentType: null,
+        sortNo: null
+      }
+    };
+  },
+  mounted() {
+    if (this.detail.id) {
+      this.form.musicSheetCategoryId = this.detail.categoriesId
+        ? this.formatParentId(this.detail.categoriesId, this.tree)
+        : [];
+      this.form.paymentType = this.detail.rankIds ? "VIP" : "FREE";
+      this.form.sortNo = this.detail.sortNo;
+    }
+  },
+  methods: {
+    onCancel() {
+      this.$listeners.close();
+    },
+    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;
+    },
+    onSubmit() {
+      this.$refs.formRef.validate(async valid => {
+        if (!valid) return;
+
+        try {
+          await Update({
+            musicSheetId: this.detail.cbsMusicSheetId,
+            ...this.form,
+            musicSheetCategoryId: (this.form.musicSheetCategoryId || []).pop()
+          });
+          this.$message.success("修改成功");
+          this.$emit("getList");
+          this.$emit("close");
+        } catch (e) {
+          //
+          console.log(e, "--------");
+        }
+        // this.FetchList();
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+  text-align: right;
+}
+/deep/.el-input-number {
+  .el-input__inner {
+    text-align: left !important;
+  }
+}
+</style>

src/views/accompaniment/modals/edit-music.vue

@@ -0,0 +1,678 @@
+<template>
+  <div>
+    <el-steps
+      :space="200"
+      :active="currentStep"
+      simple
+      finish-status="success"
+      style="margin-bottom: 12px"
+    >
+      <el-step title="选择曲目"></el-step>
+      <el-step title="设置曲目信息"></el-step>
+    </el-steps>
+
+    <div v-if="currentStep === 0">
+      <el-form
+        ref="form"
+        :model="searchForm"
+        :inline="true"
+        class="system-menu-search"
+      >
+        <el-form-item prop="keyword">
+          <el-input
+            v-model="searchForm.keyword"
+            @submit="onSearch"
+            @reset="onReSet"
+            @keyup.enter.native="
+              e => {
+                e.target.blur();
+                $refs.form.save();
+                onSearch();
+              }
+            "
+            clearable
+            placeholder="关键词"
+          />
+        </el-form-item>
+        <!-- <el-form-item prop="musicSheetType">
+          <el-select
+            v-model="searchForm.musicSheetType"
+            clearable
+            filterable
+            placeholder="多声轨渲染"
+          >
+            <el-option label="是" value="CONCERT"></el-option>
+            <el-option label="否" value="SINGLE"></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-form-item prop="composer">
+          <el-input
+            v-model="searchForm.composer"
+            @submit="onSearch"
+            @reset="onReSet"
+            @keyup.enter.native="
+              e => {
+                e.target.blur();
+                $refs.searchForm.save();
+                onSearch();
+              }
+            "
+            clearable
+            placeholder="音乐人"
+          />
+        </el-form-item> -->
+        <el-form-item>
+          <el-button
+            size="default"
+            type="primary"
+            class="ml10"
+            @click="onSearch"
+          >
+            查询
+          </el-button>
+          <el-button class="ml10" @click="onReSet"> 重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <p style="padding-bottom: 12px">
+        你选择了<span style="color: red; padding: 0 8px">{{
+          chioseIdList.length
+        }}</span>
+        条曲目
+      </p>
+
+      <!--         @selection-change="handleSelectionChange"
+        @select="onTableSelect" -->
+      <el-table
+        :data="tableList"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        @select-all="handleSelectionChange"
+        @select="onTableSelect"
+        ref="multipleSelection"
+        key="tableList"
+      >
+        <el-table-column type="selection" width="55" />
+        <!-- <el-table-column prop="id" label="曲目编号" /> -->
+        <el-table-column
+          prop="name"
+          label="曲目名称(编号)"
+          width="180"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <div>
+              {{ scope.row.name }}
+              <p>({{ scope.row.id }})</p>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="曲目封面">
+          <template #default="scope">
+            <el-image
+              style="width: 50px; height: 50px"
+              :src="scope.row.musicCover"
+              fit="cover"
+              :preview-src-list="[scope.row.musicCover]"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="subjectNames"
+          label="可用声部"
+          show-overflow-tooltip
+        ></el-table-column>
+
+        <!-- <el-table-column
+          prop="composer"
+          label="音乐人"
+          show-overflow-tooltip
+        ></el-table-column> -->
+
+        <!-- <el-table-column
+          prop="musicSheetType"
+          label="多声轨渲染"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <div>
+              {{ scope.row.musicSheetType === "SINGLE" ? "否" : "是" }}
+            </div>
+          </template>
+        </el-table-column> -->
+      </el-table>
+
+      <pagination
+        save-key="accompaniment-edit-music"
+        sync
+        :total.sync="pageInfo.total"
+        :page.sync="pageInfo.page"
+        :limit.sync="pageInfo.limit"
+        :page-sizes="pageInfo.page_size"
+        @pagination="getList"
+      />
+    </div>
+
+    <div v-if="currentStep === 1">
+      <el-table
+        :data="formLists"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        style="margin-bottom: 12px;"
+        key="formLists"
+      >
+        <el-table-column prop="name" label="曲目名称(编号)" width="180">
+          <template #default="scope">
+            <div>
+              {{ scope.row.name }}
+              <p>({{ scope.row.id }})</p>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="曲目封面" width="150">
+          <template #default="scope">
+            <el-image
+              style="width: 50px; height: 50px"
+              :src="scope.row.musicCover"
+              fit="cover"
+              :preview-src-list="[scope.row.musicCover]"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="subjectNames"
+          label="可用声部"
+          show-overflow-tooltip
+          width="150"
+        ></el-table-column>
+
+        <!-- <el-table-column
+          prop="composer"
+          label="音乐人"
+          show-overflow-tooltip
+        ></el-table-column> -->
+
+        <!-- <el-table-column
+          prop="musicSheetType"
+          label="多声轨渲染"
+          width="150"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <div>
+              {{ scope.row.musicSheetType === "SINGLE" ? "否" : "是" }}
+            </div>
+          </template>
+        </el-table-column> -->
+
+        <el-table-column prop="musicSheetCategoryId" width="180">
+          <template #header>
+            曲谱分类
+            <i
+              class="el-icon-edit"
+              style="cursor: pointer"
+              @click="onDialogEdit('musicSheetCategoryId')"
+            ></i>
+          </template>
+          <template #default="scope">
+            <!-- <el-form-item label-width="auto" :show-message="false"> -->
+            <!-- <el-select
+              v-model="formLists[scope.$index].musicSheetCategoryId"
+              placeholder="请选择曲谱分类"
+              clearable
+              filterable
+              style="width:150px !important"
+            >
+              <el-option
+                v-for="option in tree"
+                :key="option.id"
+                :label="option.name"
+                :value="option.id"
+              ></el-option>
+            </el-select> -->
+            <el-cascader
+              popper-class="myCascader"
+              v-model="formLists[scope.$index].musicSheetCategoryId"
+              placeholder="请选择曲谱分类"
+              filterable
+              style="width:150px !important"
+              clearable
+              :options="tree"
+              :props="treeProps"
+            ></el-cascader>
+            <!-- </el-form-item> -->
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="rankType" width="180">
+          <template #header>
+            收费方式
+            <i
+              class="el-icon-edit"
+              style="cursor: pointer"
+              @click="onDialogEdit('rankType')"
+            ></i>
+          </template>
+          <template #default="scope">
+            <!-- <el-form-item label-width="auto" :show-message="false"> -->
+            <el-select
+              v-model="formLists[scope.$index].rankType"
+              clearable
+              filterable
+              placeholder="请选择是否收费"
+              style="width:150px !important"
+            >
+              <el-option value="0" label="免费"></el-option>
+              <el-option value="1" label="收费"></el-option>
+            </el-select>
+            <!-- </el-form-item> -->
+          </template>
+        </el-table-column>
+        <el-table-column prop="sortNumber" width="180">
+          <template #header>
+            排序
+            <i
+              class="el-icon-edit"
+              style="cursor: pointer"
+              @click="onDialogEdit('sortNumber')"
+            ></i>
+          </template>
+          <template #default="scope">
+            <!-- <el-form-item label-width="auto" :show-message="false"> -->
+            <el-input-number
+              style="width:150px !important"
+              v-model="formLists[scope.$index].sortNumber"
+              :min="0"
+              :max="9999"
+              placeholder="请输入排序"
+              :controls="false"
+              clearable
+            />
+            <!-- </el-form-item> -->
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="100" center>
+          <template #default="scope">
+            <el-button
+              size="small"
+              type="text"
+              @click="onRemoveMusic(scope.row)"
+              >移除</el-button
+            ></template
+          >
+        </el-table-column>
+      </el-table>
+      <!-- </el-form> -->
+    </div>
+
+    <div class="dialog-footer">
+      <el-button @click="onCancel">
+        {{ currentStep === 0 ? "取消" : "上一步" }}
+      </el-button>
+      <el-button type="primary" @click="onSubmit" v-preventReClick>
+        {{ currentStep === 1 ? "确定" : "下一步" }}</el-button
+      >
+    </div>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="450px"
+      append-to-body
+    >
+      <div v-if="dialogType === 'musicSheetCategoryId'">
+        <el-cascader
+          popper-class="myCascader"
+          v-model="dialogForms.musicSheetCategoryId"
+          placeholder="请选择曲谱分类"
+          filterable
+          style="width: 100% !important"
+          clearable
+          :options="tree"
+          :props="treeProps"
+        ></el-cascader>
+      </div>
+      <div v-if="dialogType === 'rankType'">
+        <el-select
+          v-model="dialogForms.rankType"
+          clearable
+          filterable
+          placeholder="请选择是否收费"
+          style="width: 100% !important"
+        >
+          <el-option value="0" label="免费"></el-option>
+          <el-option value="1" label="收费"></el-option>
+        </el-select>
+      </div>
+      <div v-if="dialogType === 'sortNumber'">
+        <el-input-number
+          placeholder="请输入排序值"
+          v-model="dialogForms.sortNumber"
+          :min="0"
+          :max="9999"
+          :controls="false"
+          style="width: 100% !important"
+        />
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false"> 取消 </el-button>
+          <el-button type="primary" @click="onDialogConfirm" v-preventReClick>
+            确定</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import pagination from "@/components/Pagination/index";
+import {
+  api_pageByApplication,
+  musicSheetApplicationExtendSaveBatch
+} from "../api";
+export default {
+  name: "edit-music",
+  props: ["tree"],
+  components: {
+    pagination
+  },
+  data() {
+    return {
+      currentStep: 0,
+      chioseIdList: [], // 选中的数据
+      searchForm: {
+        keyword: "",
+        // musicSheetType: "",
+        subjectId: null,
+        composer: null
+      },
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      dialogTitle: "",
+      dialogType: "musicSheetCategoryId",
+      dialogForms: {
+        musicSheetCategoryId: null,
+        rankType: null,
+        sortNumber: null
+      },
+      dialogVisible: false,
+      tableList: [],
+      formLists: [],
+      treeProps: {
+        value: "id",
+        label: "name",
+        children: "sysMusicScoreCategoriesList",
+        // checkStrictly: true,
+        expandTrigger: "hover"
+      }
+    };
+  },
+  mounted() {
+    this.$store.dispatch("setSubjects");
+    this.getList();
+
+    console.log(this.tree, "tree");
+  },
+  methods: {
+    onSearch() {
+      this.$set(this.pageInfo, "page", 1);
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.getList();
+        }
+      });
+    },
+    onReSet() {
+      this.$refs.form.resetFields();
+      this.getList();
+    },
+    async getList() {
+      const { data } = await api_pageByApplication({
+        page: this.pageInfo.page,
+        rows: this.pageInfo.limit,
+        ...this.searchForm
+      });
+      const rows = data.rows || [];
+      rows.forEach(row => {
+        row.currentPage = this.pageInfo.page;
+      });
+      this.tableList = rows || [];
+      this.pageInfo.total = data.total;
+
+      let idList = this.chioseIdList.map(music => {
+        return music.id;
+      });
+      // this.isNewPage = true
+      this.$nextTick(() => {
+        this.tableList.forEach(course => {
+          if (idList.indexOf(course.id) != -1) {
+            multipleSelection.value.toggleRowSelection(course, true);
+          }
+        });
+        // this.isNewPage = false
+      });
+
+      console.log(this.pageInfo, "pageInfo");
+    },
+    onFormatSelectData(arr, row) {
+      try {
+        let currentPageList = [];
+        const otherPageList = [];
+        this.chioseIdList.forEach(item => {
+          if (item.currentPage == this.pageInfo.page) {
+            currentPageList.push(item);
+          } else {
+            otherPageList.push(item);
+          }
+        });
+
+        const lastPage = [];
+        if (row && row.id) {
+          const index = currentPageList.findIndex(child => child.id === row.id);
+          if (index === -1) {
+            lastPage.push(row);
+          } else {
+            currentPageList.splice(index, 1);
+          }
+        } else {
+          if (arr.length > 0) {
+            arr.forEach(item => {
+              const index = currentPageList.findIndex(
+                child => child.id === item.id
+              );
+              if (index === -1) {
+                lastPage.push(item);
+              }
+            });
+          } else {
+            currentPageList = [];
+          }
+        }
+
+        this.chioseIdList = [
+          ...lastPage,
+          ...otherPageList,
+          ...currentPageList
+        ].sort((a, b) => a.id - b.id);
+      } catch (e) {}
+    },
+    handleSelectionChange(arr) {
+      this.onFormatSelectData(arr);
+    },
+    onTableSelect(arr, row) {
+      this.onFormatSelectData(arr, row);
+    },
+    onCancel() {
+      //
+      if (this.currentStep === 0) {
+        this.$listeners.close();
+      } else if (this.currentStep === 1) {
+        this.currentStep = 0;
+      }
+    },
+    async onSubmit() {
+      if (this.currentStep === 0) {
+        if (this.chioseIdList.length <= 0) {
+          this.$message.warning("请选择曲目");
+          return;
+        }
+        this.currentStep = 1;
+        const tempList = [];
+        this.chioseIdList.forEach(item => {
+          tempList.push({
+            id: item.id,
+            name: item.name,
+            musicCover: item.musicCover,
+            subjectNames: item.subjectNames,
+            composer: item.composer,
+            sourceType: item.sourceType,
+            musicSheetCategoryId: null,
+            rankType: null,
+            sortNumber: null
+          });
+        });
+        this.formLists = tempList;
+        console.log(this.formLists, "formLists");
+      } else if (this.currentStep === 1) {
+        // 提交数据
+        try {
+          const params = [];
+          for (let i = 0; i < this.formLists.length; i++) {
+            const item = this.formLists[i];
+            if (
+              !item.musicSheetCategoryId ||
+              item.musicSheetCategoryId.length == 0
+            ) {
+              this.$message.error("曲目标签不能为空");
+              return;
+            }
+            if (!item.rankType) {
+              this.$message.error("收费方式不能为空");
+              return;
+            }
+            if (
+              item.sortNumber === null ||
+              item.sortNumber === undefined ||
+              item.sortNumber === ""
+            ) {
+              this.$message.error("排序不能为空");
+              return;
+            }
+            params.push({
+              ...item,
+              musicSheetId: item.id,
+              musicSheetCategoryId:
+                item.musicSheetCategoryId.length > 0
+                  ? item.musicSheetCategoryId[
+                      item.musicSheetCategoryId.length - 1
+                    ]
+                  : null,
+              id: null
+            });
+          }
+          await musicSheetApplicationExtendSaveBatch(params);
+          this.$message.success(`添加成功`);
+          this.$emit("getList");
+          this.$emit("close");
+        } catch (e) {
+          //
+          console.log(e, "e");
+        }
+      }
+    },
+    onDialogEdit(type, index = 0) {
+      console.log(type, "type");
+      try {
+        if (type === "musicSheetCategoryId") {
+          this.dialogTitle = "曲谱分类";
+        } else if (type === "rankType") {
+          this.dialogTitle = "收费方式";
+        } else if (type === "sortNumber") {
+          this.dialogTitle = "排序";
+        }
+        this.dialogForms.musicSheetCategoryId = null;
+        this.dialogForms.rankType = null;
+        this.dialogForms.sortNumber = null;
+        this.dialogVisible = true;
+        this.dialogType = type;
+      } catch (e) {
+        cosnole.log(e, "e");
+      }
+    },
+    /** 确认修改 */
+    onDialogConfirm() {
+      this.formLists.forEach(item => {
+        if (this.dialogType === "musicSheetCategoryId") {
+          item.musicSheetCategoryId = this.dialogForms.musicSheetCategoryId;
+        } else if (this.dialogType === "rankType") {
+          item.rankType = this.dialogForms.rankType;
+        } else if (this.dialogType === "sortNumber") {
+          item.sortNumber = this.dialogForms.sortNumber;
+        }
+      });
+      this.dialogVisible = false;
+    },
+    onRemoveMusic(row) {
+      this.$confirm(`是否删除该数据？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(async () => {
+        try {
+          const index = this.formLists.findIndex(item => {
+            if (item.id == row.id) {
+              return true;
+            }
+          });
+          if (index > -1) {
+            this.formLists.splice(index, 1);
+          }
+          const index1 = this.chioseIdList.findIndex(item => {
+            if (item.id == row.id) {
+              return true;
+            }
+          });
+          if (index1 > -1) {
+            this.chioseIdList.splice(index, 1);
+          }
+
+          console.log(this.chioseIdList, "chioseIdList");
+        } catch {}
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+  text-align: right;
+}
+.numberInput {
+  width: 100%;
+}
+/deep/ .el-input-number {
+  .el-input__inner {
+    text-align: left !important;
+  }
+}
+</style>

src/views/categroyManager/api.js

@@ -0,0 +1,11 @@
+import request2 from "@/utils/request2";
+let api = "/api-web";
+
+// 获取cbs声部列表
+export function api_cbsSubjectPage(data) {
+  return request2({
+    url: api + "/subject/cbsSubject/page",
+    method: "post",
+    data
+  });
+}

src/views/categroyManager/components/add-subject.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <el-form :model="forms" size="default" label-width="80px" ref="formRef">
+      <!-- <el-form-item
+        prop="instrumentIds"
+        label="所属分类"
+        :rules="[{ required: true, message: '请选择声部分类' }]"
+      >
+        <el-select
+          v-model="forms.instrumentIds"
+          placeholder="请选择所属分类"
+          clearable
+          filterable
+          style="width: 50% !important"
+        >
+          <el-option
+            v-for="item in fatherList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item> -->`
+      <div
+        style="max-height: 400px;min-height: 300px; overflow-x: hidden; overflow-y: auto"
+      >
+        <el-radio-group v-model="forms.instrumentIds">
+          <el-form-item
+            v-for="(cbs, index) in cbsSubjectList"
+            :key="index"
+            :label="cbs.name"
+          >
+            <template v-if="cbs.instruments && cbs.instruments.length">
+              <el-radio
+                v-for="(item, index) in cbs.instruments"
+                :key="index"
+                :label="item.id"
+                :disabled="item.added && item.id !== defaultId"
+                >{{ item.name }}</el-radio
+              >
+            </template>
+          </el-form-item>
+        </el-radio-group>
+      </div>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button type="primary" @click="onSubmit" v-preventReClick
+        >确 认</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { api_cbsSubjectPage } from "../api";
+import { subjectUpset } from "@/api/specialSetting";
+export default {
+  name: "add-subject",
+  props: ["fatherList", "subjectType", "detail"],
+  data() {
+    return {
+      defaultId: null,
+      cbsSubjectOption: [],
+      cbsSubjectList: [],
+      forms: {
+        cbsSubjectId: null,
+        instrumentIds: null // 分类名称
+      }
+    };
+  },
+  mounted() {
+    // 修改声部
+    if (this.detail.id) {
+      this.forms.id = this.detail.id;
+      this.forms.instrumentIds = this.detail.instrumentIds
+        ? Number(this.detail.instrumentIds)
+        : null;
+      this.defaultId = this.detail.instrumentIds
+        ? Number(this.detail.instrumentIds)
+        : null;
+      this.getCbsSubject(this.detail.id);
+    }
+  },
+  methods: {
+    formatParentId(id, list, ids = []) {
+      for (const item of list) {
+        if (item.instruments) {
+          const cIds = this.formatParentId(id, item.instruments, [
+            ...ids,
+            item.id
+          ]);
+          if (cIds.includes(id)) {
+            return cIds;
+          }
+        }
+        if (item.id === id) {
+          return [...ids, id];
+        }
+      }
+      return ids;
+    },
+    async getCbsSubject(subjectId) {
+      try {
+        const { data } = await api_cbsSubjectPage({
+          page: 1,
+          rows: 999,
+          subjectId
+        });
+        this.cbsSubjectList = data;
+      } catch (e) {
+        //
+        console.log(e, "data");
+      }
+    },
+    async onSubmit() {
+      // 提交修改乐器
+      if (!this.forms.instrumentIds) {
+        this.$message.error("请选择乐器");
+        return;
+      }
+      const ids = this.formatParentId(
+        this.forms.instrumentIds,
+        this.cbsSubjectList
+      );
+      this.forms.cbsSubjectId = ids[0];
+
+      subjectUpset({
+        tenantId: 1,
+        ...this.forms
+      }).then(res => {
+        if (res.code == 200) {
+          this.messageTips("修改", res);
+          this.$emit("getList");
+          this.$emit("close");
+        }
+      });
+      // this.$refs.formRef.validate(valid => {
+      //   if (!valid) return;
+      //   // if (this.detail.id) {
+      //   //   // 修改
+      //   // } else {
+      //   //   // 添加
+      //   // }
+
+      //   this.$emit("close");
+      // });
+    },
+    messageTips(title, res) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+      } else {
+        this.$message.error(res.msg);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+  padding-top: 12px;
+  text-align: right;
+}
+/deep/ .el-form-item {
+  margin-bottom: 13px;
+}
+</style>

src/views/categroyManager/components/create-subject.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <el-form :model="form" ref="form" label-width="100px">
+      <el-form-item
+        prop="parentSubjectId"
+        label="所属分类"
+        :rules="[{ required: true, message: '请选择声部分类' }]"
+      >
+        <el-select
+          v-model="form.parentSubjectId"
+          placeholder="请选择所属分类"
+          prop="parentSubjectId"
+          style="width:365px!important"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in fatherList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        prop="name"
+        label="声部名称"
+        :rules="{
+          required: true,
+          message: '请输入声部名称',
+          trigger: 'change,blur'
+        }"
+      >
+        <el-input
+          v-model="form.name"
+          placeholder="请输入声部名称"
+          style="width:365px!important"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="声部图片"
+        prop="img"
+        :rules="[{ required: true, message: '请上传声部图片' }]"
+      >
+        <image-cropper
+          :options="cropperOptions"
+          :imgSize="2"
+          :imageUrl="form.img"
+          @crop-upload-success="cropSuccess"
+        />
+        <p style="color: red">
+          仅支持图片格式:JPG、PNG、GIF, 大小2M以内;
+        </p>
+      </el-form-item>
+      <!-- <el-form-item
+        v-if="subjectType === 'update'"
+        label="乐器"
+        prop="instrumentIds"
+        :rules="[{ required: true, message: '请选择乐器' }]"
+      >
+        <div style="max-height:300px; overflow-x:hidden; overflow-y: auto;">
+          <el-radio-group v-model="form.instrumentIds">
+            <template
+              v-if="
+                cbsSubjectList.instruments && cbsSubjectList.instruments.length
+              "
+            >
+              <el-radio
+                style="padding: 5px 0;"
+                v-for="(item, index) in cbsSubjectList.instruments"
+                :key="index"
+                :label="item.id"
+                >{{ item.name }}</el-radio
+              >
+            </template>
+          </el-radio-group>
+        </div>
+      </el-form-item> -->
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button type="primary" @click="onSubmit" v-preventReClick
+        >确 认</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { api_cbsSubjectPage } from "../api";
+import ImageCropper from "@/components/ImageCropper";
+import { subjectUpset } from "@/api/specialSetting";
+export default {
+  name: "add-subject",
+  components: { ImageCropper },
+  props: ["fatherList", "subjectType", "detail"],
+  data() {
+    return {
+      cbsSubjectList: [],
+      form: {
+        name: null,
+        id: null,
+        img: null,
+        parentSubjectId: null
+        // instrumentIds: null
+      },
+      cropperOptions: {
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 260, //默认生成截图框宽度
+        autoCropHeight: 260, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: false, //预览图是否是圆形
+        title: "声部图片" //模态框上显示的标题
+      }
+    };
+  },
+  mounted() {
+    // 修改声部
+    if (this.detail.id) {
+      this.form.name = this.detail.name;
+      this.form.id = this.detail.id;
+      this.form.parentSubjectId = this.detail.parentSubjectId;
+      this.form.img = this.detail.img;
+      // this.form.instrumentIds = this.detail.instrumentIds
+      //   ? Number(this.detail.instrumentIds)
+      //   : null;
+      // this.getCbsSubject(this.detail.id);
+    }
+  },
+  methods: {
+    // async getCbsSubject(subjectId) {
+    //   try {
+    //     const { data } = await api_cbsSubjectPage({
+    //       page: 1,
+    //       rows: 999,
+    //       subjectId
+    //     });
+    //     console.log(data, "cbsSubjectList");
+    //     this.cbsSubjectList = data;
+    //   } catch {
+    //     //
+    //   }
+    // },
+    //上传图片成功
+    cropSuccess(data) {
+      this.form.img = data.data.url;
+    },
+    onSubmit() {
+      // 提交修改乐器
+      this.$refs.form.validate(valid => {
+        if (!valid) return;
+        subjectUpset({
+          tenantId: 1,
+          ...this.form
+        }).then(res => {
+          if (res.code == 200) {
+            this.messageTips("修改", res);
+            this.$emit("getList");
+            this.$emit("close");
+          }
+        });
+      });
+    },
+    messageTips(title, res) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+      } else {
+        this.$message.error(res.msg);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>

src/views/categroyManager/components/update-instrument.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <el-form :model="forms" size="default" label-width="80px" ref="formRef">
+      <el-form-item
+        label="展示方式"
+        prop="orientation"
+        :rules="[
+          {
+            required: true,
+            message: '请选择展示方式',
+            trigger: 'blur'
+          }
+        ]"
+      >
+        <el-radio-group v-model="forms.orientation">
+          <el-radio :label="1">竖屏展示</el-radio>
+          <el-radio :label="0">横屏展示</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button type="primary" @click="onSubmit" v-preventReClick
+        >确 认</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "update-instrument",
+  props: ["activeRow"],
+  data() {
+    return {
+      forms: {
+        orientation: null // 分类名称
+      }
+    };
+  },
+  mounted() {
+    if (this.activeRow.id) {
+      this.forms.orientation = this.activeRow.orientation;
+    }
+  },
+  methods: {
+    onSubmit() {
+      // 提交修改乐器
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return;
+
+        this.$emit("close");
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>

src/views/categroyManager/globalSubjects-origin.vue

@@ -0,0 +1,341 @@
+<!--  -->
+<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"
+        ref="searchForm"
+      >
+        <el-form-item prop="search">
+          <el-input
+            v-model.trim="searchForm.search"
+            clearable
+            @keyup.enter.native="
+              e => {
+                e.target.blur();
+                $refs.searchForm.save();
+                search();
+              }
+            "
+            placeholder="请输入编号/名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="parentSubjectId">
+          <el-select
+            v-model="searchForm.parentSubjectId"
+            placeholder="选择声部分类"
+            prop="parentSubjectId"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in fatherList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </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>
+      <auth auths="subject/upset/insert" style="margin-bottom: 20px">
+        <el-button @click="addCategory" type="primary">添加</el-button>
+      </auth>
+      <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="parentSubjectName"
+            label="所属分类"
+          ></el-table-column>
+          <el-table-column align="center" prop="name" label="声部图片">
+            <template slot-scope="scope">
+              <el-image
+                v-if="scope.row.img"
+                style="width: 60px; height: 60px"
+                fit="cover"
+                :src="scope.row.img.split(',')[0]"
+                :previewSrcList="scope.row.img.split(',')"
+              >
+              </el-image>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <!-- v-permission="'subject/upset/del' -->
+                <auth auths="subject/upset/reset">
+                  <el-button
+                    type="text"
+                    @click="resetSubjectCategory(scope.row)"
+                    >修改</el-button
+                  >
+                </auth>
+                <auth auths="subject/upset/del">
+                  <el-button
+                    type="text"
+                    @click="removeSubjectCategory(scope.row)"
+                    >删除</el-button
+                  >
+                </auth>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          :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="categoryVisible"
+      width="500px"
+      v-if="categoryVisible"
+    >
+      <el-form :model="form" :inline="true" ref="form">
+        <el-form-item
+          prop="parentSubjectId"
+          label="所属分类"
+          :rules="[{ required: true, message: '请选择声部分类' }]"
+        >
+          <el-select
+            v-model="form.parentSubjectId"
+            placeholder="请选择所属分类"
+            prop="parentSubjectId"
+            style="width:365px!important"
+            clearable
+            filterable
+          >
+            <el-option
+              v-for="item in fatherList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          prop="name"
+          label="声部名称"
+          :rules="{
+            required: true,
+            message: '请输入声部名称',
+            trigger: 'change,blur'
+          }"
+        >
+          <el-input
+            v-model="form.name"
+            placeholder="请输入声部名称"
+            style="width:365px!important"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="声部图片"
+          prop="img"
+          :rules="[{ required: true, message: '请上传声部图片' }]"
+        >
+          <!-- v-if="!addDisabled" -->
+          <!-- <upload
+            v-model="form.img"
+            :imageWidthM="260"
+            :imageHeightM="260"
+          ></upload> -->
+          <!-- <img v-else :src="form.img" alt="" width="120px" height="120px" /> -->
+          <image-cropper
+            :options="cropperOptions"
+            :imgSize="2"
+            :imageUrl="form.img"
+            @crop-upload-success="cropSuccess"
+          />
+          <p style="color: red">
+            仅支持图片格式:JPG、PNG、GIF, 大小2M以内;
+          </p>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="categoryVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitReset">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import pagination from "@/components/Pagination/index";
+import ImageCropper from "@/components/ImageCropper";
+import {
+  subjectListTree,
+  subjectUpset,
+  subSubjectList
+} from "@/api/specialSetting";
+export default {
+  components: { pagination, ImageCropper },
+  data() {
+    return {
+      searchForm: {
+        search: null,
+        parentSubjectId: null
+      },
+      form: {
+        name: null,
+        id: null,
+        img: null,
+        parentSubjectId: null
+      },
+      tableList: [],
+      organList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      categoryVisible: false,
+      fatherList: [],
+      cropperOptions: {
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 260, //默认生成截图框宽度
+        autoCropHeight: 260, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: false, //预览图是否是圆形
+        title: "声部图片" //模态框上显示的标题
+      }
+    };
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 获取分部
+
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getList();
+      this.getFatherList();
+    },
+    getFatherList() {
+      subjectListTree({
+        delFlag: "NO",
+        rows: 9999,
+        page: 1
+      }).then(res => {
+        if (res.code == 200) {
+          this.fatherList = res.data.rows;
+        }
+      });
+    },
+    getList() {
+      subSubjectList({
+        ...this.searchForm,
+        page: this.rules.page,
+        rows: this.rules.limit
+      }).then(res => {
+        this.tableList = res.data.rows;
+        this.rules.total = res.data.total;
+      });
+    },
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {
+      this.$nextTick(() => {
+        this.search();
+      });
+    },
+    resetSubjectCategory(row) {
+      this.form.name = row.name;
+      this.form.id = row.id;
+      this.form.parentSubjectId = row.parentSubjectId;
+      this.form.img = row.img;
+      this.categoryVisible = true;
+    },
+    removeSubjectCategory(row) {
+      this.$confirm("是否确认删除声部", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        subjectUpset({
+          delFlag: "YES",
+          id: row.id
+        }).then(res => {
+          this.messageTips("删除", res);
+          this.search();
+        });
+      });
+    },
+    messageTips(title, res) {
+      if (res.code == 200) {
+        this.$message.success(title + "成功");
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+    submitReset() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          subjectUpset({
+            tenantId: 1,
+            ...this.form
+          }).then(res => {
+            if (res.code == 200) {
+              this.messageTips("修改", res);
+              this.categoryVisible = false;
+              this.getList();
+            }
+          });
+        }
+      });
+    },
+    addCategory() {
+      this.form.id = null;
+      this.form.name = null;
+      this.form.parentSubjectId = null;
+      this.form.img = null;
+      this.categoryVisible = true;
+    },
+    //上传图片成功
+    cropSuccess(data) {
+      this.form.img = data.data.url;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped></style>

src/views/categroyManager/globalSubjects.vue

@@ -19,7 +19,7 @@
             v-model.trim="searchForm.search"
             clearable
             @keyup.enter.native="
-              (e) => {
+              e => {
                 e.target.blur();
                 $refs.searchForm.save();
                 search();
@@ -51,60 +51,67 @@
         </el-form-item>
       </save-form>
       <auth auths="subject/upset/insert" style="margin-bottom: 20px">
-        <el-button @click="addCategory" type="primary">添加</el-button>
+        <el-button @click="createSubject" type="primary">添加</el-button>
       </auth>
       <div class="tableWrap">
         <el-table
           style="width: 100%"
           :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
           :data="tableList"
+          row-key="id"
         >
+          <el-table-column label="编号" prop="id"></el-table-column>
+          <el-table-column label="声部名称" prop="name"></el-table-column>
           <el-table-column
-            align="center"
-            prop="id"
-            label="编号"
+            label="乐器名称"
+            prop="instrumentName"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="name"
-            label="声部名称"
-          ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="parentSubjectName"
-            label="所属分类"
-          ></el-table-column>
-          <el-table-column align="center" prop="name" label="声部图片">
-            <template slot-scope="scope">
-              <el-image
-                v-if="scope.row.img"
-                style="width: 60px; height: 60px"
-                fit="cover"
-                :src="scope.row.img.split(',')[0]"
-                :previewSrcList="scope.row.img.split(',')"
-              >
-              </el-image>
+          <!-- <el-table-column label="是否启用" show-overflow-tooltip>
+            <template #default="scope">
+              <span>{{ scope.row.enableFlag ? "是" : "否" }}</span>
             </template>
+          </el-table-column> -->
+          <el-table-column label="乐器分类" prop="parentSubjectName">
           </el-table-column>
-          <el-table-column align="center" prop="name" label="操作">
-            <template slot-scope="scope">
-              <div>
-                <!-- v-permission="'subject/upset/del' -->
-                <auth auths="subject/upset/reset">
-                  <el-button
-                    type="text"
-                    @click="resetSubjectCategory(scope.row)"
-                    >修改</el-button
-                  >
-                </auth>
-                <auth auths="subject/upset/del">
-                  <el-button
-                    type="text"
-                    @click="removeSubjectCategory(scope.row)"
-                    >删除</el-button
-                  >
-                </auth>
-              </div>
+
+          <el-table-column label="更新时间" show-overflow-tooltip>
+            <template #default="scope">
+              <span>{{ scope.row.updateTime }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" show-overflow-tooltip width="200px">
+            <template #default="scope">
+              <auth auths="subject/upset/reset">
+                <el-button
+                  size="small"
+                  type="text"
+                  @click="updateSubject(scope.row)"
+                  >修改</el-button
+                >
+              </auth>
+              <auth auths="subject/upset/del">
+                <el-button
+                  size="small"
+                  type="text"
+                  @click="removeSubjectCategory(scope.row)"
+                  >删除</el-button
+                >
+              </auth>
+              <!-- <el-button
+                @click="onChangeStatus(scope.row)"
+                size="small"
+                type="text"
+                >{{ !scope.row.enableFlag ? "启用" : "停用" }}</el-button
+              > -->
+              <auth auths="subject/upset/reset">
+                <el-button
+                  @click="updateInstrument(scope.row)"
+                  size="small"
+                  type="text"
+                  >修改乐器</el-button
+                >
+              </auth>
             </template>
           </el-table-column>
         </el-table>
@@ -118,90 +125,73 @@
       </div>
     </div>
     <el-dialog
-      title="修改分类"
-      :visible.sync="categoryVisible"
-      width="500px"
-      v-if="categoryVisible"
+      :title="'修改乐器'"
+      :visible.sync="instrumentVisible"
+      width="770px"
     >
-      <el-form :model="form" :inline="true" ref="form">
-        <el-form-item prop="parentSubjectId"  label="所属分类" :rules="[{ required: true, message: '请选择声部分类' }]">
-          <el-select
-            v-model="form.parentSubjectId"
-            placeholder="请选择所属分类"
-            prop="parentSubjectId"
-            style="width:365px!important"
-            clearable
-            filterable
-          >
-            <el-option
-              v-for="item in fatherList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
+      <AddSubject
+        v-if="instrumentVisible"
+        :detail="activeRow"
+        :subjectType="instrumentTitle"
+        :fatherList="fatherList"
+        @close="instrumentVisible = false"
+        @getList="getList"
+      />
+    </el-dialog>
 
-        <el-form-item
-          prop="name"
-          label="声部名称"
-          :rules="{
-            required: true,
-            message: '请输入声部名称',
-            trigger: 'change,blur',
-          }"
-        >
-          <el-input v-model="form.name" placeholder="请输入声部名称"  style="width:365px!important"></el-input>
-        </el-form-item>
-        <el-form-item
-          label="声部图片"
-          prop="img"
-          :rules="[{ required: true, message: '请上传声部图片' }]"
-        >
-          <!-- v-if="!addDisabled" -->
-          <!-- <upload
-            v-model="form.img"
-            :imageWidthM="260"
-            :imageHeightM="260"
-          ></upload> -->
-          <!-- <img v-else :src="form.img" alt="" width="120px" height="120px" /> -->
-          <image-cropper :options="cropperOptions" :imgSize="2" :imageUrl="form.img" @crop-upload-success="cropSuccess" />
-          <p style="color: red" >
-            仅支持图片格式:JPG、PNG、GIF, 大小2M以内;
-          </p>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="categoryVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitReset">确 定</el-button>
-      </span>
+    <el-dialog
+      :title="subjectTitle === 'add' ? '添加声部' : '修改声部'"
+      :visible.sync="subjectVisible"
+      width="560px"
+    >
+      <CreateSubject
+        v-if="subjectVisible"
+        :detail="activeRow"
+        :subjectType="subjectTitle"
+        :fatherList="fatherList"
+        @close="subjectVisible = false"
+        @getList="getList"
+      />
     </el-dialog>
+
+    <!-- <el-dialog
+      title="修改乐器"
+      :visible.sync="updateInstrumentVisiable"
+      width="500px"
+    >
+      <UpdateInstrument
+        v-if="updateInstrumentVisiable"
+        :detail="activeRow"
+        @close="updateInstrumentVisiable = false"
+        @getList="getList"
+      />
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
 import pagination from "@/components/Pagination/index";
-import ImageCropper from '@/components/ImageCropper'
+import AddSubject from "./components/add-subject";
+import CreateSubject from "./components/create-subject";
+import UpdateInstrument from "./components/update-instrument";
 import {
   subjectListTree,
   subjectUpset,
-  subSubjectList,
+  subSubjectList
 } from "@/api/specialSetting";
 export default {
-  components: { pagination, ImageCropper },
+  components: { pagination, AddSubject, UpdateInstrument, CreateSubject },
   data() {
     return {
       searchForm: {
         search: null,
-        parentSubjectId: null,
+        parentSubjectId: null
       },
       form: {
         name: null,
         id: null,
-        img:null,
-        parentSubjectId:null
-
+        img: null,
+        parentSubjectId: null
       },
       tableList: [],
       organList: [],
@@ -210,23 +200,17 @@ export default {
         limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [10, 20, 40, 50], // 选择限制显示条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
-      categoryVisible: false,
+      subjectTitle: "add",
+      subjectVisible: false,
       fatherList: [],
-      cropperOptions: {
-        autoCrop: true, //是否默认生成截图框
-        autoCropWidth: 260, //默认生成截图框宽度
-        autoCropHeight: 260, //默认生成截图框高度
-        fixedBox: true, //是否固定截图框大小 不允许改变
-        previewsCircle: false, //预览图是否是圆形
-        title: '声部图片', //模态框上显示的标题
-      },
+      instrumentVisible: false,
+      instrumentTitle: "add",
+      updateInstrumentVisiable: false,
+      activeRow: {}
     };
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     // 获取分部
 
@@ -241,17 +225,21 @@ export default {
       subjectListTree({
         delFlag: "NO",
         rows: 9999,
-        page: 1,
-      }).then((res) => {
+        page: 1
+      }).then(res => {
         if (res.code == 200) {
           this.fatherList = res.data.rows;
         }
       });
     },
     getList() {
-      subSubjectList({ ...this.searchForm,page:this.rules.page,rows:this.rules.limit }).then((res) => {
+      subSubjectList({
+        ...this.searchForm,
+        page: this.rules.page,
+        rows: this.rules.limit
+      }).then(res => {
         this.tableList = res.data.rows;
-        this.rules.total = res.data.total
+        this.rules.total = res.data.total;
       });
     },
     search() {
@@ -263,65 +251,86 @@ export default {
         this.search();
       });
     },
-    resetSubjectCategory(row) {
-      this.form.name = row.name;
-      this.form.id = row.id;
-      this.form.parentSubjectId = row.parentSubjectId;
-      this.form.img = row.img;
-      this.categoryVisible = true;
+    // 修改乐器
+    // onUpdateInstrument(row) {
+    //   this.activeRow = row;
+    //   this.updateInstrumentVisiable = true;
+    // },
+    onChangeInstrument(row) {
+      const enableStr = row.enableFlag ? "停用" : "启用";
+      this.$confirm(`是否${enableStr}${row.name}？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(async () => {});
+    },
+    /** 添加乐器 */
+    createSubject() {
+      this.subjectVisible = true;
+      this.subjectTitle = "add";
+      this.activeRow = {};
+    },
+    /** 修改乐器 */
+    updateSubject(row) {
+      this.subjectTitle = "update";
+      this.activeRow = row;
+      this.subjectVisible = true;
+    },
+    /** 修改乐器 */
+    updateInstrument(row) {
+      this.instrumentTitle = "update";
+      this.activeRow = row;
+      this.instrumentVisible = true;
     },
     removeSubjectCategory(row) {
       this.$confirm("是否确认删除声部", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
       }).then(() => {
         subjectUpset({
           delFlag: "YES",
-          id: row.id,
-        }).then((res) => {
+          id: row.id
+        }).then(res => {
           this.messageTips("删除", res);
           this.search();
         });
       });
     },
+    // onChangeStatus(row) {
+    //   const enableStr = row.enableFlag ? "停用" : "启用";
+    //   this.$confirm(`是否${enableStr}${row.name}？`, "提示", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "warning"
+    //   }).then(async () => {
+
+    //   });
+    // },
     messageTips(title, res) {
       if (res.code == 200) {
         this.$message.success(title + "成功");
       } else {
         this.$message.error(res.msg);
       }
-    },
-    submitReset() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          subjectUpset({
-            tenantId: 1,
-            ...this.form
-          }).then((res) => {
-            if (res.code == 200) {
-              this.messageTips("修改", res);
-              this.categoryVisible = false;
-              this.getList();
-            }
-          });
-        }
-      });
-    },
-    addCategory() {
-      this.form.id = null;
-      this.form.name = null;
-      this.form.parentSubjectId = null;
-      this.form.img = null;
-      this.categoryVisible = true;
-    },
-    //上传图片成功
-    cropSuccess(data) {
-      this.form.img = data.data.url;
-    },
-  },
+    }
+    // submitReset() {
+    //   this.$refs.form.validate(valid => {
+    //     if (valid) {
+    //       subjectUpset({
+    //         tenantId: 1,
+    //         ...this.form
+    //       }).then(res => {
+    //         if (res.code == 200) {
+    //           this.messageTips("修改", res);
+    //           this.categoryVisible = false;
+    //           this.getList();
+    //         }
+    //       });
+    //     }
+    //   });
+    // },
+  }
 };
 </script>
-<style lang='scss' scoped>
-</style>
-
+<style lang="scss" scoped></style>

vue.config.js

@@ -16,7 +16,7 @@ const name = defaultSettings.title || "管乐迷后台管理系统"; // page tit
 // http://47.99.212.176:8000
 //  https://online.dayaedu.com
 // let target = "https://online.dayaedu.com"; //线上
-// let target = 'http://192.168.3.20:8000' //邹璇
+// let target = "http://192.168.3.43:8805"; //邹璇
 // let target = "http://192.168.0.127:8000"; //勇哥
 // let target = "http://192.168.3.14:8005"; // 原谅
 let target = "https://dev.gym.lexiaoya.cn"; //测试环境