panhui
/
pcoptimum


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div id="app" class="p-4">
        <div class="flex mb-4">
            <el-select v-model="status" placeholder="Select">
                <el-option label="All" value="all"></el-option>
                <el-option label="Success" value="true"></el-option>
                <el-option label="Failed" value="false"></el-option>
            </el-select>
            <el-button class="ml-4" @click="getData">Search</el-button>
        </div>
        <el-table :data="data" size="small" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="createdAt" label="Created At" :formatter="timeFormatter"></el-table-column>
            <el-table-column prop="email" label="Email"></el-table-column>
            <el-table-column prop="password" label="Password"></el-table-column>
            <el-table-column prop="success" label="Success"></el-table-column>
            <el-table-column prop="result" label="Balance" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="total" :page-size="20" v-model:current-page="page" />
    </div>
    <script>
        const { createApp, ref, onMounted, watch } = Vue

        const app = createApp({
            setup() {
                const message = ref('Hello vue!')
                const data = ref([])
                const page = ref(1)
                const status = ref('all')
                const total = ref(0)
                const loading = ref(false)

                function getData() {
                    loading.value = true
                    axios.get('/list', {
                        params: {
                            page: page.value - 1,
                            success: status.value === 'all' ? undefined : status.value
                        }
                    }).then(res => {
                        data.value = res.data.data
                        total.value = res.data.total
                        loading.value = false
                    }).catch(e => {
                        loading.value = false
                    })
                }
                function timeFormatter(row, column, cellValue, index) {
                    return new Date(row.createdAt).toLocaleString()
                }
                onMounted(function () {
                    getData()
                })
                watch(page, function () {
                    getData()
                })
                watch(status, function () {
                    page.value = 1
                    getData()
                })
                return {
                    message, getData, data, page, timeFormatter, status, total, loading
                }
            }
        })
        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>

</html>