feat: 添加角色管理

admin_2/src/api/system.js

@@ -173,3 +173,56 @@ export const delAccess = (params) => {
     params,
   });
 };
+
+/**
+ *  角色
+ */
+
+// 获取角色列表
+export const getRoleList = (data) => {
+  return request({
+    url: `/bill/role/list`,
+    method: "post",
+    data,
+  });
+};
+// 获取角色详情
+export const getRole = (params) => {
+  return request({
+    url: `/bill/role/get`,
+    method: "get",
+    params,
+  });
+};
+// 保存角色
+export const addRole = (data) => {
+  return request({
+    url: `/bill/role/save`,
+    method: "post",
+    data,
+  });
+};
+// 删除角色
+export const deleteRole = (params) => {
+  return request({
+    url: `/bill/role/delete`,
+    method: "get",
+    params,
+  });
+};
+// 获取角色资源列表
+export const getRoleResourceList = (data) => {
+  return request({
+    url: `/bill/role/auth/list`,
+    method: "post",
+    data,
+  });
+};
+// 添加角色资源
+export const addRoleResource = (data) => {
+  return request({
+    url: `/bill/role/auth/distributionSource`,
+    method: "post",
+    data,
+  });
+};

admin_2/src/pages/system/access/Access.vue

@@ -189,7 +189,7 @@ export default {
       let res = await getAccessList({
         page: this.current,
         size: this.size,
-        ...this.searchForm,
+        areaName: `%${this.searchForm.areaName}%`,
       });
       if (res.data.code == 1) {
         let { data, total, dict } = res.data.data;

admin_2/src/pages/system/access/components/AddAccess.vue

@@ -224,15 +224,18 @@ export default {
         longitude,
         type,
       } = row;
-      if (type == "area") {
+
+      this.form.areaId = "";
+      this.form.siteId = "";
+      this.form.siteName = "";
+
+      if (type === "area") {
         this.form.areaId = id;
-        this.form.siteId = "";
-        this.form.siteName = "";
-      } else if (type == "site") {
-        this.form.areaId = "";
+      } else if (type === "site") {
         this.form.siteId = id;
         this.form.siteName = label;
       }
+
       this.form.areaName = areaName;
       this.form.areaCode = areaCode;
       this.form.latitude = latitude;
@@ -240,6 +243,7 @@ export default {
       this.form.siteCode = siteCode;
       this.form.type = type;
     },
+
     addAreaNameField(data) {
       let arr = data;
       arr.forEach((item) => {

admin_2/src/pages/system/role/Role.vue

+<template>
+  <div class="h-full w-full">
+    <TableHeader>
+      <div slot="left">
+        <el-button size="small" type="primary" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button size="small" type="danger" @click="handleDelAll"
+          >批量删除</el-button
+        >
+      </div>
+      <div slot="right">
+        <el-form ref="searchForm" :model="searchForm" inline>
+          <el-form-item prop="name">
+            <el-input
+              size="small"
+              v-model="searchForm.name"
+              style="width: 200px"
+              class="ml10 mr10"
+              placeholder="请输入角色名称搜索"
+              @keyup.native.enter="handleSearch"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" type="primary" @click="handleSearch"
+              >搜 索</el-button
+            >
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" @click="handleReset">重 置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </TableHeader>
+    <!-- 表格 -->
+    <div class="table-content">
+      <y-table
+        ref="MyTable"
+        :loading="loading"
+        :data="tableData"
+        :column="column"
+        border
+        tooltip-effect="dark"
+        :max-height="600"
+        :row-key="(row) => row.id"
+        @selection-change="handleSelectionChange"
+      ></y-table>
+    </div>
+    <Pagination
+      :total="total"
+      :current.sync="current"
+      :size.sync="size"
+      @get="getRoleList"
+    ></Pagination>
+    <!-- 新增 -->
+    <AddRole
+      ref="AddRole"
+      :addVisible.sync="show"
+      :title="title"
+      @addSuccess="getRoleList"
+    ></AddRole>
+    <!-- 分配资源 -->
+    <ApportionRes
+      ref="ApportionRes"
+      :addVisible.sync="resShow"
+      @addSuccess="getRoleList"
+    ></ApportionRes>
+  </div>
+</template>
+
+<script>
+import TableHeader from "@/components/TableHeader.vue";
+import { getRoleList, deleteRole } from "@/api/system";
+import AddRole from "./components/AddRole.vue";
+import ApportionRes from "./components/ApportionRes.vue";
+export default {
+  components: {
+    TableHeader,
+    AddRole,
+    ApportionRes,
+  },
+  data() {
+    return {
+      column: [
+        {
+          label: "全选",
+          type: "selection",
+          width: "55",
+          align: "center",
+          reserveSelection: true,
+        },
+        {
+          label: "序号",
+          type: "index",
+          width: "55",
+          align: "center",
+          index: (index) => {
+            return (this.current - 1) * this.size + index + 1;
+          },
+        },
+        {
+          label: "角色名称",
+          prop: "name",
+          align: "center",
+        },
+        {
+          label: "备注",
+          prop: "remark",
+          align: "center",
+        },
+        {
+          label: "创建时间",
+          prop: "createTime",
+          align: "center",
+          formatter: (row) => {
+            return this.$moment(row.createTime).format("YYYY-MM-DD HH:mm:ss");
+          },
+        },
+        {
+          label: "操作",
+          align: "center",
+          width: "200",
+          formatter: (row) => {
+            return (
+              <div class="flex justify-center gap-4">
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.apportion(row)}
+                >
+                  分配资源
+                </span>
+                <span
+                  class="primary cursor-pointer"
+                  onClick={() => this.handleEdit(row)}
+                >
+                  编辑
+                </span>
+                <span
+                  class="delete cursor-pointer"
+                  onClick={() => this.handleDel(row.id)}
+                >
+                  删除
+                </span>
+              </div>
+            );
+          },
+        },
+      ],
+      searchForm: {
+        name: "",
+      },
+      tableData: [],
+      current: 1,
+      size: 10,
+      total: 0,
+      loading: false,
+      selectRows: [],
+      show: false,
+      title: "新增",
+      dict: {}, // 字典
+      resShow: false,
+    };
+  },
+  created() {
+    this.getRoleList();
+  },
+  computed: {},
+  methods: {
+    // 获取接入区域列表
+    async getRoleList() {
+      let res = await getRoleList({
+        page: this.current,
+        size: this.size,
+        name: `%${this.searchForm.name}%`,
+      });
+      if (res.data.code == 1) {
+        let { data, total, dict } = res.data.data;
+        if (!data.length && this.current > 1) {
+          this.current -= 1;
+          this.getRoleList();
+        }
+        this.tableData = data;
+        this.total = total;
+        this.dict = dict;
+      }
+    },
+    // 批量移除
+    handleDelAll() {
+      if (!this.selectRows.length) {
+        this.$message.warning("请先勾选数据");
+        return;
+      }
+      let ids = this.selectRows.map((v) => v.id).join(",");
+      this.handleDel(ids);
+    },
+    // 搜索
+    handleSearch() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.getRoleList();
+    },
+    // 重置
+    handleReset() {
+      this.current = 1;
+      this.$clearSelection("MyTable");
+      this.$resetForm("searchForm");
+      this.getRoleList();
+    },
+    // 选中
+    handleSelectionChange(select) {
+      this.selectRows = select;
+    },
+
+    // 新增
+    handleAdd() {
+      this.title = "新增";
+      this.$refs.AddRole.onAdd();
+      this.show = true;
+    },
+    // 编辑
+    handleEdit(row) {
+      this.title = "编辑";
+      let data = this.$cloneDeep(row);
+      this.$refs.AddRole.onEdit(data);
+      this.show = true;
+    },
+    // 移除
+    handleDel(id) {
+      this.$confirm("此操作将删除所选数据，是否继续？", "系统提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        cancelButtonClass: "btn-custom-cancel",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await deleteRole({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.getRoleList();
+            this.$clearSelection("MyTable");
+          }
+        })
+        .catch(() => {
+          console.log("取消成功！");
+        });
+    },
+    // 分配资源
+    apportion(row) {
+      this.$refs.ApportionRes.onAdd(row.id);
+      this.resShow = true;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/pages/system/role/components/AddRole.vue

+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :destroy-on-close="true"
+      :visible.sync="Visible"
+      width="30%"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      top="10vh"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
+        <el-form-item label="角色名称" prop="name">
+          <el-input placeholder="请输入角色名称" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            resize="none"
+            :autosize="{ minRows: 3, maxRows: 3 }"
+            type="textarea"
+            placeholder="请输入备注"
+            v-model="form.remark"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button size="small" type="primary" @click="handleOk"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addRole } from "@/api/system";
+export default {
+  components: {},
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    addVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      form: {
+        name: "",
+        remark: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.addVisible;
+      },
+      set(val) {
+        this.$emit("update:addVisible", val);
+      },
+    },
+  },
+  methods: {
+    // 确定
+    handleOk() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          let res = await addRole(this.form);
+          let { code, msg } = res.data;
+          if (code === 1) {
+            this.$message.success(msg);
+            this.$emit("addSuccess");
+            this.handleClose();
+          }
+        }
+      });
+    },
+    // 新增
+    onAdd() {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.id && this.$delete(this.form, "id");
+    },
+    // 编辑
+    onEdit(row) {
+      setTimeout(() => {
+        this.form = row;
+      }, 10);
+    },
+    // 重置
+    handleRest() {
+      this.$resetForm("form");
+    },
+    // 关闭
+    handleClose() {
+      this.$resetForm("form");
+      this.Visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

admin_2/src/pages/system/role/components/ApportionRes.vue

+<template>
+  <div>
+    <el-dialog
+      title="分配角色资源"
+      :destroy-on-close="true"
+      :visible.sync="Visible"
+      width="50%"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      top="10vh"
+    >
+      <div class="mb-5" v-for="(v, key) in resourceList" :key="key">
+        <div class="title-box mb-5">
+          <span class="mr-5 text-[16px] font-bold">{{ key }}</span>
+          <el-checkbox
+            :indeterminate="v.isIndeterminate"
+            v-model="v.checkAll"
+            @change="handleCheckAllChange($event, v)"
+            >全选</el-checkbox
+          >
+        </div>
+        <el-checkbox-group
+          v-model="form.resourceIdList"
+          @change="onChange($event, v)"
+        >
+          <el-row>
+            <el-col :span="12" v-for="item in v.list" :key="item.id">
+              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
+            </el-col>
+          </el-row>
+        </el-checkbox-group>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleRest">重 置</el-button>
+        <el-button size="small" type="primary" @click="handleOk"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getResourceList,
+  getRoleResourceList,
+  addRoleResource,
+} from "@/api/system";
+export default {
+  components: {},
+  props: {
+    addVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      resourceList: {},
+      userResourceList: [], // 用户资源列表
+      form: {
+        resourceIdList: [],
+        roleId: "",
+      },
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.addVisible;
+      },
+      set(val) {
+        this.$emit("update:addVisible", val);
+      },
+    },
+  },
+  methods: {
+    // 获取资源列表
+    async getResourceList() {
+      let res = await getResourceList({
+        page: 1,
+        size: -1,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        this.resourceList = this.groupByAuth(data);
+      }
+    },
+
+    // 获取角色资源权限列表
+    async getRoleResourceList(roleId) {
+      let res = await getRoleResourceList({
+        size: -1,
+        page: 1,
+        roleId,
+      });
+      if (res.data.code == 1) {
+        let { data } = res.data.data;
+        let arr = data.filter((v) => v.resourceId);
+        this.form.resourceIdList = arr.map((v) => v.resourceId);
+      }
+    },
+    // 权限分组
+    groupByAuth(list) {
+      let group = {};
+      list.forEach((item) => {
+        let name = item.name.split("-")[0];
+        if (!group[name]) {
+          group[name] = {
+            isIndeterminate: false,
+            checkAll: false,
+            list: [],
+          };
+        }
+        group[name].list.push(item);
+      });
+      return group;
+    },
+
+    // 确定
+    async handleOk() {
+      let res = await addRoleResource(this.form);
+      let { code } = res.data;
+      if (code === 1) {
+        this.$message.success("添加成功");
+        this.$emit("addSuccess");
+        this.handleClose();
+      }
+    },
+    // 新增
+    onAdd(roleId) {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.roleId = roleId;
+      this.getResourceList();
+      this.getRoleResourceList(roleId);
+    },
+
+    // 重置
+    handleRest() {
+      this.form.resourceIdList = [];
+      Object.keys(this.resourceList).forEach((key) => {
+        this.resourceList[key].checkAll = false;
+        this.resourceList[key].indeterminate = false;
+      });
+    },
+    // 关闭
+    handleClose() {
+      this.handleRest();
+      this.Visible = false;
+    },
+    handleCheckAllChange(checked, row) {
+      let rowIds = row.list.map((v) => v.id);
+      row.isIndeterminate = false;
+      if (checked) {
+        this.form.resourceIdList = [
+          ...new Set([...this.form.resourceIdList, ...rowIds]),
+        ];
+      } else {
+        this.form.resourceIdList = this.form.resourceIdList.filter((v) => {
+          return !rowIds.includes(v);
+        });
+      }
+    },
+    onChange(checkedList, row) {
+      let rowIds = row.list.map((v) => v.id);
+      let list = checkedList.filter((v) => {
+        return rowIds.includes(v);
+      });
+      row.isIndeterminate = !!list.length && list.length < rowIds.length;
+      row.checkAll = list.length === rowIds.length;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-dialog__body) {
+  max-height: 620px;
+  overflow: auto;
+}
+.title-box {
+  border-bottom: 1px solid #e9e9e9;
+}
+.el-col {
+  margin-bottom: 10px;
+}
+</style>

admin_2/src/router/index.js

@@ -147,6 +147,15 @@ const routes = [
               icon: "el-icon-set-up",
             },
           },
+          {
+            path: "/system/role",
+            component: () => import("@/pages/system/role/Role.vue"),
+            meta: {
+              activeMenu: "/system",
+              title: "角色信息",
+              icon: "el-icon-postcard",
+            },
+          },
           {
             path: "/system/resourcemanage",
             component: () =>