self-constructing_graph/src/views/KMPlatform/Permission/RoleManage.vue

<template>
  <div>
    <!-- <div class="export-button pl-10">
      <el-button v-has="99102" type="primary" @click="onClick_add">
        创建账号
      </el-button>
    </div> -->
    <el-table border :data="tableData" style="
        width: 80%;
        font-size: 20px;
        overflow: hidden;
        border-radius: 4px;
        margin: 20px 0 0 50px;
      ">
      <el-table-column prop="id" label="ID" width="180" align="center" />
      <el-table-column prop="name" label="角色名" width="280" align="center" />
      <el-table-column prop="description" label="描述" width="400" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" v-if="operationPermissions['c-1']"
            @click="handleChange(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="编辑角色" width="500" @close="handleClose">
      <div></div>
      <el-tree style="max-width: 600px" :data="permissionData" show-checkbox node-key="id"
        :default-checked-keys="currentCheckedKeys" :props="defaultProps" ref="tree" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitChange"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import { useMenuStore } from "@/stores/menu.js"
const { operationPermissions } = useMenuStore();
const { proxy } = getCurrentInstance();
const defaultProps = {
  children: "children",
  label: "name",
};
let tableData = ref([]);
let total = ref(0);
let dialogFormVisible = ref(false);
let permissionData = ref([]);
let form = reactive({
  role_id: 0,
  name: "",
  description: "",
  permission_ids: 0,
});
let currentCheckedKeys = ref([]);
// 使用 ref 函数创建一个引用对象
const tree = ref(null);

const init = () => {
  proxy.$http.get("/open-platform/user/roles").then((res) => {
    // console.log(res, "11");
    if (res.records && res.records.length > 0) {
      tableData.value = res.records
    } else {
      tableData.value = [];
    }
    total.value = res.total;
  });
};
init();
const getPermission = () => {
  proxy.$http.get("/open-platform/user/permissions").then((res) => {
    if (res.records && res.records.length > 0) {
      permissionData.value = res.records;
    } else {
      permissionData.value = [];
    }
  });
};
getPermission();
const handleChange = (row) => {
  dialogFormVisible.value = true;
  form.name = row.name;
  form.role_id = row.id;
  form.description = row.description;
  currentCheckedKeys.value = row.permission_ids ? [...row.permission_ids] : [];
};
const handleClose = () => {
  dialogFormVisible.value = false;
  nextTick(() => {
    tree.value.setCheckedKeys([]);
  });
};
const submitChange = () => {
  form.permission_ids = tree.value.getCheckedKeys();
  proxy.$http
    .post("/open-platform/user/roles", form)
    .then((res) => {
      proxy.$message.success("修改成功");
      dialogFormVisible.value = false;
      init();
    })
    .catch((err) => {
      proxy.$message.error("修改失败");
    });
};
</script>

<style lang="less" scoped>
:deep(.el-table th) {
  background-color: #eef6ff !important;
  /* 设置你想要的背景颜色 */
  color: #333;
  /* 设置表头文字颜色 */
  font-weight: bold;
  /* 设置表头文字加粗 */
}

:deep(.el-table .el-table__cell) {
  padding: 10px 0 !important;
}
</style>