@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/components/meeting/OMeetingForm.vue

@@ -14,18 +14,19 @@ import {
   ORadioGroup,
   OSelect,
   OSwitch,
-  OTextarea,
+  OTextarea, RulesT,
   useMessage,
 } from '@opensig/opendesign';
 import IconHelp from '~icons/meeting/icon-help.svg';
 import IconTip from '~icons/meeting/icon-tip.svg';
-import { MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT } from './types';
+import { CycleSubItemT, MeetingFormPropsT, MeetingGroupType, MeetingPostT, OptionItemT, PlatformT } from './types';
 import dayjs from 'dayjs';
 import { findLabelFromOptions, formatDateNumber, getDateNumber } from './utils';
 import { EMAIL_REGEX, INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config';
 import OMeetingCalendarSelector from './components/OMeetingCalendarSelector.vue';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
+import { ValidatorResultT } from '@opensig/opendesign/lib/form/types';
 
 const { t, locale, cycleTypeOptions0, intervalWeekOptions, getPlatformLabel } = useMeetingConfig();
 
@@ -43,11 +44,11 @@ const weekOptions = intervalWeekOptions;
 const intervalTypeMax = computed(() => {
   return findLabelFromOptions(form.value.cycle_type, cycleTypeOptions.value, 'max');
 });
-const initForm = {
+const initForm: MeetingPostT = {
   is_record: false,
   agenda: '',
   email_list: '',
-  platform: '',
+  platform: 'WELINK',
   topic: '',
   group_name: '',
   etherpad: '',
@@ -62,10 +63,10 @@ const initForm = {
   cycle_point: [],
 };
 const form = ref<MeetingPostT>(Object.assign({}, initForm) as unknown as MeetingPostT); // 表单数据
-const formRef = ref(null); // 表单实例
+const formRef = ref<any>(null); // 表单实例
 const loading = ref(false); // 提交状态
 // 表单校验规则
-const rules = computed(() => {
+const rules = computed<Record<string, RulesT[]>>(() => {
   return {
     topic: [
       { required: true, message: t('meeting.enterMeetingName') },
@@ -98,23 +99,36 @@ const rules = computed(() => {
     }],
     etherpad: [{ required: true, message: t('meeting.enterEtherpad') }],
     date: [{ required: true, message: t('meeting.selectDate') }],
+    platform: [{ required: true, message: t('meeting.selectPlatform') }],
     time: [
       {
-        validator: (value: string) => {
+        validator: (value: any) => {
           const { is_cycle, cycle_type, cycle_interval, cycle_point, date, date_range } = form.value;
           if (is_cycle) {
-            const msg = {
-              type: 'danger',
-              message: t('meeting.finishMeetingConfig'),
-            };
+            const msg = t('meeting.finishMeetingConfig');
             if (cycle_type === INTERVAL_DAY) {
-              if (!cycle_interval) return msg;
+              if (!cycle_interval) {
+                return {
+                  type: 'danger',
+                  message: msg,
+                };
+              }
             }
             if (cycle_type === INTERVAL_WEEK) {
-              if (!cycle_interval || !cycle_point?.length) return msg;
+              if (!cycle_interval || !cycle_point?.length) {
+                return {
+                  type: 'danger',
+                  message: msg,
+                };
+              }
             }
             if (cycle_type === INTERVAL_MONTH) {
-              if (!cycle_interval || !cycle_point?.length) return msg;
+              if (!cycle_interval || !cycle_point?.length) {
+                return {
+                  type: 'danger',
+                  message: msg,
+                };
+              }
             }
             if (!date_range?.length) {
               return {
@@ -129,7 +143,7 @@ const rules = computed(() => {
               const weeks = new Set();
               while (!dayjs(start).isAfter(dayjs(end))) {
                 weeks.add(dayjs(start).day());
-                start = dayjs(start).add(1, 'day');
+                start = dayjs(start).add(1, 'day').format('YYYY-MM-DD');
               }
               if (cycle_point.every((point) => !weeks.has(point))) {
                 return {
@@ -142,7 +156,7 @@ const rules = computed(() => {
               const days = new Set();
               while (!dayjs(start).isAfter(dayjs(end))) {
                 days.add(dayjs(start).date());
-                start = dayjs(start).add(1, 'day');
+                start = dayjs(start).add(1, 'day').format('YYYY-MM-DD');
               }
               if (cycle_point.every((point) => !days.has(point))) {
                 return {
@@ -165,7 +179,7 @@ const rules = computed(() => {
               message: t('meeting.selectMeetingTime'),
             };
           }
-          const arr = value.split('-').map((v) => v.split(':').map(Number));
+          const arr = value.split('-').map((v: string) => v.split(':').map(Number));
           if (arr[0][0] > arr[1][0] || (arr[0][0] === arr[1][0] && arr[0][1] >= arr[1][1])) {
             return {
               type: 'danger',
@@ -173,8 +187,8 @@ const rules = computed(() => {
             };
           }
           if (!form.value.is_cycle && form.value.date && form.value.start) {
-            const start = dayjs(`${ form.value.date } ${ form.value.start }`);
-            if (new Date(start).getTime() < new Date().getTime()) {
+            const start = `${ form.value.date } ${ form.value.start }`;
+            if (dayjs(start).isBefore(dayjs())) {
               return {
                 type: 'danger',
                 message: t('meeting.startTimeBeforeEndTime'),
@@ -185,12 +199,11 @@ const rules = computed(() => {
         triggers: ['blur', 'change'],
       },
     ],
-    platform: [{ required: true, message: t('meeting.selectPlatform') }],
     email_list: [
       {
-        validator: (value: string) => {
+        validator: (value: any) => {
           if (props.isEdit) {
-            return {};
+            return {} as unknown as ValidatorResultT;
           }
           const str = value.replaceAll(' ', '').replaceAll(',', ';') || '';
           if (str.length) {
@@ -200,7 +213,7 @@ const rules = computed(() => {
                 message: t('meeting.emailTooLong'),
               };
             }
-            const list = str.split(';') || [];
+            const list: string[] = str.split(';') || [];
             if (list.some((v) => !EMAIL_REGEX.test(v))) {
               return {
                 type: 'danger',
@@ -233,7 +246,7 @@ const getSigOptions = async () => {
     return;
   }
   const res = await props.getGroupsRequest();
-  sigOptions.value = res.map((v) => ({ label: v.group_name, value: v.group_name, ...v }));
+  sigOptions.value = res.map((v: OptionItemT) => ({ ...v, label: v.group_name, value: v.group_name }));
   if (props.data) {
     changeSig(form.value.group_name);
   }
@@ -245,9 +258,9 @@ const getPlatformOptions = async () => {
     return;
   }
   const res = await props.getPlatformsRequest();
-  typeOptions.value = res.map((v) => ({ label: getPlatformLabel(v), value: v }));
+  typeOptions.value = res.map((v: string) => ({ label: getPlatformLabel(v), value: v }));
   if (!props.data) {
-    form.value.platform = typeOptions.value[0].value;
+    form.value.platform = typeOptions.value[0].value as unknown as PlatformT;
   }
 };
 
@@ -256,7 +269,7 @@ watch(
   () => props.data,
   (data) => {
     if (data) {
-      const sub = data?.cycle_sub?.find((v) => v.sub_id === props.subId) || {};
+      const sub = data?.cycle_sub?.find((v) => v.sub_id === props.subId) || {} as unknown as CycleSubItemT;
       const { mid, date, start, end, sub_id } = sub;
       Object.assign(
         form.value,
@@ -311,8 +324,8 @@ watch(
 );
 const cancel = () => {
   form.value = Object.assign({}, initForm);
-  formRef.value.clearValidate();
-  formRef.value.resetFields();
+  formRef.value?.clearValidate?.();
+  formRef.value?.resetFields?.();
   emits('cancel');
 };
 
@@ -331,7 +344,7 @@ const confirm = async () => {
   try {
     loading.value = true;
     const valid = await formRef.value.validate();
-    if (valid.some((v) => !!v)) {
+    if (!valid || valid.some((v: any) => !!v)) {
       return;
     }
     const {
@@ -359,7 +372,7 @@ const confirm = async () => {
       group_name,
       platform,
       is_cycle,
-    } as MeetingPostT;
+    } as MeetingPostT as unknown as any;
     if (is_cycle) {
       params = {
         ...params,
@@ -396,8 +409,14 @@ const confirm = async () => {
           is_notify: true,
         });
       } else {
-        const { email_list, platform, group_name, etherpad, ...data } = params;
-        await props?.editMeetingRequest(props.data.id, {
+        const {
+          email_list: _email_list,
+          platform: _platform,
+          group_name: _group_name,
+          etherpad: _etherpad,
+          ...data
+        } = params;
+        await props?.editMeetingRequest(props.data?.id as unknown as number, {
           ...data,
           is_notify: true,
         });
@@ -423,14 +442,14 @@ onMounted(() => {
   getPlatformOptions();
 });
 
-const changeSig = (sig) => {
+const changeSig = (sig: any) => {
   const find = sigOptions.value.find((v) => v.value === sig);
   if (!props.isEdit) {
     form.value.etherpad = find?.etherpad || '';
     form.value.email_list = find?.email_list || '';
   }
 };
-const disabledDate = (date) => {
+const disabledDate = (date: Date) => {
   return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
 };
 const changeTime = () => {
@@ -741,7 +760,7 @@ defineExpose({
       align-items: center;
       --form-label-gap-top: 0;
       color: var(--o-color-info2);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         height: fit-content;
         @include text2;
       }
@@ -755,13 +774,13 @@ defineExpose({
       align-items: center;
 
       .o-form-item-main-wrap {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           @include text2;
         }
       }
     }
     .record-item {
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -774,7 +793,7 @@ defineExpose({
       }
 
       .o-form-item-main {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           flex-grow: 0;
         }
       }
@@ -786,7 +805,7 @@ defineExpose({
       column-gap: var(--o-gap-4);
       row-gap: var(--o-gap-2);
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-bottom: var(--o-gap-3);
         flex-direction: column;
         align-items: flex-start;
@@ -860,7 +879,7 @@ defineExpose({
       border-color: var(--o-color-primary2);
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       background-color: var(--o-color-fill2);
     }
 
@@ -891,7 +910,7 @@ defineExpose({
 
       div.o-form-item-main {
         margin-left: 0;
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-top: 0;
         }
       }
@@ -904,7 +923,7 @@ defineExpose({
     }
   }
 
-  @include respond-to('phone') {
+  @include respond('phone') {
     width: auto;
     .o-form {
       .o-form-item-main {
@@ -925,10 +944,10 @@ defineExpose({
         margin-left: 0;
       }
 
-      @include respond-to('pad_v') {
+      @include respond('pad_v') {
         margin-bottom: var(--o-gap-4);
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
         margin-bottom: var(--o-gap-3);
       }
     }
@@ -937,7 +956,7 @@ defineExpose({
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
       border-radius: var(--o-radius-xs);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }
 
@@ -955,10 +974,10 @@ defineExpose({
 
       .o-form-item-main {
         margin-left: var(--o-gap-6);
-        @include respond-to('pad_v') {
+        @include respond('pad_v') {
           margin-left: 0;
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           margin-left: 0;
           max-width: 100%;
         }
@@ -1006,8 +1025,8 @@ defineExpose({
   --el-color-primary: var(--o-color-primary1);
   --el-datepicker-active-color: var(--o-color-primary1);
   --el-fill-color-light: var(--o-color-control2-light);
-  --el-input-bg-color: var(--o-color-control-light);
-  --el-fill-color-blank: var(--o-color-control-light);
+  --el-input-bg-color: var(--o-color-control5-light);
+  --el-fill-color-blank: var(--o-color-control5-light);
 }
 
 .o-meeting-form-popover-content {
@@ -1032,7 +1051,7 @@ defineExpose({
 }
 
 .o-meeting-form-date-picker-popper {
-  @include respond-to('phone') {
+  @include respond('phone') {
     .el-picker-panel {
       width: min(var(--grid-content-width), 400px);
 

package/src/components/meeting/OMeetingPlayback.vue

@@ -93,8 +93,8 @@ const getSubjectList = async (url: string) => {
   subjectList.value = (json || []).map((z: SubjectItemT) => {
     return {
       ...z,
-      startTime: transformTime(z.startTime as string),
-      endTime: transformTime(z.endTime as string),
+      startTimeNumber: transformTime(z.startTime),
+      endTimeNumber: transformTime(z.endTime),
     };
   });
 };
@@ -244,8 +244,8 @@ onUnmounted(() => {
                   :data-start="sub.startTime"
                   :data-end="sub.endTime"
                   :style="{
-                      '--start': (sub.startTime < 0 ? 0 : sub.startTime) / playerDuration,
-                      '--end': (sub.endTime > playerDuration ? playerDuration : sub.endTime) / playerDuration,
+                      '--start': (sub.startTimeNumber < 0 ? 0 : sub.startTimeNumber) / playerDuration,
+                      '--end': (sub.endTimeNumber > playerDuration ? playerDuration : sub.endTimeNumber) / playerDuration,
                       background: getProgressColor(idx),
                     }"
                 ></div>
@@ -272,7 +272,7 @@ onUnmounted(() => {
   gap: var(--grid-column-gutter);
   align-items: flex-start;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     flex-wrap: wrap;
   }
 
@@ -284,7 +284,7 @@ onUnmounted(() => {
 
   .left-card {
     width: 60%;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       width: 100%;
     }
 
@@ -317,7 +317,7 @@ onUnmounted(() => {
 
         .o-tab-nav {
           padding-bottom: var(--o-gap-4);
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             padding-bottom: var(--o-gap-2);
           }
         }
@@ -431,7 +431,7 @@ onUnmounted(() => {
 
   .right-card {
     width: 40%;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       width: 100%;
     }
   }