3.0.69 修改表格布局

package.json

@@ -1,7 +1,7 @@
 {
   "name": "client-eam-v3",
   "description": "Leanwo Prodog Client",
-  "version": "3.0.68",
+  "version": "3.0.69",
   "author": "yangzhijie1488 <yangzhijie1488@163.com>",
   "scripts": {
     "dev": "cross-env webpack serve --config ./webpack.dev.js",

src/components/rfidRecord/CommonTable.vue → src/common/CommonTable.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- 表格 + 分页 -->
   <div class="tablePaganations">
     <a-config-provider :locale="locale">
       <a-table
+        id="commonTable"
         class="ant-table-striped"
         bordered
         size="small"
@@ -11,7 +11,7 @@
         :data-source="dataSource"
         :columns="columns"
         :row-key="(record) => record.id"
-        :scroll="scrollValue"
+        :scroll="{ y: yScroll }"
         :pagination="havePage ? pagination : false"
         :row-class-name="
           (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
@@ -49,43 +49,54 @@ import {
   defineEmits,
   defineExpose,
   watch,
+  onMounted,
 } from 'vue';
+import { getTableScroll } from '../common/tableScroll.js';
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
 const locale = ref(zhCN);
+
 const props = defineProps({
+  // 表格数据
   dataSource: {
     type: Object,
     required: true,
   },
+  // 表头数据
   columns: {
     type: Object,
     required: true,
   },
+  // 是否可选择
   isSelect: {
     type: Boolean,
   },
+  // 表格loading
   isLoading: {
     type: Boolean,
   },
+  // 数据总数
   total: {
     type: Number,
     default: 0,
   },
+  // 是否分页
   havePage: {
     type: Boolean,
     default: true,
   },
-  scrollValue: {
-    type: Object,
-    default: () => ({ y: 900 }),
+  // 表格距底部高度
+  extraHeight: {
+    type: Number,
+    default: undefined,
   },
+  // 选择的key值
   selectedKeys: {
     type: Array,
     default: () => [],
   },
 });
 
-const emit = defineEmits(['getPage', 'getTableSort', 'getSelectColumn']);
+const emit = defineEmits(['getPager', 'getSorter', 'getSelected']);
 
 // 分页配置
 const pagination = reactive({
@@ -100,46 +111,85 @@ const pagination = reactive({
   onChange: (current, pageSize) => changePage(current, pageSize), //点击页码事件
   total: props.total,
 });
+
+const yScroll = ref(400); //默认滚动高度
+const extraHeight = ref(undefined); //表格距离底部值
+
+// 最后一次排序信息
 const lastSorter = reactive({ field: '', order: '' });
-//  选择数据
+
+//  选择的数据
 const state = reactive({
   selectedRows: [],
   selectedRowKeys: [],
 });
 
-// 改变每页数量时更新显示
-const showSizeChange = (current, pageSize) => {
-  setTimeout(() => {
-    pagination.current = 1;
-    emit('getPage', pagination.current, pageSize);
+onMounted(() => {
+  if (!props.havePage) {
+    extraHeight.value = 30;
+  } else {
+    extraHeight.value = props.extraHeight;
+  }
+  onResizeTable();
+  window.onresize = () => {
+    onResizeTable();
+  };
+});
+
+// 表格位置
+const onResizeTable = () => {
+  yScroll.value = getTableScroll({
+    extraHeight: extraHeight.value,
+    id: 'commonTable',
   });
-  pagination.pageSize = pageSize;
 };
 
 //点击页码事件
 const changePage = (current, size) => {
   pagination.current = current;
-  emit('getPage', pagination.current, size);
+  emit('getPager', pagination.current, size);
+};
+
+// 改变每页数量时更新显示
+const showSizeChange = (current, pageSize) => {
+  setTimeout(() => {
+    pagination.current = 1;
+    emit('getPager', pagination.current, pageSize);
+  });
+  pagination.pageSize = pageSize;
 };
 
 // 回到第一页
 const backFirstPage = () => {
   pagination.current = 1;
-  emit('getPage', pagination.current, pagination.pageSize);
+  emit('getPager', pagination.current, pagination.pageSize);
+};
+
+// 伸缩列
+const handleResizeColumn = (w, col) => {
+  col.width = w;
 };
 
 // 选择每一项操作
-const selectEvent = (record, selected, selectedRows) => {
-  state.selectedRows = selectedRows.map(pro => pro);
-  state.selectedRowKeys = selectedRows.map(pro => pro.id);
-  emit('getSelectColumn', state);
+const selectEvent = (record, selected) => {
+  if (selected) {
+    state.selectedRows.push(record);
+    state.selectedRowKeys.push(record.id);
+  } else {
+    let index = state.selectedRowKeys.indexOf(record.id);
+    if (index >= 0) {
+      state.selectedRows.splice(index, 1);
+      state.selectedRowKeys.splice(index, 1);
+    }
+  }
+  emit('getSelected', state);
 };
 
 // 点击以后全选当前分页数据
 const selectAllEvent = (selected, selectedRows, changeRows) => {
   if (selected) {
-    state.selectedRows = selectedRows;
     changeRows.forEach(item => {
+      state.selectedRows.push(item);
       state.selectedRowKeys.push(item.id);
     });
   } else {
@@ -151,14 +201,16 @@ const selectAllEvent = (selected, selectedRows, changeRows) => {
       }
     });
   }
-  emit('getSelectColumn', state);
+  emit('getSelected', state);
 };
+
 // 清空选择
 const clear = () => {
   state.selectedRowKeys = [];
   state.selectedRows = [];
-  emit('getSelectColumn', state);
+  emit('getSelected', state);
 };
+
 // 获取排序信息
 const tableChange = (pagination, filters, sorter) => {
   // pagination, filters 变化时也会触发所以对sorter进行判断限制执行
@@ -166,24 +218,22 @@ const tableChange = (pagination, filters, sorter) => {
     if (sorter.field != lastSorter.field && sorter.order != lastSorter.order) {
       lastSorter.field = sorter.field;
       lastSorter.order = sorter.order;
-      emit('getTableSort', sorter);
+      emit('getSorter', sorter);
     }
     if (sorter.field != lastSorter.field && sorter.order == lastSorter.order) {
       lastSorter.field = sorter.field;
       lastSorter.order = sorter.order;
-      emit('getTableSort', sorter);
+      emit('getSorter', sorter);
     }
     if (sorter.field == lastSorter.field && sorter.order != lastSorter.order) {
       lastSorter.field = sorter.field;
       lastSorter.order = sorter.order;
-      emit('getTableSort', sorter);
+      emit('getSorter', sorter);
     }
   }
 };
-// 伸缩列
-const handleResizeColumn = (w, col) => {
-  col.width = w;
-};
+
+// 暴露出方法
 defineExpose({ backFirstPage, clear });
 
 // 监听total变化
@@ -191,10 +241,7 @@ watch(
   props,
   newData => {
     pagination.total = newData.total;
-    if (newData.selectedKeys && newData.selectedKeys.length > 0) {
-      state.selectedRowKeys = newData.selectedKeys;
-      emit('getSelectColumn', state);
-    }
+    extraHeight.value = newData.extraHeight;
   },
   { immediate: true, deep: true },
 );
@@ -205,7 +252,7 @@ const renderArr = Object.keys(slots);
 <style scoped>
 .tablePaganations {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 8px;
 }
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa;

src/common/tableScroll.js

@@ -0,0 +1,26 @@
+/**
+* 获取表格的可视化高度
+* @param {*} extraHeight 额外的高度(表格底部的内容高度) 
+* @param {*} id 当前页面中有多个table时需要制定table的id
+*/
+export const getTableScroll = ({ extraHeight, id }) => {
+  if (typeof extraHeight == 'undefined') {
+    //  默认底部分页高度
+    extraHeight = 60;
+  }
+  let tHeader = null;
+  if (id) {
+    tHeader = document.getElementById(id) ?
+      document.getElementById(id).getElementsByClassName('ant-table-thead')[0] : null;
+  } else {
+    tHeader = document.getElementsByClassName('ant-table-thead')[0];
+  }
+  //表格内容距离顶部的距离
+  let tHeaderBottom = 0;
+  if (tHeader) {
+    tHeaderBottom = tHeader.getBoundingClientRect().bottom;
+  }
+  //窗体高度-表格内容顶部的高度-表格内容底部的高度
+  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`;
+  return height;
+};

src/components/customer/ManuallyConfirmCountingData.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Navbar :title="$t('lang.AssetInventory.performInventoryTasks')" :is-go-back="false" style="margin-left: 14px" />
+    <Navbar
+      :title="$t('lang.AssetInventory.performInventoryTasks')"
+      :is-go-back="false"
+      style="margin-left: 14px"
+    />
   </div>
   <section>
     <a-steps :current="currentStep">
@@ -11,86 +15,91 @@
   <a-divider />
   <section>
     <manually-confirm-counting-data-step1
-      v-if="currentStep == 0" :current-step="currentStep" @change-step="nextStep"
+      v-if="currentStep == 0"
+      :current-step="currentStep"
+      @change-step="nextStep"
       @previous="previousStep"
     />
-    <PerformInventoryTasks v-if="currentStep == 1" :id="id" :current-step="currentStep" @change-step="nextStep" @next="nextStep" />
+    <PerformInventoryTasks
+      v-if="currentStep == 1"
+      :id="id"
+      :current-step="currentStep"
+      @change-step="nextStep"
+      @next="nextStep"
+    />
   </section>
 </template>
 
 <script>
-
 import PerformInventoryTasks from './PerformInventoryTasks.vue';
 import ManuallyConfirmCountingDataStep1 from './ManuallyConfirmCountingDataStep1.vue';
 
 export default {
-
   components: {
-    
     PerformInventoryTasks,
     'manually-confirm-counting-data-step1': ManuallyConfirmCountingDataStep1,
-
   },
-  data: function() {
+  data: function () {
     return {
-      id:'',
+      id: '',
       currentStep: 0,
       infoWindowNo: '20220427_143952',
     };
   },
 
   methods: {
-    nextStep: function(data) {
+    nextStep: function (data) {
       var _self = this;
       _self.currentStep = data.step;
       _self.id = data.id;
     },
-    previousStep: function(data) {
+    previousStep: function (data) {
       var _self = this;
       _self.currentStep = data;
     },
-    mounted: function() {
-
-    },
+    mounted: function () {},
   },
 };
 </script>
 <style scoped>
-  .grid-container {
-    display: grid;
-    grid-template-rows: 8% 8% 84%;
-    grid-template-columns: 100%;
-    width: 100%;
-    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
-    height: calc(100vh - 130px);
-    margin-top: 10px;
-  }
+.grid-container {
+  display: grid;
+  grid-template-rows: 8% 8% 84%;
+  grid-template-columns: 100%;
+  width: 100%;
+  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
+  height: calc(100vh - 130px);
+  margin-top: 10px;
+}
 
-  .grid-item-1 {
-    grid-row: 1/2;
-  }
+.grid-item-1 {
+  grid-row: 1/2;
+}
 
-  .grid-item-2 {
-    grid-row: 2/3;
-  }
+.grid-item-2 {
+  grid-row: 2/3;
+}
 
-  .grid-item-3 {
-    grid-row: 3/4;
-  }
+.grid-item-3 {
+  grid-row: 3/4;
+}
 
-  .box {
-    border: 1px #ccc solid;
-    margin-bottom: 15px;
-    padding-top: 10px;
-    border-radius: 5px;
-    background-color: #ffffff;
-  }
+.box {
+  border: 1px #ccc solid;
+  margin-bottom: 15px;
+  padding-top: 10px;
+  border-radius: 5px;
+  background-color: #ffffff;
+}
 
-  .label {
-    float: left;
-  }
+.label {
+  float: left;
+}
 
-  .div-form {
-    margin-bottom: 10px;
-  }
+.div-form {
+  margin-bottom: 10px;
+}
+.ant-divider-horizontal {
+  margin: 8px 0;
+}
 </style>

src/components/customer/ManuallyConfirmCountingDataStep1.vue

@@ -18,10 +18,11 @@
       </a-button>
     </div>
     <CommonTable
+      ref="table"
       :columns="columns"
       :data-source="dataSource"
       :total="total"
-      @get-page="getPageParams"
+      @get-pager="getPageParams"
     >
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'processed'">
@@ -43,12 +44,14 @@
         </template>
       </template>
     </CommonTable>
-    <a-button type="primary" style="margin-top: 20px" @click="previousStep">
+    <a-button type="primary" class="previousBtn" @click="previousStep">
       上一步
     </a-button>
     <a-modal v-model:visible="visible" width="800px" title="查看盘点单">
       <template #footer>
-        <a-button key="back" type="primary" @click="handleCancel">确认</a-button>
+        <a-button key="back" type="primary" @click="handleCancel">
+          确认
+        </a-button>
       </template>
       <li class="site">
         <span class="labels">
@@ -71,10 +74,11 @@
 </template>
 <script setup>
 import Common from '../../common/Common';
-import { SqlApi, Notify,Uuid } from 'pc-component-v3';
+import { SqlApi, Notify, Uuid } from 'pc-component-v3';
 import { ref, reactive, defineEmits, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import CommonTable from './CommonTable.vue';
+import CommonTable from '../../common/CommonTable.vue';
+import { debounce } from '../rfidRecord/configDatas';
 
 const emits = defineEmits(['changeStep']);
 const router = useRouter();
@@ -163,7 +167,7 @@ const visible = ref(false);
 const inventoryName = ref('');
 const inventoryNo = ref('');
 const inventoryId = ref(0);
-
+const table = ref();
 // 查询参数
 const searchParams = reactive({
   documentNo: '',
@@ -180,10 +184,9 @@ const getPageParams = (start, length) => {
 };
 
 // 查询按钮功能
-const searchChange = () => {
-  searchParams.offset = 0;
-  queryAssetDiscovery();
-};
+const searchChange = debounce(() => {
+  table.value.backFirstPage();
+}, 500);
 
 // 人工确认盘点数据
 const confirmInventory = id => {
@@ -248,11 +251,15 @@ const queryAssetDiscovery = () => {
 };
 
 /**
-       * 打开资产盘点单的CURD窗口
-       */
+ * 打开资产盘点单的CURD窗口
+ */
 const openCurdWindow = () => {
-  let url = Common.getRedirectUrl('#/desktop/window/window-read/view/041101/0/' + inventoryId.value +
-          '?currPage=1&currIndex=1&totalCount=1&uuid=' + Uuid.createUUID());
+  let url = Common.getRedirectUrl(
+    '#/desktop/window/window-read/view/041101/0/' +
+      inventoryId.value +
+      '?currPage=1&currIndex=1&totalCount=1&uuid=' +
+      Uuid.createUUID(),
+  );
   window.open(url);
 };
 
@@ -268,4 +275,14 @@ input {
 .common {
   margin-left: 8px;
 }
+.ant-divider-horizontal {
+  margin: 4px 0;
+}
+.previousBtn {
+  position: fixed;
+  top: 93%;
+}
+.grid-item-row2-column2 {
+  overflow: hidden !important;
+}
 </style>

src/components/rfidRecord/AssetRfidRecord.vue

@@ -116,17 +116,14 @@
       </li>
     </ul>
   </div>
-  <div class="tableArea">
-    <CommonTable
-      ref="table"
-      style="margin-top: 10px"
-      :total="total"
-      :columns="columns"
-      :is-loading="isLoading"
-      :data-source="dataSource"
-      @get-page="getPageParams"
-    />
-  </div>
+  <CommonTable
+    ref="table"
+    :total="total"
+    :columns="columns"
+    :is-loading="isLoading"
+    :data-source="dataSource"
+    @get-pager="getPageParams"
+  />
 </template>
   
   
@@ -134,7 +131,7 @@
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import moment from 'moment';
-import CommonTable from './CommonTable';
+import CommonTable from '../../common/CommonTable.vue';
 import Common from '../../common/Common.js';
 import { ref, reactive, onMounted } from 'vue';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
@@ -220,9 +217,6 @@ const clearParams = () => {
 </script>
   
 <style scoped>
-:deep(.ant-table-body) {
-  height: 400px;
-}
 
 .globalMain {
   max-width: 99%;