wms / wms4_hh · Files

<template>
  <a-card :bordered="false">
    <div class="row">

      <div class="col-sm-9 select-info table-striped-left tableGrids left-agv">

          <a-form id="agvMenu-form" class="form-horizontal m form-font">
            <a-row :gutter="24">
<!--              <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
<!--                <a-form-item label="请求地址">-->
<!--                  <a-input placeholder="请输入请求地址" v-model="fieldList.id"></a-input>-->
<!--                </a-form-item>-->
<!--              </a-col>-->
          <div class="form-group" style="display: none;">
            <label class="col-sm-3 control-label">id：</label>
            <div class="col-sm-8">
              <input id="id" name="id" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group" style="display: none">
            <label class="col-sm-3 control-label">taskId：</label>
            <div class="col-sm-8">
              <input id="taskId" name="taskId" class="form-control" type="text" readonly>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">货架：</label>
            <div class="col-sm-2">
<!--              <a-input placeholder="请输入请求地址" v-model="fieldList.id"></a-input>-->
              <input id="goodsNo" name="goodsNo" class="form-control" value="" v-enter="handleSubmit" type="text" style="font-size: 16px">
            </div>
            <label class="col-sm-2 control-label">仓库：</label>
            <div class="col-sm-4">
              <input id="uWarehouseName" name="uWarehouseName" class="form-control" type="text" readonly>
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-3 control-label">单号：</label>
            <div class="col-sm-8">
              <input id="sourceCode" name="sourceCode" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">存货编码：</label>
            <div class="col-sm-8">
              <input id="materialCode" name="materialCode" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">存货代码：</label>
            <div class="col-sm-8">
              <input id="barCode" name="barCode" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">物料名称：</label>
            <div class="col-sm-8">
              <input id="materialName" name="materialName" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">规格型号：</label>
            <div class="col-sm-8">
              <input id="specification" name="specification" class="form-control" type="text" readonly>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">数量：</label>
            <div class="col-sm-2">
              <input id="num" name="num" class="form-control" type="text" >
            </div>
            <label class="col-sm-2 control-label">剩余库存：</label>
            <div class="col-sm-4">
              <input id="remainder" name="remainder" class="form-control" type="text" readonly >
            </div>
          </div>
          <div class="form-group" style="text-align: right">
            <div class="col-sm-10 toolbox-btn" style="text-align: right">
              <a-button class="buttom-css" style="margin-left:10px;" type="primary" @click="agvDb()" icon="">AGV回库</a-button>
              <a-button class="buttom-css" style="margin-left:10px;" type="danger" @click="Complete()" icon="">上下料完成</a-button>
              <a-button class="buttom-css" style="margin-left:10px;" type="primary" @click="Rotation(180)" icon="">180°旋转4</a-button>
<!--              <a-popconfirm title="确定取消吗?" @confirm="() =>Cancel()">-->
<!--              type: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';-->
<!--                <a v-has="'dict:delete'"><a-button type="danger">AGV取消</a-button></a>-->
<!--              </a-popconfirm>-->
<!--              <a-button class="buttom-css" type="primary" @click="Cancel()" icon="">AGV取消</a-button>-->
              <a-button class="buttom-css" style="margin-left:10px;" type="primary" @click="Rotation(90)" icon="">90°旋转</a-button>

            </div>
          </div>
            </a-row>
        </a-form>
      </div>

      <div class="col-sm-31 select-info table-striped-right tableGrids right-agv">
        <ul class="select-lists">
          <li style="margin-right: 4px">
<!--            <span id="stationInfo" data-info="1">1号站台</span>-->
            <select class="btn btn-rounded btn-sm" id="stationInfo" @change="selectStation()" style="font-size: 23px">
              <option value="1" style="font-size: 18px" selected>1号站台</option>
              <option value="2" style="font-size: 18px" >2号站台</option>
              <option value="3" style="font-size: 18px" >3号站台</option>
            </select>
          </li>
          <li style="margin-right: 4px">
            <select class="btn btn-rounded btn-sm" id="goodsShelfNo" style="font-size: 18px">
              <option value="" style="font-size: 18px" selected>货架号</option>
            </select>

          </li>
          <li style="margin-right: 4px">
            <a-button class="" type="primary" @click="ManualCalling()" icon="" id="TaskAssignsOne">手动叫车</a-button>
