feat: 组织架构静态页面 (#1174)

TencentBlueKing · Aug 18, 2023 · 42e7fba · 42e7fba
1 parent 3dc8363
commit 42e7fba
Show file tree

Hide file tree

Showing 14 changed files with 970 additions and 358 deletions.
diff --git a/src/pages/src/css/tenantEditStyle.less b/src/pages/src/css/tenantEditStyle.less
@@ -0,0 +1,91 @@
+.operation-wrapper {
+  position: relative;
+  background: #f5f7fa;
+  .operation-content {
+    padding: 0 24px;
+    .operation-card {
+      list-style: none;
+      margin: 16px 0;
+      padding: 16px 20px 24px;
+      background: #fff;
+      box-shadow: 0 2px 4px 0 #1919290d;
+      border-radius: 2px;
+      .operation-content-title {
+        font-size: 14px;
+        color: #63656e;
+        font-weight: 700;
+        line-height: 40px;
+      }
+      .operation-content-info {
+        display: flex;
+        justify-content: space-between;
+        padding-right: 60px;
+        .operation-content-form {
+          .bk-input {
+            width: 420px;
+          }
+          :deep(.bk-form-error) {
+            width: 420px;
+            position: initial !important;
+          }
+        }
+      }
+      :deep(.bk-form-item) {
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      .item-style {
+        :deep(.bk-form-label) {
+          float: unset;
+          width: 100%;
+          text-align: left;
+        }
+        :deep(.bk-form-content) {
+          margin-left: 0 !important;
+          .bk-form-error {
+            left: 145px;
+          }
+        }
+      }
+      .operation-content-table {
+        margin-top: 16px;
+        :deep(.bk-table-body) {
+          .cell {
+            padding: 0 !important;
+            .bk-form-item {
+              margin-bottom: 0;
+              .bk-form-content {
+                margin-left: 0 !important;
+                .bk-input {
+                  height: 42px;
+                  border-color: transparent;
+                }
+                .bk-input:hover:not(.is-disabled) {
+                  border-color: #3a84ff;
+                }
+              }
+            }
+            .user-icon {
+              color: #dcdee5;
+              &:hover {
+                color: #c4c6cc;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    position: fixed;
+    bottom: 0;
+    height: 48px;
+    line-height: 48px;
+    padding: 0 24px;
+    .bk-button {
+      width: 88px;
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/src/pages/src/css/tenantViewStyle.less b/src/pages/src/css/tenantViewStyle.less
@@ -0,0 +1,66 @@
+.details-info-wrapper {
+  padding: 24px;
+  height: calc(100vh - 140px);
+  .details-info-content {
+    background: #fff;
+    padding: 0 24px;
+    box-shadow: 0 2px 4px 0 #1919290d;
+    border-radius: 2px;
+    .item-header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      .bk-button {
+        width: 64px;
+      }
+    }
+    .content-item {
+      padding-top: 24px;
+      border-bottom: 1px solid #eaebf0;
+      .item-title {
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .item-content {
+        padding: 20px 0 20px 0;
+        position: relative;
+        li {
+          line-height: 40px;
+          width: 100%;
+          font-size: 14px;
+          display: flex;
+          .key {
+            display: inline-block;
+            width: 180px;
+            text-align: right;
+          }
+          .value {
+            color: #313238;
+          }
+        }
+      }
+      .flex {
+        display: flex;
+        flex-wrap: wrap;
+        li {
+          width: 50%;
+        }
+        img {
+          position: absolute;
+          width: 72px;
+          height: 72px;
+          right: -160px;
+        }
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+      .user-info-table {
+        padding: 20px 0;
+        :deep(.bk-fixed-bottom-border) {
+          border-top: none;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/src/views/data-source/local-details/EditUser.vue b/src/pages/src/views/data-source/local-details/EditUser.vue
@@ -157,7 +157,7 @@ const handleSubmit = () => {}
 
   .add-user-form {
     position: relative;
-    padding: 28px 40px 40px;
+    padding: 28px 40px 60px;
     .bk-upload {
       position: absolute;
       top: 54px;

diff --git a/src/pages/src/views/data-source/local-details/PswInfo.vue b/src/pages/src/views/data-source/local-details/PswInfo.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="account-info-wrapper user-scroll-y">
-    <ul class="account-info-content">
+  <div class="details-info-wrapper user-scroll-y">
+    <ul class="details-info-content">
       <li class="content-item">
         <div class="item-header">
           <p class="item-title">账号信息</p>
-          <bk-button outline theme="primary">
+          <bk-button outline theme="primary" @click="handleClickEdit">
             编辑
           </bk-button>
         </div>
@@ -43,6 +43,7 @@
 
 <script setup lang="tsx">
 import { reactive } from "vue";
+import router from "@/router";
 
 const accountMap = {
   account_validity: "账号有效期",
@@ -124,57 +125,14 @@ const state = reactive({
     },
   ],
 });
+
+const handleClickEdit = () => {
+  router.push({
+    name: "newLocal",
+  });
+}
 </script>
 
 <style lang="less" scoped>
-.account-info-wrapper {
-  padding: 24px;
-  .account-info-content {
-    background: #fff;
-    padding: 0 24px;
-    .item-header {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      .bk-button {
-        width: 64px;
-      }
-    }
-    .content-item {
-      padding-top: 24px;
-      border-bottom: 1px solid #EAEBF0;
-      .item-title {
-        font-size: 14px;
-        font-weight: 700;
-      }
-      .item-content {
-        padding: 20px 0 20px 0;
-        li {
-          line-height: 40px;
-          width: 100%;
-          font-size: 14px;
-          display: flex;
-          .key {
-            display: inline-block;
-            width: 180px;
-            text-align: right;
-          }
-          .value {
-            color: #313238;
-          }
-        }
-      }
-      .flex {
-        display: flex;
-        flex-wrap: wrap;
-        li {
-          width: 50%;
-        }
-      }
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-}
+@import "@/css/tenantViewStyle.less";
 </style>
diff --git a/src/pages/src/views/data-source/local-details/UserInfo.vue b/src/pages/src/views/data-source/local-details/UserInfo.vue
@@ -218,7 +218,6 @@ const handleBeforeClose = async () => {
     }
   }
   :deep(.bk-modal-content) {
-    max-height: calc(100vh - 100px) !important;
     overflow-y: auto;
 
     &::-webkit-scrollbar {

diff --git a/src/pages/src/views/data-source/local-details/ViewUser.vue b/src/pages/src/views/data-source/local-details/ViewUser.vue
@@ -17,7 +17,7 @@
         :src="tenantsData.logo"
         alt=""
       />
-      <img v-else class="user-logo" src="../../../images/avatar.png" alt="" />
+      <img v-else class="user-logo" src="@/images/avatar.png" alt="" />
     </li>
   </ul>
 </template>

diff --git a/src/pages/src/views/data-source/new-data/NewLocalData.vue b/src/pages/src/views/data-source/new-data/NewLocalData.vue
@@ -143,7 +143,7 @@
       </template>
       <div class="btn">
         <bk-button theme="primary" class="mr8">提交</bk-button>
-        <bk-button>取消</bk-button>
+        <bk-button @click="handleClickCancel">取消</bk-button>
       </div>
     </bk-form>
   </div>
@@ -153,6 +153,7 @@
 import MainBreadcrumbsDetails from "@/components/layouts/MainBreadcrumbsDetails.vue";
 import { useRoute } from "vue-router";
 import { computed, ref, reactive } from "vue";
+import router from "@/router";
 
 const route = useRoute();
 
@@ -217,6 +218,10 @@ const dataSourceConfig = reactive({
     { value: 15, label: "15天" },
   ],
 });
+
+const handleClickCancel = () => {
+  router.go(-1);
+}
 </script>
 
 <style lang="less" scoped>