Commit 37257bbff57fc9863445dff62147b464ee71060e

Authored by fengtao
1 parent 7e2162ee

pref:优化LWM2M表单默认折叠

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