kd-aiot-frontend-wms/src/views/warehouseManagement/stockLedger/components/details/InWarehouse.vue

<!-- 入库 -->
<template>
  <div class="inWarehouse">
    <!-- <el-form label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="入库场景"
            ><el-select
              filterable
              placeholder="请选择"
              v-model="searchForm.bizScene"
              clearable
            >
              <el-option
                v-for="item in sceneState"
                :key="item.code"
                :value="item.code + ''"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入库单号" prop="bizNum">
            <el-input
              v-model="searchForm.bizNum"
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入库数量">
            <el-col :span="11">
              <el-input
                v-model="searchForm.warehouseStart"
                @blur="
                  () => {
                    if (!/^\d+(\.\d+)?$/.test(searchForm.warehouseStart)) {
                      searchForm.warehouseStart = '';
                    }
                  }
                "
                placeholder="请输入"
                size="small"
              ></el-input
            ></el-col>
            <el-col :span="2" style="text-align: center">~</el-col>
            <el-col :span="11">
              <el-input
                v-model="searchForm.warehouseEnd"
                @blur="
                  () => {
                    if (!/^\d+(\.\d+)?$/.test(searchForm.warehouseEnd)) {
                      searchForm.warehouseEnd = '';
                    }
                  }
                "
                placeholder="请输入"
                size="small"
              ></el-input
            ></el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="包装数量">
            <el-col :span="11">
              <el-input
                v-model="searchForm.packetStart"
                @blur="
                  () => {
                    if (!/^\d+(\.\d+)?$/.test(searchForm.packetStart)) {
                      searchForm.packetStart = '';
                    }
                  }
                "
                placeholder="请输入"
                size="small"
              ></el-input
            ></el-col>
            <el-col :span="2" style="text-align: center">~</el-col>
            <el-col :span="11">
              <el-input
                v-model="searchForm.packetEnd"
                @blur="
                  () => {
                    if (!/^\d+(\.\d+)?$/.test(searchForm.packetEnd)) {
                      searchForm.packetEnd = '';
                    }
                  }
                "
                placeholder="请输入"
                size="small"
              ></el-input
            ></el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: right; margin-bottom: 20px">
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            size="small"
            >搜索</el-button
          >
          <el-button @click="reset" icon="el-icon-refresh-left" size="small"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-form> -->
    <ele-pro-table class="table_list" ref="table" height="calc(100vh - 300px)" :columns="columns"
      :datasource="datasource" :pageSize="20" row-key="id">
      <!-- 展开内容 -->
      <!-- <template v-slot:expand="{ row, $index }">
        <div
          style="width: 100%; min-height: 60px"
          v-if="row.materialDetailResponseList"
        >
          <ele-pro-table
            :toolbar="false"
            toolsTheme="none"
            ref="table2"
            :need-page="false"
            :datasource="row.materialDetailResponseList"
            :columns="columns2"
            :key="row.code + '-' + $index"
          >
          </ele-pro-table>
        </div>
      </template> -->
      <template v-slot:bizNo="{ row }">
        <el-link type="primary" @click="handleCellClick(row)">
          {{ row.bizNo }}
        </el-link>
      </template>
    </ele-pro-table>
    <!-- <el-table
      class="table"
      :data="tableData"
      @cell-click="handleCellClick"
      :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
      :tree-props="{
        children: 'children'
      }"
    >
      <el-table-column width="80px" label="序号" type="index" />
      <el-table-column
        width="200"
        label="入库单号"
        prop="bizNo"
      ></el-table-column>
      <el-table-column label="入库场景" prop="bizType">
        <template slot-scope="{ row }">{{
          getSceneState(+row.bizType)
        }}</template>
      </el-table-column>
      <el-table-column label="物品名称" prop="categoryName"></el-table-column>
      <el-table-column
        label="计量数量"
        prop="measureQuantity"
      ></el-table-column>
      <el-table-column label="计量单位" prop="measureUnit"></el-table-column>
      <el-table-column
        label="包装数量"
        prop="packingQuantity"
      ></el-table-column>
      <el-table-column label="包装单位" prop="packingUnit"></el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="重量单位" prop="weightUnit"></el-table-column>
      <el-table-column
        width="200"
        label="仓库"
        prop="warehouseName"
      ></el-table-column>
      <el-table-column label="操作人" prop="createUserId">
        <template slot-scope="{ row }">
          {{ handleDeta(row.createUserId) }}
        </template>
      </el-table-column>
      <el-table-column label="审核人" prop="verifyName"></el-table-column>
      <el-table-column
        width="150"
        label="入库时间"
        prop="createTime"
      ></el-table-column>
    </el-table>
    <Pagination
      class="pagination"
      :total="total"
      :page.sync="pageNum"
      :size.sync="size"
      @pagination="handlePageChange"
    />
    <InWarehouseDialog
      ref="detailRef"
      :assetCode="baseInfo.assetCode"
      :baseInfo="baseInfo"
    /> -->
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
// import { getInWarehouseDetail } from '@/api/stockManagement/stockLedger'
import { sceneState } from '@/utils/dict/index';
import InWarehouseDialog from './InWarehouseDialog';
import { inventorybookPage } from '@/api/classifyManage/itemInformation';
import { useDictLabel } from '@/utils/dict/index';

