emis-frontend/src/views/emis/emisTmsScanRecord/transmitReceiveScanning.vue

<template>
  <div class="app-container">
    <el-row :gutter="0">
        <el-form ref="form" size="mini"  :model="form" :rules="rules" label-width="80px">
          <el-col :span="8">
            <el-form-item label="扫描单号" prop="billCode" label-width="70px">
              <span slot="label">
                <span style="color: red">扫描单号</span>
              </span>
              <el-input v-model="form.billCode" clearable="" placeholder="单号输入后按回车" @keyup.enter.native="handleScanInput"  >
                <i slot="suffix" class="iconfont">&#xe656;</i>
              </el-input>
            </el-form-item>
          </el-col>
         
          <el-col :span="8">
            <el-form-item :label="$t('取件员')" prop="dispatchOrSendManCode">
              <EmisUserSimplePicker v-model="form.dispatchOrSendManCode" postCode="RSD" @onChange="onStaffSelect"  ></EmisUserSimplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('下一站')" prop="preOrNextStation" label-width="70px">
              <EmisGetNextSitePicker v-model="form.preOrNextStation"  @onChange="onSiteSelect"  ></EmisGetNextSitePicker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="重量" prop="scanWeight" label-width="100px">
              <el-input v-model="form.scanWeight" placeholder="扫描重量" >
                  <span slot="suffix">KG</span>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="清单编号" prop="listNo" label-width="100px">
              <el-input v-model="form.listNo" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('留仓类型')" prop="fastType">
              <el-select
                style="width:100%"
                filterable
                clearable
                v-model="fastType"
                @change="onFastTypeSelect">
                <el-option v-for="item in dict.type.emis_fast_type" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('客户名称')" prop="customerType" label-width="70px">
              <el-select
                style="width:100%"
                filterable
                clearable
                v-model="customerType"
                @change="onCustomerTypeSelect">
                <el-option v-for="item in dict.type.emis_customer_type" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实名发件人" prop="sendMan" label-width="100px">
              <el-input v-model="form.sendMan" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实名发件人身份证号" prop="sendManNo" label-width="220px">
              <el-input v-model="form.sendManNo" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col> -->

        </el-form>
      </el-row>


      <div slot="toolbar">
        <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  :disabled="multiple"
                  @click="handleScanUpload"
                  v-hasPermi="['emis:emisTmsScanRecord:add']"
                >上传</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="clearSelectionBatch"
                  v-hasPermi="['emis:emisTmsScanRecord:remove']"
                >删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click="handleBatchScan"
                  v-hasPermi="['emis:emisTmsScanRecord:batchScan']"
                >批量扫描</el-button>
              </el-col>
          </el-row>
      </div>

      <xd-table v-loading="loading"
           border stripe
           ref="multipleTable"
           size="small"
           :queryParams="queryParams"
           :data="emisTmsScanRecordList"
           :total="emisTmsScanRecordList.length"
           @selection-change="handleSelectionChange"
           v-if="tableHeight" :height="tableHeight + 'px'"
           >
      <!-- <el-table ref="multipleTable" border stripe v-loading="loading" :data="emisTmsScanRecordList" @selection-change="handleSelectionChange"> -->
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="$t('扫描单号')" align="center" prop="billCode" min-width="150" />
        <el-table-column :label="$t('清单编号')" align="center" prop="listNo" min-width="150" />
        <el-table-column :label="$t('扫描类型')" align="center" prop="scanType" min-width="100" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.emis_scan_type" :value="scope.row.scanType"/>
          </template>
       </el-table-column>
        <el-table-column :label="$t('扫描员工')" align="center" prop="scanMan" min-width="150" />
        <el-table-column :label="$t('扫描网点')" align="center" prop="scanSite" min-width="150" />
        <el-table-column :label="$t('扫描时间')" align="center" prop="scanDate" min-width="170" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.scanDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('录入时间')" align="center" prop="scanDate" min-width="170" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.scanDate1) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('省份编号')" align="center" prop="dispatchOrSendMan1" min-width="100" />
        <el-table-column :label="$t('取件员')" align="center" prop="dispatchOrSendMan" min-width="100" />
        <el-table-column :label="$t('下一站')" align="center" prop="preOrNextStation" min-width="100" />
        <el-table-column :label="$t('快件类型')" align="center" prop="fastType" min-width="100" />
        <el-table-column :label="$t('实名发件人')" align="center" prop="sendMan" min-width="100" />
        <el-table-column :label="$t('实名发件人身份证号')" align="center" prop="sendManNo" min-width="100" />
        <el-table-column :label="$t('重量')" align="center" prop="scanWeight" min-width="100" />
      </xd-table>

      <el-dialog :title="titleBatch" :visible.sync="openBatch" width="50%" v-dialogDrag :close-on-click-modal="false" append-to-body>
        <el-form ref="formBatch" :model="formBatch" :rules="rulesBatch" size="mini" label-width="60px">
         <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('运单号')" prop="billCode">
              <el-input v-model="formBatch.billCode" type="textarea" :rows="8" placeholder="运单号"  />
            </el-form-item>
          </el-col>
         </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button type="primary" @click="submitFormBatch">确 定</el-button>
          <el-button @click="cancelBatch">取 消</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import { doScan } from "@/api/emis/emisTmsScanRecord";
