feat: 续期展示逻辑修改&&添加国际化 (#1854)

TencentBlueKing · Jul 30, 2024 · a5cc719 · a5cc719
1 parent 25cfcb5
commit a5cc719
Show file tree

Hide file tree

Showing 15 changed files with 749 additions and 164 deletions.
diff --git a/src/pages/src/components/MemberSelector.vue b/src/pages/src/components/MemberSelector.vue
@@ -4,7 +4,7 @@
       class="member-selector"
       :clearable="false"
       :collapse-tags="false"
-      placeholder="请输入"
+      :placeholder="$t('请输入')"
       filterable
       multiple
       show-on-init

diff --git a/src/pages/src/http/organizationFiles.ts b/src/pages/src/http/organizationFiles.ts
@@ -90,7 +90,7 @@ export const getTenantsUserDetail = (id: string) => http.get(`${prefix}/tenants/
 /**
  * 租户用户续期
  */
-export const updateAccountExpiredAt = (id: string, params: any) => http.put(`${prefix}/tenants/users/${id}/`, params);
+export const updateAccountExpiredAt = (id: string, params: any) => http.put(`${prefix}/tenants/users/${id}/account-expired-at/`, params);
 
 /**
  * 更新租户用户
@@ -123,12 +123,12 @@ export const resetTenantsUserPassword = (id: string, params: any) => http.put(`$
 /**
  * 批量删除用户
  */
-export const batchDeleteUser = (user_ids: any) => http.delete(`${prefix}/tenants/users/operations/batch_delete/`, {user_ids});
+export const batchDeleteUser = (user_ids: any) => http.delete(`${prefix}/tenants/users/operations/batch_delete/`, { user_ids });
 
 /**
  * 移出当前组织
  */
-export const batchDelete= (params: any) => http.delete(`${prefix}/tenants/department-user-relations/operations/batch_delete/`, params);
+export const batchDelete = (params: any) => http.delete(`${prefix}/tenants/department-user-relations/operations/batch_delete/`, params);
 
 /**
  * 移至目标组织
@@ -193,4 +193,4 @@ export const getUsersList = (params: any) => http.get(`${prefix}/tenants/users/`
 /**
  * 密码规则
  */
-export const passwordRule = (id: string) => http.get(`${prefix}/tenants/users/${id}/password-rule/`)
+export const passwordRule = (id: string) => http.get(`${prefix}/tenants/users/${id}/password-rule/`);
diff --git a/src/pages/src/language/en.json b/src/pages/src/language/en.json
@@ -533,5 +533,8 @@
   "一年　": "year　　",
   "剩余x天": "Remaining {diffInDays} days",
   "已过期": "have expired",
-  "回调地址为：": "The callback address is: "
+  "回调地址为：": "The callback address is: ",
+  "确认要关闭企业微信登录吗？": "Are you sure you want to disable WeChat Work login?",
+  "关闭后用户将无法通过企业微信登录": "After deactivation, users will not be able to log in via WeChat Work",
+  "请将以下回调地址填写到企业微信配置内：": "Please enter the following callback address in the enterprise wechat configuration:"
 }
diff --git a/src/pages/src/language/zh.json b/src/pages/src/language/zh.json
@@ -464,7 +464,6 @@
   "快速录入": "快速录入",
   "确定录入": "确定录入",
   "录入格式：": "录入格式：",
-  "信息之间使用逗号区隔，换行可输入多个用户": "信息之间使用逗号区隔，换行可输入多个用户",
   "输入案例：zhangsan, 张三, [email protected], 15709998877": "输入案例：zhangsan, 张三, 10000{'@'}qq.com, 15709998877",
   "录入用户": "录入用户",
   "预览确认": "预览确认",
@@ -492,15 +491,13 @@
   "唯一的管理员不能停用": "唯一的管理员不能停用",
   "确认同步？": "确认同步？",
   "确定删除字段": "确定删除字段",
-  "快速将用户录入到当前组织，如需添加到其他组织，请使用": "快速将用户录入到当前组织，如需添加到其他组织，请使用",
   "「导入」": "「导入」",
   " 功能。": " 功能。",
   "录入字段为 ": "录入字段为 ",
   "设置 > 字段设置": "设置 > 字段设置",
   " 中配置。": " 中配置。",
   "输入用户名、姓名、邮箱、手机号码搜索": "输入用户名、姓名、邮箱、手机号码搜索",
   "将": "将",
-  "从当前组织移出，并加入到以下组织": "从当前组织移出，并加入到以下组织",
   "追加到以下组织": "追加到以下组织",
   "的现有组织，并加入到以下组织": "的现有组织，并加入到以下组织",
   "确认并同步": "确认并同步",
@@ -536,5 +533,8 @@
   "一年　": "一年　",
   "剩余x天": "剩余{diffInDays}天",
   "已过期": "已过期",
-  "回调地址为：": "回调地址为："
+  "回调地址为：": "回调地址为：",
+  "确认要关闭企业微信登录吗？": "确认要关闭企业微信登录吗？",
+  "关闭后用户将无法通过企业微信登录": "关闭后用户将无法通过企业微信登录",
+  "请将以下回调地址填写到企业微信配置内：": "请将以下回调地址填写到企业微信配置内："
 }
