pref:优化LWM2M表单默认折叠

 <template>
 <template>
   <div :class="prefixCls">
   <div :class="prefixCls">
-    <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
+    <CollapseHeader
+      v-bind="$props"
+      :prefixCls="prefixCls"
+      :show="!isClose ? isClose : show"
+      @expand="handleExpand"
+    >
       <template #title>
       <template #title>
         <slot name="title"></slot>
         <slot name="title"></slot>
       </template>
       </template>
@@ -12,7 +17,7 @@
     <div class="p-2">
     <div class="p-2">
       <CollapseTransition :enable="canExpan">
       <CollapseTransition :enable="canExpan">
         <Skeleton v-if="loading" :active="loading" />
         <Skeleton v-if="loading" :active="loading" />
-        <div :class="`${prefixCls}__body`" v-else v-show="show">
+        <div :class="`${prefixCls}__body`" v-else v-show="!isClose ? isClose : show">
           <slot></slot>
           <slot></slot>
         </div>
         </div>
       </CollapseTransition>
       </CollapseTransition>
@@ -35,6 +40,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useDesign } from '/@/hooks/web/useDesign';
 
 
   const props = defineProps({
   const props = defineProps({
+    isClose: { type: Boolean, default: true },
     title: { type: String, default: '' },
     title: { type: String, default: '' },
     loading: { type: Boolean },
     loading: { type: Boolean },
     /**
     /**
@@ -58,7 +64,7 @@
      */
      */
     lazyTime: { type: Number, default: 0 },
     lazyTime: { type: Number, default: 0 },
   });
   });
-  const emit = defineEmits(['expand']);
+  const emit = defineEmits(['expand', 'change', 'hchange']);
 
 
   const show = ref(true);
   const show = ref(true);
 
 
@@ -69,6 +75,8 @@
    */
    */
   function handleExpand() {
   function handleExpand() {
     show.value = !show.value;
     show.value = !show.value;
+    emit('change', !show.value);
+    emit('hchange', !show.value);
     if (props.triggerWindowResize) {
     if (props.triggerWindowResize) {
       // 200 milliseconds here is because the expansion has animation,
       // 200 milliseconds here is because the expansion has animation,
       useTimeoutFn(triggerWindowResize, 200);
       useTimeoutFn(triggerWindowResize, 200);

@@ -12,10 +12,13 @@
             >包括引导服务器更新
             >包括引导服务器更新
           </Checkbox>
           </Checkbox>
           <CollapseContainer
           <CollapseContainer
+            @hchange="hChange"
+            @change="eChange(item, index)"
             v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
             v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
             :key="item"
             :key="item"
             :title="collapseTitle(item)"
             :title="collapseTitle(item)"
             class="mt-4"
             class="mt-4"
+            :isClose="item.close"
           >
           >
             <template #action>
             <template #action>
               <Button
               <Button
@@ -89,12 +92,25 @@
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import ServerConfigModal from './cpns/ServerConfigModal.vue';
   import ServerConfigModal from './cpns/ServerConfigModal.vue';
 
 
+  const eChange = (_, e1) => {
+    if (eS) {
+      dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {
+        if (index === e1) {
+          bootstrap.close = true;
+        }
+      });
+    }
+  };
+  let eS = false;
+  const hChange = (e) => {
+    eS = e;
+  };
   const collapseTitle = (item) => {
   const collapseTitle = (item) => {
     return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
     return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
   };
   };
   const bootstrapServerUpdateEnable = ref(false);
   const bootstrapServerUpdateEnable = ref(false);
   const dynamicBOOTSTRAP: any = reactive({
   const dynamicBOOTSTRAP: any = reactive({
-    bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234 }],
+    bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234, close: false }],
   });
   });
   const dynamicBindRef: any = {
   const dynamicBindRef: any = {
     BootStrapFormItemRef: ref([]),
     BootStrapFormItemRef: ref([]),
@@ -154,6 +170,7 @@
       dynamicBOOTSTRAP.bootstrap.push({
       dynamicBOOTSTRAP.bootstrap.push({
         securityMode: 'NO_SEC',
         securityMode: 'NO_SEC',
         shortServerId: 1234,
         shortServerId: 1234,
+        close: false,
       });
       });
     }
     }
   };
   };