Merge pull request #89 from huangpeng0428/vue3-poloo-dev

fix: 优化12-12体验问题
TencentBlueKing · Dec 15, 2023 · 8cd869d · 8cd869d
2 parents a97d6a5 + becc455
commit 8cd869d
Show file tree

Hide file tree

Showing 20 changed files with 257 additions and 172 deletions.
diff --git a/src/dashboard-front-new/package.json b/src/dashboard-front-new/package.json
@@ -23,7 +23,7 @@
   "license": "ISC",
   "dependencies": {
     "art-template": "^4.13.2",
-    "bkui-vue": "0.0.2-beta.97",
+    "bkui-vue": "0.0.2-beta.109",
     "connect-history-api-fallback": "^2.0.0",
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",

diff --git a/src/dashboard-front-new/src/components/version-diff/index.vue b/src/dashboard-front-new/src/components/version-diff/index.vue
@@ -589,7 +589,7 @@ const getApigwVersions = async () => {
   try {
     const res = await getResourceVersionsList(apigwId.value, pageParams);
     res.results.forEach((item: any) => {
-      item.resource_version_display = `${item.version}(${item.comment})`;
+      item.resource_version_display = item.comment ? `${item.version}(${item.comment})` : item.version;
       item.stage_text = item.released_stages.map((item: any) => {
         return item.name;
       });

diff --git a/src/dashboard-front-new/src/hooks/use-getapi-data.ts b/src/dashboard-front-new/src/hooks/use-getapi-data.ts
@@ -9,6 +9,7 @@ const initPagination: IPagination = {
   count: 0,
 };
 const pagination = ref<IPagination>(initPagination);
+const dataList = ref<any[]>([]);
 
 export const useGetApiList = (filter: any) => {
   const getGatewaysListData = async () => {
@@ -19,7 +20,8 @@ export const useGetApiList = (filter: any) => {
         ...filter.value,
       };
       const res = await getGatewaysList(parmas);
-      return res.results;
+      dataList.value = res.results;
+      return dataList.value;
     } catch (error) {}
   };
 
@@ -34,5 +36,6 @@ export const useGetApiList = (filter: any) => {
 
   return {
     getGatewaysListData,
+    dataList,
   };
 };
diff --git a/src/dashboard-front-new/src/hooks/use-query-list.ts b/src/dashboard-front-new/src/hooks/use-query-list.ts
@@ -19,6 +19,7 @@ export function useQueryList(apiMethod: Function, filterData?: any, id?: number)
     offset: 0,
     limit: 10,
     count: 0,
+    small: false,
   };
 
   const pagination = ref<IPagination>({ ...initPagination });

diff --git a/src/dashboard-front-new/src/http/gateway.ts b/src/dashboard-front-new/src/http/gateway.ts
@@ -6,6 +6,9 @@ const { BK_DASHBOARD_URL, CREATE_CHAT_API, SEND_CHAT_API } = window;
 // 获取网关列表
 export const getGatewaysList = (data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/?${json2Query(data)}`);
 
+// 获取网关详情
+export const getGatewaysDetail = (apigwId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/`);
+
 // 新建网关
 export const createGateway = (data: any) => fetch.post(`${BK_DASHBOARD_URL}/gateways/`, data);
 

diff --git a/src/dashboard-front-new/src/store/common.ts b/src/dashboard-front-new/src/store/common.ts
@@ -40,6 +40,7 @@ export const useCommon = defineStore('common', {
         name: 'ANY',
       },
     ],
+    curApigwData: { allow_update_gateway_auth: false },
   }),
   actions: {
     setApigwId(apigwId: number) {
@@ -48,5 +49,9 @@ export const useCommon = defineStore('common', {
     setApigwName(name: string) {
       this.apigwName = name;
     },
+    setCurApigwData(data: any) {
+      this.curApigwData = data;
+      console.log('this.curApigwData', this.curApigwData);
+    },
   },
 });
diff --git a/src/dashboard-front-new/src/types/common.ts b/src/dashboard-front-new/src/types/common.ts
@@ -1,5 +1,6 @@
 // 分页interface
 export interface IPagination {
+  small?: boolean
   offset: number
   limit: number
   count: number

diff --git a/src/dashboard-front-new/src/views/home.vue b/src/dashboard-front-new/src/views/home.vue
@@ -9,7 +9,7 @@
         >
           {{ t('新建网关') }}
         </bk-button>
-        <bk-input class="ml10 mr10 search-input" v-model="filterNameData.name" placeholder="请输入网关名"></bk-input>
+        <bk-input class="ml10 mr10 search-input" v-model="filterNameData.keyword" placeholder="请输入网关名"></bk-input>
         <bk-select
           v-model="filterKey"
           :clearable="false"
@@ -28,86 +28,95 @@
       </div>
     </div>
     <div class="table-container">
-      <div class="table-header flex-row">
-        <div class="flex-1 of3">{{ t('网关名') }}</div>
-        <div class="flex-1 of1">{{ t('创建者') }}</div>
-        <div class="flex-1 of3">{{ t('环境列表') }}</div>
-        <div class="flex-1 of1 text-c">{{ t('资源数量') }}</div>
-        <div class="flex-1 of2">{{ t('操作') }}</div>
-      </div>
-      <div class="table-list">
-        <div
-          class="table-item flex-row align-items-center"
-          v-for="item in gatewaysList" :key="item.id"
-          :class="item.is24HoursAgo ? '' : 'newly-item'">
-          <div class="flex-1 flex-row align-items-center of3">
-            <div
-              class="name-logo mr10" :class="item.status ? '' : 'deact'"
-              @click="handleGoPage('apigwResource', item.id)">
-              {{ item.name[0].toUpperCase() }}
-            </div>
-            <span
-              class="name mr10" :class="item.status ? '' : 'deact-name'"
-              @click="handleGoPage('apigwResource', item.id)">
-              {{ item.name }}
-            </span>
-            <bk-tag theme="info" v-if="item.is_official">{{ t('官方') }}</bk-tag>
-            <bk-tag v-if="item.status === 0">{{ t('已停用') }}</bk-tag>
-          </div>
-          <div class="flex-1 of1">{{ item.created_by }}</div>
-          <div class="flex-1 of3 env">
-            <div class="flex-row">
+      <section v-if="gatewaysList.length">
+        <div class="table-header flex-row">
+          <div class="flex-1 of3">{{ t('网关名') }}</div>
+          <div class="flex-1 of1">{{ t('创建者') }}</div>
+          <div class="flex-1 of3">{{ t('环境列表') }}</div>
+          <div class="flex-1 of1 text-c">{{ t('资源数量') }}</div>
+          <div class="flex-1 of2">{{ t('操作') }}</div>
+        </div>
+        <div class="table-list">
+          <div
+            class="table-item flex-row align-items-center"
+            v-for="item in gatewaysList" :key="item.id"
+            :class="item.is24HoursAgo ? '' : 'newly-item'">
+            <div class="flex-1 flex-row align-items-center  of3">
+              <div
+                class="name-logo mr10" :class="item.status ? '' : 'deact'"
+                @click="handleGoPage('apigwResource', item.id)">
+                {{ item.name[0].toUpperCase() }}
+              </div>
               <span
-                v-for="(envItem, index) in item.stages" :key="envItem.id">
-                <bk-tag v-if="index < 3">
-                  <i :class="['ag-dot',{ 'success': envItem.released }]"></i>
-                  {{ envItem.name }}
-                </bk-tag>
+                class="name mr10" :class="item.status ? '' : 'deact-name'"
+                @click="handleGoPage('apigwResource', item.id)">
+                {{ item.name }}
               </span>
-              <bk-tag
-                v-if="item.stages.length > item.tagOrder"
-                class="tag-cls"
-                v-bk-tooltips="{ content: item?.labelText.join(';') }">
-                +{{ item.stages.length - item.tagOrder }}
-                <!-- ... -->
-              </bk-tag>
+              <bk-tag theme="info" v-if="item.is_official">{{ t('官方') }}</bk-tag>
+              <bk-tag v-if="item.status === 0">{{ t('已停用') }}</bk-tag>
+            </div>
+            <div class="flex-1 of1">{{ item.created_by }}</div>
+            <div class="flex-1 of3 env">
+              <div class="flex-row">
+                <span
+                  v-for="(envItem, index) in item.stages" :key="envItem.id">
+                  <bk-tag v-if="index < 3">
+                    <i :class="['ag-dot',{ 'success': envItem.released }]"></i>
+                    {{ envItem.name }}
+                  </bk-tag>
+                </span>
+                <bk-tag
+                  v-if="item.stages.length > item.tagOrder"
+                  class="tag-cls"
+                  v-bk-tooltips="{ content: item?.labelText.join(';') }">
+                  +{{ item.stages.length - item.tagOrder }}
+                  <!-- ... -->
+                </bk-tag>
+              </div>
+            </div>
+            <div class="flex-1 of1 text-c" :class="item.resource_count ? 'default-c' : ''">
+              {{ item.resource_count }}</div>
+            <div class="flex-1 of2">
+              <bk-button
+                text
+                theme="primary"
+                @click="handleGoPage('apigwStageOverview', item.id)"
+              >
+                环境概览
+              </bk-button>
+              <bk-button
+                text
+                theme="primary"
+                class="pl20"
+                @click="handleGoPage('apigwResource', item.id)"
+              >
+                资源配置
+              </bk-button>
+              <bk-button
+                text
+                theme="primary"
+                class="pl20"
+                @click="handleGoPage('apigwAccessLog', item.id)"
+              >
+                流水日志
+              </bk-button>
             </div>
-          </div>
-          <div class="flex-1 of1 text-c" :class="item.resource_count ? 'default-c' : ''">{{ item.resource_count }}</div>
-          <div class="flex-1 of2">
-            <bk-button
-              text
-              theme="primary"
-              @click="handleGoPage('apigwStageOverview', item.id)"
-            >
-              环境概览
-            </bk-button>
-            <bk-button
-              text
-              theme="primary"
-              class="pl20"
-              @click="handleGoPage('apigwResource', item.id)"
-            >
-              资源配置
-            </bk-button>
-            <bk-button
-              text
-              theme="primary"
-              class="pl20"
-              @click="handleGoPage('apigwAccessLog', item.id)"
-            >
-              流水日志
-            </bk-button>
           </div>
         </div>
+      </section>
+      <section v-else>
+        <div class="text-c">
+          {{ t('暂无数据') }}
+        </div>
+      </section>
+
+      <div class="footer-container">
+        <div>
+          <bk-link theme="primary">技术支持</bk-link> | <bk-link theme="primary">产品官网</bk-link>
+        </div>
+        Copyright © 2012-{{curYear}} Tencent BlueKing. All Rights Reserved.
       </div>
     </div>
-    <div class="footer-container">
-      <div>
-        <bk-link theme="primary">技术支持</bk-link> | <bk-link theme="primary">产品官网</bk-link>
-      </div>
-      Copyright © 2012-{{curYear}} Tencent BlueKing. All Rights Reserved.
-    </div>
 
     <bk-dialog
       :is-show="dialogData.isShow"
@@ -162,7 +171,7 @@
           property="is_public"
           required
         >
-          <bk-switcher v-model="formData.is_public" />
+          <bk-switcher theme="primary" v-model="formData.is_public" />
           <span class="common-form-tips">公开，则用户可查看资源文档、申请资源权限；不公开，则网关对用户隐藏</span>
         </bk-form-item>
       </bk-form>
@@ -180,15 +189,15 @@ import { useGetApiList } from '@/hooks';
 import { is24HoursAgo } from '@/common/util';
 import {
   ref,
+  watch,
 } from 'vue';
 const { t } = useI18n();
 const user = useUser();
 const router = useRouter();
 
-
 const formRef = ref(null);
-const filterKey = ref<string>('created_time');
-const filterNameData = ref({ name: '' });
+const filterKey = ref<string>('updated_time');
+const filterNameData = ref({ keyword: '' });
 // 弹窗
 const dialogData = ref<IDialog>({
   isShow: false,
@@ -251,16 +260,22 @@ const gatewaysList = ref<any>([]);
 const curYear = (new Date()).getFullYear();
 
 const filterData = ref([
-  { value: 'created_time', label: t('创建时间') },
   { value: 'updated_time', label: t('更新时间') },
+  { value: 'created_time', label: t('创建时间') },
   { value: 'name', label: t('字母 A-Z') },
 ]);
 
 // 获取网关数据方法
 const {
   getGatewaysListData,
+  dataList,
 } = useGetApiList(filterNameData);
 
+// 赋值给列表
+watch(() => dataList.value, (val: any[]) => {
+  gatewaysList.value = val;
+});
+
 
 // 页面初始化
 const init = async () => {
@@ -321,6 +336,7 @@ const resetDialogData = () => {
   initDialogData.is_public = true;
 };
 
+// 列表排序
 const handleChange = (v: string) => {
   switch (v) {
     case 'created_time':
@@ -387,7 +403,6 @@ init();
         border-radius: 2px;
         padding: 0 16px;
         margin: 12px 0px;
-        cursor: pointer;
         .name-logo{
           width: 48px;
           height: 48px;
@@ -398,10 +413,12 @@ init();
           color: #3A84FF;
           font-size: 26px;
           font-weight: 700;
+          cursor: pointer;
         }
         .name{
           font-weight: 700;
           color: #313238;
+          cursor: pointer;
           &:hover{
             color: #3a84ff;
           }

diff --git a/src/dashboard-front-new/src/views/main.vue b/src/dashboard-front-new/src/views/main.vue
@@ -86,7 +86,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { menuData } from '@/common/menu';
 import { useGetApiList } from '@/hooks';
 import { useCommon, usePermission } from '@/store';
-import { getPermissionApplyList } from '@/http';
+import { getPermissionApplyList, getGatewaysDetail } from '@/http';
 
 const route = useRoute();
 const router = useRouter();
@@ -123,6 +123,12 @@ const handleSetApigwName = () => {
   common.setApigwName(apigwName);
 };
 
+// 将当前的网关详情存到全局pinia中
+const handleSetApigwDeatail = async () => {
+  const curApigwDataDetail = await getGatewaysDetail(apigwId.value);
+  common.setCurApigwData(curApigwDataDetail);
+};
+
 // 监听当前路由
 watch(
   () => route,
@@ -134,6 +140,8 @@ watch(
     common.setApigwId(apigwId.value);
     // 设置全局网关名称
     handleSetApigwName();
+    // 设置当前网关详情
+    handleSetApigwDeatail();
   },
   { immediate: true, deep: true },
 );