Online supermarket management system

Language 2023-09-09 18:21:45 views: null

Supermarket management system

Function

user

  • Modify user information-> users [usr]
  • buy goods
    • Manage shopping cart -> cart [ cart ]
      • Adding goods
      • Modify product
      • Delete product
      • Clear shopping cart
    • Shopping cart payment-> cart [item], records [record]
    • Product payment-> records [record]

administrator

  • Manage user information -> users [user]
    • View user information.
    • Modify user information
  • Manage goods-> goods [good]
    • Adding goods
    • Modify product
    • Delete product
  • Manage transaction records-> records [record]

supermarket system

  • Transaction records-> records [record]
  • Product reviews-> comments [comment]
  • Announcements
  • Advertising recommendations

database

  • user「user」

    • id（ID）
    • name (username)
    • password
    • phone (contact number)
    • identity (identity authority)

  • good "goods"

    • id (product ID)
    • goodName (product name)
    • price (product price)
    • goodNum (item quantity)
    • type (item type)
    • avatar (product image)
    • info (description)

  • cart「Shopping cart」

    • goodid (product ID)
    • price (product price)
    • num (purchase quantity)
    • userID (shopper ID)

  • record "Transaction record"

    • id (transaction ID)
    • goodId (product ID)
    • goodName (product name)
    • goodPrice (product price)
    • num (purchase quantity)
    • date (date of purchase)
    • userId (buyer ID)

  • comment「Comment」

    • id (review ID)
    • goodId (review product ID)
    • userId (reviewer ID)
    • quality (quality score)
    • price (price rating)
    • server (service rating)
    • info (review information)

Overall structure

Product management

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>

Transaction Record

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>

User Management

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>

Guess you like

Origin blog.csdn.net/Lenhart001/article/details/131083002
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com