@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/activity/OActivityForm.vue

@@ -1,548 +0,0 @@
-<script setup lang="ts">
-
-import {
-  OButton,
-  OForm,
-  OFormItem,
-  OInput,
-  OOption,
-  OSelect,
-  OTextarea,
-  RulesT, SelectValueT,
-  useMessage,
-} from '@opensig/opendesign';
-import { computed, ref, watch } from 'vue';
-import { ActivityFormPropsT, ParamsItemT } from './types';
-import { useScreen } from '@opendesign-plus/composables';
-import { dayjs, ElDatePicker } from 'element-plus';
-import { WEBSITE_REGEXP } from './config';
-import { EMAIL_REGEX } from '@/components/meeting/config.ts';
-import { useI18n } from '@/i18n';
-import { useActivityConfig } from './composables/useActivityConfig';
-
-const emits = defineEmits(['confirm', 'close']);
-
-const message = useMessage(null);
-const { lePadV } = useScreen();
-const { t } = useI18n();
-const $t = t;
-const { activityTypeMap } = useActivityConfig();
-
-interface TypeOptionT {
-  label: string;
-  value: number;
-}
-
-const props = withDefaults(defineProps<ActivityFormPropsT>(), {});
-const isEdit = computed(() => !!props.data);
-const form = ref<ParamsItemT>({
-  title: '',
-  organizer: '',
-  start_date: '',
-  end_date: '',
-  register_end_date: '',
-  activity_type: '',
-  synopsis: '',
-  register_url: '',
-  content_url: '',
-  address: '',
-  start: '',
-  end: '',
-  is_publish: 'true',
-  email_list: '',
-  approver: '',
-});
-
-const formRef = ref(); // 表单实例
-const loading = ref(false); // 提交状态
-
-
-// 表单校验规则
-const rules = ref<Record<string, RulesT[]>>({
-  title: [
-    { required: true, message: t('meeting.enterActivityName') },
-    {
-      validator: (value: string) => {
-        if (value.length > 50) {
-          return {
-            type: 'danger',
-            message: t('meeting.activityNameMaxLength'),
-          };
-        }
-      },
-    },
-  ],
-  activity_type: [{ required: true, message: t('meeting.selectActivityType') }],
-  organizer: [{ required: true, message: t('meeting.selectActivityOrganizer') }],
-  start_date: [
-    { required: true, message: t('meeting.selectActivityTime') },
-    {
-      validator: () => {
-        const { start_date, end_date } = form.value;
-        const startDate = start_date.split(' ');
-        const endDate = end_date.split(' ');
-        if (!start_date || !end_date) {
-          return {
-            type: 'danger',
-            message: t('meeting.selectActivityDate'),
-          };
-        }
-
-        const startArr = startDate[1].split(':').map(Number);
-        const endArr = endDate[1].split(':').map(Number);
-        if (startArr[0] < 8 || startArr[0] > 21 || endArr[0] < 8 || endArr[0] > 21) {
-          return {
-            type: 'danger',
-            message: t('meeting.activityTimeRange'),
-          };
-        }
-
-        if (dayjs(start_date).valueOf() > dayjs(end_date).valueOf()) {
-          return {
-            type: 'danger',
-            message: t('meeting.endDateAfterStartDate'),
-          };
-        }
-
-        form.value.start_date = startDate[0];
-        form.value.end_date = endDate[0];
-        form.value.start = startDate[1];
-        form.value.end = endDate[1];
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  register_end_date: [
-    {
-      validator: () => {
-        const { register_end_date, end_date, end } = form.value;
-        if (register_end_date && dayjs(`${ end_date } ${ end }`).valueOf() < dayjs(register_end_date).valueOf()) {
-          return {
-            type: 'danger',
-            message: t('meeting.registerDeadlineBeforeEnd'),
-          };
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  address: [
-    { required: true, message: t('meeting.enterActivityAddress') },
-    {
-      validator: (value: string) => {
-        if (value.length > 255) {
-          return {
-            type: 'danger',
-            message: t('meeting.activityAddressMaxLength'),
-          };
-        }
-      },
-    },
-  ],
-  register_url: [
-    {
-      validator: (value: string) => {
-        const str = value.replaceAll(' ', '') || '';
-        if (str.length) {
-          const list = str.split(';') || [];
-          if (list.some((v) => !WEBSITE_REGEXP.test(v))) {
-            return {
-              type: 'danger',
-              message: t('meeting.invalidRegistrationUrl'),
-            };
-          }
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  content_url: [
-    {
-      validator: (value: string) => {
-        const str = value.replaceAll(' ', '') || '';
-        if (str.length) {
-          const list = str.split(';') || [];
-          if (list.some((v) => !WEBSITE_REGEXP.test(v))) {
-            return {
-              type: 'danger',
-              message: t('meeting.invalidActivityDetailUrl'),
-            };
-          }
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  synopsis: [{
-    validator: (value: string) => {
-      if (value.length > 1000) {
-        return {
-          type: 'danger',
-          message: t('meeting.activityContentMaxLength'),
-        };
-      }
-    },
-  }],
-  email_list: [{
-    validator: (value: string) => {
-      const str = value.replaceAll(' ', '').replaceAll(',', ';') || '';
-      if (str.length) {
-        if (str.length > 1020) {
-          return {
-            type: 'danger',
-            message: t('meeting.emailTooLong'),
-          };
-        }
-        const list = str.split(';') || [];
-        if (list.some((v) => !EMAIL_REGEX.test(v))) {
-          return {
-            type: 'danger',
-            message: t('meeting.emailInvalid'),
-          };
-        }
-        if (list.some((v) => v.length > 50)) {
-          return {
-            type: 'danger',
-            message: t('meeting.singleEmailTooLong'),
-          };
-        }
-        if (list.length > 20) {
-          return {
-            type: 'danger',
-            message: t('meeting.emailCountTooLong'),
-          };
-        }
-      }
-    },
-    triggers: ['blur', 'change'],
-  }],
-  approver: [{ required: true, message: t('meeting.selectActivityApprover') }],
-});
-
-
-// -------------------- 活动管理员 ---------------------
-const approverList = computed(() => {
-  return props.admins || [];
-});
-
-const typeValue = ref<string | undefined>('');
-const typeOptions = ref<TypeOptionT[]>([]); // 活动类型
-activityTypeMap.value.forEach((item) => {
-  typeOptions.value.push(item);
-});
-const changeType = (val: SelectValueT) => {
-  const item = typeOptions.value.find((v) => v.label === val);
-  form.value.activity_type = item?.value as number;
-};
-
-const disabledDate = (date: Date) => {
-  return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
-};
-
-watch(
-  () => props.data,
-  (val) => {
-    if (val) {
-      const {
-        title,
-        start_date,
-        end_date,
-        register_end_date,
-        activity_type,
-        register_url,
-        content_url,
-        address,
-        start,
-        end,
-        is_publish,
-        approver,
-        update_activity_id,
-        synopsis,
-        email_list,
-        organizer,
-      } = val;
-      let params = {
-        title,
-        start_date,
-        end_date,
-        register_end_date,
-        activity_type,
-        register_url,
-        content_url,
-        address,
-        start,
-        end,
-        is_publish,
-        approver,
-        update_activity_id,
-        synopsis,
-        email_list,
-        organizer,
-      } as ParamsItemT;
-      form.value = { ...params };
-      typeValue.value = activityTypeMap.value.get(Number(val.activity_type))?.label;
-      form.value.start_date = `${ form.value.start_date } ${ form.value.start }`;
-      form.value.end_date = `${ form.value.end_date } ${ form.value.end }`;
-    }
-  },
-  { immediate: true, deep: true },
-);
-
-const confirm = async (val: boolean) => {
-  let type = isEdit.value ? t('meeting.modifyActivity') : val ? t('meeting.create') : t('meeting.saveDraft');
-  try {
-    const valid = await formRef.value?.validate();
-    if (valid.some((v: any) => !!v)) {
-      return;
-    }
-    loading.value = true;
-    form.value.is_publish = `${ val }`;
-    let flag = undefined;
-    if (isEdit.value && props.data?.status === 3) {
-      form.value.update_activity_id = props.data?.id;
-      flag = await props.creatActivity?.(form.value);
-    } else if (isEdit.value) {
-      flag = await props.editActivity?.(props.data?.id, form.value);
-    } else {
-      flag = await props.creatActivity?.(form.value);
-    }
-    if (typeof flag === 'boolean' && !flag) {
-      return;
-    }
-    message.success({
-      content: t('meeting.activityActionSuccess', [form.value.title, type.toLowerCase()]),
-    });
-    close();
-    emits('confirm');
-  } finally {
-    loading.value = false;
-  }
-};
-const close = () => {
-  form.value = {} as ParamsItemT;
-  emits('close');
-};
-
-
-defineExpose({
-  confirm,
-});
-</script>
-
-<template>
-  <div class="o-activity-form">
-    <OForm
-      :model="form"
-      ref="formRef"
-      has-required
-      label-width="108px"
-      :layout="lePadV ? 'v' : 'h'"
-      class="form-wrapper"
-    >
-      <OFormItem :rules="rules.title" :label="t('meeting.activityName')" field="title">
-        <OInput size="large" :placeholder="t('meeting.enterActivityName')" v-model="form.title" />
-      </OFormItem>
-      <OFormItem :rules="rules.organizer" :label="t('meeting.activityOrganizer')" field="organizer">
-        <OSelect :placeholder="t('meeting.selectActivityOrganizer')" size="large" v-model="form.organizer">
-          <OOption v-for="t in organizers" :key="t.name" :value="t.name">{{ t.name }}</OOption>
-        </OSelect>
-      </OFormItem>
-      <OFormItem :rules="rules.activity_type" :label="t('meeting.activityType')" field="activity_type">
-        <OSelect :placeholder="t('meeting.selectActivityType')" size="large" v-model="typeValue" @change="changeType">
-          <OOption v-for="t in typeOptions" :key="t.value" :value="t.label">{{ t.label }}</OOption>
-        </OSelect>
-      </OFormItem>
-      <OFormItem
-        v-if="form.activity_type === 1 || form.activity_type === 3"
-        :rules="rules.address"
-        :label="t('meeting.activityAddress')"
-        field="address"
-      >
-        <OInput size="large" :placeholder="t('meeting.enterActivityAddress')" v-model="form.address" />
-      </OFormItem>
-      <OFormItem :rules="rules.start_date" :label="t('meeting.activityTime')" field="start_date" required>
-        <div class="time-config">
-          <OFormItem :label="t('meeting.startDate')" field="start_date">
-            <ElDatePicker
-              size="large"
-              v-model="form.start_date"
-              type="datetime"
-              :placeholder="t('meeting.selectDate')"
-              format="YYYY/MM/DD HH:mm"
-              value-format="YYYY-MM-DD HH:mm"
-              :disabled-date="disabledDate"
-              :clearable="false"
-              class="date-activity"
-            />
-          </OFormItem>
-          <OFormItem :label="t('meeting.endDate')" field="end_date">
-            <ElDatePicker
-              size="large"
-              v-model="form.end_date"
-              type="datetime"
-              :placeholder="t('meeting.selectDate')"
-              format="YYYY/MM/DD HH:mm"
-              value-format="YYYY-MM-DD HH:mm"
-              :disabled-date="disabledDate"
-              :clearable="false"
-              class="date-activity"
-            />
-          </OFormItem>
-        </div>
-      </OFormItem>
-      <OFormItem :rules="rules.register_end_date" :label="t('meeting.registrationDeadline')" field="register_end_date">
-        <ElDatePicker
-          size="large"
-          v-model="form.register_end_date"
-          type="datetime"
-          :placeholder="t('meeting.selectActivityDeadline')"
-          format="YYYY/MM/DD HH:mm"
-          value-format="YYYY-MM-DD HH:mm"
-          :clearable="false"
-          class="date-activity"
-        />
-      </OFormItem>
-      <OFormItem :rules="rules.register_url" :label="t('meeting.registrationUrl')" field="register_url">
-        <OInput size="large" :placeholder="t('meeting.enterActivityRegistrationUrl')" v-model="form.register_url" />
-      </OFormItem>
-      <OFormItem :rules="rules.content_url" :label="t('meeting.activityDetailUrl')" field="content_url">
-        <OInput size="large" :placeholder="t('meeting.enterActivityDetailUrl')" v-model="form.content_url" />
-      </OFormItem>
-      <OFormItem :rules="rules.synopsis" :label="t('meeting.activityContent')" field="synopsis">
-        <OTextarea size="large" :placeholder="t('meeting.enterActivityContent')" v-model="form.synopsis" />
-      </OFormItem>
-      <OFormItem field="email_list" :rules="rules.email_list" :label="t('meeting.email')">
-        <OTextarea
-          :disabled="isEdit"
-          size="large"
-          :placeholder="$t('meeting.enterEmail')"
-          :rows="4"
-          v-model="form.email_list" />
-      </OFormItem>
-      <OFormItem :rules="rules.approver" :label="t('meeting.activityApprover')" field="approver">
-        <OSelect :placeholder="t('meeting.selectActivityApprover')" size="large" v-model="form.approver">
-          <OOption v-for="t in approverList" :key="t" :value="t">{{ t }}</OOption>
-        </OSelect>
-      </OFormItem>
-    </OForm>
-    <div class="form-btns">
-      <OButton color="primary" variant="solid" size="large" round="pill" @click="confirm(true)" :loading="loading">
-        {{ isEdit ? t('common.save') : t('meeting.create') }}
-      </OButton>
-      <OButton
-        v-if="!isEdit"
-        color="primary"
-        variant="outline"
-        round="pill"
-        size="large"
-        @click="confirm(false)"
-        :loading="loading"
-      >
-        {{ t('meeting.saveDraft') }}
-      </OButton>
-      <OButton color="primary" variant="outline" size="large" round="pill" @click="close">{{ t('meeting.cancelBtn') }}
-      </OButton>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-activity-form {
-  --activity-card-radius: var(--o-radius-xs);
-  --activity-input-radius: var(--o-radius-xs);
-  .form-wrapper {
-    & > .o-form-item {
-      max-width: 620px;
-    }
-  }
-
-  .o-form {
-    --o-input-color: var(--o-color-info2);
-    --o-placeholder-color: var(--o-color-info4);
-
-    &.o-form-layout-h {
-      .o-form-item-label {
-        height: var(--o-control_size-l);
-        margin: 0;
-      }
-    }
-
-    &.o-form-layout-v {
-      .o-form-item-label {
-        margin-bottom: var(--o-gap-2);
-      }
-
-      .o-form-item-main {
-        margin-left: 0;
-      }
-    }
-
-    .o-select {
-      width: 100%;
-    }
-
-    .o-input {
-      width: 100%;
-    }
-
-    .o-textarea {
-      --_box-radius: var(--activity-input-radius);
-      width: 100%;
-    }
-
-    .el-input {
-      width: 100%;
-    }
-
-    .el-input__wrapper {
-      border-radius: var(--activity-input-radius);
-    }
-
-    .time-config {
-      width: 100%;
-      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-      padding: var(--o-gap-5);
-      padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
-      border-radius: var(--activity-card-radius);
-      @include respond('<=pad_v') {
-        padding: var(--o-gap-4);
-      }
-
-      .o-form-item {
-        align-items: center;
-      }
-
-      .o-form-item-label {
-        flex: 0 0 88px;
-      }
-    }
-  }
-}
-
-.form-btns {
-  margin-top: var(--o-gap-5);
-  display: flex;
-  align-items: center;
-
-  .o-btn + .o-btn {
-    margin-left: var(--o-gap-4);
-  }
-
-  @include respond('<=pad_v') {
-    .o-btn {
-      --btn-min-width: 74px;
-    }
-  }
-}
-</style>
-<style lang="scss">
-.date-activity {
-  .el-input__inner {
-    @include text1;
-  }
-
-  .el-input__inner::placeholder {
-    color: var(--o-color-info4);
-  }
-}
-</style>