diff --git a/src/pages/src/views/organization/components/operate-more.vue b/src/pages/src/views/organization/components/operate-more.vue
@@ -98,7 +98,7 @@ const defaultDropdownList = ref<any[]>([
       dropdownVisible.value = false;
       isAddSubOrg.value = false;
       orgDialogVisible.value = true;
-      deptName.value = props.dept.name
+      deptName.value = props.dept.name;
     },
   },
 ]);
@@ -134,6 +134,7 @@ const handleDelete = () => {
   dropdownVisible.value = false;
   InfoBox({
     title: t('确认删除该组织？'),
+    confirmText: t('确定'),
     subTitle: h(
       'div',
       {},
@@ -147,7 +148,7 @@ const handleDelete = () => {
             },
           },
           `${t('组织')}: ${props.dept.name}`,
-        )
+        ),
       ],
     ),
     onConfirm: () => {

diff --git a/src/pages/src/views/organization/components/table-list.vue b/src/pages/src/views/organization/components/table-list.vue
@@ -204,7 +204,7 @@
         :details-info="editDetailsInfo"
         @updateUsers="updateUsers"
         @handleCancelEdit="handleCancelEdit" />
-      <ViewUser :user-data="detailsInfo" :detail="editDetailsInfo" @updateUsers="updateUsers" v-else />
+      <ViewUser :user-data="detailsInfo" :detail="editDetailsInfo" @updateUsers="updateUsers" :isShowBtn="!isCollaborativeUsers && isLocalDataSource" v-else />
     </bk-sideslider>
     <!-- 导入弹框 -->
     <ImportDialog

diff --git a/src/pages/src/views/organization/details/ViewUser.vue b/src/pages/src/views/organization/details/ViewUser.vue
@@ -24,10 +24,11 @@
         </div>
         <div class="details-content-item">
           <span class="details-content-key">{{ $t('所属组织') }}：</span>
-          <span class="details-content-value" v-if="userData.departments.length > 0"
-            v-bk-tooltips="{content: (userData.organization_paths || []).join('\n'),
-            placement: 'top',
-            disabled: userData.departments.length === 0}"
+          <span
+            class="details-content-value" v-if="userData.departments.length > 0"
+            v-bk-tooltips="{ content: (userData.organization_paths || []).join('\n'),
+                             placement: 'top',
+                             disabled: userData.departments.length === 0 }"
           >
             <!-- {{ formatConvert(userData.departments) }} -->
             {{detail.organization_paths}}
@@ -44,8 +45,12 @@
         </div>
         <div class="details-content-item">
           <span class="details-content-key">{{ $t('账号过期时间') }}：</span>
