@opendesign-plus-test/components 0.0.1-rc.23 → 0.0.1-rc.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.23",
+  "version": "0.0.1-rc.25",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -32,8 +32,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/styles": "0.0.1-rc.2",
-    "@opendesign-plus/composables": "0.0.1-rc.6"
+    "@opendesign-plus/composables": "0.0.1-rc.6",
+    "@opendesign-plus/styles": "0.0.1-rc.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",

package/src/components/activity/OActivityApproval.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ElTable, ElTableColumn, dayjs } from 'element-plus';
 import {
+  DialogActionT,
   OButton,
-  OCollapse,
+  OCollapse, OCollapseItem,
   ODialog,
   ODivider,
   OForm,
@@ -13,10 +14,11 @@ import {
   useMessage,
 } from '@opensig/opendesign';
 import { useScreen } from '@opendesign-plus/composables';
-import { onMounted, watch, ref, reactive } from 'vue';
+import { onMounted, watch, ref, reactive, computed } from 'vue';
 import { ActivityItemT, ActivityTablePropsT, ReviewParamsT, TypeOptionT } from './types';
 import { approvalStatusMap, statusMap } from './config';
 import ThFilter from '../common/ThFilter.vue';
+import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 
 
 const message = useMessage(null);
@@ -280,6 +282,51 @@ watch(
   },
   { deep: true },
 );
+
+const cancelActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    label: '确定',
+    onClick: () => {
+      confirmCancel();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const reviewActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    label: '确定',
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
 </script>
 
 <template>
@@ -289,7 +336,7 @@ watch(
         <ElTableColumn type="expand">
           <template #default="props">
             <div class="expand-detail">
-              <MeetingDetail :data="props.row" page="approval" />
+              <OMeetingDetail :data="props.row" page="approval" show />
             </div>
           </template>
         </ElTableColumn>
@@ -344,7 +391,7 @@ watch(
                 statusMap.get(scope.row.status)?.text
               }}
             </OTag>
-            <OTag v-else color="primary" variant="outline" class="tag-calcel">已取消</OTag>
+            <OTag v-else color="primary" variant="outline" class="tag-cancel">已取消</OTag>
           </template>
         </ElTableColumn>
         <ElTableColumn label="操作">
@@ -396,7 +443,7 @@ watch(
                 statusMap.get(act.status)?.text
               }}
             </OTag>
-            <OTag v-else color="primary" variant="outline" class="tag-calcel">已取消</OTag>
+            <OTag v-else color="primary" variant="outline" class="tag-cancel">已取消</OTag>
           </div>
           <OCollapseItem :value="act.id">
             <template #title>
