spms-vue/src/views/inventory/invUdiTrace.vue

<template>
  <div>
    <el-card class="el-card">

      <el-form
          :inline="true"
          :model="query"
          style="display: flex"
          label-width="480px"
          size="mini"
      >
        <el-form-item class="query-form-item" label-width="100px">
          <el-input
              v-model="query.code"
              placeholder="UDI码"
              clearable
              style="width: 500px"
              @keyup.enter.native="keyup_submit($event)"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select
              v-model="query.supId"
              filterable
              remote
              clearable="true"
              reserve-keyword
              placeholder="请输入供应商名称"
              :remote-method="findMethod"
              size="mini"
              style="width: 100%"
              :loading="loading"
          >
            <el-option
                v-for="item in fromOptions"
                :key="item.name"
                :label="item.name"
                :value="item.erpId"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="display: flex">
          <el-button type="primary" icon="search" @click="getCodeList"
          >查询
          </el-button
          >
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="codeArry" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
            label="条码"
            prop="code"
            width="300"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="单据类型" prop="action" width="150">
          <template slot-scope="scope">
            <span>{{ getActionName(scope.row.action) }}</span>
          </template>
        </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="updateTime"
            width="150"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="所属扫码单据"
            prop="orderIdFk"
            show-overflow-tooltip
        ></el-table-column>
        <el-table-column
            label="所属业务单据"
            prop="stockIdFk"
            show-overflow-tooltip
        ></el-table-column>
      </el-table>

      <el-pagination
          :page-size="query.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next,total"
          :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  filterDetailProducts, statDetailProducts
} from "../../api/inventory/InvProducts";


import {filterTrace} from "../../api/inventory/invCodeTrace"

import store from "../../store";
import draggable from "vuedraggable";
import {getBussinessType} from "../../api/basic/bussinessType";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";

export default {
  name: "invUdiTrace",
  props: {
    idQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      idQuery: {},
      query: {
        code: null,
        batchNo: null,
        productIdFk: null,
        customerId: null,
        page: 1,
        limit: 20,
        supId: null,
      },
      codeArry: [],
      total: 0,
      loading: true,
      index: null,
      formLoading: false,
      formVisible: false,
      deleteLoading: false,
      orderNo: null,
      busTypes: [],
      statData: {},
      fromOptions: [],
    };
  },
  components: {
    draggable,
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        productIdFk: null,
        customerId: null,
        page: 1,
        limit: 20,
      };
      this.getCodeList();
    },
    onSubmit() {
      this.$router.push({
        path: "",
        query: this.query,
      });
      this.getCodeList();
    },
    handleSizeChange(val) {
      this.query.limit = val;
      this.getCodeList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getCodeList();
    },

    getCodeList() {
      this.loading = true;
      filterTrace(this.query)
          .then((response) => {
            this.loading = false;
            this.codeArry = response.data.list || [];
            this.total = response.data.total || 0;
          })
          .catch(() => {
            this.loading = false;
            this.list = [];
            this.total = 0;
          });
    },

    getStat() {
      this.query.productIdFk = this.idQuery.relIdFk;
      this.query.batchNo = this.idQuery.batchNo;
      this.query.customerId = store.getters.customerId;
      statDetailProducts(this.query) //查找该单号下的所有条码
          .then((response) => {
            this.loading = false;
            this.statData = response.data;
          })
          .catch(() => {
            this.loading = false;
          });

    },

    intentBack() {
      //  this.$router.push({path:'../readme/detail',query:{id:row.corpOrderId}});
      this.$router.go(-1);
    },
    getActionName(action) {
      for (let i = 0; i < this.busTypes.length; i++) {
        if (this.busTypes[i].action === action) {
          return this.busTypes[i].name;
        }
      }
    },
    getBusType() {
      let query = {
        enabled: true,
      };
      getBussinessType(query)
          .then((response) => {
            this.busTypes = response.data.list || [];
            this.filterQuery.billAction = this.busTypes[0].action;
            // this.getList();
          })
          .catch(() => {
          });
    },
    findMethod(query) {
      console.log(query);
      this.fromOptions = [];
      let cQuery = {
        key: query,
      };
      getBasicUnitMaintains(cQuery)
          .then((response) => {
            this.loading = false;
            this.fromOptions = response.data.page.list || [];
          })
          .catch(() => {
            this.loading = false;
          });
    },

  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getBusType();
    this.getCodeList();
    this.getStat();
  },
};
</script>