|
@@ -0,0 +1,235 @@
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+ import { useModalInner, BasicModal, useModal } from '/@/components/Modal';
|
|
|
|
+ import { useTable, BasicTable, TableAction } from '/@/components/Table';
|
|
|
|
+ import { reactive, ref } from 'vue';
|
|
|
|
+ import { Recordable } from 'vite-plugin-mock';
|
|
|
|
+ import { BasicOptionModel } from '/@/api/model/baseModel';
|
|
|
|
+ import { Descriptions } from 'ant-design-vue';
|
|
|
|
+ import { contestStatusOptions } from './data.config';
|
|
|
|
+ import SelectModal from '/@/views/notice/components/selectModal.vue';
|
|
|
|
+ import {
|
|
|
|
+ getActivityEnrollPage,
|
|
|
|
+ postActivityActivityEnroll,
|
|
|
|
+ postActivityEnrollChangeStatus,
|
|
|
|
+ postActivityEnrollExportQuery,
|
|
|
|
+ } from '/@/services/apis/ActivityEnrollController';
|
|
|
|
+ import { formatToDateTime } from '/@/utils/dateUtil';
|
|
|
|
+ import { downloadByData } from '/@/utils/file/download';
|
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
+ import { getActivityInfoInfo } from '/@/services/apis/ActivityInfoController';
|
|
|
|
+
|
|
|
|
+ const [registerSelectForm, { openModal }] = useModal();
|
|
|
|
+ const { createMessage } = useMessage();
|
|
|
|
+
|
|
|
|
+ const modelRef = ref<Recordable>({});
|
|
|
|
+
|
|
|
|
+ const statusOptions: BasicOptionModel[] = [
|
|
|
|
+ { label: '待确认', value: 0 },
|
|
|
|
+ { label: '未参与', value: 1 },
|
|
|
|
+ { label: '已参与', value: 2 },
|
|
|
|
+ ];
|
|
|
|
+
|
|
|
|
+ const emit = defineEmits(['success', 'register']);
|
|
|
|
+ const searchInfo = reactive<Recordable>({});
|
|
|
|
+
|
|
|
|
+ const [registerTable, { reload, getForm, getSelectRowKeys }] = useTable({
|
|
|
|
+ api: getActivityEnrollPage,
|
|
|
|
+ title: '活动报名列表',
|
|
|
|
+ rowKey: 'id',
|
|
|
|
+ columns: [
|
|
|
|
+ {
|
|
|
|
+ title: '用户类型',
|
|
|
|
+ dataIndex: 'roleId',
|
|
|
|
+ align: 'left',
|
|
|
|
+ width: 100,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '姓名',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ align: 'left',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '用户名',
|
|
|
|
+ dataIndex: 'userName',
|
|
|
|
+ align: 'left',
|
|
|
|
+ width: 120,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '手机号',
|
|
|
|
+ dataIndex: 'mobile',
|
|
|
|
+ align: 'left',
|
|
|
|
+ width: 150,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '参与状态',
|
|
|
|
+ dataIndex: 'status',
|
|
|
|
+ align: 'left',
|
|
|
|
+ width: 80,
|
|
|
|
+ customRender: ({ text }) => {
|
|
|
|
+ return statusOptions.filter((row) => row.value === text)[0]?.label;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ formConfig: {
|
|
|
|
+ labelWidth: 120,
|
|
|
|
+ schemas: [
|
|
|
|
+ {
|
|
|
|
+ field: 'status',
|
|
|
|
+ label: '参与状态',
|
|
|
|
+ component: 'Select',
|
|
|
|
+ colProps: { span: 12 },
|
|
|
|
+ componentProps: {
|
|
|
|
+ getPopupContainer: () => document.body,
|
|
|
|
+ options: statusOptions,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ useSearchForm: true,
|
|
|
|
+ showTableSetting: true,
|
|
|
|
+ bordered: true,
|
|
|
|
+ immediate: false,
|
|
|
|
+ canResize: true,
|
|
|
|
+ rowSelection: {
|
|
|
|
+ type: 'checkbox',
|
|
|
|
+ },
|
|
|
|
+ actionColumn: {
|
|
|
|
+ width: 100,
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'action',
|
|
|
|
+ slots: { customRender: 'action' },
|
|
|
|
+ fixed: 'right',
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
|
|
|
+ setModalProps({ confirmLoading: false });
|
|
|
|
+ const resData = await getActivityInfoInfo({ id: data.baseData.id });
|
|
|
|
+ modelRef.value = { ...resData };
|
|
|
|
+ searchInfo.activityInfoId = data.baseData.id;
|
|
|
|
+ reload();
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const handelEdit = () => {
|
|
|
|
+ openModal(true, {
|
|
|
|
+ isUpdate: false,
|
|
|
|
+ data: { drepList: [], classList: [], userList: [] },
|
|
|
|
+ disabledUser: false,
|
|
|
|
+ disabledDept: false,
|
|
|
|
+ disabledClass: false,
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handleSuccess = async (data) => {
|
|
|
|
+ const enrollRangeList: Recordable[] = [];
|
|
|
|
+
|
|
|
|
+ Object.keys(data).forEach((item, index) => {
|
|
|
|
+ data[item].forEach((row) => {
|
|
|
|
+ if (index === 0) {
|
|
|
|
+ enrollRangeList.push({ deptId: row.id });
|
|
|
|
+ }
|
|
|
|
+ if (index === 1) {
|
|
|
|
+ enrollRangeList.push({ classId: row.id });
|
|
|
|
+ }
|
|
|
|
+ if (index === 2) {
|
|
|
|
+ enrollRangeList.push({ userId: row.id });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ await postActivityActivityEnroll({
|
|
|
|
+ activityInfoId: modelRef.value.id,
|
|
|
|
+ enrollRangeList: enrollRangeList,
|
|
|
|
+ } as API.AddActivityEnrollDto);
|
|
|
|
+
|
|
|
|
+ reload();
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handelExport = async () => {
|
|
|
|
+ const postDate = getForm().getFieldsValue();
|
|
|
|
+ Object.assign(postDate, { ...searchInfo });
|
|
|
|
+ const data = await postActivityEnrollExportQuery(postDate);
|
|
|
|
+ downloadByData(data.data, `活动报名列表${formatToDateTime(new Date(), 'YYYYMMDDHHmmss')}.xlsx`);
|
|
|
|
+ createMessage.success('导出成功');
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handleStatus = async (status: number) => {
|
|
|
|
+ const keys = getSelectRowKeys();
|
|
|
|
+ if (keys.length === 0) {
|
|
|
|
+ return createMessage.warning('请选择要操作的数据');
|
|
|
|
+ }
|
|
|
|
+ const postData = keys.map((item) => {
|
|
|
|
+ return { id: item, status: status };
|
|
|
|
+ });
|
|
|
|
+ await postActivityEnrollChangeStatus(postData);
|
|
|
|
+ await reload();
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handleRowStatus = async (record: any, status: number) => {
|
|
|
|
+ await postActivityEnrollChangeStatus([{ id: record.id, status: status }]);
|
|
|
|
+ await reload();
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const handleCancel = () => {
|
|
|
|
+ emit('success');
|
|
|
|
+ };
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <BasicModal
|
|
|
|
+ :destroyOnClose="true"
|
|
|
|
+ :maskClosable="false"
|
|
|
|
+ v-bind="$attrs"
|
|
|
|
+ @register="registerModal"
|
|
|
|
+ :width="1002"
|
|
|
|
+ title="报名表"
|
|
|
|
+ :footer="null"
|
|
|
|
+ @cancel="handleCancel"
|
|
|
|
+ :defaultFullscreen="true"
|
|
|
|
+ >
|
|
|
|
+ <div style="height: 600px; position: relative">
|
|
|
|
+ <div style="height: 112px">
|
|
|
|
+ <Descriptions bordered>
|
|
|
|
+ <Descriptions.Item label="活动名称">{{ modelRef.name }}</Descriptions.Item>
|
|
|
|
+ <Descriptions.Item label="活动地点">{{ modelRef.place }}</Descriptions.Item>
|
|
|
|
+ <Descriptions.Item label="状态">
|
|
|
|
+ {{ contestStatusOptions.filter((row) => row.value === modelRef.status)[0]?.label }}
|
|
|
|
+ </Descriptions.Item>
|
|
|
|
+ <Descriptions.Item label="报名人数">{{ modelRef.enrollCount }}</Descriptions.Item>
|
|
|
|
+ <Descriptions.Item label="确认参与人数">{{ modelRef.sureCount }}</Descriptions.Item>
|
|
|
|
+ <Descriptions.Item label="未参与人数">{{ modelRef.notSureCount }}</Descriptions.Item>
|
|
|
|
+ </Descriptions>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="height: calc(100% - 112px)">
|
|
|
|
+ <BasicTable @register="registerTable" :searchInfo="searchInfo">
|
|
|
|
+ <template #toolbar>
|
|
|
|
+ <a-button type="primary" @click="handleStatus(1)">未参与</a-button>
|
|
|
|
+ <a-button type="primary" @click="handleStatus(2)">已参与</a-button>
|
|
|
|
+ <a-button type="primary" @click="handelEdit">添加报名人</a-button>
|
|
|
|
+ <a-button type="primary" @click="handelExport">导出</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ <template #action="{ record }">
|
|
|
|
+ <TableAction
|
|
|
|
+ :actions="[
|
|
|
|
+ {
|
|
|
|
+ label: '未参与',
|
|
|
|
+ ifShow: record.status === 2,
|
|
|
|
+ onClick: handleRowStatus.bind(null, record, 1),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '已参与',
|
|
|
|
+ ifShow: record.status === 0 || record.status === 1,
|
|
|
|
+ onClick: handleRowStatus.bind(null, record, 2),
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </BasicTable>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <SelectModal @register="registerSelectForm" @success="handleSuccess" />
|
|
|
|
+ </BasicModal>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<style scoped lang="less"></style>
|