@opendesign-plus-test/components 0.0.1-rc.32 → 0.0.1-rc.34

package/src/components/activity/OMyActivityCalendar.vue

@@ -26,9 +26,20 @@ import IconEvent from '~icons/meeting/icon-event.svg';
 import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './types';
 import { useScreen } from '@opendesign-plus/composables';
 import { formatDate, getDateNumber } from '../meeting/utils';
-import { statusMap, acticityTypeMap } from './config';
+import { getStatusMap, getActicityTypeMap } from './config';
 import { PageParamsT } from '../meeting/types';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
+import { useI18n, Locales } from '@/i18n';
+
+const { t, locale } = useI18n();
+const isZh = computed(() => locale.value === Locales.ZH);
+const statusMap = getStatusMap();
+const acticityTypeMap = getActicityTypeMap();
+
+const formatMonthYear = (date: string | Date) => {
+  const d = dayjs(date || new Date());
+  return isZh.value ? d.format('YYYY MM月') : d.format('MMMM YYYY');
+};
 
 const message = useMessage(null);
 const { isPhone } = useScreen();
@@ -302,19 +313,19 @@ const confirm = () => {
     return;
   }
   dialogLoading.value = true;
-  props.revokeActivityRequest(currentRow.value?.id)
+props.revokeActivityRequest(currentRow.value?.id)
     .then(() => {
       message.success({
-        content: `“${ currentRow.value.title }”活动撤销审核成功`,
+        content: t('meeting.revokeActivitySuccess', [currentRow.value.title]),
       });
       reloadAll.value = true;
       getList();
     })
     .catch(() => {
       message.danger({
-        content: `“${ currentRow.value.title }”活动撤销审核失败`,
+        content: t('meeting.revokeActivityFail', [currentRow.value.title]),
       });
-    })
+    })
     .finally(() => {
       revokeVisible.value = false;
       dialogLoading.value = false;
@@ -362,21 +373,21 @@ const handleSubmitReviewItem = (val: ActivityItemT) => {
     approver,
     is_publish: 'true',
   } as ParamsItemT;
-  props.editActivityRequest(val.id, params)
+props.editActivityRequest(val.id, params)
     .then(() => {
       message.success({
-        content: `“${ val.title }”活动提交审核成功`,
+        content: t('meeting.submitReviewSuccess', [val.title]),
       });
       reloadAll.value = true;
       getList();
     })
     .catch(() => {
       message.danger({
-        content: `“${ val.title }”活动提交审核失败`,
+        content: t('meeting.submitReviewFail', [val.title]),
       });
     });
 };
-// 删除活动
+// 删除活动
 const deleteVisible = ref(false);
 const handleDeleteItem = (val: ActivityItemT) => {
   currentRow.value = val;
@@ -387,24 +398,24 @@ const confirmDelete = () => {
     return;
   }
   dialogLoading.value = true;
-  props.deleteActivityRequest(currentRow.value?.id)
+props.deleteActivityRequest(currentRow.value?.id)
     .then(() => {
       message.success({
-        content: `“${ currentRow.value.title }”活动删除成功`,
+        content: t('meeting.deleteActivitySuccess', [currentRow.value.title]),
       });
       reloadAll.value = true;
       getList();
     })
     .catch(() => {
       message.danger({
-        content: `“${ currentRow.value.title }”活动删除失败`,
+        content: t('meeting.deleteActivityFail', [currentRow.value.title]),
       });
     })
     .finally(() => {
       deleteVisible.value = false;
       dialogLoading.value = false;
     });
-};
+};
 const cancelDelete = () => {
   deleteVisible.value = false;
 };
