Commit 4365929bdf27dc0458ac13b888e914d735623a4b

Authored by fengtao
1 parent 6ee0079c

fix:移除之前写的组织列表显示和隐藏

... ... @@ -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);
... ...