-          <span class="details-content-value">{{ `${detail.account_expired_at} (${remainingDays(detail.account_expired_at)})` }}</span>
-          <button class="text-[#3A84FF] ml-[16px] text-[14px]" @click="renewalClick">{{ $t('续期') }}</button>
+          <span class="details-content-value">
+            {{ remainingDays(detail.account_expired_at) }}
+          </span>
+          <button v-if="isShowBtn" class="text-[#3A84FF] ml-[16px] text-[14px]" @click="renewalClick">
+            {{ $t('续期') }}
+          </button>
         </div>
         <CustomFieldsView :extras="detail.extras" />
       </div>
@@ -55,26 +60,34 @@
   </ul>
   <bk-dialog :is-show="isShowRenewal" :title="$t('账号续期')" quick-close @confirm="handleConfirm" @closed="handleClosed">
     <div class="mb-[21px]">{{ $t('过期时间：') }}{{ detail.account_expired_at?.split(' ')[0] }}</div>
-    <bk-form class="example" ref="formRef" form-type="vertical"  :model="formData">
-    <bk-form-item :label="$t('续期时长')" property="dateTime" required>
-    <bk-select  v-model="formData.dateTime" inputSearch @change="dateChange" >
-      <bk-option v-for="(option, i) in dateOptions" :key="i" :id="option.id" :name="option.name"></bk-option>
-      </bk-select>
-    </bk-form-item>
-    <bk-form-item v-if="showExpirationTime" :label="$t('账号过期时间')" property="custom" required>
-      <bk-date-picker v-model="formData.custom" :disabled-date="disabledDate" :placeholder="$t('自定义')" type="datetime" format="yyyy-MM-dd HH:mm:ss" append-to-body></bk-date-picker>
-    </bk-form-item>
-  </bk-form>
+    <bk-form class="example" ref="formRef" form-type="vertical" :model="formData">
+      <bk-form-item :label="$t('续期时长')" property="dateTime" required>
+        <bk-select v-model="formData.dateTime" input-search @change="dateChange">
+          <bk-option v-for="(option, i) in dateOptions" :key="i" :id="option.id" :name="option.name"></bk-option>
+        </bk-select>
+      </bk-form-item>
+      <bk-form-item v-if="showExpirationTime" :label="$t('账号过期时间')" property="custom" required>
+        <bk-date-picker
+          v-model="formData.custom"
+          :disabled-date="disabledDate"
+          :placeholder="$t('自定义')"
+          type="datetime"
+          format="yyyy-MM-dd HH:mm:ss"
+          append-to-body>
+        </bk-date-picker>
+      </bk-form-item>
+    </bk-form>
   </bk-dialog>
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, computed, defineEmits} from 'vue';
+import dayjs from 'dayjs';
+import { computed, defineEmits, defineProps, ref } from 'vue';
+
 import CustomFieldsView from '@/components/custom-fields/view.vue';
-import { dateConvert, formatConvert } from '@/utils';
-import { updateAccountExpiredAt, getTenantUserValidityPeriod} from '@/http';
-import dayjs from "dayjs";
+import { getTenantUserValidityPeriod, updateAccountExpiredAt } from '@/http';
 import { t } from '@/language/index';
