exam-user

2026-04-14 12:30:49 +08:00 · 2021-04-25 02:12:14 +08:00
parent a0c7a7e5dc
commit 0c5f3d935d
28 changed files with 869 additions and 92 deletions
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -35,6 +35,9 @@
                        <el-menu-item-group>
                            <el-menu-item index="/exam"><i class="el-icon-menu" />Exam</el-menu-item>
                        </el-menu-item-group>
+                        <el-menu-item-group>
+                            <el-menu-item index="/exam-user"><i class="el-icon-menu" />Exam user</el-menu-item>
+                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
@@ -76,6 +79,7 @@ export default {
            }
        })
        router.beforeEach((to, from, next) => {
+            console.log("App beforeEach to", to)
            if (to.path == '/login') {
                // 如果路径是 /login 则正常执行
                next()
--- a/admin/src/components/Header.vue
+++ b/admin/src/components/Header.vue
@@ -29,26 +29,32 @@
 </template>

 <script>
-import { onMounted, reactive, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
-import axios from '../utils/axios'
+import {computed, onMounted, reactive, toRefs, watch} from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { localRemove, pathMap } from '../utils'
 import api from "../utils/api";

 export default {
    name: 'Header',
-    setup() {
+    setup(props, context) {
        const router = useRouter()
+        const route = useRoute()
        const state = reactive({
            name: 'dashboard',
            userInfo: null,
            hasBack: false
        })
        onMounted(() => {
-            const pathname = window.location.hash.split('/')[1] || ''
-            console.log("pathname: ", pathname)
-            getUserInfo()
+            console.log("Head onMounted!")
+            // console.log(props, context)
        })
+        watch(
+            () => route,
+            (newValue, oldValue) => {
+                console.log(newValue, 'new')
+                console.log(oldValue, 'old')
+            }
+        )
        const getUserInfo = async () => {
            const userInfo = await api.getUserBase()
            console.log(userInfo)
@@ -64,7 +70,7 @@ export default {
            router.back()
        }
        router.afterEach((to) => {
-            console.log('to', to)
+            console.log("Head afterEach to", to)
            const { id } = to.query
            state.name = pathMap[to.name]
            if (id && to.name == 'add') {
--- a/admin/src/main.js
+++ b/admin/src/main.js
@@ -3,4 +3,5 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import router from './router/index'
 import 'element-plus/lib/theme-chalk/index.css'
+// import './styles/common.scss'
 createApp(App).use(ElementPlus).use(router).mount('#app')
--- a/admin/src/router/index.js
+++ b/admin/src/router/index.js
@@ -33,6 +33,11 @@ const router = createRouter({
            name: 'exam-form',
            component: () => import('../views/exam/form.vue')
        },
+        {
+            path: '/exam-user',
+            name: 'exam-user',
+            component: () => import('../views/exam/user.vue')
+        },
        {
            path: '/agent-allow',
            name: 'agent-allow',
--- a/admin/src/styles/common.scss
+++ b/admin/src/styles/common.scss
--- a/admin/src/utils/api.js
+++ b/admin/src/utils/api.js
@@ -54,6 +54,9 @@ const api = {
    listClass: (params = {}) => {
        return axios.get('class', {params: params});
    },
+    listExamUser: (params = {}) => {
+        return axios.get('exam-users', {params: params});
+    },
 }

 export default api
--- a/admin/src/utils/axios.js
+++ b/admin/src/utils/axios.js
@@ -11,7 +11,6 @@ axios.defaults.headers['Authorization'] = 'Bearer ' + localGet('token')

 // 请求拦截器，内部根据返回值，重新组装，统一管理。
 axios.interceptors.response.use(res => {
-    console.log(res)
    if (typeof res.data !== 'object') {
        ElMessage.error('Server Error 1')
        return Promise.reject(res)
@@ -22,7 +21,6 @@ axios.interceptors.response.use(res => {
    }
    return res.data
 }, error => {
-    console.log(error.response)
    ElMessage.error(error.response.data.msg || 'Server Error 2')
    return Promise.reject(error)
 })
--- a/admin/src/utils/index.js
+++ b/admin/src/utils/index.js
@@ -21,13 +21,8 @@ export function hasEmoji (str = '') {
    return str.match(reg) && str.match(reg).length
 }

-// 单张图片上传
-export const uploadImgServer = 'http://backend-api-02.newbee.ltd/manage-api/v1/upload/file'
-// 多张图片上传
-export const uploadImgsServer = 'http://backend-api-02.newbee.ltd/manage-api/v1/upload/files'
-
 export const pathMap = {
-    login: '登录',
+    login: 'Login',
    introduce: '系统介绍',
    dashboard: 'Dashboard',
    add: '添加商品',
@@ -49,4 +44,5 @@ export const pathMap = {
    'user-form': 'User form',
    'exam': 'Exam',
    'exam-form': 'Exam form',
+    'exam-user': 'Exam user',
 }
--- a/admin/src/utils/table.js
+++ b/admin/src/utils/table.js
@@ -0,0 +1,39 @@
+import {ref, reactive} from 'vue'
+
+const useTable =  () => {
+    const state = reactive({
+        loading: false,
+        query: {
+            page: 1,
+            sort_field: 'id',
+            sort_type: 'desc'
+        },
+        tableData: [],
+        multipleSelection: [],
+        total: 0,
+        currentPage: 1,
+        perPage: 10
+    })
+    return state
+}
+
+const renderTableData = (res, state) => {
+    state.tableData = res.data.data
+    state.page = res.data.meta.current_page
+    state.total = res.data.meta.total
+    state.currentPage = res.data.meta.current_page
+    state.perPage = res.data.meta.per_page
+}
+
+const resetTableSort = (val, state) => {
+    console.log('resetTableSort', val)
+    state.query.page = 1
+    state.query.sort_field = val.prop
+    state.query.sort_type = val.order
+}
+
+export {
+    useTable,
+    renderTableData,
+    resetTableSort
+}
--- a/admin/src/views/exam/form.vue
+++ b/admin/src/views/exam/form.vue
@@ -26,8 +26,8 @@

                    <el-form-item label="Status" prop="status">
                        <el-radio-group v-model="formData.status">
-                            <el-radio label="0">Enabled</el-radio>
-                            <el-radio label="1">Disabled</el-radio>
+                            <el-radio :label="0">Enabled</el-radio>
+                            <el-radio :label="1">Disabled</el-radio>
                        </el-radio-group>
                    </el-form-item>

@@ -121,12 +121,19 @@ export default {
                ],
            },
        })
-        onMounted(() => {
+        onMounted( () => {
            listAllClass()
            listAllIndex()
            if (id) {
-                let res = api.getExam(id)
-                // state.formData = res.data
+                api.getExam(id).then(res => {
+                    state.formData.name = res.data.name
+                    state.formData.description = res.data.description
+                    state.formData.begin = res.data.begin
+                    state.formData.end = res.data.end
+                    state.formData.indexes = res.data.indexes
+                    state.formData.filters = res.data.filters
+                    state.formData.status = res.data.status
+                })
            } else {
                let res = api.listExamIndex()
                state.formData.indexes = res.data
@@ -146,8 +153,12 @@ export default {
                        params.end = dayjs(params.end).format('YYYY-MM-DD HH:mm:ss')
                    }
                    console.log(params)
-                    let res = await api.storeExam(params)
-                    console.log(res)
+                    if (id) {
+                        await api.updateExam(id, params)
+                    } else {
+                        await api.storeExam(params)
+                    }
+                    await router.push({name: 'exam'})
                }
            })
        }
--- a/admin/src/views/exam/index.vue
+++ b/admin/src/views/exam/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-card class="swiper-container">
+    <el-card class="">
        <template #header>
            <div class="header">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">Add</el-button>
@@ -10,7 +10,6 @@
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
-            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
@@ -66,8 +65,14 @@
            >
                <template #default="scope">
                    <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>
-                    <a style="cursor: pointer; margin-right: 10px" v-if="scope.row.goodsSellStatus == 0" @click="handleStatus(scope.row.goodsId, 1)">下架</a>
-                    <a style="cursor: pointer; margin-right: 10px" v-else @click="handleStatus(scope.row.goodsId, 0)">上架</a>
+                    <el-popconfirm
+                        title="Confirm Delete ?"
+                        @confirm="handleDelete(scope.row.id)"
+                    >
+                        <template #reference>
+                            <a style="cursor: pointer">Delete</a>
+                        </template>
+                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
@@ -76,7 +81,7 @@
            background
            layout="prev, pager, next"
            :total="total"
-            :page-size="pageSize"
+            :page-size="perPage"
            :current-page="currentPage"
            @current-change="changePage"
        />
@@ -88,24 +93,29 @@ import { onMounted, reactive, ref, toRefs } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import api from '../../utils/api'
+import { useTable, renderTableData } from '../../utils/table'
+
 export default {
    name: 'ExamTable',
    setup() {
        const multipleTable = ref(null)
        const router = useRouter()
-        const state = reactive({
-            loading: false,
-            query: {
-                page: 1,
-                sort_field: 'id',
-                sort_type: 'desc'
-            },
-            tableData: [], // 数据列表
-            multipleSelection: [], // 选中项
-            total: 0, // 总条数
-            currentPage: 1, // 当前页
-            pageSize: 10 // 分页大小
-        })
+        // const state = reactive({
+        //     loading: false,
+        //     query: {
+        //         page: 1,
+        //         sort_field: 'id',
+        //         sort_type: 'desc'
+        //     },
+        //     tableData: [], // 数据列表
+        //     multipleSelection: [], // 选中项
+        //     total: 0, // 总条数
+        //     currentPage: 1, // 当前页
+        //     pageSize: 10 // 分页大小
+        // })
+
+        const state = useTable()
+
        onMounted(() => {
            fetchTableData()
        })
@@ -113,28 +123,35 @@ export default {
        const fetchTableData = async () => {
            state.loading = true
            let res = await api.listExam(state.query)
-            renderTableData(res)
-        }
-        const renderTableData = (res) => {
-            state.tableData = res.data.data
-            state.page = res.data.meta.current_page
-            state.total = res.data.meta.total
-            state.currentPage = res.data.meta.current_page
-            state.pageSize = res.data.meta.per_page
+            renderTableData(res, state)
            state.loading = false
        }
+        // const renderTableData = (res) => {
+        //     state.tableData = res.data.data
+        //     state.page = res.data.meta.current_page
+        //     state.total = res.data.meta.total
+        //     state.currentPage = res.data.meta.current_page
+        //     state.pageSize = res.data.meta.per_page
+        //     state.loading = false
+        // }
        const handleAdd = () => {
            router.push({ name: 'exam-form' })
        }
        const handleEdit = (id) => {
            router.push({ path: '/exam-form', query: { id } })
        }
+        const handleDelete = async (id) => {
+            let res = await api.deleteExam(id)
+            ElMessage.success(res.msg)
+            state.query.page = 1;
+            await fetchTableData()
+        }
        // 选择项
        const handleSelectionChange = (val) => {
            state.multipleSelection = val
        }
        const changePage = (val) => {
-            state.currentPage = val
+            state.query.page = val
            fetchTableData()
        }
        const handleStatus = (id, status) => {
@@ -151,6 +168,7 @@ export default {
            handleSelectionChange,
            handleAdd,
            handleEdit,
+            handleDelete,
            fetchTableData,
            changePage,
            handleStatus
--- a/admin/src/views/exam/user.vue
+++ b/admin/src/views/exam/user.vue
@@ -0,0 +1,167 @@
+<template>
+    <el-card>
+        <template #header>
+            <div class="nexus-table-header">
+                <div class="left">
+
+                </div>
+                <div class="right">
+                    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">Add</el-button>
+                </div>
+            </div>
+        </template>
+        <el-table
+            v-loading="loading"
+            ref="multipleTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            @sort-change="handleSortChange"
+            @selection-change="handleSelectionChange">
+
+            <el-table-column
+                type="selection"
+                width="55">
+            </el-table-column>
+
+            <el-table-column
+                prop="id"
+                label="Id"
+                width="60"
+                sortable="custom"
+            ></el-table-column>
+
+            <el-table-column
+                prop="exam_id"
+                label="Exam"
+                :formatter="formatColumnExam"
+            ></el-table-column>
+
+            <el-table-column
+                prop="uid"
+                label="User"
+                :formatter="formatColumnUser"
+            ></el-table-column>
+
+            <el-table-column
+                prop="status_text"
+                label="Status"
+            ></el-table-column>
+
+            <el-table-column
+                prop="created_at"
+                label="Created At"
+            >
+            </el-table-column>
+
+            <el-table-column
+                label="Action"
+                width="100"
+            >
+                <!--                <template #default="scope">-->
+                <!--                    <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>-->
+                <!--                    <el-popconfirm-->
+                <!--                        title="Confirm Delete ?"-->
+                <!--                        @confirm="handleDelete(scope.row.id)"-->
+                <!--                    >-->
+                <!--                        <template #reference>-->
+                <!--                            <a style="cursor: pointer">Delete</a>-->
+                <!--                        </template>-->
+                <!--                    </el-popconfirm>-->
+                <!--                </template>-->
+            </el-table-column>
+        </el-table>
+        <!--总数超过一页，再展示分页器-->
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total"
+            :page-size="perPage"
+            :current-page="currentPage"
+            @current-change="changePage"
+        />
+    </el-card>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import api from '../../utils/api'
+import { useTable, renderTableData, resetTableSort } from '../../utils/table'
+
+export default {
+    name: 'ExamUserTable',
+    setup() {
+        const multipleTable = ref(null)
+        const router = useRouter()
+
+        const state = useTable()
+
+        onMounted(() => {
+            fetchTableData()
+        })
+        const fetchTableData = async () => {
+            state.loading = true
+            let res = await api.listExamUser(state.query)
+            renderTableData(res, state)
+            state.loading = false
+        }
+        const handleAdd = () => {
+            router.push({ name: 'user-form' })
+        }
+        const handleEdit = (id) => {
+            router.push({ name: 'user-form', query: { id } })
+        }
+        const handleDelete = async (id) => {
+            let res = await api.deleteExam(id)
+            ElMessage.success(res.msg)
+            state.query.page = 1;
+            await fetchTableData()
+        }
+        // 选择项
+        const handleSelectionChange = (val) => {
+            state.multipleSelection = val
+        }
+        const changePage = (val) => {
+            state.query.page = val
+            fetchTableData()
+        }
+        const handleSortChange = (val) => {
+            resetTableSort(val, state)
+            fetchTableData()
+        }
+
+        const formatColumnUser = (row, column) => {
+            return row.user.username
+        }
+
+        const formatColumnExam = (row, column) => {
+            return row.exam.name
+        }
+        const formatColumnDownloaded = (row, column) => {
+            return row.downloaded_text
+        }
+        return {
+            ...toRefs(state),
+            multipleTable,
+            handleSelectionChange,
+            handleAdd,
+            handleEdit,
+            handleDelete,
+            fetchTableData,
+            changePage,
+            handleSortChange,
+            formatColumnUser,
+            formatColumnExam,
+            formatColumnDownloaded
+        }
+    }
+}
+</script>
+
+<style scoped>
+.nexus-table-header {
+    display: flex;
+    justify-content: space-between;
+}
+</style>
--- a/admin/src/views/user/form.vue
+++ b/admin/src/views/user/form.vue
@@ -1,3 +1,97 @@
 <template>
-    <div>User Form</div>
+    <div>
+        <el-row>
+            <el-col :span="12">
+                <el-form :model="formData" :rules="rules" ref="formRef" label-width="200px" class="formData">
+
+                    <el-form-item label="Username" prop="username">
+                        <el-input v-model="formData.username" placeholder=""></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="Email" prop="email">
+                        <el-input v-model="formData.email" placeholder=""></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="Password" prop="password">
+                        <el-input type="password" v-model="formData.password" placeholder=""></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="Password Confirmation" prop="password_confirmation">
+                        <el-input type="password" v-model="formData.password_confirmation" placeholder=""></el-input>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button type="primary" @click="submitAdd()">Submit</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+    </div>
 </template>
+
+<script>
+import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { localGet } from '../../utils'
+import api from "../../utils/api";
+
+export default {
+    name: 'UserForm',
+    setup() {
+        const { proxy } = getCurrentInstance()
+        console.log('proxy', proxy)
+        const formRef = ref(null)
+        const route = useRoute()
+        const router = useRouter()
+        const { id } = route.query
+        const state = reactive({
+            id: id,
+            formData: {
+                username: '',
+                email: '',
+                password: '',
+                password_confirmation: '',
+            },
+            rules: {
+                username: [
+                    { required: 'true'}
+                ],
+                email: [
+                    { required: 'true', type: 'email'}
+                ],
+                password: [
+                    { required: 'true', min: 6, max: 40}
+                ],
+                password_confirmation: [
+                    { required: 'true', min: 6, max: 40}
+                ],
+            },
+        })
+        onMounted( () => {
+
+        })
+        onBeforeUnmount(() => {
+
+        })
+        const submitAdd = () => {
+            formRef.value.validate(async (vaild) => {
+                if (vaild) {
+                    let params = state.formData;
+                    await api.storeUser(params)
+                    await router.push({name: 'user'})
+                }
+            })
+        }
+        return {
+            ...toRefs(state),
+            formRef,
+            submitAdd,
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/admin/src/views/user/index.vue
+++ b/admin/src/views/user/index.vue
@@ -1,3 +1,184 @@
 <template>
-    <div>User Index</div>
+    <el-card>
+        <template #header>
+            <div class="header">
+                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">Add</el-button>
+            </div>
+        </template>
+        <el-table
+            v-loading="loading"
+            ref="multipleTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            @sort-change="handleSortChange"
+            @selection-change="handleSelectionChange">
+
+            <el-table-column
+                type="selection"
+                width="55">
+            </el-table-column>
+
+            <el-table-column
+                prop="id"
+                label="Id"
+                width="60"
+                sortable="custom"
+            ></el-table-column>
+
+            <el-table-column
+                prop="username"
+                label="Username"
+                sortable="custom"
+            ></el-table-column>
+
+            <el-table-column
+                prop="email"
+                label="Email"
+            ></el-table-column>
+
+            <el-table-column
+                prop="class"
+                label="Class"
+                sortable="custom"
+                :formatter="formatColumnClass"
+            ></el-table-column>
+
+            <el-table-column
+                prop="uploaded"
+                label="Uploaded"
+                sortable="custom"
+                :formatter="formatColumnUploaded"
+            ></el-table-column>
+
+            <el-table-column
+                prop="downloaded"
+                label="Downloaded"
+                sortable="custom"
+                :formatter="formatColumnDownloaded"
+            ></el-table-column>
+
+            <el-table-column
+                prop="bonus"
+                label="Bonus"
+            ></el-table-column>
+
+            <el-table-column
+                prop="status"
+                label="Status"
+            ></el-table-column>
+
+            <el-table-column
+                prop="added"
+                label="Added"
+            >
+            </el-table-column>
+
+            <el-table-column
+                label="Action"
+                width="100"
+            >
+<!--                <template #default="scope">-->
+<!--                    <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">Edit</a>-->
+<!--                    <el-popconfirm-->
+<!--                        title="Confirm Delete ?"-->
+<!--                        @confirm="handleDelete(scope.row.id)"-->
+<!--                    >-->
+<!--                        <template #reference>-->
+<!--                            <a style="cursor: pointer">Delete</a>-->
+<!--                        </template>-->
+<!--                    </el-popconfirm>-->
+<!--                </template>-->
+            </el-table-column>
+        </el-table>
+        <!--总数超过一页，再展示分页器-->
+        <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total"
+            :page-size="perPage"
+            :current-page="currentPage"
+            @current-change="changePage"
+        />
+    </el-card>
 </template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import api from '../../utils/api'
+import { useTable, renderTableData, resetTableSort } from '../../utils/table'
+
+export default {
+    name: 'UserTable',
+    setup() {
+        const multipleTable = ref(null)
+        const router = useRouter()
+
+        const state = useTable()
+
+        onMounted(() => {
+            fetchTableData()
+        })
+        const fetchTableData = async () => {
+            state.loading = true
+            let res = await api.listUser(state.query)
+            renderTableData(res, state)
+            state.loading = false
+        }
+        const handleAdd = () => {
+            router.push({ name: 'user-form' })
+        }
+        const handleEdit = (id) => {
+            router.push({ name: 'user-form', query: { id } })
+        }
+        const handleDelete = async (id) => {
+            let res = await api.deleteExam(id)
+            ElMessage.success(res.msg)
+            state.query.page = 1;
+            await fetchTableData()
+        }
+        // 选择项
+        const handleSelectionChange = (val) => {
+            state.multipleSelection = val
+        }
+        const changePage = (val) => {
+            state.query.page = val
+            fetchTableData()
+        }
+        const handleSortChange = (val) => {
+            resetTableSort(val, state)
+            fetchTableData()
+        }
+
+        const formatColumnClass = (row, column) => {
+            return row.class_text
+        }
+
+        const formatColumnUploaded = (row, column) => {
+            return row.uploaded_text
+        }
+        const formatColumnDownloaded = (row, column) => {
+            return row.downloaded_text
+        }
+        return {
+            ...toRefs(state),
+            multipleTable,
+            handleSelectionChange,
+            handleAdd,
+            handleEdit,
+            handleDelete,
+            fetchTableData,
+            changePage,
+            handleSortChange,
+            formatColumnClass,
+            formatColumnUploaded,
+            formatColumnDownloaded
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>