dev center完成大部分功能还有业务问题和bug

Author: 张晨曦

web/src/apps/workflows/assets/img/void_page.png

@@ -76,6 +76,28 @@
         @include border-color($primary-color, $dark-primary-color);
       }
     }
+    .project-nav-tree-bottom {
+      width: 100%;
+      height: 34px;
+      padding: 0 15px;
+      margin-top: 8px;
+      line-height: 34px;
+      .project-nav-add {
+        line-height: 34px;
+        text-align: center;
+        height: 34px;
+        border: 1px dashed #dee4ec;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+        font-weight: 400;
+        cursor: pointer;
+        &:hover {
+          background-color: #2E92F7;
+          color: #fff;
+        }
+      }
+    }
     .project-nav-tree {
       position: absolute;
       width: 250px;
@@ -131,7 +153,7 @@
   }
   .workflowListContainer {
     display: flex;
-    margin: 0 $padding-25;
+    // margin: 0 $padding-25;
     min-height: 100%;
     padding: $padding-25;
     border: $border-width-base $border-style-base $border-color-base;

web/src/apps/workflows/assets/styles/workflow.scss

@@ -10,6 +10,18 @@
   &.tree-fold {
     margin-left: 0px;
   }
+  .tap-menu {
+    min-width: 98px;
+    height: 40px;
+    box-sizing: border-box;
+    line-height: 40px;
+    text-align: center;
+    padding: 0 12px;
+    // &.active {
+    //   border-top: 1px solid #2e92f7;
+    // }
+  }
+
   .tap-bar {
     // background: #fff;
     &.tree-fold {
@@ -45,7 +57,6 @@
       }
     }
     .bottomTapList {
-      padding: 0px 16px;
       border-bottom: $border-width-base $border-style-base $border-color-base;
       @include border-color(
         $background-color-base,

web/src/apps/workflows/module/common/tabList/index.scss

@@ -60,6 +60,19 @@
             {{ currentButton.dicName }}
           </div> -->
           <div class="bottomRightContainer">
+            <div class="tap-menu">
+              <Dropdown @on-click="swtichMenu">
+                <a href="javascript:void(0)">
+                  {{ currentMenu }}
+                  <Icon type="ios-arrow-down"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                  <DropdownItem name='dev_center'>开发中心</DropdownItem>
+                  <DropdownItem name='devOps_center'>运维中心</DropdownItem>
+                  <DropdownItem name='calc_center'>实时计算中心</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            </div>
             <template v-for="(work, index) in bottomTapList">
               <div
                 :key="work.tabId"
@@ -149,7 +162,13 @@ export default {
   },
   data() {
     return {
-      currentButton: {}
+      currentButton: {},
+      menuList: {
+        'dev_center': '开发中心',
+        'devOps_center': '运维中心',
+        'calc_center': '实时计算中心',
+      },
+      currentMenu: '开发中心'
     };
   },
   computed: {},
@@ -198,6 +217,9 @@ export default {
     },
     menuHandleChangeButton() {
       this.$emit("menuHandleChangeButton");
+    },
+    swtichMenu(name) {
+      this.currentMenu = this.menuList[name]
     }
   }
 };

web/src/apps/workflows/module/common/tabList/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="void-page-wrap">
+    <div class="void-page-main">
+      <div class="void-page-main-img">
+        <img src="../../../assets/img/void_page.png" alt="空页面" />
+      </div>
+      <div class="void-page-main-title">
+        <span>{{ tipTitle }}</span>
+      </div>
+      <div class="void-page-main-button">
+        <Button
+          icon="md-add"
+          @click.stop="buttonClick"
+          class="void-page-main-button-item"
+          >{{ tipTitle.slice(-3) === "工作流" ? "添加工作流" : "添加项目" }}</Button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VoidPage',
+  props: {
+    tipTitle: String,
+    buttonClick: {
+      type: Function,
+      default: () => {}
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/common/style/variables.scss";
+
+.void-page-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  .void-page-main {
+    &-title {
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.45);
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 28px;
+      font-weight: 400;
+      margin-top: 24px;
+      margin-bottom: 16px;
+    }
+    &-button {
+      min-width: 106px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      &-item {
+        background: #2e92f7;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

web/src/apps/workflows/module/common/voidPage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-bgc">
-    <div v-if="!dataMapModule">
-      <template v-if="dataList.length > 0">
+    <div v-if="!dataMapModule" style="width: 100%; height: 100%">
+      <template v-if="dataList[0]['dwsFlowList'] && dataList[0]['dwsFlowList'].length > 0">
         <project-content-item
           ref="projectConentItem"
           v-for="item in dataList"
@@ -62,16 +62,23 @@
           <slot name="tagList"></slot>
         </project-content-item>
       </template>
+
       <template v-else>
-        <div class="no-data">
+        <VoidPage
+            tipTitle="该项目下没有工作流，请先添加一个工作流"
+            :buttonClick="ProjectMergeAdd"
+          />
+      </template>
+
+        <div class="no-data" v-show="dataList.length <= 0">
           <img
             class="no-data-img"
             src="../../../../dss/assets/images/no-data.svg"
             :alt="$t('message.workflow.searchWorkflow')"
           />
           <div>{{ $t("message.workflow.searchWorkflow") }}</div>
         </div>
-      </template>
+
     </div>
     <div class="process-bar" v-else>
       <dataMap
@@ -168,6 +175,7 @@ import commonModule from "@/apps/workflows/module/common";
 import WorkflowForm from "./module/workflowForm.vue";
 import WorkflowFormNew from "./module/workflowFormNew.vue";
 import VersionDetail from "./module/versionDetail.vue";
+import VoidPage from '../common/voidPage/index.vue'
 import storage from "@/common/helper/storage";
 import api from "@/common/service/api";
 import pinyin from "pinyin";
@@ -204,7 +212,8 @@ export default {
     WorkflowFormNew,
     VersionDetail,
     dataMap,
-    publishComponent
+    publishComponent,
+    VoidPage
   },
   data() {
     return {

web/src/apps/workflows/module/workflow/index.vue

@@ -122,6 +122,7 @@ export default {
     },
     ProjectMergeConfirm(orchestratorData) {
       orchestratorData.dssLabels = [this.getCurrentDsslabels()];
+      orchestratorData.labels = { route: this.getCurrentDsslabels() };
       if (this.checkName(this.flowList, orchestratorData.orchestratorName, orchestratorData.id)) return this.$Message.warning(this.$t('message.workflow.nameUnrepeatable'));
       api.fetch(`${this.$API_PATH.PROJECT_PATH}createOrchestrator`, orchestratorData, 'post').then(() => {
         this.$Message.success(this.$t('message.workflow.createdSuccess'));
@@ -185,4 +186,4 @@ export default {
   padding: 120px 0;
   @include font-color(#515a6e, $dark-text-color);
 }
-</style>
+</style>