fix: 配置文件查看态体验问题修复 --bug=126418489

bcs-services/bcs-bscp/ui/src/api/config.ts

@@ -127,7 +127,13 @@ export const getReleasedConfigItemDetail = (
  * @param signature 文件内容的SHA256值
  * @returns
  */
-export const updateConfigContent = (bizId: string, appId: number, data: string | File, signature: string) =>
+export const updateConfigContent = (
+  bizId: string,
+  appId: number,
+  data: string | File,
+  signature: string,
+  progress?: Function,
+) =>
   http
     .put(`/biz/${bizId}/content/upload`, data, {
       headers: {
@@ -136,6 +142,12 @@ export const updateConfigContent = (bizId: string, appId: number, data: string |
         'X-Bkapi-File-Content-Overwrite': 'false',
         'Content-Type': 'text/plain',
       },
+      onUploadProgress: (progressEvent: any) => {
+        if (progress) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          progress(percentCompleted);
+        }
+      },
     })
     .then((res) => res.data);
 

bcs-services/bcs-bscp/ui/src/api/template.ts

@@ -224,6 +224,7 @@ export const updateTemplateContent = (
   templateSpaceId: number,
   data: string | File,
   signature: string,
+  progress?: Function,
 ) =>
   http
     .put(`/biz/${biz_id}/content/upload`, data, {
@@ -233,6 +234,12 @@ export const updateTemplateContent = (
         'X-Bkapi-File-Content-Overwrite': 'false',
         'Content-Type': 'text/plain',
       },
+      onUploadProgress: (progressEvent: any) => {
+        if (progress) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          progress(percentCompleted);
+        }
+      },
     })
     .then((res) => res.data);
 
@@ -641,3 +648,13 @@ export const importTemplateBatchAdd = (biz_id: string, template_space_id: number
  */
 export const batchEditTemplatePermission = (biz_id: string, query: any) =>
   http.post(`/config/biz/${biz_id}/templates/batch_update_templates_permissions`, query);
+
+/**
+ * 批量修改模板权限
+ * @param biz_id 业务ID
+ * @param template_id 模板id
+ * @param revision_name 版本名称
+ * @returns
+ */
+export const getTemplateConfigMeta = (biz_id: string, template_id: number, revision_name?: string) =>
+  http.get(`/config/biz/${biz_id}/templates/${template_id}/template_revisions`, { params: { revision_name } });

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue

@@ -16,7 +16,7 @@
             v-for="config in group.configs"
             :class="['config-item', { disabled: config.file_state === 'DELETE' }]"
             :key="config.id"
-            @click="handleConfigClick(config, group.id)">
+            @click="handleConfigClick(config, group)">
             <bk-overflow-title class="config-name" type="tips">
               {{ fileAP(config) }}
             </bk-overflow-title>
@@ -36,7 +36,8 @@
       v-bind="viewConfigSliderData.data"
       :bk-biz-id="props.bkBizId"
       :app-id="props.appId"
-      :version-id="versionData.id" />
+      :version-id="versionData.id"
+      @open-edit="handleOpenEdit" />
   </section>
 </template>
 <script setup lang="ts">
@@ -64,6 +65,10 @@
     name: string;
     expand: boolean;
     configs: IConfigTableItem[];
+    template_space_id?: number;
+    template_space_name?: string;
+    template_set_id?: number;
+    template_set_name?: string;
   }
 
   interface IConfigTableItem {
@@ -79,6 +84,13 @@
     file_state: string;
   }
 
+  interface ITemplateConfigMeta {
+    template_space_id: number;
+    template_space_name: string;
+    template_set_id: number;
+    template_set_name: string;
+  }
+
   const store = useConfigStore();
   const { versionData } = storeToRefs(store);
   const { t } = useI18n();
@@ -100,9 +112,20 @@
     open: false,
     id: 0,
   });
-  const viewConfigSliderData = ref({
+  const viewConfigSliderData = ref<{
+    open: boolean;
+    data: {
+      id: number;
+      type: string;
+      templateMeta?: ITemplateConfigMeta;
+      versionName?: string;
+    };
+  }>({
     open: false,
-    data: { id: 0, type: '' },
+    data: {
+      id: 0,
+      type: '',
+    },
   });
 
   watch(
@@ -221,9 +244,14 @@
   // 将模板按套餐分组，并将模板数据格式转为表格数据
   const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
     const groups: IConfigsGroupData[] = list.map((groupItem) => {
-      const { template_space_name, template_set_id, template_set_name, template_revisions } = groupItem;
+      const { template_space_name, template_set_id, template_set_name, template_revisions, template_space_id } =
+        groupItem;
       const group: IConfigsGroupData = {
         id: template_set_id,
+        template_set_id,
+        template_set_name,
+        template_space_name,
+        template_space_id,
         name: `${template_space_name} - ${template_set_name}`,
         expand: false,
         configs: [],
@@ -257,20 +285,32 @@
     return groups;
   };
 
-  const handleConfigClick = (config: IConfigTableItem, groupId: number) => {
-    if (isUnNamedVersion.value && groupId === 0) {
-      editConfigSliderData.value = {
+  const handleConfigClick = (config: IConfigTableItem, group: IConfigsGroupData) => {
+    const id = group.id === 0 ? config.id : config.versionId;
+    if (group.id === 0) {
+      viewConfigSliderData.value = {
         open: true,
-        id: config.id,
+        data: { id, type: 'config' },
       };
     } else {
-      const id = groupId === 0 ? config.id : config.versionId;
-      const type = groupId === 0 ? 'config' : 'template';
+      const { template_set_id, template_space_id, template_set_name, template_space_name } = group;
+      const templateMeta = { template_space_id, template_space_name, template_set_id, template_set_name };
       viewConfigSliderData.value = {
         open: true,
-        data: { id, type },
+        data: {
+          id,
+          versionName: config.versionName,
+          templateMeta: templateMeta as ITemplateConfigMeta,
+          type: 'template',
+        },
       };
     }
+    editConfigSliderData.value.id = id;
+  };
+
+  const handleOpenEdit = () => {
+    viewConfigSliderData.value.open = false;
+    editConfigSliderData.value.open = true;
   };
 
   const clearSearch = () => {