From e1170d9f62f7bd42da667b82b662fee0b2240582 Mon Sep 17 00:00:00 2001
From: dzl <863620989@qq.com>
Date: Fri, 9 May 2025 16:37:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=92=E8=89=B2=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=9F=A5=E8=AF=A2=E5=88=97=E8=A1=A8=EF=BC=8C=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ebike-operate/src/pages.js                    |  51 +++--
 ebike-operate/src/views/Layout/index.vue      |  24 +-
 .../src/views/SysManage/RoleManage/index.vue  | 206 ++++++++++++++++++
 .../src/views/Urban/SiteManage/index.vue      |  58 +++--
 .../src/views/form/permmanage/permform.vue    | 202 +++++++++++------
 .../src/views/form/rolemanage/RoleManage.vue  | 184 ++++++++++++++++
 6 files changed, 611 insertions(+), 114 deletions(-)
 create mode 100644 ebike-operate/src/views/SysManage/RoleManage/index.vue
 create mode 100644 ebike-operate/src/views/form/rolemanage/RoleManage.vue

diff --git a/ebike-operate/src/pages.js b/ebike-operate/src/pages.js
index cbf0498..fb69050 100644
--- a/ebike-operate/src/pages.js
+++ b/ebike-operate/src/pages.js
@@ -54,31 +54,44 @@ const pages = [
         icon: () => h(GatewayOutlined),
         path: '/Urban',
         name: '城市管理',
-        children: [{
-            path: '/OperateRegion',
-            name: '运营区域',
-            isMenu: true
-        },
-        {
-            path: '/OperateRegionAdd',
-            name: '运营区新增',
-            isMenu: false
-        }
+        children: [
+            {
+                path: '/OperateRegion',
+                name: '运营区域',
+                isMenu: true
+            },
+            {
+                path: '/SiteManage',
+                name: '站点列表',
+                isMenu: true
+            },
+            {
+                path: '/OperateRegionAdd',
+                name: '运营区新增',
+                isMenu: false
+            }
         ]
     },
     {
         icon: () => h(GatewayOutlined),
         path: '/SysManage',
         name: '系统管理',
-        children: [{
-            path: '/OrgManage',
-            name: '品牌商管理',
-            isMenu: true
-        },{
-            path: '/PermManage',
-            name: '权限管理',
-            isMenu: true
-        }
+        children: [
+            {
+                path: '/OrgManage',
+                name: '品牌商管理',
+                isMenu: true
+            },
+            {
+                path: '/PermManage',
+                name: '菜单管理',
+                isMenu: true
+            },
+            {
+                path: '/RoleManage',
+                name: '角色管理',
+                isMenu: true
+            }
         ]
     }
 ]
diff --git a/ebike-operate/src/views/Layout/index.vue b/ebike-operate/src/views/Layout/index.vue
index dcbf2b9..9a127ec 100644
--- a/ebike-operate/src/views/Layout/index.vue
+++ b/ebike-operate/src/views/Layout/index.vue
@@ -53,12 +53,20 @@
         <div class="topAvatar">
           <template v-if="userdfrname != '' && username != 'admin'">
             <a-dropdown>
-              <a class="ant-dropdown-link" @click.prevent>
-                当前区域：{{ userdfrname }} <DownOutlined />
+              <a
+                class="ant-dropdown-link"
+                @click.prevent
+              >
+                当前区域：{{ userdfrname }}
+                <DownOutlined />
               </a>
               <template #overlay>
                 <a-menu @click="onOperationClick">
-                  <a-menu-item v-for="(item) in useroperation" :key="item.regionId" :data="item">{{ item.regionName }}</a-menu-item>
+                  <a-menu-item
+                    v-for="(item) in useroperation"
+                    :key="item.regionId"
+                    :data="item"
+                  >{{ item.regionName }}</a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
@@ -139,21 +147,19 @@ onMounted(() => {
     router.push('/login');
     return;
   }
-  console.log('isLogin', isLogin.value)
   // 获取用户名
   const userinfo = getCache('ebike-userinfo');
-  console.log('userinfo', userinfo)
   username.value = userinfo.username ? userinfo.username : 'X'
 
   //获取用户区域
   const cuseroperation = getCache('ebike-useroperation');
-  if(cuseroperation){
+  if (cuseroperation) {
     useroperation.value = cuseroperation;
   }
 
   //获取默认区域
   const cuserdefultoperation = getCache('ebike-userdefultoperation');
-  if(cuserdefultoperation){
+  if (cuserdefultoperation) {
     userdfrname.value = cuserdefultoperation.regionName ? cuserdefultoperation.regionName : '';
   }
 
@@ -209,11 +215,11 @@ const cancel = (e) => {
 }
 
 const onOperationClick = (e) => {
-  if(e.item && e.item.data){
+  if (e.item && e.item.data) {
     const regionName = e.item.data.regionName;
     userdfrname.value = regionName;
     //存储默认区域
-    setCache('ebike-userdefultoperation',  e.item.data);
+    setCache('ebike-userdefultoperation', e.item.data);
   }
 }
 
diff --git a/ebike-operate/src/views/SysManage/RoleManage/index.vue b/ebike-operate/src/views/SysManage/RoleManage/index.vue
new file mode 100644
index 0000000..68f5b79
--- /dev/null
+++ b/ebike-operate/src/views/SysManage/RoleManage/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <a-form
+    :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
+    :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
+  >
+    <a-row :gutter="8">
+      <a-col
+        :xl="6"
+        :lg="12"
+        :md="12"
+        :sm="24"
+        :xs="24"
+      >
+        <a-form-item label="区域名称">
+          <a-input
+            v-model:value.trim="queryform.roleName"
+            placeholder="请输入区域名称"
+            allow-clear
+          ></a-input>
+        </a-form-item>
+      </a-col>
+      <a-col
+        :xl="6"
+        :lg="12"
+        :md="12"
+        :sm="24"
+        :xs="24"
+      >
+        <a-form-item
+          class="ele-text-right"
+          :wrapper-col="{ span: 24 }"
+        >
+          <a-space>
+            <a-button
+              type="primary"
+              style="background-color: #5cc750"
+              @click="search"
+            >查询</a-button>
+            <!-- <a-button>重置</a-button> -->
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <!-- 数据操作 -->
+  <a-space style="margin-bottom: 10px">
+    <a-button
+      style="background-color: #5cc750"
+      type="primary"
+      class="ele-btn-icon"
+      @click="handleAdd('新增角色')"
+    >
+      <template #icon>
+        <plus-outlined />
+      </template>
+      <span>新增</span>
+    </a-button>
+  </a-space>
+  <a-table
+    bordered
+    :pagination="pagination"
+    :columns="columns"
+    :dataSource="dataSource"
+    :scroll="{ x: 'max-content' }"
+  >
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'action'">
+        <a-space>
+          <a>排序</a>
+          <a-divider type="vertical" />
+          <a @click="handleAdd('编辑角色')">编辑</a>
+          <a-divider type="vertical" />
+          <a>删除</a>
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+  <!-- 角色信息 -->
+  <a-modal
+    v-model:open="open"
+    :title="openTitle"
+    @ok="handleOkModal"
+    @cancel="handleCancelModal"
+    width="800px"
+    :maskClosable="false"
+  >
+    <RoleManage ref="formModel"></RoleManage>
+  </a-modal>
+</template>
+<script setup>
+import { ref, onMounted, reactive,nextTick } from 'vue';
+import { message } from 'ant-design-vue'
+import { callUser } from '@/apis/call.js'
+import config from '@/utils/config.js'
+import RoleManage from '@/views/form/rolemanage/RoleManage.vue';
+const open = ref(false);
+const openTitle = ref('');
+const formModel = ref(null);
+
+const columns = [
+  {
+    title: '品牌商名称',
+    dataIndex: 'orgName',
+    width: 200,
+    key: 'orgName',
+    align: 'center'
+  },
+  {
+    title: '角色名称',
+    dataIndex: 'roleName',
+    width: 200,
+    key: 'roleName',
+    align: 'center'
+  },
+  {
+    title: '角色描述',
+    dataIndex: 'roleDescription',
+    width: 200,
+    key: 'roleDescription',
+    align: 'center'
+  },
+  {
+    title: '员工数量',
+    dataIndex: 'staffCount',
+    width: 200,
+    key: 'staffCount',
+    align: 'center'
+  },
+  {
+    title: 'PC权限数量',
+    dataIndex: 'webCount',
+    width: 200,
+    key: 'webCount',
+    align: 'center'
+  },
+  {
+    title: '小程序权限数量',
+    dataIndex: 'appletCount',
+    width: 200,
+    key: 'appletCount',
+    align: 'center'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    align: 'center',
+    fixed: 'right',
+  }
+];
+
+const queryform = ref({
+  roleName: '',
+  pageNum: config.pageParam.pageNum,
+  pageSize: config.pageParam.pageSize
+})
+// 表格行数据
+const dataSource = ref([])
+
+let pagination = reactive({
+  total: dataSource.value.length,
+  current: config.pageParam.pageNum,
+  pageSize: config.pageParam.pageSize,
+  showSizeChanger: true,
+  pageSizeOptions: config.pageParam.pageSizeOptions,
+  showQuickJumper: true
+})
+
+onMounted(() => {
+  getData();
+})
+
+const search = () => {
+  getData()
+}
+
+const getData = async () => {
+  callUser("/roles/pageQueryRoles", queryform.value).then((res) => {
+    if (res.code != 200) {
+      message.error(res.message)
+      dataSource.value = []
+      return
+    }
+    dataSource.value = res.data.records
+  });
+}
+
+const handleAdd = async (title) => {
+  openTitle.value = title;
+  open.value = true;
+  nextTick(() => {
+    if (formModel.value) {
+      formModel.value.openForm({});
+    } else {
+      console.log('formModel is not ready yet');
+    }
+  });
+}
+
+const handleCancelModal = () => {
+  formModel.value.resetAll(bres => {
+    if(bres) open.value = false;
+  });
+}
+
+</script>
\ No newline at end of file
diff --git a/ebike-operate/src/views/Urban/SiteManage/index.vue b/ebike-operate/src/views/Urban/SiteManage/index.vue
index 915114c..875e00b 100644
--- a/ebike-operate/src/views/Urban/SiteManage/index.vue
+++ b/ebike-operate/src/views/Urban/SiteManage/index.vue
@@ -113,7 +113,7 @@
             <SettingOutlined style="margin-right: 5px" />{{ column.title }}
           </template>
         </template>
-        <template #bodyCell="{ column, record }">
+        <template #bodyCell="{ column }">
           <template v-if="column.key === 'action'">
             <a-space>
               <a>详情</a>
@@ -190,75 +190,96 @@ const columns = ref([
     dataIndex: 'typeName'
   },
   {
-    key: 'regionName',
+    key: 'operationRegionName',
     title: '运营区域',
     width: 150,
     align: 'center',
-    dataIndex: 'regionName'
+    dataIndex: 'operationRegionName'
   },
   {
-    key: 'simpleName',
-    title: '区域简称',
+    key: 'siteName',
+    title: '站点名称',
     width: 150,
     align: 'center',
-    dataIndex: 'simpleName'
+    dataIndex: 'siteName'
   },
   {
     key: 'inOperation',
-    title: '运营状态',
+    title: '站点级别',
     width: 150,
     align: 'center',
     dataIndex: 'inOperation'
   },
   {
     key: 'regionRank',
-    title: '区域级别',
-    width: 150,
+    title: '站点地址',
+    width: 300,
     align: 'center',
     dataIndex: 'regionRank'
   },
   {
     key: 'regionCode',
-    title: '区域编码',
+    title: '负责人',
     width: 150,
     align: 'center',
     dataIndex: 'regionCode'
   },
   {
     key: 'siteCount',
-    title: '站点数量',
+    title: '实时车辆',
     width: 150,
     align: 'center',
     dataIndex: 'siteCount'
   },
   {
     key: 'freeDuration',
-    title: '免费时长',
+    title: '可调入/调出',
     width: 150,
     align: 'center',
     dataIndex: 'freeDuration'
   },
   {
     key: 'billingStandard',
-    title: '计费标准',
+    title: '累计借车量',
     width: 200,
     align: 'center',
     dataIndex: 'billingStandard'
   },
   {
     key: 'dispatchFee',
-    title: '运调度费(元)',
+    title: '累计还车量',
     width: 250,
     align: 'center',
     dataIndex: 'dispatchFee'
   },
   {
     key: 'cappedAmount',
-    title: '封顶金额(元)',
+    title: '累计调入量',
     width: 150,
     align: 'center',
     dataIndex: 'cappedAmount'
   },
+  {
+    key: 'createdAt',
+    title: '累计调出量',
+    width: 150,
+    align: 'center',
+    dataIndex: 'createdAt'
+  },
+  {
+    key: 'createdAt',
+    title: '规范停车',
+    width: 350,
+    align: 'center',
+    dataIndex: 'createdAt'
+  },
+  {
+    key: 'createdAt',
+    title: '站点标签',
+    width: 200,
+    align: 'center',
+    dataIndex: 'createdAt'
+  },
   {
     key: 'createdAt',
     title: '创建时间',
@@ -266,6 +287,13 @@ const columns = ref([
     align: 'center',
     dataIndex: 'createdAt'
   },
+  {
+    key: 'createdAt',
+    title: '更新时间',
+    width: 150,
+    align: 'center',
+    dataIndex: 'createdAt'
+  },
   {
     title: '操作',
     key: 'action',
diff --git a/ebike-operate/src/views/form/permmanage/permform.vue b/ebike-operate/src/views/form/permmanage/permform.vue
index 9866f36..076c339 100644
--- a/ebike-operate/src/views/form/permmanage/permform.vue
+++ b/ebike-operate/src/views/form/permmanage/permform.vue
@@ -16,7 +16,31 @@
           required
           :rules="[{ required: true, message: '请输入权限名称' }]"
         >
-          <a-input v-model:value="form.description" placeholder="请输入权限名称" />
+          <a-input
+            v-model:value="form.description"
+            placeholder="请输入权限名称"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="菜单类型"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+          name="permType"
+        >
+          <a-select
+            v-model:value="form.permType"
+            placeholder="请选择菜单类型"
+          >
+            <a-select-option
+              v-for="(item) in permTypeList"
+              :key="item.id"
+              :value="item.id"
+            >{{ item.name }}</a-select-option>
+          </a-select>
         </a-form-item>
       </a-col>
     </a-row>
@@ -28,14 +52,9 @@
           :wrapper-col="{ span: 21 }"
           name="parentId"
         >
-          <a-input
-            style="display: none;"
-            v-model:value="form.parentId"
-          />
           <a-cascader
-            v-model:value="parentValues"
+            v-model:value="form.parentId"
             :options="parentOptions"
-            :load-data="loadParentData"
             change-on-select
             placeholder="请选择父级权限"
             @change="changeParent"
@@ -53,26 +72,37 @@
           required
           :rules="[{ required: true, message: '请输入权限编码' }]"
         >
-          <a-input v-model:value="form.code" placeholder="请输入权限编码" :addon-before="form.pcode" />
+          <a-input
+            v-model:value="form.code"
+            placeholder="请输入权限编码"
+            :addon-before="form.pcode"
+          />
         </a-form-item>
       </a-col>
     </a-row>
     <a-row>
-        <a-col :xs="24">
-          <a-form-item
-            label="类型"
-            :label-col="{ span: 3 }"
-            :wrapper-col="{ span: 21 }"
-            name="type"
-            required
-            :rules="[{ required: true, message: '请选择类型' }]"
+      <a-col :xs="24">
+        <a-form-item
+          label="类型"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+          name="type"
+          required
+          :rules="[{ required: true, message: '请选择类型' }]"
+        >
+          <a-select
+            v-model:value="form.type"
+            placeholder="请选择类型"
           >
-            <a-select v-model:value="form.type" placeholder="请选择类型">
-              <a-select-option v-for="(item) in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
+            <a-select-option
+              v-for="(item) in typeList"
+              :key="item.id"
+              :value="item.id"
+            >{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
   </a-form>
 </template>
 
@@ -80,7 +110,7 @@
 import { ref } from 'vue'
 import { callUser } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
-import { dataFormat } from '@/utils/tools'
+import _ from 'lodash'
 
 const formRef = ref();
 const formData = () => ({
@@ -91,7 +121,8 @@ const formData = () => ({
   parentId: "",
   type: "",
   pcode: "",
-  code: ""
+  code: "",
+  permType: null
 });
 const form = ref(formData());
 const data = ref([]);
@@ -100,16 +131,26 @@ const parentOptions = ref([])
 const typeList = ref([{
   id: 0,
   name: '最高权限'
-},{
+}, {
   id: 1,
   name: '页面权限'
-},{
+}, {
   id: 2,
   name: '按钮权限'
-},{
+}, {
   id: 3,
   name: '接口权限'
 }])
+const permTypeList = ref([{
+  id: 0,
+  name: '全系统'
+}, {
+  id: 1,
+  name: 'PC端'
+}, {
+  id: 2,
+  name: '小程序端'
+}])
 
 const openForm = (params = {}) => {
   form.value = {
@@ -120,24 +161,24 @@ const openForm = (params = {}) => {
 
 const loadPermData = (permId) => {
   if (permId) {
-    callUser("/permissions/getInfo/"+ permId, {}, "get").then(res => {
+    callUser("/permissions/getInfo/" + permId, {}, "get").then(res => {
       if (res.code == 200) {
         if (res.data) {
           form.value = {
             ...res.data
           };
           const permCode = res.data.permCode;
-          if(res.data.parentId === null || res.data.parentId === undefined){
+          if (res.data.parentId === null || res.data.parentId === undefined) {
             form.value.code = permCode;
             form.value.pcode = "";
           }
-          else
-          {
+          else {
             form.value.code = permCode.substring(permCode.lastIndexOf('.') + 1);
             form.value.pcode = permCode.substring(0, permCode.lastIndexOf('.'));
           }
-          if(parentOptions.value.length > 0){
+          if (parentOptions.value.length > 0) {
             parentValues.value = getParentValues(parentOptions.value, res.data.permId);
+            form.value.parentId = parentValues.value
             console.log(parentValues.value)
           }
         }
@@ -151,11 +192,11 @@ const loadPermData = (permId) => {
 function getParentValues(tree, targetId, path = []) {
   for (const node of tree) {
     if (node.permId === targetId) {
-      return path; 
+      return path;
     }
     if (node.children) {
       const result = getParentValues(node.children, targetId, [...path, node.permId]);
-      if (result) return result; 
+      if (result) return result;
     }
   }
   return null; // 未找到目标节点
@@ -163,7 +204,7 @@ function getParentValues(tree, targetId, path = []) {
 
 const loadParentData = (params) => {
   parentOptions.value = [];
-  callUser("/permissions/list", {},"get").then((res) => {
+  callUser("/permissions/list", {}, "get").then((res) => {
     if (res.code != 200) {
       message.error(res.message)
       parentOptions.value = []
@@ -191,12 +232,12 @@ const buildTreeWithChildren = (data) => {
   data.forEach(item => {
     const child = map.get(item.permId);
     if (item.parentId === null || item.parentId === undefined) {
-      roots.push(child); 
+      roots.push(child);
     } else {
       const parent = map.get(item.parentId);
       if (parent) {
         parent.children = parent.children || [];
-        parent.children.push(child); 
+        parent.children.push(child);
       } else {
         roots.push(child);
       }
@@ -206,41 +247,41 @@ const buildTreeWithChildren = (data) => {
 }
 
 const changeParent = (data) => {
-  console.log(data)
+
+  const item = findItemByValue(parentOptions.value, data[data.length - 1]);
+  form.value.permCode = item.permCode
 }
-const formSave = (callBack) => {
-  formRef.value.validate().then(() => {
-    let params = {
-      orgId: "",
-      orgName: "",
-      orgCode: "",
-      createdTime: dataFormat(new Date(),'yyyy-MM-dd HH:mm:ss'),
+
+const findItemByValue = (options, value) => {
+  for (const option of options) {
+    if (option.permId == value) {
+      return option;
     }
-    if (form.value.orgId) {
-      params = {
-        ...form.value
+    if (option.children) {
+      const found = findItemByValue(option.children, value);
+      if (found) {
+        return found;
       }
-      callUser("/organizations/update", params).then(res => {
-          if (res.code != 200) {
-            message.error(res.message);
-            if (callBack) {
-              callBack(false, res);
-            }
-            return;
-          }
-          if (callBack) {
-            callBack(true, res);
-          }
-          resetAll();
-      }).catch(error => {
-        if (callBack) {
-            callBack(false, error);
-          }
-      });
     }
-    else {
-      callUser("/organizations/save", params).then(res => {
-        if (res.code!= 200) {
+  }
+  return null;
+}
+
+const formSave = (callBack) => {
+  formRef.value.validate().then((res) => {
+    const data = _.cloneDeep(res);
+    let params = {
+      ...data,
+      parentId: !Array.isArray(data['parentId']) ? data['parentId'] : data['parentId'][data['parentId'].length - 1],
+      level: data['parentId'].length == 0 ? 1 : data['parentId'].length + 1,
+      permCode: form.value.permCode + "." + data['code'].toLowerCase()
+    }
+    delete params['code']
+    if (form.value.permId) {
+      params['permId'] = form.value.permId;
+      params['permCode'] = form.value.pcode + "." + form.value.code;
+      callUser("/permissions/update", params).then(res => {
+        if (res.code != 200) {
           message.error(res.message);
           if (callBack) {
             callBack(false, res);
@@ -250,14 +291,33 @@ const formSave = (callBack) => {
         if (callBack) {
           callBack(true, res);
         }
-        resetAll(); 
+        resetAll();
       }).catch(error => {
         if (callBack) {
           callBack(false, error);
         }
-      }); 
+      });
     }
-  });  
+    else {
+      callUser("/permissions/save", params).then(res => {
+        if (res.code != 200) {
+          message.error(res.message);
+          if (callBack) {
+            callBack(false, res);
+          }
+          return;
+        }
+        if (callBack) {
+          callBack(true, res);
+        }
+        resetAll();
+      }).catch(error => {
+        if (callBack) {
+          callBack(false, error);
+        }
+      });
+    }
+  });
 };
 
 const resetAll = (callBack) => {
diff --git a/ebike-operate/src/views/form/rolemanage/RoleManage.vue b/ebike-operate/src/views/form/rolemanage/RoleManage.vue
new file mode 100644
index 0000000..ac79dcb
--- /dev/null
+++ b/ebike-operate/src/views/form/rolemanage/RoleManage.vue
@@ -0,0 +1,184 @@
+<template>
+  <a-form
+    :model="form"
+    ref="formRef"
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="角色名称"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 12 }"
+          name="roleName"
+          required
+          :rules="[{ required: true, message: '请输角色名称' }]"
+        >
+          <a-input
+            v-model:value="form.roleName"
+            placeholder="请输角色名称"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="角色描述"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 12 }"
+          name="roleDescription"
+        >
+          <a-input
+            v-model:value="form.roleDescription"
+            placeholder="请输入角色描述"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="菜单权限配置"
+          :label-col="{ span: 4 }"
+          :wrapper-col="{ span: 21 }"
+          name="roleDescription"
+        >
+          <a-tabs
+            v-model:activeKey="activeKey"
+            @click="clickTab"
+          >
+            <a-tab-pane
+              key="1"
+              tab="运营后台"
+            >
+              <div style="border: solid 1px #ddd;margin-top: -15px;">
+                <a-tree
+                  v-if="treeDataByWeb.length"
+                  defaultExpandAll
+                  v-model:checkedKeys="checkedKeys"
+                  @check="checkNode"
+                  v-model:tree-data="treeDataByWeb"
+                  checkable
+                >
+                  <template #title="{ description }">
+                    {{ description }}
+                  </template>
+                </a-tree>
+              </div>
+
+            </a-tab-pane>
+            <a-tab-pane
+              key="2"
+              tab="运维小程序"
+              force-render
+            >
+              <div style="border: solid 1px #ddd;margin-top: -15px;">
+                <a-tree
+                  v-if="treeDataByApplet.length"
+                  v-model:checkedKeys="checkedKeys"
+                  @check="checkNode"
+                  :tree-data="treeDataByApplet"
+                  defaultExpandAll
+                  checkable
+                >
+                  <template #title="{ description }">
+                    {{ description }}
+                  </template>
+                </a-tree>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+  
+<script setup>
+import { ref } from 'vue'
+import { callUser } from '@/apis/call.js'
+import { message } from 'ant-design-vue'
+import _ from 'lodash'
+
+const formRef = ref();
+const form = ref({});
+const activeKey = ref("1")
+const checkedKeys = ref([])
+const treeDataByWeb = ref([])
+const treeDataByApplet = ref([])
+const treeDataList = ref([])
+
+const openForm = (params = {}) => {
+  loadData(params);
+};
+
+const loadData = () => {
+  callUser("/permissions/list", {}, "get").then((res) => {
+    if (res.code != 200) {
+      message.error(res.message)
+      treeData.value = []
+      return
+    }
+    const dataList = res.data.map((item) => {
+      return { ...item, key: item.permId }
+    })
+    treeDataList.value = dataList;
+    const newDataList = buildTreeWithChildren(dataList, 1)
+    treeDataByWeb.value = [{ description: "全部", key: "all", children: [...newDataList] }]
+  });
+}
+
+const clickTab = (e) => {
+  debugger
+}
+
+const checkNode = (checkNodes) => {
+  debugger
+}
+
+const buildTreeWithChildren = (data, where) => {
+  const map = new Map();
+  const roots = [];
+  data.forEach(item => {
+    map.set(item.permId, { ...item });
+  });
+  data.forEach(item => {
+    if (item['permType'] == where) {
+      const child = map.get(item.permId);
+      child.code = child.permCode;
+      if (item.parentId === null || item.parentId === undefined) {
+        roots.push(child);
+      } else {
+        const parent = map.get(item.parentId);
+        if (parent) {
+          parent.children = parent.children || [];
+          child.code = child.permCode.replace(parent.permCode + ".", '');
+          parent.children.push(child);
+        } else {
+          roots.push(child);
+        }
+      }
+    }
+  });
+  return roots;
+}
+
+const formSave = (callBack) => {
+  formRef.value.validate().then((res) => {
+
+  });
+};
+
+const resetAll = (callBack) => {
+  formRef.value.resetFields();
+  if (callBack) {
+    callBack(true, form.value);
+  }
+}
+
+defineExpose({ openForm, formSave, resetAll });
+</script>
+  
\ No newline at end of file