byte-sailing-vue/src/views/inbound-outbound/treatIn/index.vue

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";
import purchaseInbound from "./purchaseInbound.vue";
import JDbackInbound from "./JDbackInbound.vue";

import * as API from "@/api/inbound-outbound/treatIn.js";
import {
  logisticsDetails,
  purchaseAdd,
} from "@/api/inbound-outbound/inbound/purchaseInbound.js";
import { JDreGoodsDetails } from "@/api/order-management/JDReturnGoods/index.js";

export default {
  components: {
    test,
    query,
    purchaseInbound,
    JDbackInbound,
  },
  data() {
    return {
      inBoundTypeList: [
        { dictValue: "采购入库", dictKey: "1" },
        { dictValue: "京东退货", dictKey: "4" },
      ],
      inStockStatusList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        type: "",
      },
      selectConfig: [
        {
          label: "类型",
          prop: "type",
          data: [
            { label: "采购入库", value: "1" },
            { label: "京东退货", value: "4" },
          ],
        },
      ],
      tableList: [],
      total: 0,
      loading: false,
      titleText: "",
      open: false,
      form: {},

      rowData: {},
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );

    this.inStockStatusList = businessDictData.find(
      (item) => item.code === "inStockStatus"
    ).children;

    this.selectConfig[0].data = this.inBoundTypeList.map((x) => ({
      value: x.dictKey,
      label: x.dictValue,
    }));

    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      API.inList(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("inList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleInbound(row) {
      this.rowData = { ...row };
      this.open = true;
      if (row.businessType === 1) {
        this.titleText = "采购入库";
        this.$nextTick(() => {
          this.$refs.purchaseInbound.loading = true;
          logisticsDetails({ logisticsInfoId: row.id }).then(
            (res) => {
              let list = res.data.data;
              list = list.map((x) => ({
                ...x,
                changeQuantity:
                  Number(x.shipmentQuantity) - Number(x.receiptQuantity),
              }));
              this.form = {
                id: row.id,
                purchaseCode: row.purchaseCode,
                supplierName: row.supplierName,
                logisticsCompanyName: row.logisticsCompanyName,
                code: row.code,
                changeDetailsList: list,
              };
              this.$refs.purchaseInbound.loading = false;
            },
            (err) => {
              console.log("logisticsDetails: " + err);
              this.$refs.purchaseInbound.loading = false;
            }
          );
        });
      } else if (row.businessType === 4) {
        this.titleText = "京东退货入库";
        this.$nextTick(() => {
          this.$refs.JDbackInbound.loading = true;
          JDreGoodsDetails({ id: row.businessId }).then((res) => {
            this.form = {
              logisticsId: row.id,
              warehouseId: "",
              logisticsCompanyName: row.logisticsCompanyName,
              code: row.code,
              logisticsDetailsList: res.data.data,
            };
            this.$refs.JDbackInbound.loading = false;
          });
        });
      }
    },
    handleCancel() {
      this.open = false;
    },
    handleSubmit() {
      if (this.rowData.businessType === 1) {
        purchaseAdd({
          logisticsInfoId: this.form.id,
          list: this.form.changeDetailsList,
        }).then(
          () => {
            this.msgSuccess("入库成功");
            this.$refs.purchaseInbound.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("purchaseAdd: " + err);
            this.$refs.purchaseInbound.loading = false;
          }
        );
      } else {
        const data = {
          logisticsId: this.form.logisticsId,
          warehouseId: this.form.warehouseId,
        };
        API.JDInBound(data).then(
          () => {
            this.msgSuccess("入库成功");
            this.$refs.JDbackInbound.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("outboundAdd: " + err);
            this.$refs.JDbackInbound.loading = false;
          }
        );
      }
    },
  },
};
</script>


<template>
  <div class="box-card">
    <el-card>
      <query
        :selectConfig="selectConfig"
        :req="queryParams"
        :isShowMore="true"
        @handleQuery="handleQuery"
        @handleMore="
          () => {
            queryDialog = true;
          }
        "
      ></query>
      <el-table :data="tableList" v-loading="loading">
        <el-table-column
          label="类型"
          align="left"
          prop="businessType"
          width="120"
          :formatter="(row) => dictDataEcho(row.businessType, inBoundTypeList)"
        />
        <el-table-column
          label="仓库名称"
          align="left"
          prop="warehouseName"
          width="150"
        />
        <el-table-column
          label="单号"
          align="left"
          prop="purchaseCode"
          width="180"
        />
        <el-table-column
          label="物流/快递公司"
          align="left"
          prop="logisticsCompanyName"
          width="150"
        />
        <el-table-column label="物流/快递单号" align="left" prop="code" />
        <el-table-column
          label="操作人"
          align="left"
          prop="purchaseName"
          width="120"
        />
        <el-table-column
          label="操作时间"
          align="left"
          prop="updateTime"
          width="150"
        />
        <el-table-column
          label="状态"
          align="left"
          prop="inStockStatus"
          width="100"
          :formatter="
            (row) => dictDataEcho(row.inStockStatus, inStockStatusList)
          "
        />
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleInbound(scope.row)"
              v-if="scope.row.status < 30"
              >入库
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="titleText"
      :visible.sync="open"
      v-if="open"
      width="80%"
      top="60px"
    >
      <purchase-inbound
        v-if="rowData.businessType === 1"
        :form="form"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="purchaseInbound"
      ></purchase-inbound>

      <JDbackInbound
        v-else
        :form="form"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="JDbackInbound"
      >
      </JDbackInbound>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
</style>