@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.220

package/src/components/activity/OActivityForm.vue

@@ -1,540 +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 { acticityTypeMap, 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;
-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: '',
-  content: '',
-  approver: '',
-});
-
-const formRef = ref(); // 表单实例
-const loading = ref(false); // 提交状态
-
-
-// 表单校验规则
-const rules = ref<Record<string, RulesT[]>>({
-  title: [
-    { required: true, message: '请输入活动名称' },
-    {
-      validator: (value: string) => {
-        if (value.length > 50) {
-          return {
-            type: 'danger',
-            message: '活动名称不能超过50个字符',
-          };
-        }
-      },
-    },
-  ],
-  activity_type: [{ required: true, message: '请选择活动类型' }],
-  organizer: [{ required: true, message: '请选择活动类型' }],
-  start_date: [
-    { required: true, message: '请选择活动时间' },
-    {
-      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: '请选择活动日期',
-          };
-        }
-
-        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: '开始和结束时间必须在8：00-22：00点之间',
-          };
-        }
-
-        if (dayjs(start_date).valueOf() > dayjs(end_date).valueOf()) {
-          return {
-            type: 'danger',
-            message: '结束日期必须大于起始日期',
-          };
-        }
-
-        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: [
-    { required: true, message: '请选择报名截止时间' },
-    {
-      validator: () => {
-        const { register_end_date, end_date, end } = form.value;
-        if (dayjs(`${ end_date } ${ end }`).valueOf() < dayjs(register_end_date).valueOf()) {
-          return {
-            type: 'danger',
-            message: '报名截止日期必须小于结束日期',
-          };
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  address: [
-    { required: true, message: '请输入活动地点' },
-    {
-      validator: (value: string) => {
-        if (value.length > 255) {
-          return {
-            type: 'danger',
-            message: '活动名称不能超过255个字符',
-          };
-        }
-      },
-    },
-  ],
-  register_url: [
-    { required: true, message: '请输入活动报名网址' },
-    {
-      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: '请输入正确的报名网址',
-            };
-          }
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  content_url: [
-    { required: true, message: '请输入活动详情介绍网址' },
-    {
-      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: '请输入正确的活动详情网址',
-            };
-          }
-        }
-      },
-      triggers: ['blur', 'change'],
-    },
-  ],
-  content: [{
-    validator: (value: string) => {
-      if (value.length > 1000) {
-        return {
-          type: 'danger',
-          message: '活动内容不能超过1000个字符',
-        };
-      }
-    },
-  }],
-  email_list: [{
-    validator: (value: string) => {
-      const str = value.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: '请选择活动审批人' }],
-});
-
-
-// -------------------- 活动管理员 ---------------------
-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,
-      } = 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,
-      } 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 ? '修改' : val ? '创建' : '保存草稿';
-  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.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);
-    }
-    const msg = `“${ form.value.title }”活动${ type }成功`;
-    message.success({
-      content: msg,
-    });
-    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 }`;
-    const msg = `“${ form.value.title }”活动${ type }失败`;
-    message.danger({
-      content: msg,
-    });
-  }
-};
-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="活动名称" field="title">
-        <OInput size="large" placeholder="请输入活动名称" v-model="form.title" />
-      </OFormItem>
-      <OFormItem :rules="rules.organizer" label="活动主办方" field="organizer">
-        <OInput size="large" placeholder="请选择活动主办方" v-model="form.organizer" />
-      </OFormItem>
-      <OFormItem :rules="rules.activity_type" label="活动类型" field="activity_type">
-        <OSelect placeholder="请选择活动类型" 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="活动地点"
-        field="address"
-      >
-        <OInput size="large" placeholder="请输入活动地点" v-model="form.address" />
-      </OFormItem>
-      <OFormItem :rules="rules.start_date" label="活动时间" field="start_date" required>
-        <div class="time-config">
-          <OFormItem label="起始日期" field="start_date">
-            <ElDatePicker
-              size="large"
-              v-model="form.start_date"
-              type="datetime"
-              placeholder="请选择日期"
-              format="YYYY/MM/DD HH:mm"
-              value-format="YYYY-MM-DD HH:mm"
-              :disabled-date="disabledDate"
-              :clearable="false"
-              class="date-activity"
-            />
-          </OFormItem>
-          <OFormItem label="结束日期" field="end_date">
-            <ElDatePicker
-              size="large"
-              v-model="form.end_date"
-              type="datetime"
-              placeholder="请选择日期"
-              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="报名截止时间" field="register_end_date">
-        <ElDatePicker
-          size="large"
-          v-model="form.register_end_date"
-          type="datetime"
-          placeholder="请选择报名截止时间"
-          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="报名网址" field="register_url">
-        <OInput size="large" placeholder="请输入活动报名网址" v-model="form.register_url" />
-      </OFormItem>
-      <OFormItem :rules="rules.content_url" label="活动详情网址" field="content_url">
-        <OInput size="large" placeholder="请输入活动详情介绍网址" v-model="form.content_url" />
-      </OFormItem>
-      <OFormItem :rules="rules.content" label="活动内容" field="content">
-        <OTextarea size="large" placeholder="请输入活动内容" v-model="form.content" />
-      </OFormItem>
-      <OFormItem field="email_list" :rules="rules.email_list" label="邮件地址">
-        <OTextarea
-          :disabled="isEdit"
-          size="large"
-          :placeholder="$t('meeting.enterEmail')"
-          :rows="4"
-          v-model="form.email_list" />
-      </OFormItem>
-      <OFormItem :rules="rules.approver" label="活动审批人" field="approver">
-        <OSelect placeholder="请选择活动审批人" 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 ? '保存' : '创建' }}
-      </OButton>
-      <OButton
-        v-if="!isEdit"
-        color="primary"
-        variant="outline"
-        round="pill"
-        size="large"
-        @click="confirm(false)"
-        :loading="loading"
-      >
-        保存草稿
-      </OButton>
-      <OButton color="primary" variant="outline" size="large" round="pill" @click="close">取消</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 {
-      width: 100%;
-    }
-
-    .el-input {
-      width: 100%;
-    }
-
-    .el-input__wrapper {
-      border-radius: var(--o-radius-xs);
-    }
-
-    .time-config {
-      width: 100%;
-      background-color: var(--o-color-control2-light);
-      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>

package/src/components/activity/OMyActivityCalendar.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div class="o-my-activity-calendar"></div>
-</template>
-
-<style lang="scss">
-.o-my-activity-calendar {
-
-}
-</style>

package/src/components/activity/config.ts

@@ -1,130 +0,0 @@
-export const acticityTypeMap = new Map([
-  [
-    1,
-    {
-      label: '线下',
-      value: 1,
-    },
-  ],
-  [
-    2,
-    {
-      label: '线上',
-      value: 2,
-    },
-  ],
-  [
-    3,
-    {
-      label: '线上与线下',
-      value: 3,
-    },
-  ],
-]);
-
-export const WEBSITE_REGEXP = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w ./?%&=-]*)?$/;
-
-
-export const statusMap = new Map([
-  [
-    1,
-    {
-      id: 'draft',
-      label: '草稿',
-      text: '草稿',
-      value: 1,
-    },
-  ],
-  [
-    2,
-    {
-      id: 'under-review',
-      label: '审核中',
-      text: '未审核',
-      value: 2,
-    },
-  ],
-  [
-    3,
-    {
-      id: 'registration',
-      label: '报名中',
-      text: '审核通过',
-      value: 3,
-    },
-  ],
-  [
-    4,
-    {
-      id: 'in-progress',
-      label: '进行中',
-      text: '审核通过',
-      value: 4,
-    },
-  ],
-  [
-    5,
-    {
-      id: 'ended',
-      label: '已结束',
-      text: '已结束',
-      value: 5,
-    },
-  ],
-  [
-    6,
-    {
-      id: 'modified',
-      label: '已修改',
-      text: '已修改',
-      value: 6,
-    },
-  ],
-  [
-    7,
-    {
-      id: 'reject',
-      label: '审核驳回',
-      text: '审核驳回',
-      value: 7,
-    },
-  ],
-]);
-
-export const approvalStatusMap = new Map([
-  [
-    'all',
-    {
-      label: '全部',
-      value: 'all',
-    },
-  ],
-  [
-    'rejected',
-    {
-      label: '审核驳回',
-      value: 'rejected',
-    },
-  ],
-  [
-    'approved',
-    {
-      label: '审核通过',
-      value: 'approved',
-    },
-  ],
-  [
-    'publish',
-    {
-      label: '未审核',
-      value: 'publish',
-    },
-  ],
-  [
-    'cancel',
-    {
-      label: '已取消',
-      value: 'cancel',
-    },
-  ],
-]);