mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 11:43:04 +08:00
测试3
This commit is contained in:
parent
e2b25ef87d
commit
2bd962055c
@ -1,391 +1,3 @@
|
|||||||
<style scoped>
|
|
||||||
.addinput{
|
|
||||||
//display: flex;
|
|
||||||
//flex-direction: column;
|
|
||||||
//justify-content: center;
|
|
||||||
//align-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.addinput>div>input{
|
|
||||||
/*width:300px ;*/
|
|
||||||
/*height: 30px;*/
|
|
||||||
/*border-radius: 5px;*/
|
|
||||||
//margin: 0 auto;
|
|
||||||
//outline-color: #94beae;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
<div style="width: 80vw;height:90vh;position: relative;margin: 0;padding: 0">
|
这是消息管理页
|
||||||
<div style="padding:20px 10px;">
|
|
||||||
<Space>
|
|
||||||
<span>用户名：</span>
|
|
||||||
<Input prefix="ios-contact" placeholder="username" clearable style="width: 200px" />
|
|
||||||
<span>电话号：</span>
|
|
||||||
<Input placeholder="Enter phone" style="width: auto" />
|
|
||||||
<Button @click="searchUser" type="primary" shape="circle" icon="ios-search">查询</Button>
|
|
||||||
<Button type="primary" ghost @click="showAddDialog">新增</Button>
|
|
||||||
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
<!-- 表格内容-->
|
|
||||||
<div style="width: 80vw; height: 78vh; margin: 0; padding: 0">
|
|
||||||
<Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName" >
|
|
||||||
|
|
||||||
|
|
||||||
<template #status="{ row, index }">
|
|
||||||
<Switch size="large" v-model="states.data[index].accountNoLocked" :before-change="handleBeforeSwitchChange">
|
|
||||||
<template #open>
|
|
||||||
<span>开启</span>
|
|
||||||
</template>
|
|
||||||
<template #close>
|
|
||||||
<span>关闭</span>
|
|
||||||
</template>
|
|
||||||
</Switch>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #action="{ row, index }">
|
|
||||||
<Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
|
|
||||||
<Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
</Table>
|
|
||||||
<div style="height: 6vh ;text-align: left;padding-top: 20px">
|
|
||||||
<Page :total="40" size="small" show-elevator show-sizer />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 对话框-->
|
|
||||||
<div>
|
|
||||||
<Modal
|
|
||||||
v-model="editDialog"
|
|
||||||
title="编辑"
|
|
||||||
@on-ok="editOk"
|
|
||||||
@on-cancel="editCancel">
|
|
||||||
<div style="">
|
|
||||||
<div style="margin-bottom: 10px">
|
|
||||||
<span>
|
|
||||||
用户名：<Input v-model="updateData.username" placeholder="Enter something..." style="width: 180px" />
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: 20px">
|
|
||||||
<label>电话：</label><Input v-model="updateData.phone" placeholder="Enter something..." style="width: 180px" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="margin-bottom: 10px">
|
|
||||||
<span>
|
|
||||||
性别：
|
|
||||||
<RadioGroup v-model="sex">
|
|
||||||
<Radio label="男"></Radio>
|
|
||||||
<Radio label="女"></Radio>
|
|
||||||
</RadioGroup>
|
|
||||||
</span>
|
|
||||||
<span style="margin-left: 98px">
|
|
||||||
角色：
|
|
||||||
<Select v-model="roleSingle" style="width:200px">
|
|
||||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
|
||||||
</Select>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" type="textarea" placeholder="Enter something..." style="width: 435px" /></div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
v-model="deleteDialog"
|
|
||||||
title="删除"
|
|
||||||
@on-ok="deleteOk"
|
|
||||||
@on-cancel="deleteCancel">
|
|
||||||
<p>请问是否要删除xxx数据</p>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<Modal v-model="addDialog" title="新增用户信息" @on-ok="addOk" @on-cancel="addCancel" >
|
|
||||||
<div>
|
|
||||||
<div>用户名：<Input v-model="addData.username" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
|
||||||
<div style="margin-left: 15px">密码：<Input v-model="addData.password" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" type="password"/></div>
|
|
||||||
<div style="margin-left: 15px">地址：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
|
||||||
<div style="margin-left: 15px">电话：<Input v-model="addData.phone" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
|
||||||
<div style="margin-left: 15px">邮箱：<Input v-model="addData.email" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
|
||||||
<div style="margin-left: 15px">性别： <RadioGroup v-model="sex" style="margin-bottom: 10px">
|
|
||||||
<Radio label='男'></Radio>
|
|
||||||
<Radio label='女'></Radio>
|
|
||||||
</RadioGroup></div>
|
|
||||||
<div style="margin-left: 15px">年龄：<Input v-model="addData.age" placeholder="Enter something..." style="width: 250px" type="number" /></div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {Page, Radio, RadioGroup, Space, Switch} from "view-ui-plus";
|
|
||||||
import requests from "../../public/request.js"
|
|
||||||
import {reactive, ref} from "vue";
|
|
||||||
import message from "view-ui-plus/src/components/message/index.js";
|
|
||||||
import {onMounted, onBeforeMount} from "vue";
|
|
||||||
import modal from "view-ui-plus/src/components/modal/index.js";
|
|
||||||
|
|
||||||
const currentPage = ref(1) // 当前页码
|
|
||||||
const pageSize = ref(10) // 每页显示的数据条数
|
|
||||||
const addDialog = ref(false)
|
|
||||||
const value = ref(true)
|
|
||||||
const deleteDialog = ref(false)
|
|
||||||
const editDialog = ref(false)
|
|
||||||
const token = window.localStorage.getItem('token')
|
|
||||||
const AllUser = reactive({
|
|
||||||
page:1,
|
|
||||||
limit: 10,
|
|
||||||
search: null,
|
|
||||||
role: null
|
|
||||||
})
|
|
||||||
const columns = reactive( [
|
|
||||||
{
|
|
||||||
type: "selection",
|
|
||||||
width: 60,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "用户名",
|
|
||||||
key: "username",
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "账号",
|
|
||||||
key: "jobId",
|
|
||||||
width: 125,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "电话",
|
|
||||||
key: "phone",
|
|
||||||
width: 125,
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "邮箱",
|
|
||||||
key: "email",
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "状态",
|
|
||||||
slot: "status",
|
|
||||||
width: 80,
|
|
||||||
align: "center",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
slot: "action",
|
|
||||||
width: 150,
|
|
||||||
align: "center"
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const states = reactive({
|
|
||||||
data:[]
|
|
||||||
})
|
|
||||||
const loadingTable = ref(true)
|
|
||||||
const sex = ref('男')
|
|
||||||
const roleSingle = ref(1)
|
|
||||||
const updateData = reactive({
|
|
||||||
id: 0,
|
|
||||||
username: '',
|
|
||||||
address: '',
|
|
||||||
phone: '',
|
|
||||||
email: '',
|
|
||||||
age: '',
|
|
||||||
signature: '',
|
|
||||||
sex: '',
|
|
||||||
avatar: '',
|
|
||||||
nickname: '',
|
|
||||||
description: '',
|
|
||||||
enabled: true,
|
|
||||||
isExpired: false,
|
|
||||||
passwordExpired: false,
|
|
||||||
recommend: false,
|
|
||||||
isLocked: false
|
|
||||||
})
|
|
||||||
const cityList= reactive([
|
|
||||||
{
|
|
||||||
value: 1,
|
|
||||||
label: '管理员'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
label: '老师'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 3,
|
|
||||||
label: '学生'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const userLock = reactive({
|
|
||||||
id: -1,
|
|
||||||
isLock: 1
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 配置代码
|
|
||||||
*/
|
|
||||||
message.config({
|
|
||||||
background: true
|
|
||||||
})
|
|
||||||
function setRowClassName(row, index) {
|
|
||||||
return 'custom-row';
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getAll()
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 方法函数
|
|
||||||
*/
|
|
||||||
|
|
||||||
function getAll() {
|
|
||||||
requests.userAllCurrent(AllUser,token).then((res)=>{
|
|
||||||
// states.data = res.data.data
|
|
||||||
// console.log(res.data.data)
|
|
||||||
loadingTable.value = false
|
|
||||||
for (let i = 0; i < res.data.data.length; i++) {
|
|
||||||
states.data[i] = res.data.data[i].user
|
|
||||||
}
|
|
||||||
console.log(res)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSelectAll(status) {
|
|
||||||
this.$refs.selection.selectAll(status);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleBeforeSwitchChange(index, row) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
this.$Modal.confirm({
|
|
||||||
title: '切换确认',
|
|
||||||
content: '您确认要切换开关状态吗？',
|
|
||||||
onOk: () => {
|
|
||||||
resolve();
|
|
||||||
message.success('切换成功')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePageChange(newPage) {
|
|
||||||
this.currentPage = newPage; // 更新当前页码
|
|
||||||
}
|
|
||||||
|
|
||||||
const addData = reactive({
|
|
||||||
username: '',
|
|
||||||
password: '',
|
|
||||||
address: '',
|
|
||||||
phone: '',
|
|
||||||
email: '',
|
|
||||||
sex: 1,
|
|
||||||
age: ''
|
|
||||||
})
|
|
||||||
function showAddDialog(){
|
|
||||||
addDialog.value = true
|
|
||||||
|
|
||||||
}
|
|
||||||
function addOk () {
|
|
||||||
if (sex.value === '男') {
|
|
||||||
addData.sex = 1
|
|
||||||
}else {
|
|
||||||
addData.sex = 0
|
|
||||||
}
|
|
||||||
requests.userAdd(addData, token).then((res)=>{
|
|
||||||
if (res.data.code===200) {
|
|
||||||
message.success('新增成功')
|
|
||||||
getAll()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
message.error('新增失败')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function addCancel () {
|
|
||||||
message.info('取消新增')
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteId = ref(0)
|
|
||||||
function showDeleteDialog(index, row){
|
|
||||||
deleteDialog.value = true
|
|
||||||
deleteId.value = row.id
|
|
||||||
}
|
|
||||||
function deleteOk(){
|
|
||||||
deleteDialog.value = false;
|
|
||||||
console.log(deleteId.value)
|
|
||||||
requests.userDelete(deleteId.value, token).then((res)=>{
|
|
||||||
if (res.data.code === 200) {
|
|
||||||
message.success('删除成功')
|
|
||||||
}else {
|
|
||||||
message.error('删除失败')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
function deleteCancel(){
|
|
||||||
deleteDialog.value = false;
|
|
||||||
message.info('取消删除')
|
|
||||||
}
|
|
||||||
|
|
||||||
function showEditDialog(index, row){
|
|
||||||
editDialog.value = true
|
|
||||||
updateData.id = row.id
|
|
||||||
updateData.username = row.username
|
|
||||||
updateData.address = row.address
|
|
||||||
updateData.phone = row.phone
|
|
||||||
updateData.email = row.email
|
|
||||||
updateData.age = row.age
|
|
||||||
updateData.signature = row.signature
|
|
||||||
updateData.sex = row.sex
|
|
||||||
updateData.avatar = row.avatar
|
|
||||||
updateData.nickname = row.nickname
|
|
||||||
updateData.description = row.description
|
|
||||||
if (row.sex === 1) {
|
|
||||||
sex.value = '男'
|
|
||||||
}else {
|
|
||||||
sex.value = '女'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function editOk(){
|
|
||||||
editDialog.value = false;
|
|
||||||
requests.userEdit(updateData,token).then((res)=>{
|
|
||||||
console.log("editResult:",res)
|
|
||||||
console.log("updateData:",updateData)
|
|
||||||
if (res.data.code === 200) {
|
|
||||||
message.success('修改成功')
|
|
||||||
getAll()
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
message.error('修改失败')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
function editCancel(){
|
|
||||||
editDialog.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function searchUser(){
|
|
||||||
requests.userCurrent(null,token).then((res)=>{
|
|
||||||
console.log(res)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@ -1,210 +1,414 @@
|
|||||||
<style>
|
<style scoped>
|
||||||
.addinput{
|
.addinput{
|
||||||
display: flex;
|
//display: flex;
|
||||||
flex-direction: column;
|
//flex-direction: column;
|
||||||
justify-content: center;
|
//justify-content: center;
|
||||||
align-content: center;
|
//align-content: center;
|
||||||
}
|
|
||||||
.addinput>div{
|
|
||||||
padding-bottom: 10px;
|
|
||||||
font-size: 15px;
|
|
||||||
position: relative;
|
|
||||||
left:50px
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.addinput>div>input{
|
.addinput>div>input{
|
||||||
width:300px ;
|
/*width:300px ;*/
|
||||||
height: 30px;
|
/*height: 30px;*/
|
||||||
border-radius: 5px;
|
/*border-radius: 5px;*/
|
||||||
margin: 0 auto;
|
//margin: 0 auto;
|
||||||
outline-color: #94beae;
|
//outline-color: #94beae;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div style="width: 80vw;height:90vh;position: relative">
|
<div style="width: 80vw;height:90vh;position: relative;margin: 0;padding: 0">
|
||||||
<div style="padding:20px 10px;">
|
<div style="padding:20px 10px;">
|
||||||
<Space>
|
<Space>
|
||||||
<span>用户id:</span>
|
<span>用户名：</span>
|
||||||
<Input v-model="value" placeholder="id" clearable style="width: 200px" />
|
<Input v-model="searchData.username" prefix="ios-contact" placeholder="username" clearable style="width: 200px" />
|
||||||
<span>用户名称：</span>
|
<span>电话号：</span>
|
||||||
<Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
|
<Input v-model="searchData.phone" placeholder="Enter phone" style="width: auto" />
|
||||||
<Button @click="test" type="primary" shape="circle" icon="ios-search">查询</Button>
|
<Button @click="searchUser" type="primary" shape="circle" icon="ios-search">查询</Button>
|
||||||
<Button type="primary" ghost @click="modal = true">新增</Button>
|
<Button type="primary" ghost @click="showAddDialog">新增</Button>
|
||||||
<Modal v-model="modal" title="新增用户信息" @on-ok="ok" @on-cancel="cancel" >
|
|
||||||
<div class="addinput">
|
|
||||||
<div>姓名：<input style="border:1px solid "><br></div>
|
|
||||||
<div>性别：<input style="border:1px solid "><br></div>
|
|
||||||
<div>年龄：<input style="border:1px solid "><br></div>
|
|
||||||
<div>地址：<input style="border:1px solid "><br></div>
|
|
||||||
|
|
||||||
</div>
|
</Space>
|
||||||
</Modal>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
<div style="width: 85vw; height: 78vh">
|
|
||||||
<Table border ref="selection" :columns="columns" :data="data" style="height: 72vh ;text-align: center" width="100%" :row-class-name="setRowClassName" >
|
|
||||||
|
|
||||||
|
|
||||||
<template #status="{ row, index }">
|
|
||||||
<Switch size="large">
|
|
||||||
<template #open>
|
|
||||||
<span>开启</span>
|
|
||||||
</template>
|
|
||||||
<template #close>
|
|
||||||
<span>关闭</span>
|
|
||||||
</template>
|
|
||||||
</Switch>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #action="{ row, index }">
|
|
||||||
<Button type="primary" size="small" style="margin-right: 5px" @click="this.editDialog = true">编辑</Button>
|
|
||||||
<Button type="error" size="small" @click="this.deleteDialog = true">删除</Button>
|
|
||||||
</template>
|
|
||||||
</Table>
|
|
||||||
<div style="height: 6vh ;text-align: left;padding-top: 20px">
|
|
||||||
<Page :total="40" size="small" show-elevator show-sizer />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
v-model="editDialog"
|
|
||||||
title="编辑"
|
|
||||||
@on-ok="editOk"
|
|
||||||
@on-cancel="editCancel">
|
|
||||||
<div class="addinput">
|
|
||||||
<div>姓名：<input style="border:1px solid "><br></div>
|
|
||||||
<div>性别：<input style="border:1px solid "><br></div>
|
|
||||||
<div>年龄：<input style="border:1px solid "><br></div>
|
|
||||||
<div>地址：<input style="border:1px solid "><br></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
v-model="deleteDialog"
|
|
||||||
title="删除"
|
|
||||||
@on-ok="deleteOk"
|
|
||||||
@on-cancel="deleteCancel">
|
|
||||||
<p>请问是否要删除xxx数据</p>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 表格内容-->
|
||||||
|
<div style="width: 80vw; height: 78vh; margin: 0; padding: 0">
|
||||||
|
<Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName" >
|
||||||
|
|
||||||
|
|
||||||
|
<template #status="{ row, index }">
|
||||||
|
<Switch size="large" v-model="states.data[index].accountNoLocked" :before-change="handleBeforeSwitchChange">
|
||||||
|
<template #open>
|
||||||
|
<span>开启</span>
|
||||||
|
</template>
|
||||||
|
<template #close>
|
||||||
|
<span>关闭</span>
|
||||||
|
</template>
|
||||||
|
</Switch>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #action="{ row, index }">
|
||||||
|
<Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
|
||||||
|
<Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
</Table>
|
||||||
|
<div style="height: 6vh ;text-align: left;padding-top: 20px">
|
||||||
|
<Page :total="states.data.length" size="small" show-elevator show-sizer />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 对话框-->
|
||||||
|
<div>
|
||||||
|
<Modal
|
||||||
|
v-model="editDialog"
|
||||||
|
title="编辑"
|
||||||
|
@on-ok="editOk"
|
||||||
|
@on-cancel="editCancel">
|
||||||
|
<div style="">
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span>
|
||||||
|
用户名：<Input v-model="updateData.username" placeholder="Enter something..." style="width: 180px" />
|
||||||
|
</span>
|
||||||
|
<span style="margin-left: 20px">
|
||||||
|
<label>电话：</label><Input v-model="updateData.phone" placeholder="Enter something..." style="width: 180px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span>
|
||||||
|
性别：
|
||||||
|
<RadioGroup v-model="sex">
|
||||||
|
<Radio label="男"></Radio>
|
||||||
|
<Radio label="女"></Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</span>
|
||||||
|
<span style="margin-left: 98px">
|
||||||
|
角色：
|
||||||
|
<Select v-model="roleSingle" style="width:200px">
|
||||||
|
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||||
|
</Select>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 10px">邮箱：<Input v-model="updateData.email" placeholder="Enter something..." style="width: 435px" /></div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 10px">地址：<Input v-model="updateData.address" placeholder="Enter something..." style="width: 435px" /></div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 10px">简介：<Input v-model="updateData.description" type="textarea" placeholder="Enter something..." style="width: 435px" /></div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
v-model="deleteDialog"
|
||||||
|
title="删除"
|
||||||
|
@on-ok="deleteOk"
|
||||||
|
@on-cancel="deleteCancel">
|
||||||
|
<p>请问是否要删除xxx数据</p>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal v-model="addDialog" title="新增用户信息" @on-ok="addOk" @on-cancel="addCancel" >
|
||||||
|
<div>
|
||||||
|
<div>用户名：<Input v-model="addData.username" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
||||||
|
<div style="margin-left: 15px">密码：<Input v-model="addData.password" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" type="password"/></div>
|
||||||
|
<div style="margin-left: 15px">地址：<Input v-model="addData.address" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
||||||
|
<div style="margin-left: 15px">电话：<Input v-model="addData.phone" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
||||||
|
<div style="margin-left: 15px">邮箱：<Input v-model="addData.email" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
||||||
|
<div style="margin-left: 15px">性别： <RadioGroup v-model="sex" style="margin-bottom: 10px">
|
||||||
|
<Radio label='男'></Radio>
|
||||||
|
<Radio label='女'></Radio>
|
||||||
|
</RadioGroup></div>
|
||||||
|
<div style="margin-left: 15px">年龄：<Input v-model="addData.age" placeholder="Enter something..." style="width: 250px" type="number" /></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import {Modal, Page, Space, Switch, TagSelectOption} from "view-ui-plus";
|
import {Page, Radio, RadioGroup, Space, Switch} from "view-ui-plus";
|
||||||
import requests from "../../public/request.js"
|
import requests from "../../public/request.js"
|
||||||
|
import {reactive, ref} from "vue";
|
||||||
|
import message from "view-ui-plus/src/components/message/index.js";
|
||||||
|
import {onMounted, onBeforeUpdate} from "vue";
|
||||||
|
import modal from "view-ui-plus/src/components/modal/index.js";
|
||||||
|
|
||||||
export default {
|
const currentPage = ref(1) // 当前页码
|
||||||
components: {Modal, TagSelectOption, Switch, Page, Space },
|
const pageSize = ref(10) // 每页显示的数据条数
|
||||||
data() {
|
const addDialog = ref(false)
|
||||||
return {
|
const value = ref(true)
|
||||||
// value: "", // 添加一个属性来绑定输入框的值
|
const deleteDialog = ref(false)
|
||||||
currentPage: 1, // 当前页码
|
const editDialog = ref(false)
|
||||||
pageSize: 10, // 每页显示的数据条数
|
const token = window.localStorage.getItem('token')
|
||||||
modal: false,
|
const AllUser = reactive({
|
||||||
value:true,
|
page:1,
|
||||||
deleteDialog: false,
|
limit: 10,
|
||||||
editDialog:false,
|
search: null,
|
||||||
token: window.localStorage.getItem('token'),
|
role: null
|
||||||
AllUser: {
|
})
|
||||||
page:1,
|
const columns = reactive( [
|
||||||
limit: 10,
|
{
|
||||||
search: null,
|
type: "selection",
|
||||||
role: null
|
width: 60,
|
||||||
},
|
align: "center"
|
||||||
columns: [
|
},
|
||||||
{
|
{
|
||||||
type: "selection",
|
title: "用户名",
|
||||||
// width: 60,
|
key: "username",
|
||||||
align: "center"
|
align: "center"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "用户名",
|
title: "账号",
|
||||||
key: "username",
|
key: "jobId",
|
||||||
align: "center"
|
width: 125,
|
||||||
},
|
align: "center"
|
||||||
{
|
},
|
||||||
title: "账号",
|
{
|
||||||
key: "jobId",
|
title: "电话",
|
||||||
align: "center"
|
key: "phone",
|
||||||
},
|
width: 125,
|
||||||
{
|
align: "center"
|
||||||
title: "电话",
|
},
|
||||||
key: "phone",
|
{
|
||||||
align: "center"
|
title: "邮箱",
|
||||||
},
|
key: "email",
|
||||||
{
|
align: "center"
|
||||||
title: "邮箱",
|
},
|
||||||
key: "email",
|
{
|
||||||
align: "center"
|
title: "状态",
|
||||||
},
|
slot: "status",
|
||||||
{
|
width: 80,
|
||||||
title: "状态",
|
align: "center",
|
||||||
slot: "status",
|
},
|
||||||
// width: 100,
|
{
|
||||||
align: "center",
|
title: "操作",
|
||||||
},
|
slot: "action",
|
||||||
{
|
width: 150,
|
||||||
title: "创建时间",
|
align: "center"
|
||||||
key: "createTime",
|
}
|
||||||
align: "center",
|
])
|
||||||
},
|
const states = reactive({
|
||||||
{
|
data:[]
|
||||||
title: "修改时间",
|
})
|
||||||
key: "updateTime",
|
const loadingTable = ref(true)
|
||||||
align: "center",
|
const sex = ref('男')
|
||||||
},
|
const roleSingle = ref(1)
|
||||||
{
|
const updateData = reactive({
|
||||||
title: "操作",
|
id: 0,
|
||||||
slot: "action",
|
username: '',
|
||||||
// width: 150,
|
address: '',
|
||||||
align: "center"
|
phone: '',
|
||||||
}
|
email: '',
|
||||||
],
|
age: '',
|
||||||
data: []
|
signature: '',
|
||||||
};
|
sex: '',
|
||||||
},
|
avatar: '',
|
||||||
|
nickname: '',
|
||||||
|
description: '',
|
||||||
|
enabled: true,
|
||||||
|
isExpired: false,
|
||||||
|
passwordExpired: false,
|
||||||
|
recommend: false,
|
||||||
|
isLocked: false
|
||||||
|
})
|
||||||
|
const cityList= reactive([
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '管理员'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '老师'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '学生'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const userLock = reactive({
|
||||||
|
id: -1,
|
||||||
|
isLock: 1
|
||||||
|
})
|
||||||
|
|
||||||
methods: {
|
/**
|
||||||
|
* 配置代码
|
||||||
|
*/
|
||||||
|
message.config({
|
||||||
|
background: true
|
||||||
|
})
|
||||||
|
function setRowClassName(row, index) {
|
||||||
|
return 'custom-row';
|
||||||
|
}
|
||||||
|
|
||||||
test(){
|
onMounted(() => {
|
||||||
requests.userAllCurrent(this.AllUser, this.token).then((res)=>{
|
getAll()
|
||||||
console.log(res)
|
})
|
||||||
})
|
|
||||||
},
|
/**
|
||||||
handleSelectAll(status) {
|
* 方法函数
|
||||||
this.$refs.selection.selectAll(status);
|
*/
|
||||||
},
|
|
||||||
setRowClassName(row, index) {
|
function getAll() {
|
||||||
return 'custom-row';
|
requests.userAllCurrent(AllUser,token).then((res)=>{
|
||||||
},
|
// states.data = res.data.data
|
||||||
|
// console.log(res.data.data)
|
||||||
|
loadingTable.value = false
|
||||||
|
for (let i = 0; i < res.data.data.length; i++) {
|
||||||
|
states.data[i] = res.data.data[i].user
|
||||||
|
}
|
||||||
|
console.log("getAll:",res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelectAll(status) {
|
||||||
|
this.$refs.selection.selectAll(status);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleBeforeSwitchChange(index, row) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: '切换确认',
|
||||||
|
content: '您确认要切换开关状态吗？',
|
||||||
|
onOk: () => {
|
||||||
|
resolve();
|
||||||
|
message.success('切换成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePageChange(newPage) {
|
||||||
|
this.currentPage = newPage; // 更新当前页码
|
||||||
|
}
|
||||||
|
|
||||||
|
const addData = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
address: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
sex: 1,
|
||||||
|
age: ''
|
||||||
|
})
|
||||||
|
function showAddDialog(){
|
||||||
|
addDialog.value = true
|
||||||
|
|
||||||
|
}
|
||||||
|
function addOk () {
|
||||||
|
if (sex.value === '男') {
|
||||||
|
addData.sex = 1
|
||||||
|
}else {
|
||||||
|
addData.sex = 0
|
||||||
|
}
|
||||||
|
requests.userAdd(addData, token).then((res)=>{
|
||||||
|
if (res.data.code===200) {
|
||||||
|
message.success('新增成功')
|
||||||
|
getAll()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
message.error('新增失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function addCancel () {
|
||||||
|
message.info('取消新增')
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteId = ref(0)
|
||||||
|
function showDeleteDialog(index, row){
|
||||||
|
deleteDialog.value = true
|
||||||
|
deleteId.value = row.id
|
||||||
|
}
|
||||||
|
function deleteOk(){
|
||||||
|
deleteDialog.value = false;
|
||||||
|
console.log(deleteId.value)
|
||||||
|
requests.userDelete(deleteId.value, token).then((res)=>{
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
message.success('删除成功')
|
||||||
|
}else {
|
||||||
|
message.error('删除失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
function deleteCancel(){
|
||||||
|
deleteDialog.value = false;
|
||||||
|
message.info('取消删除')
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEditDialog(index, row){
|
||||||
|
editDialog.value = true
|
||||||
|
updateData.id = row.id
|
||||||
|
updateData.username = row.username
|
||||||
|
updateData.address = row.address
|
||||||
|
updateData.phone = row.phone
|
||||||
|
updateData.email = row.email
|
||||||
|
updateData.age = row.age
|
||||||
|
updateData.signature = row.signature
|
||||||
|
updateData.sex = row.sex
|
||||||
|
updateData.avatar = row.avatar
|
||||||
|
updateData.nickname = row.nickname
|
||||||
|
updateData.description = row.description
|
||||||
|
if (row.sex === 1) {
|
||||||
|
sex.value = '男'
|
||||||
|
}else {
|
||||||
|
sex.value = '女'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function editOk(){
|
||||||
|
loadingTable.value = true
|
||||||
|
editDialog.value = false;
|
||||||
|
requests.userEdit(updateData,token).then((res)=>{
|
||||||
|
console.log("editResult:",res)
|
||||||
|
console.log("updateData:",updateData)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
getAll()
|
||||||
|
message.success('修改成功')
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
loadingTable.value = false
|
||||||
|
message.error('修改失败')
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
function editCancel(){
|
||||||
|
editDialog.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
handlePageChange(newPage) {
|
|
||||||
this.currentPage = newPage; // 更新当前页码
|
|
||||||
},
|
|
||||||
ok () {
|
|
||||||
this.$Message.info('新增成功');
|
|
||||||
},
|
|
||||||
cancel () {
|
|
||||||
this.$Message.info('取消新增');
|
|
||||||
},
|
|
||||||
deleteOk(){
|
|
||||||
this.deleteDialog = false;
|
|
||||||
},
|
|
||||||
deleteCancel(){
|
|
||||||
this.deleteDialog = false;
|
|
||||||
},
|
|
||||||
editOk(){
|
|
||||||
this.editDialog = false;
|
|
||||||
},
|
|
||||||
editCancel(){
|
|
||||||
this.editDialog = false;
|
|
||||||
|
|
||||||
},
|
const searchData = reactive({
|
||||||
|
username: '',
|
||||||
|
phone: ''
|
||||||
|
})
|
||||||
|
function searchUser(){
|
||||||
|
loadingTable.value = true
|
||||||
|
if (searchData.username === '' && searchData.phone === '') {
|
||||||
|
getAll()
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
requests.userCurrent(searchData,token).then((res)=>{
|
||||||
|
loadingTable.value = false
|
||||||
|
console.log("searchResult:",res)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
states.data = []
|
||||||
|
states.data[0] = res.data.data.user
|
||||||
|
message.success('查询成功')
|
||||||
|
console.log(loadingTable.value)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
message.error(res.data.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user