mirror of
https://github.com/lkddi/nexusphp.git
synced 2026-04-23 11:27:24 +08:00
user-list
This commit is contained in:
xiaomlove
@@ -3,14 +3,14 @@
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">增加</el-button>
|
||||
<el-popconfirm
|
||||
title="确定删除吗？"
|
||||
@confirm="handleDelete"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<!-- <el-popconfirm-->
|
||||
<!-- title="确定删除吗？"-->
|
||||
<!-- @confirm="handleDelete"-->
|
||||
<!-- >-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-popconfirm>-->
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<el-card class="add-container">
|
||||
<el-form :model="goodForm" :rules="rules" ref="goodRef" class="goodForm" label-width="150px" style="width: 50%">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input type="text" v-model="goodForm.username" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input type="text" v-model="goodForm.email" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input type="text" v-model="goodForm.password" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="password_confirmation">
|
||||
<el-input type="text" v-model="goodForm.password_confirmation" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitAdd()">{{ id ? '立即修改' : '立即创建' }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, ref, toRefs, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
|
||||
import WangEditor from 'wangeditor'
|
||||
import axios from '@/utils/axios'
|
||||
import api from '@/utils/api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { localGet, uploadImgServer, uploadImgsServer, hasEmoji } from '@/utils'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance()
|
||||
console.log('proxy', proxy)
|
||||
const editor = ref(null)
|
||||
const goodRef = ref(null)
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { id } = route.query
|
||||
const state = reactive({
|
||||
uploadImgServer,
|
||||
token: localGet('token') || '',
|
||||
id: id,
|
||||
defaultCate: '',
|
||||
goodForm: {
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: 'true' }
|
||||
],
|
||||
email: [
|
||||
{ required: 'true'}
|
||||
],
|
||||
password: [
|
||||
{ required: 'true' }
|
||||
],
|
||||
password_confirmation: [
|
||||
{ required: 'true' }
|
||||
],
|
||||
},
|
||||
})
|
||||
onMounted(() => {
|
||||
if (id) {
|
||||
getAgentAllow(id)
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
})
|
||||
const getAgentAllow = (id) => {
|
||||
api.getAllowAgent(id).then(res => {
|
||||
state.goodForm = res
|
||||
console.log(res, state.goodForm)
|
||||
})
|
||||
}
|
||||
const submitAdd = () => {
|
||||
goodRef.value.validate((vaild) => {
|
||||
console.log("valid", vaild)
|
||||
if (vaild) {
|
||||
// 默认新增用 post 方法
|
||||
let params = state.goodForm
|
||||
let res
|
||||
console.log('params', params)
|
||||
api.storeUser(params).then(res => {
|
||||
ElMessage.success(id ? '修改成功' : '添加成功')
|
||||
router.push({ path: '/user' })
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleBeforeUpload = (file) => {
|
||||
const sufix = file.name.split('.')[1] || ''
|
||||
if (!['jpg', 'jpeg', 'png'].includes(sufix)) {
|
||||
ElMessage.error('请上传 jpg、jpeg、png 格式的图片')
|
||||
return false
|
||||
}
|
||||
}
|
||||
const handleUrlSuccess = (val) => {
|
||||
state.goodForm.goodsCoverImg = val.data || ''
|
||||
}
|
||||
const handleChangeCate = (val) => {
|
||||
state.categoryId = val[2] || 0
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
goodRef,
|
||||
submitAdd,
|
||||
handleBeforeUpload,
|
||||
handleUrlSuccess,
|
||||
editor,
|
||||
handleChangeCate
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add {
|
||||
display: flex;
|
||||
}
|
||||
.add-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: #ddd;
|
||||
font-size: 30px;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 32px 17px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<el-card class="swiper-container">
|
||||
<template #header>
|
||||
<div class="header">
|
||||
<el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">增加</el-button>
|
||||
<!-- <el-popconfirm-->
|
||||
<!-- title="确定删除吗？"-->
|
||||
<!-- @confirm="handleDelete"-->
|
||||
<!-- >-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-popconfirm>-->
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="ID"
|
||||
prop="id"
|
||||
width="60"
|
||||
sortable="custom"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="用户名"
|
||||
prop="username"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="邮箱"
|
||||
prop="email"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="等级"
|
||||
prop="class"
|
||||
sortable="custom"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="上传量"
|
||||
prop="uploaded"
|
||||
sortable="custom"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="downloaded"
|
||||
label="下载量"
|
||||
sortable="custom"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="seedtime"
|
||||
label="做种时间"
|
||||
sortable="custom"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="下载时间"
|
||||
prop="leechtime"
|
||||
sortable="custom"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="状态"
|
||||
prop="status"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="添加时间"
|
||||
prop="added"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="100"
|
||||
>
|
||||
<template #default="scope">
|
||||
<!-- <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>-->
|
||||
<!-- <el-popconfirm-->
|
||||
<!-- title="确定删除吗？"-->
|
||||
<!-- @confirm="handleDeleteOne(scope.row.id)"-->
|
||||
<!-- >-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <a style="cursor: pointer">删除</a>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-popconfirm>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--总数超过一页，再展示分页器-->
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:page-size="pageSize"
|
||||
: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 AgentAllowForm from './form.vue'
|
||||
import axios from '@/utils/axios'
|
||||
import api from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'Swiper',
|
||||
components: {
|
||||
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const multipleTable = ref(null)
|
||||
const addGood = ref(null)
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
tableData: [], // 数据列表
|
||||
multipleSelection: [], // 选中项
|
||||
total: 0, // 总条数
|
||||
currentPage: 1, // 当前页
|
||||
pageSize: 10, // 分页大小
|
||||
type: 'add', // 操作类型
|
||||
sortField: 'id',
|
||||
sortType: 'desc'
|
||||
})
|
||||
onMounted(() => {
|
||||
// getCarousels()
|
||||
listUser()
|
||||
})
|
||||
// 获取轮播图列表
|
||||
const getCarousels = () => {
|
||||
// state.loading = true
|
||||
// axios.get('/carousels', {
|
||||
// params: {
|
||||
// pageNumber: state.currentPage,
|
||||
// pageSize: state.pageSize
|
||||
// }
|
||||
// }).then(res => {
|
||||
// state.tableData = res.list
|
||||
// state.total = res.totalCount
|
||||
// state.currentPage = res.currPage
|
||||
// state.loading = false
|
||||
// })
|
||||
}
|
||||
|
||||
const listUser = () => {
|
||||
state.loading = true
|
||||
let params = {
|
||||
page: state.currentPage,
|
||||
sort_field: state.sortField,
|
||||
sort_type: state.sortType
|
||||
}
|
||||
api.listUser(params).then(res => {
|
||||
state.tableData = res.data
|
||||
state.total = res.meta.total
|
||||
state.currentPage = res.meta.current_page
|
||||
state.pageSize = res.meta.per_page
|
||||
state.loading = false
|
||||
})
|
||||
}
|
||||
const handleSortChange = (sort) => {
|
||||
console.log(sort)
|
||||
state.sortField = sort.prop
|
||||
state.sortType = sort.order
|
||||
listUser()
|
||||
}
|
||||
// 添加轮播项
|
||||
const handleAdd = () => {
|
||||
state.type = 'add'
|
||||
// addGood.value.open()
|
||||
router.push({
|
||||
name: "user-form"
|
||||
})
|
||||
}
|
||||
// 修改轮播图
|
||||
const handleEdit = (id) => {
|
||||
console.log("id", id)
|
||||
router.push({
|
||||
name: "agent-allow-form",
|
||||
query: {id: id}
|
||||
})
|
||||
}
|
||||
// 选择项
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
// 批量删除
|
||||
const handleDelete = () => {
|
||||
if (!state.multipleSelection.length) {
|
||||
ElMessage.error('请选择项')
|
||||
return
|
||||
}
|
||||
axios.delete('/carousels', {
|
||||
data: {
|
||||
ids: state.multipleSelection.map(i => i.carouselId)
|
||||
}
|
||||
}).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
getCarousels()
|
||||
})
|
||||
}
|
||||
// 单个删除
|
||||
const handleDeleteOne = (id) => {
|
||||
api.deleteAllowAgent(id).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
listUser()
|
||||
})
|
||||
}
|
||||
const changePage = (val) => {
|
||||
state.currentPage = val
|
||||
listUser()
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
multipleTable,
|
||||
handleSelectionChange,
|
||||
handleSortChange,
|
||||
addGood,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
handleDeleteOne,
|
||||
getCarousels,
|
||||
changePage
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.swiper-container {
|
||||
min-height: 100%;
|
||||
}
|
||||
.el-card.is-always-shadow {
|
||||
min-height: 100%!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user