pediatrics-admin/src/views/user/index.vue

<template>
    <div>
        <div class="user-search">
            <el-input style="width: 150px;margin-right: 10px;" v-model="query.username" placeholder="请输入患者姓名" />
            <el-input style="width: 150px;margin-right: 10px;" v-model="query.mobile" placeholder="请输入账号" />
            <!-- 选择胆道闭锁时间 -->
            <el-date-picker
                v-model="query.operative_date"
                type="date"
                placeholder="选择胆道闭锁时间"
            />
            <!-- 请选择当前风险 -->
            <el-select v-model="query.risk_type" placeholder="请选择当前风险" style="width: 150px;margin-right: 10px;margin-left: 10px;">
                <el-option label="高风险" value="3" />
                <el-option label="中风险" value="2" />
                <el-option label="低风险" value="1" />
            </el-select>
            <el-date-picker
                v-model="query.next_follow_date"
                type="date"
                placeholder="选择下次随访时间"
                 style="margin-right: 10px;"
            />
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button icon="Refresh" @click="handleReset">重置</el-button>
            
        </div>
        <div>
            <el-button type="primary" @click="handleExport">导出</el-button>
        </div>
        <div class="user-table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="username" label="姓名" />
                <el-table-column label="性别">
                    <template #default="scope">
                        <el-tag v-if="scope.row.sex === 1" type="primary">男</el-tag>
                        <el-tag v-else type="danger">女</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" />
                <el-table-column prop="mobile" label="账号" />
                <el-table-column prop="operative_date" label="胆道闭锁手术时间" />
                <el-table-column prop="postoperative_duration" label="术后时长" />
                <el-table-column label="当前风险">
                    <template #default="scope">
                        <el-tag v-if="scope.row.risk_type === 0" type="info">未知</el-tag>
                        <el-tag v-if="scope.row.risk_type === 1" type="success">低危</el-tag>
                        <el-tag v-if="scope.row.risk_type === 2" type="warning">中危</el-tag>
                        <el-tag v-if="scope.row.risk_type === 3" type="danger">高危</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="身高生长曲线" >
                    <template #default="scope">
                        <el-tag v-if="scope.row.height_growth_curve_type === 0" type="info">未知</el-tag>
                        <el-tag v-if="scope.row.height_growth_curve_type === 1" type="warning">轻度偏高</el-tag>
                        <el-tag v-if="scope.row.height_growth_curve_type === 2" type="success">正常</el-tag>
                        <el-tag v-if="scope.row.height_growth_curve_type === 3" type="danger">重度偏高</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="体重生长曲线" >
                    <template #default="scope">
                        <el-tag v-if="scope.row.weight_growth_curve_type === 0" type="info">未知</el-tag>
                        <el-tag v-if="scope.row.weight_growth_curve_type === 1" type="warning">轻度偏高</el-tag>
                        <el-tag v-if="scope.row.weight_growth_curve_type === 2" type="success">正常</el-tag>
                        <el-tag v-if="scope.row.weight_growth_curve_type === 3" type="danger">重度偏高</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="next_follow_date" label="下次随访时间" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleCheck(scope.row)" size="small">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                :page-size="20"
                :current-page="1"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { users, exportUsers } from '@/api/user';
import { useRouter } from 'vue-router';
const router = useRouter()
const tableData = ref([
    {
        name: '张三',
        phone: '12345678901',
        email: '12345678901@qq.com',
    },
])
const search = ref('')
const handleCheck = (row) => {
    console.log(row)
    router.push({
        path: '/userDetail',
        query: {
            id: row.id
        }
    })
}

const query = ref({
    username: '',
    mobile: '',
    operative_date: '',
    next_follow_date: '',
    risk_type: '',
    page: 1,
    pageSize: 20
})
const total = ref(0)
const getList = () => {
    users(query.value).then(res => {
        total.value = res.total
        tableData.value = res.list
    })
}
const handleSearch = () => {
    getList()
}
const handleReset = () => {
    query.value = {
        username: '',
        mobile: '',
        operative_date: '',
        next_follow_date: '',
        risk_type: '',
        page: 1,
        pageSize: 20
    }
    getList()
}
const handleExport = () => {
    exportUsers(query.value).then(res => {
        console.log(res)
        // 创建 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        // 创建下载链接
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        // 设置文件名
        link.download = `用户数据_${new Date().getTime()}.xlsx`
        // 触发点击下载
        link.click()
        // 释放 URL 对象
        window.URL.revokeObjectURL(link.href)
    })
}
onMounted(() => {
    getList()
})
</script>

<style scoped>
.user-search {
        margin-bottom: 10px;
    }
</style>