mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 11:27:24 +08:00
exam-user
This commit is contained in:
xiaomlove
@@ -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'})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user