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

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";
import byTable from "@/components/by-table/index.js";
import addCombination from "./addCombination.vue";
import * as API from "@/api/inventory-management/combination.js";

export default {
  components: {
    test,
    byTable,
    query,
    addCombination,
  },
  data() {
    return {
      btnForm: {
        otherButton: {
          list: [
            {
              name: "组合操作",
              methodsText: "add",
              type: "primary",
              add: () => {
                this.handleAdd();
              },
            },
            {
              name: "批量组合",
              methodsText: "batch",
              type: "primary",
              batch: () => {
                this.handleBatch();
              },
            },
          ],
        },
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      },
      selectConfig: [
        // {
        //   label: "退款状态",
        //   prop: "type",
        //   data: [],
        // },
      ],
      tableList: [],
      total: 0,
      loading: false,
      titleText: "组合操作",
      open: false,
      form: {},
      submitType: "10", //10组合操作  20批量组合
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      API.getCombinationList(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("getCombinationList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    handleAdd() {
      this.titleText = "组合操作";
      this.form = {
        productId: "",
        combinationWarehouseId: "",
        sourceWarehouseId: "",
        combinationQuantity: "",
      };
      this.submitType = "10";
      this.open = true;
    },
    handleBatch() {
      this.titleText = "批量组合";
      this.submitType = "20";
      this.form = {
        productId: "",
        combinationQuantity: "",
        productList: [],
      };
      this.open = true;
    },
    handleCancel() {
      this.open = false;
    },
    handleEdit(row) {},
    handleSubmit() {
      if (this.submitType === "10") {
        API.addCombination(this.form).then(
          () => {
            this.msgSuccess("操作成功");
            this.$refs.addCombination.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("addCombination: " + err);
            this.$refs.addCombination.loading = false;
          }
        );
      } else {
        API.batchCombination(this.form.productList).then(
          () => {
            this.msgSuccess("操作成功");
            this.$refs.addCombination.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("addCombination: " + err);
            this.$refs.addCombination.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="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="combinationWarehouseName"
        />
        <el-table-column
          label="半成品所在仓库"
          align="left"
          prop="sourceWarehouseName"
        />
        <el-table-column
          label="组合数量"
          align="left"
          prop="combinationQuantity"
        />
        <el-table-column label="操作人" align="left" prop="createUserName" />
        <el-table-column label="操作时间" align="left" prop="createTime" />
        <!-- <el-table-column label="操作" align="left" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >查看
            </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="30%"
      top="60px"
    >
      <add-combination
        :form="form"
        :submitType="submitType"
        @submit="handleSubmit"
        @cancel="handleCancel"
        ref="addCombination"
      ></add-combination>
    </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;
    overflow-y: auto;
  }
}
</style>