@peng_kai/kit 0.2.27 → 0.2.28

package/admin/components/permission-tree/PermissionTree.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Checkbox } from 'ant-design-vue';
+import { Checkbox, FormItemRest } from 'ant-design-vue';
 import { computed, triggerRef, watch } from 'vue';
 
 interface TTree {
@@ -9,19 +9,6 @@ interface TTree {
   children?: TTree[]
 }
 
-export function treeToIds(tree: TTree[]) {
-  const ids = [] as number[];
-
-  const isCheckedFn = (node: TTree) => {
-    node.checked && ids.push(node.id);
-    node.children?.length && node.children.forEach(isCheckedFn);
-  };
-
-  tree.forEach(isCheckedFn);
-
-  return ids;
-}
-
 function treeToTable(tree: TTree[]) {
   interface TD {
     id: number
@@ -79,47 +66,36 @@ function treeToStates(tree: TTree[]) {
 
   tree.forEach(assId);
 
-  // for (const id in ids) {
-  //   const state = states[id];
-  //   state.indet = isIndet(state.children.map(cid => states[cid].checked));
-  //   state.children.forEach(cid => states[cid].checked = state.checked);
-  //   [...state.parents].reverse().forEach((pid) => {
-  //     const checks = states[pid].children.map(cid => states[cid].checked);
-  //     state.indet = isIndet(checks);
-  //     state.checked = checks.every(checked => checked);
-  //   });
-  // }
-
-  // Object.keys(states)
-  // [...ids].forEach((id) => {
-  //   const state = states[id];
-  //   state.checked = true;
-  //   state.children.forEach((cid) => {
-  //     states[cid].checked = true;
-  //     states[cid].indet = false;
-  //   });
-  // });
-
   return states;
 }
 
 function updateStates(states: ReturnType<typeof treeToStates>, id: number, checked: boolean) {
   const state = states[id];
+
+  if (!state)
+    return;
+
   state.checked = checked;
   state.indet = false;
   state.children.forEach((cid) => {
-    states[cid].checked = checked;
-    states[cid].indet = false;
+    const cState = states[cid];
+    if (cState) {
+      cState.checked = checked;
+      cState.indet = false;
+    }
   });
-  [...state.parents].reverse().forEach((pid) => {
-    const checks = states[pid].children.map(pid => states[pid].checked);
-    states[pid].indet = isIndet(checks);
-    states[pid].checked = checks.every(checked => checked);
+  [...state.parents].forEach((pid) => {
+    const pState = states[pid];
+    if (pState) {
+      const checks = pState.children.map(cid => states[cid]?.checked);
+      pState.indet = isIndet(checks);
+      pState.checked = checks.every(checked => checked);
+    }
   });
 }
 
 function statesToIds(states: ReturnType<typeof treeToStates>) {
-  return Object.keys(states).map(Number).filter(id => states[id].checked);
+  return Object.keys(states).map(Number).filter(id => states[id]?.checked);
 }
 
 function findAllParents(tree: any[], id: number, path: any[] = []): any[] | undefined {
@@ -157,60 +133,71 @@ function isIndet(arr: boolean[]) {
 
 <script setup lang="ts">
 const props = defineProps<{
-  treeData: TTree[]
+  treeData: TTree[] | null | undefined
 }>();
 const ids = defineModel<number[]>('value', { default: [] });
-const tableData = computed(() => treeToTable(props.treeData));
-const stateMap = computed(() => treeToStates(props.treeData));
+const tableData = computed(() => props.treeData && treeToTable(props.treeData));
+const stateMap = computed(() => props.treeData && treeToStates(props.treeData));
 
 watch(ids, (newV, oldV) => {
-  if (newV === oldV)
+  if (newV === oldV || !stateMap.value)
     return;
 
-  newV.forEach(id => updateStates(stateMap.value, id, true));
+  newV.forEach(id => updateStates(stateMap.value!, id, true));
   triggerRef(stateMap);
 }, { immediate: true });
 
+watch(stateMap, (newV) => {
+  if (newV) {
+    ids.value.forEach(id => updateStates(newV, id, true));
+    triggerRef(stateMap);
+  }
+});
+
 function onCheckChange(id: number) {
-  const checked = !ids.value.includes(id);
-  updateStates(stateMap.value, id, checked);
-  ids.value = statesToIds(stateMap.value);
+  if (stateMap.value) {
+    const checked = !ids.value.includes(id);
+    updateStates(stateMap.value, id, checked);
+    ids.value = statesToIds(stateMap.value);
+  }
 }
 </script>
 
 <template>
   <table class="w-full border-collapse border-$antd-colorBorderSecondary" border>
-    <tr v-for="(row, ri) of tableData" :key="ri">
-      <!-- 模块 -->
-      <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
-        <Checkbox
-          :checked="stateMap[row[0].id].indet ? false : stateMap[row[0].id].checked"
-          :indeterminate="stateMap[row[0].id].indet" @change="onCheckChange(row[0].id)"
-        >
-          {{ row[0].label }}{{ row[0].id }}
-        </Checkbox>
-      </td>
-      <!-- 页面 -->
-      <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
-        <Checkbox
-          :checked="stateMap[row[1].id].indet ? false : stateMap[row[1].id].checked"
-          :indeterminate="stateMap[row[1].id].indet" @change="onCheckChange(row[1].id)"
-        >
-          {{ row[1].label }}
-        </Checkbox>
-      </td>
-      <!-- 功能 -->
-      <td v-if="row[2]" class="px-[1em] py-0.5em">
-        <div class="feat-list">
+    <FormItemRest>
+      <tr v-for="(row, ri) of tableData" :key="ri">
+        <!-- 模块 -->
+        <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
+          <Checkbox
+            :checked="stateMap?.[row[0].id].indet ? false : stateMap?.[row[0].id].checked"
+            :indeterminate="stateMap?.[row[0].id].indet" @change="onCheckChange(row[0].id)"
+          >
+            {{ row[0].label }}{{ row[0].id }}
+          </Checkbox>
+        </td>
+        <!-- 页面 -->
+        <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
           <Checkbox
-            v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap[fItem.id].checked"
-            @change="onCheckChange(fItem.id)"
+            :checked="stateMap?.[row[1].id].indet ? false : stateMap?.[row[1].id].checked"
+            :indeterminate="stateMap?.[row[1].id].indet" @change="onCheckChange(row[1].id)"
           >
-            {{ fItem.label }}
+            {{ row[1].label }} {{ row[1].id }}
           </Checkbox>
-        </div>
-      </td>
-    </tr>
+        </td>
+        <!-- 功能 -->
+        <td v-if="row[2]" class="px-[1em] py-0.5em">
+          <div class="feat-list">
+            <Checkbox
+              v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap?.[fItem.id].checked"
+              @change="onCheckChange(fItem.id)"
+            >
+              {{ fItem.label }} {{ fItem.id }}
+            </Checkbox>
+          </div>
+        </td>
+      </tr>
+    </FormItemRest>
   </table>
 </template>
 

package/admin/components/permission-tree/index.ts

@@ -1 +1 @@
-export { default as PermissionTreeCheckbox, treeToIds } from './PermissionTree.vue';
+export { default as PermissionTreeCheckbox } from './PermissionTree.vue';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "",
   "author": "",
   "license": "ISC",