<!--            <a class="btn btn-primary btn-success btn-rounded btn-sm" onclick="TaskAssignsOne()" id="TaskAssignsOne">手动叫车</a>-->
          </li>
        </ul>
        <hr style="border-top:1px solid white;">

        <div id="Grids">
          <table id="tableG" style="display: inline-block">
            <tr style="font-size:20px;color:rgb(28,132,198);font-family:FangSong;font-weight:600">
              <td>A面</td>
              <td>C面</td>
            </tr>
            <tr>
              <td><div class="grid-agv" data-x="5" data-y="1"><span class="containerC"></span></div></td>
              <td><div class="grid-agv" data-x="5" data-y="3"><span class="containerC"></span></div></td>
            </tr>
            <tr>
              <td><div class="grid-agv" data-x="4" data-y="1"><span class="containerC"></span></div></td>
              <td><div class="grid-agv" data-x="4" data-y="3"><span class="containerC"></span></div></td>
            </tr>
            <tr>
              <td><div class="grid-agv" data-x="3" data-y="1"><span class="containerC"></span></div></td>
              <td><div class="grid-agv" data-x="3" data-y="3"><span class="containerC"></span></div></td>
            </tr>
            <tr>
              <td><div class="grid-agv" data-x="2" data-y="1"><span class="containerC"></span></div></td>
              <td><div class="grid-agv" data-x="2" data-y="3"><span class="containerC"></span></div></td>
            </tr>
            <tr>
              <td><div class="grid-agv" data-x="1" data-y="1"><span class="containerC"></span></div></td>
              <td><div class="grid-agv" data-x="1" data-y="3"><span class="containerC"></span></div></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="col-sm-12 select-info bottoms">
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :pagination="ipagination"
      :dataSource="dataSource"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
      class="j-table-force-nowrap"
      :customRow="loadCustomRow"
      @change="handleTableChange">
          </a-table>
    </div>
    <div class="col-sm-12 select-info bottoms">
      <a-table
        ref="table"
        size="default"
        bordered
        :columns="columns1"
        :pagination="ipagination"
        :dataSource="dataSource1"
        class="j-table-force-nowrap">
      </a-table>
    </div>
  </a-card>


</template>

<script>
// var prefix = "/task/agvTaskMenu";


import huahengUI from '../../../assets/css/huahengUI.css'
import $ from '../../../assets/js/jquery-1.11.1.min'
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'

import {
  getGoodsShelfNo,
  getGoodsShelfNos,
  goodsShelfNo,
  getTask,
  getAvg,
  completeTaskByAGV,
  ManualCalling,
  TurnOriention, taskCancel
} from "@api/api";

