修改

src/pages/sale/saleTask.vue

@@ -25,12 +25,45 @@
             </div>
           </q-td>
         </template>
+
+        <template v-slot:body-cell-DetailsList="props">
+          <q-td auto-width :props="props">
+            <template v-if="props.row.DetailsList">
+              <template v-if="props.row.DetailsList.length==1">
+                {{props.row.DetailsList[0].TargetName}}
+              </template>
+              <template v-if="props.row.DetailsList.length>1">
+                {{props.row.DetailsList[0].TargetName}}：
+                <span class="otherTask">
+                  {{props.row.DetailsList.length}}
+                  <q-popup-proxy>
+                    <q-banner>
+                      <table class="saleTaskTable" style="border-collapse:collapse;">
+                        <tr>
+                          <th>课程名称</th>
+                        </tr>
+                        <tr v-for="(sItem,sIndex) in props.row.DetailsList" :key="sIndex"
+                          style="border-bottom:1px dashed #d1d1d1;">
+                          <td>{{sItem.TargetName}}</td>
+                        </tr>
+                      </table>
+                    </q-banner>
+                  </q-popup-proxy>
+                </span>
+              </template>
+              <template v-if="props.row.DetailsList.length==0">
+                无
+              </template>
+            </template>
+          </q-td>
+        </template>
+
         <template v-slot:body-cell-optioned="props">
           <q-td>
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
               @click="EditTask(props.row)" />
-            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400"
-            label="删除" @click="RemoveTask(props.row.Id)" />
+            <q-btn flat size="xs" icon="delete" color="negative" style="font-weight:400" label="删除"
+              @click="RemoveTask(props.row.Id)" />
           </q-td>
         </template>
         <template v-slot:bottom>
@@ -81,6 +114,12 @@
             field: 'TaskStartTimeStr',
             align: 'left',
           },
+          {
+            name: 'DetailsList',
+            label: '关联其他课程',
+            field: 'DetailsList',
+            align: 'left',
+          },
           {
             name: 'CreateByName',
             label: '创建人',
@@ -186,6 +225,30 @@
 </script>
 
 <style lang="sass">
-  @import url('~assets/css/table.sass')
+  @import url('~assets/css/table.sass') 
+</style>
+<style lang="scss">
+  .otherTask {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    line-height: 25px;
+    border: 1px solid #2961FE;
+    border-radius: 50%;
+    cursor: pointer;
+    color: #2961FE;
+  }
+  .saleTaskTable {
+    width: 400px;
+    text-align: center;
+  }
+  .saleTaskTable tr td {
+    height: 40px;
+  }
+  .saleTaskTable tr th {
+    height: 40px;
+    background-color: rgb(238, 238, 239);
+  }
 
 </style>