From dc169c0b9a58c0b06816e402448e04aaff2fc1ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E4=BC=9F=E5=BA=9A?= <zhaoweigeng@wodcloud.com>
Date: Thu, 27 Oct 2022 14:43:51 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bg-ui/bg-permission-option.vue          |  98 +++++++
 src/bg-ui/bg-permission.vue                 | 231 +++++++++++++++
 src/bg-ui/bg-table.vue                      |  30 +-
 src/bg-ui/index.js                          |   6 +-
 src/bg-ui/index.scss                        |  94 ++++++
 src/page/main/config/dict/index.vue         |  71 ++---
 src/page/main/system/role/add/index.vue     |   8 +
 src/page/main/system/role/add/role_form.vue | 258 +++++++++++++++++
 src/page/main/system/role/edit/index.vue    |   8 +
 src/page/main/system/role/index.vue         | 305 +++++++++++++++++++-
 src/router/function.js                      |  16 +-
 11 files changed, 1065 insertions(+), 60 deletions(-)
 create mode 100644 src/bg-ui/bg-permission-option.vue
 create mode 100644 src/bg-ui/bg-permission.vue
 create mode 100644 src/page/main/system/role/add/index.vue
 create mode 100644 src/page/main/system/role/add/role_form.vue
 create mode 100644 src/page/main/system/role/edit/index.vue

