网上超市管理系统

超市管理系统

功能

用户

• 修改用户信息 -> users [usr]
• 购买商品
  • 管理购物车 -> cart [ cart ]
    • 添加商品
    • 修改商品
    • 删除商品
    • 清空购物车
  • 购物车支付 -> cart [item] ，records [record]
  • 商品支付 -> records [record]

管理员

• 管理用户信息 -> 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 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>

  
  <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>

  
  <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>

  
  <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>

  
  <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>

  
  <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>

  
  <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>

  
  <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>

  
  <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>