hospital-project/src/views/background/framework/roles/rolePower.vue

<script setup lang="ts">
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "rolePower"
});
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import addRole from "./components/addRole.vue";
import addPerson from "./components/addPerson.vue";
import { getDeleteUserApi } from "@/api/userSetting";
import {
  getMenuList,
  getMenuListCodeForRole,
  postAddMenuList
} from "@/api/menu";
import { postPageRole, postDelRole, postPageUserByRole } from "@/api/roles";
import pngcaret from "@/assets/icon-png/caret-right-small.svg";
import UserPageTable from "@/components/UserPageTable/index.vue";
const UserTable = ref();
// 新增角色
const addRoleRef = ref();
const addRoleShow = ref(false);
// 新增角色组人员
const addPersonRef = ref();
const addPersonShow = ref(false);
const tableData = ref([]);
interface Role {
  id?: number;
  roleName: string;
  records: Array<string>;
}
interface ApiResponse {
  code: number;
  data: {
    records: Role[];
    // 可能还有其他字段，比如 total, page, etc.
  };
}
const rolesList = reactive<any>({
  data: [],
  dataUser: [],
  rolesName: "",
  addPerson: {}
});
// 角色列表
let pageSize = reactive({
  pageNumber: 1,
  pageSize: 5
});
const load = () => {
  pageSize.pageSize += 5;
  postPageRoleApi();
};
const loadSystem = async () => {
  pageSize.pageSize += 5;
  postPageRoleApi();
};

// 系统角色
const postPageRoleApi = async () => {
  const { code, data }: ApiResponse = await postPageRole({
    ...pageSize,
    roleType: "system"
  });
  const res: ApiResponse = await postPageRole({
    ...pageSize,
    roleType: "user"
  });
  if (code === 200) {
    rolesList.data = [];
    data.records.map((item, index) => {
      rolesList.data.push({ ...item, id: index + 2 });
    });
  }
  if (res.code === 200) {
    rolesList.dataUser = [];
    res.data.records.map((item, index) => {
      rolesList.dataUser.push({ ...item, id: index + 3 });
    });
  }
};
// 自定义角色
postPageRoleApi();
// 查看角色组
const bgColor = ref(null);
const lookRoles = item => {
  console.log(item);
  paramsPageUser.roleName = item.roleName;
  paramsPageUser.roleCode = item.roleCode;
  bgColor.value = item.id;
  rolesList.rolesName = item.roleName;
  Object.assign(rolesList.addPerson, item);
  postPageUserByRoleApi();
  getMenuListCodeForRoleApi(item);
};
// 添加角色
const addRoles = () => {
  addRoleRef.value.open();
  addRoleShow.value = true;
};
// 编辑角色
const editRoleName = item => {
  addRoleRef.value.open(item);
  addRoleShow.value = true;
};
// 删除角色
const postDelRoleApi = async item => {
  console.log("item", item);
  const { code } = await postDelRole(item);
  if (code === 200) {
    ElMessage({
      message: "删除成功",
      type: "success"
    });
    postPageRoleApi();
  }
};
const deleteRole = item => {
  ElMessageBox.confirm(
    `角色删除后不能恢复,是否确认删除角色【${item.roleName}】吗?`,
    "确认删除角色吗",
    {
      type: "warning"
    }
  )
    .then(() => {
      postDelRoleApi(item);
    })
    .catch(() => {
      // catch error
      ElMessage({
        message: "已取消"
      });
    });
};
// 标签选择
const activeName = ref("first");

// 添加角色组成员
const AddRolesPerson = () => {
  if (rolesList.rolesName) {
    addPersonRef.value.open(rolesList.addPerson);
    addPersonShow.value = true;
  } else {
    ElMessage.warning("请先选择角色");
  }
};
// 删除角色组成员
const deltetePerson = item => {
  ElMessageBox.confirm(
    `人员删除后不能恢复,是否确认删除【${item.realName}】吗?`,
    "确认删除人员吗",
    {
      type: "warning"
    }
  )
    .then(() => {
      getDeleteUserApi(item.userCode, postPageUserByRoleApi);
    })
    .catch(() => {
      // catch error
      ElMessage({
        message: "已取消"
      });
    });
};
// 成员管理
const paramsPageUser = reactive({
  pageNumber: 1,
  pageSize: 10,
  roleName: "",
  roleCode: "",
  realName: "",
  userCodes: []
});
const total = ref(0);
const postPageUserByRoleApi = async () => {
  const { code, data } = await postPageUserByRole(paramsPageUser);
  console.log(data);
  if (code === 200) {
    tableData.value = data.records;
    if (data.totalRow) {
      total.value = data.totalRow;
    }
  }
};
// 菜单权限
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const getMenuListApi = async () => {
  const { code, data } = await getMenuList();
  console.log("菜单", data);
};
getMenuListApi();
// const postAddMenuListApi = async () => {
//   const { code } = await postAddMenuList({
//     menuName: "指标库",
//     menuType: "menu",
//     parentCode: "",
//     orderNum: 0,
//     url: "",
//     moduleUrl: "/IndexDefine",
//     icon: "",
//     remark: "",
//     menuCode: ""
//   });
// };
// postAddMenuListApi();
// {
//     menuName: "新建模板",
//     menuType: "menu",
//     parentCode: "menu340271989673566208",
//     orderNum: 0,
//     url: "",
//     moduleUrl: "/evaluate/children/change/components/newAdd",
//     icon: "",
//     remark: "",
//     menuCode: ""
//   }
const getMenuListCodeForRoleApi = async item => {
  console.log("item", item);
  const { code, data } = await getMenuListCodeForRole({
    roleCode: item.roleCode
  });
  // console.log("菜单", data);
};
const handleSizeChange = val => {
  paramsPageUser.pageSize = val;
  postPageUserByRoleApi();
};
const handleCurrentChange = val => {
  paramsPageUser.pageNumber = val;
  postPageUserByRoleApi();
};
</script>

