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

<template>
  <div class="app-container">
    <el-row :gutter="0">
        <el-form ref="form" size="mini"  :model="form" :rules="rules" label-width="70px">
        <el-col :span=16>
          <el-col :span="12">
            <el-form-item :label="$t('派件员')" prop="dispatchManCode">
              <EmisUserSimplePicker v-model="form.dispatchManCode" postCode="RSD" @onChange="onSendStaffSelect"  ></EmisUserSimplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签收人" prop="signManCode" label-width="70px">
              <EmisUserSimplePicker v-model="form.signManCode" postCode="RSD" @onChange="onSignStaffSelect"  ></EmisUserSimplePicker>
              <!-- <el-input v-model="form.xxxxx" placeholder="请输入" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('客户名称')" prop="customerCode" label-width="70px">
              <!-- <el-select
                style="width:100%"
                filterable
                clearable
                v-model="form.customerCode"
                @change="onCustomerSelect">
                <el-option v-for="item in dict.type.emis_customer_type" :key="item.value" :label="item.label" :value="item.label" />
              </el-select> -->
              <CustomerSimplePicker v-model="form.customerCode" postCode="RSD" @onChange="onCustomerSelect"  ></CustomerSimplePicker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <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>
              <span style="color: gray">提示：回车保存本地</span>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="8">
          <el-form-item label="图片签收" prop="xxx">
            <ImageUpload v-model="form.picUrl" @input="handleInput" ></ImageUpload>
          </el-form-item>
        </el-col>
        </el-form>
    </el-row>
    <el-row>
      <el-col class="line" :span="24">
        <sapn >运单信息</sapn>
      </el-col>
    </el-row>
    <el-row :gutter="0">
      <el-form ref="form" size="mini"  :model="record" :rules="rules" label-width="80px">
        <el-col :span="6">
          <el-form-item label="寄件日期" prop="registerDate" label-width="80px">
            <el-input v-model="record.registerDate" :value="parseTime(record.registerDate)" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="寄件网点" prop="registerSiteCode" label-width="80px">
            <el-input v-model="record.registerSiteCode" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录单重量" prop="volumeWeight" label-width="80px">
            <el-input v-model="record.volumeWeight" placeholder="" disabled >
              <span slot="suffix">KG</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="派件日期" prop="dispatchDate" label-width="80px">
            <el-input v-model="record.dispatchDate" :value="parseTime(record.dispatchDate)" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="派件网点" prop="dispatchSiteCode" label-width="80px">
            <el-input v-model="record.dispatchSiteCode" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="customerName" label-width="80px">
            <el-input v-model="record.customerName" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="record.remark" placeholder="" disabled/>
          </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:add']"
                >批量扫描</el-button>
              </el-col>
          </el-row>
      </div>

      <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="empCode" min-width="100" />
        <el-table-column :label="$t('签收人')" align="center" prop="signMan" min-width="100" />
        <el-table-column :label="$t('签收网点')" align="center" prop="signSiteCode" min-width="100" />
        <el-table-column :label="$t('签收时间')" align="center" prop="signDate" 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="registerDate" min-width="170" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.registerDate) }}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('寄件网点')" align="center" prop="registerSiteCode" min-width="100" />
        <el-table-column :label="$t('到付转月结用户编号')" align="center" prop="customerCode" min-width="100" />
        <el-table-column :label="$t('到付转月结用户名称')" align="center" prop="customerName" min-width="100" />
          <el-table-column :label="$t('派件日期')" align="center" prop="dispatchDate" min-width="170" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.dispatchDate) }}</span>
            </template>
        </el-table-column>
        <el-table-column :label="$t('派件网点')" align="center" prop="dispatchSiteCode" min-width="100" />
        <el-table-column :label="$t('录件重量')" align="center" prop="volumeWeight" min-width="100" />
        <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="100" />
        <el-table-column :label="$t('签收图片')" align="center" min-width="100"> 
            <!-- <el-table-column :label="$t('保存目录')" align="center" prop="picUrl" min-width="100" />  -->
            <el-table-column :label="$t('保存目录')" align="center" prop="picUrl" width="200" >
              <template slot-scope="scope">
                <span class="ellipsis">{{scope.row.picUrl}}</span>
              </template>
            </el-table-column> 
            <el-table-column :label="$t('上传网点')" align="center" prop="xxxx" min-width="100" >
              <!-- <span class="ellipsis"></span> -->
            </el-table-column> 
            <el-table-column :label="$t('上传人')" align="center" prop="xxxx" min-width="100" /> 
            <el-table-column :label="$t('文件大小(KB)')" align="center" prop="xxxx" min-width="120" /> 
        </el-table-column>
     </el-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-col :span="24">
              <div style="padding-left: 60px;font-size: 12px;"> T0123219321 有问题</div>
          </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 { listEmisWaybill, getWaybillDetail,getEmisWaybill } from "@/api/emis/emisWaybill";