import EmisUserSimplePicker from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisGetNextSitePicker from '@/views/emis/EmisBaseTools/EmisGetNextSitePicker.vue';

export default {
  name: "TransmitReceiveScanning",
  props:{
    id:undefined
  },
  components: { EmisUserSimplePicker, EmisGetNextSitePicker },
  dicts: ['emis_scan_type','emis_fast_type','emis_customer_type'],
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      checkedDetail:[],
      // 遮罩层
      loading: false,
      // 表单参数
      form: {},
      titleBatch: "",
      formBatch: {},
      openBatch:false,
      dataMap:new Map(),
      emisTmsScanRecordList: [],
      queryParams:{},
      tableHeight: 200,

      listNo:null,//清单编号
      fastType:null,//快件类型
      customerType:null,//客户类型
      sendMan:null,//实名发件人
      sendManNo:null,//实名发件人身份证号
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
        // billCode: [
        //   { required: true, message: "billCode不能为空", trigger: "blur" }
        // ],
        // id: [
        //   { required: true, message: "id不能为空", trigger: "blur" }
        // ],
      },
      rulesBatch: {
        // id: [
        //   { required: true, message: "id不能为空", trigger: "blur" }
        // ],
      }
    };
  },
   watch: {
      "id": {
        handler (newValue, oldValue) {
          this.id = newValue;
          this.initData();
        },
        deep: true
      }
  },
  created() {
    this.reset();
    this.form.scanSiteCode=this.$store.getters.ownerSiteCode;
    this.form.scanSite=this.$store.getters.ownerSiteName;

    this.form.scanMan=this.$store.getters.empName;
    this.form.scanManCode=this.$store.getters.empCode;

    this.form.recordMan=this.$store.getters.empName;
    this.form.recordManCode=this.$store.getters.empCode;

    this.form.dispatchOrSendMan=this.$store.getters.empName;
    this.form.dispatchOrSendManCode=this.$store.getters.empCode;

    this.$nextTick(function() {
      let form = this.$refs.form.$el;
      let tableH = form.offsetHeight+265;
      this.tableHeight = window.innerHeight - tableH;
    });

  },

  methods: {
    getRowSelect(row, column, event) {
     // dosomething
    },
    onStaffSelect(item){
        this.form.dispatchOrSendMan=item.empName || this.$store.getters.empName;
        this.form.dispatchOrSendManCode=item.empCode || this.$store.getters.empCode;
    },
    onSiteSelect(item){
        console.log(item)
        // this.form.dispatchOrSendMan=item.empName;
        // this.form.dispatchOrSendManCode=item.empCode;
        this.form.preOrNextStation=item.destSiteName;
        this.form.preOrNextStationCode=item.destSite;

        // Todo
    },
    onFastTypeSelect(item){
      this.form.fastType = item;
    },
    onCustomerTypeSelect(item){
      this.customerType = item;
    },
    getRowsSelect(arr) {
      this.form.ids= arr.map(item=>item.id+item.scanType)
    },
    handleBatchScan(){
      let dispatchOrSendManCode = this.form.dispatchOrSendManCode;
      let preOrNextStationCode = this.form.preOrNextStationCode;
      if(dispatchOrSendManCode==null || dispatchOrSendManCode==''){
        this.$message.error("请选择取件员");
        return;
      }
      if(preOrNextStationCode==null||preOrNextStationCode==''){
        this.$message.error("请选择下一站");
        return;
      }
      this.formBatch = {
        billCode: null,
      }
      this.titleBatch="批量扫描";
      this.openBatch=true;
    },
    clearSelectionBatch(){
      let newList =[];
      console.log(this.ids)
      this.emisTmsScanRecordList.forEach(item=>{
        if(this.ids.indexOf(item.billCode+item.scanType) == -1){
          newList.push(item);
        }else{
          this.dataMap[item.billCode+item.scanType]=null;
        }
      });
      this.emisTmsScanRecordList = newList;
    },
    cancelBatch(){
      this.openBatch=false;
    },
    submitFormBatch(){
      let bcList=this.formBatch.billCode.trim().split(/[；\;\,\，\n]/)||[]; 
      let scanWeight = this.form.scanWeight
      let dispatchOrSendMan = this.form.dispatchOrSendMan;
      let dispatchOrSendManCode = this.form.dispatchOrSendManCode;
      let preOrNextStationCode = this.form.preOrNextStationCode;

      if(this.formBatch.billCode==null || this.formBatch.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }
      let haveCode = null;
      let dm = this.dataMap;
      let scList=bcList.map(function(code) {
        if(dm[code+"10"] || dm[code+"20"]){
          haveCode = code;
          return;
        }
        return {
          billCode:code,
          scanWeight:scanWeight,
          // scanWeight:null,
          dispatchOrSendManCode: dispatchOrSendManCode
        }
      })

      if(haveCode){
        this.$message.error("重复扫描："+haveCode);
        this.playNoticeTone(1);
        return;//终止批量扫描逻辑
      }

      // 揽件批量
      let scanArrivalInfo = {
        scanType:"10",
        opType:1,
        scanData:scList
      };

      doScan(scanArrivalInfo).then(response => {
        if(!response.data.scanResult || response.data.scanResult.length == 0){
          this.$message.error("未查到单号");
          return;
        }
        for (let index = 0; index < response.data.scanResult.length; index++) {
          let scanRstItem = response.data.scanResult[index];
          console.log(scanRstItem);
          if(scanRstItem.result != 'success'){
            this.$modal.msgError(scanRstItem.message);
            return;
          }

          // this.form.scanType = '10';
          this.form.scanDate  = new Date();
          let record =Object.assign({}, this.form)
          record.billCode=scanRstItem.billCode;
          record.scanType = "10";
          record.dispatchOrSendMan = dispatchOrSendMan;
          record.dispatchOrSendManCode = dispatchOrSendManCode;
          record.preOrNextStationCode = null;
          let indexBillCode=record.billCode;
          this.dataMap[indexBillCode+record.scanType]=record;
          this.emisTmsScanRecordList.push(record);
        }
      });

      // 发件批量
      let scanDispathInfo = {
        scanType:"20",
        opType:1,
        scanData:scList
      };

      doScan(scanDispathInfo).then(response => {
        if(!response.data.scanResult || response.data.scanResult.length == 0){
          this.$message.error("未查到单号");
          return;
        }
        for (let index = 0; index < response.data.scanResult.length; index++) {
          let scanRstItem = response.data.scanResult[index];
          console.log(scanRstItem);
          if(scanRstItem.result != 'success'){
            this.$modal.msgError(scanRstItem.message);
            return;
          }

          // this.form.scanType = '10';
          this.form.scanDate  = new Date();
          let record =Object.assign({}, this.form)
          record.billCode=scanRstItem.billCode;
          record.scanType = "20";
          record.dispatchOrSendMan = null;
          record.dispatchOrSendManCode = null;
          record.preOrNextStationCode=preOrNextStationCode;
          let indexBillCode=record.billCode;
          this.dataMap[indexBillCode+record.scanType]=record;
          this.emisTmsScanRecordList.push(record);
        }
      });

      this.openBatch=false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        billCode: null,
        scanType: null,
        preOrNextStation: null,
        preOrNextStationCode: null,
        preOrNextStationPhone: null,
        preOrNextManCode: null,
        preOrNextManPhone: null,
        scanDate: null,
        scanManCode: null,
        scanManPhone: null,
        scanMan: null,
        preOrNextMan: null,
        scanSite: null,
        scanSiteCode: null,
        scanSitePhone: null,
        scanWeight: null,
        weight: null,
        dispatchOrSendMan: null,
        dispatchOrSendManCode: null,
        dispatchOrSendManPhone: null,
        signDate: null,
        signMan: null,
        signSite: null,
        signSiteCode: null,
        recordMan: null,
        recordManCode: null,
        recordManPhone: null,
        recordSiteCode: null,
        truckMan: null,
        truckCode: null,
        dataFrom: null,
        picUrl: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        updateSite: null,
        createSite: null
      };
      this.resetForm("form");
    },
  // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.billCode+item.scanType)
      this.selection = selection;
      this.single = selection.length!==1
      this.multiple = !selection.length

      // this.checkedDetail = selection;


      // if (selection.length > 1) {
      //   this.$refs.multipleTable.clearSelection();
      //   this.$refs.multipleTable.toggleRowSelection(selection.pop());
      // } else {
      //   //将选中行存入缓存中
      //   this.checkedDetail = selection;
      // }

    },
    // 扫描上传
    async handleScanUpload(){
      var selData = this.selection;
      let newList = Array.from(this.emisTmsScanRecordList);
      let dataMap = this.dataMap;

      let scanRecordData=[];
      let scanOutgoingData=[];
      selData.forEach(item=>{
        if (item.scanType=="10") {
          scanRecordData.push(
            {
              billCode:item.billCode,
              scanWeight:item.scanWeight,
              dispatchOrSendManCode:item.dispatchOrSendManCode,
              scanDate:item.scanDate || new Date()
            }
          );
        }else if(item.scanType=="20") {
          scanOutgoingData.push(
            {
              billCode:item.billCode,
              scanWeight:item.scanWeight,
              // dispatchOrSendManCode:item.dispatchOrSendManCode
              billCode:item.billCode,
              scanWeight:item.scanWeight,
              preOrNextStationCode:item.preOrNextStationCode,
              scanDate:item.scanDate || new Date()
            }
          );
        }
      });

      // 揽件扫描上传
      let scanRecordInfo = {scanType:"10",opType:2,scanData:scanRecordData}

      if(scanRecordData.length > 0){
        let res = await doScan(scanRecordInfo);
        let scanRstItem = res.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }
        scanRecordData.forEach((item) => {
          newList = newList.map(function(nitem){
            if(nitem && item.billCode == nitem.billCode && nitem.scanType == "10"){
              dataMap[item.billCode+"10"]=null;
              return null;
            }else{
              return nitem;
            }
          })
          this.ids.splice(this.ids.indexOf(item.billCode+"10"),1)
        })
        this.$modal.msgSuccess("揽件扫描上传"+scanRstItem.message);
      }

      // 发件扫描上传
      let scanOutgoingInfo = {scanType:"20",opType:2,scanData:scanOutgoingData}

      if(scanOutgoingData.length > 0){
        let res = await doScan(scanOutgoingInfo);
        let scanRstItem = res.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }
        scanOutgoingData.forEach((item) => {
          newList = newList.map(function(nitem){
            if(nitem && item.billCode == nitem.billCode && nitem.scanType == "20"){
              dataMap[item.billCode+"20"]=null;
              return null;
            }else{
              return nitem;
            }
          })
          this.ids.splice(this.ids.indexOf(item.billCode+"20"),1)
        })
        this.$modal.msgSuccess("发件扫描上传"+scanRstItem.message);
      }
      this.dataMap = dataMap;
      console.log(this.emisTmsScanRecordList)
      this.emisTmsScanRecordList = newList.filter(function(item) {
        return item !== null;
      });
    },
    handleScanInput(){
      let dispatchOrSendMan = this.form.dispatchOrSendMan;
      let dispatchOrSendManCode = this.form.dispatchOrSendManCode;
      let preOrNextStationCode = this.form.preOrNextStationCode;

      if(this.form.billCode==null || this.form.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }

      if(dispatchOrSendManCode==null || dispatchOrSendManCode==''){
        this.$message.error("请选择取件员");
        return;
      }

      if(this.dataMap[this.form.billCode+"10"]){
        this.$message.error("揽件重复扫描");
        this.playNoticeTone(1);
        return;
      }
      if(this.dataMap[this.form.billCode+"20"]){
        this.$message.error("发件重复扫描");
        this.playNoticeTone(1);
        return;
      }
      if(this.form.preOrNextStationCode==null||this.form.preOrNextStationCode==''){
        this.$message.error("请选择下一站");
        return;
      }

      // 揽件扫描
      let scanRecordInfo = {
        scanType:"10",
        opType:1,
        scanData:[
          {
            billCode:this.form.billCode,
            scanWeight:this.form.scanWeight,
            dispatchOrSendManCode:dispatchOrSendManCode
          }
        ]
      };

      doScan(scanRecordInfo).then(response => {
        console.log(response);
        let scanRstItem = response.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }

        // this.form.scanType = '10';
        this.form.scanDate  = new Date();
        let record =Object.assign({}, this.form)
        record.billCode=scanRstItem.billCode;
        record.scanType = '10';
        record.dispatchOrSendMan = dispatchOrSendMan;
        record.dispatchOrSendManCode = dispatchOrSendManCode;
        record.preOrNextStationCode = null;
        console.log(record)
        let indexBillCode=record.billCode;
        this.dataMap[indexBillCode+record.scanType]=record;
        this.emisTmsScanRecordList.push(record);

      });

      // 发件扫描
      let scanDispathInfo = {
        scanType:"20",
        opType:1,
        scanData:[
          {
            billCode:this.form.billCode,
            scanWeight:this.form.scanWeight,
            dispatchOrSendManCode:dispatchOrSendManCode
          }
        ]
      };

      doScan(scanDispathInfo).then(response => {
        console.log(response);
        let scanRstItem = response.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }

        // this.form.scanType = '10';
        this.form.scanDate  = new Date();
        let record =Object.assign({}, this.form)
        record.billCode=scanRstItem.billCode;
        record.scanType = '20';
        record.dispatchOrSendMan = null;
        record.dispatchOrSendManCode = null;
        record.preOrNextStationCode=preOrNextStationCode;
        console.log(record)
        let indexBillCode=record.billCode;
        this.dataMap[indexBillCode+record.scanType]=record;
        this.emisTmsScanRecordList.push(record);

      });

      this.form.billCode =null;

    },

  }
};
</script>