// import ouint from '@/api/warehouseManagement/outin';
import storageApi from '@/api/warehouseManagement/index.js';
import {
  qualityStatus,
} from '@/utils/dict/index';
export default {
  components: { Pagination, InWarehouseDialog },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    baseParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      qualityStatus,
      columns: [
        // {
        //   width: 45,
        //   type: 'expand',
        //   columnKey: 'materialDetailResponseList',
        //   align: 'center',
        //   slot: 'expand',
        //   className: ''
        // },
        {
          width: 55,
          type: 'index',
          label: '序号',
          align: 'center',
        },
        {
          slot: 'bizNo',
          prop: 'bizNo',
          label: '入库单号',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 200
        },
        {
          prop: 'name',
          label: '入库场景',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110,
          formatter: (_row) => {
            return this.getSceneState(Number(_row.bizType));
          }
        },
        {
          prop: 'categoryName',
          label: '物品名称',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'balanceBatchQuantity',
          label: '批次期末',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'balanceQuantity',
          label: '物品期末',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          prop: 'batchNo',
          label: '批次号',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 110
        },
        {
          align: 'center',
          prop: 'measureQuantity',
          label: '计量数量',
          showOverflowTooltip: true,
          minWidth: 110
        }, 
        {
          align: 'center',
          prop: 'measureUnit',
          label: '计量单位',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'packingQuantity',
          label: '包装数量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'packingUnit',
          label: '包装单位',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'weight',
          label: '重量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'weightUnit',
          label: '重量单位',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'qualityControl',
          label: '质检状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row) => {
            return this.qualityStatus[+_row.qualityControl];
          }
        },
        {
          prop: 'warehouseName',
          label: '仓库',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'verifyName',
          label: '审核人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'storageTime',
          label: '入库时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        }
      ],

      // 表格列配置
      // columns2: [
      //   {
      //     prop: 'materialCode',
      //     label: '物料编码',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 110
      //   },
      //   {
      //     prop: 'barcodes',
      //     label: '发货条码',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 110
      //   },
      //   // {
      //   //   prop: 'measureQuantity',
      //   //   label: '计量数量',
      //   //   showOverflowTooltip: true,
      //   //   align: 'center',
      //   //   minWidth: 110,
      //   //   formatter: (_row) => {
      //   //     return 1;
      //   //   }
      //   // },
      //   // {
      //   //   prop: 'measureUnit',
      //   //   label: '计量单位',
      //   //   showOverflowTooltip: true,
      //   //   align: 'center',
      //   //   minWidth: 110,
      //   // },
      //   {
      //     prop: 'materielDesignation',
      //     label: '物料代号',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 110
      //   },
      //   {
      //     prop: 'clientCode',
      //     label: '客户代号',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 110
      //   },
      //   {
      //     prop: 'engrave',
      //     label: '刻码',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 110
      //   },
      //   {
      //     prop: 'weight',
      //     label: '重量',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 100
      //   },
      //   {
      //     prop: 'weightUnit',
      //     label: '重量单位',
      //     showOverflowTooltip: true,
      //     align: 'center',
      //     minWidth: 100
      //   },
      //   {
      //     prop: 'result',
      //     label: '质检结果',
      //     align: 'center',
      //     showOverflowTooltip: true,
      //     formatter: (_row) => {
      //       return this.qualityResults[_row.result];
      //     }
      //   },
      //   {
      //     prop: 'status',
      //     label: '质检状态',
      //     align: 'center',
      //     showOverflowTooltip: true,
      //     formatter: (_row) => {
      //       return this.qualityStatus[_row.result];
      //     }
      //   }
      // ],
      qualityResults: {
        1: '合格',
        2: '不合格'
      }, // 质检结果 1合格 2不合格
      sceneState,
      sceneState: [],
      searchForm: {
        bizNum: '',
        warehouseEnd: '',
        warehouseStart: '',
        packetEnd: '',
        packetStart: ''
      },
      tableData: [],
      size: 10,
      pageNum: 1,
      total: 0,
      vuexUser: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async datasource({ page, limit, where, order }) {
      console.log(page);
      console.log(limit);
      this.pageNum = page;
      this.size = limit;
      return await this.getList();
    },
    getSceneState: useDictLabel(sceneState),
    search() {
      this.pageNum = 1;
      this.getList();
    },
    reset() {
      this.searchForm = {};
      this.search();
    },
    handleCellClick(row) {
      console.log(row);
      this.$router.push({
        path: '/warehouseManagement/stockManagement/details',
        query: {
          id: row.outInId
        }
      });
    },
    handlePageChange(v) {
      this.pageNum = v.current;
      this.size = v.size;
      this.getList();
    },
    handleDeta(row) {
      for (const key in this.vuexUser) {
        if (this.vuexUser[key].id == row) {
          return this.vuexUser[key].name;
        }
      }
    },
    async getList() {
      const res = await storageApi.outInRecordsPage({
        categoryId: this.$route.query.id,
        size: this.size,
        pageNum: this.pageNum,
        bizType: 1,
        ...this.baseParams
        // ...this.searchForm,
        // batchNum: this.baseParams.batchNum || this.searchForm.batchNum
      });
      if (res) {
        const list = this.$store.state.userPage.userList;
        this.vuexUser = list;
        // this.tableData = res.list;
        this.total = res.count;
        return res;
      } else {
        return {};
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.inWarehouse {
  height: 100%;
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  :deep(.table) {
    flex: 1;
    display: flex;
    flex-direction: column;

    .el-table__body-wrapper {
      flex: 1;
    }
  }

  .pagination {
    flex: 0 0 50px;
    display: flex;
    align-items: center;
  }
}
</style>