Showing
1 changed file
with
39 additions
and
3 deletions
@@ -4,9 +4,28 @@ | @@ -4,9 +4,28 @@ | ||
4 | <OrganizationIdTree | 4 | <OrganizationIdTree |
5 | class="w-1/6 xl:w-1/5" | 5 | class="w-1/6 xl:w-1/5" |
6 | @select="handleSelect" | 6 | @select="handleSelect" |
7 | + :style="[{ width: !isFold ? '0rem' : '20rem' }]" | ||
8 | + :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" | ||
7 | ref="organizationIdTreeRef" | 9 | ref="organizationIdTreeRef" |
8 | /> | 10 | /> |
9 | - <BasicTable @register="registerTable" class="w-5/6 xl:w-4/5"> | 11 | + <div |
12 | + style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | ||
13 | + :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | ||
14 | + > | ||
15 | + <Tooltip v-if="isFold"> | ||
16 | + <template #title>隐藏组织</template> | ||
17 | + <MenuFoldOutlined @click="changeWidth(true)" /> | ||
18 | + </Tooltip> | ||
19 | + <Tooltip v-else> | ||
20 | + <template #title>打开组织</template> | ||
21 | + <MenuUnfoldOutlined @click="changeWidth(false)" /> | ||
22 | + </Tooltip> | ||
23 | + </div> | ||
24 | + <BasicTable | ||
25 | + @register="registerTable" | ||
26 | + class="w-5/6 xl:w-4/5" | ||
27 | + :class="[!isFold ? 'w-423 xl:w-423' : 'w-5/6 xl:w-4/5']" | ||
28 | + > | ||
10 | <template #toolbar> | 29 | <template #toolbar> |
11 | <Authority value="api:yt:device:post"> | 30 | <Authority value="api:yt:device:post"> |
12 | <a-button type="primary" @click="handleCreate" v-if="authBtn(role)"> | 31 | <a-button type="primary" @click="handleCreate" v-if="authBtn(role)"> |
@@ -155,7 +174,7 @@ | @@ -155,7 +174,7 @@ | ||
155 | </div> | 174 | </div> |
156 | </template> | 175 | </template> |
157 | <script lang="ts"> | 176 | <script lang="ts"> |
158 | - import { defineComponent, reactive, unref, nextTick } from 'vue'; | 177 | + import { defineComponent, reactive, unref, nextTick, ref } from 'vue'; |
159 | import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | 178 | import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel'; |
160 | import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table'; | 179 | import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table'; |
161 | import { columns, searchFormSchema } from './config/device.data'; | 180 | import { columns, searchFormSchema } from './config/device.data'; |
@@ -182,7 +201,11 @@ | @@ -182,7 +201,11 @@ | ||
182 | import { authBtn } from '/@/enums/roleEnum'; | 201 | import { authBtn } from '/@/enums/roleEnum'; |
183 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | 202 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
184 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; | 203 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; |
185 | - import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | 204 | + import { |
205 | + QuestionCircleOutlined, | ||
206 | + MenuFoldOutlined, | ||
207 | + MenuUnfoldOutlined, | ||
208 | + } from '@ant-design/icons-vue'; | ||
186 | import { Authority } from '/@/components/Authority'; | 209 | import { Authority } from '/@/components/Authority'; |
187 | 210 | ||
188 | export default defineComponent({ | 211 | export default defineComponent({ |
@@ -201,8 +224,12 @@ | @@ -201,8 +224,12 @@ | ||
201 | QuestionCircleOutlined, | 224 | QuestionCircleOutlined, |
202 | Popover, | 225 | Popover, |
203 | Authority, | 226 | Authority, |
227 | + MenuFoldOutlined, | ||
228 | + MenuUnfoldOutlined, | ||
204 | }, | 229 | }, |
205 | setup(_) { | 230 | setup(_) { |
231 | + const isFold = ref(true); | ||
232 | + | ||
206 | const { createMessage } = useMessage(); | 233 | const { createMessage } = useMessage(); |
207 | const go = useGo(); | 234 | const go = useGo(); |
208 | const searchInfo = reactive<Recordable>({}); | 235 | const searchInfo = reactive<Recordable>({}); |
@@ -314,6 +341,13 @@ | @@ -314,6 +341,13 @@ | ||
314 | createMessage.success('复制成功~'); | 341 | createMessage.success('复制成功~'); |
315 | } | 342 | } |
316 | }; | 343 | }; |
344 | + const changeWidth = (e) => { | ||
345 | + if (e) { | ||
346 | + isFold.value = false; | ||
347 | + } else { | ||
348 | + isFold.value = true; | ||
349 | + } | ||
350 | + }; | ||
317 | 351 | ||
318 | return { | 352 | return { |
319 | registerTable, | 353 | registerTable, |
@@ -338,6 +372,8 @@ | @@ -338,6 +372,8 @@ | ||
338 | hasBatchDelete, | 372 | hasBatchDelete, |
339 | handleDeleteOrBatchDelete, | 373 | handleDeleteOrBatchDelete, |
340 | handleReload, | 374 | handleReload, |
375 | + changeWidth, | ||
376 | + isFold, | ||
341 | }; | 377 | }; |
342 | }, | 378 | }, |
343 | }); | 379 | }); |