角色修改

src/views/system/role/addRoleModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :fieldNames="{ title: 'label', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicForm, useForm } from '@/components/Form';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { formSchema } from './role.data';
+import { BasicTree, TreeItem } from '@/components/Tree';
+import { roleDetailApi,roleUpdataApi,addRoleApi } from "@/api/system/role/role";
+import { getMenuSelect,getRoleMenuSelected } from "@/api/system/menu/menu";
+import { useMessage } from "@/hooks/web/useMessage";
+
+defineOptions({ name: 'AddRoleModal' });
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+const roleId = ref('');
+const treeData = ref<TreeItem[]>([]);
+
+const [registerModal, { closeModal,setModalProps }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  //获取角色信息
+  isUpdate.value = !!data?.isUpdate;
+  // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+  if (unref(treeData).length === 0) {
+    const treeRes = await getMenuSelect();
+    treeData.value = (treeRes.data) as any as TreeItem[];
+  }
+  //获取角色已选择的菜单
+  const params = {
+    businessId: data.record.businessId
+  }
+  const selectedTree = await getRoleMenuSelected(params);
+  // 过滤掉值小于10的项，并将选中的节点ID从数字数组转换为字符串数组
+  const selectedKeys = selectedTree.data.checkedKeys
+    .filter(key => key >= 100) // 过滤掉值小于10的项
+    .map(key => key.toString()); // 将数字转换为字符串
+  if (unref(isUpdate)) {
+    // 获取行数据的id
+    roleId.value = data.record.businessId;
+    // 通过id获取角色详情信息
+    roleDetailApi(roleId.value).then(res => {
+      const form = res.data
+      form.menuIds = selectedKeys
+      // 塞值
+      setFieldsValue({
+        ...form,
+      });
+    })
+  }
+});
+
+
+const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  labelWidth: 90,
+  baseColProps: { span: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
+
+const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+
+async function handleSubmit() {
+  try {
+    const formData = await validate();
+    setModalProps({ confirmLoading: true });
+    // 编辑
+    if(unref(isUpdate)) {
+      formData.businessId = roleId.value
+      roleUpdataApi(formData).then(res => {
+        if(res.code === 200){
+          createMessage.success('编辑成功');
+          closeModal();
+          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('新增成功');
+          closeModal();
+          emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: roleId.value } });
+        }
+      })
+    }
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>

src/views/system/role/index.vue

@@ -2,7 +2,8 @@
   <div>
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+        <a-button type="primary" @click="handleCreateRole"> 新增角色 </a-button>
+<!--        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>-->
         <a-button type="primary" @click="handleExport"> 导出 </a-button>
       </template>
       <template #bodyCell="{ column, record }">
@@ -10,7 +11,6 @@
           <TableAction
             :actions="[
               {
-                // icon: 'clarity:note-edit-line',
                 label: '编辑',
                 onClick: handleEdit.bind(null, record),
               },
@@ -35,7 +35,8 @@
       </template>
     </BasicTable>
     <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
-    <RoleModal @register="registerModal" @success="handleSuccess" />
+<!--    <RoleModal @register="registerModal" @success="handleSuccess" />-->
+    <AddRoleModal @register="registerRoleModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -49,10 +50,9 @@
   import { reactive,unref,onDeactivated,onMounted } from 'vue';
   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";
+  import { useModal } from "@/components/Modal";
+  import AddRoleModal from './addRoleModal.vue';
 
   defineOptions({ name: 'RoleManagement' });
   const filterStore = useFilterStore();
@@ -60,6 +60,7 @@
   const { createMessage } = useMessage();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerModal, { openModal }] = useModal();
+  const [registerRoleModal, { openModal: openAddRoleModal }] = useModal();
   const [registerTable, { reload,getForm }] = useTable({
     title: '角色列表',
     api: getRoleListByPage,
@@ -88,9 +89,15 @@
     });
   }
 
+  /**新增角色 弹窗*/
+  function handleCreateRole() {
+    openAddRoleModal(true, {
+      isUpdate: false,
+    });
+  }
+
   /** 导出按钮*/
   async function handleExport() {
-    console.log('导出----')
     const params = Object.assign({}, getForm().getFieldsValue());
     const data = await exportRoleList(params);
     downloadByData(data, '角色列表' + '.xlsx');
@@ -98,7 +105,7 @@
 
   /**编辑按钮*/
   function handleEdit(record: Recordable) {
-    openDrawer(true, {
+    openAddRoleModal(true, {
       record,
       isUpdate: true,
     });

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

@@ -14,17 +14,17 @@ export const columns: BasicColumn[] = [
   {
     title: '权限字符',
     dataIndex: 'roleKey',
-    width: 180,
+    width: 150,
   },
   {
     title: '排序',
     dataIndex: 'roleSort',
-    width: 50,
+    width: 150,
   },
   {
     title: '状态',
     dataIndex: 'flag',
-    width: 120,
+    width: 150,
     customRender: ({ record }) => {
       if (!Reflect.has(record, 'pendingStatus')) {
         record.pendingStatus = false;
@@ -61,11 +61,12 @@ export const columns: BasicColumn[] = [
   {
     title: '创建时间',
     dataIndex: 'createDate',
-    width: 180,
+    width: 150,
   },
   {
     title: '备注',
     dataIndex: 'remarks',
+    width: 150,
   },
 ];