feat: 操作类型及操作对象的对应关系

# Reviewed, transaction id: 25395
TencentBlueKing · Nov 29, 2024 · 337bc91 · 337bc91
1 parent afb3caf
commit 337bc91
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -615,5 +615,31 @@
   "修改数据源": "modify data sources",
   "删除数据源": "remove data sources",
   "同步数据源": "Synchronize data sources",
-  "数据源": "data source"
+  "数据源": "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
@@ -615,5 +615,31 @@
   "修改数据源": "修改数据源",
   "删除数据源": "删除数据源",
   "同步数据源": "同步数据源",
-  "数据源": "数据源"
+  "数据源": "数据源",
+  "认证源": "认证源",
+  "数据源用户": "数据源用户",
+  "租户用户": "租户用户",
+  "创建认证源": "创建认证源",
+  "修改认证源": "修改认证源",
+  "修改认证源状态": "修改认证源状态",
+  "删除认证源": "删除认证源",
+  "创建数据源用户": "创建数据源用户",
+  "创建用户-上级关系": "创建用户-上级关系",
+  "创建用户-部门关系": "创建用户-部门关系",
+  "修改数据源用户": "修改数据源用户",
+  "修改用户-上级关系": "修改用户-上级关系",
+  "修改用户-部门关系": "修改用户-部门关系",
+  "修改用户密码": "修改用户密码",
+  "删除数据源用户": "删除数据源用户",
+  "删除用户-上级关系": "删除用户-上级关系",
+  "删除用户-部门关系": "删除用户-部门关系",
+  "创建租户用户": "创建租户用户",
+  "创建协同租户用户": "创建协同租户用户",
+  "修改租户用户": "修改租户用户",
+  "修改用户状态": "修改用户状态",
+  "修改用户账号过期时间": "修改用户账号过期时间",
+  "修改用户邮箱": "修改用户邮箱",
+  "修改用户电话号码": "修改用户电话号码",
+  "删除租户用户": "删除租户用户",
+  "删除协同租户用户": "删除协同租户用户"
 }
diff --git a/src/pages/src/views/operations-history/index.vue b/src/pages/src/views/operations-history/index.vue
@@ -26,21 +26,21 @@
               />
             </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 +111,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 +128,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,15 +156,6 @@ 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({
@@ -165,22 +170,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;
@@ -190,7 +210,7 @@ const initAudit = async () => {
       operation: formData.operation,
       object_type: formData.object_type,
       object_name: formData.object_name,
-      creator: formData.creator,
+      creator: formData.creator[0],
       created_at: formData.created_at ? dayjs(formData.created_at).format('YYYY-MM-DD HH:mm:ss') : '',
     };
     const res = await getAudit(params);
@@ -203,29 +223,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;
@@ -239,25 +252,61 @@ const handleReset = () => {
   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>