<template>
|
<div class="page-list-container">
|
<!--数据Table-->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes" :quick-search-fields="quickSearchFields">
|
<template slot="action-column-slot" slot-scope="{row, col}">
|
<template>
|
<waybill-history :load-options="stateLoadOptions" :where="selectWhere(row)">
|
<template slot="content">
|
<el-button type="text" size="mini">运单记录</el-button>
|
</template>
|
</waybill-history>
|
<el-button type="text" size="mini" @click="editData(row.idCard_Id)">编辑</el-button>
|
</template>
|
</template>
|
<template slot="common-column-slot" slot-scope="{row, col}">
|
<!--图片列处理-->
|
<template v-if="['positiveServerUrl','negativeServerUrl'].indexOf(col.prop)>=0">
|
<template v-for="(pic, index) in getPicList(row[col.prop])">
|
<img :key="index" :src="showSmallPic(pic)" class="pic" @click="showBigPic(row.positiveServerUrl, row.negativeServerUrl)">
|
</template>
|
</template>
|
<template v-else-if="['periodState'].indexOf(col.prop)>=0">
|
<el-tag v-if="row[col.prop]==='有效'" type="success" style="background-color:#00ccff;color:white;">{{ row[col.prop] }}</el-tag>
|
<el-tag v-else type="danger">{{ row[col.prop] }}</el-tag>
|
</template>
|
<!--连接字段-->
|
<template v-else-if="col.prop==dataOptions.linkColumn">
|
<el-link type="primary" @click.native="()=>{linkEditor(row[dataOptions.idField]);}">{{ row[col.prop] }}</el-link>
|
</template>
|
<template v-else-if="col.dropdown_Id>0">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</template>
|
<template v-else>
|
<template v-if="['date', 'datetime'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatDate(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else-if="['byte', 'int32', 'int64', 'decimal', 'double'].indexOf(col.dataType)>=0 && col.formatter">
|
{{ common.formatNumber(row[col.prop], col.formatter) }}
|
</template>
|
<template v-else>
|
{{ row[col.prop] }}
|
</template>
|
</template>
|
</template>
|
</yrt-data-list>
|
|
<!--数据编辑器Editor :visible.sync="editorOptions.config.visible"-->
|
<yrt-editor :ref="editorRef" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :visible.sync="editorOptions.config.visible" :detail-button-click="detailButtonClick" :auth-nodes="authNodes" @on-edit-load-before="onEditLoadBefore">
|
<div slot="blank-positiveServerUrl" slot-scope="props">
|
<el-row>
|
<el-col :span="12">
|
<img :src="showSmallPicEdit('positive')" class="pic-edit">
|
<br />
|
<el-button @click="updateFrontPhotos()">更新正面照片</el-button>
|
</el-col>
|
<el-col :span="12">
|
<img :src="showSmallPicEdit('negative')" class="pic-edit">
|
<br />
|
<el-button @click="uploadidCardback">更新反面照片</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<!--自定义按钮插槽-->
|
<template slot="footer-button-region" slot-scope="{ formData, details }">
|
<!--反转图片按钮-->
|
<div class="right">
|
<el-button :disabled="btnReadOnly.pictureReturn" class="Returnpic" type="primary" icon="el-icon-yrt-tuihuochuli" @click.native="pictureReturn()">反转图片</el-button>
|
</div>
|
|
</template>
|
|
</yrt-editor>
|
|
<!-- OCR新建页面 -->
|
<el-dialog :visible.sync="dialogFormVisible" title="新建" width="1000px">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>上传身份证号码</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="margin-top-30 card-main">
|
<el-steps :active="step" finish-status="success" align-center>
|
<el-step title="选择身份证图片"></el-step>
|
<el-step title="开始识别信息"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-row class="upload-region">
|
<el-col :span="12" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp1" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="positiveServerUrl" :src="positiveServerUrl+'?x-oss-process=style/600'" class="card" />
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证正面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
<el-col :span="12" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp2" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="negativeServerUrl" :src="negativeServerUrl+'?x-oss-process=style/600'" class="card">
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证反面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row style=" margin-top: 50px;text-align: center;">
|
<el-button :loading="isLoading" type="primary" icon="el-icon-yrt-saomiao2" @click="startCardValueInner">开始识别身份证</el-button>
|
</el-row>
|
</div>
|
|
<div :class="{hidden:hiddenStep2}" class="step2">
|
<el-form ref="form" :model="formData" label-width="100px" class="margin-top-30">
|
<el-alert :closable="false" title="请确认以下信息正确无误！" type="error" class="margin-20">
|
</el-alert>
|
<el-form-item label="收件人姓名">
|
<el-input v-model="formData.userName" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号码">
|
<el-input v-model="formData.cardId" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item label="有效期限" class="w-550">
|
<el-col :span="11">
|
<el-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-col :span="2" class="line align-center">-</el-col>
|
<el-col :span="11">
|
<el-date-picker v-if="isdate2" v-model="formData.date2" type="date" placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-input v-if="isEnddate2" v-model="formData.date2" class="w-60"></el-input>
|
</el-form-item>
|
<el-form-item label="运单号">
|
<el-input v-model="formData.wayBill" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="warning" @click="onGo1">上一步</el-button>
|
<el-button type="primary" @click="oCRonSubmit">确认提交</el-button>
|
<el-button>取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<div class="step3-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">上传完成</div>
|
<el-button type="primary" @click="reStartCard">继续上传</el-button>
|
<el-button type="primary" @click="dialogFormVisible=false ">关闭</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!-- 新建页面 -->
|
<el-dialog v-dialogDrag :visible.sync="dialogFormVisible1" title="新建" width="1000px">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>上传身份证号码</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="margin-top-30 card-main">
|
<!-- <el-steps :active="step" finish-status="success" align-center>
|
<el-step title="选择身份证图片"></el-step>
|
<el-step title="开始识别信息"></el-step>
|
<el-step title="提交完成"></el-step>
|
</el-steps> -->
|
<!-- <div class="split-line"></div> -->
|
<!-- <div :class="{hidden:hiddenStep1}" class="step1">
|
|
<el-row style=" margin-top: 50px;text-align: center;">
|
<el-button :loading="isLoading" type="primary" icon="el-icon-yrt-saomiao2" @click="startCardValueInner">开始识别身份证</el-button>
|
</el-row>
|
</div> -->
|
|
<div :class="{hidden:hiddenStep5}" class="step2">
|
<el-form ref="form" :model="formData" label-width="100px" class="margin-top-30">
|
<el-alert :closable="false" title="请确认以下信息正确无误！" type="error" class="margin-20">
|
</el-alert>
|
<el-row class="upload-region">
|
<el-col :span="12" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp1" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="positiveServerUrl" :src="positiveServerUrl+'?x-oss-process=style/600'" class="card" />
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证正面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
<el-col :span="12" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp2" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="negativeServerUrl" :src="negativeServerUrl+'?x-oss-process=style/600'" class="card">
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">上传身份证反面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="收件人姓名">
|
<el-input v-model="formData.userName" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号码">
|
<el-input v-model="formData.cardId" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item label="有效期限" class="w-550">
|
<el-col :span="11">
|
<el-date-picker v-model="formData.date1" type="date" placeholder="开始日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-col :span="2" class="line align-center">-</el-col>
|
<el-col :span="11">
|
<el-date-picker v-if="isdate3" v-model="formData.date2" type="date" placeholder="结束日期" style="width: 100%;"></el-date-picker>
|
</el-col>
|
<el-input v-if="isEnddate2" v-model="formData.date2" class="w-60"></el-input>
|
</el-form-item>
|
<el-form-item label="运单号">
|
<el-input v-model="formData.wayBill" class="w-300"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<!-- <el-button type="warning" @click="onGo1">上一步</el-button> -->
|
<el-button type="primary" @click="onSubmit">确认提交</el-button>
|
<el-button>取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div :class="{hidden:hiddenStep3}" class="step3">
|
<div class="step3-finished">
|
<i class="el-icon-yrt-yduigouxuan icon"></i>
|
</div>
|
<div class="text">上传完成</div>
|
<el-button type="primary" @click="reStartCard">继续上传</el-button>
|
<el-button type="primary" @click="dialogFormVisible=false ">关闭</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!--修改身份证正面图片弹框-->
|
<el-dialog v-dialogDrag :visible.sync="dialogIdCardPositive" title="修改" width="1000px">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>上传身份证号码</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="margin-top-30 card-main">
|
<el-steps :active="step" finish-status="success" align-center>
|
<el-step title="选择身份证正面图片"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-row class="upload-region">
|
<el-col :span="24" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp3" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="positiveServerUrl" :src="positiveServerUrl+'?x-oss-process=style/600'" class="card" />
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">修改身份证正面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row style=" margin-top: 50px;text-align: center;">
|
<el-button :loading="isLoading" type="primary" @click="onupdateidcard()">确定</el-button>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!--修改身份证反面图片弹框-->
|
<el-dialog v-dialogDrag :visible.sync="dialogFormVisibleback" title="修改" width="1000px">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>上传身份证号码</el-breadcrumb-item>
|
</el-breadcrumb>
|
<div class="split-line"></div>
|
<div class="margin-top-30 card-main">
|
<el-steps :active="step" finish-status="success" align-center>
|
<el-step title="选择身份证反面图片"></el-step>
|
</el-steps>
|
<div class="split-line"></div>
|
<div :class="{hidden:hiddenStep1}" class="step1">
|
<el-row class="upload-region">
|
<el-col :span="24" class="align-center">
|
<el-upload :show-file-list="false" :http-request="uploadHttp4" :before-upload="beforeAvatarUpload" class="card-uploader" action="">
|
<img v-if="negativeServerUrl" :src="negativeServerUrl+'?x-oss-process=style/600'" class="card">
|
<div v-else>
|
<i class="el-icon-plus card-uploader-icon"></i>
|
<div class="text">修改身份证反面</div>
|
</div>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row style=" margin-top: 50px;text-align: center;">
|
<el-button :loading="isLoading" type="primary" @click="onupdateidcard()">确定</el-button>
|
</el-row>
|
</div>
|
</div>
|
</el-dialog>
|
|
<!--预览中图片-->
|
<el-dialog v-dialogDrag :visible.sync="dialogPicVisible" :append-to-body="true" width="800px" @closed="dialogPicHide">
|
<el-row :gutter="10">
|
<el-col :span="12" class="align-right">
|
<img :src="pic1" style="max-height:400px;max-width:100%;">
|
</el-col>
|
<el-col :span="12" class="align-left">
|
<img :src="pic2" style="max-height:400px;max-width:100%;">
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
import waybillHistory from "@/views/tms/basic/components/waybillhistory.vue";
|
import ossClient from "@/utils/aliyun.oss.client";
|
var moment = require("moment");
|
|
export default {
|
name: "user-basic-idcard",
|
// 自定义JSON路由地址
|
custoJsonmRoute: "/user/basic/idcard",
|
components: {
|
waybillHistory
|
},
|
mixins: [baseLayout],
|
data() {
|
return {
|
quickSearchFields: [
|
{
|
label: "运单号",
|
prop: "wayBillCode",
|
type: "textarea",
|
dataType: "string",
|
value: null,
|
getWhere: function(val) {
|
if (val) {
|
val = val
|
.trim()
|
.replace(/\r|'|=| /gi, "")
|
.replace(/\n/gi, ",");
|
const valList = val.split(/,|，|、/);
|
return {
|
prop: "idCard_Id",
|
operator: "raw",
|
value: `Exists(Select 1 From TMS_WayBill Where consigneeIdcard=tmsidcard.idCardCode And wayBillCode in('${valList.join(
|
"','"
|
)}'))`
|
};
|
}
|
return null;
|
}
|
},
|
{
|
label: "手机1/手机2/手机3",
|
prop: "mobile",
|
type: "input",
|
dataType: "string",
|
value: null,
|
getWhere: function(val) {
|
if (val) {
|
val = val
|
.trim()
|
.replace(/\r|'|=| /gi, "")
|
.replace(/\n/gi, ",");
|
const where = {
|
prop: "__quickSearch__",
|
where: [
|
{
|
prop: "mobile",
|
value: val
|
},
|
{
|
prop: "mobile2",
|
value: val
|
},
|
{
|
prop: "mobile3",
|
value: val
|
}
|
],
|
value: val
|
};
|
return where;
|
}
|
return null;
|
}
|
}
|
],
|
// 图片域名地址
|
BASE_API: this.common.ossDomain,
|
dialogPicVisible: false, // 图片查看窗口
|
pic1: null, // 图片放大地址1
|
pic2: null, // 图片放大地址2
|
dialogFormVisible: false, // 新建页面窗口
|
dialogFormVisible1: false, // 新建页面窗口
|
dialogIdCardPositive: false, // 修改身份证正面窗口
|
dialogFormVisibleback: false, // 修改身份证反面窗口
|
|
// 加载
|
isLoading: false,
|
// 状态流加载参数
|
stateLoadOptions: {
|
folder: "express/tms",
|
projectName: "Interface.Express",
|
tableView: "TMS_WayBill",
|
idField: "wayBill_Id",
|
sortName: "wayBill_Id DESC",
|
pageIndex: 1,
|
pageSize: 100,
|
Menu_Id: -1
|
},
|
// 身份证正面服务器URL
|
positiveServerUrl: "",
|
// 身份证反面服务器URL
|
negativeServerUrl: "",
|
// 识别数据
|
formData: {},
|
// 步骤
|
step: 1,
|
// step1隐藏
|
hiddenStep1: false,
|
// step2隐藏
|
hiddenStep2: true,
|
// step3隐藏
|
hiddenStep3: true,
|
// step5隐藏
|
hiddenStep5: false,
|
waybillcode: null,
|
isdate2: false,
|
isdate3: true,
|
isEnddate2: false,
|
uploadConf: this.common.uploadConf,
|
authNodes: {
|
add: true,
|
newAdd: true,
|
oCRAdd: true,
|
delete: true,
|
export: true,
|
save: true
|
}
|
};
|
},
|
methods: {
|
selectWhere: function(rowData) {
|
return "consigneeIdcard='" + rowData.idCardCode + "'";
|
},
|
// 将图片字符串转为数组
|
getPicList(pics) {
|
var picList = pics ? pics.split(",") : [];
|
return picList;
|
},
|
// 列表页面按钮点击事件
|
buttonClick(authNode) {
|
switch (authNode) {
|
case "oCRAdd":
|
// 批量审核
|
this.dialogFormVisible = true;
|
this.cardPositive = null;
|
this.cardNegative = null;
|
this.reStartCard();
|
return false;
|
case "newAdd":
|
// 批量审核
|
this.dialogFormVisible1 = true;
|
this.cardPositive = null;
|
this.cardNegative = null;
|
this.reStartCard();
|
return false;
|
case "delete":
|
// 导出身份证
|
this.delete();
|
return false;
|
case "analysis":
|
// 百度分析图片
|
this.analysis();
|
return false;
|
case "pictureReturn":
|
// 反转图片
|
this.pictureReturn();
|
return false;
|
}
|
},
|
// 删除身份证信息
|
delete() {
|
if (!this.dataListSelections.length) {
|
this.$message.error("至少选中一行！");
|
return;
|
}
|
const selectIDs = this.dataListSelections.map((item, index, Array) => {
|
return item.idCard_Id;
|
});
|
const idCardCodes = this.dataListSelections.map((item, index, Array) => {
|
return item.idCardCode;
|
});
|
const url = "/api/tms/idcard/deleteIdCard";
|
const params = {
|
ids: selectIDs,
|
idCardCodes: idCardCodes
|
};
|
const ref = this.dataList;
|
var callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
ref.loadData();
|
}
|
};
|
this.common.ajax(url, params, callback, ref);
|
},
|
// 编辑框弹出
|
editData(id) {
|
var ref = this.editor;
|
ref.editData(id);
|
},
|
// 显示小图
|
showSmallPic(pic) {
|
if (pic) {
|
if (pic.indexOf("http") >= 0) {
|
return pic + "?x-oss-process=style/small";
|
} else {
|
return this.BASE_API + pic + "?x-oss-process=style/small";
|
}
|
} else {
|
return "";
|
}
|
},
|
// 显示大图
|
showBigPic(pic1, pic2) {
|
this.pic1 = "";
|
this.pic2 = "";
|
this.dialogPicVisible = true;
|
if (pic1) {
|
if (pic1.indexOf("http") >= 0) {
|
this.pic1 = pic1 + "?x-oss-process=style/big&r" + Math.random();
|
} else {
|
this.pic1 = this.BASE_API + pic1 + "?x-oss-process=style/big&r" + Math.random();
|
}
|
if (pic2.indexOf("http") >= 0) {
|
this.pic2 = pic2 + "?x-oss-process=style/big&r" + Math.random();
|
} else {
|
this.pic2 = this.BASE_API + pic2 + "?x-oss-process=style/big&r" + Math.random();
|
}
|
} else {
|
this.pic1 = "";
|
this.pic2 = "";
|
}
|
},
|
// 隐藏大图对话框
|
dialogPicHide() {
|
this.pic1 = "";
|
this.pic2 = "";
|
},
|
// 显示小图
|
showSmallPicEdit(type) {
|
var formData = this.editor.formData;
|
var pic = "";
|
if (type === "positive") {
|
pic = formData.positiveServerUrl;
|
} else {
|
pic = formData.negativeServerUrl;
|
}
|
if (pic) {
|
if (pic.indexOf("http") >= 0) {
|
return pic + "?x-oss-process=style/600&r" + Math.random();
|
} else {
|
return this.BASE_API + pic + "?x-oss-process=style/600&r" + Math.random();
|
}
|
} else {
|
return "";
|
}
|
},
|
// 显示大图
|
showBigPicEdit() {
|
var formData = this.editor.formData;
|
const pic1 = formData.positiveServerUrl + "?x-oss-process=style/big&r" + Math.random();
|
const pic2 = formData.negativeServerUrl + "?x-oss-process=style/big&r" + Math.random();
|
this.showBigPic(pic1, pic2);
|
},
|
// 国内识别
|
startCardValueInner() {
|
if (!this.positiveServerUrl) {
|
this.$message.error("身份证正面不能为空");
|
return;
|
}
|
|
if (!this.negativeServerUrl) {
|
this.$message.error("身份证反面不能为空");
|
return;
|
}
|
|
var url = "/api/tms/idcard/idCardUpload";
|
var params = {
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl
|
};
|
// 采用国内域名访问，使用ajax3，澳洲无法访问
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
var idCardInfo_front = res.data.front;
|
var idCardInfo_back = res.data.back;
|
if (idCardInfo_front.image_status === "normal" && idCardInfo_back.image_status === "normal") {
|
this.formData.userName = idCardInfo_front.words_result.姓名.words;
|
this.formData.cardId = idCardInfo_front.words_result.公民身份号码.words;
|
var startYear = idCardInfo_back.words_result.签发日期.words.substr(0, 4);
|
var startMonth = idCardInfo_back.words_result.签发日期.words.substr(4, 2);
|
var startDay = idCardInfo_back.words_result.签发日期.words.substr(6, 2);
|
var EndYear = idCardInfo_back.words_result.失效日期.words.substr(0, 4);
|
var EndMonth = idCardInfo_back.words_result.失效日期.words.substr(4, 2);
|
var EndDay = idCardInfo_back.words_result.失效日期.words.substr(6, 2);
|
|
this.formData.date1 = startYear + "-" + startMonth + "-" + startDay;
|
if (EndYear === "长期") {
|
this.formData.date2 = EndYear;
|
this.isEnddate2 = true;
|
} else {
|
this.formData.date2 = EndYear + "-" + EndMonth + "-" + EndDay;
|
this.isdate2 = true;
|
}
|
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
} else {
|
this.$message.error(
|
"身份证不正确：" + idCardInfo_front.image_status + ", " + idCardInfo_back.image_status
|
);
|
}
|
} else {
|
this.$message.error("未获取到身份证信息，请手工输入身份证信息");
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = false;
|
this.hiddenStep3 = true;
|
this.isdate2 = true;
|
}
|
},
|
true
|
);
|
},
|
// 返回第一步
|
onGo1() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
},
|
// oCR保存数据
|
oCRonSubmit() {
|
var endDate = "";
|
if (!this.formData.date1) {
|
this.$message.error("开始日期不能为空");
|
return;
|
}
|
if (!this.formData.date2) {
|
this.$message.error("结束日期不能为空");
|
return;
|
}
|
const startDate = moment(this.formData.date1).format("YYYY-MM-DD");
|
if (this.formData.date2 === "长期") {
|
endDate = this.formData.date2;
|
} else {
|
endDate = moment(this.formData.date2).format("YYYY-MM-DD");
|
}
|
var url = "/api/tms/idcard/addIdCard";
|
var params = {
|
userName: this.formData.userName,
|
cardId: this.formData.cardId,
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl,
|
startDate: startDate,
|
endDate: endDate,
|
wayBillCode: this.formData.wayBill
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
}
|
},
|
true
|
);
|
},
|
|
// 新建保存数据
|
onSubmit() {
|
var endDate = "";
|
if (!this.formData.date1) {
|
this.$message.error("开始日期不能为空");
|
return;
|
}
|
if (!this.formData.date2) {
|
this.$message.error("结束日期不能为空");
|
return;
|
}
|
if (!this.formData.userName) {
|
this.$message.error("收件人姓名不能为空");
|
return;
|
}
|
if (!this.formData.cardId) {
|
this.$message.error("身份证号不能为空");
|
return;
|
}
|
if (!this.formData.wayBill) {
|
this.$message.error("运单号不能为空");
|
return;
|
}
|
if (!this.positiveServerUrl) {
|
this.$message.error("身份证正面不能为空");
|
return;
|
}
|
|
if (!this.negativeServerUrl) {
|
this.$message.error("身份证反面不能为空");
|
return;
|
}
|
const startDate = moment(this.formData.date1).format("YYYY-MM-DD");
|
if (this.formData.date2 === "长期") {
|
endDate = this.formData.date2;
|
} else {
|
endDate = moment(this.formData.date2).format("YYYY-MM-DD");
|
}
|
var url = "/api/tms/idcard/addIdCard";
|
var params = {
|
userName: this.formData.userName,
|
cardId: this.formData.cardId,
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl,
|
startDate: startDate,
|
endDate: endDate,
|
wayBillCode: this.formData.wayBill
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.step = 2;
|
this.hiddenStep1 = true;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = false;
|
this.dialogFormVisible1 = false;
|
this.dataList.reload();
|
}
|
},
|
true
|
);
|
},
|
// 重新上传
|
reStartCard() {
|
this.step = 1;
|
this.hiddenStep1 = false;
|
this.hiddenStep2 = true;
|
this.hiddenStep3 = true;
|
this.positiveServerUrl = null;
|
this.negativeServerUrl = null;
|
this.formData = {};
|
},
|
// 上传至阿里云
|
/**
|
* 阿里云OSS上传
|
*/
|
uploadHttp1({ file }) {
|
const fileName = `Upload/Temp/${this.common.formatDate(
|
new Date(),
|
"YYYY-MM-DD"
|
)}/${new Date().valueOf()}-${this.common.getGUID()}.jpg`; // 定义唯一的文件名
|
ossClient(this.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.positiveServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(() => {
|
this.$message.error(`网络超时请检查网络后重试`);
|
});
|
},
|
uploadHttp2({ file }) {
|
const fileName = `Upload/Temp/${this.common.formatDate(
|
new Date(),
|
"YYYY-MM-DD"
|
)}/${new Date().valueOf()}-${this.common.getGUID()}.jpg`; // 定义唯一的文件名
|
ossClient(this.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.negativeServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(() => {
|
this.$message.error(`网络超时请检查网络后重试`);
|
});
|
},
|
/**
|
* 图片限制
|
*/
|
beforeAvatarUpload(file) {
|
const isJPEG = file.name.split(".")[1] === "jpeg";
|
const isJPG = file.name.split(".")[1] === "jpg";
|
const isPNG = file.name.split(".")[1] === "png";
|
const isLt5MB = file.size / 1024 / 1024 < 5;
|
if (!isJPG && !isJPEG && !isPNG) {
|
this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
|
}
|
if (!isLt5MB) {
|
this.$message.error("单张图片大小不能超过 5MB!");
|
}
|
return (isJPEG || isJPG || isPNG) && isLt5MB;
|
},
|
// 更新正面照片弹框
|
updateFrontPhotos(formData) {
|
const idCardCode = this.editor.formData["idCardCode"];
|
var url = "/api/tms/idcard/isIdCardinformation";
|
var params = {
|
idCardCode: idCardCode
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.reStartCard();
|
this.dialogIdCardPositive = true;
|
} else {
|
this.msg = res.Msg;
|
}
|
},
|
true
|
);
|
},
|
// 更新反面照片弹框
|
uploadidCardback() {
|
const idCardCode = this.editor.formData["idCardCode"];
|
var url = "/api/tms/idcard/isIdCardinformation";
|
var params = {
|
idCardCode: idCardCode
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.reStartCard();
|
this.dialogFormVisibleback = true;
|
} else {
|
this.msg = res.Msg;
|
}
|
},
|
true
|
);
|
},
|
// 阿里云图片上传
|
uploadHttp3({ file }) {
|
var formData = this.editor.formData;
|
const idCardCode = formData.idCardCode;
|
const fileName = `Upload/Card/${idCardCode}_1.jpg`; // 定义唯一的文件名
|
ossClient(this.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.positiveServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(err => {
|
this.$message.error(`上传图片失败` + err.message);
|
});
|
},
|
uploadHttp4({ file }) {
|
var formData = this.editor.formData;
|
const idCardCode = formData.idCardCode;
|
const fileName = `Upload/Card/${idCardCode}_2.jpg`; // 定义唯一的文件名
|
ossClient(this.uploadConf)
|
.put(fileName, file, {
|
ContentType: "image/jpeg"
|
})
|
.then(({ res, url, name }) => {
|
if (res && res.status === 200) {
|
this.negativeServerUrl = res.requestUrls[0];
|
}
|
})
|
.catch(err => {
|
this.$message.error(`上传图片失败` + err.message);
|
});
|
},
|
// 修改身份证正面图片
|
onupdateidcard() {
|
const idCardCode = this.editor.formData["idCardCode"];
|
var url = "/api/tms/idcard/updateIdCard";
|
var params = {
|
idCardCode: idCardCode,
|
positiveServerUrl: this.positiveServerUrl,
|
negativeServerUrl: this.negativeServerUrl
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.positiveServerUrl = null;
|
this.negativeServerUrl = null;
|
|
this.dialogFormVisibleback = false;
|
this.dialogIdCardPositive = false;
|
this.editor.reload();
|
}
|
},
|
true
|
);
|
},
|
// 编辑前事件
|
onEditLoadBefore(formData) {
|
formData.positiveServerUrl = "";
|
formData.negativeServerUrl = "";
|
},
|
// 百度分析
|
analysis() {
|
const ids = this.dataListSelections.map(item => {
|
return item.idCard_Id;
|
});
|
if (!ids) {
|
this.$message.error("只是选择一项");
|
return;
|
}
|
const url = "/api/tms/idCard/singleStart";
|
const params = {
|
ids: ids
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dataList.reload();
|
}
|
},
|
true
|
);
|
},
|
// 反转图片
|
pictureReturn() {
|
var picUrl = this.editor.formData.positiveServerUrl;
|
this.editor.formData.positiveServerUrl = this.editor.formData.negativeServerUrl;
|
this.editor.formData.negativeServerUrl = picUrl;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import "@/styles/user.scss";
|
</style>
|
|
<style lang="scss" scoped>
|
.card-main {
|
.remark {
|
line-height: 1.8;
|
font-size: 14px;
|
}
|
.upload-region {
|
margin-top: 30px;
|
/deep/ .card-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
.text {
|
margin-bottom: 30px;
|
color: #888;
|
}
|
}
|
/deep/ .card-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.card-uploader-icon {
|
font-size: 58px;
|
color: #8c939d;
|
width: 300px;
|
height: 150px;
|
line-height: 170px;
|
text-align: center;
|
}
|
.card {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
}
|
.step3 {
|
margin-top: 50px;
|
text-align: center;
|
.step3-finished {
|
width: 80px;
|
height: 80px;
|
border-radius: 40px;
|
background-color: #409eff;
|
display: inline-block;
|
padding: 13px;
|
.icon {
|
font-size: 60px;
|
color: white;
|
}
|
}
|
.text {
|
font-size: 14px;
|
color: #888;
|
padding: 10px 30px 100px;
|
}
|
.Returnpic {
|
float: right;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
@import "@/styles/yrt-data-list.scss";
|
.pic {
|
max-width: 40px;
|
max-height: 40px;
|
cursor: pointer;
|
}
|
.pic-edit {
|
max-width: 450px;
|
max-height: 400px;
|
cursor: pointer;
|
}
|
</style>
|
