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

<template>
  <div class="app-container">
    <el-form ref="form" size="mini"  :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="0">
          <el-col :span="8">
            <el-form-item :label="$t('下一站')" prop="preOrNextStation">
              <span slot="label">
                <span style="color: red">{{$t('下一站')}}</span>
              </span>
              <EmisGetNextSitePicker v-model="form.preOrNextStation"  @onChange="onSiteSelect"  ></EmisGetNextSitePicker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合包号" prop="bagNo" label-width="80px">
              <span slot="label">
                <span style="color: red">{{$t('合包号')}}</span>
              </span>
              <el-input v-model="form.bagNo" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="8">
            <el-form-item label="扫描单号" prop="billCode" label-width="80px">
              <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-row>
    </el-form>


      <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="bagNo" 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="scanSite" min-width="150" />
        <el-table-column :label="$t('扫描员')" align="center" prop="scanMan" 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="preOrNextStation" min-width="100" />
        <el-table-column :label="$t('重量')" align="center" prop="scanWeight" min-width="100" />
     </xd-table>

      <!-- <div style="text-align: center;margin-bottom: 10px;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> -->


      <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 EmisGetNextSitePicker from '@/views/emis/EmisBaseTools/EmisGetNextSitePicker.vue';

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

      bagNo: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.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
    },

    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
    },
    getRowsSelect(arr) {
      this.form.ids= arr.map(item=>item.id)
    },
    handleBatchScan(){
      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) == -1){
          newList.push(item);
        }else{
          this.dataMap[item.billCode]=null;
        }
      });
      this.emisTmsScanRecordList = newList;
    },
    cancelBatch(){
      this.openBatch=false;
    },
    submitFormBatch(){

      if(this.formBatch.billCode==null || this.formBatch.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }
      let bcList=this.formBatch.billCode.trim().split(/[；\;\,\，\n]/)||[]; 
      let scanWeight = this.form.scanWeight;
      let bagNo = this.form.bagNo;

      let haveCode = null;
      let dm = this.dataMap;
      let scList=bcList.map(function(code) {
        if(dm[code]){
          haveCode = code;
          return;
        }
        return {
          billCode:code,
          bagNo:bagNo,
          scanWeight:scanWeight,
          // scanWeight:null,
          scanDate:null
        }
      })

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

      let scanInfo = {
        scanType:"200",
        opType:1,
        scanData:scList
      };

      doScan(scanInfo).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 = '200';
          this.form.scanDate  = new Date();
          let record =Object.assign({}, this.form)
          record.billCode=scanRstItem.billCode;
          console.log(record)
          let indexBillCode=record.billCode;
          this.dataMap[indexBillCode]=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)
      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;
      // }

    },
    // 扫描上传
    handleScanUpload(){
      var selData = this.selection;
      console.log(selData);

      let scanData=[];
      selData.forEach(item=>{
        scanData.push(
          {
            billCode:item.billCode,
            scanWeight:item.scanWeight,
            bagNo:item.bagNo,
            scanDate:item.scanDate
            // dispatchOrSendManCode:item.dispatchOrSendManCode
          }
        );
      });

       // 检查
      let scanInfo = {scanType:"200",opType:2,scanData:scanData}
      console.log(scanInfo)

      doScan(scanInfo).then(response => {
        console.log(response);
        let scanRstItem = response.data.scanResult[0];
        console.log(scanRstItem);
        if(scanRstItem.result != 'success'){
          this.$modal.msgError(scanRstItem.message);
          return;
        }
        let newList = [];
        this.emisTmsScanRecordList.forEach(item => {
          if(this.ids.indexOf(item.billCode) > -1){
            this.dataMap[item.billCode]=null;
          }else{
            newList.push(item);
          }
        })
        this.ids = [];
        this.selection = null;
        this.emisTmsScanRecordList = newList;
        this.$modal.msgSuccess(scanRstItem.message);
      });


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

      if(this.dataMap[this.form.billCode]){
        this.$message.error("重复扫描");
        this.playNoticeTone(1);
        return;
      }

      // 检查
      let scanInfo = {
        scanType:"200",
        opType:1,
        scanData:[
          {
            billCode:this.form.billCode,
            scanWeight:this.form.scanWeight,
            // dispatchOrSendManCode:this.form.dispatchOrSendManCode
          }
        ]
      };

      doScan(scanInfo).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 = '200';
        this.form.scanDate  = new Date();
        let record =Object.assign({}, this.form)
        record.billCode=scanRstItem.billCode;
        console.log(record)
        let indexBillCode=record.billCode;
        this.dataMap[indexBillCode]=record;
        this.emisTmsScanRecordList.push(record);

      });

      this.form.billCode =null;

    },

  }
};
</script>