@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.220

package/src/components/activity/OActivityApproval.vue

@@ -1,775 +0,0 @@
-<script setup lang="ts">
-import { ElTable, ElTableColumn, dayjs } from 'element-plus';
-import {
-  OButton,
-  OCollapse,
-  ODialog,
-  ODivider,
-  OForm,
-  OFormItem, OLink,
-  OPagination,
-  OTag,
-  OTextarea,
-  useMessage,
-} from '@opensig/opendesign';
-import { useScreen } from '@opendesign-plus/composables';
-import { onMounted, watch, ref, reactive } from 'vue';
-import { ActivityItemT, ActivityTablePropsT, ReviewParamsT, TypeOptionT } from './types';
-import { approvalStatusMap, statusMap } from './config';
-import ThFilter from '../common/ThFilter.vue';
-
-
-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 applicantList = ref<string[]>([]);
-
-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 = ref<TypeOptionT[]>([]);
-approvalStatusMap.forEach((item) => {
-  statusOptions.value.push(item);
-});
-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 === 'cancel') {
-    paramsData.is_delete = is_delete;
-    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: '请输入审核的备注信息' }],
-});
-
-const confirm = async () => {
-  if (!props.approveActivityRequest || !props.rejectActivityRequest) {
-    return;
-  }
-  const msg = reviewStatus.value === 1 ? '审核通过' : '审核驳回';
-  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: `“${ currentRow.value?.title }”活动${ msg }成功`,
-    });
-  } catch {
-    reviewVisible.value = false;
-    loading.value = false;
-    message.danger({
-      content: `“${ currentRow.value?.title }”活动${ msg }失败`,
-    });
-  }
-};
-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: `“${ currentRow.value?.title }”活动${ cancelText.value }成功`,
-      });
-    } catch {
-      loading.value = false;
-      cancelVisible.value = false;
-      message.danger({
-        content: `“${ 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 = '删除活动';
-  cancelText.value = '删除';
-  currentRow.value = row;
-  cancelStatus.value = 0;
-  cancelVisible.value = true;
-};
-const cancelItem = (row: ActivityItemT) => {
-  cancelTitle.value = '取消活动';
-  cancelText.value = '取消';
-  currentRow.value = row;
-  cancelStatus.value = 1;
-  cancelVisible.value = true;
-};
-const passItem = (row: ActivityItemT) => {
-  currentRow.value = row;
-  digTitle.value = '审核通过';
-  reviewStatus.value = 1;
-  reviewVisible.value = true;
-};
-const rejectItem = (row: ActivityItemT) => {
-  currentRow.value = row;
-  digTitle.value = '审核驳回';
-  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 },
-);
-</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">
-              <MeetingDetail :data="props.row" page="approval" />
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="活动名称" prop="title" />
-        <ElTableColumn prop="sponsor">
-          <template #header>
-            <ThFilter
-              v-model="applicantValue"
-              @confirm="filterApplicantList"
-              :list="applicantList"
-              :multiple="true"
-            >
-
-              <template #empty>
-                <slot name="filter-empty"></slot>
-              </template>
-              申请人
-            </ThFilter>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="create_time">
-          <template #header>
-            <div class="sort-time" @click="sortTime">
-              <span>申请时间</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>
-              状态
-            </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-calcel">已取消</OTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="操作">
-          <template #default="scope">
-            <div class="activity-btn">
-              <OLink
-                v-if="scope.row.status === 7 || scope.row.is_delete"
-                color="danger"
-                @click="deleteItem(scope.row)">
-                删除
-              </OLink>
-              <OLink
-                v-if="(scope.row.status === 3 || scope.row.status === 4) && scope.row.is_delete !== 1"
-                color="danger"
-                @click="cancelItem(scope.row)"
-              >
-                取消活动
-              </OLink>
-              <OLink v-if="scope.row.status === 2" color="primary" @click="passItem(scope.row)">
-                通过
-              </OLink>
-              <OLink v-if="scope.row.status === 2" color="primary" @click="rejectItem(scope.row)">
-                驳回
-              </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-calcel">已取消</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)">
-                  删除
-                </OLink>
-                <OLink v-if="(act.status === 3 || act.status === 4) && act.is_delete !== 1" color="danger"
-                       variant="text" @click.stop="cancelItem(act)"
-                >
-                  取消活动
-                </OLink
-                >
-                <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>
-              </div>
-            </template>
-            <div class="activity-detail">
-              <MeetingDetail :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">
-      <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="审核备注：" field="reason">
-            <OTextarea
-              size="large"
-              placeholder="请输入审核的备注信息"
-              style="width: 100%"
-              :rows="4"
-              resize="none"
-              :max-length="1000"
-              :input-on-outlimit="false"
-              v-model="form.reason"
-            />
-          </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">
-      <template #header>{{ cancelTitle }}</template>
-      <div class="dialog-content">是否确认{{ cancelText }}“{{ currentRow.title
-        }}”活动？取消后将不在会议首页呈现，且已报名的数据也会被清空，请谨慎操作。
-      </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;
-}
-
-.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;
-  }
-
-  @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;
-  --tag-bg-color: rgba(0, 113, 243, 0.1);
-  --tag-bd-color: transparent;
-}
-
-.tag-draft,
-.tag-calcel {
-  --tag-color: var(--o-color-info3);
-  --tag-bg-color: rgba(222, 222, 227, 1);
-}
-
-.tag-registration,
-.tag-in-progress,
-.tag-ended {
-  --tag-color: rgba(36, 171, 54, 1);
-  --tag-bg-color: rgba(36, 171, 54, 0.1);
-}
-
-.tag-reject {
-  --tag-color: rgba(294, 118, 17, 1);
-  --tag-bg-color: rgba(294, 118, 17, 0.1);
-}
-
-.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;
-}
-
-.review-dialog {
-  .review-content {
-    width: 100%;
-  }
-}
-
-.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">
-.review-dialog {
-  width: 690px;
-  --dlg-radius: 16px;
-  @include respond-to('<=pad_v') {
-    width: 100%;
-    --dlg-radius: 16px 16px 0 0;
-  }
-}
-
-.handle-dialog-approval {
-  width: 450px;
-  --dlg-radius: 16px;
-  @include respond-to('<=pad_v') {
-    width: 100%;
-    --dlg-radius: 16px 16px 0 0;
-  }
-}
-</style>