jhsw_manage/src/views/manage/userManage.vue

<template>
  <div class="record-warp">
    <div class="record-main">
      <el-row>
        <el-col :span="24">
          <div class="search-head">
            <span>用户名：</span>
            <el-input v-model="name" clearable placeholder="请输入用户名"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>用户昵称：</span>
            <el-input v-model="userName" clearable placeholder="请输入用户昵称"></el-input>&nbsp;&nbsp;
            <el-button type="primary" round icon="el-icon-search" @click="searchTarget">搜索</el-button>
            <el-button type="info" round icon="el-icon-delete-solid" @click="clearSearch">清空</el-button>
            <el-button type="success" round class="add_class" icon="el-icon-plus" @click="addUser">新增用户</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row class="add_user_class">
        <el-col :span="24">
          <div class="search-head">
           
          </div>
        </el-col>
      </el-row>

      <div class="table-content">
        <el-table :data="tableData" :row-style="{ height: '0px' }" :cell-style="{ padding: '5px' }">
          <!-- <el-table-column prop="name" label="姓名" align="center" width=""  show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column show-overflow-tooltip prop="name" label="用户名" align="center" width="">
          </el-table-column>
          <el-table-column prop="userName" label="用户昵称" align="center" width="">
          </el-table-column>
          <!-- <el-table-column prop="state" label="用户状态" align="center" :formatter="formatterDelete" width="">
          </el-table-column> -->
          <el-table-column prop="channelId" label="所属渠道ID" align="center" width=""></el-table-column>
          <el-table-column prop="type" label="所属角色" align="center" width="" :formatter="formatterRole"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="510px" align="center">
            <template slot-scope="scope">
              <el-button @click="viewUser(scope.row)" v-if="scope.row.state != 0" type="text"
                size="small">查看</el-button>
              <el-button type="text" size="small" v-if="scope.row.state != 0"
                @click="editUser(scope.row)">编辑</el-button>

              <el-popconfirm v-if="scope.row.state != 0" title="确定删除吗？" placement="top"
                @confirm="deleteUser(scope.$index, scope.row)">
                <el-button size="small" style="margin-left: 10px" type="text" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-popconfirm v-if="scope.row.state != 0" title="密码将重置为123456" placement="top"
                @confirm="resetUser(scope.$index, scope.row)">
                <el-button size="small" style="margin-left: 10px" type="text" slot="reference">重置密码</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination small background @current-change="handleCurrentChange" :current-page.sync="pageNum"
        layout="total, prev, pager, next" :page-size="pageSize" :total="total">
      </el-pagination>
      <!-- <el-pagination small background layout="total prev, pager, next" :total="36">
      </el-pagination> -->
    </div>
    <Register ref="register" @search="searchTarget" />
    <el-dialog title="查看" :visible.sync="centerDialogVisible" width="60%" center>
      <div>
        <div class="user_out">
          <div class="user_out_sub">
            用户名
          </div>
          <div class="user_out_subNext">
            {{ view.name }}
          </div>
          <div class="user_out_sub">
            用户昵称
          </div>
          <div class="user_out_subNext">
            {{ view.userName }}
          </div>

        </div>
        <div class="user_out">
          <div class="user_out_sub">
            所属渠道
          </div>
          <div class="user_out_subNext">
            {{ view.channelId }}
          </div>
          <div class="user_out_sub">
            所属角色
          </div>
          <div class="user_out_subNext">
            {{ view.role }}
          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { oSessionStorage } from "../../utils/utils";
