You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
10 KiB
396 lines
10 KiB
<template>
|
|
<div class="tabs">
|
|
</div>
|
|
<div class="main">
|
|
<div class="container system-container panel">
|
|
<div class="box">
|
|
|
|
<div class="left">
|
|
<h1>用户姓名：</h1>
|
|
<input type="text" v-model="state1" class="textInput"/>
|
|
<div><img src="/images/search.png" @click="onSearch"></div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<span @click="onAddClick">添加新用户</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tableMessage">
|
|
<el-table :data="tableData" border style="color: black;">
|
|
<el-table-column type="index" label="序号" align="center" width="100px"/>
|
|
<el-table-column prop="userName" label="用户姓名" align="center"/>
|
|
<el-table-column prop="userAccountNumber" label="用户账号" align="center"/>
|
|
<el-table-column prop="userPhone" label="电话" align="center"/>
|
|
<el-table-column prop="userEmail" label="邮箱" align="center"/>
|
|
<el-table-column prop="operation" label="操作" align="center">
|
|
<template #default="scope">
|
|
<div class="operation">
|
|
<span @click.prevent="onAmendClick(scope.$index, tableData)">修改信息</span>
|
|
<!--删除-->
|
|
<el-popconfirm
|
|
confirm-button-text="确认"
|
|
cancel-button-text="取消"
|
|
@confirm="confirmEvent(scope.$index, tableData)"
|
|
title="确认删除?">
|
|
<template #reference>
|
|
<span>删除用户</span>
|
|
</template>
|
|
</el-popconfirm>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!---分页-->
|
|
<div class="pagination">
|
|
<el-pagination background
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
hide-on-single-page="hide-on-single-page"
|
|
@prev-click="prev"
|
|
@next-click="next"
|
|
@current-change="changEnum">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--弹出框--->
|
|
<el-dialog v-model="dialogFormVisible" :title="title" center=center width="900px" top="17%">
|
|
<el-form :model="form">
|
|
<el-form-item label="用户账号：" :label-width="formLabelWidth">
|
|
<el-input v-model="form.userAccountNumber" autocomplete="off" style="width: 260px"
|
|
:disabled="isDisabled"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户密码：" :label-width="formLabelWidth">
|
|
<el-input v-model="form.userPassword" autocomplete="off" style="width: 260px" type="password"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话：" :label-width="formLabelWidth">
|
|
<el-input v-model="form.userPhone" autocomplete="off" style="width: 260px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱：" :label-width="formLabelWidth">
|
|
<el-input v-model="form.userEmail" autocomplete="off" style="width: 260px"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户姓名：" :label-width="formLabelWidth">
|
|
<el-input v-model="form.userName" autocomplete="off" style="width: 260px"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button type="primary" @click="submit" style="color:#FFFFFF;">保存</el-button>
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import {onMounted, reactive, toRefs} from 'vue';
|
|
import {post} from "../uilts/axios";
|
|
import {ElMessage} from 'element-plus'
|
|
import {format} from '../uilts/String';
|
|
|
|
export default {
|
|
name: 'SystemManagement',
|
|
setup() {
|
|
let option = reactive({
|
|
state1: '',
|
|
dialogFormVisible: false,
|
|
isDisabled: false,
|
|
title: '',
|
|
formLabelWidth: "100px",
|
|
total: null,
|
|
current: 1,
|
|
size: 10,
|
|
form: {
|
|
userName: '',
|
|
userAccountNumber: '',
|
|
userPhone: '',
|
|
userEmail: '',
|
|
userPassword: ''
|
|
},
|
|
tableData: []
|
|
})
|
|
|
|
onMounted(() => {
|
|
findAllUser();
|
|
})
|
|
|
|
const findAllUser = () => {
|
|
return post("user/findUserByUserName", {
|
|
userName: option.state1.trim(),
|
|
current: option.current,
|
|
size: option.size
|
|
}).then((res: any) => {
|
|
option.tableData = res.data.records;
|
|
option.total = res.data.total;
|
|
})
|
|
}
|
|
|
|
//添加用户
|
|
const onAddClick = () => {
|
|
option.isDisabled = false
|
|
option.title = '添加用户'
|
|
option.dialogFormVisible = true
|
|
option.form = {
|
|
userName: '',
|
|
userAccountNumber: '',
|
|
userPhone: '',
|
|
userEmail: '',
|
|
userPassword: ''
|
|
}
|
|
}
|
|
|
|
//修改用户
|
|
const onAmendClick = (index, rows) => {
|
|
option.isDisabled = true
|
|
option.title = '修改信息'
|
|
option.dialogFormVisible = true
|
|
option.form = JSON.parse(JSON.stringify(rows[index]))
|
|
}
|
|
|
|
//删除用户
|
|
const confirmEvent = (index, rows) => {
|
|
post('user/delUser', {
|
|
userAccountNumber: rows[index].userAccountNumber
|
|
}).then((res: any) => {
|
|
if (res.error != 0) {
|
|
ElMessage.error({
|
|
message: "删除失败",
|
|
type: 'error'
|
|
});
|
|
return;
|
|
} else {
|
|
findAllUser()
|
|
ElMessage.success({
|
|
message: "删除成功",
|
|
type: 'success'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
//图片搜索
|
|
const onSearch = () => {
|
|
post("user/findUserByUserName", {
|
|
current: option.current,
|
|
size: option.size,
|
|
userName: option.state1
|
|
}).then((res: any) => {
|
|
option.tableData = res.data.records;
|
|
option.total = res.data.total;
|
|
})
|
|
}
|
|
|
|
const prev = (e) => {
|
|
option.current = e
|
|
findAllUser()
|
|
}
|
|
|
|
const next = (e) => {
|
|
option.current = e
|
|
findAllUser()
|
|
}
|
|
|
|
const changEnum = (e) => {
|
|
option.current = e;
|
|
findAllUser()
|
|
}
|
|
|
|
const verify = () => {
|
|
let errors = [];
|
|
if (option.form.userAccountNumber == null || option.form.userAccountNumber.trim() == "") {
|
|
errors.push("用户账号");
|
|
}
|
|
if (option.form.userPassword == null || option.form.userPassword.trim() == "") {
|
|
errors.push("用户密码");
|
|
}
|
|
if (option.form.userName == null || option.form.userName.trim() == "") {
|
|
errors.push("用户姓名");
|
|
}
|
|
if (errors.length > 0) {
|
|
ElMessage.error({
|
|
message: format("{0}不能为空", errors.join(", ")),
|
|
type: 'error'
|
|
});
|
|
}
|
|
return errors.length > 0;
|
|
}
|
|
|
|
const submit = () => {
|
|
if (verify()) return;
|
|
if (option.title === '修改信息') {
|
|
post("user/updateUser", option.form, "application/json").then((res: any) => {
|
|
option.dialogFormVisible = false
|
|
if (res.error != 0) {
|
|
ElMessage.error({
|
|
message: "修改失败",
|
|
type: 'error'
|
|
});
|
|
return;
|
|
} else {
|
|
findAllUser()
|
|
ElMessage.success({
|
|
message: "修改成功",
|
|
type: 'success'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
if (option.title === '添加用户') {
|
|
if (verify()) return;
|
|
post("user/insertUser", option.form, "application/json").then((res: any) => {
|
|
option.dialogFormVisible = false
|
|
if (res.error != 0) {
|
|
ElMessage.error({
|
|
message: "修改失败",
|
|
type: 'error'
|
|
});
|
|
return;
|
|
} else {
|
|
findAllUser()
|
|
ElMessage.success({
|
|
message: "修改成功",
|
|
type: 'success'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
return {
|
|
...toRefs(option),
|
|
onAddClick,
|
|
onAmendClick,
|
|
onSearch,
|
|
submit,
|
|
findAllUser,
|
|
confirmEvent,
|
|
prev,
|
|
next,
|
|
changEnum
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.system-container {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
|
|
.pagination {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.box {
|
|
padding: 28px 20px 0px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.textInput {
|
|
width: 305px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-size: 20px;
|
|
text-indent: 10px;
|
|
}
|
|
|
|
h1 {
|
|
width: 100px;
|
|
height: 26px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
color: #000000;
|
|
opacity: 1;
|
|
}
|
|
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-left: 10px;
|
|
padding-top: 4px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 100px;
|
|
height: 26px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
color: #498DF0;
|
|
opacity: 1;
|
|
|
|
span {
|
|
width: 96px;
|
|
height: 0px;
|
|
border-bottom: 1px solid #498DF0;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tableMessage {
|
|
padding: 36px 20px 20px;
|
|
font-size: 18px;
|
|
|
|
.operation {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
span {
|
|
border-bottom: 1px solid #000000;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
}
|
|
|
|
}
|
|
|
|
:deep(.el-table thead) {
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item__label) {
|
|
text-align: left;
|
|
color: #000000;
|
|
}
|
|
|
|
:deep(.el-form) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
width: 90%;
|
|
//align-content: flex-start;
|
|
}
|
|
|
|
:deep(.el-button) {
|
|
width: 159px;
|
|
height: 44px;
|
|
opacity: 1;
|
|
border-radius: 4px;
|
|
border: 1px solid #498DF0;
|
|
font-weight: 400;
|
|
color: #498DF0;
|
|
}
|
|
</style>
|
|
|
|
|