fix: template list data chunked update

seal-io · Aug 23, 2023 · 8798b8a · 8798b8a
1 parent 0835269
commit 8798b8a
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 29 deletions.
diff --git a/src/api/axios-chunk-request.ts b/src/api/axios-chunk-request.ts
@@ -122,6 +122,7 @@ export function useSetChunkRequest() {
           }
 
           handler(result);
+          console.log('chunkrequest========', { result, url });
         }
       });
       requestReadyState.value = request?.readyState;

diff --git a/src/assets/style/global.less b/src/assets/style/global.less
@@ -316,6 +316,10 @@ body {
   text-align: left;
 }
 
+.align-center {
+  text-align: center;
+}
+
 .font-52 {
   font-size: 52px;
 }
@@ -369,6 +373,14 @@ body {
   }
 }
 
+.border-radius-4 {
+  border-radius: 4px;
+}
+
+.seal-bordered {
+  border: 1px solid var(--color-border-2);
+}
+
 @import url('./variable.less');
 @import url('./custom.less');
 @import url('./form.less');

diff --git a/src/assets/style/margin.less b/src/assets/style/margin.less
@@ -1,3 +1,7 @@
 .m-r-10 {
   margin-right: 10px;
 }
+
+.p-16 {
+  padding: 16px;
+}
diff --git a/src/views/commons/hooks/use-update-chunked-list.ts b/src/views/commons/hooks/use-update-chunked-list.ts
@@ -11,6 +11,7 @@ interface ChunkedCollection {
 export function useUpdateChunkedList(
   dataList: Ref<{ id: string }[]>,
   options?: {
+    callback?: (args: any) => void;
     filterFun?: (args: any) => boolean;
     computedID?: (d: object) => string;
   }
@@ -50,6 +51,9 @@ export function useUpdateChunkedList(
         dataList.value[updateIndex] = updateItem;
       }
     });
+    if (options?.callback) {
+      options?.callback(dataList.value);
+    }
   };
   return {
     updateChunkedList

diff --git a/src/views/cost-management/analyse/pages/perspective-edit.vue b/src/views/cost-management/analyse/pages/perspective-edit.vue
@@ -327,6 +327,24 @@
                 </a-button>
               </div>
             </div>
+            <SealFormItemWrap
+              v-if="!formData.costQueries[0].sharedOptions.item.length"
+              :label="$t('cost.optimize.form.commonCost')"
+              :style="{ minWidth: `${InputWidth.LARGE}px` }"
+            >
+              <div
+                class="fill-width seal-bordered border-radius-4 p-16 align-center"
+              >
+                <a-button
+                  type="text"
+                  size="small"
+                  @click="handleAddShareOptionItem"
+                >
+                  <template #icon><icon-plus /></template>
+                  {{ $t('cost.analyse.view.strategy') }}
+                </a-button>
+              </div>
+            </SealFormItemWrap>
           </div>
           <span v-else class="readonly-view-label"> - </span>
         </a-form-item>
@@ -462,22 +480,6 @@
       return !groupByDate.includes(item.value);
     });
   });
-  const sharingStrategyRequired = computed(() => {
-    const shareCostFilter =
-      get(formData, 'costQueries.0.sharedOptions.item') || [];
-    const shareCostIdleCostFilters =
-      get(formData, 'costQueries.0.sharedOptions.idle') || [];
-    const shareCostmanagementCostFilters =
-      get(formData, 'costQueries.0.sharedOptions.management') || [];
-    if (
-      shareCostFilter?.length ||
-      shareCostIdleCostFilters?.length ||
-      shareCostmanagementCostFilters?.length
-    ) {
-      return true;
-    }
-    return false;
-  });
 
   const handleDeleteShareOptionItem = (index) => {
     formData.costQueries[0].sharedOptions.item.splice(index, 1);
@@ -542,14 +544,7 @@
     const costres = validateCostFilter();
     return !res && allres && costres;
   };
