Thu Nov 23 12:08:00 CST 2023 inscode

src/App.vue

@@ -8,13 +8,27 @@ import jobTitle from './component/humanResources/jobTitle.vue';
 import empss from './component/humanResources/emp.vue';
 import verticalTable from './component/main/verticalTable/verticalTable.vue';
 import loadingComponents from './component/loadingComponents/loadingComponents.vue';
+import { provide, ref, watch } from 'vue';
+const size = ref({
+  offsetWidth: 1,
+  offsetHeight: 1,
+  offsetLeft: 1,
+  offsetTop: 1
+});
+watch(() => size.value.offsetHeight, (res) => {
+  console.log(size.value.offsetWidth);
+  console.log(size.value.offsetHeight);
+  console.log(size.value.offsetLeft);
+  console.log(size.value.offsetTop);
+})
+provide('size', size);
 </script>
 
 <template>
   <!-- <contractCategory></contractCategory>
-  <contract-list></contract-list>
-  <announcementType></announcementType>
-  <departments></departments> -->
+      <contract-list></contract-list>
+      <announcementType></announcementType>
+      <departments></departments> -->
   <loadingComponents :width="1000" :height="1000"></loadingComponents>
   <empss></empss>
   <!-- <job-title></job-title> -->

src/component/humanResources/emp.vue

 <script setup>
-import { onMounted, ref, provide, reactive, watch, toRefs } from 'vue'
+import { onMounted, ref, provide, reactive, watch, toRefs, inject } from 'vue'
 import { deepClone } from '@/util/deepCode'
 import { TreeToFlat, FlatToTree } from '@/util/toTree'
 import { computed } from '@vue/reactivity';
@@ -36,7 +36,7 @@ const defExpandedKey = computed(() => {
     return return_s;
 })
 const treeInstance = ref([])
-const treeValue = ref(["董事会","人事部","财务部","市场部","销售部","销售一部","销售二部","销售三部","技术部","产品部","设计部","研发部","客服部","客服一部","客服二部"]);
+const treeValue = ref(["董事会", "人事部", "财务部", "市场部", "销售部", "销售一部", "销售二部", "销售三部", "技术部", "产品部", "设计部", "研发部", "客服部", "客服一部", "客服二部"]);
 const treeCheckChange = () => {
     treeValue.value = treeInstance.value?.getCheckedKeys(false);
     empSelect.value.deptName = JSON.stringify(treeValue.value);
@@ -76,6 +76,7 @@ const handleSizeChange = (index) => {
 }
 
 // table
+
 const tableData = ref();
 const tableType = ref();
 tableType.value = [
@@ -121,16 +122,16 @@ const empSelect = ref({
     page: '1',
     limit: '10',
     // 所属部门
-    deptName:JSON.stringify(["董事会","人事部","财务部","市场部","销售部","销售一部","销售二部","销售三部","技术部","产品部","设计部","研发部","客服部","客服一部","客服二部"]),
+    deptName: JSON.stringify(["董事会", "人事部", "财务部", "市场部", "销售部", "销售一部", "销售二部", "销售三部", "技术部", "产品部", "设计部", "研发部", "客服部", "客服一部", "客服二部"]),
     // select选择
     employeeType: '',
     empState: '',
     // 并集查询 搜索框
     id: '',
-    loginAccount:'',
-    userName:'',
-    gender:'',
-    mobilePhoneNumber:''
+    loginAccount: '',
+    userName: '',
+    gender: '',
+    mobilePhoneNumber: ''
 })
 provide("empSelect", empSelect);
 
@@ -187,10 +188,22 @@ provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
     }
     return;
 });
+const size = inject('size');
+const commonLayout = ref();
+onMounted(() => {
+    watch(() => tableData.value, (res) => {
+        setTimeout(() => {
+            size.value.offsetWidth = commonLayout.value.offsetWidth;
+            size.value.offsetHeight = commonLayout.value.offsetHeight;
+            size.value.offsetLeft = commonLayout.value.offsetLeft;
+            size.value.offsetTop = commonLayout.value.offsetTop;
+        }, 100)
+    })
+})
 </script>
 
 <template>
-    <div class="common-layout">
+    <div class="common-layout" ref="commonLayout">
         <el-container>
             <el-aside>
                 <h2>企业组织架构</h2>

src/component/main/tableList/table/table.vue

 <script lang="ts" setup>
-import { inject,computed } from 'vue';
+import { inject,computed,ref,onMounted } from 'vue';
 import operationr from './operation/operations.vue';
 
+
 interface TableType {
     name: string,
     type: string,
@@ -28,7 +29,7 @@ const changeState:any = inject("changeState");
 </script>
 <template>
     <div>
-        <el-table 
+        <el-table
          :data="tableData" :header-cell-style="headRowStyle" :cell-style="cellSetStyle" max-height="600px"
             style="max-width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
             <el-table-column class="head" v-for="(item, index) in prop.tableType.filter(item => item.type != 'state')"