💐 解决角色多选半选bug

kicc-ui/src/views/system/role/RoleDrawer.vue

@@ -13,6 +13,7 @@
                    checkable
                    :treeData="state.menuTree"
                    :replaceFields="{ title: 'name', key: 'id' }"
+                   @check="handleHalfCheckedKeysMerge"
         />
       </template>
     </BasicForm>
@@ -25,7 +26,7 @@
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
-  import { reactive } from 'vue';
+  import {reactive, toRaw} from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, DrawerProps, useDrawerInner } from '/@/components/Drawer';
@@ -34,12 +35,21 @@
   import { addRole, editRole, getRole } from '/@/api/controller/system/role';
   import { listToTree } from "/@/utils/helper/treeHelper";
 
+  /** 类型规范统一声明定义区域 */
+  interface WindowState {
+    tag: string;
+    menuTree: TreeItem[];
+    checkedKeys: string[];
+  }
+
   /** 通用变量统一声明区域 */
-  const state = reactive({
+  const state = reactive<WindowState>({
     // 操作标签
     tag: '',
     // 菜单树形数据
-    menuTree: [] as TreeItem[],
+    menuTree: [],
+    // 选中复选框的树节点
+    checkedKeys: []
   });
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
@@ -67,6 +77,7 @@
         props.title = '编辑角色';
         const result = await getRoleMenuIds(roleId);
         const role  = await getRole(roleId);
+        state.checkedKeys = result.extend;
         await setFieldsValue(Object.assign(role, { menuIds: result.extend }));
         break;
     }
@@ -74,6 +85,11 @@
     setDrawerProps(props);
   });
 
+  /** 处理选中的半复选框合并至勾选数据中 */
+  function handleHalfCheckedKeysMerge (checkedKeys: string[], e) {
+    state.checkedKeys = [...checkedKeys, ...e.halfCheckedKeys];
+  }
+
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
@@ -81,6 +97,7 @@
       const formData = await validate();
       // 处理提交之前逻辑
       setDrawerProps({ confirmLoading: true });
+      formData.menuIds = toRaw(state.checkedKeys);
       // 采用tag标签区分操作
       switch (state.tag) {
         case 'add':

kicc-ui/src/views/system/role/index.vue

@@ -56,8 +56,15 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { reactive, toRaw } from 'vue';
 
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+  }
+
   /** 通用变量统一声明区域 */
-  const state = reactive({
+  const state = reactive<TableState>({
     // 选中数组
     ids: [],
     // 非单个禁用

kicc-ui/src/views/system/user/ResetPwdModal.vue

@@ -29,7 +29,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
 
   /** 类型规范统一声明定义区域 */
-  interface FormState {
+  interface WindowState {
     id: string;
     newPassword: string;
   }
@@ -40,7 +40,7 @@
   const emit = defineEmits(['success', 'register']);
   const FormItem = Form.Item;
   const useForm = Form.useForm;
-  const modelRef = reactive<FormState>({
+  const modelRef = reactive<WindowState>({
     id: '',
     newPassword: ''
   });

kicc-ui/src/views/system/user/UserModal.vue

@@ -26,6 +26,12 @@
   import { TreeItem } from "/@/components/Tree";
   import { useMessage } from '/@/hooks/web/useMessage';
 
+  /** 类型规范统一声明定义区域 */
+  interface WindowState {
+    tag: string;
+    deptTree: TreeItem[];
+  }
+
   export default defineComponent({
     name: 'UserModal',
     components: { BasicModal, BasicForm },
@@ -33,11 +39,11 @@
     setup(props, { emit }) {
 
       /** 通用变量统一声明区域 */
-      const state = reactive({
+      const state = reactive<WindowState>({
         // 操作标签
         tag: '',
         // 部门树形数据
-        deptTree: [] as TreeItem[],
+        deptTree: []
       });
       const { createMessage } = useMessage();
       const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({

kicc-ui/src/views/system/user/index.vue

@@ -73,6 +73,14 @@
   import { columns, searchFormSchema } from './user.data';
   import { useMessage } from '/@/hooks/web/useMessage';
 
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+    searchInfo: Recordable;
+  }
+
   export default defineComponent({
     name: 'UserManagement',
     components: {
@@ -86,7 +94,7 @@
     setup() {
 
       /** 通用变量统一声明区域 */
-      const state = reactive({
+      const state = reactive<TableState>({
         // 选中数组
         ids: [],
         // 非单个禁用
@@ -94,7 +102,7 @@
         // 非多个禁用
         multiple: true,
         // 搜索信息
-        searchInfo: {} as Recordable
+        searchInfo: {}
       });
       const { createConfirm } = useMessage();
       const { createMessage } = useMessage();