Merge pull request #86 from huangpeng0428/vue3-shuzhen-dev

Vue3 shuzhen dev
TencentBlueKing · Dec 14, 2023 · a97d6a5 · a97d6a5
2 parents 5dca386 + 185d18f
commit a97d6a5
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 144 deletions.
diff --git a/src/dashboard-front-new/src/components/resource-detail/index.vue b/src/dashboard-front-new/src/components/resource-detail/index.vue
@@ -64,12 +64,12 @@
           <template v-if="localData.gateway_label_ids?.length">
             <bk-tag
               class="ag-value"
-              v-for="tag in labels?.map((label) => {
+              v-for="tag in labels?.filter((label) => {
                 if (localData.gateway_label_ids?.includes(label.id))
-                  return label.name;
+                  return true;
               })"
-              :key="tag"
-            >{{ tag }}</bk-tag
+              :key="tag.id"
+            >{{ tag.name }}</bk-tag
             >
           </template>
           <div class="ag-value" v-else>--</div>

diff --git a/src/dashboard-front-new/src/http/components-access.ts b/src/dashboard-front-new/src/http/components-access.ts
@@ -0,0 +1,38 @@
+import fetch from './fetch';
+import { json2Query } from '@/common/util';
+
+const { BK_DASHBOARD_URL } = window;
+
+export const getEsbComponents = (data?: any) => fetch.get(`${BK_DASHBOARD_URL}/esb/components/?${json2Query(data)}`);
+
+export const checkEsbNeedNewVersion = () => fetch.get(`${BK_DASHBOARD_URL}/esb/components/sync/need-new-release/`);
+
+export const addComponent = (data: any) => fetch.post(`${BK_DASHBOARD_URL}/esb/components/`, data);
+
+export const updateComponent = (id: number, data: any) => fetch.put(`${BK_DASHBOARD_URL}/esb/components/${id}/`, data);
+
+export const getComponentsDetail = (id: number) => fetch.get(`${BK_DASHBOARD_URL}/esb/components/${id}/`);
+
+export const deleteComponentByBatch = (data: any) => fetch.delete(`${BK_DASHBOARD_URL}/esb/components/batch/`, data);
+
+export const getReleaseStatus = () => fetch.get(`${BK_DASHBOARD_URL}/esb/components/sync/release/status/`);
+
+export const getSyncHistory = (data: any) => fetch.get(`${BK_DASHBOARD_URL}/esb/components/sync/release/histories/?${json2Query(data)}`);
+
+export const checkSyncComponent = () => fetch.post(`${BK_DASHBOARD_URL}/esb/components/sync/check/`);
+
+export const syncReleaseData = () => fetch.post(`${BK_DASHBOARD_URL}/esb/components/sync/release/`);
+
+/**
+ * 组件同步网关及发布历史.
+ * @param id
+ * @returns
+ */
+export const getSyncVersion = (id: any) => fetch.get(`${BK_DASHBOARD_URL}/esb/components/sync/release/histories/${id}/`);
+
+/**
+ * 获取 feature flag 全局特性开关列表
+ * @param data 分页参数
+ * @returns
+ */
+export const getFeatures = (data?: any) => fetch.get(`${BK_DASHBOARD_URL}/feature/flags/?${json2Query(data)}`);
diff --git a/src/dashboard-front-new/src/http/index.ts b/src/dashboard-front-new/src/http/index.ts
@@ -19,3 +19,4 @@ export * from './sdk';
 export * from './component-api-doc';
 export * from './category';
 export * from './system';
+export * from './components-access';
diff --git a/src/dashboard-front-new/src/http/resource-version.ts b/src/dashboard-front-new/src/http/resource-version.ts
@@ -8,4 +8,4 @@ const { BK_DASHBOARD_URL } = window;
  * @param apigwId 网关id
  * @param data 资源版本信息
  */
-export const createResourceVersion = (apigwId: number, data: any) => fetch.post(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource_versions/`, data);
+export const createResourceVersion = (apigwId: number, data: any) => fetch.post(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource-versions/`, data);
diff --git a/src/dashboard-front-new/src/http/resource.ts b/src/dashboard-front-new/src/http/resource.ts
@@ -69,14 +69,14 @@ export const backendsPathCheck = (apigwId: number, data: any) => fetch.get(`${BK
  * @param versionId 版本id
  * @returns
  */
-export const getResourceVersionsInfo = (apigwId: number, id: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource_versions/${id}`);
+export const getResourceVersionsInfo = (apigwId: number, id: number, data?: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource-versions/${id}?${json2Query(data)}`);
 
 /**
  *  资源版本列表
  * @param apigwId 网关id
  * @returns
  */
-export const getResourceVersionsList = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource_versions/?${json2Query(data)}`);
+export const getResourceVersionsList = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource-versions/?${json2Query(data)}`);
 
 /**
  *  sdk列表查询接口
@@ -90,7 +90,7 @@ export const getSdksList = (apigwId: number, data: any) => fetch.get(`${BK_DASHB
  * @param apigwId 网关id
  * @returns
  */
-export const resourceVersionsDiff = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource_versions/diff/?${json2Query(data)}`);
+export const resourceVersionsDiff = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource-versions/diff/?${json2Query(data)}`);
 
 /**
  *  sdk创建接口
@@ -185,7 +185,7 @@ export const deleteResourceDocs = (apigwId: number, resourceId: number, docId: n
  * 是否需要创建新资源版本
  * @param apigwId 网关id
  */
