feat: 审批功能细节问题处理。去除无用代码--story=115998324

q15971095971 · Aug 28, 2024 · 5316fb2 · 5316fb2
1 parent 35a5ad5
commit 5316fb2
Show file tree

Hide file tree

Showing 8 changed files with 350 additions and 29 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/api/config.ts b/bcs-services/bcs-bscp/ui/src/api/config.ts
@@ -711,11 +711,21 @@ export const publishType = (bizId: string, appId: number) =>
   http.get(`/config/biz_id/${bizId}/app_id/${appId}/last/select`);
 
 /**
- * 版本上线状态查询
+ * 当前版本状态查询
  * @param bizId 业务ID
  * @param appId 应用ID
  * @param releaseId 版本ID
  * @returns
  */
-export const versionStatusQuery = (bizId: number, appId: number, releaseId: number) =>
+export const versionStatusQuery = (bizId: string, appId: number, releaseId: number) =>
   http.get(`/config/biz_id/${bizId}/app_id/${appId}/release_id/${releaseId}/status`);
+
+/**
+ * 当前服务下 所有版本上线状态检查
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param releaseId 版本ID
+ * @returns
+ */
+export const versionStatusCheck = (bizId: string, appId: number) =>
+  http.get(`/config/biz_id/${bizId}/app_id/${appId}/last/publish`);
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/dialog-publish-warn.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/dialog-publish-warn.vue
@@ -0,0 +1,231 @@
+<template>
+  <bk-dialog
+    :is-show="show"
+    ref="dialog"
+    ext-cls="confirm-dialog"
+    footer-align="center"
+    cancel-text="再想想"
+    :width="dialogType === 'confirm' ? '480' : '640'"
+    :confirm-text="dialogType === 'confirm' ? '我知道了' : '继续上线'"
+    :dialog-type="dialogType === 'confirm' ? 'confirm' : 'operation'"
+    :close-icon="true"
+    :show-mask="true"
+    :quick-close="false"
+    :multi-instance="false"
+    @confirm="handleConfirm"
+    @closed="handleClose">
+    <template #header>
+      <div class="tip-icon__wrap">
+        <exclamation-circle-shape class="tip-icon" />
+      </div>
+      <div class="headline">
+        {{ dialogType === 'confirm' ? '当前服务有正在上线的任务，请稍后尝试' : '高频上线风险提示' }}
+      </div>
+    </template>
+    <div v-if="dialogType === 'confirm'" class="content-info">
+      正在上线的版本：
+      <span class="content-info__bd">
+        {{ dialogData }}
+      </span>
+      <share class="share" />
+    </div>
+    <template v-else>
+      <div class="content-info is-special">
+        距上次版本上线<span class="content-info--em">不到 2 小时</span>
+        ，请确保当前情况确实需要上线版本，避免过于频繁的上线操作可能带来的潜在风险
+      </div>
+      <div class="record-hd">
+        <span>近三次版本上线记录</span>
+        <bk-link theme="primary" target="_blank" href=""> <share class="share" />查看全部上线记录 </bk-link>
+      </div>
+      <div class="record-bd">
+        <div class="record-bd__table">
+          <div class="table-tr">
+            <div class="table-th">上线时间</div>
+            <div class="table-th">上线版本</div>
+            <div class="table-th">上线范围</div>
+            <div class="table-th">操作人</div>
+          </div>
+          <div class="table-tr" v-for="(item, index) in dialogData" :key="index">
+            <div class="table-td">{{ item.publish_time }}</div>
+            <div class="table-td">{{ item.name }}</div>
+            <div class="table-td">{{ item.fully_released ? '全部实例' : versionScope(item.scope.groups) }}</div>
+            <div class="table-td">{{ item.creator }}</div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </bk-dialog>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { ExclamationCircleShape, Share } from 'bkui-vue/lib/icon';
+
+  const emits = defineEmits(['update:show', 'confirm']);
+
+  const props = withDefaults(
+    defineProps<{
+      show: boolean;
+      dialogData: string | any[];
+    }>(),
+    {},
+  );
+
+  const dialogType = computed(() => (typeof props.dialogData === 'string' ? 'confirm' : 'other'));
+
+  // const handleLinkTo = () => {
+  //   console.log('跳转服务上线记录'); // 待更新
+  // };
+  const versionScope = <T extends { spec: { name?: string } }>(data: T[]) => {
+    return data.map((item: T) => item.spec.name).join(';');
+  };
+  const handleClose = () => {
+    emits('update:show', false);
+  };
+  const handleConfirm = () => {
+    emits('confirm', typeof props.dialogData !== 'string');
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.confirm-dialog) {
+    .bk-modal-body {
+      padding-bottom: 0;
+    }
+    .bk-modal-content {
+      padding: 0 32px;
+      height: auto;
+      max-height: none;
+      min-height: auto;
+      border-radius: 2px;
+    }
+    .bk-modal-footer {
+      position: relative;
+      padding: 24px 0;
+      height: auto;
+      border: none;
+    }
+    .bk-dialog-footer .bk-button {
+      min-width: 88px;
+    }
+  }
+  .tip-icon__wrap {
+    margin: 0 auto;
+    width: 42px;
+    height: 42px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background-color: #ff9c01;
+    }
+    .tip-icon {
+      font-size: 42px;
+      line-height: 42px;
+      vertical-align: middle;
+      color: #ffe8c3;
+    }
+  }
+  .headline {
+    margin-top: 16px;
+    text-align: center;
+  }
+  .content-info {
+    margin-top: 4px;
+    padding: 12px 16px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #63656e;
+    background-color: #f5f6fa;
+    &__bd {
+      color: #313238;
+    }
+    &--em {
+      font-weight: 700;
+      color: #ff9c01;
+    }
+    &.is-special {
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+  .share {
+    margin-left: 9px;
+    font-size: 12px;
+    color: #3a84ff;
+    vertical-align: middle;
+  }
+  .record-hd {
+    position: relative;
+    margin-top: 16px;
+    padding-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    line-height: 22px;
+    color: #313238;
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 16px;
+      border-radius: 0 2px 2px 0;
+      background-color: #699df4;
+    }
+    .share {
+      margin: 0 5px 0 0;
+    }
+  }
+  // 表格
+  .record-bd {
+    margin-top: 8px;
+  }
+  .record-bd__table {
+    .table-tr {
+      min-height: 42px;
+      display: flex;
+      justify-content: center;
+    }
+    .table-th {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 12px;
+      border-bottom: 1px solid #e1e2e9;
+      color: #313238;
+      background-color: #f0f1f5;
+    }
+    .table-td {
+      // padding: 4px 8px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 12px;
+      border-bottom: 1px solid #e1e2e9;
+      color: #63656e;
+      background-color: #fff;
+    }
+    .table-th,
+    .table-td {
+      padding: 4px 0 4px 16px;
+      width: 25%;
+      word-wrap: break-word;
+      word-break: break-all;
+      &:last-child {
+        padding-right: 16px;
+      }
+    }
+  }
+</style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/header-more-options.vue
@@ -24,10 +24,10 @@
   );
 
   const handleLinkTo = () => {
-    console.log('跳转服务上线记录');
+    console.log('跳转服务上线记录'); // 等接口更新
   };
   const handleUndo = () => {
-    console.log('撤销');
+    console.log('撤销'); // 等接口更新
   };
 </script>
 

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/modify-group-publish.vue
@@ -22,7 +22,7 @@
       :disabled="approveData.type === ONLINE_TYPE.Periodically"
       theme="primary"
       :class="['trigger-button', { 'bk-button-with-no-perm': !props.hasPerm }]"
