Commit e477159fb1616f8c548ca5806513f8994333eb92

Authored by fengtao
1 parent 48700bd8

fix:pc端 修改告警联系人左侧组织显示隐藏

@@ -2,11 +2,32 @@ @@ -2,11 +2,32 @@
2 <div> 2 <div>
3 <PageWrapper dense contentFullHeight contentClass="flex"> 3 <PageWrapper dense contentFullHeight contentClass="flex">
4 <OrganizationIdTree 4 <OrganizationIdTree
  5 + style="position: relative"
5 class="w-1/4 xl:w-1/5" 6 class="w-1/4 xl:w-1/5"
  7 + :style="[{ width: !isFold ? '0rem' : '20rem' }]"
  8 + :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
6 @select="handleSelect" 9 @select="handleSelect"
7 ref="organizationIdTreeRef" 10 ref="organizationIdTreeRef"
8 /> 11 />
9 - <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-3/4 xl:w-4/5"> 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 + <BasicTable
  26 + @register="registerTable"
  27 + :searchInfo="searchInfo"
  28 + class="w-3/4 xl:w-4/5"
  29 + :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
  30 + >
10 <template #toolbar> 31 <template #toolbar>
11 <Authority value="api:yt:alarmContact:post"> 32 <Authority value="api:yt:alarmContact:post">
12 <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增告警联系人 </a-button> 33 <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增告警联系人 </a-button>
@@ -51,17 +72,18 @@ @@ -51,17 +72,18 @@
51 </template> 72 </template>
52 73
53 <script lang="ts"> 74 <script lang="ts">
54 - import { defineComponent, reactive, nextTick } from 'vue'; 75 + import { defineComponent, reactive, nextTick, ref } from 'vue';
55 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 76 import { BasicTable, useTable, TableAction } from '/@/components/Table';
56 import { PageWrapper } from '/@/components/Page'; 77 import { PageWrapper } from '/@/components/Page';
57 import { useDrawer } from '/@/components/Drawer'; 78 import { useDrawer } from '/@/components/Drawer';
58 import ContactDrawer from './ContactDrawer.vue'; 79 import ContactDrawer from './ContactDrawer.vue';
59 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; 80 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
60 import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; 81 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
61 -  
62 import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact'; 82 import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact';
63 import { searchFormSchema, columns } from './config.data'; 83 import { searchFormSchema, columns } from './config.data';
64 import { Authority } from '/@/components/Authority'; 84 import { Authority } from '/@/components/Authority';
  85 + import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
  86 + import { Tooltip } from 'ant-design-vue';
65 87
66 export default defineComponent({ 88 export default defineComponent({
67 components: { 89 components: {
@@ -71,8 +93,12 @@ @@ -71,8 +93,12 @@
71 TableAction, 93 TableAction,
72 ContactDrawer, 94 ContactDrawer,
73 Authority, 95 Authority,
  96 + MenuFoldOutlined,
  97 + MenuUnfoldOutlined,
  98 + Tooltip,
74 }, 99 },
75 setup() { 100 setup() {
  101 + const isFold = ref(true);
76 const searchInfo = reactive<Recordable>({}); 102 const searchInfo = reactive<Recordable>({});
77 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); 103 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
78 // 表格hooks 104 // 表格hooks
@@ -131,6 +157,13 @@ @@ -131,6 +157,13 @@
131 searchInfo.organizationId = organizationId; 157 searchInfo.organizationId = organizationId;
132 handleSuccess(); 158 handleSuccess();
133 }; 159 };
  160 + const changeWidth = (e) => {
  161 + if (e) {
  162 + isFold.value = false;
  163 + } else {
  164 + isFold.value = true;
  165 + }
  166 + };
134 return { 167 return {
135 searchInfo, 168 searchInfo,
136 hasBatchDelete, 169 hasBatchDelete,
@@ -141,6 +174,8 @@ @@ -141,6 +174,8 @@
141 registerTable, 174 registerTable,
142 registerDrawer, 175 registerDrawer,
143 organizationIdTreeRef, 176 organizationIdTreeRef,
  177 + changeWidth,
  178 + isFold,
144 }; 179 };
145 }, 180 },
146 }); 181 });