goelia-ai-admin/src/views/auth/user/index.vue

<template>
  <div class="app-container">
    <el-container>
      <el-aside width="20%">
        <div class="slot-tree">
          <!-- 异步加载树   -->
          <h2 class="tree-title" @click="refreshTree">组织目录</h2>
          <el-tree
            ref="treeRef"
            node-key="id"
            :props="resPorp"
            :data="orgtreeNodes"
            accordion
            :highlight-current="true"
            @node-click="handleNodeClick"
          />
        </div>
      </el-aside>

      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="filter-container">
              <el-input
                placeholder="姓名"
                style="width: 200px;"
                clearable
                v-model="listQuery.searchKey"
                @keyup.enter.native="handleFilter"
              />
              <el-select
                v-model="listQuery.userStatus"
                placeholder="用户状态"
                clearable
              >
                <el-option
                  v-for="item in userStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                v-waves
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
                >搜索</el-button
              >
              <el-button
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handleCreate"
                >新建</el-button
              >
            </div>
          </div>
          <div>
            <el-table
              v-loading="listLoading"
              :key="tableKey"
              :data="list"
              size="mini"
              stripe
              border
              fit
              highlight-current-row
              style="width: 100%;"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              />
              <el-table-column
                label="头像"
                min-width="80"
                align="center"
                prop="avatar"
              >
                <template slot-scope="scope">
                  <img class="avatar" :src="scope.row.avatar" alt="头像" />
                </template>
              </el-table-column>
              <el-table-column
                label="账号"
                align="center"
                width="180"
                prop="account"
              />
              <el-table-column
                label="姓名"
                min-width="150"
                align="center"
                prop="name"
              />

              <el-table-column
                label="性别"
                align="center"
                width="100"
                prop="gender"
              />

              <el-table-column
                label="手机"
                align="center"
                width="150"
                prop="phone"
              />
              <el-table-column
                label="组织"
                align="center"
                width="150"
                prop="orgName"
              />
              <el-table-column
                label="职位"
                align="center"
                width="150"
                prop="positionName"
              />

              <el-table-column
                label="状态"
                align="center"
                width="150"
                prop="userStatus"
              >
                <template slot-scope="scope">
                  <el-switch
                    :value="scope.row.userStatus === 'ENABLE'"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="编辑"
                    placement="top"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-edit"
                      circle
                      title="编辑"
                      @click="handleUpdate(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除"
                    placement="top"
                  >
                    <el-button
                      size="mini"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      title="删除"
                      @click="handleDelete(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="more"
                    effect="dark"
                    content="更多"
                    placement="top"
                  >
                    <el-dropdown trigger="click"  @command="(command) => handleMore(command, scope.row)">
                      <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-more"
                        circle
                        title="更多"
                      />
                      <el-dropdown-menu class="dropdown-menu" slot="dropdown">
                        <el-dropdown-item  command="reset">重置密码</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <swPage
              v-if="total > 0"
              key="2"
              :listQuery="listQuery"
              :total="total"
              pos="btmRight"
              @retPage="retPage"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
    <!-- 新增或编辑对话框-->
    <addUserEditDialog
      :propsData="addUserEditDialogDatas"
      @refreshTable="refreshData"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { dynamicTree } from "@/api/auth/position";
import { fetchList, deleteUser,resetPwd } from "@/api/auth/user";
import { positionCategory, userStatus } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import addUserEditDialog from "./components/addUserEditDialog";

export default {
  inject: ["reload"], //刷新
  name: "userIndex",
  directives: {
    waves
  },
  components: {
    swPage,
    addUserEditDialog
  },
  data() {
    return {
      positionCategory,
      userStatus,
      tableKey: 0,
      orgtreeNodes: [], //组织树节点
      currentNode: null,
      currNodeData: null, //当前属性的数据
      resPorp: {
        //树结构
        label: "name",
        isLeaf: "leaf"
      },
      list: [],
      total: null,
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        searchKey: null,
        orgId: null
      },
      addUserEditDialogDatas: {
        //添加 或者 编辑 dialog 数据
        status: "create", //[create ,update]
        visible: false,
        orgData: null //选中的组织
      }
    };
  },
  created() {
    this.syncLoadResLabel();
    this.getList();
  },
  methods: {
    getValueByKey,
    refreshData() {
      this.addUserEditDialogDatas.status = "create";
      this.addUserEditDialogDatas.visible = false;
      this.addUserEditDialogDatas.orgData = null; //选中的组织
      this.handleFilter();
    },
    refreshTree() {
      this.syncLoadResLabel();
      this.listQuery.currentPage = 1;
      this.listQuery.orgId = null;
      this.getList();
    },
    syncLoadResLabel() {
      //同步目录
      dynamicTree().then(response => {
        this.orgtreeNodes = response.data;
      });
    },
    handleNodeClick(data, node) {
      //点击node触发
      if (this.currentNode && this.currentNode.name === data.name) {
        node.checked = !node.checked;
      } else {
        node.checked = true;
      }
      if (node.checked) {
        // 选中
        this.currentNode = data;
        this.listQuery.orgId = data.id;
      } else {
        // 取消选中
        this.$refs.treeRef.setCurrentKey(null);
        this.currentNode = null;
        this.listQuery.orgId = null;
      }
      this.listQuery.currentPage = 1;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.currentPage = 1;
      this.getList();
    },
    handleCreate() {
      //查询组织 - 角色
      this.addUserEditDialogDatas.status = "create";
      this.addUserEditDialogDatas.visible = true;
      this.addUserEditDialogDatas.orgData = null;
    },
    handleUpdate(row) {
      //触发更新Dialog和创建的dialog共用一个dialog
      this.addUserEditDialogDatas.status = "update";
      this.addUserEditDialogDatas.visible = true;
      this.addUserEditDialogDatas.orgData = row;
    },
    handleDelete(row) {
      //删除
      this.$confirm("确定删除用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteUser([{ userId: row.id }]).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1); //数值删除
        });
      });
    },
    handleMore(command,row) {
      //更多
      if(command === 'reset') {
        this.handleResetPwd(row)
      }
    },
    handleResetPwd(row) {
      //重置密码
      this.$confirm("确定重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        resetPwd(row).then(() => {
          this.$notify({
            title: "成功",
            message: "重置成功",
            type: "success",
            duration: 3000
          });
        });
      });
    }
  }
};
</script>

<style scoped>
.el-aside {
  max-width: 200px;
}
/* .filter-container{
  display: flex;
  align-items: center;
} */
.box-card {
  margin-left: 10px;
}

.tree-title {
  color: #ae8877;
  font-size: 14px;
  cursor: pointer;
}

.el-tree-node__content:hover .append {
  display: inline !important;
}

.append {
  display: none;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #eee;
  object-fit: cover;
  cursor: pointer;
}
.more {
  margin-left: 10px;
}
.dropdown-menu {
  .el-dropdown-menu__item {
    font-size: 12px;
  }
}
</style>