-export const checkNeedNewVersion = (apigwId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource_versions/need-new-version/`, { globalError: false });
+export const checkNeedNewVersion = (apigwId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resource-versions/need-new-version/`, { globalError: false });
 
 /**
  * 设置标签

diff --git a/src/dashboard-front-new/src/router/index.ts b/src/dashboard-front-new/src/router/index.ts
@@ -513,6 +513,7 @@ const routes: RouteRecordRaw[] = [
           title: '同步组件配置到 API 网关',
           matchRoute: 'syncApigwAccess',
           topMenu: 'componentsMain',
+          showBackIcon: true,
         },
       },
       {
@@ -523,6 +524,7 @@ const routes: RouteRecordRaw[] = [
           title: '组件同步历史',
           matchRoute: 'syncHistory',
           topMenu: 'componentsMain',
+          showBackIcon: true,
         },
       },
       {
@@ -533,6 +535,7 @@ const routes: RouteRecordRaw[] = [
           title: '组件同步版本',
           matchRoute: 'syncVersion',
           topMenu: 'componentsMain',
+          showBackIcon: true,
         },
       },
       {

diff --git a/src/dashboard-front-new/src/views/components-access/manage/components/render-system.vue b/src/dashboard-front-new/src/views/components-access/manage/components/render-system.vue
@@ -108,10 +108,10 @@ const handleSelectSys = (payload: any) => {
   emit('on-select', payload);
 };
 
-// const setSelected = (id) => {
-//   curSelect.value = id;
-//   emit('on-select', { id });
-// };
+const setSelected = (id: string) => {
+  curSelect.value = id;
+  emit('on-select', { id });
+};
 
 const handleSelectAll = () => {
   curSelect.value = '*';
@@ -160,6 +160,11 @@ watch(
     }
   },
 );
+
+defineExpose({
+  setSelected,
+  updateTableEmptyConfig,
+});
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/dashboard-front-new/src/views/components-access/manage/components/sync-access.vue b/src/dashboard-front-new/src/views/components-access/manage/components/sync-access.vue
@@ -34,7 +34,8 @@
           v-bkloading="{ isLoading, opacity: 1 }"
           @select="handlerChange"
           @select-all="handlerAllChange"
-          @page-change="handlePageChange"
+          remote-pagination
+          @page-value-change="handlePageChange"
           @page-limit-change="handlePageLimitChange"
           @filter-change="handleFilterChange">
           <template #empty>
@@ -48,12 +49,12 @@
             </div>
           </template>
 
-          <bk-table-column :label="$t('系统名称')" prop="system_name" :render-header="$renderHeader">
+          <bk-table-column :label="$t('系统名称')" prop="system_name">
             <template #default="{ data }">
               {{data?.system_name || '--'}}
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('组件名称')" prop="component_name" :render-header="$renderHeader">
+          <bk-table-column :label="$t('组件名称')" prop="component_name">
             <template #default="{ data }">
               {{data?.component_name || '--'}}
             </template>
@@ -62,14 +63,13 @@
             :label="$t('组件请求方法')"
             :filters="methodFilters"
             :filter-multiple="true"
-            :render-header="$renderHeader"
             column-key="component_method"
             prop="component_method">
             <template #default="{ data }">
               {{data?.component_method || '--'}}
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('组件请求路径')" prop="component_path" :min-width="200" :render-header="$renderHeader">
+          <bk-table-column :label="$t('组件请求路径')" prop="component_path" :min-width="200">
             <template #default="{ data }">
               {{data?.component_path || '--'}}
             </template>
@@ -86,7 +86,7 @@
               </template>
             </template>
           </bk-table-column>
-          <bk-table-column :label="$t('组件ID')" prop="component_id" :render-header="$renderHeader">
+          <bk-table-column :label="$t('组件ID')" prop="component_id">
             <template #default="{ data }">
               {{data?.component_id || '--'}}
             </template>
@@ -95,7 +95,6 @@
             :label="$t('操作类型')" width="150"
             :filters="statusFilters"
             :filter-multiple="true"
-            :render-header="$renderHeader"
             column-key="status"
             prop="status">
             <template #default="{ data }">
@@ -127,7 +126,7 @@
                   <bk-button
                     size="small"
                     class="btn"
-                    @click="$refs.resourcePopconfirm.cancel()">
+                    @click="resourcePopconfirm?.cancel()">
                     {{ $t('取消') }}
                   </bk-button>
                 </div>
@@ -178,9 +177,12 @@ import { ref, reactive, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { clearFilter, isTableFilter } from '@/common/util';
+import { checkSyncComponent, syncReleaseData, getEsbGateway } from '@/http';
+import { useCommon } from '@/store';
 
 const { t } = useI18n();
 const router = useRouter();
+const common = useCommon();
 
 // const systemFilterRef = ref();
 // const form = ref();
@@ -251,32 +253,6 @@ const statusFilters = reactive<any>([
 //     name: t('普通'),
 //   },
 // ]);
-const methodList = reactive<any>([
-  {
-    id: 'GET',
-    name: 'GET',
-  },
-  {
-    id: 'POST',
-    name: 'POST',
-  },
-  {
-    id: 'PUT',
-    name: 'PUT',
-  },
-  {
-    id: 'PATCH',
-    name: 'PATCH',
-  },
-  {
-    id: 'DELETE',
-    name: 'DELETE',
-  },
-  {
-    id: '*',
-    name: 'GET/POST',
-  },
-]);
 
 const createNum = computed(() => {
   const results = allData.value?.filter((item: any) => !item?.resource_id);
@@ -302,7 +278,7 @@ const deleteInfo = computed(() => t(`删除 <strong style="color: #EA3536;"> ${d
 const confirmIsLoading = computed(() => isLoading.value);
 
 const methodFilters = computed(() => {
-  return methodList?.map((item: any) => {
+  return common.methodList?.map((item: any) => {
     return {
       value: item.id,
       text: item.id,
@@ -312,6 +288,7 @@ const methodFilters = computed(() => {
 
 const getDataByPage = (page?: any) => {
   if (!page) {
+    page = 1;
     pagination.current = 1;
   }
   let startIndex = (page - 1) * pagination.limit;
@@ -329,9 +306,9 @@ const getDataByPage = (page?: any) => {
 const getComponents = async (loading = false) => {
   isLoading.value = loading;
   try {
-    const res = await this.$store.dispatch('component/checkSyncComponent');
-    allData.value = Object.freeze(res.data);
-    displayData.value = res.data;
+    const res = await checkSyncComponent();
+    allData.value = Object.freeze(res);
+    displayData.value = res;
     pagination.count = displayData.value?.length;
     componentList.value = getDataByPage();
     tableEmptyConf.isAbnormal = false;
@@ -411,7 +388,7 @@ const confirm = () => {
 
 const checkReleaseData = async () => {
   try {
-    await this.$store.dispatch('component/ayncReleaseData');
+    await syncReleaseData();
     router.push({
       name: 'apigwAccess',
     });
@@ -498,10 +475,10 @@ const handleFilterChange = (filters: any) => {
   }
 };
 
-const getEsbGateway = async () => {
+const getEsbGatewayData = async () => {
   try {
-    const res = await this.$store.dispatch('system/getEsbGateway');
-    esb.value = res.data;
+    const res = await getEsbGateway();
+    esb.value = res;
   } catch (e) {
     console.log(e);
   }
@@ -540,7 +517,7 @@ const updateTableEmptyConfig = () => {
 
 const init = () => {
   getComponents();
-  getEsbGateway();
+  getEsbGatewayData();
 };
 
 init();

diff --git a/src/dashboard-front-new/src/views/components-access/manage/components/sync-history.vue b/src/dashboard-front-new/src/views/components-access/manage/components/sync-history.vue
@@ -30,7 +30,8 @@
           size="small"
           :pagination="pagination"
           v-bkloading="{ isLoading, opacity: 1 }"
-          @page-change="handlePageChange"
+          remote-pagination
+          @page-value-change="handlePageChange"
           @page-limit-change="handlePageLimitChange">
           <template #empty>
             <div>
@@ -46,7 +47,7 @@
           <bk-table-column label="ID" prop="resource_version_title">
             <template #default="{ data }">
               <bk-button theme="primary" class="mr10" text @click="handleVersion(data?.id)">
-                {{data.id || '--'}}
+                {{data?.id || '--'}}
               </bk-button>
             </template>
           </bk-table-column>
@@ -83,6 +84,7 @@
 import { ref, reactive, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { getSyncHistory } from '@/http';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -214,9 +216,9 @@ const getComponents = async (loading = false) => {
     ...searchParams.value,
   };
   try {
-    const res = await this.$store.dispatch('component/getSyncHistory', { pageParams });
-    pagination.count = res.data.count;
-    componentList.value = res.data.results;
+    const res = await getSyncHistory(pageParams);
+    pagination.count = res?.count;
+    componentList.value = res?.results;
     updateTableEmptyConfig();
     tableEmptyConf.value.isAbnormal = false;
   } catch (e) {