修改

src/pages/scheduling/mySchedule.vue

@@ -2,11 +2,12 @@
   .Mysche_Dian {
     width: 6px;
     height: 6px;
-    background-color: #6D97FF;
+    background-color: gray;
     border-radius: 50%;
-    margin-right: 10px;
   }
-
+  .sch_isWorked{
+    background-color: #6D97FF!important;
+  }
   .myPlan_List {
     display: flex;
     align-items: center;
@@ -16,7 +17,30 @@
     background-color: transparent;
     border: 0;
   }
-
+  .mySchPopDiv{
+    max-height: 300px;
+    overflow: auto;
+  }
+  .mySchpopTable td{
+    height:27px;
+  }
+  .mySchPopDiv::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background-color: #F5F5F5;
+  }
+  /*!*定义滚动条轨道 内阴影+圆角*!*/
+  .mySchPopDiv::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+  /*!*定义滑块 内阴影+圆角*!*/
+  .mySchPopDiv::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-color: #0ae;
+  }
 </style>
 <template>
   <div class="page-body">
@@ -39,14 +63,6 @@
     <div class="page-content">
       <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
         separator="none" title="我的排班计划" :data="dataList" :columns="columns" row-key="name">
-        <template v-slot:body-cell-PlanList="props">
-          <q-td>
-            <div v-for="(item,index) in props.row.PlanList" class="myPlan_List">
-              <div class="Mysche_Dian"></div>
-              <div>{{item.ItemName}}</div>
-            </div>
-          </q-td>
-        </template>
         <template v-slot:body-cell-StatusStr="props">
           <q-td>
             <div v-if="props.row.Status==0" style="color:blue">
@@ -83,6 +99,30 @@
             </div>
           </q-td>
         </template>
+        <template v-slot:body-cell-PlanList="props">
+          <q-td>
+          <el-popover placement="bottom" popper-class="mySchePop" width="300" trigger="click">
+            <div class="mySchPopDiv">
+              <table class="mySchpopTable" style="width:100%;">
+                <tr v-for="item in props.row.PlanList">
+                  <td style="width:10px;">
+                    <div class="Mysche_Dian" :class="{'sch_isWorked':item.IsChecked==1}"></div>
+                  </td>
+                  <td>
+                    {{item.ItemName}}
+                  </td>
+                  <td style="width:40px;text-align:center;">
+                    <img v-if="item.IsChecked==1" style="width:20px;height:20px;" src="../../assets/images/da_gou.png" />
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <div slot="reference" style="cursor:pointer;text-align:center;">
+              {{getWorked(props.row.PlanList)}}/{{props.row.PlanList.length}}
+            </div>
+          </el-popover>
+          </q-td>
+        </template>
         <template v-slot:bottom>
           <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
             :input="true" @input="changePage" />
@@ -247,8 +287,17 @@
             Shift: item.Shift
           }
         });
+      },
+      //已经完成的
+      getWorked(PlanList){
+        let count = 0;
+        PlanList.forEach(x=>{
+          if(x.IsChecked==1){
+            count = count+1 ;
+          }
+        })
+        return count;
       }
-
     },
   }