lkddi/nexusphp
1
0
Fork 0
mirror of https://github.com/lkddi/nexusphp.git synced 2026-04-24 03:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

exam-user

Browse Source
This commit is contained in:
xiaomlove
2021-04-25 02:12:14 +08:00
parent a0c7a7e5dc
commit 0c5f3d935d
28 changed files with 869 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/views/user/form.vue
+95 -1
View File
@@ -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>
admin/src/views/user/index.vue
+182 -1
View File
@@ -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>