export default {
  name: "agvMenus",
  mixins: [JeecgListMixin, mixinDevice],
  zoneCode: "",
  url: {
    // list: '/monitor/apiLog/list',
  },
  data() {
    return {
      spinning: true,
      loading: true,
      showPrise: false,
      // loading:true,
      zoneCode: '',
      warehouseCode: '',
      zoneList: [],
      warehouseList:[],
      model: {},
      locationContent: '',
      firstLoad:0,
      fieldList:[],
      fieldList1:[],
      //数据集
      dataSource1: [],
      selectId: '',
      // dataSource:[],
      // ipagination: {
      //   current: 1,
      //   pageSize: 10,
      //   pageSizeOptions: ['10', '20', '30'],
      //
      //   showQuickJumper: true,
      //   showSizeChanger: true,
      //   total: 0
      // },
      // pagination:[],
      // 表头
      columns: [
        {
          title: 'id',
          align: "center",
          dataIndex: 'id',
        },
        {
          title: '操作人',
          align: "center",
          dataIndex: 'updateBy',
        },
        {
          title: '存货编码',
          align: "center",
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: "center",
          dataIndex: 'materialName',
        },
        {
          title: '规格型号',
          align: "center",
          dataIndex: 'materialSpec',
        },
        {
          title: '容器编码',
          align: "center",
          dataIndex: 'containerCode',
        },
        {
          title: '货架',
          align: "center",
          dataIndex: 'goodsShelfNo',
        },
        {
          title: '数量',
          align: "center",
          dataIndex: 'qty',
        },
        {
          title : '库存',
          align: "center",
          dataIndex : 'warehouseQty'
        },
        {
          title : 'U8单据',
          align: "center",
          dataIndex : 'sourceCode'
        },
        {
          title : '货主',
          align: "center",
          dataIndex : 'companyName'
        },
        {
          title : 'u8仓库',
          align: "center",
          dataIndex : 'uWarehouseName'
        },
        {
          title : '任务类型',
          align: "center",
          dataIndex : 'type'
        },
        ],
      // 表头
      columns1: [
        {
          title: 'id',
          align: "center",
          dataIndex: 'id',
        },
        {
          title: '操作人',
          align: "center",
          dataIndex: 'lastUpdatedBy',
        },
        {
          title: '存货编码',
          align: "center",
          dataIndex: 'materialCode'
        },

        {
          title: '物料名称',
          align: "center",
          dataIndex: 'materialName',
        },
        {
          title: '规格型号',
          align: "center",
          dataIndex: 'specification',
        },
        {
          title: '容器编码',
          align: "center",
          dataIndex: 'containerCode',
        },
        {
          title: '货架',
          align: "center",
          dataIndex: 'goodsShelfNo',
        },
        {
          title: '数量',
          align: "center",
          dataIndex: 'qty',
        },
        {
          title : '库存',
          align: "center",
          dataIndex : 'warehouseQty'
        },
        {
          title : 'U8单据',
          align: "center",
          dataIndex : 'sourceCode'
        },
        {
          title : '货主',
          align: "center",
          dataIndex : 'companyName'
        },
        {
          title : 'u8仓库',
          align: "center",
          dataIndex : 'uWarehouseName'
        },
        {
          title : '任务类型',
          align: "center",
          dataIndex : 'type'
        },
      ],
    }
  },

  directives: {
    enter: {
      bind(el, binding) {
        el.addEventListener('keyup', (event) => {
          if (event.keyCode === 13) {
            binding.value();
          }
        });
      },
    },
  },
  created() {
    goodsShelfNo().then((res) => {
      this.loading = false;
      if (res.success) {
        console.log('222============',res)
        let ress=res.result;
        for (let i = 0; i < ress.length; i++) {
          $("#goodsShelfNo").append("<option value='"+ress[i].goodsShelfNo+"'>"+ ress[i].goodsShelfNo +"</option>");
        }
      } else {
        this.$message.error(res.message);
      }
    });
    this.timer = setTimeout(() => {
      this.getTable2();
    }, 1000);

  },

  mounted() {

  },

  methods: {
    loadData(arg) {
      this.getGoodsShelfNo();
    },
    loadFrom() {

    },
    handleTableChange(pagination, filters, sorter) {
      // this.ipagination = pagination;
      // this.loadData();
      console.log('handleTableChange被按下');
    },
    handleSubmit() {
      console.log('回车键被按下');
      this.getGoodsShelfNo();
    },
    getGoodsShelfNo(){
      $(".containerC").text("");
      $(".cInfo").remove();
      $(".grid").children("br").remove();
      $(".grid").attr("style","background-color:#4F94CD");
      this.datasource='';
      let goodsShelfNo=$("#goodsNo").val();
      let station=$("#stationInfo").val();
      // goodsShelfNo='H0009A'
       // station='1';
      console.log(goodsShelfNo)
      console.log(station)
      if(goodsShelfNo){
        let data={
              goodsShelfNo:goodsShelfNo,
              station:station
            };
        // $("#id").val('');
        // $("#taskId").val('');
        // $("#materialCode").val('');
        // $("#barCode").val('');
        // $("#materialName").val('');
        // $("#specification").val('');
        // $("#containerCode").val('');
        // $("#warehouseQty").val('');
        // $("#num").val('');
        // $("#goodsNo").val('');
        // $("#goodsNo").focus();
        getGoodsShelfNo(data).then((res) => {
          if (res.result) {
            let ress=res.result;
            if(!ress){
              return;
            }
            if(ress.length<1){
              return;
            }
            for (let i = 1; i < ress.length; i++) {
              let layer = ress[i].containerCode.substr(-3, 1);
              let side = ress[i].containerCode.substr(-2, 1);
              let dom = $("[data-x=" + layer + "][data-y=" + side + "]");
              dom.attr("style", "background-color:rgb(255,255,0)");
            }
            let shlefs=goodsShelfNo.substring(5,6);
            let containerCodeSub=ress[0].containerCode.substring(5,6);
            let shlef;
            if(shlefs=="A"){
              shlef="1";
            }else {
              shlef="3";
            }
            if(containerCodeSub==shlef){
              $("#id").val(ress[0].id);
              $("#taskId").val(ress[0].taskHeaderId);
              // $("#uWarehouseName").val(ress[0].uWarehouseName);
              $("#sourceCode").val(ress[0].receiptId);
              $("#materialCode").val(ress[0].materialCode);
              $("#barCode").val(ress[0].barCode);
              $("#materialName").val(ress[0].materialName);
              $("#specification").val(ress[0].materialSpec);
              $("#warehouseQty").val(ress[0].warehouseQty);
              $("#num").val(ress[0].qty);
              $("#remainder").val(ress[0].remainder);
            }
            let layer=ress[0].containerCode.substr(-3,1);
            let side=ress[0].containerCode.substr(-2,1);
            let dom=$("[data-x="+layer+"][data-y="+side+"]");
            dom.attr("style","background-color:rgb(236,71,88)");

            this.dataSource = res.result.records || res.result;
            // this.dataSource1 = res.result.records || res.result;
            if (res.result.total) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
          }else{



          }
        })

      }
    },
    getTable2(){
      //第二个列表
      let station=$("#stationInfo").val();
      let data={
        station:station
      };
      this.dataSource1=[]
        getTask(data).then((res) => {
        if (res.result) {
          let ress = res.result;
          if (!ress) {
            return;
          }
          if (ress.length < 1) {
            return;
          }
          this.dataSource1= res.result.records || res.result;
        }
      })
    },
    agvDb(){
      //回库
      // let ID=this.resource[0].id;
      let ID=this.selectId;
      let goodsShelfNo=$("#goodsNo").val();
      let station=$("#stationInfo").val();
      let data={
        id:ID,
        shelfNo:goodsShelfNo,
        station:station
      }
      getAvg(data).then((res) => {
        if (res.success) {
          // $.modal.msgSuccess(res.msg);
          $("#id").val('');
          $("#taskId").val('');
          $("#materialCode").val('');
          $("#barCode").val('');
          $("#materialName").val('');
          $("#specification").val('');
          $("#containerCode").val('');
          $("#warehouseQty").val('');
          $("#num").val('');
          $("#goodsNo").val('');
          $("#goodsNo").focus();

        }else{
          this.$message.error(res.message)
        }
      })
    },
    Complete(){
      //完成
      let ID=this.selectId;
      let num=$("#num").val()||null;
      let data = { "id" : ID }
      completeTaskByAGV(data).then((res) => {
        if (res.success) {
          this.getGoodsShelfNo();
        }else{
          this.$message.error(res.message)
        }
      })
    },
    Rotation(ang) {
      //旋转
      let carNo=$("#goodsNo").val();
      let data = {
          carNo:carNo,
          orientation:ang
      }
      TurnOriention(data).then((res) => {
        if (res.success) {
          // $.modal.msgSuccess(res.msg);
          $("#id").val('');
          $("#taskId").val('');
          $("#materialCode").val('');
          $("#barCode").val('');
          $("#materialName").val('');
          $("#specification").val('');
          $("#containerCode").val('');
          $("#warehouseQty").val('');
          $("#num").val('');
          $("#goodsNo").val('');
          $("#goodsNo").focus();

        }else{
          this.$message.error(res.message)
        }
      })
    },
    Cancel(){
      //取消
      taskCancel(data).then((res) => {
        if (res.success) {
          // $.modal.msgSuccess(res.msg);
          $("#id").val('');
          $("#taskId").val('');
          $("#materialCode").val('');
          $("#barCode").val('');
          $("#materialName").val('');
          $("#specification").val('');
          $("#containerCode").val('');
          $("#warehouseQty").val('');
          $("#num").val('');
          $("#goodsNo").val('');
          $("#goodsNo").focus();

        }
      })
    },
    rowClick(record, index){
      console.log(index)
      console.log(record)
    },
    rowClick1(record, index){
      console.log(index)
      console.log(record)
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      console.log(this.selectionRows[0])
      this.selectId= this.selectionRows[0].id;
      // this.$refs.JeecgOrderCustomerList.getOrderMain(this.selectedRowKeys[0]);
      // this.$refs.JeecgOrderTicketList.getOrderMain(this.selectedRowKeys[0]);
    },

    refresh: function () {

    },

    modalFormOk() {
    },
    loadCustomRow(record, index) {
      return {
        on: {
          click: () => {
            // 记录为disabled则直接返回，默认为不可选
            if (record.disabled) return
            const type = 'checkbox'
            const key = record.id || index
            let selectedRows = this.selectionRows
            let selectedRowKeys = this.selectedRowKeys

            if (type === 'radio') {
              selectedRowKeys = [key]
              selectedRows = [record]
            } else if (!this.selectedRowKeys.includes(key)) {
              selectedRowKeys.push(key)
              selectedRows.push(record)
            } else {
              const index = this.selectedRowKeys.findIndex(skey => skey === key)
              selectedRows.splice(index, 1)
              selectedRowKeys.splice(index, 1)
            }

            this.updateSelect(selectedRowKeys, selectedRows)
            this.onSelectChange(selectedRowKeys, selectedRows)
          }
        },
      };
    },
    updateSelect (selectedRowKeys, selectedRows) {
      this.selectionRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    selectStation(){
      this.getTable2();
    },
    ManualCalling() {
      //手动叫车
      let shelfNo = $("#goodsShelfNo option:selected").val();
      let station = $("#stationInfo").attr('data-info');
      if (shelfNo === "") {
        this.$message.error("请输入货架号！")
        return;
      }
      let data = {
        shelfNo: shelfNo,
        station: station
      }
      ManualCalling(data).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },

}
</script>
<style scoped>
</style>