feat: 数据源配置联调 #1614 (#1629)

src/pages/src/app.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Message } from 'bkui-vue';
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import HeaderBox from './views/Header.vue';
@@ -18,8 +18,6 @@ const showName = ref(null);
 watch(() => route.name, (val) => {
   if (val === 'password' || val === 'resetPassword') {
     showName.value = val;
-  } else {
-    initUser();
   }
 });
 
@@ -28,7 +26,8 @@ const isLoading = ref(false);
 // 获取用户数据
 const user = useUser();
 
-const initUser = async () => {
+onMounted(() => {
+  if (showName.value) return;
   isLoading.value = true;
   currentUser()
     .then((res) => {
@@ -40,7 +39,7 @@ const initUser = async () => {
     .finally(() => {
       isLoading.value = false;
     });
-};
+});
 </script>
 
 <template>

src/pages/src/components/MemberSelector.vue

@@ -7,7 +7,7 @@
       placeholder="请输入"
       filterable
       multiple
-      showOnInit
+      show-on-init
       multiple-mode="tag"
       :remote-method="remoteFilter"
       enable-scroll-load

src/pages/src/views/data-source/SyncRecords.vue → src/pages/src/components/SyncRecords.vue

@@ -1,11 +1,6 @@
 <template>
   <div v-bkloading="{ loading: dataRecordConfig.loading, zIndex: 9 }" class="sync-records-wrapper user-scroll-y">
-    <span class="back-previous" @click="handleBack">
-      <i class="user-icon icon-arrow-left" />
-      {{ $t('返回上一页') }}
-    </span>
     <div class="data-record-content">
-      <p class="title">{{ $t('数据更新记录') }}</p>
       <bk-table
         class="user-info-table"
         :data="dataRecordConfig.list"
@@ -23,7 +18,7 @@
             @handleUpdate="getSyncRecordsList"
           />
         </template>
-        <bk-table-column prop="start_at" :label="$t('开始时间')" />
+        <bk-table-column prop="start_at" :label="$t('开始时间')" :width="160" />
         <bk-table-column prop="duration" :label="$t('耗时')">
           <template #default="{ row }">
             <span>{{ durationText(row.duration) }}</span>
@@ -39,7 +34,6 @@
             <span>{{ triggeMode[row.trigger] }}</span>
           </template>
         </bk-table-column>
-        <bk-table-column prop="data_source_name" :label="$t('数据源')" />
         <bk-table-column prop="status" :label="$t('状态')" :filter="{ list: updateStatusFilters }">
           <template #default="{ row }">
             <img :src="dataRecordStatus[row.status]?.icon" class="account-status-icon" />
@@ -68,7 +62,7 @@
       ext-cls="log-wrapper"
       :is-show="logConfig.isShow"
       :title="$t('日志详情')"
-      :width="960"
+      :width="800"
       quick-close
       :before-close="beforeClose"
     >
@@ -102,11 +96,17 @@ import Empty from '@/components/Empty.vue';
 import SQLFile from '@/components/sql-file/SQLFile.vue';
 import { getSyncLogs, getSyncRecords } from '@/http';
 import { t } from '@/language/index';
-import router from '@/router/index';
 import { dataRecordStatus } from '@/utils';
 
 const route = useRoute();
 
+const props = defineProps({
+  dataSource: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
 const dataRecordConfig = reactive({
   loading: false,
   list: [],
@@ -154,6 +154,7 @@ const getSyncRecordsList = async () => {
       page: pagination.current,
       pageSize: pagination.limit,
       status: dataRecordConfig.status,
+      id: props.dataSource?.id,
     };
     const res = await getSyncRecords(params);
     dataRecordConfig.list = res.data.results;
@@ -193,12 +194,6 @@ const durationText = (value) => {
   }
 };
 
-const handleBack = () => {
-  pagination.current = 1;
-  pagination.limit = 10;
-  router.push({ name: 'local' });
-};
-
 const dataRecordFilter = ({ checked }) => {
   if (checked.length === 0) {
     pagination.current = 1;
@@ -236,6 +231,7 @@ const interval = setInterval(() => {
     page: pagination.current,
     pageSize: pagination.limit,
     status: dataRecordConfig.status,
+    id: props.dataSource?.id,
   };
   getSyncRecords(params).then((res) => {
     dataRecordConfig.list = res.data.results;
@@ -256,7 +252,7 @@ onBeforeUnmount(() => {
 .sync-records-wrapper {
   width: 100%;
   height: calc(100vh - 140px);
-  padding: 16px 24px;
+  padding: 28px 30px;
 
   :deep(.user-info-table) {
     .bk-table-head {
@@ -326,7 +322,6 @@ onBeforeUnmount(() => {
   }
 
   .data-record-content {
-    padding: 0 24px 24px;
     background: #fff;
 
     .title {

src/pages/src/components/layouts/DataSourceCard.vue

@@ -1,62 +1,131 @@
 <template>
   <div class="card-wrapper">
-    <div class="card-header">
-      <div class="card-header-right">
-        <i :class="list.logo" />
-        <div>
-          <p class="title">{{ list.name }}</p>
-          <p class="subtitle">{{ list.description }}</p>
+    <div class="mb-[12px]" v-for="(item, index) in plugins" :key="index">
+      <div
+        v-if="dataSource?.plugin_id && index === 0"
+        :class="['card-header', { 'hidden-card': dataSource.plugin_id !== item.id }]"
+        v-bk-tooltips="{
+          content: $t('若需切换数据源需要先对当前已选数据源进行重置操作'),
+          delay: 300,
+          offset: 0,
+          disabled: dataSource.plugin_id === item.id,
+        }"
+        @click="handleClick(item.id)">
+        <div class="card-header-right">
+          <img :src="item.logo" />
+          <div>
+            <p class="title">{{ item.name }}</p>
+            <p class="subtitle">{{ item.description }}</p>
+          </div>
         </div>
+        <slot name="right" v-if="dataSource.plugin_id === item.id"></slot>
       </div>
-      <slot name="header"></slot>
-    </div>
-    <div :class="['card-content', { 'active-card-content': list.isShow }]">
-      <div class="step-bar">
-        <slot name="header"></slot>
-      </div>
-      <slot name="content"></slot>
+      <template v-else>
+        <div
+          v-if="isShow"
+          :class="['card-header', { 'hidden-card': config }]"
+          v-bk-tooltips="{
+            content: $t('若需切换数据源需要先对当前已选数据源进行重置操作'),
+            delay: 300,
+            offset: 0,
+            disabled: !config,
+          }"
+          @click="handleClick(item.id)">
+          <div class="card-header-right">
+            <img :src="item.logo" />
+            <div>
+              <p class="title">{{ item.name }}</p>
+              <p class="subtitle">{{ item.description }}</p>
+            </div>
+          </div>
+          <slot v-if="index === 0" name="right"></slot>
+        </div>
+      </template>
+      <slot v-if="index === 0" name="content"></slot>
     </div>
+    <p
+      v-if="dataSource?.plugin_id"
+      class="view-type"
+      @click="toggleState">
+      {{ text }}
+      <AngleDownLine class="ml-[8px]" />
+    </p>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
-  list: {
+import { bkTooltips as vBkTooltips } from 'bkui-vue';
+import { AngleDownLine } from 'bkui-vue/lib/icon';
+import { computed, ref, watch } from 'vue';
+
+import { t } from '@/language/index';
+
+const emit = defineEmits(['handleCollapse']);
+
+const props = defineProps({
+  plugins: {
+    type: Array,
+    default: () => ([]),
+  },
+  dataSource: {
     type: Object,
-    default: () => ({}),
+    default: () => {},
   },
-  activeId: {
-    type: String,
-    default: '',
+  config: {
+    type: Boolean,
+    default: false,
+  },
+  showContent: {
+    type: Boolean,
+    default: false,
   },
 });
+
+const handleClick = (id: string) => {
+  if (props.config && props.dataSource.plugin_id === 'local') return;
+  if (!props.config || props.dataSource.plugin_id === id || id !== 'local') {
+    emit('handleCollapse', id);
+  }
+};
+
+const isShow = ref(true);
+
+const text = computed(() => (isShow.value ? t('收起') : t('查看数据源类型')));
+
+watch(() => props.showContent, (val) => {
+  isShow.value = !val;
+});
+
+const toggleState = () => {
+  isShow.value = !isShow.value;
+};
 </script>
 
 <style lang="less" scoped>
 .card-wrapper {
-  margin-bottom: 12px;
-  background: #fff;
-
   .card-header {
     display: flex;
-    padding: 16px 24px;
+    padding: 16px;
+    margin-bottom: 2px;
+    background: #fff;
+    border: 1px solid #fff;
     border-radius: 2px;
     box-shadow: 0 2px 4px 0 #1919290d;
     align-items: center;
     justify-content: space-between;
 
     &:hover {
       cursor: pointer;
-      border: 1px solid #A3C5FD;
     }
 
     .card-header-right {
       display: flex;
       align-items: center;
 
-      i {
-        margin-right: 15px;
-        font-size: 18px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
       }
 
       .title {
@@ -70,6 +139,16 @@ defineProps({
         color: #979BA5;
       }
     }
+
+    &.hidden-card {
+      img, .title, .subtitle {
+        color: #C4C6CC;
+      }
+
+      &:hover {
+        border: 1px solid transparent;
+      }
+    }
   }
 
   .card-content {
@@ -88,5 +167,15 @@ defineProps({
   .active-card-content {
     display: block;
   }
+
+  .view-type {
+    font-size: 14px;
+    text-align: center;
+    cursor: pointer;
+
+    span {
+      transform: rotate(180deg);
+    }
+  }
 }
 </style>

src/pages/src/components/layouts/MainBreadcrumbsDetails.vue

@@ -3,6 +3,7 @@
     <slot>
       <div class="main-breadcrumbs-left">
         <i
+          v-if="showBack"
           class="user-icon icon-arrow-left main-breadcrumbs-back"
           @click="handleBack" />
         <span class="main-breadcrumbs-current">
@@ -12,9 +13,7 @@
             {{ subtitle }}
           </span>
         </span>
-        <slot name="tag" />
       </div>
-      <slot name="content" />
       <slot name="right" />
     </slot>
   </div>
@@ -42,6 +41,7 @@ store.customBreadcrumbs = true;
  * 当前面包屑展示文案
  */
 const current = computed(() => store.breadCrumbsTitle || route.meta.navName);
+const showBack = computed(() => route.meta.showBack);
 /**
  * back control
  */
@@ -66,6 +66,7 @@ const handleBack = () => {
   .main-breadcrumbs-left {
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   .main-breadcrumbs-back {

src/pages/src/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useMenuInfo';
 export * from './useTableFields';
 export * from './useTableMaxHeight';
 export * from './useAdminPassword';
+export * from './useDataSource';