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 | }; | ... | ... |