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="signMan" label-width="70px">
              <!-- <EmisUserSimplePicker v-model="form.signMan" postCode="RSD" @onChange="onSignStaffSelect"  ></EmisUserSimplePicker> -->
              <!-- <el-input v-model="form.signMan" clearable="" placeholder=""   /> -->
              <span slot="label">
                <span style="color: red">{{ $t('签收人') }}</span>
              </span>
              <el-select
                style="width:100%"
                filterable
                allow-create
                clearable
                v-model="form.signMan"
                default-first-option
              >
                <el-option v-for="item in dict.type.emis_signs_remark" :key="item.value" :label="item.label" :value="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item :label="$t('客户名称')" prop="customerCode" label-width="70px">
              <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">{{ $t('扫描单号') }}</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" :fileSize="1" :limit="50"></ImageUpload>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col class="line" :span="24">
        <span >运单信息</span>
      </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="sendSiteName" label-width="80px">
            <el-input v-model="record.sendSiteName" 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="dispatchSiteName" label-width="80px">
            <el-input v-model="record.dispatchSiteName" placeholder="" disabled >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="custName" label-width="80px">
            <el-input v-model="record.custName" 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:batchScan']"
          >批量扫描</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="dispatchMan" 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="sendSiteName" 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="dispatchSiteName" min-width="100" />
      <el-table-column :label="$t('录件重量')" align="center" prop="billWeight" 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="picUrls" width="200" >
          <template slot-scope="scope">
            <!-- <span class="ellipsis">{{scope.row.picUrl}}</span> -->
            <ImagePreview height="50px" v-for="pic in scope.row.picUrls" :key="pic" :src="pic" ></ImagePreview>
          </template>
        </el-table-column>
        <el-table-column :label="$t('上传网点')" align="center" prop="scanSite" min-width="100" >
        </el-table-column>
        <el-table-column :label="$t('上传人')" align="center" prop="scanMan" min-width="100" />
        <!-- <el-table-column :label="$t('文件大小(KB)')" align="center" prop="xxxx" min-width="120" />  -->
      </el-table-column>
    </el-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 { getWaybillDetail } from "@/api/emis/emisWaybill";
import { doScan } from "@/api/emis/emisTmsScanRecord";
import CustomerSimplePicker from '@/views/emis/EmisBaseTools/CustomerSimplePicker.vue';
import EmisUserSimplePicker from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';

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


      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {

      },
      rulesBatch: {

      },

      //查询信息展示
      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;
  },

  methods: {
    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;
    //   }
    // },
    onSendStaffSelect(item){
      this.form.dispatchMan=item.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;
    },
    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]/)||[];
      bcList.forEach((code) => {
        this.getDetail(code, true)
      })
      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,
        feeRemark: 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
    },
    // 扫描上传
    handleScanUpload(){
      var selData = this.$refs.multipleTable.selection;
      console.log(selData);
      let newList = [];
      let scanData=[];
      selData.forEach(item=>{
        scanData.push(
          {
            billCode:item.billCode,
            signMan:item.signMan,
            // signManCode:item.signManCode,
            picUrl:item.picUrl,
            remark:item.remark,
            scanWeight:item.scanWeight,
            dispatchManCode:item.dispatchManCode,
            // customerCode:item.customerCode,
            // customerName:item.customerName,
            // dispatchOrSendManCode:item.dispatchOrSendManCode,
            // scanDate:item.scanDate
            scanDate:item.scanDate || new Date()
          }
        );
      });

       // 检查
      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;
        }

        // 删除上传记录
        for(let sd=0;sd<this.emisTmsScanRecordList.length;sd++){
          if( selData.filter(item => {
            return this.emisTmsScanRecordList[sd].billCode == item.billCode
          }).length == 0){
            newList.push(this.emisTmsScanRecordList[sd])
          }
        }
        this.emisTmsScanRecordList = newList
        // 清空数据
        this.record={};
        this.$modal.msgSuccess(scanRstItem.message);
      });
    },
    handleScanInput(){
      if(this.form.billCode==null || this.form.billCode==''){
        this.$message.error("输入单号后回车");
        return;
      }
      if(!this.form.signMan){
        this.$message.error("请先选择签收人");
        return;
      }
      if(this.dataMap[this.form.billCode]){
        this.$message.error("重复扫描");
        this.playNoticeTone(1);
        return;
      }
      this.getDetail(this.form.billCode)
      this.form.billCode =null;
    },
    getDetail(billCode, isBatch){
      getWaybillDetail(billCode).then(response => {
        let scanRstItem = response.data;
        console.log(scanRstItem);
        if(response.code != 200){
          this.$modal.msgError(scanRstItem.msg);
          return;
        }
        if(scanRstItem.waybillStatus == "50"){
          this.$modal.msgError("已扫描");
          return;
        }
        let record =Object.assign({}, scanRstItem);
        record.dispatchMan = this.form.dispatchMan;
        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 || "";
        record.picUrls=record.picUrl.split(",");
        record.scanSite=this.form.scanSite;
        record.scanMan=this.form.scanMan;
        let indexBillCode=record.billCode;
        this.dataMap[indexBillCode]=record;
        this.emisTmsScanRecordList.push(record);
        isBatch || this.emisTmsScanRecordList.length > 1 ? this.record = {} : this.record = record;
        this.form.picUrl = "";
      });
    }
  }
};
</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>