From 0d260e944edc0ab6d8bb01cbccf9e87d78e64dfa Mon Sep 17 00:00:00 2001
From: JoJo_ <92574547+JoJohw@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:15:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=93=8D=E4=BD=9C=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=8A=E6=93=8D=E4=BD=9C=E5=AF=B9=E8=B1=A1=E7=9A=84=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E5=85=B3=E7=B3=BB=20(#1998)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/src/components/MemberSelector.vue   |   2 -
 src/pages/src/http/operationHistoryFiles.ts   |   8 +-
 src/pages/src/http/settingFiles.ts            |   3 +-
 src/pages/src/http/types/operationHistory.ts  |  11 ++
 src/pages/src/http/types/settingFiles.ts      |  10 +
 src/pages/src/language/en.json                |  36 +++-
 src/pages/src/language/zh.json                |  28 ++-
 .../src/views/operations-history/index.vue    | 176 +++++++++++-------
 .../views/operations-history/operations.ts    |  69 +++++++
 9 files changed, 267 insertions(+), 76 deletions(-)
 create mode 100644 src/pages/src/views/operations-history/operations.ts

diff --git a/src/pages/src/components/MemberSelector.vue b/src/pages/src/components/MemberSelector.vue
index aa3985f92..2e244bd20 100644
--- a/src/pages/src/components/MemberSelector.vue
+++ b/src/pages/src/components/MemberSelector.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="member-selector-wrapper" :class="{ 'is-focus': isFocus }">
     <bk-select
-      v-model="modelValue"
       class="member-selector"
       :clearable="clearable"
       :collapse-tags="false"
@@ -55,7 +54,6 @@ const props = defineProps({
     default: true,
   },
 });
-const modelValue = defineModel<string[]>('modelValue');
 const emit = defineEmits(['changeSelectList', 'scrollChange', 'searchUserList']);
 const isFocus = ref(false);
 const scrollLoading = ref(false);
diff --git a/src/pages/src/http/operationHistoryFiles.ts b/src/pages/src/http/operationHistoryFiles.ts
index 3eed62be2..1ea98da22 100644
--- a/src/pages/src/http/operationHistoryFiles.ts
+++ b/src/pages/src/http/operationHistoryFiles.ts
@@ -1,9 +1,11 @@
 import http from './fetch';
-import { AuditListParams } from './types/operationHistory';
+import { AuditListData, AuditListParams } from './types/operationHistory';
+interface ResponseData<T> {
+  data: T
+}
 
 export const getAudit = (params: AuditListParams) => {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { page, pageSize, operation, object_type, object_name, creator, created_at } = params;
-  console.log(params);
-  return http.get(`/api/v3/web/audit/?page_size=${pageSize}&page=${page}&operation=${operation}&object_type=${object_type}&object_name=${object_name}&creator=${creator}&created_at=${created_at}`);
+  return http.get<ResponseData<AuditListData>>(`/api/v3/web/audit/?page_size=${pageSize}&page=${page}&operation=${operation}&object_type=${object_type}&object_name=${object_name}&creator=${creator}&created_at=${created_at}`);
 };
