feat: 操作记录与审批功能--story=115998324

bcs-services/bcs-bscp/ui/index.html

@@ -16,6 +16,7 @@
       var GRPC_ADDR = '{{ .GRPC_ADDR }}';
       var HTTP_ADDR = '{{ .HTTP_ADDR }}';
       var BK_NODE_HOST = '{{ .BK_NODE_HOST }}';
+      var USER_MAN_HOST = '{{ .USER_MAN_HOST }}';
       window.BSCP_CONFIG = JSON.parse('{{ .BK_BSCP_CONFIG }}');
     </script>
   </head>

bcs-services/bcs-bscp/ui/package.json

@@ -15,8 +15,10 @@
     "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component": "^2.0.1",
     "@blueking/platform-config": "^1.0.3",
+    "@icon-cool/bk-icon-bk-biz-components": "^0.0.4",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash.clonedeep": "^4.5.7",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "axios": "^1.7.7",
     "bkui-vue": "1.0.3-beta.32",
     "crypto-js": "^4.2.0",
@@ -30,6 +32,7 @@
     "node-forge": "^1.3.1",
     "pinia": "^2.0.33",
     "sass": "^1.54.8",
+    "tippy.js": "^6.3.7",
     "vue": "^3.4.21",
     "vue-i18n": "9",
     "vue-router": "^4.1.5",

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

@@ -274,6 +274,30 @@ export const publishVersion = (
   },
 ) => http.post(`/config/update/strategy/publish/publish/release_id/${releaseId}/app_id/${appId}/biz_id/${bizId}`, data);
 
+/**
+ * 发布版本(增加审批)
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param data 参数
+ * @param publish_type 上线方式
+ * @param publish_time 定时上线时间
+ * @param is_compare 所有待上线的分组是否为首次上线
+ * @returns
+ */
+export const publishVerSubmit = (
+  bizId: string,
+  appId: number,
+  releaseId: number,
+  data: {
+    groups: Array<number>;
+    all: boolean;
+    memo: string;
+    publish_type: 'Manually' | 'Automatically' | 'Periodically' | 'Immediately' | '';
+    publish_time: Date | string;
+    is_compare: boolean;
+  },
+) => http.post(`/config/biz_id/${bizId}/app_id/${appId}/release_id/${releaseId}/submit`, data);
+
 /**
  * 获取服务下初始化脚本引用配置
  * @param bizId 业务ID
@@ -675,3 +699,32 @@ export const createVersionNameCheck = (bizId: string, appId: number, name: strin
  */
 export const importConfigFromTemplate = (bizId: string, appId: number, query: any) =>
   http.post(`/config/biz/${bizId}/apps/${appId}/template_bindings/import_template_set`, query);
