修改了数据权限

src/api/system/menu/menu.ts

@@ -22,6 +22,7 @@ enum Api {
   menuList = '/system/menu/list',
   menuSelectList = '/system/menu/treeSelect',
   roleMenuSelected = '/system/menu/roleMenuTreeSelect/',
+  treeSelectMC = '/system/menu/treeSelectMC/'
 }
 
 
@@ -63,3 +64,7 @@ export const getMenuSelect = (params?: any) =>
 /** 获取角色已选择的菜单*/
 export const getRoleMenuSelected = (params?: any) =>
   defHttp.get<any>({ url: Api.roleMenuSelected + params.businessId });
+
+/** 获取角色已有的菜单*/
+export const getRoleMenuSelectedMC = (params?: any) =>
+  defHttp.get<any>({ url: Api.treeSelectMC + params.businessId });

src/api/system/role/role.ts

@@ -21,6 +21,8 @@ enum Api {
   addRole =  '/system/role/add',
   updataRole = '/system/role/update/',
   exportApi = '/system/role/export',
+  addDataScopeApi = '/system/role/dataScope',
+  roleDeptTreeSelect = '/system/dept/roleDeptTreeSelect/'
 }
 
 
@@ -57,3 +59,11 @@ export const roleUpdataApi = (params: any) =>
 /** 角色列表导出*/
 export const exportRoleList = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.exportApi, params , responseType: 'blob'});
+
+/** 新增角色数据权限*/
+export const addDataScopeApi = (params: any) =>
+  defHttp.put({ url: Api.addDataScopeApi, params: params });
+
+/** 校验角色和菜单信息*/
+export const getRoleDeptTreeSelect = (params: any) =>
+  defHttp.get<any>({ url: Api.roleDeptTreeSelect + params.roleId +'/'+ params.menuId });

src/views/system/role/RoleModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="45%"
+    height="500"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <div class="modal-content">
+      <div class="table-container">
+        <BasicTable @register="registerTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record),
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </div>
+      <div class="form-container">
+        <BasicForm @register="registerForm">
+          <template #menu="{ model, field }">
+            <BasicTree
+              v-model:value="model[field]"
+              :treeData="treeDataList"
+              :fieldNames="{ title: 'label', key: 'id' }"
+              checkable
+              toolbar
+            />
+          </template>
+        </BasicForm>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script setup lang="ts">
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { useModalInner } from '@/components/Modal';
+import BasicModal from '@/components/Modal/src/BasicModal.vue';
+import { ref, unref } from 'vue';
+import { Table } from 'ant-design-vue';
+import { ModelFormSchema } from "@/views/system/role/roleModal.data";
+import {addDataScopeApi, getRoleDeptTreeSelect, roleDetailApi} from "@/api/system/role/role";
+import { BasicForm, useForm } from '@/components/Form';
+import {getMenuListByPage, getMenuSelect, getRoleMenuSelectedMC} from "@/api/system/menu/menu";
+import { columns } from "@/views/system/role/roleModal.data";
+import { useMessage } from '@/hooks/web/useMessage';
+import { BasicTree, TreeItem } from '@/components/Tree';
+
+defineOptions({ name: 'RoleModal' });
+const loadingRef = ref(false);
+// 列表
+const dataSource = ref([]);
+const treeData = ref();
+const roleId = ref()
+const isPermiss = ref(true)
+const getTitle = ref('数据权限信息');
+const { createMessage } = useMessage();
+const emit = defineEmits(['success', 'register']);
+const formData = ref({});
+const treeDataList = ref<TreeItem[]>([]);
+
+const [registerTable, { reload,getForm }] = useTable({
+  api: async (params) => {
+    const param = {
+      businessId: roleId.value
+    }
+    const response = await getRoleMenuSelectedMC(param);
+    //进行处理数据
+    const transformedData = transformData(response.data); // 定义一个函数transformData来做你需要的数据转换
+    return { ...response, data: transformedData };
+  },
+  columns,
+  useSearchForm: false,
+  showTableSetting: false,
+  bordered: true,
+  isTreeTable: true,
+  pagination: false,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 50,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: undefined,
+  },
+});
+
+
+const [registerModal, { closeModal,setModalProps }] = useModalInner(async (data) => {
+  isPermiss.value = data.record.isPermiss
+  roleId.value = data.record.businessId
+  roleDetailApi(roleId.value).then(res => {
+    formData.value = res.data
+    const form = {
+      roleName:res.data.roleName
+    }
+    setFieldsValue({
+      ...form,
+    });
+  })
+  if (unref(treeDataList).length === 0) {
+    const treeRes = await getMenuSelect();
+    treeDataList.value = (treeRes.data) as any as TreeItem[];
+  }
+
+  //控制
+  updateSchema({
+    field: 'dataScope',
+    componentProps: {
+      onChange: (value: any, option: any, form: any) => {
+        //调用接口 返回的参数赋值给dictValue
+        if (value === '2'){
+          updateSchema({
+            field: 'menuIds',
+            ifShow: true
+          });
+        } else {
+          updateSchema({
+            field: 'menuIds',
+            ifShow:false
+          });
+        }
+      },
+    },
+  });
+  reload()
+});
+
+//初始化表单
+const [registerForm, { setFieldsValue, updateSchema, resetFields, validate,getFieldsValue }] = useForm({
+  labelWidth: 100,
+  schemas: ModelFormSchema,
+  showActionButtonGroup: false,
+});
+
+
+/**编辑按钮*/
+function handleEdit(record: Recordable) {
+  formData.value.menuId = record.businessId
+  formData.value.menuName = record.menuName
+  const form = {
+    menuName:record.menuName
+  }
+  setFieldsValue({
+    ...form,
+  });
+  const params = {
+    menuId: formData.value.menuId,
+    roleId: formData.value.businessId
+  }
+  getRoleDeptTreeSelect(params).then(res => {
+    formData.value.deptCheckStrictly = res.data.deptCheckStrictly
+  })
+}
+
+/**改变列表结构 列表->树*/
+function transformData(data) {
+  treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
+  return treeData.value
+}
+
+/**结构转换方法*/
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+/**确认按钮*/
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    console.log('values:',values)
+    setModalProps({ confirmLoading: true });
+    formData.value.code = values.dataScope
+    formData.value.menuIds = values.menuIds
+    formData.value.deptIdList = ''
+    formData.value.roleId = ''
+    addDataScopeApi(formData.value).then(res => {
+      if(res.code === 200){
+        createMessage.success('新增成功');
+        closeModal();
+        emit('success', { isUpdate: unref(isPermiss), values: { ...values }});
+      }
+    })
+    reload()
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
+<style scoped lang="less">
+.modal-content {
+  display: flex;
+  height: 100%; // 可以根据需要调整高度
+
+  .table-container, .form-container {
+    flex: 1; // 每个容器占据一半的空间
+    overflow: auto; // 如果内容超出容器高度，则显示滚动条
+  }
+
+  .table-container {
+    border-right: 1px solid #e9ecef; // 可选：在表格和表单之间添加分隔线
+  }
+}
+</style>