diff --git a/src/pages/src/http/settingFiles.ts b/src/pages/src/http/settingFiles.ts
index 9d56af12d..a33345a70 100644
--- a/src/pages/src/http/settingFiles.ts
+++ b/src/pages/src/http/settingFiles.ts
@@ -10,6 +10,7 @@ import type {
   PutRealManagersParams,
   PutTenantInfoParams,
   PutUserValidityParams,
+  RealUsersData,
   RealUsersParams,
   TenantItem,
   TenantSettingFieldsData,
@@ -72,7 +73,7 @@ export const getRealManagers = () => http.get('/api/v3/web/tenant-info/real-mana
 /**
  * 管理员配置-租户实名用户列表
  */
-export const getRealUsers = (params: RealUsersParams) => http.get('/api/v3/web/tenant-info/real-users/', params);
+export const getRealUsers = (params: RealUsersParams) => http.get<ResponseData<RealUsersData>>('/api/v3/web/tenant-info/real-users/', params);
 
 /**
  * 管理员配置-批量添加租户实名管理员
diff --git a/src/pages/src/http/types/operationHistory.ts b/src/pages/src/http/types/operationHistory.ts
index edaf41934..667d2e3bf 100644
--- a/src/pages/src/http/types/operationHistory.ts
+++ b/src/pages/src/http/types/operationHistory.ts
@@ -7,3 +7,14 @@ export interface AuditListParams {
   creator: string,
   created_at: string
 }
+
+export interface AuditListData {
+  count: number,
+  results: {
+    operation: string,
+    object_type: string,
+    object_name: string,
+    creator: string,
+    created_at: string,
+  }[],
+}
diff --git a/src/pages/src/http/types/settingFiles.ts b/src/pages/src/http/types/settingFiles.ts
index c7e1a6334..a00b88982 100644
--- a/src/pages/src/http/types/settingFiles.ts
+++ b/src/pages/src/http/types/settingFiles.ts
@@ -135,3 +135,13 @@ export interface TenantSettingFieldsData {
   }[],
   custom_fields: any[],
 }
+
+
+export interface RealUsersData {
+  count: number,
+  results: {
+    id: string,
+    username: string,
+    full_name: string,
+  }[],
+}
diff --git a/src/pages/src/language/en.json b/src/pages/src/language/en.json
index 47c084857..76e6b6f54 100644
--- a/src/pages/src/language/en.json
+++ b/src/pages/src/language/en.json
@@ -611,9 +611,35 @@
   "确认批量停用所选用户 ？": "Are you sure to batch deactivate selected users?",
   "从当前组织移出": "Move out of the current organization",
   "并追加到以下组织": "And added to the following organizations",
-  "创建数据源": "create data source",
-  "修改数据源": "modify data sources",
-  "删除数据源": "remove data sources",
-  "同步数据源": "Synchronize data sources",
-  "数据源": "data source"
+  "创建数据源": "Create data source",
+  "修改数据源": "Modify Data Sources",
+  "删除数据源": "Delete Data Sources",
+  "同步数据源": "Synchronize Data Sources",
+  "数据源": "Data Source",
+  "认证源": "Authentication Source",
+  "数据源用户": "Data Source User",
+  "租户用户": "Tenant User",
+  "创建认证源": "Create Authentication Source",
+  "修改认证源": "Modify Authentication Source",
+  "修改认证源状态": "Modify Authentication Source Status",
+  "删除认证源": "Delete Authentication Source",
+  "创建数据源用户": "Create Data Source User",
+  "创建用户-上级关系": "Create User-Superior Relationship",
+  "创建用户-部门关系": "Create User-Department Relationship",
+  "修改数据源用户": "Modify Data Source User",
+  "修改用户-上级关系": "Modify User-Superior Relationship",
+  "修改用户-部门关系": "Modify User-Department Relationship",
+  "修改用户密码": "Modify User Password",
+  "删除数据源用户": "Delete Data Source User",
+  "删除用户-上级关系": "Delete User-Superior Relationship",
+  "删除用户-部门关系": "Delete User-Department Relationship",
+  "创建租户用户": "Create Tenant User",
+  "创建协同租户用户": "Create Collaborative Tenant User",
+  "修改租户用户": "Modify Tenant User",
+  "修改用户状态": "Modify User Status",
+  "修改用户账号过期时间": "Modify User Account Expiration Time",
+  "修改用户邮箱": "Modify User Email",
+  "修改用户电话号码": "Modify User Phone Number",
+  "删除租户用户": "Delete Tenant User",
+  "删除协同租户用户": "Delete Collaborative Tenant User"
 }
diff --git a/src/pages/src/language/zh.json b/src/pages/src/language/zh.json
index 9ba83b408..41f7c8d4e 100644
--- a/src/pages/src/language/zh.json
+++ b/src/pages/src/language/zh.json
@@ -615,5 +615,31 @@
   "修改数据源": "修改数据源",
   "删除数据源": "删除数据源",
   "同步数据源": "同步数据源",
-  "数据源": "数据源"
+  "数据源": "数据源",
+  "认证源": "认证源",
+  "数据源用户": "数据源用户",
+  "租户用户": "租户用户",
+  "创建认证源": "创建认证源",
+  "修改认证源": "修改认证源",
+  "修改认证源状态": "修改认证源状态",
+  "删除认证源": "删除认证源",
+  "创建数据源用户": "创建数据源用户",
+  "创建用户-上级关系": "创建用户-上级关系",
+  "创建用户-部门关系": "创建用户-部门关系",
+  "修改数据源用户": "修改数据源用户",
+  "修改用户-上级关系": "修改用户-上级关系",
+  "修改用户-部门关系": "修改用户-部门关系",
+  "修改用户密码": "修改用户密码",
+  "删除数据源用户": "删除数据源用户",
+  "删除用户-上级关系": "删除用户-上级关系",
+  "删除用户-部门关系": "删除用户-部门关系",
+  "创建租户用户": "创建租户用户",
+  "创建协同租户用户": "创建协同租户用户",
+  "修改租户用户": "修改租户用户",
+  "修改用户状态": "修改用户状态",
+  "修改用户账号过期时间": "修改用户账号过期时间",
+  "修改用户邮箱": "修改用户邮箱",
+  "修改用户电话号码": "修改用户电话号码",
+  "删除租户用户": "删除租户用户",
+  "删除协同租户用户": "删除协同租户用户"
 }
diff --git a/src/pages/src/views/operations-history/index.vue b/src/pages/src/views/operations-history/index.vue
index 100fcc841..5b27dbf31 100644
--- a/src/pages/src/views/operations-history/index.vue
+++ b/src/pages/src/views/operations-history/index.vue
@@ -19,28 +19,27 @@
                 :show-on-init="false"
                 :multiple="false"
                 :clearable="true"
-                :model-value="formData.creator"
                 @change-select-list="changeSelectList"
                 @search-user-list="fetchRealUsers"
                 @scroll-change="scrollChange"
               />
             </bk-form-item>
             <bk-form-item class="inline-block ml-[20px]" :label="$t('操作类型')">
-              <bk-select class="items-select" v-model="formData.operation">
+              <bk-select class="items-select" v-model="formData.operation" @change="handleOperationChange">
                 <bk-option
-                  v-for="(value, key) in operationMap"
-                  :key="key"
-                  :id="key"
-                  :name="value" />
+                  v-for="item in curOperationOptions"
+                  :key="item.key"
+                  :id="item.key"
+                  :name="item.label" />
               </bk-select>
             </bk-form-item>
             <bk-form-item class="inline-block ml-[20px]" :label="$t('操作对象')">
-              <bk-select class="items-select" v-model="formData.object_type">
+              <bk-select class="items-select" v-model="formData.object_type" @change="handleOperationTypeChange">
                 <bk-option
-                  v-for="(value, key) in operationTypeMap"
-                  :key="key"
-                  :id="key"
-                  :name="value" />
+                  v-for="item in curOperationType"
+                  :key="item.key"
+                  :id="item.key"
+                  :name="item.label" />
               </bk-select>
             </bk-form-item>
             <bk-form-item class="inline-block ml-[20px]" :label="$t('操作实例')">
@@ -111,7 +110,7 @@
           <bk-table-column :label="$t('操作时间')" sort prop="created_at" width="100"></bk-table-column>
           <bk-table-column :label="$t('操作对象')" prop="object_type" width="100">
             <template #default="{ row }">
-              <span>{{ operationTypeMap[row.object_type as keyof typeof operationTypeMap] }}</span>
+              <span>{{ getOperationTypeLabel(row.object_type) }}</span>
             </template>
           </bk-table-column>
           <bk-table-column :label="$t('操作实例')" prop="object_name" width="100"></bk-table-column>
@@ -128,12 +127,26 @@
 
 <script setup lang="ts">
 import dayjs from 'dayjs';
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { getCurrentOperationOptions, operationMap, operationType } from './operations';
 
 import MemberSelector from '@/components/MemberSelector.vue';
 import { getAudit } from '@/http/operationHistoryFiles';
 import { getRealUsers } from '@/http/settingFiles';
-import { t } from '@/language/index';
+
+// 人员选择器
+const realUsers = ref({
+  count: 0,
+  results: [],
+});
+// 请求人员数据参数
+const params = reactive({
+  page: 1,
+  page_size: 10,
+  keyword: '',
+  exclude_manager: true,
+});
 
 const isHover = ref(false);
 const isFold = reactive({
@@ -142,19 +155,10 @@ const isFold = reactive({
 });
 
 const formRef = ref();
-const operationMap = {
-  create_data_source: t('创建数据源'),
-  modify_data_source: t('修改数据源'),
-  delete_data_source: t('删除数据源'),
-  sync_data_source: t('同步数据源'),
-};
-const operationTypeMap = {
-  data_source: t('数据源'),
-};
 const isLoading = ref(false);
 const tableData = ref([]);
 const formData = reactive({
-  creator: [],  // 操作人
+  creator: '',  // 操作人
   operation: '', // 操作类型
   object_type: '', // 操作对象
   object_name: '', // 操作实例
@@ -165,22 +169,37 @@ const pagination = reactive({
   count: 0,
   limit: 10,
 });
-const realUsers = ref({
-  count: 0,
-  results: [],
-});
-const params = reactive({
-  page: 1,
-  page_size: 10,
-  keyword: '',
-  exclude_manager: true,
-});
 
-onMounted(() => {
-  initAudit();
-  initCreator();
-});
+// 获取人员选择器数据
+const initCreator = async () => {
+  const res = await getRealUsers({
+    exclude_manager: params.exclude_manager,
+  });
+  realUsers.value = res.data;
+};
+
+// 人员选择器选择回调方法
+const changeSelectList = (values: string) => {
+  formData.creator = values;
+};
+// 人员选择器分页请求数据处理
+const scrollChange = () => {
+  params.page += 1;
+  getRealUsers(params).then((res) => {
+    realUsers.value.count = res.data.count;
+    realUsers.value.results.push(...res.data.results);
+  });
+};
+// 获取人员选择器列表
+const fetchRealUsers = (value: string) => {
+  params.keyword = value;
+  params.page = 1;
+  getRealUsers(params).then((res) => {
+    realUsers.value = res.data;
+  });
+};
 
+// 获取audit数据
 const initAudit = async () => {
   try {
     isLoading.value = true;
@@ -203,29 +222,22 @@ const initAudit = async () => {
   }
 };
 
-const initCreator = async () => {
-  const res = await getRealUsers({
-    exclude_manager: params.exclude_manager,
-  });
-  realUsers.value = res.data;
-};
-
+// pageSize更改回调方法
 const pageLimitChange = (pageSize: number) => {
   pagination.limit = pageSize;
   initAudit();
 };
 
+// page更改回调方法
 const pageCurrentChange = (page: number) => {
   pagination.current = page;
   initAudit();
 };
 
+// 折叠button处理
 const handleHoverFoldBtn = () => isHover.value = true;
-
 const handleLeaveFoldBtn = () => isHover.value = false;
-
 const togglePreFold = () =>  isFold.preFold = !isFold.preFold;
-
 const toggleFold = () => {
   isFold.curFold = !isFold.curFold;
   isHover.value = false;
@@ -233,31 +245,67 @@ const toggleFold = () => {
 
 const handleReset = () => {
   formData.created_at = '';
-  formData.creator = [];
+  formData.creator = '';
   formData.object_name = '';
   formData.object_type = '';
   formData.operation = '';
 };
 
-const changeSelectList = (values: string[]) => {
-  formData.creator = values;
+// 当前关联操作对象，当操作类型或操作对象有数据时，“锁死”操作类型及操作对象的option，当且仅当两者均为空，relyKey才可以为null
+const relyKey = ref(null);
+// 所有的操作类型
+const operationOptions = getCurrentOperationOptions();
+
+// 基于relyKey筛选后的操作类型
+const curOperationOptions = computed(() => {
+  if (relyKey.value) {
+    return operationOptions
+      .filter((option: {key: string, label: string, relyKey: string}) => option.relyKey === relyKey.value);
+  }
+  return operationOptions;
+});
+
+// 基于relyKey筛选后的操作对象
+const curOperationType = computed(() => {
+  if (relyKey.value) {
+    return operationType.filter((type: {key: string, label: string}) => type.key === relyKey.value);
+  }
+  return operationType;
+});
+
+// 根据后台返回的操作对象的值，找对应label
+const getOperationTypeLabel = (key: string) => {
+  const curType = curOperationType.value.find((type: {key: string, label: string}) => type.key === key);
+  return curType ? curType.label : '--';
 };
-const scrollChange = () => {
-  params.page += 1;
-  getRealUsers(params).then((res) => {
-    realUsers.value.count = res.data.count;
-    realUsers.value.results.push(...res.data.results);
-  });
+
+// 操作类型选择回调方法
+const handleOperationChange = (value: string) => {
+  const curRelyKey = (curOperationOptions.value.find(option => option.key === value))?.relyKey;
+  if (curRelyKey) {
+    // 更新relyKey
+    relyKey.value = curRelyKey;
+    // 同步操作对象数据
+    formData.object_type = curRelyKey;
+  } else if (formData.object_type === '') {
+    // 若操作对象此时未选择，可以清空relyKey
+    relyKey.value = null;
+  }
 };
-// 获取用户列表
-const fetchRealUsers = (value: string) => {
-  params.keyword = value;
-  params.page = 1;
-  getRealUsers(params).then((res) => {
-    realUsers.value = res.data;
-  });
+
+// 操作对象选择回调方法
+const handleOperationTypeChange = (value: string) => {
+  if (formData.operation === '') {
+    // 若操作类型此时未选择，可以清空relyKey
+    relyKey.value = value;
+  }
 };
 
+onMounted(() => {
+  initAudit();
+  initCreator();
+});
+
 </script>
 
 <style lang="less" scoped>
diff --git a/src/pages/src/views/operations-history/operations.ts b/src/pages/src/views/operations-history/operations.ts
new file mode 100644
index 000000000..d3236cf6a
--- /dev/null
+++ b/src/pages/src/views/operations-history/operations.ts
@@ -0,0 +1,69 @@
+import { t } from '@/language/index';
+
+// 若有增加操作对象及操作类型的对应关系，可在operationMap及operationType进行补充
+export const operationMap = {
+  data_source: {
+    create_data_source: t('创建数据源'),
+    modify_data_source: t('修改数据源'),
+    delete_data_source: t('删除数据源'),
+    sync_data_source: t('同步数据源'),
+  },
+  idp: {
+    create_idp: t('创建认证源'),
+    modify_idp: t('修改认证源'),
+    modify_idp_status: t('修改认证源状态'),
+    delete_idp: t('删除认证源'),
+  },
+  data_source_user: {
+    create_data_source_user: t('创建数据源用户'),
+    create_user_leader: t('创建用户-上级关系'),
+    create_user_department: t('创建用户-部门关系'),
+
+    modify_data_source_user: t('修改数据源用户'),
+    modify_user_leader: t('修改用户-上级关系'),
+    modify_user_department: t('修改用户-部门关系'),
+    modify_user_password: t('修改用户密码'),
+
+    delete_data_source_user: t('删除数据源用户'),
+    delete_user_leader: t('删除用户-上级关系'),
+    delete_user_department: t('删除用户-部门关系'),
+  },
+  tenant_user: {
+    create_tenant_user: t('创建租户用户'),
+    create_collaboration_tenant_user: t('创建协同租户用户'),
+
+    modify_tenant_user: t('修改租户用户'),
+    modify_user_status: t('修改用户状态'),
+    modify_user_account_expired_at: t('修改用户账号过期时间'),
+    modify_user_email: t('修改用户邮箱'),
+    modify_user_phone: t('修改用户电话号码'),
+
+    delete_tenant_user: t('删除租户用户'),
+    delete_collaboration_tenant_user: t('删除协同租户用户'),
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const operationType = [
+  {
+    key: 'data_source',
+    label: t('数据源'),
+  },
+  {
+    key: 'idp',
+    label: t('认证源'),
+  },
+  {
+    key: 'data_source_user',
+    label: t('数据源用户'),
+  },
+  {
+    key: 'tenant_user',
+    label: t('租户用户'),
+  },
+];
+
+// 展开operationMap子项，获取操作类型所有下拉项
+export const getCurrentOperationOptions = () => Object
+  .entries(operationMap)
+  .flatMap(([relyKey, actions]) => Object.entries(actions).map(([key, label]) => ({ key, label, relyKey })));