修改了角色管理页面

src/api/system/role/role.ts

@@ -18,6 +18,9 @@ enum Api {
   RolePageList = '/system/role/list',
   roleDetail = '/system/role/detail/',
   GetAllRoleList = '/system/role/listAll',
+  addRole =  '/system/role/add',
+  updataRole = '/system/role/update/',
+  exportApi = '/system/role/export',
 }
 
 
@@ -28,7 +31,6 @@ export const getAllRoleList = (params?: RoleParams) =>
 export const deleteById = (params?: any) =>
   defHttp.delete<any>({ url: Api.deleteById+params });
 
-
 /** 获取角色详情信息*/
 export const roleDetailApi = (params: any) =>
   defHttp.get<any>({ url: Api.roleDetail + params });
@@ -37,8 +39,21 @@ export const roleDetailApi = (params: any) =>
 export const getRoleListByPage = (params?: any) =>
   defHttp.get<RolePageListGetResultModel>({ url: Api.RolePageList, params });
 
-
 /** 修改角色状态*/
-export const setRoleStatus = (businessId: string, flag: string) =>
-  defHttp.post({ url: Api.setRoleStatus, params: { businessId, flag } });
-
+export const setRoleStatus = (params: any) =>
+  defHttp.put({ url: Api.setRoleStatus, params: params });
+
+/** 新增角色*/
+export const addRoleApi = (params: any) =>
+  defHttp.post({ url: Api.addRole, params: params });
+
+/** 修改角色*/
+export const roleUpdataApi = (params: any) =>
+  defHttp.put<any>({
+    url: Api.updataRole+params.businessId,
+    params: params,
+  });
+
+/** 角色列表导出*/
+export const exportRoleList = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.exportApi, params , responseType: 'blob'});

src/views/system/role/RoleDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'menuName', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { formSchema } from './role.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicTree, TreeItem } from '@/components/Tree';
+
+  import { getMenuList } from '@/api/demo/system';
+  import { roleDetailApi,roleUpdataApi,addRoleApi } from "@/api/system/role/role";
+  import {encryptTwo} from "@/utils/jsencrypt";
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const roleId = ref('');
+  const treeData = ref<TreeItem[]>([]);
+
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+    // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+    if (unref(treeData).length === 0) {
+      treeData.value = (await getMenuList()) as any as TreeItem[];
+    }
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      roleId.value = data.record.businessId;
+      // 通过id获取角色详情信息
+      roleDetailApi(roleId.value).then(res => {
+        const form = res.data
+        // 塞值
+        setFieldsValue({
+          ...form,
+        });
+      })
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+  async function handleSubmit() {
+    try {
+      const formData = await validate();
+      setDrawerProps({ confirmLoading: true });
+      console.log('formData',formData);
+      // 编辑
+      if(unref(isUpdate)) {
+        formData.businessId = roleId.value
+        roleUpdataApi(formData).then(res => {
+          if(res.code === 200){
+            createMessage.success('编辑成功');
+            closeDrawer();
+            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: roleId.value } });
+          }
+        })
+      }else {
+        const paramsAdd = {
+          businessId: formData.businessId,
+          menuIds: formData.menuIds,
+          remarks: formData.remarks,
+          roleKey: formData.roleKey,
+          roleName: formData.roleName,
+          roleSort: formData.roleSort,
+          roleStatus: formData.roleStatus,
+        }
+        addRoleApi(paramsAdd).then(res => {
+          if(res.code === 200){
+            createMessage.success('新增成功');
+            closeDrawer();
+            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: roleId.value } });
+          }
+        })
+      }
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
+</script>

src/views/system/role/index.vue

 <template>
   <div>
-    角色管理
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+        <a-button type="primary" @click="handleExport"> 导出 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                // icon: 'clarity:note-edit-line',
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                // icon: 'clarity:note-edit-line',
+                label: '数据权限',
+                onClick: dataPermiss.bind(null, record),
+              },
+              {
+                // icon: 'ant-design:delete-outlined',
+                label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
-
 <script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getRoleListByPage,deleteById,exportRoleList } from '@/api/system/role/role';
+  import { downloadByData } from '@/utils/file/download';
+  import { useDrawer } from '@/components/Drawer';
+  import RoleDrawer from './RoleDrawer.vue';
+  import RoleDialog from './RoleDialog.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  const { createMessage } = useMessage();
+  import { columns, searchFormSchema } from './role.data';
+  import {useModal} from "@/components/Modal";
+  defineOptions({ name: 'RoleManagement' });
+  const [registerDialog, { openModal }] = useModal();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload,getSearchInfo,getForm }] = useTable({
+    title: '角色列表',
+    api: getRoleListByPage,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
+  });
 
-</script>
+  /***新增角色按钮*/
+  function handleCreate() {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  /** 导出按钮*/
+  async function handleExport() {
+    console.log('导出----')
+    const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
+    const data = await exportRoleList(params);
+    downloadByData(data, '角色列表' + '.xlsx');
+  }
 
-<style scoped>
+  /**编辑按钮*/
+  function handleEdit(record: Recordable) {
+    console.log('编辑----', record)
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
 
-</style>
+  /**数据权限按钮*/
+  function dataPermiss(record: Recordable) {
+    console.log('数据权限----', record)
+    openModal(true, {
+      record,
+      isDialog: true,
+    });
+  }
+
+  /**删除按钮*/
+  async function handleDelete(record: Recordable) {
+    // deleteById(record.businessId);
+    // createMessage.success('删除成功!');
+    // reload();
+    await deleteById(record.businessId);
+    createMessage.success('删除成功!');
+    await reload();
+  }
+
+  function handleSuccess() {
+    reload();
+  }
+</script>

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

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Switch } from 'ant-design-vue';
+import { setRoleStatus } from '@/api/system/role/role';
+import { useMessage } from '@/hooks/web/useMessage';
+
+type CheckedType = boolean | string | number;
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'roleName',
+    width: 200,
+  },
+  {
+    title: '权限字符',
+    dataIndex: 'roleKey',
+    width: 180,
+  },
+  {
+    title: '排序',
+    dataIndex: 'roleSort',
+    width: 50,
+  },
+  {
+    title: '状态',
+    dataIndex: 'flag',
+    width: 120,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.flag === '1',
+        // checkedChildren: '停用',
+        // unCheckedChildren: '启用',
+        loading: record.pendingStatus,
+        onChange(checked: CheckedType) {
+          record.pendingStatus = true;
+          const newStatus = checked ? '1' : '0';
+          const { createMessage } = useMessage();
+          const params = {
+            businessId: record.businessId,
+            flag: newStatus,
+          }
+          setRoleStatus(params)
+            .then(() => {
+              record.flag = newStatus;
+              const text = record.flag === '1' ? '启用' : '停用'
+              createMessage.success( text + `成功`);
+            })
+            .catch(() => {
+              // createMessage.error('操作失败');
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
+    },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'roleNme',
+    label: '角色名称',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'roleKey',
+    label: '权限字符',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'flag',
+    label: '角色状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '启用', value: '1' },
+        { label: '停用', value: '0' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'roleName',
+    label: '角色名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'roleKey',
+    label: '权限字符',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'roleSort',
+    label: '角色排序',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'flag',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '启用', value: '1' },
+        { label: '停用', value: '0' },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remarks',
+    component: 'InputTextArea',
+  },
+  {
+    label: ' ',
+    field: 'menuIds',
+    slot: 'menu',
+  },
+];