浏览代码

Merge branch 'develop' of http://39.106.8.246:3003/web/persagy_topo_editer into develop

YaolongHan 4 年之前
父节点
当前提交
1660bb17fe
共有 4 个文件被更改,包括 62 次插入31 次删除
  1. 二进制
      src/assets/images/more.png
  2. 二进制
      src/assets/images/tips.png
  3. 25 18
      src/components/homeView/topoImageCard.vue
  4. 37 13
      src/views/home.vue

二进制
src/assets/images/more.png


二进制
src/assets/images/tips.png


+ 25 - 18
src/components/homeView/topoImageCard.vue

@@ -1,9 +1,9 @@
 <!--拓扑图缩略图卡片-->
 <template>
-  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
+  <el-card :class="{'box-card': true, 'active': data.checked}" shadow="hover" :body-style="{ padding: '0px' }">
     <img :src="data.img" class="image">
     <div class="shadow image">
-      <el-checkbox v-model="data.checked" class="shadowCheck"></el-checkbox>
+      <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
     </div>
     <div class="content">
       <div>
@@ -13,11 +13,11 @@
             <p>版本: {{data.version}}</p>
             <p>更新时间: {{data.updateTime}}</p>
             <p>更新人: {{data.putUser}}</p>
-            <span slot="reference"><i class="el-icon-warning-outline"></i></span>
+            <span slot="reference"><img :src="require('@/assets/images/tips.png')" style="width: 20px;height:20px" /></span>
           </el-popover>
           <el-dropdown :hide-on-click="false" placement="bottom-start" trigger="click">
             <span class="el-dropdown-link">
-              <span><i class="iconfont icon-guanxi"></i></span>
+              <img :src="require('@/assets/images/more.png')" style="width: 20px;height:20px" />
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-for="t in moreList" :key="t.name">{{t.label}}</el-dropdown-item>
@@ -33,10 +33,10 @@
 </template>
 <script>
 export default {
-  props:{
-    data:{
+  props: {
+    data: {
       type: Object,
-      default: ()=>{
+      default: () => {
         return {}
       }
     }
@@ -53,6 +53,11 @@ export default {
       checked: false
     };
   },
+  methods: {
+    changeCheck() {
+      this.$emit('changeCheck', this.data)
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -64,9 +69,18 @@ export default {
   margin-right: 20px;
   margin-bottom: 20px;
   cursor: pointer;
-  &:hover {
+  &:hover,
+  &.active {
     border-color: #0091ff80;
     box-shadow: 0px 8px 16px 0px rgba(195, 199, 203, 0.4);
+    .shadow {
+      display: block;
+    }
+    .content {
+      .func {
+        display: block;
+      }
+    }
   }
   .image {
     width: 100%;
@@ -79,7 +93,7 @@ export default {
     top: 0;
     left: 0;
     background-color: #8d939926;
-    .shadowCheck{
+    .shadowCheck {
       position: absolute;
       top: 8px;
       left: 12px;
@@ -103,8 +117,9 @@ export default {
       }
       display: none;
       float: right;
+      vertical-align: middle;
       i {
-        font-size: 12px;
+        font-size: 20px;
       }
     }
     .tags {
@@ -124,14 +139,6 @@ export default {
       }
     }
   }
-  &:hover {
-    .shadow {
-      display: block;
-    }
-    .func {
-      display: block;
-    }
-  }
 }
 .customPop {
   p {

+ 37 - 13
src/views/home.vue

@@ -14,7 +14,7 @@
       <!-- 展示部分 -->
       <el-main class="main">
         <div class="main-head">
-          <div class="showType" v-show="!1">
+          <div class="showType" v-show="!selectCard.length">
             <el-radio-group v-model="isPub" size="small">
               <el-radio-button label="已发布">已发布</el-radio-button>
               <el-radio-button label="未发布">未发布</el-radio-button>
@@ -27,17 +27,19 @@
               </Dropdown>
             </div>
           </div>
-          <div class="showAction" v-show="1">
-            <el-checkbox v-model="checkAll">全选</el-checkbox>
-            <span class="sum">已选择<span style="color:#252b30">{{selectCard.length}}<span>项目</span>
-                <el-button size="mini">移动到</el-button>
-                <el-button size="mini">下载</el-button>
-                <el-button size="mini">删除</el-button>
+          <div class="showAction" v-show="selectCard.length">
+            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"  @change="handleCheckAllChange">全选</el-checkbox>
+            <span style="margin-left: 10px;">|</span>
+            <span class="sum">已选择<span style="color:#252b30;margin: 0 5px;">{{selectCard.length}}</span>项目</span>
+            <el-button size="mini">移动到</el-button>
+            <el-button size="mini">下载</el-button>
+            <el-button size="mini">删除</el-button>
+            <i class="el-icon-close" style="float:right;line-height: 100%"></i>
           </div>
         </div>
         <div class="main-body">
           <template v-for="t in cardList">
-            <topoImageCard :data="t" :key="t.id"></topoImageCard>
+            <topoImageCard :data="t" :key="t.id" @changeCheck="changeCheck"></topoImageCard>
           </template>
         </div>
       </el-main>
@@ -186,6 +188,7 @@ export default {
       ],
       checkAll: false,
       selectCard: [],
+      isIndeterminate: true, // 全选按钮
     };
   },
   methods: {
@@ -211,6 +214,23 @@ export default {
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
+    changeCheck(v){
+      const index = this.selectCard.indexOf(v);
+      console.log(index);
+      if (index > -1) {
+        this.selectCard.splice(index, 1);
+      } else {
+        this.selectCard.push(v);
+      }
+    },
+    handleCheckAllChange(val) {
+      this.cardList = this.cardList.map(t => {
+        t.checked = val
+        return t;
+      }) 
+      this.selectCard = val ? this.cardList.map(t => {t.checked = true}) : [];
+      this.isIndeterminate = false;
+    },
   },
   components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
 };
@@ -236,14 +256,16 @@ export default {
       width: 100%;
       height: 100%;
       background: #fff;
-      padding: 10px 20px;
+      padding: 5px 20px;
       box-sizing: border-box;
       .main-head {
         position: relative;
         width: 100%;
-        margin-bottom: 10px;
+        height: 46px;
+        margin-bottom: 5px;
         .showType {
           width: 100%;
+          padding: 7px 0;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -269,11 +291,13 @@ export default {
           }
         }
         .showAction {
+          background: #e1f2ff;
+          border-radius: 4px;
+          border: 1px solid #82c7fc;
+          padding: 8px;
           span.sum {
-            border-left: 1px solid #ccc;
-            margin: 0 8px;
+            margin: 0 10px;
             color: #778089;
-            padding-left: 14px;
           }
         }
       }