@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.21

package/src/components/activity/OActivityApproval.vue

@@ -0,0 +1,864 @@
+<script setup lang="ts">
+import { ElTable, ElTableColumn, dayjs } from 'element-plus';
+import {
+  DialogActionT,
+  OCollapse,
+  OCollapseItem,
+  ODialog,
+  OForm,
+  OFormItem, OLink,
+  OPagination,
+  OTag,
+  OTextarea,
+  useMessage,
+} from '@opensig/opendesign';
+import { useScreen } from '@opendesign-plus/composables';
+import { onMounted, watch, ref, reactive, computed } from 'vue';
+import { ActivityItemT, ActivityTablePropsT, ReviewParamsT } from './types';
+import { useActivityConfig } from './composables/useActivityConfig';
+import ThFilter from '../common/ThFilter.vue';
+import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
+import { useI18n } from '@/i18n';
+import { CalendarDataType, MeetingItemT } from '@/components/meeting';
+
+const { t, locale } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
+const { approvalStatusMap, statusMap, activityTypeMap } = useActivityConfig();
+
+const message = useMessage(null);
+const { isPhone, lePadV } = useScreen();
+const props = defineProps<ActivityTablePropsT>();
+const params = reactive<ReviewParamsT>({
+  page: 1,
+  size: 10,
+  status: '',
+  is_delete: 0,
+  search: '',
+  sponsor: '',
+  order_by: '',
+});
+
+// -------------------- 申请人 --------------------
+const applicantValue = ref<string[]>([]);
+const applicantOptions = computed(() => props.applicantList.map(v => ({ value: v, label: v })));
+
+const filterApplicantList = () => {
+  params.sponsor = applicantValue.value.join(',');
+};
+
+// -------------------- 时间排序 --------------------
+const order_by = ref('desc');
+const sortTime = () => {
+  order_by.value = order_by.value === 'asc' ? 'desc' : 'asc';
+  params.order_by = order_by.value;
+};
+
+// -------------------- 状态 --------------------
+const statusValue = ref();
+const statusOptions = computed(() => {
+  const list: { label: string; value: string | number }[] = [];
+  approvalStatusMap.value.forEach((item) => {
+    list.push(item);
+  });
+  return list.slice(1);
+});
+const filterStatusList = () => {
+  params.status = statusValue.value;
+  if (statusValue.value === 'cancel') {
+    params.is_delete = 1;
+  } else {
+    params.is_delete = 0;
+  }
+};
+
+const tableData = ref<ActivityItemT[]>([]);
+const total = ref(0);
+
+const COUNT_PER_PAGE = [10, 20, 30, 40];
+
+const getData = async () => {
+  const { page, size, status, sponsor, order_by, search, is_delete } = params;
+  let paramsData = { page, size, sponsor, order_by, search } as ReviewParamsT;
+  if (status !== 'all' && status !== '') {
+    paramsData.is_delete = is_delete;
+  }
+  if (status === 'cancel') {
+    paramsData.status = '';
+  } else {
+    paramsData.status = status;
+  }
+  if (!props.getTableDataRequest) {
+    return;
+  }
+  const res = await props.getTableDataRequest(paramsData);
+  tableData.value = (res.data || [])
+    .map((item: ActivityItemT) => {
+      const { start_date, end_date, start, end, activity_type } = item;
+      return [
+        {
+          ...item,
+          time: `${ start_date }-${ end }`,
+          start_date_time: `${ start_date } ${ start }`,
+          end_date_time: `${ end_date } ${ end }`,
+          type: CalendarDataType.EVENTS,
+          dateRange: `${ start_date } ${ start }-${ end_date } ${ end }`,
+          activity_type: activityTypeMap.value.get(activity_type)?.label,
+        },
+      ];
+    })
+    .flat();
+  total.value = res.total;
+};
+
+const onPaginationChange = (val: { page: number; pageSize: number }) => {
+  if (val.pageSize !== params.size) {
+    params.page = 1;
+  } else {
+    params.page = val.page;
+  }
+  params.size = val.pageSize;
+  getData();
+};
+
+// -------------------- 活动审核弹窗 --------------------
+const form = ref({
+  reason: '',
+});
+const formRef = ref(); // 表单实例
+const loading = ref(false); // 提交状态
+const currentRow = ref<ActivityItemT | null>(null); // 当前活动详情
+const digTitle = ref('');
+const reviewStatus = ref(0);
+const reviewVisible = ref(false);
+
+// 表单校验规则
+const rules = ref({
+  reason: [{ required: true, message: t('meeting.enterReviewNotes') }],
+});
+
+const confirm = async () => {
+  if (!props.approveActivityRequest || !props.rejectActivityRequest) {
+    return;
+  }
+  try {
+    loading.value = true;
+    const valid = await formRef.value?.validate();
+    if (!valid || valid.some((v: any) => !!v)) {
+      loading.value = false;
+      return;
+    }
+    if (reviewStatus.value === 1) {
+      await props.approveActivityRequest(currentRow.value?.id, form.value);
+    } else {
+      await props.rejectActivityRequest(currentRow.value?.id, form.value);
+    }
+    getData();
+    cancel();
+    message.success({
+      content: t('meeting.reviewSuccess', [currentRow.value?.title]),
+    });
+  } finally {
+    reviewVisible.value = false;
+    loading.value = false;
+  }
+};
+const cancel = () => {
+  reviewVisible.value = false;
+  cancelVisible.value = false;
+  loading.value = false;
+  form.value.reason = '';
+};
+
+const confirmCancel = async () => {
+  if (props.deleteActivityRequest && props.cancelActivityRequest) {
+    try {
+      loading.value = true;
+      if (cancelStatus.value === 1) {
+        await props.cancelActivityRequest(currentRow.value!.id, form.value);
+      } else {
+        await props.deleteActivityRequest(currentRow.value!.id, form.value);
+      }
+      getData();
+      cancel();
+      message.success({
+        content: t('meeting.activityActionSuccess', [currentRow.value?.title, cancelText.value]),
+      });
+    } finally {
+      loading.value = false;
+      cancelVisible.value = false;
+    }
+  }
+};
+
+// -------------------- 审核操作 --------------------
+const cancelVisible = ref(false);
+const cancelTitle = ref('');
+const cancelText = ref('');
+const cancelStatus = ref(0);
+
+const deleteItem = (row: ActivityItemT) => {
+  cancelTitle.value = t('meeting.deleteActivity');
+  cancelText.value = t('meeting.deleteActivity').toLowerCase();
+  currentRow.value = row;
+  cancelStatus.value = 0;
+  cancelVisible.value = true;
+};
+const cancelItem = (row: ActivityItemT) => {
+  cancelTitle.value = t('meeting.cancelActivity');
+  cancelText.value = t('common.cancel').toLowerCase();
+  currentRow.value = row;
+  cancelStatus.value = 1;
+  cancelVisible.value = true;
+};
+const passItem = (row: ActivityItemT) => {
+  currentRow.value = row;
+  digTitle.value = t('meeting.approveReview');
+  reviewStatus.value = 1;
+  reviewVisible.value = true;
+};
+const rejectItem = (row: ActivityItemT) => {
+  currentRow.value = row;
+  digTitle.value = t('meeting.rejectReview');
+  reviewStatus.value = 0;
+  reviewVisible.value = true;
+};
+
+const expandList = ref<string[]>([]);
+const expandedRows = ref<string[]>([]);
+
+const getActivityDetail = (id: number) => {
+  const val = id.toString();
+  if (!props.getActivityDetailRequest) {
+    return;
+  }
+  if (!expandList.value.includes(val)) {
+    expandList.value.push(val);
+    props.getActivityDetailRequest(val).then((res: ActivityItemT) => {
+      tableData.value?.forEach((item) => {
+        if (item.id === res.id) {
+          item.approve_record = res.approve_record;
+          item.approver = res.approver;
+        }
+      });
+    });
+  }
+  const index = expandedRows.value.indexOf(val);
+  if (!expandedRows.value.includes(val)) {
+    expandedRows.value.push(val);
+  } else {
+    expandedRows.value.splice(index, 1); // 收起
+  }
+};
+
+const expandChange = (val: ActivityItemT) => {
+  getActivityDetail(val.id);
+};
+
+const getRowKey = (row: ActivityItemT): string => {
+  return row.id.toString();
+};
+
+// -------------------- 移动端 ---------------------
+const expanded = ref<(string | number)[]>([]); // 展开的数据，id
+const change = (val: (string | number)[]) => {
+  if (val.length) {
+    val.forEach((item) => {
+      getActivityDetail(item as number);
+    });
+  }
+};
+
+const detailRefs = ref<Record<number, any>>({});
+const getDetailRefs = (insRef: any, id: number) => {
+  if (insRef && id) {
+    detailRefs.value[id] = insRef;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+
+// -------------------- 监听查询参数变化，更新数据 ---------------------
+watch(
+  () => [params.status, params.sponsor, params.order_by, params.search, params.is_delete],
+  () => {
+    getData();
+  },
+  { deep: true },
+);
+
+const cancelActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.confirmBtn'),
+    onClick: () => {
+      confirmCancel();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.cancelBtn'),
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+const reviewActions = computed<DialogActionT[]>(() => {
+  return [{
+    id: 'confirm',
+    loading: loading.value,
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'solid',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.confirmBtn'),
+    onClick: () => {
+      confirm();
+    },
+  }, {
+    id: 'cancel',
+    color: 'primary',
+    variant: lePadV.value ? 'text' : 'outline',
+    round: 'pill',
+    size: 'large',
+    label: t('meeting.cancelBtn'),
+    onClick: () => {
+      cancel();
+    },
+  }];
+});
+</script>
+
+<template>
+  <div class="o-activity-table">
+    <div class="table-wrapper" v-if="!isPhone">
+      <ElTable :data="tableData" @expand-change="expandChange" :row-key="getRowKey" :expand-row-keys="expandedRows">
+        <ElTableColumn type="expand">
+          <template #default="props">
+            <div class="expand-detail">
+              <OMeetingDetail :data="props.row" :page="CalendarDataType.APPROVAL" show />
+            </div>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="t('meeting.activityName')" prop="title" />
+        <ElTableColumn prop="sponsor">
+          <template #header>
+            <ThFilter
+              v-model="applicantValue"
+              @confirm="filterApplicantList"
+              :list="applicantOptions"
+              :multiple="true"
+            >
+
+              <template #empty>
+                <slot name="filter-empty"></slot>
+              </template>
+              {{ t('meeting.applicant') }}
+            </ThFilter>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="create_time">
+          <template #header>
+            <div class="sort-time" @click="sortTime">
+              <span>{{ t('meeting.submissionTime') }}</span>
+              <div class="sort-btn">
+                <div class="sort-asc sort-item" :class="{ active: order_by === 'asc' }"></div>
+                <div class="sort-desc sort-item" :class="{ active: order_by === 'desc' }"></div>
+              </div>
+            </div>
+          </template>
+          <template #default="scope">
+            {{ dayjs(scope.row.create_time).format('YYYY/MM/DD HH:mm:ss') }}
+          </template>
+        </ElTableColumn>
+        <ElTableColumn prop="status" width="90px">
+          <template #header>
+            <ThFilter
+              v-model="statusValue"
+              @confirm="filterStatusList"
+              :list="statusOptions"
+            >
+              <template #empty>
+                <slot name="filter-empty"></slot>
+              </template>
+              {{ t('meeting.status') }}
+            </ThFilter>
+          </template>
+          <template #default="scope">
+            <OTag
+              v-if="scope.row.is_delete !== 1"
+              color="primary"
+              variant="outline"
+              :class="[`tag-${statusMap.get(scope.row.status)?.id}`]"
+            >
+              {{
+                statusMap.get(scope.row.status)?.text
+              }}
+            </OTag>
+            <OTag v-else color="primary" variant="outline" class="tag-cancel">{{ t('meeting.statusCanceled') }}</OTag>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="t('meeting.action')">
+          <template #default="scope">
+            <div class="activity-btn">
+              <OLink
+                v-if="scope.row.status === 7 || scope.row.is_delete"
+                color="danger"
+                @click="deleteItem(scope.row)">
+                {{ t('meeting.deleteActivity') }}
+              </OLink>
+              <OLink
+                v-if="(scope.row.status === 3 || scope.row.status === 4) && scope.row.is_delete !== 1"
+                color="danger"
+                @click="cancelItem(scope.row)"
+              >
+                {{ t('meeting.cancelActivity') }}
+              </OLink>
+              <OLink v-if="scope.row.status === 2" color="primary" @click="passItem(scope.row)">
+                {{ t('meeting.approve') }}
+              </OLink>
+              <OLink v-if="scope.row.status === 2" color="primary" @click="rejectItem(scope.row)">
+                {{ t('meeting.reject') }}
+              </OLink>
+            </div>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+      <div v-if="total > COUNT_PER_PAGE[0]" class="pagination-wrapper">
+        <OPagination
+          :total="total"
+          :page="params.page"
+          :page-size="params.size"
+          :page-sizes="COUNT_PER_PAGE"
+          :layout="['total', 'jumper', 'pager', 'pagesize']"
+          :show-more="false"
+          @change="onPaginationChange"
+        />
+      </div>
+    </div>
+    <div v-else class="collapse-wrapper">
+      <OCollapse v-model="expanded" :accordion="isPhone" @change="change">
+        <template v-for="(act) in tableData" :key="act.id">
+          <div class="title-top">
+            <p class="act-title">{{ act.title }}</p>
+            <OTag v-if="act.is_delete !== 1" color="primary" variant="outline"
+                  :class="[`tag-${statusMap.get(act.status)?.id}`]">
+              {{
+                statusMap.get(act.status)?.text
+              }}
+            </OTag>
+            <OTag v-else color="primary" variant="outline" class="tag-cancel">{{ t('meeting.statusCanceled') }}</OTag>
+          </div>
+          <OCollapseItem :value="act.id">
+            <template #title>
+              <div class="act-sponsor">
+                <p class="sponsor">{{ act.sponsor }}</p>
+                <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)"
+                >
+                  {{ t('meeting.deleteActivity') }}
+                </OLink>
+                <OLink
+                  v-if="(act.status === 3 || act.status === 4) && act.is_delete !== 1"
+                  color="danger"
+                  variant="text"
+                  @click.stop="cancelItem(act)"
+                >
+                  {{ t('meeting.cancelActivity') }}
+                </OLink>
+                <OLink
+                  v-if="act.status === 2"
+                  color="primary"
+                  variant="text"
+                  @click.stop="passItem(act)"
+                >
+                  {{ t('meeting.approve') }}
+                </OLink>
+                <OLink
+                  v-if="act.status === 2"
+                  color="primary"
+                  variant="text"
+                  @click.stop="rejectItem(act)"
+                >
+                  {{ t('meeting.reject') }}
+                </OLink>
+              </div>
+            </template>
+            <div class="activity-detail">
+              <OMeetingDetail
+                :show="expanded.includes(act.id)"
+                :data="act as unknown as MeetingItemT"
+                :ref="(insRef) => getDetailRefs(insRef, act.id)"
+                :page="CalendarDataType.APPROVAL"
+              />
+            </div>
+          </OCollapseItem>
+        </template>
+      </OCollapse>
+      <!-- 分页 -->
+      <div v-if="total > COUNT_PER_PAGE[0]" class="pagination">
+        <OPagination
+          :total="total"
+          :page="params.page"
+          :page-size="params.size"
+          :page-sizes="COUNT_PER_PAGE"
+          :layout="['total', 'jumper', 'pager', 'pagesize']"
+          :show-more="false"
+          :simple="true"
+          @change="onPaginationChange"
+        />
+      </div>
+    </div>
+    <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">
+          <OFormItem
+            :rules="rules.reason"
+            :label="`${t('meeting.reviewNotesLabel')}${isZh ? '：' : ': '}`"
+            field="reason"
+          >
+            <OTextarea
+              size="large"
+              :placeholder="t('meeting.enterReviewNotes')"
+              :rows="4"
+              resize="none"
+              :max-length="1000"
+              :input-on-outlimit="false"
+              v-model="form.reason"
+            />
+          </OFormItem>
+        </OForm>
+      </div>
+    </ODialog>
+    <!-- 取消活动弹窗 -->
+    <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">
+        {{ cancelStatus === 1 ? t('meeting.confirmCancelActivity', [currentRow?.title]) : t('meeting.confirmDeleteActivity', [currentRow?.title])
+        }}
+      </div>
+    </ODialog>
+  </div>
+</template>
+
+<style lang="scss">
+.o-activity-table {
+  .table-wrapper {
+    .el-table {
+      border-top: none;
+    }
+
+    .el-table__header {
+      margin-bottom: 0;
+    }
+  }
+
+  .expand-detail {
+    padding: 16px 60px;
+    background-color: var(--o-color-fill3);
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .o-btn-text {
+    @include hover {
+      background-color: transparent;
+      color: var(--o-color-primary1);
+    }
+  }
+
+  .o-btn.o-btn-text {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    min-width: auto;
+  }
+
+  .o-tag {
+    --tag-radius: 100px;
+    font-weight: 500;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px !important;
+    @include tip1;
+
+    .o-tag-label {
+      transform: none !important;
+    }
+
+    &.o-tag-outline {
+      --tag-bd-color: transparent;
+      --tag-color: #fff;
+    }
+
+    &.tag-under-review {
+      --tag-bg-color: rgb(var(--o-blue-6));
+    }
+
+    &.tag-draft,
+    &.tag-cancel {
+      --tag-color: var(--o-color-info3);
+      --tag-bg-color: var(--o-color-control1-light);
+    }
+
+    &.tag-registration,
+    &.tag-in-progress,
+    &.tag-ended {
+      --tag-bg-color: var(--o-color-success1);
+    }
+
+    &.tag-reject {
+      --tag-bg-color: var(--o-color-warning1);
+    }
+  }
+
+
+
+  .sort-time {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .sort-btn {
+    margin-left: 4px;
+  }
+
+  .sort-item {
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+  }
+
+  .sort-asc {
+    border-bottom-color: var(--o-color-info2);
+    margin-bottom: 2px;
+
+    &.active {
+      border-bottom-color: var(--o-color-primary1);
+    }
+  }
+
+  .sort-desc {
+    border-top-color: var(--o-color-info2);
+    margin-top: 2px;
+
+    &.active {
+      border-top-color: var(--o-color-primary1);
+    }
+  }
+
+  .el-table {
+    --el-table-header-bg-color: rgba(235, 241, 250, 1);
+    color: var(--o-color-info1);
+    @include text1;
+
+    .el-table__header-wrapper {
+      border-radius: 12px 12px 0 0;
+
+      .el-table__cell {
+        padding: 12px 0 11px;
+      }
+
+      .cell {
+        color: var(--o-color-info2);
+        font-weight: 600;
+        @include text1;
+      }
+    }
+
+    .el-table__expanded-cell {
+      padding: 0;
+    }
+
+    .cell {
+      white-space: nowrap;
+    }
+  }
+
+  .pagination, .pagination-wrapper {
+    margin-top: var(--o-gap-6);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .o-textarea {
+    --_box-radius: 16px;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .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;
+      }
+    }
+  }
+
+  .collapse-wrapper {
+    .o-tag {
+      height: 24px;
+    }
+
+    .o-collapse {
+      padding: 0;
+      border-radius: 12px;
+
+      .o-collapse-item {
+        --collapse-item-header-padding: 8px 0 12px;
+
+        &:last-child {
+          padding-bottom: 16px;
+        }
+      }
+
+      .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);
+      }
+
+      .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;
+      }
+    }
+
+    .activity-detail {
+      padding: 12px 16px;
+      background-color: rgba(243, 246, 250, 1);
+    }
+
+    .pagination {
+      justify-content: center;
+      margin-top: 24px;
+    }
+  }
+
+  .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">
+.handle-dialog-approval {
+  --dlg-width: 450px;
+  --dlg-radius: var(--o-radius-xs);
+  @include respond-to('<=pad_v') {
+    width: 100%;
+    --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 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>