超市管理系统
功能
用户
- 修改用户信息 -> users [usr]
- 购买商品
- 管理购物车 -> cart [ cart ]
- 添加商品
- 修改商品
- 删除商品
- 清空购物车
- 购物车支付 -> cart [item] ,records [record]
- 商品支付 -> records [record]
- 管理购物车 -> cart [ cart ]
管理员
- 管理用户信息 -> users [user]
- 查看用户信息。
- 修改用户信息
- 管理商品 -> goods [good]
- 添加商品
- 修改商品
- 删除商品
- 管理交易记录 -> records [record]
超市系统
- 交易记录 -> records [record]
- 商品点评 -> comments [comment]
- 公告通知
- 广告推荐
数据库
-
user「用户」
- id(ID)
- name(用户名)
- password(密码)
- phone(联系电话)
- identity(身份权限)
-
good「商品」
- id(商品ID)
- goodName(商品名称)
- price(商品价格)
- goodNum(商品数量)
- type(商品类型)
- avatar(商品图片)
- info(描述)
-
cart「购物车」
- goodid(商品ID)
- price(商品价格)
- num(购买数量)
- userID(购物者ID)
-
record「交易记录」
- id(交易ID)
- goodId(商品ID)
- goodName(商品名称)
- goodPrice(商品价格)
- num(购买数量)
- date(购买日期)
- userId(购买者ID)
-
comment「点评」
- id(点评ID)
- goodId(点评商品ID)
- userId(点评人ID)
- quality(质量评分)
- price(价格评分)
- server(服务评分)
- info(点评信息)
整体架构
商品管理
GoodManage.vue
<template>
<div class="tilt-in-fwd-tr">
<div style="width: 1000px; margin: 10px; opacity: 0.9">
<!-- 新增/查询 -->
<div style="display: flex" >
<div style="margin-bottom: 10px; width: 80px">
<el-button type="primary" @click="addGood">新增</el-button>
</div>
<div style="margin-bottom: 10px; width: 450px">
<el-input v-model="search.goodName" placeholder="请输入关键字(ID)" style="width: 80%" clearable/>
<el-button type="primary" style="margin-left: 5px" @click="getGood">查询</el-button>
</div>
</div>
<!-- 表格展示 -->
<div style="background-color: #8c939d">
<el-table :data="goodList" border stripe v-loading="loading" style="background-color: #29dbbc">
<el-table-column prop="id" label="ID" width="180"/>
<el-table-column prop="goodName" label="商品名称" />
<el-table-column prop="price" label="商品价格" />
<el-table-column prop="goodNum" label="商品数量" width="150"/>
<el-table-column prop="avatar" label="商品头像" >
<template v-slot:default="scope">
<el-image :src="scope.row.avatar" :fit="'contain'"/>
</template>
</el-table-column>
<el-table-column prop="type" label="商品类型" />
<!-- <el-table-column prop="info" label="详情" />-->
<el-table-column fixed="right" label="操作" width="200px">
<template #default="scope">
<el-button type="search" size="small" @click="information(scope.row)" >详情</el-button>
<el-button type="primary" size="small" @click="updateGood(scope.row)" >更新</el-button>
<el-button type="danger" size="small" @click="removeGood(scope.row.id)" >删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页插件 -->
<div style="margin:10px; opacity: 0.5">
<el-pagination
v-model:currentPage="search.pageNum"
v-model:page-size="search.pageSize"
:current-page="search.pageNum"
:page-sizes="[5,10,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
<!-- 添加新成员 对话框/add表单 -->
<el-dialog v-model="dialogVisibleAdd" title="添加新商品" width="30%">
<el-form :model="addForm" label-width="120px">
<el-form-item label="ID">
<el-input v-model="addForm.id" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="addForm.goodName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="商品价格">
<el-input-number v-model="addForm.price" :precision="2" :step="0.1" :max="100000" />
</el-form-item>
<el-form-item label="商品数量">
<el-input-number v-model="addForm.goodNum" :step="1" />
</el-form-item>
<el-form-item label="商品类型">
<el-radio v-model="addForm.type" label="A类">A类</el-radio>
<el-radio v-model="addForm.type" label="B类">B类</el-radio>
</el-form-item>
<el-form-item label="商品图片">
<el-input v-model="addForm.avatar" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="详情">
<el-input v-model="addForm.info" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisibleAdd=false">取消</el-button>
<el-button type="primary" @click="confirmAdd">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 修改成员信息 对话框/add表单 -->
<el-dialog v-model="dialogVisibleUpdate" title="更新商品" width="30%">
<el-form :model="addForm" label-width="120px">
<el-form-item label="ID">
<el-input v-model="addForm.id" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="addForm.goodName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="商品价格">
<el-input-number v-model="addForm.price" :precision="2" :step="0.1" :max="10" />
</el-form-item>
<el-form-item label="商品数量">
<el-input-number v-model="addForm.goodNum" :step="1" />
</el-form-item>
<el-form-item label="商品类型">
<el-radio v-model="addForm.type" label="A类">A类</el-radio>
<el-radio v-model="addForm.type" label="B类">B类</el-radio>
</el-form-item>
<el-form-item label="商品图片">
<el-input v-model="addForm.avatar" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="详情">
<el-input v-model="addForm.info" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelUpdate">取消</el-button>
<el-button type="primary" @click="confirmUpdate">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 用户详情 对话框/inf表单 -->
<el-dialog v-model="inf" title="用户详情" width="50%">
<h1>施工中……</h1>
<h3>商品ID:{
{ this.good.id }}</h3>
<h3>商品名称:{
{ this.good.goodName }}</h3>
<h3>商品价格:{
{ this.good.price }}</h3>
<h3>商品数量:{
{ this.good.goodNum }}</h3>
<h3>商品类型:{
{ this.good.type }}</h3>
<h3>商品图片:{
{ this.good.avatar }}</h3>
<h3>商品详情:{
{ this.good.inf }}</h3>
</el-dialog>
</template>
<script>
import {
ElMessage, ElMessageBox} from "element-plus";
export default {
name: "GoodsManage",
// 数据:
data(){
return{
loading:true,
search:{
id:null,
goodName:null,
pageNum:1,
pageSize:5
},
total:0,
good:'',
goodList:[],
dialogVisibleAdd:false,
dialogVisibleUpdate:false,
addForm:{
id:'',
goodName:'',
price:null,
goodNum:null,
type:'',
avatar: '',
info:'',
},
inf:false,
}
},
// 初始化:
mounted(){
this.getGood()
},
// 方法:
methods:{
// 刷新addForm表单
fresh(){
this.addForm.id = ''
this.addForm.goodName = ''
this.addForm.price = null
this.addForm.goodNum = null
this.addForm.type = ''
this.addForm.avatar = ''
this.addForm.info = ''
},
// 查询用户
getGood(){
console.log(this.search)
this.loading=true
this.$http({
method:'post',
url:'/goods/getGood',
data:this.search,
}).then(({
data}) => {
this.goodList = data.list
this.total = this.goodList.length
console.log(data)
console.log(this.goodList)
this.loading=false
})
},
// 添加用户
addGood(){
this.fresh()
this.dialogVisibleAdd = true
},
confirmAdd(){
console.log(1)
this.$http({
method:'post',
url:'/goods/add',
data:this.addForm
}).then(({
data}) => {
console.log(2)
if (data.code === 200){
ElMessage({
message:'添加成功',
type:'success'
})
this.getGood();
this.dialogVisibleAdd=false
this.fresh();
}
})
},
// 删除用户数据
removeGood(id){
ElMessageBox.confirm(
'该操作不可撤销',
'警告',
{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning',
}
).then(() => {
this.$http({
method:'delete',
url:'/goods/remove?id=' + id,
}).then(res => {
this.getGood()
ElMessage({
message:'删除成功',
type:'success',
})
})
}).catch(() => {
ElMessage({
message:'删除已取消',
typeL:'info',
})
this.fresh()
this.getGood()
})
},
// 更新用户信息
updateGood(row){
this.addForm=row
this.dialogVisibleUpdate = true
},
cancelUpdate(){
this.dialogVisibleUpdate=false
this.getGood()
},
confirmUpdate(){
this.$http({
method:'post',
url:'/goods/update',
data:this.addForm
}).then(({
data}) => {
if(data.code === 200){
ElMessage({
message:'更新成功',
type:'success'
})
}
this.getGood();
this.dialogVisibleUpdate=false
this.fresh();
})
},
// 详情
information(info){
this.good=info
this.inf=true
},
// 分页工具
handleSizeChange(pageSize){
this.search.pageSize = pageSize
this.search.pageNum = 1;
this.getGood()
},
handleCurrentChange(pageNum){
this.search.pageNum = pageNum
this.getGood()
}
}
}
</script>
<style scoped>
.tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-6-10 0:47:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
@keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
</style>
交易记录
TradeManage.vue
<template>
<div class="tilt-in-fwd-tr">
<div style="width: 1000px; margin: 10px; opacity: 0.9">
<!-- 新增/查询 -->
<div style="display: flex" >
<div style="margin: 10px 0; width: 450px">
<el-input v-model="search.goodName" placeholder="请输入关键字(ID)" style="width: 80%" clearable/>
<el-button type="primary" style="margin-left: 5px" @click="getGood">查询</el-button>
</div>
</div>
<!-- 表格展示 -->
<div>
<el-table :data="goodList" border stripe v-loading="loading">
<el-table-column prop="id" label="ID" width="180"/>
<el-table-column prop="goodName" label="商品名称" />
<el-table-column prop="type" label="商品类型" width="100" />
<el-table-column prop="date" label="购买日期" width="150" >
<template v-slot:default="scope">
<el-date-picker v-model="scope.row.date" type="date" format="YYYY/MM/DD" disabled style="width: 125px"/>
</template>
</el-table-column>
<el-table-column prop="cost" label="支付金额" width="125" />
<el-table-column prop="state" label="状态" width="100" />
<el-table-column fixed="right" label="操作" width="200px">
<template #default="scope">
<el-button type="search" size="small" @click="information(scope.row)" >详情</el-button>
<el-button type="primary" size="small" @click="updateGood(scope.row)" >更新</el-button>
<el-button type="danger" size="small" @click="removeGood(scope.row.id)" disabled >撤销</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页插件 -->
<div style="margin:10px; opacity: 0.5">
<el-pagination
v-model:currentPage="this.search.pageNum"
v-model:page-size="this.search.pageSize"
:current-page="this.search.pageNum"
:page-sizes="[5,10,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
<!-- 修改成员信息 对话框/add表单 -->
<el-dialog v-model="dialogVisibleUpdate" title="更新状态" width="35%">
<el-form :model="addForm" label-width="120px">
<h4>商品ID:{
{ this.addForm.id }}</h4>
<h4>商品名称:{
{ this.addForm.goodName }}</h4>
<h4>商品价格:{
{ this.addForm.price }}</h4>
<h4>商品数量:{
{ this.addForm.goodNum }}</h4>
<el-form-item label="商品状态">
<el-radio v-model="addForm.state" label="未发货">未发货</el-radio>
<el-radio v-model="addForm.state" label="已发货">已发货</el-radio>
<el-radio v-model="addForm.state" label="完成交易">完成交易</el-radio>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelUpdate">取消</el-button>
<el-button type="primary" @click="confirmUpdate">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 用户详情 对话框/inf表单 -->
<el-dialog v-model="inf" title="交易详情" width="50%">
<h3>商品ID:{
{ this.good.id }}</h3>
<h3>商品名称:{
{ this.good.goodName }}</h3>
<h3>商品价格:{
{ this.good.price }}</h3>
<h3>商品数量:{
{ this.good.goodNum }}</h3>
<h3>商品类型:{
{ this.good.type }}</h3>
<h3>商品图片:{
{ this.good.avatar }}</h3>
<h3>商品详情:{
{ this.good.inf }}</h3>
</el-dialog>
</template>
<script>
import {
ElMessage, ElMessageBox} from "element-plus";
export default {
name: "TradeManage",
// 数据:
data(){
return{
loading:true,
search:{
id:null,
goodName:null,
pageNum:1,
pageSize:10
},
total:0,
good:'',
goodList:[],
dialogVisibleAdd:false,
dialogVisibleUpdate:false,
addForm:{
id:'',
goodName:'',
price:null,
goodNum:null,
type:'',
avatar: '',
info:'',
},
inf:false,
}
},
// 初始化:
mounted(){
this.getGood()
},
// 方法:
methods:{
// 刷新addForm表单
fresh(){
this.addForm.id = ''
this.addForm.goodName = ''
this.addForm.price = null
this.addForm.goodNum = null
this.addForm.type = ''
this.addForm.avatar = ''
this.addForm.info = ''
},
// 查询用户
getGood(){
console.log(this.search)
this.loading=true
this.$http({
method:'post',
url:'/records/getRecord',
data:this.search,
}).then(({
data}) => {
this.goodList = data.list
this.total = this.goodList.length
console.log(data)
console.log(this.goodList)
this.loading=false
})
},
// 添加用户
addGood(){
this.fresh()
this.dialogVisibleAdd = true
},
confirmAdd(){
console.log(1)
this.$http({
method:'post',
url:'/records/add',
data:this.addForm
}).then(({
data}) => {
console.log(2)
if (data.code === 200){
ElMessage({
message:'添加成功',
type:'success'
})
this.getGood();
this.dialogVisibleAdd=false
this.fresh();
}
})
},
// 删除用户数据
removeGood(id){
ElMessageBox.confirm(
'该操作不可撤销',
'警告',
{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning',
}
).then(() => {
this.$http({
method:'delete',
url:'/records/remove?id=' + id,
}).then(res => {
this.getGood()
ElMessage({
message:'删除成功',
type:'success',
})
})
}).catch(() => {
ElMessage({
message:'删除已取消',
typeL:'info',
})
this.fresh()
this.getGood()
})
},
// 更新用户信息
updateGood(row){
this.addForm=row
this.dialogVisibleUpdate = true
},
cancelUpdate(){
this.dialogVisibleUpdate=false
this.getGood()
},
confirmUpdate(){
this.$http({
method:'post',
url:'/records/update',
data:this.addForm
}).then(({
data}) => {
if(data.code === 200){
ElMessage({
message:'更新成功',
type:'success'
})
}
this.getGood();
this.dialogVisibleUpdate=false
this.fresh();
})
},
// 详情
information(info){
this.good=info
this.inf=true
},
// 分页工具
handleSizeChange(pageSize){
this.search.pageSize = pageSize
this.search.pageNum = 1;
this.getGood()
},
handleCurrentChange(pageNum){
this.search.pageNum = pageNum
this.getGood()
}
}
}
</script>
<style scoped>
.tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-6-10 0:47:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
@keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
</style>
用户管理
UserManage
<template>
<div class="tilt-in-fwd-tr">
<div style="width: 1000px; margin: 10px; opacity: 0.9">
<!-- 新增/查询 -->
<div style="display: flex" >
<div style="margin: 10px 0; width: 80px">
<el-button type="primary" @click="addUser">新增</el-button>
</div>
<div style="margin: 10px 0; width: 450px">
<el-input v-model="search.name" placeholder="请输入关键字(用户名)" style="width: 80%" clearable/>
<el-button type="primary" style="margin-left: 5px" @click="getUser">查询</el-button>
</div>
</div>
<!-- 表格展示 -->
<div>
<el-table :data="userList" border stripe v-loading="loading">
<el-table-column prop="id" label="ID" width="150"/>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="password" label="密码" />
<el-table-column prop="phone" label="联系电话" width="150"/>
<el-table-column
prop="identity"
label="身份"
width="150"
filter-plAcement="bottom-end"
:default-sort="{ prop: 'identity', order: 'descending' }"
>
<template #default="scope">
<el-tag
:type="scope.row.identity === '管理员' ? 'primary' : 'info'"
disable-transitions>
{
{ scope.row.identity }}
</el-tag>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200px">
<template #default="scope">
<el-button type="search" size="small" @click="information(scope.row)" disabled>详情</el-button>
<el-button type="primary" size="small" @click="updateUser(scope.row)" >更新</el-button>
<el-button type="danger" size="small" @click="removeUser(scope.row.id)" >删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页插件 -->
<div style="margin:10px; opacity: 0.5">
<el-pagination
v-model:currentPage="search.pageNum"
v-model:page-size="search.pageSize"
:current-page="search.pageNum"
:page-sizes="[5,10,20]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</div>
<!-- 添加新成员 对话框/add表单 -->
<el-dialog v-model="dialogVisibleAdd" title="添加新成员" width="30%">
<el-form :model="addForm" label-width="120px">
<el-form-item label="ID">
<el-input v-model="addForm.id" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="addForm.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="addForm.password" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="身份">
<el-radio v-model="addForm.identity" label="管理员">管理员</el-radio>
<el-radio v-model="addForm.identity" label="普通用户">普通用户</el-radio>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="addForm.phone" ></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisibleAdd=false">取消</el-button>
<el-button type="primary" @click="confirmAdd">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 修改成员信息 对话框/add表单 -->
<el-dialog v-model="dialogVisibleUpdate" title="修改成员信息" width="30%" close-on-press-escape>
<el-form :model="addForm" label-width="120px">
<el-form-item label="ID">
<el-input v-model="addForm.id" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="addForm.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="addForm.password" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="身份">
<el-radio v-model="addForm.identity" label="管理员">管理员</el-radio>
<el-radio v-model="addForm.identity" label="普通用户">普通用户</el-radio>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="addForm.phone" ></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelUpdate">取消</el-button>
<el-button type="primary" @click="confirmUpdate">确认</el-button>
</span>
</template>
</el-dialog>
<!-- 用户详情 对话框/inf表单 -->
<el-dialog v-model="inf" title="用户详情" width="50%">
<h1>施工中……</h1>
</el-dialog>
</template>
<script>
import {
ElMessage, ElMessageBox} from "element-plus";
export default {
name: "UserManage",
// 数据:
data(){
return{
loading:true,
search:{
id:null,
name:null,
pageNum:1,
pageSize:10
},
total:0,
user:'',
userList:[],
dialogVisibleAdd:false,
dialogVisibleUpdate:false,
addForm:{
id:'',
name:'',
password:'123456',
identity:'',
phone:'',
},
inf:false,
}
},
// 初始化:
mounted(){
this.getUser()
},
// 方法:
methods:{
// 刷新addForm表单
fresh(){
this.addForm.id = ''
this.addForm.name = ''
this.addForm.password = '123456'
this.addForm.department = ''
this.addForm.identity = ''
this.addForm.phone = ''
},
// 查询用户
getUser(){
console.log(this.search)
this.loading=true
this.$http({
method:'post',
url:'/user/getUser',
data:this.search,
}).then(({
data}) => {
console.log('##############')
console.log(data.list.length)
console.log('##############')
this.userList = data.list
this.total = this.userList.length
this.loading=false
})
},
// 添加用户
addUser(){
this.fresh()
this.dialogVisibleAdd = true
},
confirmAdd(){
console.log(1)
this.$http({
method:'post',
url:'/user/add',
data:this.addForm
}).then(({
data}) => {
console.log(2)
if (data.code === 200){
ElMessage({
message:'添加成功',
type:'success'
})
this.getUser();
this.dialogVisibleAdd=false
this.fresh();
}
})
},
// 删除用户数据
removeUser(id){
ElMessageBox.confirm(
'该操作不可撤销',
'警告',
{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning',
}
).then(() => {
this.$http({
method:'delete',
url:'/user/remove?id=' + id,
}).then(res => {
this.getUser()
ElMessage({
message:'删除成功',
type:'success',
})
})
}).catch(() => {
ElMessage({
message:'删除已取消',
typeL:'info',
})
this.fresh()
this.getUser()
})
},
// 更新用户信息
updateUser(row){
this.addForm=row
this.dialogVisibleUpdate = true
},
cancelUpdate(){
this.dialogVisibleUpdate=false
this.getUser()
},
confirmUpdate(){
this.$http({
method:'post',
url:'/user/update',
data:this.addForm
}).then(({
data}) => {
if(data.code === 200){
ElMessage({
message:'更新成功',
type:'success'
})
}
this.getUser();
this.dialogVisibleUpdate=false
this.fresh();
})
},
// 详情
information(info){
this.user=info
this.inf=true
},
// 分页工具
handleSizeChange(pageSize){
this.search.pageSize = pageSize
this.search.pageNum = 1;
this.getUser()
},
handleCurrentChange(pageNum){
this.search.pageNum = pageNum
this.getUser()
}
}
}
</script>
<style scoped>
.tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-6-10 0:47:25
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
@keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
</style>