client-wms-v5/src/pick/StockOutPrepareApproved.vue

<template>
  <a-layout>
    <a-layout-header class="header">
      <Navbar title="领料清单" :is-go-back="false">
        <a-space>
          <a-button type="link" title="仓库库存" @click="stockOutPrepareLine">
            <template #icon><HomeOutlined /></template>
          </a-button>
          <a-button type="link" title="领料车" @click="openStockOutCar">
            <template #icon><ShoppingCartOutlined /></template>
            <a-badge :count="count" :number-style="{ marginTop: '-2px' }" />
          </a-button>
        </a-space>
      </Navbar>
    </a-layout-header>

    <a-layout-content class="content">
      <a-form layout="inline" class="search-form">
        <a-form-item label="项目事件" required>
          <a-select
            v-model:value="projectItemName"
            style="width: 220px"
            show-search 
            @change="projectHandleChange"
          >
            <a-select-option v-for="item in projectList" :key="item.id" :value="item.name">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="getStockOutPrepareDatas">查询</a-button>
            <a-button danger @click="deleteStockOutPrepare">删除</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <a-layout class="main-layout">
        <a-layout-sider width="300px" class="sider">
          <a-space direction="vertical" class="pagination-controls">
            <a-button-group>
              <a-button @click="previousPage">上一页</a-button>
              <a-button @click="nextPage">下一页</a-button>
            </a-button-group>
            
            <a-list item-layout="horizontal" :data-source="stockOutPrepares">
              <template #renderItem="{ item }">
                <a-list-item 
                  :class="{ 'selected-list-item': item === selectedStockOutPrepare }"
                  @click="setStockOutPrepare(item)"
                >
                  {{ item.documentNo }}({{ item.warehouseName }},{{ item.status }})
                </a-list-item>
              </template>
            </a-list>
          </a-space>
        </a-layout-sider>

        <a-layout-content>
          <a-table
            :columns="columns"
            :data-source="stockOutPrepareLines"
            :scroll="{ x: 1500, y: '60vh' }"
            size="small"
            bordered
            row-key="inventoryId"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'image'">
                <a-image
                  :src="Common.getThumbnailImageSrc(className, record.imageName)"
                  width="40"
                  :preview="false"
                  @click="$refs.imagePreview.preview(className, record.imageName)"
                />
              </template>
              
              <template v-if="column.dataIndex === 'inventoryStatus'">
                <a-tag :color="record.inventoryStatus === 2 ? 'blue' : 'red'">
                  {{ record.inventoryStatus === 2 ? '已拣货' : '未拣货' }}
                </a-tag>
              </template>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>

      <div class="flex-footer">
        <a-space>
          <span>第{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{ 
            pagination.current_page * pagination.per_page 
          }}条,共计{{ pagination.total }}条</span>
          <a-select 
            v-model:value="pagination.per_page" 
            style="width: 90px"
            @change="gridSizeSelect"
          >
            <a-select-option :value="20">20</a-select-option>
            <a-select-option :value="50">50</a-select-option>
            <a-select-option :value="100">100</a-select-option>
          </a-select>
          <a-pagination 
            v-model:current="pagination.current_page"
            :total="pagination.total"
            :page-size="pagination.per_page"
            show-less-items
            @change="getStockOutPrepareLineDatas"
          />
        </a-space>
      </div>
    </a-layout-content>

    <ImagePreview ref="imagePreview" />
    <Loading v-if="loading" />
  </a-layout>
</template>