+import { formatConvert } from '@/utils';
 
 const props = defineProps({
   userData: {
@@ -83,88 +96,86 @@ const props = defineProps({
   },
   detail: {
     type: Object,
-    default: () => ({})
-  }
+    default: () => ({}),
+  },
+  isShowBtn: {
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['updateUsers']);
-const isShowRenewal = ref(false) //续期
-const disabledDate = (date) => date.valueOf() < Date.now()
-const showExpirationTime = ref(false)
-const formRef = ref()
+const isShowRenewal = ref(false); // 续期
+const disabledDate = date => date.valueOf() < Date.now();
+const showExpirationTime = ref(false);
+const formRef = ref();
 const formData = ref({
   dateTime: '',
-  custom: ''
-})
-const expirationTime = ref(props.detail.account_expired_at?.split(' ')[0]) // 过期时间
+  custom: '',
+});
+const expirationTime = ref(props.detail.account_expired_at?.split(' ')[0]); // 过期时间
 const expirationTimes = [
   { num: 1, unit: 'month', label: t('一个月') },
   { num: 3, unit: 'month', label: t('三个月') },
   { num: 6, unit: 'month', label: t('六个月') },
-  { num: 1, unit: 'year', label: t('一年　') }
+  { num: 1, unit: 'year', label: t('一年　') },
 ];
 
-const defineDateTime = (num, unit) => dayjs(expirationTime.value).add(num, unit).format('YYYY-MM-DD');
+const defineDateTime = (num, unit) => dayjs(expirationTime.value).add(num, unit)
+  .format('YYYY-MM-DD');
 const dateOptions = expirationTimes.map(({ num, unit, label }) => {
   const date = defineDateTime(num, unit);
   return { id: `${date} 00:00:00`, name: `${label} (至${date})` };
 });
 
 dateOptions.push(
   { id: '2100-1-1T00:00:00', name: t('永久') },
-  { id: '-2', name: t('自定义') }
+  { id: '-2', name: t('自定义') },
 );
 
-const handleConfirm = async() => {
-  await formRef.value.validate()
-  const extras = Object.fromEntries(props.detail.extras.map(item => [item.name, item.value]));
+const handleConfirm = async () => {
+  await formRef.value.validate();
   const  params = {
-  ...props.detail,
-  extras, 
-  account_expired_at: formData.value.dateTime === '-2' ? formData.value.custom : formData.value.dateTime
-}
+    account_expired_at: formData.value.dateTime === '-2' ? formData.value.custom : formData.value.dateTime,
+  };
   updateAccountExpiredAt(props.detail.id, params).then(() => {
-    handleClosed()
-    emit('updateUsers', t('更新成功'))
-  })
-}
+    handleClosed();
+    emit('updateUsers', t('更新成功'));
+  });
+};
 const handleClosed = () => {
   formRef.value.clearValidate();
-  isShowRenewal.value = false
-}
+  isShowRenewal.value = false;
+};
 // 续期
-const renewalClick = async() => {
-  isShowRenewal.value = true
-  const res = await getTenantUserValidityPeriod()
+const renewalClick = async () => {
+  isShowRenewal.value = true;
+  const res = await getTenantUserValidityPeriod();
   const { validity_period } = res.data;
   let dateTime;
   if (res.data.validity_period === -1) {
-    dateTime = '2100-1-1T00:00:00'
+    dateTime = '2100-1-1T00:00:00';
   } else {
     const unit = validity_period === 365 ? 'year' : 'month';
     const num = validity_period === 365 ? 1 : validity_period / 30;
     dateTime = `${defineDateTime(num, unit)} 00:00:00`;
   }
   formData.value.dateTime = dateTime;
-}
+};
 
 // 日期改变
 const dateChange = (val) => {
   // 续期时长选择自定义时， 弹出过期时间选择框
-  showExpirationTime.value = val === '-2'
-}
+  showExpirationTime.value = val === '-2';
+};
 
-// 剩余天数
-const remainingDays = computed(() => {
-  return (params) => {
-    const now = new Date();
-    const targetDate = new Date(params);
-    const diffInMilliseconds = targetDate - now;
-    const millisecondsInOneDay = 24 * 60 * 60 * 1000;
-    const diffInDays = Math.ceil(diffInMilliseconds / millisecondsInOneDay);
-    return diffInDays > 0 ?  t('剩余x天', {diffInDays}): t('已过期')
-  }
-  })
+// 处理续期的展示
+const remainingDays = computed(() => (params) => {
+  const futureDate = Date.UTC(2100, 0, 1);
+  const specifiedTimestamp = new Date(params).getTime();
+  if (specifiedTimestamp === futureDate) return t('永久');
+  const diffInDays = Math.ceil((new Date(params) - new Date()) / (24 * 60 * 60 * 1000));
+  return diffInDays > 0 ? `${params} (${t('剩余x天', { diffInDays })})` : `${params} (${t('已过期')})`;
+});
 </script>
 
 <style lang="less" scoped>