@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

package/src/components/meeting/components/OMeetingDetail.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { OLink } from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+import { CalendarDataType, MeetingItemT } from '../types.ts';
+import MoreText from '@/components/common/MoreText.vue';
+import { formatDate } from '@/components/meeting/utils.ts';
+import { useMeetingConfig } from '../composables/useMeetingConfig';
+
+const props = defineProps<{
+  data: MeetingItemT;
+  from?: string;
+  show: boolean;
+  page?: CalendarDataType
+}>();
+const { t, getPlatformLabel } = useMeetingConfig();
+
+// 会议详情配置
+const infoList = computed(() =>
+  [
+    { label: t('meeting.meetingDetail'), key: 'agenda', ellipsis: true },
+    { label: t('meeting.meetingCreator'), key: 'sponsor' },
+    { label: t('meeting.meetingDate2'), key: 'timeRange', extra: 'date' },
+    { label: t('meeting.meetingId'), key: 'mid' },
+    { label: t('meeting.meetingPlatform'), key: 'platform' },
+    { label: t('meeting.meetingLink'), key: 'join_url', isLink: true },
+    { label: t('meeting.meetingEtherpad'), key: 'etherpad', isLink: true },
+    { label: t('meeting.meetingReplay'), key: 'replay_url', isLink: true },
+  ].slice(0, props.from === 'my' ? 7 : 8),
+);
+
+
+const activityInfoList = computed(() => {
+  const isLive = !!props.data.live_url?.length;
+  return [
+    { label: t('meeting.activityDetail2'), key: 'agenda', ellipsis: true },
+    { label: t('meeting.startDate'), key: 'start_date_time' },
+    { label: t('meeting.endDate'), key: 'end_date_time' },
+    { label: t('meeting.registrationDeadline'), key: 'register_end_date' },
+    { label: isLive ? t('meeting.livePlatform') : t('meeting.activityAddress'), key: isLive ? 'live_url' : 'address' },
+    { label: t('meeting.activityDetailUrl'), key: 'content_url', isLink: true },
+    { label: t('meeting.activityApprover'), key: 'approver' },
+    { label: t('meeting.reviewNotesLabel'), key: 'approve_record', isRecord: true },
+  ].slice(0, props.from === 'home' ? 5 : 8);
+});
+const activityInfoApprovalList = computed(() => {
+  const isLive = !!props.data.live_url?.length;
+  return [
+    { label: t('meeting.activityType'), key: 'activity_type', isType: true },
+    { label: isLive ? t('meeting.livePlatform') : t('meeting.activityAddress'), key: isLive ? 'live_url' : 'address' },
+    { label: t('meeting.startDate'), key: 'start_date_time' },
+    { label: t('meeting.endDate'), key: 'end_date_time' },
+    { label: t('meeting.registrationDeadline'), key: 'register_end_date' },
+    { label: t('meeting.registrationUrl'), key: 'register_url', isLink: true },
+    { label: t('meeting.activityDetailUrl'), key: 'content_url', isLink: true },
+    { label: t('meeting.activityApprover'), key: 'approver' },
+    { label: t('meeting.reviewNotesLabel'), key: 'approve_record', isRecord: true },
+  ];
+});
+
+interface ColumnItemT {
+  label: string;
+  key: string;
+  ellipsis?: boolean;
+  isLink?: boolean;
+  isRecord?: boolean;
+  isType?: boolean;
+  extra?: string;
+}
+
+const getField = (key: string) => (props.data as Record<string, any>)[key];
+
+const columns = computed<ColumnItemT[]>(() => {
+  if (props.data.type === CalendarDataType.EVENTS) {
+    if (props.page === CalendarDataType.APPROVAL) {
+      return activityInfoApprovalList.value;
+    }
+    return activityInfoList.value;
+  }
+  if (props.data.type === CalendarDataType.SUMMIT) {
+    return activityInfoList.value;
+  }
+  return infoList.value;
+});
+
+const domRef = ref([]);
+// 复制会议内容
+const copyInfo = () => {
+  try {
+    let text = `${ t('meeting.meetingTopic') + props.data.topic }\n`;
+    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => `${ pre }${ cur.textContent }\n`, '');
+    navigator.clipboard.writeText(text);
+    return Promise.resolve();
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+defineExpose({ copyInfo });
+</script>
+
+<template>
+  <div class="o-meeting-detail">
+    <div
+      ref="domRef"
+      class="label-item"
+      v-for="(info, infoIdx) in columns"
+      :key="infoIdx"
+      :class="{
+        'record-item': info.isRecord && getField(info.key)?.length,
+        'link-item': info.isLink,
+        'is-empty':!getField(info.key)?.length,
+        [`label-item_${data.id}`]: true,
+        [`type_${data.type}`]: true,
+      }"
+    >
+      <template v-if="getField(info.key) && !info.isRecord">
+        <span class="label">{{ info.label }}</span>
+        <MoreText :show="show" v-if="info.ellipsis" :text="getField(info.key) || '-'" />
+        <OLink
+          v-else-if="info.isLink"
+          target="_blank"
+          class="value"
+          color="primary"
+          hover-underline
+          :href="getField(info.key)"
+        >
+          {{ getField(info.key) }}
+        </OLink>
+        <span v-else-if="info.key === 'platform'">{{ getPlatformLabel(getField(info.key)) }}</span>
+        <span v-else class="value">
+          <i v-if="info.extra" class="extra">{{ getField(info.extra) }}</i>
+          {{ getField(info.key) || '-' }}
+        </span>
+      </template>
+      <template v-if="info.isRecord && getField(info.key)?.length">
+        <span class="label">{{ info.label }}</span>
+        <div>
+          <p v-for="re in getField(info.key)" :key="re.create_time" class="value">
+            {{ re.reason }}&nbsp;&nbsp;
+            {{ formatDate(re.create_time, 'YYYY/MM/DD HH:mm:ss') }}
+            {{ re.action === 1 ? t('meeting.approveReview') : t('meeting.rejectReview') }}
+          </p>
+        </div>
+      </template>
+    </div>
+  </div>
+
+</template>
+
+<style scoped lang="scss">
+.o-meeting-detail {
+  position: relative;
+  .label-item {
+    color: var(--o-color-info3);
+    display: flex;
+    align-items: flex-start;
+    font-size: 14px;
+    gap: var(--o-gap-5);
+
+    @include respond-to('<=pad_v') {
+      font-size: 12px;
+      gap: var(--o-gap-2);
+    }
+
+    &:not(.is-empty) {
+      margin-bottom: var(--o-gap-2);
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.record-item {
+      align-items: flex-start;
+
+      .value {
+        margin-bottom: 0;
+      }
+    }
+
+    .label {
+      width: 4em;
+      flex-shrink: 0;
+      display: flex;
+
+      i {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
+
+    &.type_events {
+      .label {
+        width: 6em;
+      }
+    }
+
+    .o-link {
+      .o-link-main {
+        word-wrap: break-word;
+        @include text-truncate(3);
+      }
+    }
+
+    .value {
+      word-wrap: break-word;
+      display: flex !important;
+      align-items: center;
+      @include text-truncate(3);
+
+      &.link {
+        color: var(--o-color-primary1);
+        cursor: pointer;
+      }
+
+      .extra {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .label-item.is-empty {
+    margin: 0;
+  }
+
+  .meeting-action {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--o-gap-2);
+
+    @include respond-to('phone') {
+      border-top: 1px solid var(--o-color-control4);
+      padding-top: var(--o-gap-2);
+      position: static;
+      margin-top: var(--o-gap-2);
+    }
+  }
+}
+</style>