udi-spms-vue/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">
          产品标识
        </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="条码:">
        <el-input v-model="invProductDetailQuery.code"
                  placeholder="条码查询"
                  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%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="条码"
        prop="code"
        width="500"
        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="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"
        width="150"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="所属单据"
        prop="orderId"
        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,
    };
  },
  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();
    },
    getList() {
      this.loading = true;
      this.invProductDetailQuery.relId = this.inputQuery.relId;
      this.invProductDetailQuery.supId = this.inputQuery.supId;
      this.invProductDetailQuery.batchNo = this.inputQuery.batchNo;
      this.invProductDetailQuery.deptCode = this.inputQuery.deptCode;
      this.invProductDetailQuery.invCode = this.inputQuery.invCode;
      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>