-      @click="handleOnlineClick">
+      @click="handlePublishClick">
       <!-- 审批通过时间在定时上线时间之后，后端自动转为手动上线 -->
       {{ approveData.type === ONLINE_TYPE.Periodically ? t('等待定时上线') : t('确定上线') }}
     </bk-button>
@@ -86,6 +86,7 @@
       :current-version-groups="groupsPendingtoPublish"
       @publish="handleOpenPublishDialog"
       @close="isDiffSliderShow = false" />
+    <DialogWarn v-model:show="warnDialogShow" :dialog-data="warnDialogData" @confirm="dialogConfirm" />
   </section>
 </template>
 <script setup lang="ts">
@@ -96,7 +97,7 @@
   import { InfoBox } from 'bkui-vue';
   import BkMessage from 'bkui-vue/lib/message';
   import { storeToRefs } from 'pinia';
-  import { getConfigVersionList } from '../../../../../api/config';
+  import { getConfigVersionList, versionStatusCheck } from '../../../../../api/config';
   import { getServiceGroupList } from '../../../../../api/group';
   import { IConfigVersion, IReleasedGroup } from '../../../../../../types/config';
   import useGlobalStore from '../../../../../store/global';
@@ -108,6 +109,7 @@
   import SelectGroup from './publish-version/select-group/index.vue';
   import PublishVersionDiff from './publish-version-diff.vue';
   import { ONLINE_TYPE, APPROVE_STATUS } from '../../../../../constants/config';