@@ -459,7 +470,7 @@ const revokeActions = computed<DialogActionT[]>(() => {
     variant: 'outline',
     round: 'pill',
     size: 'large',
-    label: '确定',
+    label: t('meeting.confirmBtn'),
     onClick: () => {
       confirm();
     },
@@ -469,7 +480,7 @@ const revokeActions = computed<DialogActionT[]>(() => {
     variant: 'solid',
     round: 'pill',
     size: 'large',
-    label: '取消',
+    label: t('meeting.cancelBtn'),
     onClick: () => {
       cancel();
     },
@@ -483,7 +494,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     variant: 'outline',
     round: 'pill',
     size: 'large',
-    label: '确定',
+    label: t('meeting.confirmBtn'),
     onClick: () => {
       confirmDelete();
     },
@@ -493,7 +504,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     variant: 'solid',
     round: 'pill',
     size: 'large',
-    label: '取消',
+    label: t('meeting.cancelBtn'),
     onClick: () => {
       cancelDelete();
     },
@@ -505,16 +516,16 @@ const deleteActions = computed<DialogActionT[]>(() => {
   <div class="o-my-activity-calendar">
     <div class="activity-list">
       <div v-if="isPhone" class="list-calendar-mb">
-        <span>{{ (selectedDate ? dayjs(new Date(selectedDate)) : dayjs()).format('YYYY MM月') }}</span>
+        <span>{{ formatMonthYear(selectedDate) }}</span>
         <span>
           <OIcon @click="changeMonth('prev-month')"><OIconChevronLeft /></OIcon>
           <OIcon @click="changeMonth('next-month')"><OIconChevronRight /></OIcon>
         </span>
       </div>
       <div class="left-calendar">
-        <ElCalendar ref="calendarRef">
+        <ElCalendar ref="calendarRef" v-model="selectedDate">
           <template #header>
-            <span>{{ (selectedDate ? dayjs(new Date(selectedDate)) : dayjs()).format('YYYY MM月') }}</span>
+            <span>{{ formatMonthYear(selectedDate) }}</span>
             <div>
               <OIcon @click="changeMonth('prev-month')">
                 <OIconChevronLeft />
@@ -558,7 +569,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   <OIcon>
                     <OIconArrowLeft />
                   </OIcon>
-                  <span>上个月</span>
+                  <span>{{ t('meeting.preMonth') }}</span>
                 </div>
                 <div class="act-item" :class="idx === activityList.length - 1 && 'last-item'">
                   <div
@@ -610,7 +621,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                               variant="outline"
                               :class="[`tag-${row.is_delete ? 'delete' : statusMap.get(row.status)?.id}`]">
                               {{
-                                row.is_delete === 1 ? '已取消' : statusMap.get(row.status)?.text
+                                row.is_delete === 1 ? t('meeting.statusCanceled') : statusMap.get(row.status)?.text
                               }}
                             </OTag>
                           </div>
@@ -621,9 +632,10 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           </div>
                         </div>
                       </div>
-                      <div class="item-header-right" v-if="!row.is_delete && [3,4,5,6].includes(row.status)">
+                      <div class="item-header-right"
+                           v-if="row.content_url && !row.is_delete && [3,4,5,6].includes(row.status)">
                         <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
-                          活动详情
+                          {{ t('meeting.activityDetail') }}
                           <template #suffix>
                             <OIcon>
                               <OIconChevronRight></OIconChevronRight>
@@ -632,15 +644,16 @@ const deleteActions = computed<DialogActionT[]>(() => {
                         </OLink>
                         <OLink
                           v-if="
+                          row.register_url && (
                             row.status === 3 ||
                             row.status === 4 ||
-                            (row.status === 2 && row.update_activity_id && new Date(row.register_end_date).getTime() > new Date().getTime())
+                            (row.status === 2 && row.update_activity_id && new Date(row.register_end_date).getTime() > new Date().getTime()))
                           "
                           :href="row.register_url"
                           target="_blank"
                           rel="noopener noreferrer"
                         >
-                          我要报名
+                          {{ t('meeting.registerNow') }}
                           <template #suffix>
                             <OIcon>
                               <OIconChevronRight></OIconChevronRight>
@@ -664,25 +677,25 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           variant="text"
                           @click="handleRevokeItem(row)"
                         >
-                          撤销审核
+                          {{ t('meeting.withdrawReview') }}
                         </OButton>
                         <OButton
                           v-if="row.status === 1 || row.status === 3 || row.status === 4 || row.status === 7"
                           variant="text" @click="handleEditItem(row)"
                         >
-                          修改活动
+                          {{ t('meeting.modifyActivity') }}
                         </OButton>
                         <OButton
                           v-if="row.status === 1 || row.status === 7" variant="text"
                           @click="handleDeleteItem(row)"
                         >
-                          删除活动
+                          {{ t('meeting.deleteActivity') }}
                         </OButton>
                         <OButton
                           v-if="row.status === 1 || row.status === 7" variant="text"
                           @click="handleSubmitReviewItem(row)"
                         >
-                          提交审核
+                          {{ t('meeting.submitReview') }}
                         </OButton>
                       </div>
                     </div>
@@ -690,12 +703,12 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   <div class="height-placeholder"></div>
                 </div>
                 <template v-if="idx === activityList.length - 1">
-                  <div class="load-text" v-if="bottomReached">加载中···</div>
+                  <div class="load-text" v-if="bottomReached">{{ t('meeting.loading') }}</div>
                   <div class="list-month-change next-month" @click="changeMonth('next-month')">
                     <OIcon>
                       <OIconArrowRight />
                     </OIcon>
-                    <span>下个月</span>
+                    <span>{{ t('meeting.nextMonth') }}</span>
                   </div>
                 </template>
               </template>
@@ -707,17 +720,17 @@ const deleteActions = computed<DialogActionT[]>(() => {
       </div>
     </div>
   </div>
-  <!-- 撤销审核弹窗 -->
+<!-- 撤销审核弹窗 -->
   <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active" :actions="revokeActions">
-    <template #header>撤销审核</template>
-    <div class="dialog-content">是否确认要撤销“{{ currentRow.title }}”活动？撤销审核后活动将变成草稿状态。</div>
+    <template #header>{{ t('meeting.withdrawReview') }}</template>
+    <div class="dialog-content">{{ t('meeting.confirmRevokeActivity', [currentRow.title]) }}</div>
   </ODialog>
   <!-- 删除活动弹窗 -->
   <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active" :actions="deleteActions">
-    <template #header>删除活动</template>
-    <div class="dialog-content">是否确认删除“{{ currentRow.title }}”活动？删除后记录将不再我的个人中心呈现。</div>
+    <template #header>{{ t('meeting.deleteActivity') }}</template>
+    <div class="dialog-content">{{ t('meeting.confirmDeleteActivity', [currentRow.title]) }}</div>
   </ODialog>
-</template>
+</template>
 
 <style lang="scss">
 
@@ -759,6 +772,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
       gap: var(--o-gap-3);
       --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
     }
+
     .o-loading {
       .o-layer-mask {
         background-color: transparent;
@@ -836,6 +850,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     @include respond-to('phone') {
       display: none;
     }
+
     .el-calendar {
       min-height: 460px;
       height: calc(100% - 54px);
@@ -1006,6 +1021,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
     .o-scroller {
       .o-scrollbar-rail {
         right: -16px;
+        height: 100%;
       }
     }
 
@@ -1173,13 +1189,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
       display: flex;
       flex-direction: column;
 
-      .o-collapse-item {
-        &.last-item {
-          .o-collapse-item-header {
-            border-bottom: none;
-          }
-        }
-      }
       .o-collapse-item-expanded + .o-collapse-item-expanded {
         margin-top: var(--o-gap-4);
       }
@@ -1233,6 +1242,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
         display: flex;
         align-items: center;
         gap: var(--o-gap-4);
+        position: relative;
 
         .o-collapse-item-icon {
           position: relative;
@@ -1257,6 +1267,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
           flex-direction: column;
           align-items: flex-start;
           justify-content: space-between;
+          margin-bottom: 0;
 
           .item-header-left {
             display: flex;
@@ -1310,6 +1321,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   max-width: 100%;
                   @include text-truncate(1);
                 }
+
                 .o-tag {
                   margin-left: 8px;
                   --tag-radius: 4px;

package/src/components/activity/config.ts

@@ -1,130 +1,141 @@
-export const acticityTypeMap = new Map([
-  [
-    1,
-    {
-      label: '线下',
-      value: 1,
-    },
-  ],
-  [
-    2,
-    {
-      label: '线上',
-      value: 2,
-    },
-  ],
-  [
-    3,
-    {
-      label: '线上与线下',
-      value: 3,
-    },
-  ],
-]);
+import { useI18n } from '@/i18n';
+
+export const getActicityTypeMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      1,
+      {
+        label: t('meeting.offline'),
+        value: 1,
+      },
+    ],
+    [
+      2,
+      {
+        label: t('meeting.online'),
+        value: 2,
+      },
+    ],
+    [
+      3,
+      {
+        label: t('meeting.onlineOffline'),
+        value: 3,
+      },
+    ],
+  ]);
+};
 
 export const WEBSITE_REGEXP = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w ./?%&=-]*)?$/;
 
 
-export const statusMap = new Map([
-  [
-    1,
-    {
-      id: 'draft',
-      label: '草稿',
-      text: '草稿',
-      value: 1,
-    },
-  ],
-  [
-    2,
-    {
-      id: 'under-review',
-      label: '审核中',
-      text: '未审核',
-      value: 2,
-    },
-  ],
-  [
-    3,
-    {
-      id: 'registration',
-      label: '报名中',
-      text: '审核通过',
-      value: 3,
-    },
-  ],
-  [
-    4,
-    {
-      id: 'in-progress',
-      label: '进行中',
-      text: '审核通过',
-      value: 4,
-    },
-  ],
-  [
-    5,
-    {
-      id: 'ended',
-      label: '已结束',
-      text: '已结束',
-      value: 5,
-    },
-  ],
-  [
-    6,
-    {
-      id: 'modified',
-      label: '已修改',
-      text: '已修改',
-      value: 6,
-    },
-  ],
-  [
-    7,
-    {
-      id: 'reject',
-      label: '已驳回',
-      text: '已驳回',
-      value: 7,
-    },
-  ],
-]);
+export const getStatusMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      1,
+      {
+        id: 'draft',
+        label: t('meeting.statusDraft'),
+        text: t('meeting.statusDraft'),
+        value: 1,
+      },
+    ],
+    [
+      2,
+      {
+        id: 'under-review',
+        label: t('meeting.statusUnderReview'),
+        text: t('meeting.statusPending'),
+        value: 2,
+      },
+    ],
+    [
+      3,
+      {
+        id: 'registration',
+        label: t('meeting.statusRegistering'),
+        text: t('meeting.statusApproved'),
+        value: 3,
+      },
+    ],
+    [
+      4,
+      {
+        id: 'in-progress',
+        label: t('meeting.statusInProgress'),
+        text: t('meeting.statusApproved'),
+        value: 4,
+      },
+    ],
+    [
+      5,
+      {
+        id: 'ended',
+        label: t('meeting.statusEnded'),
+        text: t('meeting.statusEnded'),
+        value: 5,
+      },
+    ],
+    [
+      6,
+      {
+        id: 'modified',
+        label: t('meeting.statusModified'),
+        text: t('meeting.statusModified'),
+        value: 6,
+      },
+    ],
+    [
+      7,
+      {
+        id: 'reject',
+        label: t('meeting.statusRejected'),
+        text: t('meeting.statusRejected'),
+        value: 7,
+      },
+    ],
+  ]);
+};
 
-export const approvalStatusMap = new Map([
-  [
-    'all',
-    {
-      label: '全部',
-      value: 'all',
-    },
-  ],
-  [
-    'rejected',
-    {
-      label: '已驳回',
-      value: 'rejected',
-    },
-  ],
-  [
-    'approved',
-    {
-      label: '已通过',
-      value: 'approved',
-    },
-  ],
-  [
-    'publish',
-    {
-      label: '未审核',
-      value: 'publish',
-    },
-  ],
-  [
-    'cancel',
-    {
-      label: '已取消',
-      value: 'cancel',
-    },
-  ],
-]);
+export const getApprovalStatusMap = () => {
+  const { t } = useI18n();
+  return new Map([
+    [
+      'all',
+      {
+        label: t('common.all'),
+        value: 'all',
+      },
+    ],
+    [
+      'rejected',
+      {
+        label: t('meeting.statusRejected'),
+        value: 'rejected',
+      },
+    ],
+    [
+      'approved',
+      {
+        label: t('meeting.statusApproved'),
+        value: 'approved',
+      },
+    ],
+    [
+      'publish',
+      {
+        label: t('meeting.statusPending'),
+        value: 'publish',
+      },
+    ],
+    [
+      'cancel',
+      {
+        label: t('meeting.statusCanceled'),
+        value: 'cancel',
+      },
+    ],
+  ]);
+};

package/src/components/meeting/OMeetingCalendar.vue

@@ -67,6 +67,7 @@ const calendar = ref();
 const calendarHeight = ref<string>('407px');
 const isLimit = ref(false);
 const currentDay = ref('');
+const isAutoClick = ref(false);
 // sig组列表
 const sig = ref('');
 const sigOptions = ref<GroupItemT[]>([]);
@@ -162,6 +163,7 @@ const renderData = computed(() => {
 
 const getDateData = async (day?: string) => {
   const date = dayjs(day).format('YYYY-MM-DD');
+  currentDay.value = date;
   getSummitData(date);
   getActivityData(date);
   getDateList(date);
@@ -184,7 +186,6 @@ const getDateData = async (day?: string) => {
     date: date,
     type: tabType.value,
   });
-  currentDay.value = date;
 };
 
 watch([() => tabType.value, () => tabs.value], () => {
@@ -202,6 +203,10 @@ function selectTab() {
 }
 
 const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
+  if (isAutoClick.value) {
+    isAutoClick.value = false;
+    return;
+  }
   if (new Date(day).getTime() / 1000 < 1610380800) {
     event?.stopPropagation();
     return;
@@ -217,7 +222,7 @@ const selectDate = (val: string, date: string) => {
   }
   isLimit.value = false;
   calendar.value.selectDate(val);
-  changeMeetingDay(calendar.value.selectedDay);
+  changeMeetingDay(formatDate(calendar.value.selectedDay));
 };
 
 const removeLeadingZero = (str: string) => {
@@ -249,10 +254,11 @@ onMounted(() => {
 const stopWatchData = watch(
   () => allDates.value.length,
   () => {
-    if (isClient) {
+    if (isClient && !currentDay.value) {
       nextTick(() => {
         const activeBoxes = document.querySelector('.is-today .out-box') as HTMLElement;
         if (activeBoxes) {
+          isAutoClick.value = true;
           activeBoxes.click();
           stopWatchData();
         }