import register from "../../components/Register.vue";
export default {
  name: "userManage",
  components: {
    Register: register,
  },
  data() {
    return {
      centerDialogVisible: false,
      editUserFlag: false,
      startTime: "",
      endTime: "",
      value1: null,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      keyword: "",
      tableData: [],
      userInfo: {}, //用户信息
      userId: "", //用户id
      name: "", //根据名称搜索
      userName: "", //根据昵称搜索
      hospitalOrDepartment: "", //医院科室

      invitationCode: "",
      roleType: "0",
      type: 0,
      view: {
        name: '',
        userName: '',
        channelId: '',
        role: ''
      },
    };
  },
  created() { },
  mounted() {
    this.userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
    
    
    if (!this.userInfo) {
      //如果用户信息不存在跳转登陆页
      this.$router.push({ path: "/" });
    }
    this.searchTarget();
  },
  methods: {
    formatterDelete(row) {
      if (row.state == 0) {
        return '已删除'
      } else {
        return '正常'
      }
    },
    resetUser(index,val){
      console.log(val)
      this.$http.get(`/user/reset/${val.id}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.$message.success("重置成功");
          this.searchTarget();
        } else {
          this.$message.error(res.msg);
        }
      });
      //重置密码
    },
    editUser(row) {

      this.editRegisterUser(row)

    },
    viewUser(row) {
      this.view.name = row.name
      this.view.userName = row.userName
      this.view.channelId = row.channelId
      this.view.role = row.type == '0' ? '渠道用户' : ''
      this.centerDialogVisible = true;
    },
    addUser() {
      this.addRegisterUser(true);
    },
    clearSearch() {
      this.name = "";
      this.userName = "";
      this.searchTarget();
    },
    formatterRole(val) {
      if (val.type == "1") {
        return "超级管理员";
      } else {
        return "渠道用户";
      }
    },

    forma(val) {
      if (val.gender == "0") {
        return "男";
      } else {
        return "女";
      }
    },
    addRegisterUser(val) {
      this.$refs.register.open(val);
    },
    editRegisterUser(val){
      this.$refs.register.edit(val);
    },
    deleteUser(index, row) {
      this.$http.delete(`/user/delete/${row.id}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          this.$message.success("删除成功");
          this.searchTarget();
        } else {
          this.$message.error("删除失败");
        }
      });
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.searchList();
    },
    //根据现有情况进行搜索
    searchList() {
      //  let url =``
      this.$http.post(
        `/user/find`,
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          phone: "",
          name: this.name,
          userName: this.userName,
        },
        (res) => {
          // console.log(res,'用户测试记录')
          if (res && res.code == 200) {
            this.tableData = res.data.content;
            this.total = res.data.totalElements;
          } else {
            // this.$toast.fail(res.msg);
            this.$message.error(res.msg);
          }
        }
      );
    },
    searchTarget() {
      this.pageNum = 1;
      this.searchList();
    },
    //跳转首页
    goHome() {
      this.$router.push({ path: "/home" });
    },
    //跳转记录页
    goRecord() {
      this.$router.push({ path: "/record" });
    },
    //退出登陆
    logout() {
      oSessionStorage.removeItem("userInfo");
      oSessionStorage.removeItem("token");
      this.$router.push({ path: "/" });
    },
    //点击日历获取日期
    getDate(param) {
      // console.log(param,"日期。。。")
      this.userRecord(param.dateStr);
    },
    //点击获取月出勤次数
    getTimes(param) {
      this.monthTimes = param;
    },
    // 用户测试记录显示
    userRecord(date) {
      this.$http.get(
        `gameRecord/findListByUserIdAndDate/${this.userId}/${date}`,
        {},
        (res) => {
          // console.log(res,'用户测试记录')
          if (res && res.code == 200) {
            this.listData = res.data;
          } else {
            this.$toast.fail(res.msg);
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../styles/theme.less";

.record-warp {
  width: 100%;
  height: 80vh;
  //background: url(../../assets/img/index/19.png) no-repeat center;
  //background-size: 100% 100%;
  position: relative;

  .record-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    .search-head {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .zc-title {
        color: #606266;
        font-size: 14px;
      }
    }

    .table-content {
      margin: 10px 0;
    }
  }
}

.add_user_class {
  margin-top: 10px;
}

.user_out {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #eeeeef;
  line-height: 50px;
  margin-top: 10px;
}

.user_out_sub {
  flex: 1;
  background-color: #fafafa;
  text-align: center;
  // color:#ffffff

}

.user_out_subNext {
  padding-left: 10px;
  flex: 3
}
</style>