Pārlūkot izejas kodu

卡片点击交互修改;下载功能

haojianlong 4 gadi atpakaļ
vecāks
revīzija
f11c1b9d17
2 mainītis faili ar 24 papildinājumiem un 7 dzēšanām
  1. 7 4
      src/components/homeView/topoImageCard.vue
  2. 17 3
      src/views/home.vue

+ 7 - 4
src/components/homeView/topoImageCard.vue

@@ -5,7 +5,7 @@
       <img :src="require('@/assets/images/noImg.png')" style="height:60px;">
     </div>
     <img class="image" v-else :src="`/image-service/common/image_get?systemId=dataPlatform&key=${data.pic}`">
-    <div class="shadow image" v-if="!isRecycle" @click="toEdit">
+    <div class="shadow image" v-if="!isRecycle" @click.stop="toEdit">
       <el-checkbox v-model="data.checked" class="shadowCheck" @change="changeCheck"></el-checkbox>
     </div>
     <div class="content">
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="tags">
-        <span v-for="i in data.label" :key="i">{{i}}</span>
+        <span v-for="(t,i) in data.label" :key="data.name + i">{{t}}</span>
       </div>
     </div>
   </el-card>
@@ -104,8 +104,11 @@ export default {
       }
     },
     // 进入编辑页面
-    toEdit() {
-      this.$emit("toEdit", this.data)
+    toEdit(e) {
+      const targetName = e.target.nodeName.toLowerCase();
+      if (targetName == 'div') {
+        this.$emit("toEdit", this.data)
+      }
     }
   },
 };

+ 17 - 3
src/views/home.vue

@@ -51,7 +51,7 @@
           <div class="has-data-body" v-if="cardList.length">
             <template v-for="t in cardList">
               <topoImageCard :isPub="isPub" :data="t" :key="t.id" @changeCheck="changeCheck" @rename="rename" @publishSuc="updateSuc" @moveTo="moveTo"
-                @delete="deleteGraph" @editTag="editTag" @toEdit="toEdit"></topoImageCard>
+                @delete="deleteGraph" @editTag="editTag" @toEdit="toEdit" @download="download"></topoImageCard>
             </template>
           </div>
           <div class="no-data-body" v-else style="margin-top: 112px;">
@@ -88,6 +88,7 @@ import deleteDialog from "@/components/homeView/deleteDialog"
 import tagDialog from "@/components/homeView/tagDialog"
 import recycle from "@/components/homeView/recycle"
 import createGraphDialog from "@/components/homeView/createGraphDialog"
+import { SNetUtil } from "@persagy-web/base"
 export default {
   name: "home",
   data() {
@@ -120,6 +121,7 @@ export default {
       noTreeFlag: true, // 左侧树是否有数据-默认有
       popVisible: false,
       categoryName: '', // 跳转编辑页面时分类名称
+      imgUrl: '/image-service/common/image_get?systemId=dataPlatform&key='
     };
   },
   methods: {
@@ -152,9 +154,21 @@ export default {
     groupMove() {
       this.$refs.move.showDialog(this.selectCard)
     },
-    // 下载
+    // 批量下载
     groupDownload() {
-      console.log('download');
+      if (this.selectCard.length) {
+        this.selectCard.forEach(t => {
+          this.download(t)
+        })
+      }
+    },
+    // 单独下载
+    download(data) {
+      if (data.pic) {
+        SNetUtil.downLoad(data.name + '.png', this.imgUrl + data.pic);
+      } else {
+        // this.$message.warning(`${data.name}未绘制`)
+      }
     },
     // 删除
     groupDelete() {