2023-12-8

<template>
  <el-container style="height: 100%;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%;">
      <el-menu :default-openeds="['1', '3']"
      style="min-height: 100%;overflow-x: hidden;"
      background-color="rgb(48,68,86)"
      text-color="#fff" 
      >
      <div>
        <b style="color: white;height: 60px;line-height: 60px;position: relative; margin-right: 50px;">后台管理系统</b>
      </div>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container style="height: 100%;">
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main style="height: 100%;">
        <div><el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-input v-model="username" placeholder="请输入姓名" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-input v-model="email" placeholder="请输入邮箱" suffix-icon="el-icon-message" style="margin-right: 10px;"></el-input>
          <el-input v-model="address" placeholder="请输入地址" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-button @click="search(this)">搜索</el-button>
          <el-button type="warning" @click="reset(this)">重置</el-button>
        </div>
         
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="warning">修改 <i class="el-icon-circle-check"></i></el-button>
          <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
          <el-button type="success">导入 <i class="el-icon-download"></i></el-button>
          <el-button type="success">导出 <i class="el-icon-upload2"></i></el-button>
        </div>

        
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="username" label="姓名" ></el-table-column>
          <el-table-column prop="nickname" label="昵称" ></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column prop="email" label="电子邮箱"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column prop="update_time" label="更改时间"></el-table-column>
          <el-table-column>
            <template>
              &nbsp;&nbsp;
              <el-button type="warning" round>编辑 <i class="el-icon-edit"></i></el-button>
              <el-button type="danger" round>删除 <i class="el-icon-error"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="pages"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 表单弹窗 -->
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form" label-width="70px">
    <el-form-item label="用户名" >
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="昵称" >
      <el-input v-model="form.nickname" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" >
      <el-input v-model="form.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" >
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="电话" >
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>
  
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {fenYe,searchBySome} from "@/api/fenye"

export default {
  data() {
    return {
      pages:[4,6,8,10],
      tableData: null,
      total:0,
      pageIndex:1,
      pageSize:4,
      username:"",
      email:"",
      address:"",
      dialogFormVisible:false,
      form:{},
      action:"add"
    }
  },
  created(){
    this.loadMessage()
    this.pageSize=this.pages[0]
  },
  methods:{
    handleSizeChange(changeSize){
      console.log(changeSize)
      this.pageSize=changeSize
      this.loadMessage()
    },
    handleCurrentChange(chageIndex){
      console.log(chageIndex)
      this.pageIndex=chageIndex
      this.loadMessage()
    },
    async loadMessage(){
      const res=(await fenYe(this.pageIndex,this.pageSize)).data
      this.tableData=res.findUser
      this.total=res.total
  },
  async search(){
    const res=await searchBySome(this.username,this.email,this.address)
    console.log(res)
    this.tableData=res.findUser
    this.total=res.total
    this.username=""
    this.email=""
    this.address=""
  },
  async reset(){
    this.username=""
    this.email=""
    this.address=""
    this.loadMessage()
  },
  handleAdd(){
    this.dialogFormVisible=true
    this.form={}
  }
  },
  
};
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>