hospital-project/src/views/background/framework/users/index.vue

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "users"
});
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import addPerson from "./components/addPerson.vue";
import addUsers from "./components/addUsers.vue";
import editPerson from "./components/editPerson.vue";
import { postPageGroup, postDelUserGroup } from "@/api/userGroup";
import UserPageTable from "@/components/UserPageTable/index.vue";
import pngcaret from "@/assets/icon-png/caret-right-small.svg";
// 新增用户组
const addUsersRef = ref();
const addUsersShow = ref(false);
// 新增人员
const addPersonRef = ref();
const addPersonShow = ref(false);
// 编辑
const editPersonRef = ref();
const editPersonShow = ref(false);
// table表格
const UserTable = ref();
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189"
  }
];
const rolesList = reactive({
  data: [],
  rolesName: "",
  params: {
    pageNumber: 1,
    pageSize: 10,
    groupName: ""
  }
});
const load = () => {
  rolesList.params.pageSize += 10;
  postPageGroupApi();
};
// 用户组分页
const postPageGroupApi = async () => {
  const { code, data } = await postPageGroup(rolesList.params);
  if (code === 200) {
    rolesList.data = [];
    data.records.forEach((item, index) => {
      rolesList.data.push({
        ...item,
        id: index + 1
      });
    });
  }
};
postPageGroupApi();

// 查看角色组
const bgColor = ref(null);
const lookRoles = item => {
  console.log("111", item);
  bgColor.value = item.id;
  rolesList.rolesName = item.groupName;
  UserTable.value.handleNodeClick(item, "group");
  console.log(UserTable.value);
};
// 标签选择
const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};
// 删除用户组
const postDelUserGroupApi = async row => {
  const { code } = await postDelUserGroup(row);
  if (code === 200) {
    postPageGroupApi();
    ElMessage({
      type: "success",
      message: "删除成功"
    });
  }
};
const deleteUsers = row => {
  console.log(row);
  ElMessageBox.confirm(
    `角色删除不能恢复，是否确认删除用户组【${row.groupName}】吗`,
    "确定删除该用户组吗？",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    postDelUserGroupApi(row);
  });
};
const AddUsersPerson = () => {
  addPersonRef.value.open();
};
const addUsersList = () => {
  addUsersRef.value.open();
};
// 配置角色
const changeUsers = item => {
  addUsersRef.value.open(item);
};
// 编辑
const editUsers = row => {
  editPersonRef.value.open(row);
};
// 删除用户
const deltetePerson = row => {
  ElMessageBox.confirm(
    `用户删除不能恢复，是否确认删除用户【${row.name}】吗`,
    "确定删除该用户吗？",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
    })
    .catch(() => {
      ElMessage({
        message: "取消删除"
      });
    });
};
</script>

<template>
  <div class="flex w-full h-full">
    <!-- 添加成员 -->
    <addPerson ref="addPersonRef" v-model="addPersonShow" />
    <!-- 添加用户组 -->
    <addUsers
      ref="addUsersRef"
      v-model="addUsersShow"
      @handleClick="postPageGroupApi"
    />
    <!-- 编辑 -->
    <editPerson
      ref="editPersonRef"
      v-model="editPersonShow"
      @handleClick="postPageGroupApi"
    />
    <!-- 主体内容 -->
    <div class="box-left">
      <div class="w-[100%]">
        <div>
          <el-input
            v-model="rolesList.params.groupName"
            placeholder="搜索姓名"
            class="mb-2"
            clearable
            style="max-width: 300px"
            :prefix-icon="Search"
            @change="postPageGroupApi"
          />
        </div>
      </div>
      <div
        v-infinite-scroll="load"
        infinite-scroll-immediate="false"
        class="h-2/3 w-[100%] overflow-auto infinite-list"
      >
        <div
          v-for="item in rolesList.data"
          :key="item.id"
          class="w-[100%] flex justify-between items-center"
        >
          <pngcaret class="mr-1 mt-2" />
          <div
            :class="[
              'w-[100%] flex justify-between items-center mt-2 cursor-pointer',
              { 'roles-bg': bgColor === item.id }
            ]"
          >
            <div
              class="flex justify-between items-center'"
              @click="lookRoles(item)"
            >
              <span class="">{{ item.groupName }}</span>
            </div>
            <div class="flex justify-between items-center">
              <el-dropdown trigger="click">
                <span>
                  <el-icon><Operation /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="setting">
                    <el-dropdown-item @click="editUsers(item)">
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item @click="changeUsers(item)">
                      配置角色
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link type="danger" @click="deleteUsers(item)"
                        >删除</el-link
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
      <el-button type="primary" class="addRole" plain @click="addUsersList()"
        >新增用户组</el-button
      >
    </div>
    <!-- <div v-if="rolesList.rolesName" class="box-right"> -->
    <div class="box-right">
      <h3>{{ rolesList.rolesName }}</h3>
      <!-- <div class="flex justify-between mb-3">
        <el-input
          placeholder="搜索医生姓名"
          class="mb-2"
          style="max-width: 300px"
          :prefix-icon="Search"
        />
        <el-button type="primary" @click="AddUsersPerson">添加成员</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="姓名" />
        <el-table-column prop="name" label="工号" />
        <el-table-column prop="address" label="性别" />
        <el-table-column prop="address" label="年龄" />
        <el-table-column prop="address" label="职称" />
        <el-table-column prop="address" label="部门" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-dropdown trigger="click" class="mr-2">
              <el-text type="danger" @click="deltetePerson(row)">
                移除
              </el-text>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table> -->
      <UserPageTable ref="UserTable">
        <template #add-button>
          <el-button type="primary" @click="AddUsersPerson">添加成员</el-button>
        </template>
        <template #actions="{ row }">
          <el-dropdown trigger="click" class="mr-2">
            <el-text type="danger" @click="deltetePerson(row)"> 移除 </el-text>
          </el-dropdown>
        </template>
      </UserPageTable>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-left {
  position: relative;
  width: 25%;
  // border: 1px solid red;
  height: 100%;
  padding: 10px 20px;
  border-right: 1px solid #999;
}

.box-right {
  width: 70%;
  height: 100%;
  padding: 10px 20px;
}

.addRole {
  position: absolute;
  bottom: 70px;
  width: calc(100% - 50px);
}

.userName {
  background-color: #022bbd80;
}

.infinite-list {
  -ms-overflow-style: none; /* IE和Edge */
  scrollbar-width: none; /* Firefox */
  // border: 1px solid red;
}

/* 隐藏滚动条 */
.infinite-list::-webkit-scrollbar {
  display: none; /* 对于 Webkit 浏览器（Chrome, Safari等） */
}
// ::v-deep .el-dropdown {
//   line-height: 1;
// }
// ::v-deep .el-tree-node__expand-icon {
//   line-height: 10px;
//   border: 1px solid red;
// }
.roles-bg {
  color: #0052d9;
  background-color: #0053d91a;
}

.roles-text {
  font-size: 14px;
  // font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 22px;
  color: #000000e6;
  letter-spacing: 0;
}
</style>