RZGY/src/renderer/components/ManageUser.vue

<template>
  <div class="main_right_height">
    <TopDes :flag="false" topDesFont="用户管理"></TopDes>
    <div class="mainTable-top-two">
      <div class="xl_input">
        <el-input
          placeholder="请输入搜索内容"
          v-model="nameSearch"
          prefix-icon="el-icon-search"
          @input="searchUser"
        >
          <!-- <el-button
                slot="append"
                @click="searchUser"
                icon="el-icon-search"
              ></el-button> -->
        </el-input>
      </div>
    </div>
    <div class="table_c">
      <el-table
        :data="tableData"
        :header-cell-style="{
          background: '#66B497',
          color: '#FFFFFF',
          'letter-spacing': '4px',
        }"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column prop="userName" align="center" label="姓名"> </el-table-column>
        <el-table-column prop="identifier" align="center" label="编号"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              class="xl_d_button"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <p align="center" style="margin-bottom: 40px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, , 50, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total,sizes,  prev, pager, next, jumper"
        :total="totolSize"
      >
      </el-pagination>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      head_style: "#f5f7fa",
      pageNum: 1,
      pageSize: 10,
      totolSize: 10,
      nameSearch: "",
      tableData: [],
    };
  },
  mounted() {
    this.queryUser();
  },
  methods: {
    searchUser() {
      this.pageNum = 1;
      this.queryUser();
    },
    queryUser() {
      let that = this;
      that.$http.post(
        `v1/user/find`,
        {
          pageNum: that.pageNum,
          pageSize: that.pageSize,
          startDate: "",
          endDate: "",
          userName: that.nameSearch,
          role: 0,
        },
        (res) => {
          if (res.data.code == 200) {
            that.tableData = res.data.data.content;
            that.totolSize = res.data.data.totalElements;
            // this.$message.success("保存成功");
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryUser();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryUser();

      // this.pageNum = val;
      // this.queryList();
    },
    handleEdit(index, row) {
      this.resetPassword(row);
    },
    handleDelete(index, row) {},
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "success-row";
    },
    resetPassword(row) {
      let that = this;
      that.$http.post(
        `/v1/user/reset`,
        {
          identifier: sessionStorage.getItem("num"),
          identifierInit: row.identifier,
        },
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("账号重置成功");
            // this.$message.success("保存成功");
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.el-divider--horizontal {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.main_right_height {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;
}

.userManageClass {
  color: #0f0f0f;
}
/* .xl_input >>> .el-input__inner {
  width: 35.4vw;
  line-height: 64px;
  background: #eaeaea;
  border-radius: 30px 30px 30px 30px;
  opacity: 1;
  box-sizing: border-box;
  font-weight: 400;
  color: #929292;
} */
.mainTable-top-two {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  width: 92%;
  margin-left: 4%;
}
.table_c {
  flex: 1;
  overflow: auto;
  width: 92%;
  margin-left: 4%;
}
</style>