@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.100

package/src/components/activity/OActivityApproval.vue

@@ -1,871 +0,0 @@
-<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, TypeOptionT } from './types';
-import { getApprovalStatusMap, getStatusMap } from './config';
-import ThFilter from '../common/ThFilter.vue';
-import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
-import { useI18n } from '@/i18n';
-
-const { t, locale } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
-const approvalStatusMap = getApprovalStatusMap();
-const statusMap = getStatusMap();
-
-
-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('');
-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<TypeOptionT[]>(() => {
-  let list: TypeOptionT[] | { label: string; value: string; }[] = [];
-  approvalStatusMap.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([]);
-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) => {
-      const { start_date, end_date, start, end } = item;
-      return [
-        {
-          ...item,
-          time: `${ start_date }-${ end }`,
-          start_date_time: `${ start_date } ${ start }`,
-          end_date_time: `${ end_date } ${ end }`,
-          type: 'activity',
-          dateRange: `${ start_date } ${ start }-${ end_date } ${ end }`,
-        },
-      ];
-    })
-    .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;
-  }
-  const msg = reviewStatus.value === 1 ? t('meeting.approveReview') : t('meeting.rejectReview');
-  try {
-    loading.value = true;
-    const valid = await formRef.value?.validate();
-    if (valid.some((v) => !!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]),
-    });
-  } catch {
-    reviewVisible.value = false;
-    loading.value = false;
-    message.danger({
-      content: t('meeting.reviewFail', [currentRow.value?.title]),
-    });
-  }
-};
-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]),
-      });
-    } catch (err) {
-      loading.value = false;
-      cancelVisible.value = false;
-      message.danger({
-        content: t('meeting.activityActionFail', [currentRow.value?.title, cancelText.value]),
-      });
-    }
-  }
-};
-
-// -------------------- 审核操作 --------------------
-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([]);
-const expandedRows = ref([]);
-
-const getActivityDetail = (val: number) => {
-  if (!props.getActivityDetailRequest) {
-    return;
-  }
-  if (!expandList.value.includes(val)) {
-    expandList.value.push(val);
-    props.getActivityDetailRequest(val).then((res) => {
-      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) => {
-  getActivityDetail(val.id);
-};
-
-const getRowKey = (row) => {
-  return row.id;
-};
-
-// -------------------- 移动端 ---------------------
-const expanded = ref([]); // 展开的数据，id
-const change = (val: number[]) => {
-  if (val.length) {
-    val.forEach((item: number) => {
-      getActivityDetail(item);
-    });
-  }
-};
-
-const detailRefs = ref({});
-const getDetailRefs = (insRef, id) => {
-  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="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, idx) 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"
-                :ref="(insRef) => getDetailRefs(insRef, act.id)"
-                page="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 {
-    margin-top: 32px;
-    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>