Browse Source

增加无数据时展示

haojianlong 4 years ago
parent
commit
f9c598fffe

+ 1 - 0
src/components/homeView/createGraphDialog.vue

@@ -104,6 +104,7 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields();
+      this.outerVisible = false
     },
     // 创建拓扑图接口
     createDraftsGraph() {

+ 14 - 11
src/components/homeView/leftAsideTree.vue

@@ -17,11 +17,11 @@ export default {
       treeData: []
     };
   },
-  mounted(){
+  mounted() {
     this.getCategoryGraph();
   },
   methods: {
-    changeNode(data, node){
+    changeNode(data, node) {
       if (node.isLeaf) {
         this.$emit('changeNode', data)
       }
@@ -34,6 +34,9 @@ export default {
       };
       queryCategoryGraph(pa).then(res => {
         this.treeData = res.content;
+        if (!res.content.length) {
+          this.$emit('noTree')
+        }
       })
     }
   },
@@ -45,21 +48,21 @@ export default {
   width: 100%;
   height: calc(100% - 49px);
   padding-left: 6px;
-  .el-tree{
+  .el-tree {
     background: #f7f9fa;
-    /deep/ .el-tree-node{
+    /deep/ .el-tree-node {
       &.is-current {
-        & > .el-tree-node__content{
-          background: #E1F2FFFF;
-          color: #0091FFFF;
+        & > .el-tree-node__content {
+          background: #e1f2ffff;
+          color: #0091ffff;
         }
       }
-      .el-tree-node__content{
+      .el-tree-node__content {
         height: 38px;
         line-height: 38px;
-        &:hover{
-          background: #E1F2FFFF;
-          color: #0091FFFF;
+        &:hover {
+          background: #e1f2ffff;
+          color: #0091ffff;
         }
       }
     }

+ 28 - 5
src/views/home.vue

@@ -3,13 +3,19 @@
     <!-- 顶部导航栏 -->
     <el-header class="header">
       <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" />
-      <Button radius @click="createProject" type="primary" :text="'新建拓扑图'">primary</Button>
+      <el-popover placement="top" width="320" v-model="popVisible" popper-class="createPopper" trigger="manual">
+        <p>点击这里即可快速创建拓扑图。</p>
+        <div style="text-align: right; margin: 0">
+          <el-button size="mini" type="text" @click="popVisible=false">我知道了</el-button>
+        </div>
+        <el-button @click="createProject" slot="reference" size="small" type="primary">新建拓扑图</el-button>
+      </el-popover>
     </el-header>
     <!-- body部分 -->
     <el-container class="bodys">
       <!-- 左侧树状导航栏部分 -->
       <el-aside class="aside" width="200px">
-        <leftAsideTree ref="leftAsideTree" @changeNode="changeNode"></leftAsideTree>
+        <leftAsideTree ref="leftAsideTree" @changeNode="changeNode" @noTree="(noTreeFlag=false,popVisible=true)"></leftAsideTree>
         <div class="recycle" @click="showRecycleDialog">
           <img :src='require("@/assets/images/recycle.png")' />
           <span>回收站</span>
@@ -17,7 +23,7 @@
       </el-aside>
       <!-- 展示部分 -->
       <el-main class="main">
-        <div class="main-head">
+        <div class="main-head" v-if="noTreeFlag">
           <div class="showType" v-show="!selectCard.length">
             <el-radio-group v-model="isPub" size="small" @change="changePub">
               <el-radio-button :label="1">已发布</el-radio-button>
@@ -72,7 +78,7 @@
 </template>
 
 <script>
-import { Select, Button, Dropdown } from "meri-design";
+import { Select, Dropdown } from "meri-design";
 import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
 import topoImageCard from "@/components/homeView/topoImageCard.vue";
 import { queryDraftsGraph, queryPubGraph } from "@/api/home"
@@ -111,6 +117,8 @@ export default {
       selectCard: [], // 当前选中的卡片列表
       isIndeterminate: true, // 全选按钮
       curCategory: {}, // 当前选中的树节点
+      noTreeFlag: true, // 左侧树是否有数据-默认有
+      popVisible: false,
     };
   },
   methods: {
@@ -243,7 +251,7 @@ export default {
       }
     }
   },
-  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard, rename, move, deleteDialog, recycle, tagDialog, createGraphDialog },
+  components: { Select, leftAsideTree, Dropdown, topoImageCard, rename, move, deleteDialog, recycle, tagDialog, createGraphDialog },
   watch: {
     // 排序方式修改
     selVal(n, o) {
@@ -370,3 +378,18 @@ export default {
   }
 }
 </style>
+<style lang="less">
+.createPopper.el-popover {
+  background: #0091ffff;
+  color: #fff;
+  border-color: #0091ffff;
+  .el-button {
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 5px 8px;
+  }
+  .popper__arrow::after {
+    border-bottom-color: #0091ffff;
+  }
+}
+</style>