@opendesign-plus/components 0.0.1-rc.10

package/src/components/activity/OActivityForm.vue

@@ -0,0 +1,548 @@
+<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 { getActicityTypeMap, WEBSITE_REGEXP } from './config';
+import { EMAIL_REGEX } from '@/components/meeting/config.ts';
+import { useI18n } from '@/i18n';
+
+const emits = defineEmits(['confirm', 'close']);
+
+const message = useMessage(null);
+const { lePadV } = useScreen();
+const { t } = useI18n();
+const $t = t;
+const acticityTypeMap = getActicityTypeMap();
+
+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>('');
+const typeOptions = ref<TypeOptionT[]>([]); // 活动类型
+acticityTypeMap.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 = acticityTypeMap.get(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) => !!v)) {
+      return;
+    }
+    loading.value = true;
+    form.value.is_publish = `${ val }`;
+    if (isEdit.value && props.data?.status === 3) {
+      form.value.update_activity_id = props.data?.id;
+      await props.creatActivity?.(form.value);
+    } else if (isEdit.value) {
+      await props.editActivity?.(props.data?.id, form.value);
+    } else {
+      await props.creatActivity?.(form.value);
+    }
+    message.success({
+      content: t('meeting.activityActionSuccess', [form.value.title, type.toLowerCase]),
+    });
+    close();
+    emits('confirm');
+  } catch {
+    loading.value = false;
+    form.value.start_date = `${ form.value.start_date } ${ form.value.start }`;
+    form.value.end_date = `${ form.value.end_date } ${ form.value.end }`;
+    message.danger({
+      content: t('meeting.activityActionFail', [form.value.title, type.toLowerCase]),
+    });
+  } 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 {
+  .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(--o-radius-xs);
+      width: 100%;
+    }
+
+    .el-input {
+      width: 100%;
+    }
+
+    .el-input__wrapper {
+      border-radius: var(--o-radius-xs);
+    }
+
+    .time-config {
+      width: 100%;
+      background-color: color-mix(in srgb, var(--o-color-control2-light), transparent 60%);
+      padding: var(--o-gap-5);
+      padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
+      border-radius: var(--o-radius-xs);
+      @include respond-to('<=pad_v') {
+        padding: var(--o-gap-4);
+      }
+
+      .o-form-item {
+        align-items: center;
+      }
+
+      .o-form-item-label {
+        flex: 0 0 80px;
+      }
+    }
+  }
+}
+
+.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-to('<=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>