client-wms-v5/src/stock/AutoGenerateInventoryClassSafeStock.vue

<template>
  <div class="container-fluid">
    <Navbar title="自动生成存货分类安全库存" :is-go-back="true" />
    <div class="form-inline">
      <div class="form-group">
        <label> 步骤1：仓库： </label>
        <!-- <input autocomplete="off" type="text" name=""> -->
        <div class="input-group">
          <v-select v-model="warehouse" label="name" :options="warehouses" />
        </div>
      </div>
    </div>

    <h4 />

    <div class="form-inline">
      <div class="form-group">
        <label> 步骤2：类别名称： </label>
        <input
          v-model.trim="className"
          autocomplete="off"
          type="text"
          class="form-control"
          @keyup.enter="reQuery"
        />
      </div>
      <div class="form-group">
        <label> 类别编号： </label>
        <input
          v-model.trim="classNo"
          autocomplete="off"
          type="text"
          class="form-control"
          @keyup.enter="reQuery"
        />
      </div>
      <button type="button" class="btn btn-primary" @click="reQuery">
        查询
      </button>
    </div>

    <h4 />

    <div class="form-inline">
      <div class="form-group">
        <label> 步骤3： </label>
        <div class="input-group">
          <button type="button" class="btn btn-primary" @click="save">
            生成物料类别安全库存
          </button>
        </div>
      </div>
    </div>

    <h4 />

    <table class="table table-bordered">
      <thead>
        <tr>
          <th>序号</th>
          <th>类别名称</th>
          <th>类别编号</th>
          <th>最小库存</th>
          <th>最大库存</th>
          <th>已生成</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data, index) in inventoryClasses" :key="data.id">
          <td>
            <span v-if="data.hasSafeStock">
              <input
                v-model="dataIdsForSafeStock"
                autocomplete="off"
                type="checkbox"
                :value="data.id"
                disabled
              />
            </span>
            <span v-else>
              <input
                v-model="dataIdsForSafeStock"
                autocomplete="off"
                type="checkbox"
                :value="data.id"
              />
            </span>
            {{ index + 1 }}
          </td>
          <td>{{ data.className }}</td>
          <td>{{ data.classNo }}</td>
          <td v-if="data.hasSafeStock">{{ data.minimumStock }}</td>
          <td v-else>
            <input
              :key="data.id"
              v-model.trim="data.minimumStock"
              autocomplete="off"
              type="number"
              class="form-control"
            />
          </td>
          <td v-if="data.hasSafeStock">{{ data.maximumStock }}</td>
          <td v-else>
            <input
              v-model.trim="data.maximumStock"
              autocomplete="off"
              type="number"
              class="form-control"
            />
          </td>
          <td>{{ data.hasSafeStock ? "是" : "否" }}</td>
        </tr>
      </tbody>
    </table>
    <VueBootstrapPagination
      v-if="inventoryClasses.length > 0"
      :pagination="pagination"
      :callback="queryInventoryClasses"
    />
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';

import InventoryClassResource from '../api/common/InventoryClassResource.js';


import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';

export default {
  components: {
    
    vSelect,
    
    
  },
  data: function () {
    return {
      warehouses: [],
      warehouse: null,
      inventoryClasses: [],
      className: '',
      classNo: '',
      dataIdsForSafeStock: [],
      pagination: {
        total: 0,
        per_page: 10,
        current_page: 1,
        last_page: 10,
      },
      loading: false,
    };
  },
  watch: {
    warehouse: {
      handler: function (to, from) {
        if (to) {
          this.reQuery();
        }
      },
      deep: true,
    },
  },
  mounted: function () {
    this.queryAllWarehouses();
  },
  methods: {
    queryAllWarehouses: function () {
      var _self = this;
      _self.loading=true;
      $.ajax({
        type: 'get',
        url: Common.getApiURL('WarehouseResource/all'),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.warehouses = data;
          _self.loading=false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    reQuery: function () {
      this.pagination.current_page = 1;
      this.queryInventoryClasses();
    },

    queryInventoryClasses: function () {
      var _self = this;
      if (!this.warehouse) {
        Notify.notice('提示', '请选择仓库', false);
        return;
      }
      _self.inventoryClasses = [];
      _self.dataIdsForSafeStock = [];

      let inventoryClassQueryConditionDto = {
        name: _self.className,
        no: _self.classNo,
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      InventoryClassResource.findByQueryCondition(
        inventoryClassQueryConditionDto,
      ).then(
        successData => {
          if (successData.dataList != null && successData.dataList.length > 0) {
            _self.checkSafeStock(successData.dataList);
            _self.pagination.total = successData.totalSize;
            _self.pagination.last_page =
              successData.totalSize % _self.pagination.per_page == 0
                ? successData.totalSize / _self.pagination.per_page
                : Math.floor(
                  successData.totalSize / _self.pagination.per_page,
                ) + 1;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    checkSafeStock: function (inventoryClasses) {
      var _self = this;
      $.ajax({
        type: 'post',
        dataType: 'json',
        url:
          Common.getApiURL(
            'inventoryClassSafeStockResource/checkInventoryClass',
          ) +
          '/' +
          _self.warehouse.id,
        data: JSON.stringify(inventoryClasses),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.inventoryClasses = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    save: function () {
      var _self = this;
      if (this.dataIdsForSafeStock.length == 0) {
        Notify.notice('提示', '您还没有勾选任何数据。', false);
        return;
      }
      var datasForSafeStock = [];
      for (var i = 0; i < this.dataIdsForSafeStock.length; i++) {
        for (var j = 0; j < this.inventoryClasses.length; j++) {
          if (this.inventoryClasses[j].id == this.dataIdsForSafeStock[i]) {
            var dataForSafeStock = {};
            dataForSafeStock.inventoryClassId = this.inventoryClasses[j].id;
            if (this.inventoryClasses[j].minimumStock) {
              dataForSafeStock.minimumStock =
                this.inventoryClasses[j].minimumStock;
            } else {
              dataForSafeStock.minimumStock = null;
            }
            if (this.inventoryClasses[j].maximumStock) {
              dataForSafeStock.maximumStock =
                this.inventoryClasses[j].maximumStock;
            } else {
              dataForSafeStock.maximumStock = null;
            }
            datasForSafeStock.push(dataForSafeStock);
            break;
          }
        }
      }
      $.ajax({
        type: 'post',
        dataType: 'json',
        url:
          Common.getApiURL('inventoryClassSafeStockResource/save') +
          '/' +
          _self.warehouse.id,
        data: JSON.stringify(datasForSafeStock),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.queryInventoryClasses();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
  },
};
</script>