Commit 9651eaf68744aae97e994d05a2044e01ff0795c0

Authored by fengtao
1 parent e477159f

fix:pc端 修改视频管理左侧组织显示隐藏

... ... @@ -5,12 +5,29 @@
5 5 class="w-1/4 xl:w-1/5"
6 6 @select="handleSelect"
7 7 ref="organizationIdTreeRef"
  8 + style="position: relative"
  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 :clickToRowSelect="false"
11 27 @register="registerTable"
12 28 :searchInfo="searchInfo"
13 29 class="w-3/4 xl:w-4/5"
  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:video:post">
... ... @@ -75,7 +92,7 @@
75 92 </template>
76 93
77 94 <script lang="ts">
78   - import { defineComponent, reactive, nextTick } from 'vue';
  95 + import { defineComponent, reactive, nextTick, ref } from 'vue';
79 96 import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
80 97 import { PageWrapper } from '/@/components/Page';
81 98 import { useDrawer } from '/@/components/Drawer';
... ... @@ -87,6 +104,8 @@
87 104 import { useModal } from '/@/components/Modal';
88 105 import { Authority } from '/@/components/Authority';
89 106 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  107 + import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
  108 + import { Tooltip } from 'ant-design-vue';
90 109
91 110 export default defineComponent({
92 111 components: {
... ... @@ -98,8 +117,12 @@
98 117 VideoPreviewModal,
99 118 TableImg,
100 119 Authority,
  120 + MenuFoldOutlined,
  121 + MenuUnfoldOutlined,
  122 + Tooltip,
101 123 },
102 124 setup() {
  125 + const isFold = ref(true);
103 126 const searchInfo = reactive<Recordable>({});
104 127 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
105 128 const [registerModal, { openModal }] = useModal();
... ... @@ -168,6 +191,13 @@
168 191 record,
169 192 });
170 193 };
  194 + const changeWidth = (e) => {
  195 + if (e) {
  196 + isFold.value = false;
  197 + } else {
  198 + isFold.value = true;
  199 + }
  200 + };
171 201 return {
172 202 searchInfo,
173 203 hasBatchDelete,
... ... @@ -180,6 +210,8 @@
180 210 organizationIdTreeRef,
181 211 handleViewVideo,
182 212 registerModal,
  213 + changeWidth,
  214 + isFold,
183 215 };
184 216 },
185 217 });
... ...