-  const setShareCostFilter = (list) => {
-    const arr = map(list, (item) => {
-      return {
-        ...pickBy(item, (val) => val?.length)
-      };
-    });
-    return filter(arr, (o) => keys(o).length);
-  };
+
   const handleOk = async () => {
     if (isEqual(copyFormData, formData) && id) {
       router.back();

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -113,9 +113,7 @@
 <style lang="less" scoped>
   .container {
     display: flex;
-    height: calc(100vh - 48px);
     margin-top: 0;
-    overflow: auto;
     background-image: url('../../assets/images/bg2.jpeg');
     background-repeat: no-repeat;
     background-position: center center;
@@ -184,6 +182,8 @@
       flex: 1;
       align-items: center;
       justify-content: center;
+      height: max-content;
+      min-height: calc(100vh - 48px);
       padding-bottom: 40px;
 
       .content-inner {

diff --git a/src/views/operation-hub/templates/pages/list.vue b/src/views/operation-hub/templates/pages/list.vue
@@ -133,7 +133,7 @@
   import { deleteModal, execSucceed } from '@/utils/monitor';
   import { PageAction } from '@/views/config';
   import { useUpdateChunkedList } from '@/views/commons/hooks/use-update-chunked-list';
-  import { queryCatalogs } from '../../catalogs/api';
+  import { queryCatalogs, CatalogAPI } from '../../catalogs/api';
   import ThumbView from '../components/thumb-view.vue';
   import ListView from '../components/list-view.vue';
   import { TemplateRowData } from '../config/interface';
@@ -148,12 +148,15 @@
   let timer: any = null;
   const userStore = useUserStore();
   const { setChunkRequest } = useSetChunkRequest();
+  const { setChunkRequest: setCatalogChunkRequest } = useSetChunkRequest();
   const { router } = useCallCommon();
   const loading = ref(false);
   const selectedKeys = ref<string[]>([]);
   const sort = ref<string[]>(['-createTime']);
   const dataList = ref<TemplateRowData[]>([]);
-  const catalogList = ref<{ label: string; value: string }[]>([]);
+  const catalogList = ref<
+    { label: string; value: string; id: string; name: string }[]
+  >([]);
   const listViewRef = ref();
   const total = ref(0);
   const queryParams = reactive({
@@ -163,6 +166,22 @@
     perPage: 10
   });
   const { updateChunkedList } = useUpdateChunkedList(dataList);
+  const { updateChunkedList: updateCatalogList } = useUpdateChunkedList(
+    catalogList,
+    {
+      callback: (list) => {
+        catalogList.value = _.map(list, (o) => {
+          const item = _.cloneDeep(o);
+          return {
+            label: item.name,
+            value: item.id,
+            id: item.id,
+            name: item.name
+          };
+        });
+      }
+    }
+  );
 
   const handleCreate = () => {
     router.push({
@@ -243,6 +262,25 @@
     _.each(list, (data) => {
       updateChunkedList(data);
     });
+    if (!dataList.value.length) {
+      queryParams.page = 1;
+      handleFilter();
+    }
+  };
+  const updateCatalogHandler = (list) => {
+    _.each(list, (data) => {
+      updateCatalogList(data);
+    });
+
+    if (queryParams.catalogID) {
+      const catalog = _.find(catalogList.value, {
+        value: queryParams.catalogID
+      });
+      if (!catalog) {
+        queryParams.catalogID = '';
+        handleSearch();
+      }
+    }
   };
   const createTemplateChunkRequest = () => {
     try {
@@ -257,6 +295,17 @@
       // ignore
     }
   };
+
+  const createCatalogChunkRequest = () => {
+    try {
+      setCatalogChunkRequest({
+        url: CatalogAPI,
+        handler: updateCatalogHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
   const handleReset = () => {
     queryParams.query = '';
     queryParams.page = 1;
@@ -285,7 +334,9 @@
       catalogList.value = _.map(data?.items || [], (item) => {
         return {
           label: item.name,
-          value: item.id
+          value: item.id,
+          id: item.id,
+          name: item.name
         };
       });
     } catch (error) {
@@ -297,6 +348,7 @@
     getCatalogList();
     nextTick(() => {
       createTemplateChunkRequest();
+      createCatalogChunkRequest();
     });
   });
 </script>