@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.30

package/src/components/meeting/components/OMeetingCalendarSelector.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { OButton } from '@opensig/opendesign';
+import { ElSelect, ElOption } from 'element-plus';
+import { computed, ref, watchEffect } from 'vue';
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+const props = withDefaults(
+  defineProps<{
+    modelValue: number[];
+    multiple?: boolean;
+  }>(),
+  {
+    modelValue: () => [],
+    multiple: false,
+  },
+);
+const emits = defineEmits(['update:modelValue']);
+// 默认31天
+const getList = () => {
+  let res = [];
+  for (let i = 1; i <= 31; i++) {
+    res.push(i);
+  }
+  return res;
+};
+
+const list = computed(() => getList());
+const checked = ref<number[]>([]);
+const temp = ref<number[]>([]);
+const selectorRef = ref<InstanceType<typeof ElSelect> | null>(null);
+
+const init = () => {
+  checked.value = [...props.modelValue];
+  temp.value = [...props.modelValue];
+};
+
+watchEffect(() => {
+  init();
+});
+
+const confirm = () => {
+  emits('update:modelValue', temp.value);
+  if (selectorRef.value) {
+    selectorRef.value.expanded = false;
+  }
+};
+
+const cancel = () => {
+  init();
+  if (selectorRef.value) {
+    selectorRef.value.expanded = false;
+  }
+};
+
+const clickItem = (val: number) => {
+  if (props.multiple) {
+    const idx = temp.value.indexOf(val);
+    if (idx === -1) {
+      temp.value.push(val);
+    } else {
+      temp.value.splice(idx, 1);
+    }
+    temp.value.sort();
+  } else {
+    temp.value = [val];
+    confirm();
+  }
+};
+
+const removeTag = (val: number) => {
+  if (props.multiple) {
+    clickItem(val);
+  } else {
+    temp.value = [];
+  }
+  confirm();
+};
+</script>
+
+<template>
+  <div class="o-meeting-calendar-selector" :class="!multiple && 'is-single'">
+    <ElSelect
+      ref="selectorRef"
+      popper-class="o-meeting-calendar-selector-popper"
+      :placeholder="t('meeting.selectRepeatDate')"
+      size="large"
+      multiple
+      collapseTags
+      :maxCollapseTags="3"
+      :modelValue="checked"
+      @remove-tag="removeTag"
+    >
+      <ElOption
+        v-for="t in list"
+        :key="t"
+        :label="t"
+        :value="t"
+        @click="clickItem(t)"
+        :class="temp.includes(t) && 'is-checked'" />
+      <template #footer v-if="multiple">
+        <OButton round="pill" color="primary" variant="outline" @click="confirm">{{ t('common.confirm') }}</OButton>
+        <OButton variant="text" @click="cancel">{{ t('common.cancel') }}</OButton>
+      </template>
+    </ElSelect>
+  </div>
+</template>
+
+<style lang="scss">
+.o-meeting-calendar-selector {
+  width: 100%;
+
+  .el-select {
+    .el-select__placeholder {
+      @include text1;
+    }
+
+    .el-select__icon {
+      height: 24px;
+      font-size: 24px;
+      margin-right: 2px;
+      color: var(--o-color-info1);
+      background-color: var(--o-color-info2);
+      mask: url(@/assets/meeting/svg-icons/icon-calendar.svg) no-repeat center;
+      background-size: 24px;
+      background-repeat: no-repeat;
+      background-position: center center;
+      transform: rotateZ(0deg);
+
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  &.is-single {
+    .el-select {
+      .el-select__selection {
+        margin-left: 0;
+      }
+
+      .el-tag {
+        padding: 0;
+        background-color: transparent;
+        color: var(--o-color-info1);
+        @include text1;
+
+        .el-tag__close {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.o-meeting-calendar-selector-popper {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
+  padding: 0 var(--o-gap-5);
+
+  .el-select-dropdown__list {
+    padding: 16px 0;
+    display: flex;
+    gap: 12px 8px;
+    flex-wrap: wrap;
+    width: 272px;
+
+    .el-select-dropdown__item {
+      padding: 0;
+      width: 32px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--o-color-fill2);
+      color: var(--o-color-info1);
+      border-radius: var(--meeting-cell-radius);
+
+      &:hover,
+      &.is-checked {
+        background-color: var(--o-color-primary1);
+        color: #fff;
+        font-weight: inherit;
+      }
+
+      &.is-selected {
+        font-weight: inherit;
+
+        &::after {
+          content: none;
+        }
+      }
+    }
+  }
+
+  .el-select-dropdown__footer {
+    padding: 16px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .o-btn {
+      min-width: fit-content;
+
+      &:last-child {
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,263 @@
+<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';
+import { useI18n } from '@/i18n';
+
+const props = defineProps<{
+  data: MeetingItemT;
+  from?: string;
+  show: boolean;
+  page?: CalendarDataType
+}>();
+const { t, getPlatformLabel } = useMeetingConfig();
+const { locale } = useI18n();
+const isZh = computed(() => locale.value === '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(() => {
+  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) => {
+  const val = (props.data as Record<string, any>)[key];
+  if (key === 'register_end_date' && val) {
+    return formatDate(val, 'YYYY/MM/DD HH:mm');
+  }
+  return val;
+};
+
+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 SPLIT_MARK = '|';
+// 复制会议内容
+const copyInfo = () => {
+  try {
+    const colon = isZh.value ? '：' : ': ';
+    let text = `${ t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
+    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
+      return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\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>
+        <span class="split-mark">{{ SPLIT_MARK }}</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 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-2);
+
+    @include respond('<=pad_v') {
+      font-size: 12px;
+      gap: var(--o-gap-1);
+    }
+
+    &: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;
+      }
+    }
+
+    .split-mark {
+      width: 0;
+      height: 0;
+      opacity: 0;
+      overflow: hidden;
+    }
+
+    .more-text-wrapper {
+      position: relative;
+      top: -2px;
+    }
+
+    .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('phone') {
+      border-top: 1px solid var(--o-color-control4);
+      padding-top: var(--o-gap-2);
+      position: static;
+      margin-top: var(--o-gap-2);
+    }
+  }
+}
+</style>