Commit 5a0d3a3d7458b46a0b6dd8665b1a482f08bd7eac

Authored by fengtao
1 parent 3104a067

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

... ... @@ -5,8 +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 />
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 31 <template #toolbar>
11 32 <Authority value="api:yt:user:post">
12 33 <a-button type="primary" @click="handleCreate">新增账号</a-button>
... ... @@ -80,7 +101,7 @@
80 101 </div>
81 102 </template>
82 103 <script lang="ts">
83   - import { defineComponent, reactive, nextTick } from 'vue';
  104 + import { defineComponent, reactive, nextTick, ref } from 'vue';
84 105 import { BasicTable, useTable, TableAction } from '/@/components/Table';
85 106 import { deleteUser, getAccountList } from '/@/api/system/system';
86 107 import { PageWrapper } from '/@/components/Page';
... ... @@ -92,6 +113,8 @@
92 113 import { useGo } from '/@/hooks/web/usePage';
93 114 import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
94 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 119 export default defineComponent({
97 120 name: 'AccountManagement',
... ... @@ -103,8 +126,12 @@
103 126 TableAction,
104 127 Tag,
105 128 Authority,
  129 + MenuFoldOutlined,
  130 + MenuUnfoldOutlined,
  131 + Tooltip,
106 132 },
107 133 setup() {
  134 + const isFold = ref(true);
108 135 const go = useGo();
109 136 const [registerModal, { openModal }] = useModal();
110 137 let searchInfo = reactive<Recordable>({});
... ... @@ -163,6 +190,13 @@
163 190 function handleView(record: Recordable) {
164 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 201 return {
168 202 registerTable,
... ... @@ -175,6 +209,8 @@
175 209 organizationIdTreeRef,
176 210 hasBatchDelete,
177 211 handleDeleteOrBatchDelete,
  212 + changeWidth,
  213 + isFold,
178 214 };
179 215 },
180 216 });
... ...