<script>
import { HomeOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue';
import Common from '../common/Common.js';
import StockOutPrepareResource from '../api/wms/StockOutPrepareResource.js';
import StockOutPrepareLineResource from '../api/wms/StockOutPrepareLineResource.js';
import PickingCarResource from '../api/wms/PickingCarResource.js';

export default {
  components: {
    HomeOutlined,
    ShoppingCartOutlined,
  },
  data: function () {
    this.Common = Common;
    return {
      stockOutPrepareLines: [], //详单对应的数据
      stockOutPrepares: [], //领料主单数据
      projectList:[],//项目事件数据
      documentType: 0, //手工单据
      documentStatus: 'PROCESSING', //查询全部单据
      projectItemId: undefined,
      stockOutPrepareId: undefined,
      selectedStockOutPrepare: null,
      userId: null,
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      pagination2: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      hot: '',
      className: 'com.leanwo.prodog.model.common.Inventory',
      bomInventoryNo: undefined,
      bomInventoryName: undefined,
      bomInventoryType: undefined,
      selectedBom: '',
      bomDtoList: [], // BOM清单
      bomInventoryId: undefined,
      count: 0,
      loading: false,
      columns: [
        { title: '序号', dataIndex: 'index', width: 80 },
        { title: '图片', dataIndex: 'image', width: 100 },
        { title: '物料编码', dataIndex: 'inventoryNo', width: 150 },
        { title: '物料名称', dataIndex: 'inventoryName', width: 200 },
        { title: '规格型号', dataIndex: 'inventoryType', width: 150 },
        { title: '需求模板', dataIndex: 'stockOutPrepateTemplateName', width: 120 },
        { title: '需求数量', dataIndex: 'needQuantity', width: 120 },
        { title: '领用数量', dataIndex: 'quantity', width: 120 },
        { title: '状态', dataIndex: 'inventoryStatus', width: 100 },
      ],
    };
  },
  watch: {

  },

  created: function () {
    if (!window.localStorage) {
      alert('浏览器不支持localstorage');
    } else {
      var storage = window.localStorage;
      if (storage.getItem('projectItemId') != 'null') {

        this.projectItemId = storage.getItem('projectItemId');
        this.projectItemName = storage.getItem('projectItemName');
      }
    }

  },

  mounted: function () {
    this.getLocalStorage();
    this.loadSelectProjectItem();
    this.queryPickingCarCount();
  },

  methods: {

    // 项目事件
    projectHandleChange:function (_,{key,value}) {
      var _self = this;
      console.log(key,value);
      this.projectItemId = key;
      this.projectItemName = value;
      localStorage.setItem('projectItemId',key);
      localStorage.setItem('projectItemName',value);
      _self.getStockOutPrepareDatas();
    },

    /**
         * 查询领料车中的数量
         */
    queryPickingCarCount: function () {
      var _self = this;
      PickingCarResource.queryPickingCarCount().then(successData => {
        if(successData.errorCode == 0) {
          _self.count = successData.data;
        }
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 打开加入领料车页面
         */
    stockOutPrepareLine: function () {
      var _self = this;
      _self.$router.push('/wms/stockOutPrepareLine');
    },
    /**
         * 打开领料车页面
         */
    openStockOutCar: function () {
      var _self = this;
      _self.$router.push('/wms/pickingCar');
    },

    // 获取localStorage
    getLocalStorage: function () {
      var storage = localStorage;
      if (!storage) {
        alert('浏览器不支持localstorage');
      } else {
        var json = storage.getItem('#LoginInfo');
        this.loginInfo = JSON.parse(json);
        this.userId = this.loginInfo.userId;
      }
    },

    /**
         * 点击选择领料单事件
         */
    setStockOutPrepare: function (item) {
      var _self = this;
      _self.selectedStockOutPrepare = item;
      _self.stockOutPrepareId = item.stockOutPrepareId;
      _self.pagination.current_page = 1; // 当主单选择改变时。详单页数改为第一个
      //_self.stockOutPrepareLines = _self.stockOutPrepares[index].stockOutPrepareLineDtos;
      //查询对应详单数据
      _self.getStockOutPrepareLineDatas();
    },
    /**
         * 项目事件
         */
    loadSelectProjectItem: function () {
      var _self = this;
      $.ajax({
        type: 'get',
        dataType: 'json',
        url: Common.getApiURL('ProjectItemResource/queryByCondition'),
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function ({datas,errorCode,errorMessage}) {
          if (errorCode == 0) {
            _self.projectList = datas; 
          }else{
            alert(errorMessage);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 修改领料详情每页显示的数量
         * @param {Object} newPageSize
         */
    gridSizeSelect: function (newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      // 刷新界面
      this.getStockOutPrepareLineDatas();
    },

    /**
         * 领料主单上一页
         */
    previousPage: function () {
      var _self = this;
      if (_self.pagination2.current_page == 1) {
        Common.showDialog('提示', '已经是第一页了', 'error');
        return;
      }
      _self.pagination2.current_page = _self.pagination2.current_page - 1;
      _self.getStockOutPrepareDatas();
    },

    /**
         * 领料主单下一页
         */
    nextPage: function () {
      var _self = this;
      console.log('总条数：' + _self.pagination2.total + '总页数：' + _self.pagination2.last_page + '当前页数：' + _self.pagination2.current_page);
      if (_self.pagination2.current_page == _self.pagination2.last_page || _self.pagination2.last_page == 1 || _self.pagination2.last_page == 0) {
        Common.showDialog('提示', '已经是最后一页了', 'error');
        return;
      }
      _self.pagination2.current_page = _self.pagination2.current_page + 1;
      _self.getStockOutPrepareDatas();
    },

    //查询领料主单数据
    getStockOutPrepareDatas: function () {
      var _self = this;
      var param = {
        start: (_self.pagination2.current_page - 1) * _self.pagination2.per_page,
        length: _self.pagination2.per_page,
        projectItemId: _self.projectItemId,
        documentType: _self.documentType,
        userId: _self.userId,
        documentStatus: _self.documentStatus,
        loadLines: false,
      };
      _self.loading=true;


      StockOutPrepareResource.list(param).then(successData => {
        if(successData.errorCode == 0) {
          _self.loading=false;
          _self.pagination2.total = successData.total;
          _self.stockOutPrepares = successData.datas;
          _self.frist();
          _self.stockOutPrepareLines = [];
          _self.pagination2.last_page = Math.ceil(successData.total / successData.length);
        } else {
          Notify.error('提示', successData.errorMessage, false);
        }
      }, errorData => {
        _self.loading=false;
        Common.processException(errorData);
      });

    },

    /**
         * 首次进入此页面显示第一个的详情
         */
    frist: function () {
      var _self = this;
      if (_self.stockOutPrepares != null && _self.stockOutPrepares.length > 0) {
        _self.setStockOutPrepare(_self.stockOutPrepares[0]);
      }
    },

    /**
         * 删除领料单
         */
    deleteStockOutPrepare: function () {
      var _self = this;
      if (_self.selectedStockOutPrepare == null) {
        Common.showDialog('提示', '请选择要删除的领料单', 'error');
        return;
      }

      var status = _self.selectedStockOutPrepare.status;

      if (status != '编辑中') {
        Common.showDialog('提示', '当前选择要删除的领料单已经开始拣货或已经完成拣货，不能删除', 'error');
        return;
      }

      Notify.show({
        title: '确认要删除已选择的领料单',
        message: '您确定要将选择的领料单，单据号：' + _self.selectedStockOutPrepare.documentNo + '(' + status + ')' + '删除吗？如果\\"是\\"的话，请点击\\"确定\\"按钮，否则点击\\"取消\\"按钮',
        buttons: [
          {
            label: '确定',
            cssClass: 'btn-primary',
            action: function (dialogItself) {
              dialogItself.close();
              _self.loading=true;

              StockOutPrepareResource.deleteStockOutPrepare(_self.stockOutPrepareId).then(successData => {
                if(successData.errorCode == 0) {
                  var message = successData.data.errorMessage;
                  Notify.success('成功', message, 4000);
                  _self.getStockOutPrepareDatas();
                  _self.loading=false;
                } else {
                  Notify.error('提示', successData.errorMessage, false);
                  return;
                }
              }, errorData => {
                _self.loading=false;
                Common.processException(errorData);
              });
            },
          }, {
            label: '取消',
            action: function (dialogItself) {
              dialogItself.close();
            },
          }],
      });


    },

    //查询领料详单数据
    getStockOutPrepareLineDatas: function () {
      var _self = this;
      if (_self.stockOutPrepareId == undefined) {
        Common.showDialog('提示', '请选择要查看的领料主单', 'error');
        return;
      }
      var param = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
        stockOutPrepareId: _self.stockOutPrepareId,
      };
      _self.loading=true;

      StockOutPrepareLineResource.queryByStockoutPrepare(param).then(successData => {
        if(successData.errorCode == 0) {
          _self.loading=false;

          _self.pagination.total = successData.total;
          _self.stockOutPrepareLines = successData.datas;
          _self.pagination.last_page = Math.ceil(successData.total / successData.length);
        } else {
          Notify.error('提示', successData.errorMessage, false);
          return;
        }
      }, errorData => {
        _self.loading=false;
        Common.processException(errorData);
      });

    },

  },
};
</script>


<style scoped>
.header {
  background: #fff;
  padding: 0;
}

.main-layout {
  margin-top: 16px;
  background: #fff;
  padding: 16px;
}

.sider {
  background: #fff;
  border-right: 1px solid #f0f0f0;
  padding-right: 16px;
}

.selected-list-item {
  background-color: #e6f7ff;
  border-right: 3px solid #1890ff;
}

.flex-footer {
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 16px;
}

.pagination-controls {
  width: 100%;
}
</style>