@opendesign-plus-test/components 0.0.1-rc.24 → 0.0.1-rc.26

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,55 @@ watch(
   },
   { deep: true },
 );
+
+const cancelActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    size: 'large',
+    label: '确定',
+    onClick: () => {
+      confirmCancel();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    size: 'large',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const reviewActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    size: 'large',
+    label: '确定',
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    size: 'large',
+    label: '取消',
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
 </script>
 
 <template>
@@ -289,7 +340,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 +395,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 +447,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 +456,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 +515,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">
@@ -453,7 +528,6 @@ watch(
             <OTextarea
               size="large"
               placeholder="请输入审核的备注信息"
-              style="width: 100%"
               :rows="4"
               resize="none"
               :max-length="1000"
@@ -463,313 +537,289 @@ 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 cancel-dialog"
+      :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>
 
-<style lang="scss" scoped>
-.my-approval {
-  height: 100%;
-}
-
-.title {
-  color: var(--o-color-info1);
-  font-weight: 500;
-  @include h2;
-}
-
-.desc {
-  color: var(--o-color-info2);
-  margin-top: 12px;
-  @include tip1;
-}
-
-.o-divider {
-  --o-divider-gap: 24px;
-}
+<style lang="scss">
+.o-activity-table {
 
-.expand-detail {
-  padding: 16px 60px;
-  background-color: rgba(243, 246, 250, 1);
-}
+  .expand-detail {
+    padding: 16px 60px;
+    background-color: rgba(243, 246, 250, 1);
+  }
 
-.o-form {
-  &.o-form-layout-v {
-    .o-form-item-label {
-      margin-bottom: var(--o-gap-2);
+  .activity-btn {
+    .o-btn + .o-btn {
+      margin-left: 24px;
     }
-  }
-}
 
-.activity-btn {
-  .o-btn + .o-btn {
-    margin-left: 24px;
+    @include respond-to('<=pad_v') {
+      .o-btn + .o-btn {
+        margin-left: 16px;
+      }
+    }
+    @include respond-to('phone') {
+      margin-top: 8px;
+      .o-btn + .o-btn {
+        margin-left: 12px;
+      }
+    }
   }
 
-  @include respond-to('<=pad_v') {
-    .o-btn + .o-btn {
-      margin-left: 16px;
+  .o-btn-text {
+    @include hover {
+      background-color: transparent;
+      color: var(--o-color-primary1);
     }
   }
-  @include respond-to('phone') {
-    margin-top: 8px;
-    .o-btn + .o-btn {
-      margin-left: 12px;
-    }
+
+  .o-btn.o-btn-text {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    min-width: auto;
   }
-}
 
-.o-btn-text {
-  @include hover {
-    background-color: transparent;
-    color: var(--o-color-primary1);
+  .o-tag {
+    --tag-radius: 100px;
+    --tag-bg-color: rgba(0, 113, 243, 0.1);
+    --tag-bd-color: transparent;
   }
-}
 
-.o-btn.o-btn-text {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  min-width: auto;
-}
+  .tag-draft,
+  .tag-cancel {
+    --tag-color: var(--o-color-info3);
+    --tag-bg-color: rgba(222, 222, 227, 1);
+  }
 
-.o-tag {
-  --tag-radius: 100px;
-  --tag-bg-color: rgba(0, 113, 243, 0.1);
-  --tag-bd-color: transparent;
-}
+  .tag-registration,
+  .tag-in-progress,
+  .tag-ended {
+    --tag-color: rgba(36, 171, 54, 1);
+    --tag-bg-color: rgba(36, 171, 54, 0.1);
+  }
 
-.tag-draft,
-.tag-calcel {
-  --tag-color: var(--o-color-info3);
-  --tag-bg-color: rgba(222, 222, 227, 1);
-}
+  .tag-reject {
+    --tag-color: rgba(294, 118, 17, 1);
+    --tag-bg-color: rgba(294, 118, 17, 0.1);
+  }
 
-.tag-registration,
-.tag-in-progress,
-.tag-ended {
-  --tag-color: rgba(36, 171, 54, 1);
-  --tag-bg-color: rgba(36, 171, 54, 0.1);
-}
+  .sort-time {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
 
-.tag-reject {
-  --tag-color: rgba(294, 118, 17, 1);
-  --tag-bg-color: rgba(294, 118, 17, 0.1);
-}
+  .sort-btn {
+    margin-left: 4px;
+  }
 
-.sort-time {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
+  .sort-item {
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+  }
 
-.sort-btn {
-  margin-left: 4px;
-}
+  .sort-asc {
+    border-bottom-color: var(--o-color-info2);
+    margin-bottom: 2px;
 
-.sort-item {
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-}
+    &.active {
+      border-bottom-color: var(--o-color-primary1);
+    }
+  }
 
-.sort-asc {
-  border-bottom-color: var(--o-color-info2);
-  margin-bottom: 2px;
+  .sort-desc {
+    border-top-color: var(--o-color-info2);
+    margin-top: 2px;
 
-  &.active {
-    border-bottom-color: var(--o-color-primary1);
+    &.active {
+      border-top-color: var(--o-color-primary1);
+    }
   }
-}
 
-.sort-desc {
-  border-top-color: var(--o-color-info2);
-  margin-top: 2px;
+  .el-table {
+    --el-table-header-bg-color: rgba(235, 241, 250, 1);
+    color: var(--o-color-info1);
+    @include text1;
 
-  &.active {
-    border-top-color: var(--o-color-primary1);
-  }
-}
+    .el-table__header-wrapper {
+      border-radius: 12px 12px 0 0;
 
-.el-table {
-  --el-table-header-bg-color: rgba(235, 241, 250, 1);
-  color: var(--o-color-info1);
-  @include text1;
+      .el-table__cell {
+        padding: 12px 0 11px;
+      }
 
-  .el-table__header-wrapper {
-    border-radius: 12px 12px 0 0;
+      .cell {
+        color: var(--o-color-info2);
+        font-weight: 600;
+        @include text1;
+      }
+    }
 
-    .el-table__cell {
-      padding: 12px 0 11px;
+    .el-table__expanded-cell {
+      padding: 0;
     }
 
     .cell {
-      color: var(--o-color-info2);
-      font-weight: 600;
-      @include text1;
+      white-space: nowrap;
     }
   }
 
-  .el-table__expanded-cell {
-    padding: 0;
-  }
-
-  .cell {
-    white-space: nowrap;
+  .pagination {
+    margin-top: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
-}
 
-.pagination {
-  margin-top: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.review-dialog {
-  .review-content {
-    width: 100%;
+  .o-textarea {
+    --_box-radius: 16px;
   }
-}
 
-.o-textarea {
-  --_box-radius: 16px;
-}
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-.dialog-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    .o-btn + .o-btn {
+      margin-left: 16px;
+    }
 
-  .o-btn + .o-btn {
-    margin-left: 16px;
+    @include respond-to('<=pad_v') {
+      .o-btn {
+        width: 140px;
+        color: var(--o-color-info1);
+        padding: 6px 24px !important;
+      }
+      .o-btn + .o-btn {
+        margin-left: 0;
+      }
+    }
   }
 
-  @include respond-to('<=pad_v') {
-    .o-btn {
-      width: 140px;
-      color: var(--o-color-info1);
-      padding: 6px 24px !important;
-    }
-    .o-btn + .o-btn {
-      margin-left: 0;
+  .collapse-wrapper {
+    .o-tag {
+      height: 24px;
     }
-  }
-}
 
-.collapse-wrapper {
-  .o-tag {
-    height: 24px;
-  }
+    .o-collapse {
+      padding: 0;
+      border-radius: 12px;
 
-  .o-collapse {
-    padding: 0;
-    border-radius: 12px;
+      .o-collapse-item {
+        --collapse-item-header-padding: 8px 0 12px;
 
-    .o-collapse-item {
-      --collapse-item-header-padding: 8px 0 12px;
+        &:last-child {
+          padding-bottom: 16px;
+        }
+      }
 
-      &:last-child {
-        padding-bottom: 16px;
+      .act-sponsor {
+        display: flex;
+        align-items: center;
+        color: var(--o-color-info3);
+        margin-right: 16px;
+        @include text1;
       }
-    }
 
-    .act-sponsor {
-      display: flex;
-      align-items: center;
-      color: var(--o-color-info3);
-      margin-right: 16px;
-      @include text1;
-    }
+      .sponsor {
+        margin-right: 12px;
+        @include text-truncate(1);
+      }
 
-    .sponsor {
-      margin-right: 12px;
-      @include text-truncate(1);
-    }
+      .o-collapse-item-icon {
+        transform: rotate(0deg);
+        width: 24px;
+        height: 24px;
+      }
 
-    .o-collapse-item-icon {
-      transform: rotate(0deg);
-      width: 24px;
-      height: 24px;
+      .o-collapse-item-expanded .o-collapse-item-icon {
+        transform: rotate(90deg);
+      }
+
+      .o-collapse-item-header {
+        border-bottom: 1px solid var(--o-color-control4);
+        margin: 0 16px;
+      }
     }
 
-    .o-collapse-item-expanded .o-collapse-item-icon {
-      transform: rotate(90deg);
+    .activity-detail {
+      padding: 12px 16px;
+      background-color: rgba(243, 246, 250, 1);
     }
 
-    .o-collapse-item-header {
-      border-bottom: 1px solid var(--o-color-control4);
-      margin: 0 16px;
+    .pagination {
+      justify-content: center;
+      margin-top: 24px;
     }
   }
 
-  .activity-detail {
-    padding: 12px 16px;
-    background-color: rgba(243, 246, 250, 1);
-  }
+  .title-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px 0;
 
-  .pagination {
-    justify-content: center;
-    margin-top: 24px;
+    .act-title {
+      color: var(--o-color-info1);
+      margin-right: 12px;
+      font-weight: 600;
+      @include text1;
+      @include text-truncate(1);
+    }
   }
 }
 
-.title-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px 0;
-
-  .act-title {
-    color: var(--o-color-info1);
-    margin-right: 12px;
-    font-weight: 600;
-    @include text1;
-    @include text-truncate(1);
-  }
-}
 </style>
 
 <style lang="scss">
-.review-dialog {
-  width: 690px;
-  --dlg-radius: 16px;
+.handle-dialog-approval {
+  --dlg-width: 450px;
+  --dlg-radius: var(--o-radius-xs);
   @include respond-to('<=pad_v') {
     width: 100%;
-    --dlg-radius: 16px 16px 0 0;
+    --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
   }
 }
 
-.handle-dialog-approval {
-  width: 450px;
-  --dlg-radius: 16px;
-  @include respond-to('<=pad_v') {
-    width: 100%;
-    --dlg-radius: 16px 16px 0 0;
+.cancel-dialog {
+  .o-dlg-footer {
+    margin-top: var(--o-gap-5);
   }
 }
+.review-dialog {
+  --dlg-width: 690px;
+
+  .o-form {
+    width: 450px;
+    margin: 0 auto;
+
+    .o-form-item-label {
+      margin-bottom: var(--o-gap-2);
+    }
+
+    .o-textarea {
+      width: 100%;
+      --_box-radius: var(--o-radius-xs);
+    }
+  }
+
+  .o-dlg-footer {
+    margin-top: var(--o-gap-6);
+  }
+}
+
 </style>