update src/views/report/DialogSiteSelection.vue

Strides-Admin/src/views/report/DialogSiteSelection.vue

@@ -31,7 +31,7 @@
       </el-button>
     </div>
     <div class="flexr flex1">
-      <div class="flex1 flexl">
+      <div class="flex1 flexl" style="height: 100%;">
         <div class="table-view" v-loading="listLoading">
           <el-table
             :data="siteList"
@@ -75,27 +75,24 @@
         </div>
       </div>
       <div class="flex1 flexl" style="width: 30%; margin-left: 20px;">
+        <div class="selected-item header">
+          <div class="flex3">Select Site ({{selectedSite.length}})</div>
+          <div class="flex1">Action</div>
+        </div>
         <div class="table-view">
-          <el-table
-            :data="selectedSite"
-            height="100%">
-            <el-table-column
-              :label="'Select Site (' + selectedSite.length  + ')'"
-              prop="siteName"
-              align="center"
-              min-width="200"/>
-            <el-table-column
-              label="Action"
-              prop="siteAddress"
-              align="center"
-              width="88">
-              <template slot-scope="{row, $index}">
+          <div style="position: absolute;top: 0; left: 0;right: 0;">
+            
+            <div class="selected-item" v-for="(item,index) in selectedSite">
+              <div class="flex3">
+                <span>{{item.siteName}}</span>
+              </div>
+              <div class="flex1">
                 <TableAction
                   :showEdit="false"
-                  @delete="handleDeleteSite($index)"/>
-              </template>
-            </el-table-column>
-          </el-table>
+                  @delete="handleDeleteSite(index)"/>
+              </div>
+            </div>
+          </div>
         </div>
         <div style="height: 50px;"></div>
       </div>
@@ -111,10 +108,18 @@
       </el-button>
       <el-button
         type="primary"
-        @click="onHide">
+        @click="onHide"
+        style="margin-right: 30px;">
         SAVE
         <i class="el-icon-check el-icon--right"></i>
       </el-button>
+      <el-button
+        type="danger"
+        @click="onClear"
+        :disabled="selectedSite.length == 0">
+        CLEAR ALL
+        <i class="el-icon-delete el-icon--right"></i>
+      </el-button>
     </div>
   </el-dialog>
 </template>
@@ -194,6 +199,9 @@ export default {
     onHide() {
       this.$emit("hide", this.selectedSite);
     },
+    onClear() {
+      this.selectedSite = [];
+    },
     refreshList() {
       this.filter.pageNo = 1
       this.getList()
@@ -269,8 +277,26 @@ export default {
 }
 .site-selection-dialog .table-view {
   flex: 1;
+  position: relative;
   overflow-y: auto;
-  padding-top: 10px;
   margin-bottom: -10px;
 }
+.selected-item {
+  color: #606266;
+  display: flex;
+  padding: 12px 0;
+  font-size: 14px;
+  text-align: center;
+  align-items: center;
+}
+.selected-item.header {
+  color: #000;
+  padding: 15px 0;
+  font-weight: bold;
+  border-bottom: 1px solid #ccd0e7;
+  background-color: rgba(0,20,137,.2);
+}
+.selected-item:not(.header) + .selected-item {
+  border-top: 1px solid #eee;
+}
 </style>