出入库明细表新查看详情；查询条件筛选；

src/views/warehouseManagement/inboundRequests/components/allTable.vue

@@ -1,25 +1,17 @@
 <template>
   <div class="allTable">
     <el-card shadow="never">
-      <ele-pro-table
-        ref="table"
-        :columns="columns"
-        :datasource="datasource"
-        height="calc(100vh-300px)"
-        :pageSize="20"
-        @cell-click="cellClick"
-        cache-key="systemRoleTable"
-      >
+      <ele-pro-table ref="table1" :columns="columns" :datasource="datasource" height="calc(100vh-300px)" :pageSize="20"
+        @cell-click="cellClick" cache-key="systemRoleTable">
         <template v-slot:selection="{ row }">
-          <el-radio class="radio" v-model="currentId" :label="row.id"
-            ><i></i
-          ></el-radio>
+          <el-radio class="radio" v-model="currentId" :label="row.id"><i></i></el-radio>
+        </template>
+        <template v-slot:bizNo="{ row }">
+          <el-link type="primary" :underline="false" @click="toDetail(row)">{{ row.bizNo }}</el-link>
         </template>
         <!-- 表头工具栏 -->
         <template v-slot:toolbar>
-          <el-button icon="el-icon-plus" type="primary" @click="downLoad"
-            >导出</el-button
-          >
+          <el-button icon="el-icon-plus" type="primary" @click="downLoad">导出</el-button>
         </template>
         <!-- 状态 -->
         <template v-slot:verifyStatus="{ row }">
@@ -34,307 +26,320 @@
           {{ handleAssetType(row.extInfo.assetType) }}
         </template>
       </ele-pro-table>
+      <tgDetails ref="tgDetailsRefs"></tgDetails>
     </el-card>
   </div>
 </template>
 
 <script>
