user_manage.vue

<template>
  <div class="contentBox">
    <div class="content">
      <div style="padding: 8px 20px">
        <span style="float: right">
          <el-button type="info" v-if="uname == 'admin'" @click="addUser"
            >添加新用户</el-button
          >
        </span>
        <div style="clear: both"></div>
      </div>
      <div style="padding: 0 15px 20px 23px">
        <el-table
          :height="tableHeight"
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="num"
            :formatter="numFormatter"
            label="序号"
          >
          </el-table-column>
          <el-table-column prop="username" align="center" label="用户名">
          </el-table-column>
          <el-table-column align="center" prop="roles[0].name" label="角色名">
          </el-table-column>
          <el-table-column
            align="center"
            prop="create_dt"
            width="300"
            label="创建时间"
          >
            <template slot-scope="scope">
              <div>
                {{
                  $moment(scope.row.create_dt)
                    .local()
                    .add(8, "h")
                    .format("YYYY-MM-DD HH:mm:ss")
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="300"
            prop="operation"
            label="操作"
            v-if="uname == 'admin'"
          >
            <template slot-scope="scope">
              <el-tooltip
                content="编辑用户"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="icon-fanxing-xiugai editIcon"
                  @click="editUser(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
              <span class="tableSpanBorder"></span>
              <el-tooltip
                content="重置密码"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="el-icon-refresh-right reseticon"
                  @click="reset(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
              <span class="tableSpanBorder"></span>
              <el-tooltip
                content="删除"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="el-icon-delete delIcon"
                  @click="delFun(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
              <span class="tableSpanBorder"></span>
              <el-tooltip
                :content="scope.row.lock ? '解锁' : '锁定'"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  :class="{
                    'el-icon-lock delIcon': !scope.row.lock,
                    'el-icon-unlock editIcon': scope.row.lock,
                  }"
                  @click="clockuser(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
              <span class="tableSpanBorder"></span>
              <el-tooltip
                content="注销"
                placement="bottom"
                effect="light"
                :visible-arrow="false"
              >
                <span
                  class="el-icon-warning no-btn"
                  @click="logoutuser(scope.$index, scope.row)"
                ></span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 28px">
          <el-pagination
            style="float: right"
            background
            prev-text="上一页"
            next-text="下一页"
            :page-sizes="[30, 50, 100, 200]"
            layout="total, prev, pager, next,sizes, jumper"
            :current-page="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
          >
          </el-pagination>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="新增用户"
      :visible.sync="addVisible"
      @open="openAddDialog"
      width="30%"
    >
      <div>
        <el-form
          label-position="left"
          label-width="80px"
          :model="addForm"
          :rules="rules"
          ref="addForm"
          inline-message
          hide-required-asterisk
        >
          <el-form-item label="角色选项" prop="role_unid">
            <el-select
              v-model="addForm.role_unid"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in roleList"
                :key="item.role_unid"
                :label="item.name"
                :value="item.role_unid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkPass">
            <el-input v-model="addForm.checkPass" type="password"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFun('addForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑用户" :visible.sync="editVisible" width="30%">
      <div>
        <el-form
          label-position="left"
          label-width="80px"
          :model="editForm"
          :rules="rules"
          ref="editForm"
          inline-message
          hide-required-asterisk
        >
          <el-form-item label="角色选项" prop="role_unid">
            <el-select
              v-model="editForm.role_unid"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in roleList"
                :key="item.role_unid"
                :label="item.name"
                :value="item.role_unid"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFun('editForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
let sha1 = require("js-sha1");
export default {
  data() {
    var checkRole = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择角色"));
      } else {
        callback();
      }
    };
    var checkUser = (rule, value, callback) => {
      var userReg = /^[a-zA-Z0-9]{5,32}/;
      if (!userReg.test(value)) {
        callback(new Error("用户名长度为5到32个字符数字字母组合"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      var pwdRegex = new RegExp(
        "(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}"
      );
      if (!pwdRegex.test(value)) {
        callback(
          new Error(
            "您的密码复杂度太低（密码中必须包含大写和小写字母、数字、特殊字符长度大于8位），请及时修改密码！"
          )
        );
      } else {
        callback();
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      total: 0,
      page: 1,
      pageSize: 30,
      uname: "",
      addForm: {
        norm_type: "login",
        role_unid: "",
        username: "",
        password: "",
        checkPass: "",
      },
      editForm: {
        role_unid: "",
      },
      isadmin: true,
      editRoleUnid: "",
      editUnid: "",
      tableData: [],
      addVisible: false,
      editVisible: false,
      roleList: [],
      rules: {
        role_unid: [{ validator: checkRole, trigger: "change" }],
        username: [{ validator: checkUser, trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
        checkPass: [{ validator: validatePass2, trigger: "change" }],
      },
      tableHeight: window.opsTableHeight,
      currow: "",
    };
  },
  components: {},
  mounted() {
    this.getTableList();
    this.getRoleList();
    this.uname = localStorage.getItem("uname");
  },
  methods: {
    numFormatter(row, column, cellValue, index) {
      return (index + 1) * this.page;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableList();
    },
    getTableList() {
      this.tableData = [];
      console.log("aa", this.userId);
      let offset = (this.page - 1) * this.pageSize;
      this.$api.ops
        .getUserList({
          limit: this.pageSize,
          offset: offset,
        })
        .then((res) => {
          this.total = res.total_num;

          if (res.list_data == null) {
            this.tableData = [];
          } else {
            this.tableData = res.list_data;
          }
        })
        .catch((error) => {});
    },
    getRoleList() {
      this.roleList = [];
      this.$api.ops
        .getRoleList({
          limit: 9999,
          offset: 0,
          is_active: true,
        })
        .then((res) => {
          if (res.list_data == null) {
            this.roleList = [];
          } else {
            this.roleList = res.list_data;
          }
        })
        .catch((error) => {});
    },
    delFun(index, row) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.ops.delUser({}, row.user_unid).then((res) => {
            if (!res.ecode) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getTableList();
              this.$logs.oplogs(res, "serv_auth", `删除用户${row.username}`);
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //注销用户
    logoutuser(index, row) {
      localStorage.removeItem("menu");
      localStorage.removeItem("curmenu");
      let uid = localStorage.getItem("user_unid");
      this.$api.login.logout(row.user_unid).then((res) => {
        if (res.ecode == "200") {
          this.$message({
            type: "success",
            message: "注销成功！",
          });
          this.$logs.oplogs("", "serv_auth", `注销用户${row.username}`);
        } else {
          this.$message({
            type: "error",
            message: "注销失败！",
          });
          this.$logs.oplogs("", "serv_auth", `注销用户${row.username}失败`);
        }
        // localStorage.removeItem("atoken");
      });
    },
    clockuser(index, row) {
      const { user_type } = row;
      if (user_type === "user_1") {
        this.$message({
          type: "error",
          message: "不支持锁定新用户！",
        });
        return;
      }
      let text = row.lock ? "此操作将解锁该用户" : "此操作将锁定该用户";
      this.$confirm(text + ", 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            lock: row.lock == null ? true : !row.lock,
            user_type: "user",
          };
          this.$api.ops.lockUser(row.user_unid, params).then((res) => {
            if (res.ecode == "200") {
              this.$message({
                type: "success",
                message: params.lock ? "锁定成功!" : "解锁成功！",
              });
              this.getTableList();
              this.$logs.oplogs(
                res,
                "serv_auth",
                `${params.lock ? "锁定成功!" : "解锁成功！"}${row.username}`
              );
            } else {
              this.$message({
                type: "error",
                message: params.lock ? "锁定失败!" : "解锁失败！",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reset(index, row) {
      this.$confirm("此操作将重置密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.ops.adminresetPwd({}, row.user_unid).then((res) => {
            if (res.ecode == "200") {
              this.$message({
                type: "success",
                message: "重置密码成功!",
              });
              this.$logs.oplogs(
                res,
                "serv_auth",
                `重置用户${row.username}的密码`
              );
            } else {
              this.$message({
                type: "error",
                message: res.enote,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    editUser(index, row) {
      this.editRoleUnid = row.roles[0].role_unid;
      this.editForm.role_unid = row.roles[0].role_unid;
      this.editUnid = row.user_unid;
      this.editVisible = true;
    },
    openAddDialog() {
      if (this.$refs["addForm"]) {
        this.$refs["addForm"].resetFields();
      }
    },
    addUser() {
      this.addVisible = true;
    },
    addFun(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.ops
            .addUser({
              norm_type: this.addForm.norm_type,
              username: this.addForm.username,
              password: window.config.encrypt
                ? sha1(this.addForm.password)
                : this.baseencode(this.addForm.password),
            })
            .then((res) => {
              if (res.ecode == "200" || !res.ecode) {
                this.$api.ops
                  .bindRole(
                    {
                      role_unid: this.addForm.role_unid,
                    },
                    res.enote.user_unid
                  )
                  .then((data) => {
                    if (!data.ecode) {
                      this.$message({
                        type: "success",
                        message: "添加成功!",
                      });
                      this.$logs.oplogs(
                        res,
                        "serv_auth",
                        `添加了用户${this.addForm.username}`
                      );
                      this.addVisible = false;
                      this.getTableList();
                    } else {
                      this.$message({
                        type: "error",
                        message: "添加失败!",
                      });
                    }
                  });
              } else {
                debugger;
                this.$message({
                  type: "error",
                  message: res.enote,
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    editFun(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.ops
            .unbindRole({}, this.editUnid, this.editRoleUnid)
            .then((res) => {
              this.$api.ops
                .bindRole(
                  {
                    role_unid: this.editForm.role_unid,
                  },
                  this.editUnid
                )
                .then((res) => {
                  if (!res.ecode) {
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                    this.editVisible = false;
                    this.getTableList();
                    this.$logs.oplogs(
                      res,
                      "serv_auth",
                      `修改了用户${this.editForm.username}`
                    );
                  } else {
                    this.$message({
                      type: "error",
                      message: "修改失败!",
                    });
                  }
                });
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.topCon {
  background: $white-back-color;
  margin-bottom: 12px;
  height: 100px;
  .left {
    display: inline-block;
    margin: {
      top: 22px;
      left: 30px;
    }
    img {
      width: 65px;
      height: 55px;
      margin-right: 11px;
    }
    .topText {
      font-size: 24px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .bottomText {
      font-size: 14px;
      font-family: MicrosoftYaHeiUI;
    }
  }
  .right {
    float: right;
    .topText {
      font-size: 28px;
      font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
      font-weight: bold;
    }
    .bottomText {
      position: relative;
      top: -1px;
      font-size: 14px;
      font-family: MicrosoftYaHeiUI;
    }
  }
  .textCon {
    display: inline-block;
    vertical-align: top;
  }
  .border {
    display: inline-block;
    height: 40px;
    border: {
      left: 2px solid $border-color;
    }
  }
  .rightBox {
    margin-top: 14px;
    display: inline-block;
    img {
      margin: {
        top: 15px;
        right: 22px;
      }
    }
  }
  .rightBox:nth-of-type(1) {
    img {
      width: 34px;
      height: 34px;
    }
    .textCon {
      margin-right: 114px;
    }
  }
  .rightBox:nth-of-type(2) {
    position: relative;
    top: 4px;
    img {
      width: 40px;
      height: 40px;
      margin-left: 102px;
    }
    .textCon {
      margin-right: 101px;
    }
  }
  .rightBox:nth-of-type(3) {
    img {
      width: 34px;
      height: 35px;
      margin-left: 104px;
    }
    .textCon {
      margin-right: 184px;
    }
  }
}
.content {
  background: #ffffff;
}
.inputBox {
  margin-right: 20px;
}
.selectBox {
  margin-right: 20px;
}
.editIcon {
  cursor: pointer;
  color: #0069ff;
  font-size: 16px;
}
.editIcon2 {
  cursor: pointer;
  color: #87d14b;
  font-size: 16px;
}
.playIcon {
  cursor: pointer;
  color: #34b3a2;
  font-size: 16px;
}
.pauseIcon {
  cursor: pointer;
  color: #ffc62e;
  font-size: 14px;
}
.delIcon {
  cursor: pointer;
  color: #f2365a;
  font-size: 16px;
}
.reseticon {
  cursor: pointer;
}
</style>