+  import DialogWarn from './dialog-publish-warn.vue';
 
   const { permissionQuery, showApplyPermDialog } = storeToRefs(useGlobalStore());
   const serviceStore = useServiceStore();
@@ -144,6 +146,8 @@
   const groups = ref<IGroupToPublish[]>([]);
   const baseVersionId = ref(0);
   const selectGroupRef = ref();
+  const warnDialogShow = ref(false);
+  const warnDialogData = ref<string | any[]>('');
 
   // 当前版本已上线分组id集合
   const releasedGroups = computed(() => versionData.value.status.released_groups.map((group) => group.id));
@@ -261,7 +265,25 @@
     groupListLoading.value = false;
   };
 
-  const handleBtnClick = () => {
+  // 风险提示弹窗→继续上线
+  const dialogConfirm = (isContinue: boolean) => {
+    warnDialogShow.value = false;
+    // 继续上线
+    if (isContinue) {
+      continuePublish();
+    }
+  };
+
+  // 调整分组上线按钮
+  const handleBtnClick = async () => {
+    const checkResult = await checkVersionStatus();
+    if (checkResult) {
+      continuePublish();
+    }
+  };
+
+  // 继续上线逻辑
+  const continuePublish = () => {
     if (props.hasPerm) {
       getVersionList();
       getAllGroupData();
@@ -301,8 +323,8 @@
     }
   };
 
-  const handleOnlineClick = () => {
-    console.log('确定上线成功');
+  // 确定上线按钮 待后端更新接口返回密钥状态
+  const handlePublishClick = () => {
     handleConfirm(true);
   };
 
@@ -371,6 +393,31 @@
     isSelectGroupPanelOpen.value = false;
     groups.value = [];
   };
+
+  // 检查是否有正在上线的版本 或 2小时内有无其他版本上线
+  const checkVersionStatus = async () => {
+    const resp = await versionStatusCheck(props.bkBizId, props.appId);
+    const { data } = resp;
+
+    if (data?.is_publishing) {
+      // 当前服务有其他版本上线，不允许当前版本上线
+      warnDialogShow.value = true;
+      warnDialogData.value = data.version_name;
+      return false;
+    }
+    if (data?.publish_record.length) {
+      // 最近上线的版本时间与当前系统时间在2小时内，风险提示弹窗
+      const publishTime = new Date(data.publish_record[0].publish_time).getTime();
+      const currentTime = Date.now();
+      if (publishTime + 7200000 > currentTime) {
+        warnDialogShow.value = true;
+        warnDialogData.value = data.publish_record;
+        return false;
+      }
+    }
+    // 可以继续上线
+    return true;
+  };
 </script>
 <style lang="scss" scoped>
   .trigger-button {