Showing
7 changed files
with
46 additions
and
113 deletions
... | ... | @@ -9,20 +9,8 @@ |
9 | 9 | :style="[{ width: !isFold ? '0rem' : '20rem' }]" |
10 | 10 | :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" |
11 | 11 | /> |
12 | - <div | |
13 | - style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | |
14 | - :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | |
15 | - > | |
16 | - <Tooltip v-if="isFold"> | |
17 | - <template #title>隐藏组织</template> | |
18 | - <MenuFoldOutlined @click="changeWidth(true)" /> | |
19 | - </Tooltip> | |
20 | - <Tooltip v-else> | |
21 | - <template #title>打开组织</template> | |
22 | - <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
23 | - </Tooltip> | |
24 | - </div> | |
25 | 12 | <BasicTable |
13 | + style="flex: auto" | |
26 | 14 | @register="registerTable" |
27 | 15 | :searchInfo="searchInfo" |
28 | 16 | class="w-3/4 xl:w-4/5" |
... | ... | @@ -106,7 +94,7 @@ |
106 | 94 | import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; |
107 | 95 | import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig'; |
108 | 96 | import { searchFormSchema, columns } from './config.data'; |
109 | - import { Modal, Tooltip } from 'ant-design-vue'; | |
97 | + import { Modal } from 'ant-design-vue'; | |
110 | 98 | import { JsonPreview } from '/@/components/CodeEditor'; |
111 | 99 | import { findDictItemByCode } from '/@/api/system/dict'; |
112 | 100 | import { alarmContactGetPage } from '/@/api/device/deviceConfigApi'; |
... | ... | @@ -115,7 +103,6 @@ |
115 | 103 | import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig'; |
116 | 104 | import { useMessage } from '/@/hooks/web/useMessage'; |
117 | 105 | import { Authority } from '/@/components/Authority'; |
118 | - import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
119 | 106 | |
120 | 107 | export default defineComponent({ |
121 | 108 | components: { |
... | ... | @@ -126,9 +113,6 @@ |
126 | 113 | ContactDrawer, |
127 | 114 | Switch, |
128 | 115 | Authority, |
129 | - MenuFoldOutlined, | |
130 | - MenuUnfoldOutlined, | |
131 | - Tooltip, | |
132 | 116 | }, |
133 | 117 | setup() { |
134 | 118 | const isFold = ref(true); | ... | ... |
... | ... | @@ -9,20 +9,8 @@ |
9 | 9 | @select="handleSelect" |
10 | 10 | ref="organizationIdTreeRef" |
11 | 11 | /> |
12 | - <div | |
13 | - style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | |
14 | - :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | |
15 | - > | |
16 | - <Tooltip v-if="isFold"> | |
17 | - <template #title>隐藏组织</template> | |
18 | - <MenuFoldOutlined @click="changeWidth(true)" /> | |
19 | - </Tooltip> | |
20 | - <Tooltip v-else> | |
21 | - <template #title>打开组织</template> | |
22 | - <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
23 | - </Tooltip> | |
24 | - </div> | |
25 | 12 | <BasicTable |
13 | + style="flex: auto" | |
26 | 14 | @register="registerTable" |
27 | 15 | :searchInfo="searchInfo" |
28 | 16 | class="w-3/4 xl:w-4/5" |
... | ... | @@ -82,8 +70,6 @@ |
82 | 70 | import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact'; |
83 | 71 | import { searchFormSchema, columns } from './config.data'; |
84 | 72 | import { Authority } from '/@/components/Authority'; |
85 | - import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
86 | - import { Tooltip } from 'ant-design-vue'; | |
87 | 73 | |
88 | 74 | export default defineComponent({ |
89 | 75 | components: { |
... | ... | @@ -93,9 +79,6 @@ |
93 | 79 | TableAction, |
94 | 80 | ContactDrawer, |
95 | 81 | Authority, |
96 | - MenuFoldOutlined, | |
97 | - MenuUnfoldOutlined, | |
98 | - Tooltip, | |
99 | 82 | }, |
100 | 83 | setup() { |
101 | 84 | const isFold = ref(true); | ... | ... |
... | ... | @@ -9,20 +9,8 @@ |
9 | 9 | :style="[{ width: !isFold ? '0rem' : '20rem' }]" |
10 | 10 | :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" |
11 | 11 | /> |
12 | - <div | |
13 | - style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | |
14 | - :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | |
15 | - > | |
16 | - <Tooltip v-if="isFold"> | |
17 | - <template #title>隐藏组织</template> | |
18 | - <MenuFoldOutlined @click="changeWidth(true)" /> | |
19 | - </Tooltip> | |
20 | - <Tooltip v-else> | |
21 | - <template #title>打开组织</template> | |
22 | - <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
23 | - </Tooltip> | |
24 | - </div> | |
25 | 12 | <BasicTable |
13 | + style="flex: auto" | |
26 | 14 | :clickToRowSelect="false" |
27 | 15 | @register="registerTable" |
28 | 16 | :searchInfo="searchInfo" |
... | ... | @@ -104,8 +92,6 @@ |
104 | 92 | import { useModal } from '/@/components/Modal'; |
105 | 93 | import { Authority } from '/@/components/Authority'; |
106 | 94 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
107 | - import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
108 | - import { Tooltip } from 'ant-design-vue'; | |
109 | 95 | |
110 | 96 | export default defineComponent({ |
111 | 97 | components: { |
... | ... | @@ -117,9 +103,6 @@ |
117 | 103 | VideoPreviewModal, |
118 | 104 | TableImg, |
119 | 105 | Authority, |
120 | - MenuFoldOutlined, | |
121 | - MenuUnfoldOutlined, | |
122 | - Tooltip, | |
123 | 106 | }, |
124 | 107 | setup() { |
125 | 108 | const isFold = ref(true); | ... | ... |
1 | 1 | <template> |
2 | - <div class="bg-white m-4 mr-0 overflow-hidden"> | |
2 | + <div :style="foldIconStyle"> | |
3 | + <Tooltip v-if="isFold"> | |
4 | + <template #title>隐藏组织</template> | |
5 | + <MenuFoldOutlined @click="changeWidth(true)" /> | |
6 | + </Tooltip> | |
7 | + <Tooltip v-else> | |
8 | + <template #title>打开组织</template> | |
9 | + <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
10 | + </Tooltip> | |
11 | + </div> | |
12 | + <div v-show="isFold" class="bg-white m-4 mr-0 overflow-hidden"> | |
3 | 13 | <BasicTree |
4 | - v-if="treeData.length > 0" | |
5 | 14 | title="组织列表" |
6 | 15 | toolbar |
7 | 16 | search |
... | ... | @@ -15,13 +24,39 @@ |
15 | 24 | </div> |
16 | 25 | </template> |
17 | 26 | <script lang="ts" setup name="OrganizationIdTree"> |
18 | - import { onMounted, ref } from 'vue'; | |
27 | + import { onMounted, ref, unref } from 'vue'; | |
19 | 28 | import { BasicTree, TreeItem } from '/@/components/Tree'; |
20 | 29 | import { getOrganizationList } from '/@/api/system/system'; |
30 | + import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
31 | + import { computed } from '@vue/reactivity'; | |
21 | 32 | const emit = defineEmits(['select']); |
22 | 33 | const treeData = ref<TreeItem[]>([]); |
23 | 34 | const selectedKeys = ref<string[]>(); |
24 | 35 | const treeExpandData = ref([]); |
36 | + | |
37 | + const isFold = ref(false); | |
38 | + | |
39 | + const changeWidth = (e) => { | |
40 | + if (e) { | |
41 | + isFold.value = false; | |
42 | + } else { | |
43 | + isFold.value = true; | |
44 | + } | |
45 | + }; | |
46 | + | |
47 | + const foldIconStyle = computed(() => { | |
48 | + return unref(isFold) | |
49 | + ? { | |
50 | + padding: '22px 0 0 16px', | |
51 | + position: 'absolute', | |
52 | + left: '85px', | |
53 | + lineHeight: '24px', | |
54 | + } | |
55 | + : { | |
56 | + padding: '22px 0 0 16px', | |
57 | + }; | |
58 | + }); | |
59 | + | |
25 | 60 | //获取所有父级id |
26 | 61 | function findForAllId(data = [], arr = []) { |
27 | 62 | for (const item of data) { | ... | ... |
... | ... | @@ -9,20 +9,8 @@ |
9 | 9 | :style="[{ width: !isFold ? '0rem' : '20rem' }]" |
10 | 10 | :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" |
11 | 11 | /> |
12 | - <div | |
13 | - style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | |
14 | - :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | |
15 | - > | |
16 | - <Tooltip v-if="isFold"> | |
17 | - <template #title>隐藏组织</template> | |
18 | - <MenuFoldOutlined @click="changeWidth(true)" /> | |
19 | - </Tooltip> | |
20 | - <Tooltip v-else> | |
21 | - <template #title>打开组织</template> | |
22 | - <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
23 | - </Tooltip> | |
24 | - </div> | |
25 | 12 | <BasicTable |
13 | + style="flex: auto" | |
26 | 14 | :clickToRowSelect="false" |
27 | 15 | @register="registerTable" |
28 | 16 | :searchInfo="searchInfo" |
... | ... | @@ -99,8 +87,6 @@ |
99 | 87 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
100 | 88 | import { getAppEnvConfig, isDevMode } from '/@/utils/env'; |
101 | 89 | import { Authority } from '/@/components/Authority'; |
102 | - import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
103 | - import { Tooltip } from 'ant-design-vue'; | |
104 | 90 | |
105 | 91 | export default defineComponent({ |
106 | 92 | components: { |
... | ... | @@ -110,9 +96,6 @@ |
110 | 96 | TableAction, |
111 | 97 | ContactDrawer, |
112 | 98 | Authority, |
113 | - MenuFoldOutlined, | |
114 | - MenuUnfoldOutlined, | |
115 | - Tooltip, | |
116 | 99 | }, |
117 | 100 | setup() { |
118 | 101 | const isFold = ref(true); | ... | ... |
... | ... | @@ -8,20 +8,8 @@ |
8 | 8 | :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" |
9 | 9 | ref="organizationIdTreeRef" |
10 | 10 | /> |
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 | 11 | <BasicTable |
12 | + style="flex: auto" | |
25 | 13 | @register="registerTable" |
26 | 14 | class="w-5/6 xl:w-4/5" |
27 | 15 | :class="[!isFold ? 'w-423 xl:w-423' : 'w-5/6 xl:w-4/5']" |
... | ... | @@ -201,11 +189,7 @@ |
201 | 189 | import { authBtn } from '/@/enums/roleEnum'; |
202 | 190 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
203 | 191 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; |
204 | - import { | |
205 | - QuestionCircleOutlined, | |
206 | - MenuFoldOutlined, | |
207 | - MenuUnfoldOutlined, | |
208 | - } from '@ant-design/icons-vue'; | |
192 | + import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | |
209 | 193 | import { Authority } from '/@/components/Authority'; |
210 | 194 | |
211 | 195 | export default defineComponent({ |
... | ... | @@ -224,8 +208,6 @@ |
224 | 208 | QuestionCircleOutlined, |
225 | 209 | Popover, |
226 | 210 | Authority, |
227 | - MenuFoldOutlined, | |
228 | - MenuUnfoldOutlined, | |
229 | 211 | }, |
230 | 212 | setup(_) { |
231 | 213 | const isFold = ref(true); | ... | ... |
... | ... | @@ -9,20 +9,8 @@ |
9 | 9 | :style="[{ width: !isFold ? '0rem' : '20rem' }]" |
10 | 10 | :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']" |
11 | 11 | /> |
12 | - <div | |
13 | - style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer" | |
14 | - :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]" | |
15 | - > | |
16 | - <Tooltip v-if="isFold"> | |
17 | - <template #title>隐藏组织</template> | |
18 | - <MenuFoldOutlined @click="changeWidth(true)" /> | |
19 | - </Tooltip> | |
20 | - <Tooltip v-else> | |
21 | - <template #title>打开组织</template> | |
22 | - <MenuUnfoldOutlined @click="changeWidth(false)" /> | |
23 | - </Tooltip> | |
24 | - </div> | |
25 | 12 | <BasicTable |
13 | + style="flex: auto" | |
26 | 14 | :clickToRowSelect="false" |
27 | 15 | @register="registerTable" |
28 | 16 | class="w-3/4 xl:w-4/5" |
... | ... | @@ -113,8 +101,6 @@ |
113 | 101 | import { useGo } from '/@/hooks/web/usePage'; |
114 | 102 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
115 | 103 | import { Authority } from '/@/components/Authority'; |
116 | - import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'; | |
117 | - import { Tooltip } from 'ant-design-vue'; | |
118 | 104 | |
119 | 105 | export default defineComponent({ |
120 | 106 | name: 'AccountManagement', |
... | ... | @@ -126,9 +112,6 @@ |
126 | 112 | TableAction, |
127 | 113 | Tag, |
128 | 114 | Authority, |
129 | - MenuFoldOutlined, | |
130 | - MenuUnfoldOutlined, | |
131 | - Tooltip, | |
132 | 115 | }, |
133 | 116 | setup() { |
134 | 117 | const isFold = ref(true); | ... | ... |