<template>
  <div class="flex w-full h-full">
    <!-- 新增角色 -->
    <addRole
      ref="addRoleRef"
      v-model="addRoleShow"
      @handleClick="postPageRoleApi"
    />
    <!-- 新增角色组成员 -->
    <addPerson
      ref="addPersonRef"
      v-model="addPersonShow"
      @handeClick="postPageUserByRoleApi"
    />
    <!-- 主体内容 -->
    <div class="box-left">
      <div class="w-[100%]">
        <div><el-text type="info">系统角色</el-text></div>
      </div>
      <!-- v-infinite-scroll="loadSystem" -->
      <div
        v-infinite-scroll="loadSystem"
        infinite-scroll-immediate="false"
        class="h-1/4 w-[100%] overflow-auto infinite-list"
      >
        <div
          v-for="(item, index) in rolesList.data"
          :key="index"
          class="w-[100%] flex justify-between items-center roles-text"
        >
          <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.roleName }}</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="editRoleName(item)">
                      编辑名称
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-link type="danger" @click="deleteRole(item)"
                        >删除</el-link
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
      <div class="w-[100%]">
        <div><el-text type="info">自定义角色</el-text></div>
      </div>
      <div
        v-infinite-scroll="load"
        class="h-2/5 w-[100%] overflow-auto infinite-list"
      >
        <div
          v-for="(item, index) in rolesList.dataUser"
          :key="index"
          class="w-[100%] flex justify-between items-center roles-text"
        >
          <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.roleName }}</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">
                    <Auth :value="['编辑角色']">
                      <el-dropdown-item @click="editRoleName(item)">
                        编辑名称
                      </el-dropdown-item>
                    </Auth>
                    <Auth :value="['删除']">
                      <el-dropdown-item>
                        <el-link type="danger" @click="deleteRole(item)"
                          >删除</el-link
                        >
                      </el-dropdown-item>
                    </Auth>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <el-divider />
      <Auth :value="['新建角色']">
        <el-button type="primary" class="addRole" plain @click="addRoles()"
          >新增角色</el-button
        >
      </Auth>
    </div>
    <!-- <div v-if="rolesList.rolesName" class="box-right"> -->
    <div class="box-right">
      <h3>{{ rolesList.rolesName }}</h3>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="成员管理" name="first">
          <div class="flex justify-between mb-3">
            <el-input
              v-model="paramsPageUser.realName"
              placeholder="搜索姓名"
              class="mb-2"
              style="max-width: 300px"
              :prefix-icon="Search"
              @change="postPageUserByRoleApi"
            />
            <Auth :value="['添加成员']">
              <el-button type="primary" @click="AddRolesPerson"
                >添加成员</el-button
              >
            </Auth>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="realName" label="姓名" />
            <el-table-column prop="hospitalCode" label="工号" />
            <el-table-column prop="jobTitle" label="职称" />
            <el-table-column prop="dept" label="部门" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-dropdown trigger="click" class="mr-2">
                  <Auth :value="['移除成员']">
                    <el-text type="danger" @click="deltetePerson(row)">
                      移除
                    </el-text>
                  </Auth>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div class="h-[80px]">
            <div class="float-left mt-3 total">共{{ total }}条数据</div>
            <div class="absolute right-0 mr-20 mt-3">
              <el-pagination
                v-model:current-page="paramsPageUser.pageNumber"
                v-model:page-size="paramsPageUser.pageSize"
                background
                layout="prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-tab-pane>
        <Auth :value="['权限管理']">
          <el-tab-pane label="权限管理" name="second">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="模块">
                <template #default="{ row }">
                  <div>
                    <input v-model="row.show" type="checkbox" />{{ row.date }}
                    <br />
                    <input v-model="row.show1" type="checkbox" />{{ row.name }}
                    <br />
                    <input v-model="row.show2" type="checkbox" />{{
                      row.address
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="菜单">
                <template #default="{ row }">
                  <div>
                    <input v-model="row.show" type="checkbox" />{{ row.date }}
                  </div>
                  <div>
                    <input v-model="row.show" type="checkbox" />{{ row.date }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="全选">
                <template #default="{ row }">
                  <div>
                    <input v-model="row.show" type="checkbox" />{{ row.date }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="权限点">
                <template #default="{ row }">
                  <div>
                    <input v-model="row.show" type="checkbox" />{{ row.date }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </Auth>
      </el-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.total {
  font-size: 14px;
  // font-family: PingFangSC-Regular;
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}

.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);
}

.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>