udiwms-vue-frame/src/views/inventory/InvProductsDetail.vue

<template>
  <div>
    <el-descriptions class="margin-top" title="产品信息" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          物资名称
        </template>
        {{ inputQuery.cpmctymc }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          DI/物资编码
        </template>
        {{ inputQuery.nameCode }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          批次号
        </template>
        {{ inputQuery.batchNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          规格型号
        </template>
        {{ inputQuery.ggxh }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          生产日期
        </template>
        {{ inputQuery.productionDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          失效日期
        </template>
        {{ inputQuery.expireDate }}
      </el-descriptions-item>
    </el-descriptions>

    <el-form :inline="true" :model="invProductDetailQuery" style="margin-top: 10px;" size="mini">
      <el-form-item class="query-form-item" label="UDI码:">
        <el-input v-model="invProductDetailQuery.code"
                  placeholder="请输入UDI码查询"
                  clearable
                  style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="search" @click="onSubmit"
          >查询
          </el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%"
              :default-sort="defaultSort"
              @sort-change="handleSortChange"
              border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="UDI码"
        prop="code"
        width="350"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="出入库单号"
        prop="orderId"
        width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="单据类型"
        prop="actionName"
        width="150"
      ></el-table-column>
      <el-table-column
        label="出入库类型"
        prop="mainActionStr"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="货位"
        prop="invSpaceName"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="入库数量"
        prop="inCount"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="出库数量"
        prop="outCount"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="单据日期"
        prop="orderTime"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="150"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :limit.sync="invProductDetailQuery.limit"
      :page.sync="invProductDetailQuery.page"
      @pagination="getList"
    ></pagination>

  </div>
</template>

<script>
import {getInvProductDetail} from "@/api/inventory/invPorduct";
import {isBlank} from "@/utils/strUtil";

export default {
  name: "InvProductsDetail",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      invProductDetailQuery: {
        code: null,
        relId: null,
        supId: null,
        batchNo: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10
      },
      list: [],
      total: 0,
      loading: false,
      defaultSort: {prop: 'orderTime', order: 'desc'},
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.invProductDetailQuery = {
        code: null,
        page: 1,
        limit: 10
      };
      this.getList();
    },
    onSubmit() {
      this.invProductDetailQuery.page = 1;
      this.getList();
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    handleSizeChange(val) {
      this.invProductDetailQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.invProductDetailQuery.page = val;
      this.getList();
    },

    handleSortChange(column, prop, order) {
      if (column.order === 'descending') {
        this.invProductDetailQuery.sort = 'desc'
      } else {
        this.invProductDetailQuery.sort = 'asc'
      }
      this.invProductDetailQuery.orderBy = column.prop;
      this.getList();
    },

    getList() {
      this.loading = true;
      this.invProductDetailQuery.relId = this.inputQuery.relId;
      this.invProductDetailQuery.supId = this.inputQuery.supId;
      this.invProductDetailQuery.invSpaceCode = this.inputQuery.invSpaceCode;
      this.invProductDetailQuery.batchNo = this.inputQuery.batchNo;
      this.invProductDetailQuery.deptCode = this.inputQuery.deptCode;
      this.invProductDetailQuery.invCode = this.inputQuery.invCode;
      /*if(!isBlank(this.invProductDetailQuery.invSpaceCode)){
        this.invProductDetailQuery.code=this.inputQuery.code
      }*/
      getInvProductDetail(this.invProductDetailQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.list = res.data.list || [];
          this.total = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.list = [];
          this.total = 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.list = [];
        this.total = 0;
      })
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>