erp/resources/frontend/src/views/users/users.vue

<template>
  <div class="conent">
    <!-- 新增按钮 -->
    <div class="btn">
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <!-- 点击新增弹出表单 -->
    <div class="from">
      <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
        <div>
          <el-form label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="from.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="from.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="from.password_confirmation"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="from.role_name"></el-input>
            </el-form-item>
            <div class="from-btn">
              <el-button type="danger" @click="dialogVisible = false"
                >取消</el-button
              >
              <el-button @click="onSubmit">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 点击编辑弹出表单信息 -->
    <div class="edit_from">
      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
        <div>
          <el-form label-width="80px">
            <el-form-item label="ID">
              <el-input v-model="edit_from.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="edit_from.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="edit_from.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="edit_from.role_name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="edit_from.password"></el-input>
            </el-form-item>
            <el-form-item label="密码确认">
              <el-input v-model="edit_from.password_confirmation"></el-input>
            </el-form-item>
            <div class="from-btn">
              <el-button type="danger" @click="editVisible = false"
                >取消</el-button
              >
              <el-button @click="onEdit()">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 用户列表 -->
    <div class="table">
      <template>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column label="角色"> 超级管理员</el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="openEdit(scope.row)">编辑</el-button>
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 50, 100]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Paginationdata.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      dialogVisible: false, //新增按钮变量
      editVisible: false, //编辑按钮变量
      tableList: [], //列表数据
      from: {
        //表单数据（用户名密码确认密码角色名）
        name: "",
        password: "",
        password_confirmation: "",
        role_name: "超级管理员",
      },
      edit_from: {
        // 编辑返回默认数据
        created_at: "",
        deleted_at: null,
        email: "",
        id: "",
        name: "",
        password: "",
        password_confirmation: "",
        role_name: "超级管理员",
      },
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
    };
  },

  mounted() {
    this.getList(); //进入调用用户表单数据请求
  },
  methods: {
    //用户表单数据请求
    getList() {
      axios
        .get("api/users",{
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
          params:{
          page:this.current_page,
          per_page:this.per_page,
        }
        })
        .then((res) => {
          console.log(res);
          this.tableList = res.data.data;
          this.Paginationdata = res.data.meta;
        });
    },
    //点击新增确认
    onSubmit() {
      // 请求
      axios
        .post("/api/users", this.from, {
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
        })
        .then((res) => {
          this.tableList = [...this.tableList, res.data.data];
          this.dialogVisible = false;
          this.getList();
          this.from = {};
          this.$message({
            message: "账号添加成功！",
            type: "success",
          });
        });
    },
    //点击编辑
    openEdit(e) {
      this.editVisible = true;
      console.log(e.id);
      let id = e.id;
      this.id = e.id;
      // 请求id对应数据
      axios
        .get(`/api/users/${id}`, {
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.edit_from = res.data.data;
        });
    },
    //编辑完确认请求
    onEdit() {
      let id = this.id;
      console.log(id);
      axios
        .patch(`/api/users/${id}`, this.edit_from, {
          headers: {
            Authorization:
              "Bearer w1rr6IsxZIud46dIrGIivNAroFpqN52sSpXhk3azpPq2ZTbUXhgKTOLheoRm",
          },
        })
        .then((res) => {
          this.tableList = [...this.tableList, res.data.data];
          this.editVisible = false;
          this.getList();
          this.$message({
            message: "账号修改成功！",
            type: "success",
          });
        });
      this.editVisible = false;
    },
    //分页功能
    handleSizeChange(val) {
      this.current_page = val;
      console.log(this.current_page);
      this.getList();
    },
    handleCurrentChange(val) {
      this.per_page = val;
      console.log(this.per_page);
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.conent {
  width: 100%;
  min-height: calc(100vh - 200px);
  position: relative;
}
.btn {
  height: 104px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  .el-button {
    width: 114px;
    height: 44px;
    border-radius: 3px;
  }
}
.table {
  margin-top: 20px;
}

.from-btn {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.block {
  margin-top: 30px;
}
</style>