+
+/**
+ * 上次上线方式查询
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @returns
+ */
+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: 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`);

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

@@ -114,3 +114,11 @@ export const loginOut = () =>
   http.get('/logout').then((resp) => {
     window.location.href = `${resp.data.login_url}${encodeURIComponent(window.location.href)}&is_from_logout=1`;
   });
+
+/**
+ * 审批人员名单
+ * @returns
+ */
+export const getApproverListApi = () =>
+  `${(window as any).USER_MAN_HOST}/api/c/compapi/v2/usermanage/fs_list_users/?app_code=bk-magicbox&page_size=1000&page=1`;
+// /api/c/compapi/v2/usermanage/fs_list_users/?app_code=bk-magicbox&page_size=1000&page=1"

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

@@ -0,0 +1,29 @@
+import http from '../request';
+import { IRecordQuery } from '../../types/record';
+
+/**
+ * 获取操作记录列表
+ * @param biz_id 空间ID
+ * @param params 查询参数
+ * @returns
+ */
+export const getRecordList = (biz_id: string, params: IRecordQuery) =>
+  http.get(`/config/biz_id/${biz_id}/audits`, { params }).then((res) => res.data);
+
+/**
+ * 审批操作：撤销/驳回/通过/手动上线
+ * @param biz_id 空间ID
+ * @param app_id 服务ID
+ * @param release_id 版本ID
+ * @param params 参数
+ * @returns
+ */
+export const approve = (
+  biz_id: string,
+  app_id: number,
+  release_id: number,
+  params: { publish_status: string; reason?: string },
+) =>
+  http
+    .post(`/config/biz_id/${biz_id}/app_id/${app_id}/release_id/${release_id}/approve`, { ...params })
+    .then((res) => res.data);

bcs-services/bcs-bscp/ui/src/components/head.vue

@@ -177,6 +177,7 @@
         { id: 'configuration-example', module: 'example', name: t('配置示例') },
       ],
     },
+    { id: 'records-all', module: 'records', name: t('操作记录') },
   ]);
 
   const optionList = ref<ISpaceDetail[]>([]);

bcs-services/bcs-bscp/ui/src/components/user-selector/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <BkMemberSelector v-bind="$attrs" :class="{ 'input-error': isError }">
+    <template v-for="(obj, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data" />
+    </template>
+  </BkMemberSelector>
+</template>
+<script setup lang="ts">
+  import BkMemberSelector from './user-selector-origin/index';
+
+  withDefaults(
+    defineProps<{
+      isError: boolean;
+    }>(),
+    {},
+  );
+</script>
+<style lang="scss" scoped>
+  .input-error {
+    :deep(.user-selector-layout) {
+      .user-selector-container {
+        transition: all 0.3s;
+        border-color: #ea3636;
+      }
+    }
+  }
+</style>

bcs-services/bcs-bscp/ui/src/components/user-selector/user-selector-origin/alternate-item.tsx

@@ -0,0 +1,120 @@
+// @ts-nocheck
+import { computed, defineComponent, toRefs, withModifiers } from 'vue';
+
+import RenderAvatar from './render-avatar';
+import RenderList from './render-list';
+import tooltips from './tooltips';
+
+export default defineComponent({
+  name: 'AlternateItem',
+  directives: {
+    tooltips,
+  },
+  // props: ['selector', 'user', 'keyword', 'index'],
+  props: {
+    selector: {
+      type: Object,
+    },
+    user: {
+      type: Object,
+    },
+    keyword: {
+      type: String,
+    },
+    index: {
+      type: Number,
+    },
+  },
+  setup(props) {
+    const { selector, user, keyword } = toRefs(props);
+    const disabled = computed(() => selector.value.disabledUsers.includes(user.value.username));
+    const getItemContent = () => {
+      const [nameWithoutDomain, domain] = user.value.username.split('@');
+      let displayText = nameWithoutDomain;
+      if (keyword.value) {
+        displayText = displayText.replace(
+          new RegExp(keyword.value, 'g'),
+          `<span>${keyword.value}</span>`,
+        );
+      }
+      const displayUsername = selector.value.displayDomain && domain
+        ? `${displayText}@${domain}`
+        : displayText;
+
+      const displayName = user.value.display_name;
+      if (displayName) {
+        return `${displayUsername}(${displayName})`;
+      }
+
+      return displayUsername;
+    };
+    const getTitle = () => selector.value.getDisplayText(user.value);
+
+    return {
+      disabled,
+      getItemContent,
+      getTitle,
+    };
+  },
+  render() {
+    return (
+      <li
+        class={[
+          'alternate-item',
+          this.index === this.selector.highlightIndex ? 'highlight' : '',
+          this.disabled && !this.selector.renderList ? 'disabled' : '',
+        ]}
+        onClick={(e) => e.stopPropagation()}
+        onMousedown={withModifiers(() => this.selector.handleUserMousedown(this.user, this.disabled), ['left', 'stop'])}
+        onMouseup={withModifiers(() => this.selector.handleUserMouseup(this.user, this.disabled), ['left', 'stop'])}>
+        {
+          this.selector.renderList
+            ? <>
+              <RenderList
+                selector={this.selector}
+                keyword={this.keyword}
+                user={this.user}
+                disabled={this.disabled}
+              >
+              </RenderList>
+            </>
+            : <>
+              {
+                this.selector.tagType === 'avatar'
+                  ? <>
+                    <RenderAvatar
+                      class="item-avatar"
+                      user={this.user}
+                      urlMethod={this.selector.avatarUrl}>
+                    </RenderAvatar>
+                  </>
+                  : null
+              }
+              {
+                this.selector.displayListTips && this.user.category_name
+                  ? <>
+                    <span
+                      class="item-folder"
+                      v-tooltips={{
+                        placement: 'right',
+                        interactive: true,
+                        theme: 'light list-item-tips',
+                        content: this.user.category_name,
+                        offset: [0, 18],
+                      }}>
+                      { this.user.category_name }
+                    </span>
+                  </>
+                  : null
+              }
+              <span
+                class="item-name"
+                title={this.getTitle()}
+                v-html={this.getItemContent()}
+              ></span>
+            </>
+        }
+      </li>
+    );
+  },
+});