YD_SmartSports.Web/src/views/openReservation/index.vue

<script setup>
import { ref, onMounted } from 'vue'
import { Table, Tag, Divider, ConfigProvider, Input, Button, Modal, Select, Pagination, message ,Popconfirm} from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { getSchoolReservationList } from '@/api/grade';
import { changeSchoolReservationStatus } from '@/api/grade';


// Component logic goes here
onMounted(() => {
    // Initialization code
    getSchoolList()
})

const getSchoolList = async () => {
    const res = await getSchoolReservationList(pageIndex.value, searchSchoolStatus.value);
    schoolList.value = res.data.datas
    total.value = res.data.total;
}

const schoolList = ref([]);
const total = ref(0);
const pageIndex = ref(1);
const columns = [
    {
        title: '序号',
        key: 'index',
        // width: 80,
        customRender: ({ index }) => index + 1
    },
    {
        title: '学校名称',
        dataIndex: 'schoolName',
        key: 'schoolName',
    },
    {
        title: '学校地址',
        dataIndex: 'schoolAddress',
        key: 'schoolAddress',
    },
    {
        title: '联系人',
        dataIndex: 'userName',
        key: 'userName',
    },
    {
        title: '联系电话',
        dataIndex: 'phoneNo',
        key: 'phoneNo',
    },
    {
        title: '申请时间',
        dataIndex: 'visitingTime',
        key: 'visitingTime',
    },
    {
        title: '状态',
        dataIndex: 'set',
        key: 'set',
    },
]

const statusList = [
    { label: '全部', value: 0 },
    { label: '未联系', value: 1 },
    { label: '已联系', value: 2 },
]

const searchSchoolStatus = ref(0);

const handleChange = (value) => {
    searchSchoolStatus.value = value;
    getSchoolList();
}

const changeStutus = async (id ) =>{
    const res = await changeSchoolReservationStatus(id,2);
    message.success('状态变更成功');
    getSchoolList();
}
</script>

<template>
    <div class="class-manage">
        <div class="select-box">
            学校状态：
            <!-- <Input type="text" placeholder="请输入学校名称" v-model:value="searchSchoolName" class="inputt" /> -->
             <Select
                v-model:value="searchSchoolStatus"
                placeholder="请选择状态"
                class="select"
                @change="handleChange"
             >
                <Select.Option v-for="item in statusList" :key="item.value" :value="item.value">
                    {{ item.label }}
                </Select.Option>
             </Select>

            <Button class="btn" type="primary" @click="handleChange(0)"> 重置</Button>

        </div>

        <ConfigProvider :locale="zhCN">
            <Table :columns="columns" :data-source="schoolList" :locale="zhCN" :pagination="{ pageSize: 20 ,total: total, current: pageIndex, onChange: (page) => { pageIndex = page; getSchoolList() } }">
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">

                        {{ index + 1 }}
                    </template>
                    <!-- <template v-if="column.key === 'studentCount' && record.id == allStudentClass.id">
                    {{ studentslist.length }}
                </template> -->
                    <template v-if="column.key == 'set'">
                        <Popconfirm
                            title="是否变更联系状态状态？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="changeStutus(record.id, record.status)"
                            @cancel="cancel"
                            v-if="record.status == 1"
                        > 
                        <a >未联系</a>
                        </Popconfirm>
                        <view v-if="record.status == 2">已联系</view>
                        <!-- <a @click="setCilck" class="settingg">删除</a> -->
                    </template>
                </template>
            </Table>
        </ConfigProvider>
    </div>



</template>

<style lang="scss" scoped>
.ever {
    display: flex;
    align-items: center;
    margin-top: 30px;
}


.inputtt {
    width: 600px;
}

.posi {
    position: absolute;
    top: 4px;
    left: 20px;
    color: #999;
}

.student-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    justify-content: flex-start;
    padding: 0 30px 30px;
}

.action {
    margin-left: 94px;
    margin-top: 20px;
    margin-bottom: -10px;
    color: #999;
}

.student-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100px;
    height: 40px;
    border-radius: 10px;
    background-color: #fff;
    margin-right: 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 0 16px;
    font-size: 14px;
    position: relative;
    border: 1px solid #1890ff;

    .sex {
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        margin-left: 4px;
        margin-right: 4px;
    }

    .index {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #1890ff;
        color: #fff;
        min-width: 20px;
        border-radius: 5px 0 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.click {
    background-color: #1890ff;
    color: #fff;
    animation: selectAnimation 0.3s ease;
}

.noClick {
    // animation: noSelectAnimation 0.3s ease;
}

@keyframes noSelectAnimation {
    0% {
        background-color: #1890ff;
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        background-color: #f0f0f0;
        transform: scale(1);

    }
}

@keyframes selectAnimation {
    0% {
        background-color: #f0f0f0;
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        background-color: #1890ff;
        transform: scale(1);
    }
}

.click-box {
    margin-left: 86px;
    margin-right: 66px;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 10px;
    padding-top: 20px;
}


.class-manage {
    padding: 24px;
    background: #fff;
    margin: 12px;
    border-radius: 10px;
    min-height: 90vh;

    .select-box {
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        margin-bottom: 16px;
        font-size: 14px;
    }

    .select-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 16px;
    }

    .btn {
        margin-right: 16px;
        margin-left: 30px;
    }

    .new-class-btn {
        margin-bottom: 16px;
        display: flex;
        justify-content: flex-end;
    }

    .inputt {
        width: 250px;
        height: 36px;
        border-radius: 5px;
        padding-left: 5px;
        margin-right: 16px;
    }

    .settingg {
        margin-right: 12px;
    }

}
</style>