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

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";
import addManualInbound from "./addManualInbound.vue";
import * as API from "@/api/inbound-outbound/inbound/manualInbound.js";
import { warehouseSelectList } from "@/api/product-material/warehouse/index.js";

export default {
  components: {
    test,
    query,
    addManualInbound,
  },
  data() {
    return {
      warehouseTypeList: [],
      warehouseSelectList: [],
      btnForm: {
        otherButton: {
          list: [
            {
              name: "手动入库",
              methodsText: "add",
              type: "primary",
              add: () => {
                this.handleInbound();
              },
            },
          ],
        },
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        warehouseId: "",
      },
      selectConfig: [
        {
          label: "仓库名称",
          prop: "warehouseId",
          data: [],
        },
      ],
      tableList: [],
      total: 0,
      loading: false,
      inboundType: 10, // 入库类型  10 采购入库  20 手动入库
      titleText: "",
      open: false,
      form: {
        warehouseId: "",
        remarks: "",
        changeProductList: [],
      },
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.warehouseTypeList = businessDictData.find(
      (item) => item.code === "warehouseType"
    ).children;
    // this.selectConfig[0].data = this.warehouseTypeList.map((item) => ({
    //   label: item.dictValue,
    //   value: item.dictKey,
    // }));
    warehouseSelectList().then((res) => {
      this.warehouseSelectList = res.data.data;
      this.selectConfig[0].data = this.warehouseSelectList.map((x) => ({
        label: x.name,
        value: x.id,
      }));
    });

    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      API.manualInboundList(this.queryParams).then(
        (res) => {
          console.log(res, "qq");
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("manualInboundList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleInbound() {
      this.form = {
        warehouseId: "",
        remarks: "",
        changeProductList: [],
      };
      this.open = true;
    },
    handleCancel() {
      this.open = false;
    },
    handleSubmit() {
      API.manualAdd(this.form).then(
        () => {
          this.msgSuccess("入库成功");
          this.$refs.addManualInbound.loading = false;
          this.open = false;
          this.getList();
        },
        (err) => {
          console.log("manualAdd: " + err);
          this.$refs.addManualInbound.loading = false;
        }
      );
    },
  },
};
</script>


<template>
  <div class="box-card">
    <el-card class="header">
      <test :form-config="btnForm"></test>
    </el-card>
    <el-card class="body-main">
      <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="warehouseName" />
        <el-table-column
          label="物品编码"
          align="left"
          prop="goodsCode"
          width="150"
        />
        <el-table-column label="物品名称" align="left" prop="goodsName" />
        <el-table-column
          label="规格"
          align="left"
          prop="goodsSpecs"
          width="100"
        />
        <el-table-column
          label="单位"
          align="left"
          prop="goodsUnit"
          width="100"
        />
        <el-table-column
          label="入库数量"
          align="right"
          prop="changeQuantity"
          width="120"
        />
        <el-table-column
          label="操作人"
          align="left"
          prop="createUser"
          width="130"
        />
        <el-table-column
          label="操作时间"
          align="left"
          prop="createTime"
          width="180"
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      title="手动入库"
      :visible.sync="open"
      v-if="open"
      width="80%"
      top="60px"
    >
      <add-manual-inbound
        :form="form"
        :warehouseSelectList="warehouseSelectList"
        :warehouseTypeList="warehouseTypeList"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="addManualInbound"
      ></add-manual-inbound>
    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .header {
    // height: 100px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .body-main {
    flex: 1;
  }
}
</style>