// import { doScan } from "@/api/emis/emisTmsScanRecord";
import CustomerSimplePicker from '@/views/emis/EmisBaseTools/CustomerSimplePicker.vue';
import CustomerAddressSimplePicker from '@/views/emis/EmisBaseTools/CustomerAddressSimplePicker.vue';
import EmisUserSimplePicker from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
// import FileUpload from '@/components/FileUpload/index.vue';

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

      // 是否显示弹出层
      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" }
        // ],
      },

      //查询信息展示
      record:{}
    };
  },
   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.form.scanWeight = "1.0";

    console.log(this.form)

  },

  methods: {
    getRowSelect(row, column, event) {
     // dosomething
    },
    handleInput(item){
      this.form.picUrl = item;
    },
    onCustomerSelect(item){
      if(item != null){
        this.form.customerCode=item.customerCode;
        this.form.customerName=item.customerName;
      }else{
        this.form.customerCode=null;
        this.form.customerName=null;
      }
    },
    // onStaffSelect(item){
    //   this.form.dispatchOrSendMan=item.empName || this.$store.getters.empName;
    //   this.form.dispatchOrSendManCode=item.empCode || this.$store.getters.empCode;
    // },
    onSendStaffSelect(item){
      // this.form.dispatchMan=item.empName || this.$store.getters.empName;
      this.form.dispatchManCode=item.empCode;
    },
    onSignStaffSelect(item){
      this.form.signMan=item.empName || this.$store.getters.empName;
      this.form.signManCode=item.empCode || this.$store.getters.empCode;
    },
    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.split(/[；\;\,\，\n]/)||[]; 
      let scanWeight = this.form.scanWeight
      let dispatchOrSendManCode = this.form.dispatchOrSendManCode;
      let scList=bcList.map(function(code) {
          return {
            billCode:code,
            scanWeight:scanWeight,
            // scanWeight:null,
            dispatchOrSendManCode: dispatchOrSendManCode
          }
        }
      )

      let scanInfo = {
        scanType:"50",
        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 = '50';
          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,
        orderSn: null,
        custOrderId: null,
        billCode: null,
        billCodeSub: null,
        orderStatus: null,
        waybillStatus: null,
        orderType: null,
        orderDate: null,
        userId: null,
        customerCode: null,
        customerName: null,
        receiveCustomerCode: null,
        receiveCustomerName: null,
        thirdCustomerCode: null,
        thirdCustomerName: null,
        openId: null,
        receiveName: null,
        receiveCompany: null,
        receiveMobile: null,
        receiveTel: null,
        receiveCountry: null,
        receiveProvince: null,
        receiveCity: null,
        receiveCounty: null,
        receiveTown: null,
        receiveAddress: null,
        receivePostcode: null,
        receivePcd: null,
        sendName: null,
        sendCompany: null,
        sendMobile: null,
        sendTel: null,
        sendCountry: null,
        sendProvince: null,
        sendCity: null,
        sendCounty: null,
        sendTown: null,
        sendAddress: null,
        sendPostcode: null,
        sendPcd: null,
        paymentType: null,
        calcFeeType: null,
        custNo: null,
        transLineType: null,
        productType: null,
        timeType: null,
        meterType: null,
        customsClear: null,
        customsEclaration: null,
        estimateDate: null,
        packType: null,
        dispatchMethod: null,
        pickupMethod: null,
        pickStartDate: null,
        pickFinishDate: null,
        pickFailReason: null,
        intoWarehouseCode: null,
        intoWarehouseName: null,
        intoWarehouseAddress: null,
        intoWarehouseContact: null,
        intoWarehousePhone: null,
        intoWarehouseBillCode: null,
        warehouseInNo: null,
        customerDeliveryBeginTime: null,
        customerDeliveryEndTime: null,
        goodsType: null,
        goodsInfo: null,
        goodsPics: null,
        blPrepareInFreight: null,
        prepareInEstFee: null,
        prepareInRealFee: null,
        prepareInExpress: null,
        prepareInBillCode: null,
        prepareInRemark: null,
        prepareInSupplier: null,
        totalWeight: null,
        totalVolume: null,
        parcelQty: null,
        billWeight: null,
        volumeWeight: null,
        currency: null,
        settlementWeight: null,
        feeWeight: null,
        freight: null,
        blOverLong: null,
        blBill: null,
        blBillText: null,
        blOverWeight: null,
        overWeightNumber: null,
        feeRemaker: null,
        thirdCode: null,
        realValue: null,
        blInsure: null,
        insureValue: null,
        insureValueCurrency: null,
        insureFeeCurrency: null,
        insureFee: null,
        insureRemark: null,
        insureSiteCode: null,
        insureDate: null,
        blPrint: null,
        printManCode: null,
        printSite: null,
        printDate: null,
        printCount: null,
        blDispFd: null,
        transferCode: null,
        transferBillcode: null,
        dispFdDate: null,
        dispFdReason: null,
        currentSiteCode: null,
        nextSiteCode: null,
        lastSiteCode: null,
        registerSiteCode: null,
        registerDate: null,
        registerManCode: null,
        takePieceEmployeeCode: null,
        sendSiteCode: null,
        sendDate: null,
        dispatchManCode: null,
        dispatchDate: null,
        dispatchSiteCode: null,
        produceBillDate: null,
        produceBillSiteCode: null,
        produceBillManCode: null,
        destinationCode: null,
        destinationProvince: null,
        destinationCity: null,
        destinationCounty: null,
        dispatchUnderlingSiteCode: null,
        destinationCenterCode: null,
        marketManCode: null,
        payee: null,
        salesmen: null,
        operateEmployeeCode: null,
        blIsQuestion: null,
        problemType: null,
        problemCause: null,
        problemDelayDays: null,
        blMessage: null,
        blAcceptMessage: null,
        blGenSubbill: null,
        signMan: null,
        signManCode: null,
        signSiteCode: null,
        signDate: null,
        billPicSendRmk: null,
        billPicDispatchRmk: null,
        timezoneOffset: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        createSite: null,
        updateSite: null
      };
      this.resetForm("form");
    },
  // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.billCode)
      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.$refs.multipleTable.selection;
      console.log(selData);

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


      // record.dispatchManCode=this.form.dispatchManCode;
      //   record.signManCode=this.form.signManCode;
      //   record.signMan=this.form.signMan;
      //   record.customerCode=this.form.customerCode;
      //   record.customerName=this.form.customerName;
      //   record.picUrl=this.form.picUrl;

       // 检查
      let scanInfo = {scanType:"50",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;
        }

        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;
      }

      getWaybillDetail(this.form.billCode).then(response => {
        console.log(response);
        debugger;
        this.emisTmsScanRecordList=[];
        let scanRstItem = response.data;
        console.log(scanRstItem);
        if(response.code != 200){
          this.$modal.msgError(scanRstItem.msg);
          return;
        }
        let record =Object.assign({}, scanRstItem)
        record.dispatchManCode=this.form.dispatchManCode;
        record.signManCode=this.form.signManCode;
        record.signMan=this.form.signMan;
        record.customerCode=this.form.customerCode;
        record.customerName=this.form.customerName;
        record.picUrl=this.form.picUrl;
        let indexBillCode=record.billCode;
        this.dataMap[indexBillCode]=record;
        this.emisTmsScanRecordList.push(record);
        this.record = record;

      });

      this.form.billCode =null;

    },

  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.line{
  line-height: 28px;
  font-size: 16px;
  color: black;
  font-weight: 700;
  margin-left: 10px;
  margin-bottom: 20px;
  border-bottom-color: gray;
  border-bottom-style: solid;
  border-bottom-width: 0.5px;
}

.ellipsis {
  width:200px;
  overflow: hidden; /* 确保超出容器的内容被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>