勇哥优化和 样式修改

1

src/components/copy-text/index.vue

@@ -1,60 +1,74 @@
 <template>
-  <span class="copy" v-if="content">
-    <slot/>{{text}}
-    <i v-if="!!content" @click.stop="copyText" title="复制" class="el-icon-document-copy"></i>
+  <span>
+    <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: "100%",
+    },
   },
   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{
+.copy {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  .el-icon-document-copy {
     cursor: pointer;
   }
 }

src/views/accompaniment/index.vue

@@ -40,20 +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"
@@ -68,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>
@@ -131,22 +150,19 @@
           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 ? '收费' : '免费' }}
+            {{ scope.row.rankIds ? "收费" : "免费" }}
           </template>
         </el-table-column>
-        <el-table-column
-          align="center"
-          label="伴奏状态"
-          width="180px"
-        >
+        <el-table-column align="center" label="节拍器" width="180px">
           <template slot-scope="scope">
-            {{ scope.row.showFlag ? '启用' : '停用' }}
+            {{ scope.row.isOpenMetronome ? "播放" : "不播放" }}
+          </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
@@ -155,11 +171,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
@@ -184,7 +200,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
@@ -193,10 +211,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)"
@@ -250,7 +267,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>
@@ -263,9 +286,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: {
@@ -286,10 +309,10 @@ export default {
         search: "",
         type: "",
         subjectId: "",
-        categoriesId: null,
-        clientType:'',
+        categoriesId: [],
+        clientType: "",
         rankType: null,
-        showFlag: null
+        showFlag: null,
       },
       rules: {
         // 分页规则
@@ -302,11 +325,12 @@ export default {
       visible: false,
       tree: [],
       treeProps: {
-        value: 'id',
-        label: 'name',
-        children: 'sysMusicScoreCategoriesList',
-        checkStrictly: true
-      }
+        value: "id",
+        label: "name",
+        children: "sysMusicScoreCategoriesList",
+        checkStrictly: true,
+        expandTrigger: "hover",
+      },
     };
   },
   computed: {
@@ -320,29 +344,30 @@ export default {
     },
   },
   async mounted() {
-      const { query,params } = this.$route;
-      if(params.categoriesId){
-       this.searchForm.categoriesId = [params.categoriesId];
+    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,
         });
@@ -363,8 +388,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
@@ -380,14 +410,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) {}
@@ -411,9 +441,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;
@@ -446,11 +497,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/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;