@opendesign-plus-test/components 0.0.1-rc.21 → 0.0.1-rc.23

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

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { OLink } from '@opensig/opendesign';
+import { computed, ref } from 'vue';
+import { MeetingItemT } from '@/components/meeting/types.ts';
+import MoreText from '@/components/common/MoreText.vue';
+import { Locales, useI18n } from '@/i18n';
+
+const props = defineProps<{
+  data: MeetingItemT;
+  from?: string;
+  show: boolean;
+}>();
+const { t, locale } = useI18n();
+const isZh = computed(() => locale.value === Locales.ZH);
+// 会议详情配置
+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(() =>
+  [
+    { label: '起始日期', key: 'start_date_time' },
+    { label: '结束日期', key: 'end_date_time' },
+    { label: '报名截止时间', key: 'register_end_date' },
+    { label: '活动详情地址', key: 'content_url', isLink: true },
+    { label: '活动地点', key: 'address' },
+    { label: '活动审批人', key: 'approver' },
+    { label: '审核备注', key: 'approve_record', isRecord: true },
+  ].slice(0, props.from === 'home' ? 4 : 7),
+);
+const activityInfoApprovalList = computed(() => [
+  { label: '活动类型', key: 'activity_type', isType: true },
+  { label: '活动地点', key: 'address' },
+  { label: '起始日期', key: 'start_date_time' },
+  { label: '结束日期', key: 'end_date_time' },
+  { label: '报名截止时间', key: 'register_end_date' },
+  { label: '报名网址', key: 'register_url', isLink: true },
+  { label: '活动详情地址', key: 'content_url', isLink: true },
+  { label: '活动审批人', key: 'approver' },
+  { label: '审核备注', key: 'approve_record', isRecord: true },
+]);
+
+const columns = computed(() => {
+  if (props.data.type === 'activity') {
+    if (props.page === 'approval') {
+      return activityInfoApprovalList.value;
+    }
+    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) => `${ 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"
+      :class="`label-item_${data.id} type_${data.type} `"
+      v-for="(info, infoIdx) in columns"
+      :key="infoIdx"
+    >
+      <template v-if="data[info.key]">
+        <span class="label">{{ info.label }}<i>{{ isZh ? '：' : ':' }}</i></span>
+        <MoreText :show="show" v-if="info.ellipsis" :text="data[info.key] || '-'" />
+        <OLink
+          v-else-if="info.isLink"
+          target="_blank"
+          class="value"
+          color="primary"
+          hover-underline
+          :href="data[info.key]"
+        >
+          {{ data[info.key] }}
+        </OLink>
+        <span v-else class="value">
+        <i v-if="info.extra" class="extra">{{ data[info.extra] }}</i>
+        {{ data[info.key] || '-' }}
+      </span>
+      </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('phone') {
+      font-size: 12px;
+      gap: var(--o-gap-1);
+    }
+
+    .label {
+      width: 4em;
+      flex-shrink: 0;
+      display: flex;
+
+      i {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+    }
+
+    &.type_activity {
+      .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 + .label-item {
+    margin-top: var(--o-gap-2);
+  }
+
+  .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>