src/views/system/role/index.vue

@@ -35,6 +35,7 @@
       </template>
     </BasicTable>
     <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+    <RoleModal @register="registerModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -49,12 +50,16 @@
   import { useRoute,onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
   import { useUserStore } from "@/store/modules/user";
+  import RoleModal from './RoleModal.vue';
+  import {useModal} from "@/components/Modal";
+  import {getMenuListByPage} from "@/api/system/menu/menu";
 
   defineOptions({ name: 'RoleManagement' });
   const filterStore = useFilterStore();
   const route = useRoute();
   const { createMessage } = useMessage();
   const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerModal, { openModal }] = useModal();
   const [registerTable, { reload,getForm }] = useTable({
     title: '角色列表',
     api: getRoleListByPage,
@@ -101,7 +106,10 @@
 
   /**数据权限按钮*/
   function dataPermiss(record: Recordable) {
-    console.log('数据权限----', record)
+    openModal(true, {
+      isPermiss: true,
+      record,
+    });
   }
 
   /**删除按钮*/

src/views/system/role/roleModal.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import {getAllRoleList, setRoleStatus} from '@/api/system/role/role';
+import { useMessage } from '@/hooks/web/useMessage';
+import Icon from "@/components/Icon/Icon.vue";
+import {setMenuStatus} from "@/api/system/menu/menu";
+
+
+type CheckedType = boolean | string | number;
+export const columns: BasicColumn[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'menuName',
+    width: 50,
+    align: 'left',
+    colProps: { span: 8 },
+  },
+];
+
+export const ModelFormSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'menuName',
+    label: '菜单名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '未选择菜单名称',
+      disabled: true,
+    },
+  },
+  {
+    field: 'dataScope',
+    label: '权限范围',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          value: '1',
+          label: '全部数据权限'
+        },
+        {
+          value: '2',
+          label: '自定数据权限'
+        },
+        {
+          value: '3',
+          label: '本部门数据权限'
+        },
+        {
+          value: '4',
+          label: '本部门及以下数据权限'
+        },
+        {
+          value: '5',
+          label: '仅本人数据权限'
+        }
+      ],
+    },
+  },
+  {
+    label: '数据权限',
+    field: 'menuIds',
+    slot: 'menu',
+    ifShow:false
+  },
+];