Commit 5a0d3a3d7458b46a0b6dd8665b1a482f08bd7eac

Authored by fengtao
1 parent 3104a067

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

@@ -5,8 +5,29 @@ @@ -5,8 +5,29 @@
5 class="w-1/4 xl:w-1/5" 5 class="w-1/4 xl:w-1/5"
6 @select="handleSelect" 6 @select="handleSelect"
7 ref="organizationIdTreeRef" 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 />
9 - <BasicTable :clickToRowSelect="false" @register="registerTable" 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 + :clickToRowSelect="false"
  27 + @register="registerTable"
  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:user:post"> 32 <Authority value="api:yt:user:post">
12 <a-button type="primary" @click="handleCreate">新增账号</a-button> 33 <a-button type="primary" @click="handleCreate">新增账号</a-button>
@@ -80,7 +101,7 @@ @@ -80,7 +101,7 @@
80 </div> 101 </div>
81 </template> 102 </template>
82 <script lang="ts"> 103 <script lang="ts">
83 - import { defineComponent, reactive, nextTick } from 'vue'; 104 + import { defineComponent, reactive, nextTick, ref } from 'vue';
84 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 105 import { BasicTable, useTable, TableAction } from '/@/components/Table';
85 import { deleteUser, getAccountList } from '/@/api/system/system'; 106 import { deleteUser, getAccountList } from '/@/api/system/system';
86 import { PageWrapper } from '/@/components/Page'; 107 import { PageWrapper } from '/@/components/Page';
@@ -92,6 +113,8 @@ @@ -92,6 +113,8 @@
92 import { useGo } from '/@/hooks/web/usePage'; 113 import { useGo } from '/@/hooks/web/usePage';
93 import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; 114 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
94 import { Authority } from '/@/components/Authority'; 115 import { Authority } from '/@/components/Authority';
  116 + import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
  117 + import { Tooltip } from 'ant-design-vue';
95 118
96 export default defineComponent({ 119 export default defineComponent({
97 name: 'AccountManagement', 120 name: 'AccountManagement',
@@ -103,8 +126,12 @@ @@ -103,8 +126,12 @@
103 TableAction, 126 TableAction,
104 Tag, 127 Tag,
105 Authority, 128 Authority,
  129 + MenuFoldOutlined,
  130 + MenuUnfoldOutlined,
  131 + Tooltip,
106 }, 132 },
107 setup() { 133 setup() {
  134 + const isFold = ref(true);
108 const go = useGo(); 135 const go = useGo();
109 const [registerModal, { openModal }] = useModal(); 136 const [registerModal, { openModal }] = useModal();
110 let searchInfo = reactive<Recordable>({}); 137 let searchInfo = reactive<Recordable>({});
@@ -163,6 +190,13 @@ @@ -163,6 +190,13 @@
163 function handleView(record: Recordable) { 190 function handleView(record: Recordable) {
164 go('/system/account_detail/' + record.id); 191 go('/system/account_detail/' + record.id);
165 } 192 }
  193 + const changeWidth = (e) => {
  194 + if (e) {
  195 + isFold.value = false;
  196 + } else {
  197 + isFold.value = true;
  198 + }
  199 + };
166 200
167 return { 201 return {
168 registerTable, 202 registerTable,
@@ -175,6 +209,8 @@ @@ -175,6 +209,8 @@
175 organizationIdTreeRef, 209 organizationIdTreeRef,
176 hasBatchDelete, 210 hasBatchDelete,
177 handleDeleteOrBatchDelete, 211 handleDeleteOrBatchDelete,
  212 + changeWidth,
  213 + isFold,
178 }; 214 };
179 }, 215 },
180 }); 216 });