@@ -405,27 +452,47 @@ watch(
                 <p>{{ dayjs(act.create_time).format('YYYY/MM/DD HH:mm:ss') }}</p>
               </div>
               <div class="activity-btn">
-                <OLink v-if="act.status === 7 || act.is_delete" color="danger" variant="text"
-                       @click.stop="deleteItem(act)">
+                <OLink
+                  v-if="act.status === 7 || act.is_delete"
+                  color="danger"
+                  variant="text"
+                  @click.stop="deleteItem(act)"
+                >
                   删除
                 </OLink>
-                <OLink v-if="(act.status === 3 || act.status === 4) && act.is_delete !== 1" color="danger"
-                       variant="text" @click.stop="cancelItem(act)"
+                <OLink
+                  v-if="(act.status === 3 || act.status === 4) && act.is_delete !== 1"
+                  color="danger"
+                  variant="text"
+                  @click.stop="cancelItem(act)"
                 >
                   取消活动
-                </OLink
+                </OLink>
+                <OLink
+                  v-if="act.status === 2"
+                  color="primary"
+                  variant="text"
+                  @click.stop="passItem(act)"
                 >
-                <OLink v-if="act.status === 2" color="primary" variant="text" @click.stop="passItem(act)">
                   通过
                 </OLink>
-                <OLink v-if="act.status === 2" color="primary" variant="text" @click.stop="rejectItem(act)">
+                <OLink
+                  v-if="act.status === 2"
+                  color="primary"
+                  variant="text"
+                  @click.stop="rejectItem(act)"
+                >
                   驳回
                 </OLink>
               </div>
             </template>
             <div class="activity-detail">
-              <MeetingDetail :show="expanded.includes(act.id)" :data="act"
-                             :ref="(insRef) => getDetailRefs(insRef, act.id)" page="approval" />
+              <OMeetingDetail
+                :show="expanded.includes(act.id)"
+                :data="act"
+                :ref="(insRef) => getDetailRefs(insRef, act.id)"
+                page="approval"
+              />
             </div>
           </OCollapseItem>
         </template>
@@ -444,8 +511,12 @@ watch(
         />
       </div>
     </div>
-    <ODialog v-model:visible="reviewVisible" :phone-half-full="lePadV"
-             main-class="handle-dialog-approval review-dialog">
+    <ODialog
+      v-model:visible="reviewVisible"
+      :phone-half-full="lePadV"
+      main-class="handle-dialog-approval review-dialog"
+      :actions="reviewActions"
+    >
       <template #header>{{ digTitle }}</template>
       <div class="dialog-content">
         <OForm :model="form" ref="formRef" has-required layout="v" class="form-wrapper">
@@ -463,31 +534,18 @@ watch(
           </OFormItem>
         </OForm>
       </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <OButton color="primary" :variant="lePadV ? 'text' : 'solid'" size="large" @click="confirm"
-                   :loading="loading">确定
-          </OButton>
-          <ODivider v-if="lePadV" direction="v" />
-          <OButton color="primary" :variant="lePadV ? 'text' : 'outline'" size="large" @click="cancel">取消</OButton>
-        </div>
-      </template>
     </ODialog>
     <!-- 取消活动弹窗 -->
-    <ODialog v-model:visible="cancelVisible" :phone-half-full="lePadV" main-class="handle-dialog-approval">
+    <ODialog
+      v-model:visible="cancelVisible"
+      :phone-half-full="lePadV"
+      main-class="handle-dialog-approval"
+      :actions="cancelActions"
+    >
       <template #header>{{ cancelTitle }}</template>
-      <div class="dialog-content">是否确认{{ cancelText }}“{{ currentRow.title
-        }}”活动？取消后将不在会议首页呈现，且已报名的数据也会被清空，请谨慎操作。
+      <div class="dialog-content">
+        是否确认{{ cancelText }}“{{ currentRow?.title }}”活动？{{ cancelText }}后将不在会议首页呈现，且已报名的数据也会被清空，请谨慎操作。
       </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <OButton color="primary" :variant="lePadV ? 'text' : 'outline'" size="large" @click="confirmCancel"
-                   :loading="loading">确定
-          </OButton>
-          <ODivider v-if="lePadV" direction="v" />
-          <OButton color="primary" :variant="lePadV ? 'text' : 'solid'" size="large" @click="cancel">取消</OButton>
-        </div>
-      </template>
     </ODialog>
   </div>
 </template>
@@ -564,7 +622,7 @@ watch(
 }
 
 .tag-draft,
-.tag-calcel {
+.tag-cancel {
   --tag-color: var(--o-color-info3);
   --tag-bg-color: rgba(222, 222, 227, 1);
 }

package/src/components/activity/OActivityForm.vue

@@ -1,16 +1,30 @@
 <script setup lang="ts">
 
-import { OButton, OForm, OFormItem, OInput, OOption, OSelect, RulesT, useMessage } from '@opensig/opendesign';
+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;
@@ -21,6 +35,7 @@ const props = withDefaults(defineProps<ActivityFormPropsT>(), {});
 const isEdit = computed(() => !!props.data);
 const form = ref<ParamsItemT>({
   title: '',
+  organizer: '',
   start_date: '',
   end_date: '',
   register_end_date: '',
@@ -32,6 +47,7 @@ const form = ref<ParamsItemT>({
   start: '',
   end: '',
   is_publish: 'true',
+  email_list: '',
   approver: '',
 });
 
@@ -55,10 +71,11 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   activity_type: [{ required: true, message: '请选择活动类型' }],
+  organizer: [{ required: true, message: '请选择活动类型' }],
   start_date: [
     { required: true, message: '请选择活动时间' },
     {
-      validator: (value: string) => {
+      validator: () => {
         const { start_date, end_date } = form.value;
         const startDate = start_date.split(' ');
         const endDate = end_date.split(' ');
@@ -109,7 +126,7 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   address: [
-    { required: true, message: '请输入活动地址' },
+    { required: true, message: '请输入活动地点' },
     {
       validator: (value: string) => {
         if (value.length > 255) {
@@ -122,7 +139,7 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   register_url: [
-    { required: true, message: '请输入报名网址' },
+    { required: true, message: '请输入活动报名网址' },
     {
       validator: (value: string) => {
         const str = value.replaceAll(' ', '') || '';
@@ -140,7 +157,7 @@ const rules = ref<Record<string, RulesT[]>>({
     },
   ],
   content_url: [
-    { required: true, message: '请输入活动详情网址' },
+    { required: true, message: '请输入活动详情介绍网址' },
     {
       validator: (value: string) => {
         const str = value.replaceAll(' ', '') || '';
@@ -157,26 +174,69 @@ const rules = ref<Record<string, RulesT[]>>({
       triggers: ['blur', 'change'],
     },
   ],
+  synopsis: [{
+    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.admin || [];
+  return props.admins || [];
 });
 
-const typeValue = ref('');
+const typeValue = ref<string>('');
 const typeOptions = ref<TypeOptionT[]>([]); // 活动类型
 acticityTypeMap.forEach((item) => {
   typeOptions.value.push(item);
 });
-const changeType = (val: string) => {
+const changeType = (val: SelectValueT) => {
   const item = typeOptions.value.find((v) => v.label === val);
   form.value.activity_type = item?.value as number;
 };
 
-const disabledDate = (date) => {
+const disabledDate = (date: Date) => {
   return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
 };
 
@@ -198,6 +258,9 @@ watch(
         is_publish,
         approver,
         update_activity_id,
+        synopsis,
+        email_list,
+        organizer,
       } = val;
       let params = {
         title,
@@ -213,6 +276,9 @@ watch(
         is_publish,
         approver,
         update_activity_id,
+        synopsis,
+        email_list,
+        organizer,
       } as ParamsItemT;
       form.value = { ...params };
       typeValue.value = acticityTypeMap.get(val.activity_type)?.label;
@@ -254,6 +320,8 @@ const confirm = async (val: boolean) => {
     message.danger({
       content: msg,
     });
+  } finally {
+    loading.value = false;
   }
 };
 const close = () => {
@@ -280,8 +348,10 @@ defineExpose({
       <OFormItem :rules="rules.title" label="活动名称" field="title">
         <OInput size="large" placeholder="请输入活动名称" v-model="form.title" />
       </OFormItem>
-      <OFormItem :rules="rules.title" label="活动主办方" field="title">
-        <OInput size="large" placeholder="请输入活动名称" v-model="form.title" />
+      <OFormItem :rules="rules.organizer" label="活动主办方" field="organizer">
+        <OSelect placeholder="请选择活动主办方" 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="活动类型" field="activity_type">
         <OSelect placeholder="请选择活动类型" size="large" v-model="typeValue" @change="changeType">
@@ -291,10 +361,10 @@ defineExpose({
       <OFormItem
         v-if="form.activity_type === 1 || form.activity_type === 3"
         :rules="rules.address"
-        label="活动地址"
+        label="活动地点"
         field="address"
       >
-        <OInput size="large" placeholder="请输入活动地址" v-model="form.address" />
+        <OInput size="large" placeholder="请输入活动地点" v-model="form.address" />
       </OFormItem>
       <OFormItem :rules="rules.start_date" label="活动时间" field="start_date" required>
         <div class="time-config">
@@ -339,10 +409,21 @@ defineExpose({
         />
       </OFormItem>
       <OFormItem :rules="rules.register_url" label="报名网址" field="register_url">
-        <OInput size="large" placeholder="请输入报名网址" v-model="form.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" />
+        <OInput size="large" placeholder="请输入活动详情介绍网址" v-model="form.content_url" />
+      </OFormItem>
+      <OFormItem :rules="rules.synopsis" label="活动内容" field="synopsis">
+        <OTextarea size="large" placeholder="请输入活动内容" v-model="form.synopsis" />
+      </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">
@@ -407,6 +488,11 @@ defineExpose({
       width: 100%;
     }
 
+    .o-textarea {
+      --_box-radius: var(--o-radius-xs);
+      width: 100%;
+    }
+
     .el-input {
       width: 100%;
     }

package/src/components/activity/OMyActivityCalendar.vue

@@ -14,6 +14,7 @@ import {
   OIconArrowRight,
   OIconChevronLeft,
   OIconChevronRight,
+  DialogActionT,
 } from '@opensig/opendesign';
 import { ElCalendar } from 'element-plus';
 import dayjs from 'dayjs';
@@ -450,6 +451,52 @@ onUnmounted(() => {
   const scrollerContainerEl = scrollerRef.value?.getContainerEl();
   scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
 });
+
+
+const revokeActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    label: '确定',
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const deleteActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: dialogLoading.value,
+    color: 'primary',
+    variant: 'outline',
+    round: 'pill',
+    label: '确定',
+    onClick: () => {
+      confirmDelete();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: 'solid',
+    round: 'pill',
+    label: '取消',
+    onClick: () => {
+      cancelDelete();
+    },
+  }];
+});
 </script>
 
 <template>
@@ -633,30 +680,14 @@ onUnmounted(() => {
     </div>
   </div>
   <!-- 撤销审核弹窗 -->
-  <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active">
+  <ODialog v-model:visible="revokeVisible" main-class="handle-dialog-active" :actions="revokeActions">
     <template #header>撤销审核</template>
     <div class="dialog-content">是否确认要撤销“{{ currentRow.title }}”活动？撤销审核后活动将变成草稿状态。</div>
-    <template #footer>
-      <div class="dialog-footer">
-        <OButton color="primary" variant="outline" size="large" round="pill" @click="confirm" :loading="dialogLoading">
-          确定
-        </OButton>
-        <OButton color="primary" variant="solid" size="large" round="pill" @click="cancel">取消</OButton>
-      </div>
-    </template>
   </ODialog>
   <!-- 删除活动弹窗 -->
-  <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active">
+  <ODialog v-model:visible="deleteVisible" main-class="handle-dialog-active" :actions="deleteActions">
     <template #header>删除活动</template>
     <div class="dialog-content">是否确认删除“{{ currentRow.title }}”活动？删除后记录将不再我的个人中心呈现。</div>
-    <template #footer>
-      <div class="dialog-footer">
-        <OButton color="primary" variant="outline" size="large" round="pill" @click="confirmDelete"
-                 :loading="dialogLoading">确定
-        </OButton>
-        <OButton color="primary" variant="solid" size="large" round="pill" @click="cancelDelete">取消</OButton>
-      </div>
-    </template>
   </ODialog>
 </template>
 
@@ -1321,7 +1352,6 @@ onUnmounted(() => {
 <style lang="scss">
 .handle-dialog-active {
   width: 450px;
-  --dlg-radius: 16px;
 
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);
@@ -1331,12 +1361,5 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
   }
-
-  .dialog-footer {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--o-gap-4);
-    column-gap: var(--o-gap-4);
-  }
 }
 </style>

package/src/components/activity/config.ts

@@ -84,8 +84,8 @@ export const statusMap = new Map([
     7,
     {
       id: 'reject',
-      label: '审核驳回',
-      text: '审核驳回',
+      label: '已驳回',
+      text: '已驳回',
       value: 7,
     },
   ],

package/src/components/activity/types.ts

@@ -15,6 +15,8 @@ export interface ParamsItemT {
   schedules?: string;
   is_publish: string; // 是否发布 true-发布审核 false-发布为草稿
   update_activity_id?: string;
+  email_list?: string; // 邮件列表
+  organizer?: string; // 主办方
   approver: string; // 审批人
 }
 
@@ -23,6 +25,10 @@ export interface ActivityFormPropsT {
   creatActivity: any;
   editActivity: any;
   admins: string[];
+  organizers: {
+    id: number;
+    name: string;
+  }[];
   status?: string | null;
 }
 

package/src/components/common/MoreText.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { OIcon, OIconChevronDown, OIconChevronUp } from '@opensig/opendesign';
 import { nextTick, onMounted, ref, watch } from 'vue';
+import { useI18n } from '@/i18n';
 
 const props = withDefaults(
   defineProps<{
@@ -16,6 +17,9 @@ const props = withDefaults(
     show: false,
   },
 );
+
+const { t } = useI18n();
+
 const expanded = ref(false); // 是否展开
 const showBtn = ref(false); // 受否显示展开按钮
 const offsetHeight = ref(0); // 内容高度