Commit e477159fb1616f8c548ca5806513f8994333eb92

Authored by fengtao
1 parent 48700bd8

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

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