byte-sailing-vue/src/views/inventory-management/query/index.vue

<script>
import query from "@/components/query/index.vue";
import * as API from "@/api/inventory-management/query.js";

export default {
  components: {
    query,
  },
  data() {
    return {
      activeName: "first",
      warehouseTypeList: [],
      productTypeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      },
      selectConfigOne: [
        {
          label: "产品类型",
          prop: "type",
          data: [],
        },
      ],

      selectConfigTwo: [
        {
          label: "仓库类型",
          prop: "type",
          data: [],
        },
      ],
      tableList: [],
      total: 0,
      loading: false,
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.productTypeList = businessDictData.find(
      (item) => item.code === "productType"
    ).children;

    this.selectConfigOne[0].data = this.productTypeList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));
    this.warehouseTypeList = businessDictData.find(
      (item) => item.code === "warehouseType"
    ).children;

    this.selectConfigTwo[0].data = this.warehouseTypeList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));

    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;

      switch (this.activeName) {
        case "first":
          API.byWarehouseList(this.queryParams).then(
            (res) => {
              this.tableList = res.data.data.records;
              this.total = res.data.data.total;
              this.loading = false;
            },
            (err) => {
              console.log("byWarehouseList: " + err);
              this.loading = false;
            }
          );
          break;
        case "second":
          API.byProductList(this.queryParams).then(
            (res) => {
              this.tableList = res.data.data.records;
              this.total = res.data.data.total;
              this.loading = false;
            },
            (err) => {
              console.log("byProductList: " + err);
              this.loading = false;
            }
          );
          break;

        default:
          break;
      }
    },
    handleQuery() {
      this.getList();
    },
    handleClick() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      };
      this.handleQuery();
    },
  },
};
</script>
  <template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="按仓库" name="first"> </el-tab-pane>
        <el-tab-pane label="按产品" name="second"> </el-tab-pane>
        <!-- <el-tab-pane label="按组合" name="third"> </el-tab-pane> -->
      </el-tabs>
      <div v-show="activeName === 'first'">
        <query
          :selectConfig="[]"
          :req="queryParams"
          :isShowMore="false"
          @handleQuery="handleQuery"
          @handleMore="
            () => {
              queryDialog = true;
            }
          "
        ></query>
        <el-table :data="tableList" v-loading="loading">
          <!-- <el-table-column
            label="产品类型"
            align="left"
            :formatter="(row) => dictDataEcho(row.type, productTypeList)"
          /> -->
          <el-table-column label="仓库名称" align="left" prop="warehouseName" />
          <el-table-column label="产品编码" align="left" prop="productCode" />
          <el-table-column label="产品名称" align="left" prop="productName" />
          <el-table-column label="规格" align="left" prop="productSpecs" />
          <el-table-column label="单位" align="left" prop="productUnit" />
          <el-table-column label="可用库存" align="left" prop="quantity" />
          <el-table-column
            label="冻结库存"
            align="left"
            prop="frozenQuantity"
          />
          <el-table-column
            label="次品库存"
            align="left"
            prop="defectiveQuantity"
          />
          <!-- <el-table-column label="查看" align="left">
            <template>
              <el-button type="text" @click="deleteRow(scope.$index)"
                >出库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >入库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >调仓记录</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div v-show="activeName === 'second'">
        <query
          :selectConfig="[]"
          :req="queryParams"
          :isShowMore="false"
          @handleQuery="handleQuery"
          @handleMore="
            () => {
              queryDialog = true;
            }
          "
        ></query>
        <el-table :data="tableList" v-loading="loading">
          <el-table-column label="产品编码" align="left" prop="productCode" />
          <el-table-column label="产品名称" align="left" prop="productName" />
          <el-table-column label="规格" align="left" prop="productSpecs" />
          <el-table-column label="单位" align="left" prop="productUnit" />
          <el-table-column label="可用库存" align="left" prop="quantity" />
          <el-table-column
            label="冻结库存"
            align="left"
            prop="frozenQuantity"
          />
          <el-table-column
            label="次品库存"
            align="left"
            prop="defectiveQuantity"
          />

          <!-- <el-table-column label="查看" align="left">
            <template>
              <el-button type="text" @click="deleteRow(scope.$index)"
                >出库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >入库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >调仓记录</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div v-show="activeName === 'third'">
        <query
          :selectConfig="selectConfigOne"
          :req="queryParams"
          :isShowMore="false"
          @handleQuery="handleQuery"
          @handleMore="
            () => {
              queryDialog = true;
            }
          "
        ></query>
        <el-table :data="tableList" v-loading="loading">
          <el-table-column label="组合编码" align="left" prop="customerName" />
          <el-table-column label="组合名称" align="left" />
          <el-table-column label="规格" align="left" />
          <el-table-column label="单位" align="left" />
          <el-table-column label="库存数量" align="left" />
          <el-table-column label="可组合数量" align="left" />
          <el-table-column label="查看" align="left">
            <template>
              <el-button type="text" @click="deleteRow(scope.$index)"
                >出库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >入库记录</el-button
              >
              <el-button type="text" @click="deleteRow(scope.$index)"
                >调仓记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
</style>