Merge branch 'f-dev' into 'main'

fix：修改左侧组织显隐 See merge request huang/yun-teng-iot-front!238

Merge branch 'f-dev' into 'main'
fix：修改左侧组织显隐 See merge request huang/yun-teng-iot-front!238
xp.Huang
2 parents 07334e5e 2894acd4
Showing 6 changed files with 215 additions and 13 deletions
src/views/alarm/config/index.vue
src/views/alarm/contacts/index.vue
src/views/camera/manage/index.vue
src/views/configuration/center/index.vue
src/views/device/list/index.vue
src/views/system/account/index.vue
--- a/src/views/alarm/config/index.vue
View file @71245d2
+++ b/src/views/alarm/config/index.vue
View file @71245d2
@@ -4,13 +4,30 @@
       <OrganizationIdTree
         class="w-1/4 xl:w-1/5"
         @select="handleSelect"
+        style="position: relative"
         ref="organizationIdTreeRef"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
       />
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
       <BasicTable
         @register="registerTable"
         :searchInfo="searchInfo"
         class="w-3/4 xl:w-4/5"
         :clickToRowSelect="false"
+        :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
       >
         <template #toolbar>
           <Authority value="api:yt:alarm:profile:post">
@@ -81,7 +98,7 @@
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, h, nextTick } from 'vue';
+  import { defineComponent, reactive, h, nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
@@ -89,7 +106,7 @@
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig';
   import { searchFormSchema, columns } from './config.data';
-  import { Modal } from 'ant-design-vue';
+  import { Modal, Tooltip } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
@@ -98,6 +115,7 @@
   import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
     components: {
@@ -108,8 +126,13 @@
       ContactDrawer,
       Switch,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
+      Tooltip,
     },
     setup() {
+      const isFold = ref(true);
+
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       // 刷新
@@ -237,6 +260,13 @@
           reload();
         }
       };
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         searchInfo,
         hasBatchDelete,
@@ -250,6 +280,8 @@
         showAlarmContact,
         showMessageMode,
         statusChange,
+        changeWidth,
+        isFold,
       };
     },
   });
--- a/src/views/alarm/contacts/index.vue
View file @71245d2
+++ b/src/views/alarm/contacts/index.vue
View file @71245d2
@@ -2,11 +2,32 @@
   <div>
     <PageWrapper dense contentFullHeight contentClass="flex">
       <OrganizationIdTree
+        style="position: relative"
         class="w-1/4 xl:w-1/5"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
         @select="handleSelect"
         ref="organizationIdTreeRef"
       />
-      <BasicTable @register="registerTable" :searchInfo="searchInfo" class="w-3/4 xl:w-4/5">
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
+      <BasicTable
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+        :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
+      >
         <template #toolbar>
           <Authority value="api:yt:alarmContact:post">
             <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增告警联系人 </a-button>
@@ -51,17 +72,18 @@
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
   import ContactDrawer from './ContactDrawer.vue';
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-
   import { getAlarmContact, deleteAlarmContact } from '/@/api/alarm/contact/alarmContact';
   import { searchFormSchema, columns } from './config.data';
   import { Authority } from '/@/components/Authority';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
   export default defineComponent({
     components: {
@@ -71,8 +93,12 @@
       TableAction,
       ContactDrawer,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
+      Tooltip,
     },
     setup() {
+      const isFold = ref(true);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       // 表格hooks
@@ -131,6 +157,13 @@
         searchInfo.organizationId = organizationId;
         handleSuccess();
       };
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         searchInfo,
         hasBatchDelete,
@@ -141,6 +174,8 @@
         registerTable,
         registerDrawer,
         organizationIdTreeRef,
+        changeWidth,
+        isFold,
       };
     },
   });
--- a/src/views/camera/manage/index.vue
View file @71245d2
+++ b/src/views/camera/manage/index.vue
View file @71245d2
@@ -5,12 +5,29 @@
         class="w-1/4 xl:w-1/5"
         @select="handleSelect"
         ref="organizationIdTreeRef"
+        style="position: relative"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
       />
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
       <BasicTable
         :clickToRowSelect="false"
         @register="registerTable"
         :searchInfo="searchInfo"
         class="w-3/4 xl:w-4/5"
+        :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
       >
         <template #toolbar>
           <Authority value="api:yt:video:post">
@@ -75,7 +92,7 @@
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
@@ -87,6 +104,8 @@
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
   export default defineComponent({
     components: {
@@ -98,8 +117,12 @@
       VideoPreviewModal,
       TableImg,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
+      Tooltip,
     },
     setup() {
+      const isFold = ref(true);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       const [registerModal, { openModal }] = useModal();
@@ -168,6 +191,13 @@
           record,
         });
       };
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         searchInfo,
         hasBatchDelete,
@@ -180,6 +210,8 @@
         organizationIdTreeRef,
         handleViewVideo,
         registerModal,
+        changeWidth,
+        isFold,
       };
     },
   });
--- a/src/views/configuration/center/index.vue
View file @71245d2
+++ b/src/views/configuration/center/index.vue
View file @71245d2
@@ -5,12 +5,29 @@
         class="w-1/4 xl:w-1/5"
         @select="handleSelect"
         ref="organizationIdTreeRef"
+        style="position: relative"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
       />
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
       <BasicTable
         :clickToRowSelect="false"
         @register="registerTable"
         :searchInfo="searchInfo"
         class="w-3/4 xl:w-4/5"
+        :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
       >
         <template #toolbar>
           <Authority value="api:yt:admin:addConfiguration">
