HwJyHbMes/hw-ui/src/views/wms/base/wmswarehouse/allocateMaterial.vue

<template>
  <div class="app-container">

    <h4 class="form-header h4">仓库信息</h4>
    <el-form ref="warehouseInfoForm" :model="warehouseInfoForm" label-width="80px">
      <el-row>
        <el-col :span="8" :offset="2">
          <el-form-item label="仓库编号" prop="warehouseCode">
            <el-input v-model="warehouseInfoForm.warehouseCode" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input v-model="warehouseInfoForm.warehouseName" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-col :span="11">
        <h4 class="form-header h4">已选物料</h4>
        <el-form :model="allocateMaterialQueryParams" ref="allocateMaterialQueryForm" size="small" :inline="true"
                 v-show="showSearch"
                 label-width="68px">
          <el-form-item label="物料编码" prop="materialCode">
            <el-input
              v-model="allocateMaterialQueryParams.materialCode"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>

          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="allocateMaterialQueryParams.materialName"
              placeholder="请输入物料名称"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>
          <el-form-item label="物料规格" prop="materialSpec">
            <el-input
              v-model="allocateMaterialQueryParams.materialSpec"
              placeholder="请输入物料规格"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleAllocateMaterialQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAllocateMaterialQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetAllocateMaterialQuery">重置</el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              @click="handleUnallocateMaterials"
              v-hasPermi="['wms:wmswarehouse:add']"
            >删除
            </el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="allocateMaterialLoading" :data="allocateMaterialList"
                  @selection-change="handleAllocateMaterialSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="物料编码" align="center" prop="materialCode"/>
          <el-table-column label="物料名称" align="center" prop="materialName"/>
          <el-table-column label="物料规格" align="center" prop="materialSpec"/>
        </el-table>

        <pagination
          v-show="allocateMaterialTotal>0"
          :total="allocateMaterialTotal"
          :page.sync="allocateMaterialQueryParams.pageNum"
          :limit.sync="allocateMaterialQueryParams.pageSize"
          @pagination="getAllocateMaterialList"
        />
      </el-col>


      <el-col :span="11" style="margin-left:10px;">
        <h4 class="form-header h4">可选物料</h4>
        <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="物料编码" prop="materialCode">
            <el-input
              v-model="materialQueryParams.materialCode"
              placeholder="请输入物料编码"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleMaterialQuery"
            />
          </el-form-item>

          <el-form-item label="物料名称" prop="materialName">
            <el-input
              v-model="materialQueryParams.materialName"
              placeholder="请输入物料名称"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleMaterialQuery"
            />
          </el-form-item>
          <el-form-item label="物料规格" prop="materialSpec">
            <el-input
              v-model="materialQueryParams.materialSpec"
              placeholder="请输入物料规格"
              style="width:140px;"
              clearable
              @keyup.enter.native="handleMaterialQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetMaterialQuery">重置</el-button>
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              :disabled="allocateMaterialBtnDisable"
              @click="submitForm"
              v-hasPermi="['wms:wmswarehouse:add']"
            >保存
            </el-button>
          </el-form-item>
        </el-form>


        <el-table v-loading="materialLoading" :data="materialinfoList"
                  @selection-change="handleMaterialSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="物料编码" align="center" prop="materialCode"/>
          <el-table-column label="物料名称" align="center" prop="materialName"/>
          <el-table-column label="物料规格" align="center" prop="materialSpec"/>
        </el-table>

        <pagination
          v-show="materialTotal>0"
          :total="materialTotal"
          :page.sync="materialQueryParams.pageNum"
          :limit.sync="materialQueryParams.pageSize"
          @pagination="getMaterialList"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  selectWmsWarehouseMaterialList,
  selectMaterialInfos4AllocationWarehouse,
  allocateMaterials, unallocateMaterials
} from "@/api/wms/wmswarehouse";