-  import * as XLSX from 'xlsx';
-  import storageApi from '@/api/warehouseManagement';
-  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
-  import { allCategoryLevel } from '@/api/classifyManage';
-  import {
-    warehousingType,
-    sceneState,
-    outputSceneState,
-    auditStatus,
-    useDict
-  } from '@/utils/dict/index';
-  export default {
-    data() {
-      return {
-        type: '',
-        params: {},
-        auditStatus,
-        outputSceneState,
-        warehousingType,
-        sceneState,
-        codeList: [],
-        factoryList: [],
-        tableData: [],
-        formData: {
-          deptIds: '',
-          categoryCode: '',
-          categoryName: '',
-          sourceBizNo: '',
-          startTime: '',
-          endTime: '',
-          status: '',
-          factoryId: '',
-          time: []
+import * as XLSX from 'xlsx';
+import storageApi from '@/api/warehouseManagement';
+import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
+import { allCategoryLevel } from '@/api/classifyManage';
+
+import tgDetails from './tgDetails.vue';
+import {
+  warehousingType,
+  sceneState,
+  outputSceneState,
+  auditStatus,
+  useDict
+} from '@/utils/dict/index';
+export default {
+  components: {
+    tgDetails
+  },
+  data() {
+    return {
+      type: '',
+      params: {},
+      auditStatus,
+      outputSceneState,
+      warehousingType,
+      sceneState,
+      codeList: [],
+      factoryList: [],
+      tableData: [],
+      formData: {
+        deptIds: '',
+        categoryCode: '',
+        categoryName: '',
+        sourceBizNo: '',
+        startTime: '',
+        endTime: '',
+        status: '',
+        factoryId: '',
+        time: []
+      },
+      total: 0,
+      status: [
+        { label: '未审核', class: 'ele-text-info' },
+        { label: '审核中', class: 'ele-text-primary' },
+        { label: '审核通过', class: 'ele-text-success' },
+        { label: '驳回', class: 'ele-text-danger' }
+      ],
+      currentId: '',
+      currentRow: {},
+      columns: [
+        {
+          slot: 'selection',
+          label: '选择',
+          width: 50,
+          align: 'center'
+        },
+        {
+          type: 'index',
+          label: '序号',
+          width: 50,
+          align: 'center'
+        },
+        {
+          prop: 'bizNo',
+          label: '单号',
+          align: 'center',
+          slot: 'bizNo',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'bizType',
+          slot: 'bizType',
+          label: '出入库类型',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'assetType',
+          slot: 'assetType',
+          label: '物品类型',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'categoryNames',
+          label: '物品名称',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'categoryCodes',
+          label: '物品编码',
+          align: 'center',
+          showOverflowTooltip: true,
+          width: 150
+        },
+        {
+          prop: 'sourceBizNo',
+          label: '来源单据',
+          align: 'center',
+          showOverflowTooltip: true
         },
-        total: 0,
-        status: [
-          { label: '未审核', class: 'ele-text-info' },
-          { label: '审核中', class: 'ele-text-primary' },
-          { label: '审核通过', class: 'ele-text-success' },
-          { label: '驳回', class: 'ele-text-danger' }
-        ],
-        currentId: '',
-        currentRow: {},
-        columns: [
-          {
-            slot: 'selection',
-            label: '选择',
-            width: 50,
-            align: 'center'
-          },
-          {
-            type: 'index',
-            label: '序号',
-            width: 50,
-            align: 'center'
-          },
-          {
-            prop: 'bizNo',
-            label: '单号',
-            align: 'center',
-            slot: 'bizNo',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'bizType',
-            slot: 'bizType',
-            label: '出入库类型',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'assetType',
-            slot: 'assetType',
-            label: '物品类型',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'categoryNames',
-            label: '物品名称',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'categoryCodes',
-            label: '物品编码',
-            align: 'center',
-            showOverflowTooltip: true,
-            width: 150
-          },
-          {
-            prop: 'sourceBizNo',
-            label: '来源单据',
-            align: 'center',
-            showOverflowTooltip: true
-          },
 
-          {
-            prop: 'createUserName',
-            label: '操作人',
-            align: 'center',
-            showOverflowTooltip: true
-          },
-          {
-            width: 160,
-            prop: 'storageTime',
-            label: '出入库时间',
-            align: 'center',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'verifyName',
-            label: '审核人',
-            align: 'center',
-            showOverflowTooltip: true
-          },
-          {
-            prop: 'verifyStatus',
-            label: '状态',
-            align: 'center',
-            slot: 'verifyStatus',
-            showOverflowTooltip: true,
-            width: 100
+        {
+          prop: 'createUserName',
+          label: '操作人',
+          align: 'center',
+          showOverflowTooltip: true
+        },
+        {
+          width: 160,
+          prop: 'createTime',
+          label: '出入库时间',
+          align: 'center',
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'verifyName',
+          label: '审核人',
+          align: 'center',
+          showOverflowTooltip: true
+        },
+        {
+          prop: 'verifyStatus',
+          label: '状态',
+          align: 'center',
+          slot: 'verifyStatus',
+          showOverflowTooltip: true,
+          width: 100
+        }
+      ]
+    };
+  },
+  computed: {
+    clientEnvironmentId() {
+      return this.$store.state.user.info.clientEnvironmentId;
+    }
+  },
+  created() {
+    this.getTypeList();
+  },
+  methods: {
+    downLoad() {
+      if (this.currentId) {
+        storageApi.getOutinList({ id: this.currentId }).then((res) => {
+          console.log(res);
+          let tableData = [
+            [
+              '申请出库编码',
+              '申请人',
+              '申请人部门',
+              '申请时间',
+              '工单编码',
+              '关联设备名称',
+              '设备固资编码',
+              '物品编码',
+              '物品名称',
+              '型号',
+              '规格',
+              '级别',
+              '数量',
+              '计量单位',
+              '用途',
+              '审核人',
+              '仓库',
+              '出库单号',
+              '出库时间'
+            ] //导出表头
+          ];
+          if (res?.length > 0) {
+            res.forEach((item) => {
+              tableData.push([
+                item.code,
+                item.applyUserName,
+                item.applyDeptName,
+                item.applyTime,
+                item.orderCode,
+                item.deviceName,
+                item.assetsCode,
+                item.categoryCode,
+                item.categoryName,
+                item.categoryModel,
+                item.specification,
+                item.level,
+                item.measureQuantity,
+                item.measureUnit,
+                item.purpose,
+                item.verifyName,
+                item.warehouseName,
+                item.bizNo,
+                item.storageTime
+              ]);
+            });
+            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+            let bookNew = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(bookNew, workSheet, '文件'); // 工作簿名称
+            let name = '明细文件.xlsx';
+            XLSX.writeFile(bookNew, name); // 保存的文件名
           }
-        ]
-      };
-    },
-    computed: {
-      clientEnvironmentId() {
-        return this.$store.state.user.info.clientEnvironmentId;
+        });
+      } else {
+        return this.$message.warning('请选择单据');
       }
     },
-    created() {
-      this.getTypeList();
+    toDetail(row) {
+      this.$refs.tgDetailsRefs.open(row);
     },
-    methods: {
-      downLoad() {
-        if (this.currentId) {
-          storageApi.getOutinList({ id: this.currentId }).then((res) => {
-            console.log(res);
-            let tableData = [
-              [
-                '申请出库编码',
-                '申请人',
-                '申请人部门',
-                '申请时间',
-                '工单编码',
-                '关联设备名称',
-                '设备固资编码',
-                '物品编码',
-                '物品名称',
-                '型号',
-                '规格',
-                '级别',
-                '数量',
-                '计量单位',
-                '用途',
-                '审核人',
-                '仓库',
-                '出库单号',
-                '出库时间'
-              ] //导出表头
-            ];
-            if (res?.length > 0) {
-              res.forEach((item) => {
-                tableData.push([
-                  item.code,
-                  item.applyUserName,
-                  item.applyDeptName,
-                  item.applyTime,
-                  item.orderCode,
-                  item.deviceName,
-                  item.assetsCode,
-                  item.categoryCode,
-                  item.categoryName,
-                  item.categoryModel,
-                  item.specification,
-                  item.level,
-                  item.measureQuantity,
-                  item.measureUnit,
-                  item.purpose,
-                  item.verifyName,
-                  item.warehouseName,
-                  item.bizNo,
-                  item.storageTime
-                ]);
-              });
-              let workSheet = XLSX.utils.aoa_to_sheet(tableData);
-              let bookNew = XLSX.utils.book_new();
-              XLSX.utils.book_append_sheet(bookNew, workSheet, '文件'); // 工作簿名称
-              let name = '明细文件.xlsx';
-              XLSX.writeFile(bookNew, name); // 保存的文件名
-            }
-          });
-        } else {
-          return this.$message.warning('请选择单据');
-        }
-      },
-      // 单击获取id
-      cellClick(row) {
-        this.currentRow = row;
-        this.currentId = row.id;
-      },
-      async getTypeList() {
-        const { data } = await allCategoryLevel();
-        this.codeList = data.map((item) => {
-          return { dictCode: item.id, dictValue: item.name };
-        });
-      },
-      handleAssetType(r) {
-        const code = this.codeList.find((item) => item.dictCode == r);
-        return code?.dictValue;
-      },
-      handleBizType(code, type) {
-        if (type == 1) {
-          // 入库
-          for (const key in this.sceneState) {
-            if (this.sceneState[key].code == code) {
-              return this.sceneState[key].label;
-            }
-          }
-        } else {
-          // 出库
-          for (const key in this.outputSceneState) {
-            if (this.outputSceneState[key].code == code) {
-              return this.outputSceneState[key].label;
-            }
+    // 单击获取id
+    cellClick(row) {
+      this.currentRow = row;
+      this.currentId = row.id;
+    },
+    async getTypeList() {
+      const { data } = await allCategoryLevel();
+      this.codeList = data.map((item) => {
+        return { dictCode: item.id, dictValue: item.name };
+      });
+    },
+    handleAssetType(r) {
+      const code = this.codeList.find((item) => item.dictCode == r);
+      return code?.dictValue;
+    },
+    handleBizType(code, type) {
+      if (type == 1) {
+        // 入库
+        for (const key in this.sceneState) {
+          if (this.sceneState[key].code == code) {
+            return this.sceneState[key].label;
           }
         }
-      },
-      async datasource({ page, limit, where }) {
-        if (where.time && where.time.length > 0) {
-          where.startTime = where.time[0];
-          where.endTime = where.time[1];
-          delete where.time;
+      } else {
+        // 出库
+        for (const key in this.outputSceneState) {
+          if (this.outputSceneState[key].code == code) {
+            return this.outputSceneState[key].label;
+          }
         }
-        const res = await storageApi.getInboundList({
-          pageNum: page,
-          size: limit,
-          type: this.type,
-          ...where
-        });
-
-        return res;
-      },
-      /* 刷新表格 */
-      reload(where) {
-        this.$nextTick(() => {
-          this.$refs.table.reload({ page: 1, where });
-        });
-      },
-      getAuditStatus: useDict(auditStatus),
-      getList() {
-        this.$refs.table.reload();
-      },
-      handleCurrentChange() {
-        this.getList();
-      },
-      handleSizeChange() {
-        this.formData.page = 1;
-        this.getList();
-      },
-      search() {
-        this.formData.page = 1;
-        this.getList();
-      },
-      reset() {
-        this.$refs.formName.resetFields();
-        this.search();
       }
+    },
+    async datasource({ page, limit, where }) {
+      if (where.time && where.time.length > 0) {
+        where.startTime = where.time[0];
+        where.endTime = where.time[1];
+        delete where.time;
+      }
+      const res = await storageApi.getInboundList({
+        pageNum: page,
+        size: limit,
+        type: this.type,
+        ...where
+      });
+
+      return res;
+    },
+    /* 刷新表格 */
+    reload(where) {
+      this.$nextTick(() => {
+        if (this.$refs.table1 && this.$refs.table1.reload) {
+          this.$refs.table1.reload({ page: 1, where });
+        }
+      });
+    },
+    getAuditStatus: useDict(auditStatus),
+    getList() {
+      this.$refs.table1.reload();
+    },
+    handleCurrentChange() {
+      this.getList();
+    },
+    handleSizeChange() {
+      this.formData.page = 1;
+      this.getList();
+    },
+    search() {
+      this.formData.page = 1;
+      this.getList();
+    },
+    reset() {
+      this.$refs.formName.resetFields();
+      this.search();
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .allTable {
-    height: 100%;
-    box-sizing: border-box;
+.allTable {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .ele-pro-table {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    .ele-pro-table {
+
+    .el-table {
       flex: 1;
-      display: flex;
-      flex-direction: column;
-      .el-table {
-        flex: 1;
-        // display: flex;
-        // flex-direction: column;
-        // .el-table__body-wrapper {
-        //   flex: 1;
-        // }
-      }
+      // display: flex;
+      // flex-direction: column;
+      // .el-table__body-wrapper {
+      //   flex: 1;
+      // }
     }
   }
+}
 </style>

src/views/warehouseManagement/inboundRequests/components/search.vue

@@ -9,8 +9,8 @@
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 10 } : { span: 6 }">
-        <el-form-item label="工单编码:">
+      <el-col v-if="activeName != '出入库明细表'" v-bind="styleResponsive ? { lg: 6, md: 10 } : { span: 6 }">
+        <el-form-item label="编码:">
           <el-input clearable v-model="where.code" placeholder="请输入" />
         </el-form-item>
       </el-col>
@@ -37,7 +37,7 @@
       </el-col> -->
       <el-col v-if="activeName == '出入库明细表'" v-bind="styleResponsive ? { lg: 6, md: 10 } : { span: 6 }">
         <el-form-item label="单号:">
-          <el-input v-model="where.categoryCode" placeholder="请输入内容"></el-input>
+          <el-input v-model="where.bizNo" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-col>
       <el-col v-if="activeName == '出入库明细表'" v-bind="styleResponsive ? { lg: 6, md: 10 } : { span: 6 }">
@@ -55,8 +55,8 @@
         </el-form-item>
       </el-col>
       <el-col style="display: flex; justify-content: flex-end" v-bind="styleResponsive
-          ? { lg: activeName == '出入库明细表' ? 24 : 18, md: 24 }
-          : { span: activeName == '出入库明细表' ? 24 : 18 }
+        ? { lg: activeName == '出入库明细表' ? 24 : 18, md: 24 }
+        : { span: activeName == '出入库明细表' ? 24 : 18 }
         ">
         <el-form-item label-width="0px">
           <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="search">

src/views/warehouseManagement/inboundRequests/components/tgDetails.vue

@@ -1,104 +1,99 @@
 <template>
   <ele-modal :visible.sync="visible" title="出入库详情" width="90%">
-    <ele-pro-table
-      :columns="columns"
-      :datasource="tableList"
-      cache-key="tgDetails"
-      height="calc(100vh - 350px)"
-      :need-page="false"
-    >
+    <ele-pro-table :columns="columns" :datasource="tableList" cache-key="tgDetails" height="calc(100vh - 350px)"
+      :need-page="false">
     </ele-pro-table>
   </ele-modal>
 </template>
 
 <script>
-  import storageApi from '@/api/warehouseManagement';
-  export default {
-    computed: {
-      clientEnvironmentId() {
-        return this.$store.state.user.info.clientEnvironmentId;
-      }
-    },
-    data() {
-      return {
-        visible: false,
-        tableList: [],
-        columns: [
-          {
-            label: '序号',
-            type: 'index',
-            width: 55,
-            align: 'center'
-          },
-          {
-            label: '物品名称',
-            prop: 'categoryName'
-          },
-          {
-            label: '物品分类名称',
-            prop: 'categoryLevelName'
-          },
+import storageApi from '@/api/warehouseManagement';
+export default {
+  computed: {
+    clientEnvironmentId() {
+      return this.$store.state.user.info.clientEnvironmentId;
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableList: [],
+      columns: [
+        {
+          label: '序号',
+          type: 'index',
+          width: 55,
+          align: 'center'
+        },
+        {
+          label: '物品名称',
+          prop: 'categoryName'
+        },
+        {
+          label: '物品分类名称',
+          prop: 'categoryLevelName'
+        },
 
-          {
-            label: '牌号',
-            prop: 'brandNum'
-          },
+        {
+          label: '牌号',
+          prop: 'brandNum'
+        },
 
-          {
-            label: '型号',
-            prop: 'modelType'
-          },
-          {
-            label: '计量数量',
-            prop: 'measureQuantity'
-          },
-          {
-            label: '包装数量',
-            prop: 'packingQuantity'
-          },
+        {
+          label: '型号',
+          prop: 'modelType'
+        },
+        {
+          label: '计量数量',
+          prop: 'measureQuantity'
+        },
+        {
+          label: '包装数量',
+          prop: 'packingQuantity'
+        },
 
-          {
-            label: '包装单位',
-            prop: 'packingUnit'
-          },
+        {
+          label: '包装单位',
+          prop: 'packingUnit'
+        },
 
-          {
-            label: '本包重量',
-            prop: 'weight'
-          },
-          { label: '重量单位', prop: 'weightUnit' },
-          {
-            label: '发货码',
-            prop: 'sendCode'
-          },
-          {
-            label: '用途',
-            prop: 'purpose'
-          },
-          {
-            label: '申请人名称',
-            prop: 'userName'
-          },
-          {
-            label: '使用人部门',
-            prop: 'employGroupName'
-          },
-          {
-            label: '使用人名称',
-            prop: 'employName'
-          }
-        ]
-      };
-    },
-    created() {},
-    methods: {
-      open(row) {
-        storageApi.getApplystoragedetail({ applyId: row.id }).then((res) => {
-          console.log(res);
-          this.tableList = res;
-          this.visible = true;
-        });
-      }
+        {
+          label: '本包重量',
+          prop: 'weight'
+        },
+        { label: '重量单位', prop: 'weightUnit' },
+        {
+          label: '发货码',
+          prop: 'sendCode'
+        },
+        {
+          label: '用途',
+          prop: 'purpose'
+        },
+        {
+          label: '申请人名称',
+          prop: 'userName'
+        },
+        {
+          label: '使用人部门',
+          prop: 'employGroupName'
+        },
+        {
+          label: '使用人名称',
+          prop: 'employName'
+        }
+      ]
+    };
+  },
+  created() { },
+  methods: {
+    open(row) {
+      storageApi.getApplystoragedetail({ applyId: row.id }).then((res) => {
+        console.log(res);
+        this.tableList = res;
+        this.visible = true;
+      });
     }
-  };
+  }
+};
 </script>

src/views/warehouseManagement/inboundRequests/components/tgTable.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="tgTable">
     <!-- 数据表格 -->
-    <ele-pro-table
-      ref="table"
-      :columns="columns"
-      height="calc(100vh-300px)"
-      :pageSize="20"
-      :datasource="datasource"
-      cache-key="workOrderTable"
-    >
+    <ele-pro-table ref="table1" :columns="columns" height="calc(100vh-300px)" :pageSize="20" :datasource="datasource"
+      cache-key="workOrderTable">
+      <template v-slot:code="{ row }">
+        <el-link type="primary" :underline="false" @click="details(row)">{{ row.code }}</el-link>
+      </template>
       <template v-slot:totalCount="{ row }">
         {{ row.totalCount }} {{ row.measuringUnit }}
       </template>
@@ -31,14 +28,7 @@
       </template>
 
       <template v-slot:action="{ row }">
-        <el-link type="primary" :underline="false" @click="details(row)">
-          详情
-        </el-link>
-        <el-link
-          type="primary"
-          :underline="false"
-          @click="depotInOut(row, type)"
-        >
+        <el-link type="primary" :underline="false" @click="depotInOut(row, type)">
           {{ type == 1 ? '入库' : '出库' }}
         </el-link>
       </template>
@@ -48,186 +38,192 @@
 </template>
 
 <script>
-  import { outputSceneState, sceneState } from '@/utils/dict/index';
-  import storageApi from '@/api/warehouseManagement';
-  import tgDetails from './tgDetails.vue';
-  export default {
-    props: {
-      type: {
-        type: String,
-        default: ''
-      }
+import { outputSceneState, sceneState } from '@/utils/dict/index';
+import storageApi from '@/api/warehouseManagement';
+import tgDetails from './tgDetails.vue';
+export default {
+  props: {
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    tgDetails
+  },
+  data() {
+    return {
+      outputSceneState,
+      sceneState,
+      loading: false,
+      statusOpt: [
+        { label: '待处理', value: 0 },
+        { label: '已处理', value: 1 },
+        { label: '已撤销', value: 2 }
+      ]
+    };
+  },
+  computed: {
+    // 表格列配置
+    columns() {
+      return [
+        {
+          columnKey: 'index',
+          label: '序号',
+          type: 'index',
+          width: 55,
+          align: 'center',
+          showOverflowTooltip: true,
+          fixed: 'left'
+        },
+        {
+          prop: 'code',
+          slot: 'code',
+          label: '编码',
+          showOverflowTooltip: true,
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          prop: 'categoryNames',
+          label: '名称',
+          showOverflowTooltip: true,
+          align: 'center'
+        },
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '100' },
+        {
+          prop: 'sourceType',
+          label: '出入库类型',
+          align: 'center',
+          formatter: (row, column, cellValue) => {
+            console.log(row);
+            switch (this.type) {
+              case '1':
+                // 入库
+                return this.sceneState.filter(
+                  (item) => item.code == row.sourceType
+                )[0].label;
+              case '2':
+                // 出库
+                return this.outputSceneState.filter(
+                  (item) => item.code == row.sourceType
+                )[0].label;
+            }
+          }
+        },
+        {
+          prop: 'approvalUserName',
+          label: '审核人',
+          align: 'center'
+        },
+        {
+          prop: 'createUserName',
+          label: '申请人',
+          align: 'center'
+        },
+        {
+          prop: 'createTime',
+          label: '创建时间',
+          align: 'center',
+          showOverflowTooltip: true,
+          minWidth: 110
+        },
+        {
+          slot: 'status',
+          label: '状态',
+          align: 'center'
+        },
+        {
+          columnKey: 'action',
+          label: '操作',
+          width: 120,
+          align: 'center',
+          resizable: false,
+          fixed: 'right',
+          slot: 'action',
+          showOverflowTooltip: true
+        }
+      ];
+    }
+  },
+  created() { },
+  methods: {
+    statusFormatter(status) {
+      const obj = this.statusOpt.find((i) => i.value == status);
+      return obj && obj.label;
     },
-    components: {
-      tgDetails
+    /* 表格数据源 */
+    datasource({ page, limit, where }) {
+      return storageApi.getinboundRequestsList({
+        pageNum: page,
+        size: limit,
+        type: this.type,
+        ...where
+      });
     },
-    data() {
-      return {
-        outputSceneState,
-        sceneState,
-        loading: false,
-        statusOpt: [
-          { label: '待处理', value: 0 },
-          { label: '已处理', value: 1 },
-          { label: '已撤销', value: 2 }
-        ]
-      };
+    details(row) {
+      this.$refs.tgDetailsRefs.open(row);
     },
-    computed: {
-      // 表格列配置
-      columns() {
-        return [
-          {
-            columnKey: 'index',
-            label: '序号',
-            type: 'index',
-            width: 55,
-            align: 'center',
-            showOverflowTooltip: true,
-            fixed: 'left'
-          },
-          {
-            prop: 'code',
-            label: '编码',
-            showOverflowTooltip: true,
-            align: 'center',
-            minWidth: 100
-          },
-          {
-            prop: 'categoryNames',
-            label: '名称',
-            showOverflowTooltip: true,
-            align: 'center'
-          },
-          { label: '型号', prop: 'modelType', width: '150' },
-          { label: '规格', prop: 'specification', width: '150' },
-          { label: '牌号', prop: 'brandNum', width: '100' },
-          {
-            prop: 'sourceType',
-            label: '出入库类型',
-            align: 'center',
-            formatter: (row, column, cellValue) => {
-              console.log(row);
-              switch (this.type) {
-                case '1':
-                  // 入库
-                  return this.sceneState.filter(
-                    (item) => item.code == row.sourceType
-                  )[0].label;
-                case '2':
-                  // 出库
-                  return this.outputSceneState.filter(
-                    (item) => item.code == row.sourceType
-                  )[0].label;
-              }
-            }
-          },
-          {
-            prop: 'approvalUserName',
-            label: '审核人',
-            align: 'center'
-          },
-          {
-            prop: 'createUserName',
-            label: '申请人',
-            align: 'center'
-          },
-          {
-            prop: 'createTime',
-            label: '创建时间',
-            align: 'center',
-            showOverflowTooltip: true,
-            minWidth: 110
-          },
-          {
-            slot: 'status',
-            label: '状态',
-            align: 'center'
-          },
-          {
-            columnKey: 'action',
-            label: '操作',
-            width: 120,
-            align: 'center',
-            resizable: false,
-            fixed: 'right',
-            slot: 'action',
-            showOverflowTooltip: true
+    depotInOut(row, type) {
+      console.log(row, type);
+      if (type == 1) {
+        this.$router.push({
+          path: '/warehouseManagement/stockManagement/add',
+          query: {
+            code: row.code,
+            inId: row.id,
+            type: '1',
+            sourceType: row.sourceType,
+            name: 'inboundRequests'
           }
-        ];
-      }
-    },
-    created() {},
-    methods: {
-      statusFormatter(status) {
-        const obj = this.statusOpt.find((i) => i.value == status);
-        return obj && obj.label;
-      },
-      /* 表格数据源 */
-      datasource({ page, limit, where }) {
-        return storageApi.getinboundRequestsList({
-          pageNum: page,
-          size: limit,
-          type: this.type,
-          ...where
         });
-      },
-      details(row) {
-        this.$refs.tgDetailsRefs.open(row);
-      },
-      depotInOut(row, type) {
-        console.log(row, type);
-        if (type == 1) {
-          this.$router.push({
-            path: '/warehouseManagement/stockManagement/add',
-            query: {
-              code: row.code,
-              inId: row.id,
-              type: '1',
-              sourceType: row.sourceType,
-              name: 'inboundRequests'
-            }
-          });
-        } else {
-          this.$router.push({
-            path: '/warehouseManagement/outgoingManagement/add',
-            query: {
-              code: row.code,
-              id: row.id,
-              type: '2',
-              sourceType: row.sourceType
-            }
-          });
-        }
-      },
-      /* 刷新表格 */
-      reload(where) {
-        this.$nextTick(() => {
-          this.$refs.table.reload({ page: 1, where });
+      } else {
+        this.$router.push({
+          path: '/warehouseManagement/outgoingManagement/add',
+          query: {
+            code: row.code,
+            id: row.id,
+            type: '2',
+            sourceType: row.sourceType
+          }
         });
       }
+    },
+    /* 刷新表格 */
+    reload(where) {
+      console.log(where, '11111where')
+      this.$nextTick(() => {
+        if (this.$refs.table1 && this.$refs.table1.loading) {
+          this.$refs.table1.reload({ page: 1, where });
+        }
+      });
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .tgTable {
-    height: 100%;
-    box-sizing: border-box;
+.tgTable {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .ele-pro-table {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    .ele-pro-table {
+
+    .el-table {
       flex: 1;
-      display: flex;
-      flex-direction: column;
-      .el-table {
-        flex: 1;
-        // display: flex;
-        // flex-direction: column;
-        // .el-table__body-wrapper {
-        //   flex: 1;
-        // }
-      }
+      // display: flex;
+      // flex-direction: column;
+      // .el-table__body-wrapper {
+      //   flex: 1;
+      // }
     }
   }
+}
 </style>

src/views/warehouseManagement/inboundRequests/index.vue

@@ -5,24 +5,13 @@
       </search>
       <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="入库" name="入库">
-          <tgTable
-            v-if="activeName == '入库'"
-            ref="tableRef"
-            type="1"
-          ></tgTable>
+          <tgTable v-if="activeName == '入库'" ref="tableRef" type="1"></tgTable>
         </el-tab-pane>
         <el-tab-pane label="出库" name="出库">
-          <tgTable
-            v-if="activeName == '出库'"
-            ref="tableRef"
-            type="2"
-          ></tgTable>
+          <tgTable v-if="activeName == '出库'" ref="tableRef" type="2"></tgTable>
         </el-tab-pane>
         <el-tab-pane label="出入库明细表" name="出入库明细表">
-          <allTable
-            v-if="activeName == '出入库明细表'"
-            ref="tableRef"
-          ></allTable>
+          <allTable v-if="activeName == '出入库明细表'" ref="tableRef"></allTable>
         </el-tab-pane>
       </el-tabs>
     </el-card>
@@ -30,63 +19,69 @@
 </template>
 
 <script>
-  import search from './components/search.vue';
-  import tgDetails from './components/tgDetails.vue';
-  import tgTable from './components/tgTable.vue';
-  import allTable from './components/allTable.vue';
-  export default {
-    components: {
-      search,
-      tgDetails,
-      tgTable,
-      allTable
+import search from './components/search.vue';
+import tgDetails from './components/tgDetails.vue';
+import tgTable from './components/tgTable.vue';
+import allTable from './components/allTable.vue';
+export default {
+  components: {
+    search,
+    tgDetails,
+    tgTable,
+    allTable
+  },
+  data() {
+    return {
+      activeName: '入库',
+      loading: false
+    };
+  },
+  created() { },
+  methods: {
+    handleClick(tab) {
+      this.activeName = tab.name;
+      this.$refs.tableRef && this.$refs.tableRef.reload(tab.name);
     },
-    data() {
-      return {
-        activeName: '入库',
-        loading: false
-      };
-    },
-    created() {},
-    methods: {
-      handleClick(tab) {
-        this.activeName = tab.name;
-        this.$refs.tableRef && this.$refs.tableRef.reload(tab.name);
-      },
-      /* 刷新表格 */
-      reload(where) {
-        this.$refs.tableRef.reload(where);
-      }
+    /* 刷新表格 */
+    reload(where) {
+      this.$refs.tableRef.$refs.table1.reload({ where });
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  #inboundRequests {
-    height: calc(100vh - 96px);
-    width: 100%;
-    :deep(.el-card) {
+#inboundRequests {
+  height: calc(100vh - 96px);
+  width: 100%;
+
+  :deep(.el-card) {
+    height: 100%;
+
+    .el-card__body {
       height: 100%;
-      .el-card__body {
-        height: 100%;
-        box-sizing: border-box;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+
+      .el-tabs {
+        flex: 1;
         display: flex;
         flex-direction: column;
-        .el-tabs {
+
+        .el-tabs__content {
           flex: 1;
-          display: flex;
-          flex-direction: column;
-          .el-tabs__content {
-            flex: 1;
-            .el-tab-pane {
-              height: 100%;
-            }
+
+          .el-tab-pane {
+            height: 100%;
           }
         }
-        .el-form-item {
-          margin-bottom: 5px !important;
-        }
+      }
+
+      .el-form-item {
+        margin-bottom: 5px !important;
       }
     }
   }
+}
 </style>