@@ -68,7 +85,7 @@
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useDrawer } from '/@/components/Drawer';
@@ -80,9 +97,10 @@
     deleteConfigurationCenter,
   } from '/@/api/configuration/center/configurationCenter';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-
   import { getAppEnvConfig, isDevMode } from '/@/utils/env';
   import { Authority } from '/@/components/Authority';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
   export default defineComponent({
     components: {
@@ -92,8 +110,12 @@
       TableAction,
       ContactDrawer,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
+      Tooltip,
     },
     setup() {
+      const isFold = ref(true);
       const { VITE_GLOB_CONFIGURATION } = getAppEnvConfig();
       const isDev = isDevMode();
       const searchInfo = reactive<Recordable>({});
@@ -169,6 +191,13 @@
           `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
         );
       };
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         searchInfo,
         hasBatchDelete,
@@ -181,6 +210,8 @@
         registerTable,
         registerDrawer,
         organizationIdTreeRef,
+        changeWidth,
+        isFold,
       };
     },
   });
--- a/src/views/device/list/index.vue
View file @71245d2
+++ b/src/views/device/list/index.vue
View file @71245d2
@@ -4,9 +4,28 @@
       <OrganizationIdTree
         class="w-1/6 xl:w-1/5"
         @select="handleSelect"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
         ref="organizationIdTreeRef"
       />
-      <BasicTable @register="registerTable" class="w-5/6 xl:w-4/5">
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
+      <BasicTable
+        @register="registerTable"
+        class="w-5/6 xl:w-4/5"
+        :class="[!isFold ? 'w-423 xl:w-423' : 'w-5/6 xl:w-4/5']"
+      >
         <template #toolbar>
           <Authority value="api:yt:device:post">
             <a-button type="primary" @click="handleCreate" v-if="authBtn(role)">
@@ -155,7 +174,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, unref, nextTick } from 'vue';
+  import { defineComponent, reactive, unref, nextTick, ref } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, searchFormSchema } from './config/device.data';
@@ -182,7 +201,11 @@
   import { authBtn } from '/@/enums/roleEnum';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import {
+    QuestionCircleOutlined,
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+  } from '@ant-design/icons-vue';
   import { Authority } from '/@/components/Authority';
   export default defineComponent({
@@ -201,8 +224,12 @@
       QuestionCircleOutlined,
       Popover,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
     },
     setup(_) {
+      const isFold = ref(true);
+
       const { createMessage } = useMessage();
       const go = useGo();
       const searchInfo = reactive<Recordable>({});
@@ -314,6 +341,13 @@
           createMessage.success('复制成功~');
         }
       };
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         registerTable,
@@ -338,6 +372,8 @@
         hasBatchDelete,
         handleDeleteOrBatchDelete,
         handleReload,
+        changeWidth,
+        isFold,
       };
     },
   });
--- a/src/views/system/account/index.vue
View file @71245d2
+++ b/src/views/system/account/index.vue
View file @71245d2
@@ -5,8 +5,29 @@
         class="w-1/4 xl:w-1/5"
         @select="handleSelect"
         ref="organizationIdTreeRef"
+        style="position: relative"
+        :style="[{ width: !isFold ? '0rem' : '20rem' }]"
+        :class="[!isFold ? 'w-1/4 xl:w-1/1' : 'w-1/4 xl:w-1/5']"
       />
-      <BasicTable :clickToRowSelect="false" @register="registerTable" class="w-3/4 xl:w-4/5">
+      <div
+        style="position: absolute; top: 1.48rem; left: 6.5rem; cursor: pointer"
+        :style="[{ left: !isFold ? '0.5rem' : '6.5rem' }, { top: !isFold ? '0.8rem' : '1.48rem' }]"
+      >
+        <Tooltip v-if="isFold">
+          <template #title>隐藏组织</template>
+          <MenuFoldOutlined @click="changeWidth(true)" />
+        </Tooltip>
+        <Tooltip v-else>
+          <template #title>打开组织</template>
+          <MenuUnfoldOutlined @click="changeWidth(false)" />
+        </Tooltip>
+      </div>
+      <BasicTable
+        :clickToRowSelect="false"
+        @register="registerTable"
+        class="w-3/4 xl:w-4/5"
+        :class="[!isFold ? 'w-3/4 xl:w-7/7' : 'w-3/4 xl:w-4/5']"
+      >
         <template #toolbar>
           <Authority value="api:yt:user:post">
             <a-button type="primary" @click="handleCreate">新增账号</a-button>
@@ -80,7 +101,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, nextTick } from 'vue';
+  import { defineComponent, reactive, nextTick, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { deleteUser, getAccountList } from '/@/api/system/system';
   import { PageWrapper } from '/@/components/Page';
@@ -92,6 +113,8 @@
   import { useGo } from '/@/hooks/web/usePage';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Authority } from '/@/components/Authority';
+  import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
+  import { Tooltip } from 'ant-design-vue';
   export default defineComponent({
     name: 'AccountManagement',
@@ -103,8 +126,12 @@
       TableAction,
       Tag,
       Authority,
+      MenuFoldOutlined,
+      MenuUnfoldOutlined,
+      Tooltip,
     },
     setup() {
+      const isFold = ref(true);
       const go = useGo();
       const [registerModal, { openModal }] = useModal();
       let searchInfo = reactive<Recordable>({});
@@ -163,6 +190,13 @@
       function handleView(record: Recordable) {
         go('/system/account_detail/' + record.id);
       }
+      const changeWidth = (e) => {
+        if (e) {
+          isFold.value = false;
+        } else {
+          isFold.value = true;
+        }
+      };
       return {
         registerTable,
@@ -175,6 +209,8 @@
         organizationIdTreeRef,
         hasBatchDelete,
         handleDeleteOrBatchDelete,
+        changeWidth,
+        isFold,
       };
     },
   });