Commit 48700bd8d4f7b9a07f0524c16c3075c961c17859

Authored by fengtao
1 parent 06f15142

fix:pc端 修改告警配置左侧组织显示隐藏

... ... @@ -4,13 +4,30 @@
4 4 <OrganizationIdTree
5 5 class="w-1/4 xl:w-1/5"
6 6 @select="handleSelect"
  7 + style="position: relative"
7 8 ref="organizationIdTreeRef"
  9 + :style="[{ width: !isFold ? '0rem' : '20rem' }]"
  10 + :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
8 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>
9 25 <BasicTable
10 26 @register="registerTable"
11 27 :searchInfo="searchInfo"
12 28 class="w-3/4 xl:w-4/5"
13 29 :clickToRowSelect="false"
  30 + :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
14 31 >
15 32 <template #toolbar>
16 33 <Authority value="api:yt:alarm:profile:post">
... ... @@ -81,7 +98,7 @@
81 98 </template>
82 99
83 100 <script lang="ts">
84   - import { defineComponent, reactive, h, nextTick } from 'vue';
  101 + import { defineComponent, reactive, h, nextTick, ref } from 'vue';
85 102 import { BasicTable, useTable, TableAction } from '/@/components/Table';
86 103 import { PageWrapper } from '/@/components/Page';
87 104 import { useDrawer } from '/@/components/Drawer';
... ... @@ -89,7 +106,7 @@
89 106 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
90 107 import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig';
91 108 import { searchFormSchema, columns } from './config.data';
92   - import { Modal } from 'ant-design-vue';
  109 + import { Modal, Tooltip } from 'ant-design-vue';
93 110 import { JsonPreview } from '/@/components/CodeEditor';
94 111 import { findDictItemByCode } from '/@/api/system/dict';
95 112 import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
... ... @@ -98,6 +115,7 @@
98 115 import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
99 116 import { useMessage } from '/@/hooks/web/useMessage';
100 117 import { Authority } from '/@/components/Authority';
  118 + import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
101 119
102 120 export default defineComponent({
103 121 components: {
... ... @@ -108,8 +126,13 @@
108 126 ContactDrawer,
109 127 Switch,
110 128 Authority,
  129 + MenuFoldOutlined,
  130 + MenuUnfoldOutlined,
  131 + Tooltip,
111 132 },
112 133 setup() {
  134 + const isFold = ref(true);
  135 +
113 136 const searchInfo = reactive<Recordable>({});
114 137 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
115 138 // 刷新
... ... @@ -237,6 +260,13 @@
237 260 reload();
238 261 }
239 262 };
  263 + const changeWidth = (e) => {
  264 + if (e) {
  265 + isFold.value = false;
  266 + } else {
  267 + isFold.value = true;
  268 + }
  269 + };
240 270 return {
241 271 searchInfo,
242 272 hasBatchDelete,
... ... @@ -250,6 +280,8 @@
250 280 showAlarmContact,
251 281 showMessageMode,
252 282 statusChange,
  283 + changeWidth,
  284 + isFold,
253 285 };
254 286 },
255 287 });
... ...