diff --git a/src/bg-ui/bg-permission-option.vue b/src/bg-ui/bg-permission-option.vue
new file mode 100644
index 0000000..048ea89
--- /dev/null
+++ b/src/bg-ui/bg-permission-option.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="bg-permission-option">
+    <div
+      class="bg-permission-option--self"
+      :class="{
+        'full-option': !(option.children && option.children.length > 0),
+      }"
+    >
+      <el-checkbox
+        v-model="option.isSelected"
+        :indeterminate="option.isIndeterminate"
+        @change="changeSelf"
+      >
+        <span :title="option.name">
+          {{ option.name }}
+        </span>
+      </el-checkbox>
+    </div>
+    <div
+      class="bg-permission-option--list"
+      :class="{ 'flex-wrap': deep === depth - 1 }"
+      v-if="option.children && option.children.length > 0"
+    >
+      <BgPermissionOption
+        v-for="(item, index) in option.children"
+        :ref="`child${index}`"
+        :option="item"
+        :key="`opt_${index}`"
+        :deep="deep + 1"
+        :depth="depth"
+        @change="changeChild"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BgPermissionOption",
+  props: {
+    option: {
+      type: Object,
+      require: true,
+    }, // 数据项
+    depth: {
+      type: Number,
+      default: 0,
+    },
+    deep: {
+      type: Number,
+      default: 1,
+    },
+  },
+  methods: {
+    changeSelf() {
+      let isSelected = this.option.isSelected;
+      let children = this.option.children || [];
+
+      // 将自己的选中状态赋值给子级
+      if (children.length > 0) {
+        children.forEach((v, i) => {
+          v.isSelected = isSelected;
+
+          this.$nextTick(() => {
+            this.$refs[`child${i}`][0].changeSelf();
+          });
+        });
+      }
+
+      // 关于自己选中都是全选和不选，所以不存在半选状态
+      this.option.isIndeterminate = false;
+
+      // 修改完自己和自己子级，告诉父级更新
+      this.$emit("change");
+    }, // 本级选中状态发生变化
+    changeChild() {
+      let isSelected = true;
+      let isIndeterminate = false;
+      let children = this.option.children;
+
+      children.forEach((v, i) => {
+        isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
+        isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态或选中状态，自己就为半选状态
+      });
+
+      // 自己为全选状态时，半选不生效
+      isIndeterminate = isSelected ? false : isIndeterminate;
+
+      // 赋值
+      this.option.isSelected = isSelected;
+      this.option.isIndeterminate = isIndeterminate;
+
+      // 修改完自己和自己子级，告诉父级更新
+      this.$emit("change");
+    }, // 下级选中状态发生变化
+  },
+};
+</script>
diff --git a/src/bg-ui/bg-permission.vue b/src/bg-ui/bg-permission.vue
new file mode 100644
index 0000000..a6309e3
--- /dev/null
+++ b/src/bg-ui/bg-permission.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="bg-permission">
+    <div class="permission-header" v-if="selectAll">
+      <el-checkbox
+        v-model="isSelected"
+        :indeterminate="isIndeterminate"
+        @change="changeSelf"
+      >
+        全选
+      </el-checkbox>
+    </div>
+    <div class="permission-null" v-if="permissionData.length === 0">
+      <p>暂无数据</p>
+    </div>
+    <div class="bg-permission-option--list" v-else>
+      <BgPermissionOption
+        v-for="(item, index) in permissionData"
+        :ref="`child${index}`"
+        :option="item"
+        :key="`opt_${index}`"
+        :props="props"
+        :depth="depth"
+        @change="changeChild"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { val } from "dom7";
+import BgPermissionOption from "./bg-permission-option.vue";
+
+export default {
+  name: "BgPermission",
+  components: {
+    BgPermissionOption,
+  },
+  model: {
+    prop: "values",
+    event: "change",
+  },
+  props: {
+    values: {
+      type: Array,
+      default: () => [],
+    }, // 选中的值
+    options: {
+      type: Array,
+      default: () => [],
+    }, // 菜单项
+    props: {
+      type: Object,
+      default: () => ({
+        name: "name",
+        value: "value",
+        children: "children",
+      }),
+    }, // 配置项（节点的一些字段）
+    selectAll: {
+      type: Boolean,
+      default: true,
+    }, // 是否在顶部显示全选按钮
+  },
+  data() {
+    return {
+      initFlag: true, // 是否需要初始化
+      permissionData: [], // 数据项
+      isSelected: false, // 是否全选
+      isIndeterminate: false, // 是否半选
+    };
+  },
+  computed: {
+    depth() {
+      return this.getDepth({ children: this.permissionData });
+    }, // 数据层级深度
+  },
+  watch: {
+    values: {
+      handler() {
+        if (this.initFlag) {
+          this.initPermissionData();
+        }
+
+        this.initFlag = true;
+      },
+      deep: true,
+    },
+    options: {
+      handler() {
+        this.initPermissionData();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    initPermissionData() {
+      let {
+        name: nameProp,
+        value: valueProp,
+        children: childrenProp,
+      } = this.props;
+      let permissionData = [];
+      let traverseOptions = (item) => {
+        let result = {};
+        let name = item[nameProp];
+        let value = item[valueProp];
+        let children = item[childrenProp];
+        let isSelected = this.values.indexOf(value) > -1;
+        let isIndeterminate = false;
+
+        result.name = name;
+        result.value = value;
+
+        if (children && children.length > 0) {
+          
+          result.children = [];
+          isSelected = true; // 如果存在子节点，则根据子节点反推当前节点选中状态
+          isIndeterminate = false; // 当前节点半选状态
+          children.forEach((v) => {
+            result.children.push(traverseOptions(v));
+          });
+
+          result.children.forEach((v) => {
+            isSelected = isSelected && v.isSelected; // 所有子节点都为选中状态，则当前节点选中状态为真
+            isIndeterminate = isIndeterminate || v.isSelected || v.isIndeterminate; // 所有下级节点只要存在一个选中状态，则当前节点半选状态为真
+          });
+          
+        }
+
+        result.isSelected = isSelected;
+        result.isIndeterminate = isSelected ? false : isIndeterminate; // 当前节点选中状态为真时，半选为假
+
+        return result;
+      };
+
+      this.options.forEach((v) => {
+        permissionData.push(traverseOptions(v));
+      });
+      this.permissionData = permissionData;
+
+      // 初始化完数据项后要更新一下全选半选状态
+      if (permissionData.length > 0) {
+        this.$nextTick(() => {
+          this.changeChild();
+        });
+      }
+    }, // 初始化数据项
+    getDepth(node) {
+      if (!node.children || node.children.length === 0) {
+        return 1;
+      }
+
+      let maxChildrenDepth = [...node.children].map((v) => this.getDepth(v));
+
+      return Math.max(...maxChildrenDepth) + 1;
+    }, // 获取JsonTree深度
+    changeSelf() {
+      let isSelected = this.isSelected;
+      let children = this.permissionData || [];
+
+      // 将自己的选中状态赋值给子级
+      if (children.length > 0) {
+        children.forEach((v, i) => {
+          v.isSelected = isSelected;
+
+          this.$nextTick(() => {
+            this.$refs[`child${i}`][0].changeSelf();
+          });
+        });
+      }
+
+      // 关于自己选中都是全选和不选，所以不存在半选状态
+      this.isIndeterminate = false;
+
+      // 出发双向绑定事件
+      this.changeValues();
+    }, // 改变全选状态
+    changeChild() {
+      let isSelected = true;
+      let isIndeterminate = false;
+      let children = this.permissionData;
+
+      children.forEach((v, i) => {
+        isSelected = isSelected && v.isSelected; // 所有子级都为选中时，自己才为选中状态
+        isIndeterminate = isIndeterminate || v.isIndeterminate || v.isSelected; // 只要有下级为半选状态，自己就为半选状态
+      });
+
+      // 自己为全选状态时，半选不生效
+      isIndeterminate = isSelected ? false : isIndeterminate;
+
+      // 赋值
+      this.isSelected = isSelected;
+      this.isIndeterminate = isIndeterminate;
+
+      // 出发双向绑定事件
+      this.changeValues();
+    }, // 下级选中状态发生变化
+    changeValues() {
+      let values = [];
+      let traverseOptions = ({
+        isSelected,
+        isIndeterminate,
+        value,
+        children,
+      }) => {
+        if (isSelected) {
+          values.push(value);
+        }
+        if (isIndeterminate) {
+          values.push(value);
+        }
+
+        if (children && children.length > 0) {
+          children.forEach((v) => {
+            traverseOptions(v);
+          });
+        }
+      };
+
+      this.permissionData.forEach((v) => {
+        traverseOptions(v);
+      });
+      this.initFlag = false; // 防止在watch中出发重新初始化
+      this.$emit("changeMenu", values);
+    }, // 双向绑定的处理
+  },
+  mounted() {
+    this.initPermissionData();
+  },
+};
+</script>
diff --git a/src/bg-ui/bg-table.vue b/src/bg-ui/bg-table.vue
index 1239ccb..441ab57 100644
--- a/src/bg-ui/bg-table.vue
+++ b/src/bg-ui/bg-table.vue
@@ -25,8 +25,7 @@
     <el-table-column
       type="selection"
       :selectable="selectable"
-      width="80"
-      align="center"
+      width="38"
       v-if="select"
     >
       <!-- checkbox -->
@@ -103,9 +102,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    selectable: {
-      type: Function,
-    },
+    // selectable: {
+    //   type: Function,
+    // },
     isIndex: { 
       type: Boolean,
       default: false 
@@ -120,8 +119,16 @@ export default {
     },
     paddingLeft: {
       type: [Number, String],
-      default: () => 33,
+      default: () => 12,
     },
+    canEdit: {
+      type: Boolean,
+      default: false
+    }, // 多选框是否禁用
+    canEditFlag: {
+      typr : Boolean,
+      default: ""
+    }, // 决定多选框是否禁用的字段
   },
   /* filters: {
     ellipsis(value, max) {
@@ -190,6 +197,17 @@ export default {
         return "stripe-row";
       }
     },
+    selectable(row,index) {
+      if (this.canEdit) {
+        if (row[this.canEditFlag] && row[this.canEditFlag] == 1) {
+          return false
+        }else {
+          return true
+        }
+      }else {
+        return true
+      }
+    }
   },
 };
 </script>
diff --git a/src/bg-ui/index.js b/src/bg-ui/index.js
index 7b487be..730d4b1 100644
--- a/src/bg-ui/index.js
+++ b/src/bg-ui/index.js
@@ -35,6 +35,7 @@
  import BgFilterGroup from './bg-filter-group.vue'
  import BgSwitchEle from './bg-switch-ele.vue'
  import BgTableBtns from './bg-table-btns.vue'
+ import BgPermission from './bg-permission.vue'
  
 const components = {
   BgIcon,//字体图标
@@ -69,8 +70,9 @@ const components = {
   BgPagination,// 分页组件
   BgInnerTabs,//内部tab
   BgFilterGroup,//高级搜索
-  BgSwitchEle,
-  BgTableBtns,
+  BgSwitchEle,// 基于element-plus封装的switch
+  BgTableBtns,// 表格按钮组
+  BgPermission,// 菜单选择 
 };
 
 const install = (Vue) => {
diff --git a/src/bg-ui/index.scss b/src/bg-ui/index.scss
index 380b31a..6f0070d 100644
--- a/src/bg-ui/index.scss
+++ b/src/bg-ui/index.scss
@@ -2535,4 +2535,98 @@ a {
   .el-switch__core {
     width: 100%;
   }
+}
+.bg-permission {
+  border-top: solid 1px #dadee7;
+  border-left: solid 1px #dadee7;
+  width: 100%;
+
+  .el-checkbox {
+    .el-checkbox__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+      width: 8em;
+      display: inline-block;
+      vertical-align: middle;
+      line-height: 16px;
+      color: #202531;
+    }
+  }
+
+  >.permission-header {
+    padding: 0 16px;
+    height: 48px;
+    line-height: 48px;
+    background-color: #f2f3f7;
+    border-bottom: solid 1px #dadee7;
+    border-right: solid 1px #dadee7;
+  }
+
+  >.permission-null {
+    padding: 8px 16px;
+    border-bottom: solid 1px #dadee7;
+    border-right: solid 1px #dadee7;
+
+    >p {
+      font-size: 14px;
+      line-height: 16px;
+      color: #333;
+      text-align: center;
+    }
+  }
+
+  >.bg-permission-option--list {
+    width: 100%;
+  }
+}
+
+.bg-permission-option {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  >.bg-permission-option--self {
+    flex-shrink: 0;
+    padding: 8px 16px;
+    border-right: solid 1px #dadee7;
+    border-bottom: solid 1px #dadee7;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  >.bg-permission-option--list {
+    flex-shrink: 0;
+  }
+}
+
+.bg-permission-option--self {
+  width: 168px;
+
+  &.full-option {
+    width: 100%;
+  }
+}
+
+.bg-permission-option--list {
+  width: calc(100% - 168px);
+
+  &.flex-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    border-right: solid 1px #dadee7;
+    border-bottom: solid 1px #dadee7;
+
+    >.bg-permission-option {
+      >.bg-permission-option--self {
+        width: 168px;
+        border-right: none;
+        border-bottom: none;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/page/main/config/dict/index.vue b/src/page/main/config/dict/index.vue
index 463da11..ecbea23 100644
--- a/src/page/main/config/dict/index.vue
+++ b/src/page/main/config/dict/index.vue
@@ -56,25 +56,19 @@
             </template>
           </bg-filter-group>
           <div class="table_container">
-            <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
-              <template v-slot:updated_time="{ row }">
-                {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
-              </template>
-              <template v-slot:state="{ row }">
-                <!-- <bg-switch-ele 
-                  v-model="row.state"
-                  :rowId="row.id"
-                  inline-prompt
-                  activeText="是"
-                  inactiveText="否"
-                  @changeState="changeUseRow"
-                /> -->
-                <bg-switch @click="changeUseRow(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
-              </template>
-              <template v-slot:action="{ row }">
-                <bg-table-btns :operations="getOperations(row)" />
-              </template>
-            </bg-table>
+            <div class="table bg-scroll">
+              <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
+                <template v-slot:updated_time="{ row }">
+                  {{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+                </template>
+                <template v-slot:state="{ row }">
+                  <bg-switch @click="changeUseRow(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
+                </template>
+                <template v-slot:action="{ row }">
+                  <bg-table-btns :operations="getOperations(row)" />
+                </template>
+              </bg-table>
+            </div>
             <bg-pagination
               :page="filter.page"
               :size="filter.size"
@@ -617,26 +611,33 @@ const {
       border-radius: 6px;
       box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
       height: 100%;
-      .filter-group {
-        .left-filter {
-          flex: 1;
-          display: flex;
-          justify-content: start;
-          flex-wrap: wrap;
+      .main_container {
+        height: 100%;
+        .filter-group {
+          .left-filter {
+            flex: 1;
+            display: flex;
+            justify-content: start;
+            flex-wrap: wrap;
+          }
+          .right-action {
+            width: 144px;
+            padding-bottom: 16px;
+            .el-button {
+              width: 64px;
+            }
+          }
         }
-        .right-action {
-          width: 144px;
-          padding-bottom: 16px;
-          .el-button {
-            width: 64px;
+  
+        .table_container {
+          height: calc(100% - 70px);
+          width: 100%;
+          padding: 0 16px;
+          .table {
+            max-height: calc(100% - 64px);
           }
         }
       }
-
-      .table_container {
-        width: 100%;
-        padding: 0 16px;
-      }
     }
   }
   
diff --git a/src/page/main/system/role/add/index.vue b/src/page/main/system/role/add/index.vue
new file mode 100644
index 0000000..f3d2d75
--- /dev/null
+++ b/src/page/main/system/role/add/index.vue
@@ -0,0 +1,8 @@
+<!-- 角色管理新增 -->
+<template>
+  <role-form></role-form>
+</template>
+
+<script setup>
+import roleForm from './role_form.vue'
+</script>
diff --git a/src/page/main/system/role/add/role_form.vue b/src/page/main/system/role/add/role_form.vue
new file mode 100644
index 0000000..c8121e1
--- /dev/null
+++ b/src/page/main/system/role/add/role_form.vue
@@ -0,0 +1,258 @@
+<!-- 角色管理 -->
+<template>
+  <div class="detail_container">
+    <div class="bg-breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item> 系统管理 </el-breadcrumb-item>
+        <el-breadcrumb-item to="/system/role"> 角色管理 </el-breadcrumb-item>
+        <el-breadcrumb-item> 新建 </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="main_container">
+      <div class="top_form">
+        <el-form
+          ref="form"
+          :rules="rules"
+          :model="formData"
+          class="role_form"
+        >
+          <el-form-item prop="role_name" label="角色名称">
+            <el-input v-model="formData.role_name" maxlength="50" show-word-limit />
+          </el-form-item>
+          <el-form-item prop="role_desc" label="描述">
+            <el-input
+              class="decs_box"
+              type="textarea"
+              v-model="formData.role_desc"
+              maxlength="300" 
+              show-word-limit
+              :autosize="{ minRows: 5 }"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label="数据权限" prop="data_purview">
+            <el-radio-group v-model="formData.data_purview">
+              <el-radio :label="3">全平台所有</el-radio>
+              <el-radio :label="2">本组织所有</el-radio>
+              <el-radio :label="1">仅自己</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="菜单功能权限" prop="permission_arr">
+            <bg-permission
+              :values="formData.permission_arr"
+              :options="permissionData"
+              :props="defaultProps"
+              @changeMenu="changeMenu"
+            />
+          </el-form-item>
+          <el-form-item label="是否启用" prop="state" class="state_item">
+            <el-switch
+              class="bg-switch-ele"
+              v-model="formData.state"
+              :active-value="1"
+              :inactive-value="0"
+              inline-prompt
+              active-text="是"
+              inactive-text="否"
+            />
+          </el-form-item>
+
+        </el-form>
+      </div>
+      <div class="bottom_action">
+        <el-button>
+          取消
+        </el-button>
+        <el-button type="primary" @click="saveRole">
+          保存
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
+import axios from '../../../../../request/http.js'
+import { ElMessage } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const form = ref(null)
+const checkMenuLength = (rule, value, callback) => {
+  if (value.length === 0) {
+    callback(new Error('请选择所需菜单'))
+  } else {
+    callback()
+  }
+}
+
+const roleState = reactive({
+  form,
+  formData: {
+    role_name: "",
+    role_desc: "",
+    data_purview: 3,
+    state: 1,
+    permission_arr: [],
+  },
+  rules: {
+    role_name: [
+      { required: true, message: "请输入角色名称", trigger: "blur" },
+    ],
+    role_desc: [
+      { required: true, message: "请输入描述", trigger: "blur" },
+    ],
+    data_purview: [
+      { required: true, message: "请选择数据权限", trigger: "change" },
+    ],
+    state: [
+      { required: true, message: "请选择是否启用", trigger: "change" },
+    ],
+    permission_arr: [
+      { required: true, type: "array", validator: checkMenuLength, trigger: "change" }
+    ]
+  },
+  defaultProps: {
+    name: 'menu_name',
+    value: 'id',
+    children: 'Child',
+  },
+  permissionData: [],
+})
+const getMenuTree = () => {
+  axios
+    .get(`/apaas/system/v5/menu/tree`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        roleState.permissionData = res.data.data || []
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+}
+
+const changeMenu = (val) => {
+  roleState.formData.permission_arr = val
+}
+const getRoleDetail = () => {
+  axios
+    .get(`/apaas/system/v5/role/detail/${route.query.id}`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        console.log(res.data.data)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+}
+
+const saveRole = () => {
+  roleState.form.validate(valid => {
+    if (valid) {
+      let params = {
+        role_name: roleState.formData.role_name,
+        role_desc: roleState.formData.role_desc,
+        state: roleState.formData.state,
+        data_purview: roleState.formData.data_purview,
+        menu_ids: [...roleState.formData.permission_arr]
+      }
+      if (!route.query.id) { // 新增
+        axios
+          .put(`/apaas/system/v5/role/create`,params)
+          .then((res) => {
+            if (res.data.code == 200) {
+              ElMessage.success(res.data.data)
+              router.push('/system/role')
+            }else {
+              ElMessage.error(res.data.data)
+            }
+          })
+      }else { // 编辑
+        params.id = route.query.id
+        axios
+          .post(`/apaas/system/v5/role/update`,params)
+          .then((res) => {
+            if (res.data.code == 200) {
+              ElMessage.success(res.data.data)
+              router.push('/system/role')
+            }else {
+              ElMessage.error(res.data.data)
+            }
+          })
+      }
+    }
+  })
+}
+onBeforeMount(() => {
+  getMenuTree()
+  if (route.query.id) {
+    getRoleDetail()
+  }
+})
+    
+const {
+  formData,
+  rules,
+  defaultProps,
+  permissionData,
+} = toRefs(roleState)
+</script>
+
+<style lang="scss" scoped>
+.detail_container {
+  width: 100%;
+  padding: 0 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
+    border-radius: 6px;
+    margin: 0 0 16px;
+    position: relative;
+    height: calc(100% - 62px);
+    .top_form {
+      height: calc(100% - 68px);
+      padding: 30px 0 0 40px;
+      .role_form {
+        width: 1048px;
+        :deep().el-form-item {
+          display: block;
+          margin-bottom: 24px;
+          .el-form-item__label {
+            display: block;
+          }
+          .el-input__count {
+            bottom: -20px;
+            right: 4px;
+            color: #a9b1c7;
+          }
+        }
+        .state_item {
+          display: flex;
+        }
+      }
+    }
+    .bottom_action {
+      height: 68px;
+      border-top: 1px solid #e6e9ef;
+      padding: 16px;
+      text-align: right;
+      .el-button {
+        width: 92px;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/page/main/system/role/edit/index.vue b/src/page/main/system/role/edit/index.vue
new file mode 100644
index 0000000..e879496
--- /dev/null
+++ b/src/page/main/system/role/edit/index.vue
@@ -0,0 +1,8 @@
+<!-- 角色管理编辑 -->
+<template>
+  <role-form></role-form>
+</template>
+
+<script setup>
+import roleForm from './role_form.vue'
+</script>
\ No newline at end of file
diff --git a/src/page/main/system/role/index.vue b/src/page/main/system/role/index.vue
index 2a662dc..f1e1eda 100644
--- a/src/page/main/system/role/index.vue
+++ b/src/page/main/system/role/index.vue
@@ -1,30 +1,303 @@
+<!-- 角色管理 -->
 <template>
   <div class="detail_container">
-      角色管理
+    <div class="bg-breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item> 系统管理 </el-breadcrumb-item>
+        <el-breadcrumb-item> 角色管理 </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="main_container">
+      <bg-filter-group 
+        @search="changeSearch" 
+        v-model="filter.search" 
+        placeholder="请输入角色名称"
+      >
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button class="register_btn" type="primary" @click="register">
+              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
+                新建
+            </el-button>
+            <el-button class="register_btn" type="primary" @click="deleteRows">
+                批量删除
+            </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table bg-scroll">
+          <bg-table 
+            ref="bgTable" 
+            :headers="headers" 
+            :rows="tableRows" 
+            :select="true" 
+            :stripe="true" 
+            canEdit
+            canEditFlag='state' 
+            @select="selectRows"
+          >
+            <template v-slot:state="{ row }">
+              <bg-switch 
+                @click="changeUseRow(row)" 
+                :labels="['否','是']" 
+                :values="[0,1]" 
+                v-model="row.state" 
+                :disabled="row.role_type == 1"
+              />
+            </template>
+            <template v-slot:created_time="{ row }">
+              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
+            </template>
+            <template v-slot:action="{ row }">
+              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
+                编辑
+              </bg-table-btn>
+              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.role_type == 1">
+                分配用户
+              </bg-table-btn>
+              <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
+                删除
+              </bg-table-btn>
+            </template>
+          </bg-table>
+        </div>
+        <bg-pagination
+          :page="filter.page"
+          :size="filter.limit"
+          :total="tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize"
+        >
+        </bg-pagination>
+      </div>
+    </div>
+     <!-- 删除弹窗 -->
+    <el-dialog
+      custom-class="dialog_box"
+      title="提示"
+      v-model="delDialog"
+      width="400px"
+      :before-close="
+        () => {
+          delDialog = false;
+        }
+      "
+    >
+      <div>确定要选中的数据吗？</div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="delDialog = false">取 消</el-button>
+          <el-button type="primary" @click="deleteData">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
-<script >
-import { reactive, toRefs, ref, } from '@vue/reactivity'
-import { getCurrentInstance } from 'vue'
-import { computed, onBeforeMount } from '@vue/runtime-core'
-import { useRouter } from 'vue-router';
-export default {
-  components: {
+<script setup>
+import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
+import axios from '../../../../request/http.js'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const state = reactive({
+  filter: {
+    page: 1,
+    limit: 10,
+    search: "",
   },
-  setup() {
   
-    onBeforeMount(() => {
-     
+  headers: [
+    {
+      label: "角色名",
+      prop: "role_name",
+      
+      width: 220
+    },
+    {
+      label: "创建人",
+      prop: "created_by",
+      
+      width: 220
+    },
+    {
+      label: "创建时间",
+      prop: "created_time",
+      width: 276
+    },
+    {
+      label: "账号数",
+      prop: "user_count",
+    },
+    {
+      label: "描述",
+      prop: "role_desc",
+      minWidth: 346
+    },
+    {
+      label: "是否启用",
+      prop: "state",
+      width: 95
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 220,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+  actionRow: {},
+  selection: [],
+  delDialog: false,
+  delType: 1, // 删除类型  1-单条删除 2-批量删除
+})
+const getRoleRows = () => {
+  let params = {...state.filter}
+  console.log(params)
+  axios
+    .get(`/apaas/system/v5/role/list`,{params})
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.tableRows = res.data.data || []
+        state.tableTotal = res.data.total
+      }else {
+        ElMessage.error(re.data.data)
+      }
     })
-    return {
-      ...toRefs(),
+} // 获取角色列表
+const changePage = (val) => {
+  state.filter.page = val
+  getRoleRows()
+} // 改变页码
+
+const changeSize = (val) => {
+  state.filter.limit = val
+  changePage(1)
+} // 改变每页条数
+
+const changeSearch = (val) => {
+  state.filter.search = val
+  changePage(1)
+} // 表格关键字筛选
+
+const changeUseRow = (row) => {
+  axios
+    .post(`/apaas/system/v5/role/state/${row.id}/${row.state}`)
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        changePage(1)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
+} // 更改启用禁用状态
+
+const selectRows = (rows) => {
+  state.selection = rows
+}
+
+const register = () => {
+  console.log("新建角色")
+  router.push("/system/role/add")
+} // 新建角色
+
+const edit_row = (row) => {
+  console.log(row,"编辑角色")
+  router.push({
+    path: "/system/role/add",
+    query: {
+      id: row.id
     }
-  },
+  })
+} // 编辑角色
+
+const delete_row = (row) => {
+  state.actionRow = row
+  state.delType = 1
+  state.delDialog = true
+} // 删除角色
+
+const deleteRows = () => {
+  if (state.selection.length == 0) {
+    ElMessage.error("请先选择要删除的数据")
+  }else {
+    state.delType = 2
+    state.delDialog = true
+  }
+} // 批量删除按钮
+
+const deleteData = () => {
+  let ids = []
+  if (state.delType == 1) {
+    ids.push(state.actionRow.id)
+  }else {
+    state.selection.forEach(e => {
+      ids.push(e.id)
+    })
+  }
+  let params = {
+    ids: [...ids]
+  }
+  console.log(params)
+  axios
+    .delete(`/apaas/system/v5/role/delete`,{data: {ids:[...ids]}})
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success(res.data.data)
+        state.delDialog = false
+        changePage(1)
+      }else {
+        ElMessage.error(res.data.data)
+      }
+    })
 }
-</script>s
+onBeforeMount(() => {
+  getRoleRows()
+})
+    
+const {
+  filter,
+  headers,
+  tableRows,
+  tableTotal,
+  delDialog,
+} = toRefs(state)
+</script>
 
 <style lang="scss" scoped>
-
+.detail_container {
+  width: 100%;
+  padding: 0 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  .main_container {
+    flex-grow: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
+    border-radius: 6px;
+    margin: 0 0 16px;
+    position: relative;
+    height: calc(100% - 62px);
+    .table_container {
+      height: calc(100% - 70px);
+      padding: 0 16px;
+      .table {
+        max-height: calc(100% - 64px);
+      }
+    }
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/src/router/function.js b/src/router/function.js
index e5e8f69..1f6bbb6 100644
--- a/src/router/function.js
+++ b/src/router/function.js
@@ -264,8 +264,22 @@ var adminMenu = [
         menuType:'manager',
         show:true,
         path: "/system/role",
+        linkPath: ["/system/role/add","/system/role/edit"]
+      },
+      {
+        name: "role-add-manage",
+        menuName:'新增角色',
+        parentPath: "/system/role",
+        menuType:'manager',
+        path: "/system/role/add",
+      },
+      {
+        name: "role-edit-manage",
+        menuName:'编辑角色',
+        parentPath: "/system/role",
+        menuType:'manager',
+        path: "/system/role/edit",
       },
-      
     ]
   },
   {
-- 
2.26.0