|
|
@@ -0,0 +1,1085 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="110px"
|
|
|
+ @submit.native.prevent
|
|
|
+ >
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <el-card shadow="never" class="mb12">
|
|
|
+ <div slot="header">
|
|
|
+ <span>电子面单下单</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="业务订单号" prop="bizOrderNo">
|
|
|
+ <el-input v-model="form.bizOrderNo" placeholder="请输入业务订单号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="快递公司" prop="shipperCode">
|
|
|
+ <el-select
|
|
|
+ v-model="form.shipperCode"
|
|
|
+ placeholder="请选择快递公司"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ @change="handleShipperChange"
|
|
|
+ >
|
|
|
+ <el-option label="顺丰 SF" value="SF" />
|
|
|
+ <el-option label="EMS" value="EMS" />
|
|
|
+ <el-option label="京东快运 JDKY" value="JDKY" />
|
|
|
+ <el-option label="京东快递 JOS" value="JOS" />
|
|
|
+ <el-option label="京东生鲜医药 JDSXYY" value="JDSXYY" />
|
|
|
+ <el-option label="中通 ZTO" value="ZTO" />
|
|
|
+ <el-option label="中通冷链 ZTOCOLD" value="ZTOCOLD" />
|
|
|
+ <el-option label="菜鸟橙运 CNCY" value="CNCY" />
|
|
|
+ <el-option label="菜鸟速递 CNSD" value="CNSD" />
|
|
|
+ <el-option label="笨鸟速运 BNSY" value="BNSY" />
|
|
|
+ <el-option label="丰云配 FYP" value="FYP" />
|
|
|
+ <el-option label="云集医药冷链 YJYYLL" value="YJYYLL" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="支付方式" prop="payType">
|
|
|
+ <el-select v-model="form.payType" placeholder="请选择支付方式" style="width: 100%">
|
|
|
+ <el-option label="现付" :value="1" />
|
|
|
+ <el-option label="到付" :value="2" />
|
|
|
+ <el-option label="月结" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="业务类型" prop="expType">
|
|
|
+ <el-input v-model="form.expType" placeholder="如 1" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-alert
|
|
|
+ v-if="shipperTip"
|
|
|
+ :title="shipperTip"
|
|
|
+ type="info"
|
|
|
+ :closable="false"
|
|
|
+ show-icon
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 收件人信息 -->
|
|
|
+ <el-card shadow="never" class="mb12">
|
|
|
+ <div slot="header">
|
|
|
+ <span>收件人信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="收件人姓名" prop="receiverName">
|
|
|
+ <el-input v-model="form.receiverName" placeholder="请输入收件人姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="手机号" prop="receiverMobile">
|
|
|
+ <el-input v-model="form.receiverMobile" placeholder="请输入手机号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="电话">
|
|
|
+ <el-input v-model="form.receiverTel" placeholder="请输入电话" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="邮编" :prop="needReceiverPostCode ? 'receiverPostCode' : ''">
|
|
|
+ <el-input
|
|
|
+ v-model="form.receiverPostCode"
|
|
|
+ :placeholder="needReceiverPostCode ? '当前快递要求填写邮编' : '非必填'"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="省" prop="receiverProvinceName">
|
|
|
+ <el-input v-model="form.receiverProvinceName" placeholder="如 广东省" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="市" prop="receiverCityName">
|
|
|
+ <el-input v-model="form.receiverCityName" placeholder="如 深圳市" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="区/县" prop="receiverExpAreaName">
|
|
|
+ <el-input v-model="form.receiverExpAreaName" placeholder="如 福田区" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="详细地址" prop="receiverAddress">
|
|
|
+ <el-input v-model="form.receiverAddress" placeholder="不要填写省市区" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <el-card shadow="never" class="mb12">
|
|
|
+ <div slot="header">
|
|
|
+ <span>商品与面单信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="商品名称" prop="goodsName">
|
|
|
+ <el-input v-model="form.goodsName" placeholder="如 文件、电子产品" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="商品数量">
|
|
|
+ <el-input-number v-model="form.goodsQuantity" :min="1" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="商品价格">
|
|
|
+ <el-input-number v-model="form.goodsPrice" :min="0" :precision="2" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="商品重量">
|
|
|
+ <el-input-number v-model="form.goodsWeight" :min="0" :precision="3" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="包裹数量">
|
|
|
+ <el-input-number v-model="form.quantity" :min="1" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="总重量" :prop="needWeight ? 'weight' : ''">
|
|
|
+ <el-input-number v-model="form.weight" :min="0" :precision="3" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="总体积" :prop="needVolume ? 'volume' : ''">
|
|
|
+ <el-input-number v-model="form.volume" :min="0" :precision="3" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="模板尺寸">
|
|
|
+ <el-input v-model="form.templateSize" placeholder="默认130" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ maxlength="100"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="商品描述">
|
|
|
+ <el-input
|
|
|
+ v-model="form.goodsDesc"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入商品描述"
|
|
|
+ maxlength="100"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 快递专属字段 -->
|
|
|
+ <el-card shadow="never" class="mb12" v-if="showCarrierSpecific">
|
|
|
+ <div slot="header">
|
|
|
+ <span>快递专属参数</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 顺丰 -->
|
|
|
+ <template v-if="isSF">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="币种">
|
|
|
+ <el-select v-model="form.sf.currencyCode" placeholder="请选择币种" clearable style="width: 100%">
|
|
|
+ <el-option label="人民币 CNY" value="CNY" />
|
|
|
+ <el-option label="港币 HKD" value="HKD" />
|
|
|
+ <el-option label="新台币 NTD" value="NTD" />
|
|
|
+ <el-option label="澳门元 MOP" value="MOP" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- EMS -->
|
|
|
+ <template v-if="isEMS">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-alert
|
|
|
+ title="EMS要求收件人邮编必填，发件人邮编需在后端配置里配置。"
|
|
|
+ type="warning"
|
|
|
+ :closable="false"
|
|
|
+ show-icon
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 京东快运 -->
|
|
|
+ <template v-if="isJDKY">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="是否通知取件" prop="jdkyIsNotice">
|
|
|
+ <el-select v-model="form.jdky.isNotice" placeholder="请选择" clearable style="width: 100%">
|
|
|
+ <el-option label="通知(0)" :value="0" />
|
|
|
+ <el-option label="不通知(1)" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="配送方式">
|
|
|
+ <el-input-number v-model="form.jdky.deliveryMethod" :min="0" style="width: 100%" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="上门开始" :prop="needPickupTime ? 'jdkyStartDate' : ''">
|
|
|
+ <el-input v-model="form.jdky.startDate" placeholder="yyyy-MM-dd HH:mm:ss" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="上门结束" :prop="needPickupTime ? 'jdkyEndDate' : ''">
|
|
|
+ <el-input v-model="form.jdky.endDate" placeholder="yyyy-MM-dd HH:mm:ss" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 京东快递 -->
|
|
|
+ <template v-if="isJOS">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.jos.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 京东生鲜医药 -->
|
|
|
+ <template v-if="isJDSXYY">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.jdsxyy.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 中通 -->
|
|
|
+ <template v-if="isZTO">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="操作指令">
|
|
|
+ <el-input v-model="form.zto.operateDirective" placeholder="如有需要可填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 中通冷链 -->
|
|
|
+ <template v-if="isZTOCOLD">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="操作指令">
|
|
|
+ <el-input v-model="form.ztocold.operateDirective" placeholder="如有需要可填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 菜鸟橙运 -->
|
|
|
+ <template v-if="isCNCY">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.cncy.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="是否通知取件">
|
|
|
+ <el-select v-model="form.cncy.isNotice" placeholder="请选择" clearable style="width: 100%">
|
|
|
+ <el-option label="通知(0)" :value="0" />
|
|
|
+ <el-option label="不通知(1)" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 菜鸟速递 -->
|
|
|
+ <template v-if="isCNSD">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.cnsd.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="是否通知取件">
|
|
|
+ <el-select v-model="form.cnsd.isNotice" placeholder="请选择" clearable style="width: 100%">
|
|
|
+ <el-option label="通知(0)" :value="0" />
|
|
|
+ <el-option label="不通知(1)" :value="1" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 笨鸟速运 -->
|
|
|
+ <template v-if="isBNSY">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.bnsy.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 丰云配 -->
|
|
|
+ <template v-if="isFYP">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.fyp.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 云集医药冷链 -->
|
|
|
+ <template v-if="isYJYYLL">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="运输类型">
|
|
|
+ <el-input v-model="form.yjyyll.transType" placeholder="按业务填写" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-button type="primary" icon="el-icon-s-promotion" :loading="submitLoading" @click="handleSubmit">
|
|
|
+ 提交下单
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetFormData">
|
|
|
+ 重置
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ icon="el-icon-view"
|
|
|
+ :disabled="!result.printTemplate"
|
|
|
+ @click="handlePreview"
|
|
|
+ >
|
|
|
+ 查看面单
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-printer"
|
|
|
+ :disabled="!result.printTemplate"
|
|
|
+ @click="handlePrintDirect"
|
|
|
+ >
|
|
|
+ 打印面单
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-document"
|
|
|
+ :disabled="!result.printTemplate"
|
|
|
+ @click="openNewWindow"
|
|
|
+ >
|
|
|
+ 新窗口打开
|
|
|
+ </el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ :disabled="!result.printTemplate"
|
|
|
+ @click="downloadHtml"
|
|
|
+ >
|
|
|
+ 下载HTML
|
|
|
+ </el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 返回结果 -->
|
|
|
+ <el-card shadow="never" v-if="result.raw">
|
|
|
+ <div slot="header">
|
|
|
+ <span>下单结果</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-row :gutter="20" class="mb8">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="result-item">
|
|
|
+ <span class="label">是否成功：</span>
|
|
|
+ <el-tag :type="result.success ? 'success' : 'danger'" size="mini">
|
|
|
+ {{ result.success ? "成功" : "失败" }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="result-item">
|
|
|
+ <span class="label">返回码：</span>
|
|
|
+ <span>{{ result.resultCode || "-" }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="result-item">
|
|
|
+ <span class="label">运单号：</span>
|
|
|
+ <span>{{ result.logisticCode || "-" }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="result-item">
|
|
|
+ <span class="label">订单号：</span>
|
|
|
+ <span>{{ result.orderCode || "-" }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="result-item">
|
|
|
+ <span class="label">返回信息：</span>
|
|
|
+ <span>{{ result.reason || serverMsg || "-" }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-divider content-position="left">原始返回</el-divider>
|
|
|
+
|
|
|
+ <el-input type="textarea" :rows="12" :value="result.raw" readonly />
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 面单预览 -->
|
|
|
+ <el-dialog
|
|
|
+ title="面单预览"
|
|
|
+ :visible.sync="previewOpen"
|
|
|
+ width="1000px"
|
|
|
+ append-to-body
|
|
|
+ top="3vh"
|
|
|
+ >
|
|
|
+ <div class="preview-toolbar">
|
|
|
+ <el-button size="mini" type="primary" icon="el-icon-printer" @click="printIframe">
|
|
|
+ 打印
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" icon="el-icon-document" @click="openNewWindow">
|
|
|
+ 新窗口打开
|
|
|
+ </el-button>
|
|
|
+ <el-button size="mini" icon="el-icon-download" @click="downloadHtml">
|
|
|
+ 下载HTML
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <iframe ref="previewFrame" class="preview-frame"></iframe>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { submitKdniaoUniversalEOrder } from "@/api/kdniao/eorder";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "KdniaoEOrder",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ submitLoading: false,
|
|
|
+ previewOpen: false,
|
|
|
+ serverMsg: "",
|
|
|
+ form: this.getDefaultForm(),
|
|
|
+ result: {
|
|
|
+ success: false,
|
|
|
+ resultCode: "",
|
|
|
+ reason: "",
|
|
|
+ logisticCode: "",
|
|
|
+ orderCode: "",
|
|
|
+ printTemplate: "",
|
|
|
+ raw: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ bizOrderNo: [{ required: true, message: "业务订单号不能为空", trigger: "blur" }],
|
|
|
+ shipperCode: [{ required: true, message: "快递公司不能为空", trigger: "change" }],
|
|
|
+ payType: [{ required: true, message: "支付方式不能为空", trigger: "change" }],
|
|
|
+ expType: [{ required: true, message: "业务类型不能为空", trigger: "blur" }],
|
|
|
+ receiverName: [{ required: true, message: "收件人姓名不能为空", trigger: "blur" }],
|
|
|
+ receiverMobile: [{ required: true, message: "收件人手机号不能为空", trigger: "blur" }],
|
|
|
+ receiverProvinceName: [{ required: true, message: "省不能为空", trigger: "blur" }],
|
|
|
+ receiverCityName: [{ required: true, message: "市不能为空", trigger: "blur" }],
|
|
|
+ receiverExpAreaName: [{ required: true, message: "区/县不能为空", trigger: "blur" }],
|
|
|
+ receiverAddress: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
|
|
|
+ receiverPostCode: [{ required: true, message: "当前快递要求邮编必填", trigger: "blur" }],
|
|
|
+ goodsName: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
|
|
|
+ weight: [{ required: true, message: "当前快递要求总重量必填", trigger: "blur" }],
|
|
|
+ volume: [{ required: true, message: "当前快递要求总体积必填", trigger: "blur" }],
|
|
|
+ jdkyIsNotice: [{ required: true, message: "京东快运要求是否通知取件必填", trigger: "change" }],
|
|
|
+ jdkyStartDate: [{ required: true, message: "请填写上门开始时间", trigger: "blur" }],
|
|
|
+ jdkyEndDate: [{ required: true, message: "请填写上门结束时间", trigger: "blur" }]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isSF() {
|
|
|
+ return this.form.shipperCode === "SF";
|
|
|
+ },
|
|
|
+ isEMS() {
|
|
|
+ return this.form.shipperCode === "EMS";
|
|
|
+ },
|
|
|
+ isJDKY() {
|
|
|
+ return this.form.shipperCode === "JDKY";
|
|
|
+ },
|
|
|
+ isJOS() {
|
|
|
+ return this.form.shipperCode === "JOS";
|
|
|
+ },
|
|
|
+ isJDSXYY() {
|
|
|
+ return this.form.shipperCode === "JDSXYY";
|
|
|
+ },
|
|
|
+ isZTO() {
|
|
|
+ return this.form.shipperCode === "ZTO";
|
|
|
+ },
|
|
|
+ isZTOCOLD() {
|
|
|
+ return this.form.shipperCode === "ZTOCOLD";
|
|
|
+ },
|
|
|
+ isCNCY() {
|
|
|
+ return this.form.shipperCode === "CNCY";
|
|
|
+ },
|
|
|
+ isCNSD() {
|
|
|
+ return this.form.shipperCode === "CNSD";
|
|
|
+ },
|
|
|
+ isBNSY() {
|
|
|
+ return this.form.shipperCode === "BNSY";
|
|
|
+ },
|
|
|
+ isFYP() {
|
|
|
+ return this.form.shipperCode === "FYP";
|
|
|
+ },
|
|
|
+ isYJYYLL() {
|
|
|
+ return this.form.shipperCode === "YJYYLL";
|
|
|
+ },
|
|
|
+ showCarrierSpecific() {
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ needReceiverPostCode() {
|
|
|
+ return this.isEMS;
|
|
|
+ },
|
|
|
+ needWeight() {
|
|
|
+ return this.isJDKY;
|
|
|
+ },
|
|
|
+ needVolume() {
|
|
|
+ return this.isJDKY;
|
|
|
+ },
|
|
|
+ needPickupTime() {
|
|
|
+ return this.isJDKY && this.form.jdky.isNotice === 0;
|
|
|
+ },
|
|
|
+ shipperTip() {
|
|
|
+ if (this.isEMS) {
|
|
|
+ return "EMS：收件人邮编必填。";
|
|
|
+ }
|
|
|
+ if (this.isJDKY) {
|
|
|
+ return "京东快运：重量、体积、是否通知取件必填；通知取件时需填写上门时间。";
|
|
|
+ }
|
|
|
+ if (this.isSF) {
|
|
|
+ return "顺丰：港澳台等场景可填写币种。";
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDefaultForm() {
|
|
|
+ return {
|
|
|
+ bizOrderNo: "ORDER" + new Date().getTime(),
|
|
|
+ shipperCode: "SF",
|
|
|
+ payType: 1,
|
|
|
+ expType: "1",
|
|
|
+
|
|
|
+ receiverName: "李四",
|
|
|
+ receiverMobile: "13900000000",
|
|
|
+ receiverTel: "",
|
|
|
+ receiverProvinceName: "广东省",
|
|
|
+ receiverCityName: "深圳市",
|
|
|
+ receiverExpAreaName: "福田区",
|
|
|
+ receiverAddress: "华强北赛格广场",
|
|
|
+ receiverPostCode: "518000",
|
|
|
+
|
|
|
+ goodsName: "电子产品",
|
|
|
+ goodsQuantity: 1,
|
|
|
+ goodsPrice: 1000,
|
|
|
+ goodsWeight: 0.5,
|
|
|
+ goodsDesc: "测试商品",
|
|
|
+
|
|
|
+ quantity: 1,
|
|
|
+ weight: 0.5,
|
|
|
+ volume: 0.001,
|
|
|
+ cost: null,
|
|
|
+ otherCost: null,
|
|
|
+
|
|
|
+ remark: "测试单请勿接",
|
|
|
+ isReturnPrintTemplate: "1",
|
|
|
+ templateSize: "130",
|
|
|
+ isSubscribe: "0",
|
|
|
+
|
|
|
+ sf: {
|
|
|
+ currencyCode: ""
|
|
|
+ },
|
|
|
+ jdky: {
|
|
|
+ isNotice: null,
|
|
|
+ deliveryMethod: null,
|
|
|
+ startDate: "",
|
|
|
+ endDate: ""
|
|
|
+ },
|
|
|
+ jos: {
|
|
|
+ transType: ""
|
|
|
+ },
|
|
|
+ jdsxyy: {
|
|
|
+ transType: ""
|
|
|
+ },
|
|
|
+ zto: {
|
|
|
+ operateDirective: ""
|
|
|
+ },
|
|
|
+ ztocold: {
|
|
|
+ operateDirective: ""
|
|
|
+ },
|
|
|
+ cncy: {
|
|
|
+ transType: "",
|
|
|
+ isNotice: null
|
|
|
+ },
|
|
|
+ cnsd: {
|
|
|
+ transType: "",
|
|
|
+ isNotice: null
|
|
|
+ },
|
|
|
+ bnsy: {
|
|
|
+ transType: ""
|
|
|
+ },
|
|
|
+ fyp: {
|
|
|
+ transType: ""
|
|
|
+ },
|
|
|
+ yjyyll: {
|
|
|
+ transType: ""
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ handleShipperChange() {
|
|
|
+ // 切换快递时不重置通用字段，只重置专属字段
|
|
|
+ const oldCommon = {
|
|
|
+ bizOrderNo: this.form.bizOrderNo,
|
|
|
+ shipperCode: this.form.shipperCode,
|
|
|
+ payType: this.form.payType,
|
|
|
+ expType: this.form.expType,
|
|
|
+
|
|
|
+ receiverName: this.form.receiverName,
|
|
|
+ receiverMobile: this.form.receiverMobile,
|
|
|
+ receiverTel: this.form.receiverTel,
|
|
|
+ receiverProvinceName: this.form.receiverProvinceName,
|
|
|
+ receiverCityName: this.form.receiverCityName,
|
|
|
+ receiverExpAreaName: this.form.receiverExpAreaName,
|
|
|
+ receiverAddress: this.form.receiverAddress,
|
|
|
+ receiverPostCode: this.form.receiverPostCode,
|
|
|
+
|
|
|
+ goodsName: this.form.goodsName,
|
|
|
+ goodsQuantity: this.form.goodsQuantity,
|
|
|
+ goodsPrice: this.form.goodsPrice,
|
|
|
+ goodsWeight: this.form.goodsWeight,
|
|
|
+ goodsDesc: this.form.goodsDesc,
|
|
|
+
|
|
|
+ quantity: this.form.quantity,
|
|
|
+ weight: this.form.weight,
|
|
|
+ volume: this.form.volume,
|
|
|
+ cost: this.form.cost,
|
|
|
+ otherCost: this.form.otherCost,
|
|
|
+
|
|
|
+ remark: this.form.remark,
|
|
|
+ isReturnPrintTemplate: this.form.isReturnPrintTemplate,
|
|
|
+ templateSize: this.form.templateSize,
|
|
|
+ isSubscribe: this.form.isSubscribe
|
|
|
+ };
|
|
|
+
|
|
|
+ this.form = Object.assign(this.getDefaultForm(), oldCommon, {
|
|
|
+ shipperCode: this.form.shipperCode
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ buildSubmitParams() {
|
|
|
+ const carrierFields = {};
|
|
|
+
|
|
|
+ if (this.isSF && this.form.sf.currencyCode) {
|
|
|
+ carrierFields.CurrencyCode = this.form.sf.currencyCode;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isJDKY) {
|
|
|
+ if (this.form.jdky.deliveryMethod !== null && this.form.jdky.deliveryMethod !== undefined && this.form.jdky.deliveryMethod !== "") {
|
|
|
+ carrierFields.DeliveryMethod = this.form.jdky.deliveryMethod;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isJOS && this.form.jos.transType) {
|
|
|
+ carrierFields.TransType = this.form.jos.transType;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isJDSXYY && this.form.jdsxyy.transType) {
|
|
|
+ carrierFields.TransType = this.form.jdsxyy.transType;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isZTO && this.form.zto.operateDirective) {
|
|
|
+ carrierFields.OperateDirective = this.form.zto.operateDirective;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isZTOCOLD && this.form.ztocold.operateDirective) {
|
|
|
+ carrierFields.OperateDirective = this.form.ztocold.operateDirective;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isCNCY) {
|
|
|
+ if (this.form.cncy.transType) {
|
|
|
+ carrierFields.TransType = this.form.cncy.transType;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isCNSD) {
|
|
|
+ if (this.form.cnsd.transType) {
|
|
|
+ carrierFields.TransType = this.form.cnsd.transType;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isBNSY && this.form.bnsy.transType) {
|
|
|
+ carrierFields.TransType = this.form.bnsy.transType;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isFYP && this.form.fyp.transType) {
|
|
|
+ carrierFields.TransType = this.form.fyp.transType;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isYJYYLL && this.form.yjyyll.transType) {
|
|
|
+ carrierFields.TransType = this.form.yjyyll.transType;
|
|
|
+ }
|
|
|
+
|
|
|
+ let isNotice = null;
|
|
|
+ let startDate = "";
|
|
|
+ let endDate = "";
|
|
|
+
|
|
|
+ if (this.isJDKY) {
|
|
|
+ isNotice = this.form.jdky.isNotice;
|
|
|
+ startDate = this.form.jdky.startDate;
|
|
|
+ endDate = this.form.jdky.endDate;
|
|
|
+ } else if (this.isCNCY) {
|
|
|
+ isNotice = this.form.cncy.isNotice;
|
|
|
+ } else if (this.isCNSD) {
|
|
|
+ isNotice = this.form.cnsd.isNotice;
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ bizOrderNo: this.form.bizOrderNo,
|
|
|
+ shipperCode: this.form.shipperCode,
|
|
|
+ payType: this.form.payType,
|
|
|
+ expType: this.form.expType,
|
|
|
+
|
|
|
+ receiver: {
|
|
|
+ name: this.form.receiverName,
|
|
|
+ mobile: this.form.receiverMobile,
|
|
|
+ tel: this.form.receiverTel,
|
|
|
+ provinceName: this.form.receiverProvinceName,
|
|
|
+ cityName: this.form.receiverCityName,
|
|
|
+ expAreaName: this.form.receiverExpAreaName,
|
|
|
+ address: this.form.receiverAddress,
|
|
|
+ postCode: this.form.receiverPostCode
|
|
|
+ },
|
|
|
+
|
|
|
+ commodity: [
|
|
|
+ {
|
|
|
+ goodsName: this.form.goodsName,
|
|
|
+ goodsQuantity: this.form.goodsQuantity,
|
|
|
+ goodsPrice: this.form.goodsPrice,
|
|
|
+ goodsWeight: this.form.goodsWeight,
|
|
|
+ goodsDesc: this.form.goodsDesc
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ quantity: this.form.quantity,
|
|
|
+ weight: this.form.weight,
|
|
|
+ volume: this.form.volume,
|
|
|
+ cost: this.form.cost,
|
|
|
+ otherCost: this.form.otherCost,
|
|
|
+
|
|
|
+ remark: this.form.remark,
|
|
|
+ isReturnPrintTemplate: this.form.isReturnPrintTemplate,
|
|
|
+ templateSize: this.form.templateSize,
|
|
|
+ isSubscribe: this.form.isSubscribe,
|
|
|
+
|
|
|
+ isNotice: isNotice,
|
|
|
+ startDate: startDate,
|
|
|
+ endDate: endDate,
|
|
|
+
|
|
|
+ carrierFields: carrierFields
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSubmit() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ this.submitLoading = true;
|
|
|
+ this.serverMsg = "";
|
|
|
+ this.result = {
|
|
|
+ success: false,
|
|
|
+ resultCode: "",
|
|
|
+ reason: "",
|
|
|
+ logisticCode: "",
|
|
|
+ orderCode: "",
|
|
|
+ printTemplate: "",
|
|
|
+ raw: ""
|
|
|
+ };
|
|
|
+
|
|
|
+ const submitParams = this.buildSubmitParams();
|
|
|
+
|
|
|
+ submitKdniaoUniversalEOrder(submitParams).then(res => {
|
|
|
+ this.serverMsg = res.msg || "";
|
|
|
+
|
|
|
+ const data = res.data || {};
|
|
|
+ this.result.success = data.success === true || data.Success === true;
|
|
|
+ this.result.resultCode = data.resultCode || data.ResultCode || "";
|
|
|
+ this.result.reason = data.reason || data.Reason || "";
|
|
|
+ this.result.printTemplate = data.printTemplate || data.PrintTemplate || "";
|
|
|
+
|
|
|
+ const order = data.order || data.Order || {};
|
|
|
+ this.result.logisticCode = order.logisticCode || order.LogisticCode || "";
|
|
|
+ this.result.orderCode = order.orderCode || order.OrderCode || "";
|
|
|
+ this.result.raw = JSON.stringify(data, null, 2);
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.msgSuccess(res.msg || "下单成功");
|
|
|
+ } else {
|
|
|
+ this.msgError(res.msg || "下单失败");
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.msgError((err && err.message) || "请求失败");
|
|
|
+ }).finally(() => {
|
|
|
+ this.submitLoading = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handlePreview() {
|
|
|
+ if (!this.result.printTemplate) {
|
|
|
+ this.msgError("暂无面单模板");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.previewOpen = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.writePreviewFrame();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handlePrintDirect() {
|
|
|
+ if (!this.result.printTemplate) {
|
|
|
+ this.msgError("暂无面单模板");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.previewOpen = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.writePreviewFrame();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.printIframe();
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ writePreviewFrame() {
|
|
|
+ const iframe = this.$refs.previewFrame;
|
|
|
+ if (!iframe || !iframe.contentWindow) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const doc = iframe.contentWindow.document;
|
|
|
+ doc.open();
|
|
|
+ doc.write(this.buildWaybillHtml(this.result.printTemplate));
|
|
|
+ doc.close();
|
|
|
+ },
|
|
|
+
|
|
|
+ buildWaybillHtml(templateHtml) {
|
|
|
+ const html = templateHtml || "";
|
|
|
+
|
|
|
+ if (/<html[\s\S]*?>/i.test(html)) {
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+
|
|
|
+ return `
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <title>面单预览</title>
|
|
|
+ <style>
|
|
|
+ html, body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ @page {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+${html}
|
|
|
+</body>
|
|
|
+</html>`;
|
|
|
+ },
|
|
|
+
|
|
|
+ openNewWindow() {
|
|
|
+ if (!this.result.printTemplate) {
|
|
|
+ this.msgError("暂无面单模板");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const win = window.open("", "_blank");
|
|
|
+ if (!win) {
|
|
|
+ this.msgError("浏览器拦截了新窗口，请允许弹窗后重试");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ win.document.open();
|
|
|
+ win.document.write(this.buildWaybillHtml(this.result.printTemplate));
|
|
|
+ win.document.close();
|
|
|
+ },
|
|
|
+
|
|
|
+ printIframe() {
|
|
|
+ const iframe = this.$refs.previewFrame;
|
|
|
+ if (!iframe || !iframe.contentWindow) {
|
|
|
+ this.msgError("打印窗口未初始化");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ iframe.contentWindow.focus();
|
|
|
+ iframe.contentWindow.print();
|
|
|
+ } catch (e) {
|
|
|
+ this.msgError("打印失败：" + (e.message || "未知异常"));
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ downloadHtml() {
|
|
|
+ if (!this.result.printTemplate) {
|
|
|
+ this.msgError("暂无面单模板");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const html = this.buildWaybillHtml(this.result.printTemplate);
|
|
|
+ const blob = new Blob([html], { type: "text/html;charset=utf-8" });
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement("a");
|
|
|
+
|
|
|
+ a.href = url;
|
|
|
+ a.download = "waybill_" + (this.result.orderCode || new Date().getTime()) + ".html";
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ },
|
|
|
+
|
|
|
+ resetFormData() {
|
|
|
+ this.form = this.getDefaultForm();
|
|
|
+ this.result = {
|
|
|
+ success: false,
|
|
|
+ resultCode: "",
|
|
|
+ reason: "",
|
|
|
+ logisticCode: "",
|
|
|
+ orderCode: "",
|
|
|
+ printTemplate: "",
|
|
|
+ raw: ""
|
|
|
+ };
|
|
|
+ this.serverMsg = "";
|
|
|
+ this.resetForm("form");
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+}
|
|
|
+
|
|
|
+.mb8 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb12 {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.result-item {
|
|
|
+ line-height: 28px;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.result-item .label {
|
|
|
+ color: #606266;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-toolbar {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-frame {
|
|
|
+ width: 100%;
|
|
|
+ height: 700px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+</style>
|
zyy