Przeglądaj źródła

1.优化筛选统计组件css效果2.关联试卷(业务层级-超出3显示popover)

xiexaing 1 rok temu
rodzic
commit
f282129ff1

+ 16 - 3
src/components/Comon/pictureList.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="dis_flex_order_li">
-    <div class="list" v-for="(item, index) in list" :key="index" @click="backFunc(item)">
+    <div
+      class="list"
+      :class="{ 'listHover': item.hover}"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="backFunc(item)"
+      @mouseover="item.hover = true"
+      @mouseleave="item.hover = false"
+    >
       <img :src="backFullSrc(item.img)" alt="" />
       <div class="right">
-        <h4>
+        <h4 :style="{ color: item.hover ? '#309bff': ''}">
           {{ item.label }}
           <span
             v-if="item.label === '盈亏' && info[item.prop] !== 0"
@@ -60,19 +68,24 @@ export default {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  .listHover{
+    border: 1px solid #309bff !important;
+  }
   & > .list {
+    border: 1px solid transparent;
     user-select: none;
     cursor: pointer;
     background-color: rgb(243, 249, 255);
     padding: 4px;
     width: 170px;
     height: 60px;
-    border-radius: 3px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-right: 10px;
     margin-bottom: 15px;
+
     & > img {
       margin-left: 10px;
       width: 36px;

+ 3 - 14
src/views/education/classManageMent/classList/trainee/index.vue

@@ -217,6 +217,7 @@ export default {
           prop: "notPlush",
           num: true,
           color: "#ff7a38",
+          hover: false,
         },
       ],
       // 表单
@@ -593,7 +594,7 @@ export default {
         .finally(() => {
           this.loading = false;
         });
-      this.$api.periodPlush({ gradeId: data.gradeId }).then((res) => {
+      this.$api.periodPlush(data).then((res) => {
         const { plush, notPlush } = res.data
         this.info = {
           plush: plush,
@@ -605,20 +606,8 @@ export default {
       this.search(2);
     },
     pictureFunc(item) {
-      if (item.prop == "plush") {
-        this.formData = {
-          pageSize: 10,
-          pageNum: 1,
-          periodPlush: 1,
-        };
-        this.search();
-      }
       if (item.prop == "notPlush") {
-        this.formData = {
-          pageSize: 10,
-          pageNum: 1,
-          periodPlush: 0,
-        };
+        this.$set(this.formData, 'periodPlush', 0)
         this.search();
       }
     },

+ 1 - 0
src/views/finance/invoiceManage/index.vue

@@ -205,6 +205,7 @@ export default {
           prop: "unApplyNum",
           num: true,
           color: "#ff7a38",
+          hover: false,
         },
       ],
       //搜索

+ 2 - 0
src/views/finance/orderManage/index.vue

@@ -188,6 +188,7 @@ export default {
           prop: "unCheckOrderNum",
           num: true,
           color: "#ff7a38",
+          hover: false,
         },
         {
           label: "待审退款",
@@ -195,6 +196,7 @@ export default {
           prop: "unRefundNum",
           num: true,
           color: "#ff7a38",
+          hover: false,
         },
       ],
       //搜索

+ 31 - 17
src/views/resource/videoManagement/courseManagement/chapterContent/index.vue

@@ -341,26 +341,34 @@
               :key="index"
               :label="item.label"
               align="center"
-              :show-overflow-tooltip="true"
               header-align="center"
             >
+            <!-- :show-overflow-tooltip="true" -->
               <template slot-scope="scope">
-                <ul v-if="item.scope === 'moreList'">
-                  <li
-                    v-for="(items, indexs) in scope.row['businessList']"
-                    :key="indexs"
-                  >
-                    {{
-                      items[item.prop1] +
-                      "-" +
-                      items[item.prop2] +
-                      "-" +
-                      items[item.prop3] +
-                      "-" +
-                      items[item.prop4]
-                    }}
-                  </li>
-                </ul>
+                <el-popover
+                  v-if="item.scope === 'moreList'"
+                  placement="right-end"
+                  trigger="hover"
+                >
+                  <ul>
+                    <li
+                      v-for="(items, indexs) in scope.row['businessList']"
+                      :key="indexs"
+                    >
+                      {{ getBusinessName(items, item) }}
+                    </li>
+                  </ul>
+                  <ul slot="reference" style="cursor: pointer;">
+                    <li
+                      v-for="(items, indexs) in scope.row['businessList'].slice(0, 3)"
+                      :key="indexs"
+                    >
+                      {{ getBusinessName(items, item) }}
+                    </li>
+                    等{{ scope.row['businessList'].length }}份试卷
+                  </ul>
+                </el-popover>
+                
                 <span v-else-if="item.scope === 'status'">{{
                   scope.row[item.prop] === 1
                     ? "发布"
@@ -568,6 +576,12 @@ export default {
         return setTs;
       };
     },
+    // 获取业务层次列全称
+    getBusinessName: function() {
+      return function(items, item) {
+        return `${items[item.prop1]}-${items[item.prop2]}-${items[item.prop3]}-${items[item.prop4]}`
+      }
+    }
   },
   mounted() {
     this.$api