Showing
2 changed files
with
29 additions
and
4 deletions
| 1 | 1 | <template> |
| 2 | 2 | <div :class="prefixCls"> |
| 3 | - <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand"> | |
| 3 | + <CollapseHeader | |
| 4 | + v-bind="$props" | |
| 5 | + :prefixCls="prefixCls" | |
| 6 | + :show="!isClose ? isClose : show" | |
| 7 | + @expand="handleExpand" | |
| 8 | + > | |
| 4 | 9 | <template #title> |
| 5 | 10 | <slot name="title"></slot> |
| 6 | 11 | </template> |
| ... | ... | @@ -12,7 +17,7 @@ |
| 12 | 17 | <div class="p-2"> |
| 13 | 18 | <CollapseTransition :enable="canExpan"> |
| 14 | 19 | <Skeleton v-if="loading" :active="loading" /> |
| 15 | - <div :class="`${prefixCls}__body`" v-else v-show="show"> | |
| 20 | + <div :class="`${prefixCls}__body`" v-else v-show="!isClose ? isClose : show"> | |
| 16 | 21 | <slot></slot> |
| 17 | 22 | </div> |
| 18 | 23 | </CollapseTransition> |
| ... | ... | @@ -35,6 +40,7 @@ |
| 35 | 40 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 36 | 41 | |
| 37 | 42 | const props = defineProps({ |
| 43 | + isClose: { type: Boolean, default: true }, | |
| 38 | 44 | title: { type: String, default: '' }, |
| 39 | 45 | loading: { type: Boolean }, |
| 40 | 46 | /** |
| ... | ... | @@ -58,7 +64,7 @@ |
| 58 | 64 | */ |
| 59 | 65 | lazyTime: { type: Number, default: 0 }, |
| 60 | 66 | }); |
| 61 | - const emit = defineEmits(['expand']); | |
| 67 | + const emit = defineEmits(['expand', 'change', 'hchange']); | |
| 62 | 68 | |
| 63 | 69 | const show = ref(true); |
| 64 | 70 | |
| ... | ... | @@ -69,6 +75,8 @@ |
| 69 | 75 | */ |
| 70 | 76 | function handleExpand() { |
| 71 | 77 | show.value = !show.value; |
| 78 | + emit('change', !show.value); | |
| 79 | + emit('hchange', !show.value); | |
| 72 | 80 | if (props.triggerWindowResize) { |
| 73 | 81 | // 200 milliseconds here is because the expansion has animation, |
| 74 | 82 | useTimeoutFn(triggerWindowResize, 200); | ... | ... |
| ... | ... | @@ -12,10 +12,13 @@ |
| 12 | 12 | >包括引导服务器更新 |
| 13 | 13 | </Checkbox> |
| 14 | 14 | <CollapseContainer |
| 15 | + @hchange="hChange" | |
| 16 | + @change="eChange(item, index)" | |
| 15 | 17 | v-for="(item, index) in dynamicBOOTSTRAP.bootstrap" |
| 16 | 18 | :key="item" |
| 17 | 19 | :title="collapseTitle(item)" |
| 18 | 20 | class="mt-4" |
| 21 | + :isClose="item.close" | |
| 19 | 22 | > |
| 20 | 23 | <template #action> |
| 21 | 24 | <Button |
| ... | ... | @@ -89,12 +92,25 @@ |
| 89 | 92 | import { useModal } from '/@/components/Modal'; |
| 90 | 93 | import ServerConfigModal from './cpns/ServerConfigModal.vue'; |
| 91 | 94 | |
| 95 | + const eChange = (_, e1) => { | |
| 96 | + if (eS) { | |
| 97 | + dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => { | |
| 98 | + if (index === e1) { | |
| 99 | + bootstrap.close = true; | |
| 100 | + } | |
| 101 | + }); | |
| 102 | + } | |
| 103 | + }; | |
| 104 | + let eS = false; | |
| 105 | + const hChange = (e) => { | |
| 106 | + eS = e; | |
| 107 | + }; | |
| 92 | 108 | const collapseTitle = (item) => { |
| 93 | 109 | return `LwM2M Server Short server ID: ${item.shortServerId} Security config mode: ${item.securityMode}`; |
| 94 | 110 | }; |
| 95 | 111 | const bootstrapServerUpdateEnable = ref(false); |
| 96 | 112 | const dynamicBOOTSTRAP: any = reactive({ |
| 97 | - bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234 }], | |
| 113 | + bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234, close: false }], | |
| 98 | 114 | }); |
| 99 | 115 | const dynamicBindRef: any = { |
| 100 | 116 | BootStrapFormItemRef: ref([]), |
| ... | ... | @@ -154,6 +170,7 @@ |
| 154 | 170 | dynamicBOOTSTRAP.bootstrap.push({ |
| 155 | 171 | securityMode: 'NO_SEC', |
| 156 | 172 | shortServerId: 1234, |
| 173 | + close: false, | |
| 157 | 174 | }); |
| 158 | 175 | } |
| 159 | 176 | }; | ... | ... |