export default {
  name: "AllocateMaterialinfo",
  data() {
    return {
      // 已选物料遮罩层
      allocateMaterialLoading: true,
      // 可选物料遮罩层
      materialLoading: true,
      // 已选物料选中数组
      allocateMaterialIds: [],
      //可选物料选中数组
      materialIds: [],
      // 已选物料非单个禁用
      allocateMaterialSingle: true,
      // 已选物料非多个禁用
      allocateMaterialMultiple: true,
      // 可选物料非单个禁用
      materialSingle: true,
      // 可选物料非多个禁用
      materialMultiple: true,
      // 显示搜索条件
      showSearch: true,
      // 已选物料总条数
      allocateMaterialTotal: 0,
      //可选物料总条数
      materialTotal: 0,
      // 已选物料信息表格数据
      allocateMaterialList: [],
      // 可选物料信息表格数据
      materialinfoList: [],
      //仓库信息
      warehouseInfoForm: {},

      allocateMaterialBtnDisable: true,

      // 已选物料信息查询参数
      allocateMaterialQueryParams: {
        pageNum: 1,
        pageSize: 10,
        materialCode: null,
        materialName: null,
        materialSpec: null,
        materialCategories: null,
        materialSubclass: null,
        materialTypeId: null,
        batchFlag: null,
        materialUnitId: null,
        materialUnit: null,
        warehouseId: null
      },

      // 可选物料信息查询参数
      materialQueryParams: {
        pageNum: 1,
        pageSize: 10,
        materialCode: null,
        materialName: null,
        materialSpec: null,
        materialCategories: null,
        materialSubclass: null,
        materialTypeId: null,
        batchFlag: null,
        materialUnitId: null,
        materialUnit: null,
        warehouseId: null
      },


    };
  },
  created() {
    this.allocateMaterialBtnDisable = false;
    const warehouseId = this.$route.params && this.$route.params.warehouseId;
    this.allocateMaterialQueryParams.warehouseId = warehouseId;
    this.materialQueryParams.warehouseId = warehouseId;
    this.warehouseInfoForm.warehouseCode = this.$route.query && this.$route.query.warehouseCode;
    this.warehouseInfoForm.warehouseName = this.$route.query && this.$route.query.warehouseName;
    this.warehouseInfoForm.warehouseFloor = this.$route.query && this.$route.query.warehouseFloor;
    this.getAllocateMaterialList();
    this.getMaterialList();

  },
  methods: {
    /** 查询已选物料信息列表 */
    getAllocateMaterialList() {
      this.allocateMaterialLoading = true;
      selectWmsWarehouseMaterialList(this.allocateMaterialQueryParams).then(response => {
        this.allocateMaterialList = response.rows;
        this.allocateMaterialTotal = response.total;
        this.allocateMaterialLoading = false;
      });
    },

    /** 查询可选物料信息列表 */
    getMaterialList() {
      this.materialLoading = true;
      selectMaterialInfos4AllocationWarehouse(this.materialQueryParams).then(response => {
        this.materialinfoList = response.rows;
        this.materialTotal = response.total;
        this.materialLoading = false;
      });
    },

    /** 已选物料搜索按钮操作 */
    handleAllocateMaterialQuery() {
      this.allocateMaterialQueryParams.pageNum = 1;
      this.getAllocateMaterialList();
    },
    /** 已选物料重置按钮操作 */
    resetAllocateMaterialQuery() {
      this.resetForm("allocateMaterialQueryForm");
      this.handleAllocateMaterialQuery();
    },
    // 已选物料多选框选中数据
    handleAllocateMaterialSelectionChange(selection) {
      this.allocateMaterialIds = selection.map(item => item.warehouseMaterialId)
      this.allocateMaterialCodes = selection.map(item => item.materialCode)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },


    /** 可选物料搜索按钮操作 */
    handleMaterialQuery() {
      this.materialQueryParams.pageNum = 1;
      this.getMaterialList();
    },
    /** 可选物料重置按钮操作 */
    resetMaterialQuery() {
      this.resetForm("materialQueryForm");
      this.handleMaterialQuery();
    },
    // 可选物料多选框选中数据
    handleMaterialSelectionChange(selection) {
      this.materialIds = selection.map(item => item.materialId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleUnallocateMaterials() {
      const warehouseMaterialIds = this.allocateMaterialIds.join(",");
      if (!warehouseMaterialIds || warehouseMaterialIds === '') {
        this.$modal.msgWarning("请选择要删除的物料");
        return;
      }
      const allocateMaterialCodes = this.allocateMaterialCodes;
      const params = {
        warehouseMaterialIds: warehouseMaterialIds
      }
      this.$modal.confirm('是否确认删除物料编码为"' + allocateMaterialCodes + '"的数据项？').then(function () {
        return unallocateMaterials(params);
      }).then(() => {
        this.getAllocateMaterialList();
        this.getMaterialList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },


    /** 提交按钮 */
    submitForm() {
      this.allocateMaterialBtnDisable = true;
      const warehouseId = this.allocateMaterialQueryParams.warehouseId;
      const warehouseFloor = this.warehouseInfoForm.warehouseFloor;
      const materialIds = this.materialIds.join(",");
      if (!materialIds || materialIds === '') {
        this.$modal.msgWarning("请选择要保存的物料");
        this.allocateMaterialBtnDisable = false;
        return;
      }
      allocateMaterials({
        warehouseId: warehouseId,
        warehouseFloor: warehouseFloor,
        materialIds: materialIds
      }).then((response) => {
        this.$modal.msgSuccess("保存成功");
        this.getAllocateMaterialList();
        this.getMaterialList();
        this.allocateMaterialBtnDisable = false;
      }).catch(() => {
        this.getAllocateMaterialList();
        this.getMaterialList();
        this.allocateMaterialBtnDisable = false;
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = {path: "/system/user"};
      this.$tab.closeOpenPage(obj);
    },

  }
};
</script>