vant ui 文档地址
https://youzan.github.io/vant/#/zh-CN/home
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
<!DOCTYPE html><html>
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>证书外省调入</title> <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css" /> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/1.4.6/tailwind.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"> <!--<script src="vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); </script>--> <style type="text/css"> /* body{ */ /* background-color: #f7f8fa; */ /* } */ .content { padding: 0px 18px 24px 18px; }
.promise_text { width: 90%; font-size: 10px; line-height: 20px; display: inline-block; margin-left: 10px; margin-top: -5px; }
.van-cell__value { text-align: left; }
.van-radio-group { margin-top: 12px; /*height: calc(100vh - 178px);*/ height: 280px; overflow-y: scroll; border: solid 1px #DCDFE6; }
.van-cell { padding: 10px 8px; }
.van-cell__label { font-size: 14px; }
.t2 { margin-top: 12px; font-size: 16px; font-weight: bold; color: #000000; }
.van-row { padding: 4px 0px; box-shadow: 0px 0px 10px 1px white; }
.van-button { display: block; }
.van-button::before { background-color: #F2F6FC; }
.van-button--default { color: #3D75C5; background-color: #F2F6FC; }
.next { background-color: #3D75C5; color: #ffffff; }
.footer { position: fixed; width: 100%; bottom: 0px; padding-bottom: 10px; padding-top: 10px; background-color: white; }
.btnDetail { float: right; }
.wrapper { display: flex; align-items: center; justify-content: center; height: 100%; }
.block { width: 90%; height: 95%; background-color: #fff; }
.autoCenter { margin: 0px auto; }
.addborder { border: #999999 solid 1px; margin-top: 10px; margin-bottom: 10px; }
.paddingleft16 { padding-left: 16px; }
.content-ipt-item { height: 47px; border-bottom: 1px solid rgba(229,229,229,1); display: flex; align-items: center; position: relative; }
.content-ipt-item > span { font-size: 15px; color: #505050; margin-left: 10px; margin-right: 10px; position: relative; width: 34%; }
.content-ipt-item > span.must::before { display: block; content: "*"; position: absolute; left: -10px; color: #d43030; }
.content-ipt-item.cliout > .ipt-item-img { position: absolute; right: 6px; display: flex; align-items: center; }
.tabContent_content { text-align: left; margin: 16px auto; border: 1px solid rgba(220,223,230,1); }
.tabContent_content_title { background: rgba(242,246,252,1); font-size: 14px; color: rgba(51,51,51,1); line-height: 28px; font-weight: 400; padding: 12px 15px; }
.tabContent_content_content { margin-top: 12px; margin-bottom: 4px; margin-left: 16px; margin-right: 16px; }
.tabContent_content_button { border-top: 1px solid rgba(220,223,230,1); padding-top: 12px; } </style>
</head>
<body> <div id="app"> <div class="content"> <van-tabs v-model="activeTab"> <van-tab title="填写申请信息"> <h2 class="t2">请填写证书信息：</h2> <div id="divApplyInfo" class="content-box">
<div class="content-ipt-item cliout"> <span class="must">证书编号</span> <input type="text" placeholder="请填写证书编号" v-model="applyInfo.certificateNo" data-verify="notempty" data-verify-errormessage="证书编号为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">姓名</span> <input type="text" placeholder="请填写姓名" v-model="applyInfo.employeeName" data-verify="notempty" data-verify-errormessage="姓名格式不正确，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">身份证号</span> <input type="text" placeholder="请填写身份证号" v-model="applyInfo.idNumber" data-verify="notempty,idnumber" data-verify-errormessage="身份证号为必填项，请检查|请填写正确的身份证号码"> </div> <div class="content-ipt-item cliout"> <span class="must">持证人手机号码</span> <input type="text" placeholder="请填写手机号码" v-model="applyInfo.employeePhoneNumber" data-verify="notempty,mobilephone" data-verify-errormessage="手机号码为必填项，请检查|请填写正确的手机号码"> </div> <div class="content-ipt-item cliout"> <span class="must">行业</span> <input type="text" placeholder="请选择行业" readonly v-model="applyInfo.industry" @click="fnShowIndustry" data-verify="notempty" data-verify-errormessage="行业为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">证书类型</span> <input type="text" placeholder="请选择证书类型" readonly v-model="applyInfo.examType" @click="fnShowExamType" data-verify="notempty" data-verify-errormessage="证书类型为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">职务</span> <input type="text" placeholder="请选择职务" readonly v-model="applyInfo.job" @click="fnShowJob" data-verify="notempty" data-verify-errormessage="职务为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">职称</span> <input type="text" placeholder="请选择职称" readonly v-model="applyInfo.title4Technical" @click="fnShowTitle4Technical" data-verify="notempty" data-verify-errormessage="职称为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">有效期(起)</span> <input type="text" placeholder="请选择有效期(起)" readonly v-model="applyInfo.startCertificateDate" @click="fnShowStartCertificateDate" data-verify="notempty" data-verify-errormessage="有效期(起)为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">有效期(止)</span> <input type="text" placeholder="请选择有效期(止)" readonly v-model="applyInfo.endCertificateDate" @click="fnShowEndCertificateDate" data-verify="notempty" data-verify-errormessage="有效期(止)为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">发证机关</span> <input type="text" placeholder="请填写发证机关" v-model="applyInfo.certificateOrg" data-verify="notempty" data-verify-errormessage="发证机关为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">现企业名称</span> <input type="text" placeholder="请填写现企业名称" readonly v-model="applyInfo.enterpriseName" data-verify="notempty" data-verify-errormessage="现企业名称为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">现企业电话</span> <input type="text" placeholder="请填写现企业电话" v-model="applyInfo.enterprisePhoneNumber" data-verify="notempty" data-verify-errormessage="现企业电话为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">现企业城市</span> <input type="text" placeholder="请选择现企业城市" readonly v-model="applyInfo.city" @click="fnShowCity" data-verify="notempty" data-verify-errormessage="现企业城市为必填项，请检查"> <div class="ipt-item-img"> <van-icon name="arrow" class="mr-1 align-middle"></van-icon> </div> </div> <div class="content-ipt-item cliout"> <span class="must">现企业地址</span> <input type="text" placeholder="请填写现企业地址" v-model="applyInfo.enterpriseAddress" data-verify="notempty" data-verify-errormessage="现企业地址为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">原企业名称</span> <input type="text" placeholder="请填写原企业名称" v-model="applyInfo.oldEnterpriseName" data-verify="notempty" data-verify-errormessage="原企业名称为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">原企业电话</span> <input type="text" placeholder="请填写原企业电话" v-model="applyInfo.oldEnterprisePhoneNumber" data-verify="notempty" data-verify-errormessage="原企业电话为必填项，请检查"> </div> <div class="content-ipt-item cliout"> <span class="must">原企业地址</span> <input type="text" placeholder="请填写原企业地址" v-model="applyInfo.oldEnterpriseAddress" data-verify="notempty" data-verify-errormessage="原企业地址为必填项，请检查"> </div> <div class="content-ipt-item cliout" style="height:80px;"> <span>备注</span> <textarea placeholder="请填写备注" v-model="applyInfo.remark" rows="3" :autosize={maxHeight:60}></textarea> </div> <van-row :gutter="16" style="padding-top:12px;"> <van-col span="24"> <van-checkbox style="float: left;" v-model="promise" checked-color="#1989fa" icon-size="16px" shape="square"> </van-checkbox> <span class="promise_text" @click="agreePromise"> 本企业郑重承诺，所提交的各种材料是真实、有效的。若有虚假，愿意接受建设主管部门及其他有关部门依据有关法律法规给予的处罚。 </span> </van-col> </van-row> <div class="content-ipt-item cliout" style="height:40px;">
</div> </div> </van-tab> <van-tab title="上传申请材料"> <div class="tabContent_content"> <div class="tabContent_content_title"> 1 现单位签订劳动合同证明<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/现单位签订劳动合同证明.jpg')" class="prev" type="info" size="small">查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('')" class="prev" type="info" size="small" disabled>下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_NewWorkContractImage" multiple="true" :before-read="beforeRead" :after-read="afterRead_NewWorkContractImage" /> </div> <!--<h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">现单位签订劳动合同证明</h2> <van-uploader v-model="fileList_NewWorkContractImage" multiple="true" :before-read="beforeRead" :after-read="afterRead_NewWorkContractImage" />--> </div> <div class="tabContent_content"> <div class="tabContent_content_title"> 2 安管人员手持个人身份证照片<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/上传安管人员手持个人身份证照片.jpg')" class="prev" type="info" size="small">查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('')" class="prev" type="info" size="small" disabled>下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_IDCardImage" multiple="true" :before-read="beforeRead" :after-read="afterRead_IDCardImage" /> </div> <!--<h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">安管人员手持个人身份证照片</h2> <van-uploader v-model="fileList_IDCardImage" multiple="true" :before-read="beforeRead" :after-read="afterRead_IDCardImage" />--> </div> <div class="tabContent_content"> <div class="tabContent_content_title"> 3 原单位解除劳动合同证明<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/原单位解除劳动合同证明.png')" class="prev" type="info" size="small">查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('')" class="prev" type="info" size="small" disabled>下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_CancelContractImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CancelContractImage" /> </div> <!-- <h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">原单位解除劳动合同证明</h2> <van-uploader v-model="fileList_CancelContractImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CancelContractImage" />--> </div> <div class="tabContent_content"> <div class="tabContent_content_title"> 4 建筑安管人员证书外省调入申请表<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" class="prev" type="info" size="small" disabled>查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="downLoadFile('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/建筑安管人员证书外省调入申请表.docx')" class="prev" type="info" size="small" >下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_CertificateImportApplyTableImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CertificateImportApplyTableImage" /> </div> <!--<h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">建筑安管人员证书外省调入申请表</h2> <van-uploader v-model="fileList_CertificateImportApplyTableImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CertificateImportApplyTableImage" />--> </div> <div class="tabContent_content"> <div class="tabContent_content_title"> 5 外省转出证明材料<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/外省转出证明材料.jpg')" class="prev" type="info" size="small">查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('')" class="prev" type="info" size="small" disabled>下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_ExportSourceImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_ExportSourceImage" /> </div> <!-- <h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">外省转出证明材料</h2> <van-uploader v-model="fileList_ExportSourceImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_ExportSourceImage" />--> </div> <div class="tabContent_content"> <div class="tabContent_content_title"> 6 安管人员考核合格证书<span style='color:red;'> ❉</span> </div> <div class="tabContent_content_button"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('http://www.eanguan.com:13999/FileTemplate/证书跨省调入/安管人员考核合格证书.jpg')" class="prev" type="info" size="small">查看模板</van-button> </van-col> <van-col span="9"> <van-button style="width:75%;margin: auto;" @click="showImage('')" class="prev" type="info" size="small" disabled>下载模板</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div>
<div class="tabContent_content_content"> <van-uploader v-model="fileList_CertificateImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CertificateImage" /> </div> <!-- <h2 class="van-doc-demo-block_title" style="margin-bottom:5px;">安管人员考核合格证书</h2> <van-uploader v-model="fileList_CertificateImage" :before-read="beforeRead" multiple="true" :after-read="afterRead_CertificateImage" />--> </div> </van-tab> </van-tabs>
</div> <div class="footer"> <van-row :gutter="16"> <van-col span="3"> </van-col> <van-col span="9"> <van-button style="width:90%;margin: auto;" @click="handleSubmit('2')" class="prev" type="primary" size="small" :disabled="btnSubmitDisabled">暂存</van-button> </van-col> <van-col span="9"> <van-button style="width:90%;margin: auto;" @click="handleSubmit('1')" class="prev" type="primary" size="small" :disabled="btnSubmitDisabled">提交</van-button> </van-col> <van-col span="3"> </van-col> </van-row> </div> </div> <!-- 引入 鄂汇办SDK 的 JS 文件 --> <script src="https://prod-pass4.ehbapp.hubei.gov.cn:30443/static/jssdk/jssdk.js"></script> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script> <script src="public/jquery/jquery-1.10.2.min.js"></script> <script src="public/layer/layer.js"></script> <script src="public/base/jsApp.js"></script> <script>
var vm = new Vue({ el: '#app', components: { }, data: { activeTab: 0, userInfo: { tyshxydm: '', entUnitCode: '', }, checkRadio: '', listData: [ ], fileList_NewWorkContractImage: [], fileList_IDCardImage: [], fileList_CancelContractImage: [], fileList_CertificateImportApplyTableImage: [], fileList_ExportSourceImage: [], fileList_CertificateImage: [], zdydata: {}, selectCertificate: {}, checkAllState: false, showOverlay_detail: false, promise: false, remark: "", itemCode: "1142000001104325X6200011700800007", btnSubmitDisabled: false, applyInfo: { "employeeName": "", "sex": "", "birthday": "", "idNumber": "", "job": "", "title4Technical": "", "certificateNo": "", "examType": "", "industry": "", "startCertificateDate": "", "endCertificateDate": "", "city": "", "remark": "", "certificateOrg": "", "enterpriseName": "", "enterpriseAddress": "", "enterprisePhoneNumber": "", "oldEnterpriseName": "", "oldEnterpriseAddress": "", "oldEnterprisePhoneNumber": "", "employeePhoneNumber": "", },
cityList: [ { "value": "武汉市", "text": "武汉市" }, { "value": "黄石市", "text": "黄石市" }, { "value": "十堰市", "text": "十堰市" }, { "value": "宜昌市", "text": "宜昌市" }, { "value": "襄阳市", "text": "襄阳市" }, { "value": "鄂州市", "text": "鄂州市" }, { "value": "荆门市", "text": "荆门市" }, { "value": "孝感市", "text": "孝感市" }, { "value": "荆州市", "text": "荆州市" }, { "value": "黄冈市", "text": "黄冈市" }, { "value": "咸宁市", "text": "咸宁市" }, { "value": "随州市", "text": "随州市" }, { "value": "恩施州", "text": "恩施州" }, { "value": "仙桃市", "text": "仙桃市" }, { "value": "潜江市", "text": "潜江市" }, { "value": "天门市", "text": "天门市" }, { "value": "神农架", "text": "神农架" }, { "value": "测试市", "text": "测试市" } ], industryList: [ { "value": "建筑施工", "text": "建筑施工" }, { "value": "化工", "text": "化工" }, { "value": "交通", "text": "交通" }, { "value": "铁路", "text": "铁路" } ], examTypeList: [ { "value": "A", "text": "A" }, { "value": "B", "text": "B" }, { "value": "C1", "text": "C1" }, { "value": "C2", "text": "C2" }, { "value": "C3", "text": "C3" } ], jobList: [ { "value": "法人", "text": "法人", "examType": "A" }, { "value": "总经理", "text": "总经理", "examType": "A" }, { "value": "经理", "text": "经理", "examType": "A" }, { "value": "技术负责人", "text": "技术负责人", "examType": "A" }, { "value": "安全副总", "text": "安全副总", "examType": "A" }, { "value": "/", "text": "/", "examType": "A" }, { "value": "项目经理", "text": "项目经理", "examType": "B" }, { "value": "建造师", "text": "建造师", "examType": "B" }, { "value": "/", "text": "/", "examType": "B" }, { "value": "安全员", "text": "安全员", "examType": "C1" }, { "value": "/", "text": "/", "examType": "C1" }, { "value": "安全员", "text": "安全员", "examType": "C2" }, { "value": "/", "text": "/", "examType": "C2" }, { "value": "安全员", "text": "安全员", "examType": "C2" }, { "value": "/", "text": "/", "examType": "C2" } ], selectJobList: [ { "value": "法人", "text": "法人", "examType": "A" }, { "value": "总经理", "text": "总经理", "examType": "A" }, { "value": "经理", "text": "经理", "examType": "A" }, { "value": "技术负责人", "text": "技术负责人", "examType": "A" }, { "value": "安全副总", "text": "安全副总", "examType": "A" }, { "value": "/", "text": "/", "examType": "A" }, { "value": "项目经理", "text": "项目经理", "examType": "B" }, { "value": "建造师", "text": "建造师", "examType": "B" }, { "value": "/", "text": "/", "examType": "B" }, { "value": "安全员", "text": "安全员", "examType": "C1" }, { "value": "/", "text": "/", "examType": "C1" }, { "value": "安全员", "text": "安全员", "examType": "C2" }, { "value": "/", "text": "/", "examType": "C2" }, { "value": "安全员", "text": "安全员", "examType": "C2" }, { "value": "/", "text": "/", "examType": "C2" } ], title4TechnicalList: [ { "value": "助理工程师(初级)", "text": "助理工程师(初级)" }, { "value": "工程师(中级)", "text": "工程师(中级)" }, { "value": "高级工程师(高级)", "text": "高级工程师(高级)" }, { "value": "教授级高级工程师(教授级)", "text": "教授级高级工程师(教授级)" }, { "value": "/", "text": "/" } ], }, created: function () { var _this = this; }, mounted: function () { this.handleGetUserInfo(); this.fnGetCityByUserInfo(); this.handleGetPrePageParam(); }, methods: { //根据统一信用代码获取所属城市 fnGetCityByUserInfo: function () { var _this = this; $.ajax({ //url: 'http://www.eanguan.com:10001/api/zwfwBaseApi/GetEnterpriseCity', url: 'https://www.eanguan.com/api/zwfwBaseApi/GetEnterpriseCity', type: "GET", async: false, data: { "enterpriseName": _this.userInfo.name }, datatype: "json", success: function (res) { postData = res; var data = res.data; console.log(res.data); if (!data || data == "") { data = _this.getNewCitySelectByentUnitCode(); } _this.applyInfo.city = data; }, error: function (res) { //response = res; console.log("执行获取还原数据接口异常"); //this.$toast("调用保存接口异常"); ehbAppJssdk.notice.toast({ text: "调用获取还原数据接口异常" }); console.log(res); } }) }, getNewCitySelectByentUnitCode: function () { var _this = this; var str_qhdm = _this.userInfo.entUnitCode.substr(2, 4); if (str_qhdm == "4201") { return "武汉市"; } else if (str_qhdm == "4202") { return "黄石市"; } else if (str_qhdm == "4203") { return "十堰市"; } else if (str_qhdm == "4205") { return "宜昌市"; } else if (str_qhdm == "4206") { return "襄阳市"; } else if (str_qhdm == "4207") { return "鄂州市"; } else if (str_qhdm == "4208") { return "荆门市"; } else if (str_qhdm == "4209") { return "孝感市"; } else if (str_qhdm == "4210") { return "荆州市"; } else if (str_qhdm == "4211") { return "黄冈市"; } else if (str_qhdm == "4212") { return "咸宁市"; } else if (str_qhdm == "4213") { return "随州市"; } else if (str_qhdm == "4228") { return "恩施州"; } else if (str_qhdm == "4290") { var str_qhdm_long = userinfo.entUnitCode.substr(2, 6); if (str_qhdm_long == "429004") { return "仙桃市"; } else if (str_qhdm_long == "429005") { return "潜江市"; } else if (str_qhdm_long == "429006") { return "天门市"; } else if (str_qhdm_long == "429021") { return "神农架"; }
} },
// 获取上一个页面传递过来的参数 handleGetPrePageParam: function () { var _this = this; ehbAppJssdk.operateWindow.getPrePageParams({ success: function (res) { console.log('上个页面传递的数据', res) if (res != "") { var cons = JSON.parse(res).cons || ""; if (typeof (cons.zdyFrom) == "undefined" || typeof (cons.zdyFrom) == "") { return; } //表单数据 var hsjson = JSON.parse(cons.zdyFrom); console.log('表单数据', hsjson); _this.backPostData(hsjson.ehbId, _this.itemCode); }
} }); }, //还原暂存数据 backPostData: function (applyId, itemCode) { var _this = this; var postData = _this.getBackPostData(applyId, itemCode); }, //获取还原数据 getBackPostData: function (applyId, itemCode) { var _this = this; var postData; ehbAppJssdk.network.request({ url: 'https://prod-gateway.ehbapp.hubei.gov.cn/4f7db74aabc448cca7e5fc8a13c360e8?applyId=' + applyId + '&itemCode=' + itemCode, method: 'get', async: false, //data: { // 'enterpriseName': '湖北台玉矿山工程有限公司' //}, headers: { //'contentType': 'application/json', 'X-hbzw-Api-Key': '4be71bbd-2078-4bbc-bf94-b4baee950064' }, success: function (res) { if (res.IsSuccess) { postData = res; _this.applyInfo = JSON.parse(postData.ApplyInfo.TableInfo); for (var i = 0; i < postData.ApplyInfo.imgFileList.length; i++) { var fileInfo = postData.ApplyInfo.imgFileList[i]; if (fileInfo.fileKey == "NewWorkContractImage") { var fInfo = { url: fileInfo.filePath + '&v=.jpg', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_NewWorkContractImage.push(fInfo); } if (fileInfo.fileKey == "IDCardImage") { var fInfo = { url: fileInfo.filePath + '&v=.png', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_IDCardImage.push(fInfo); } if (fileInfo.fileKey == "CancelContractImage") { var fInfo = { url: fileInfo.filePath + '&v=.png', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_CancelContractImage.push(fInfo); } if (fileInfo.fileKey == "CertificateImportApplyTableImage") { var fInfo = { url: fileInfo.filePath + '&v=.png', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_CertificateImportApplyTableImage.push(fInfo); } if (fileInfo.fileKey == "ExportSourceImage") { var fInfo = { url: fileInfo.filePath + '&v=.png', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_ExportSourceImage.push(fInfo); } if (fileInfo.fileKey == "CertificateImage") { var fInfo = { url: fileInfo.filePath + '&v=.png', filename: fileInfo.fileName, id: fileInfo.Id }; _this.fileList_CertificateImage.push(fInfo); } } } else { //ehbAppJssdk.notice.toast({ text: "调用接口失败" + res.ErrorMessage }); ehbAppJssdk.notice.alert({ title: '提示', message: "获取暂存数据失败，" + res.ErrorMessage, buttonName: '确认', success: function () { } }) } }, fail: function (res) { ehbAppJssdk.notice.alert({ title: '提示', message: "获取暂存数据异常，" + res.ErrorMessage, buttonName: '确认', success: function () { } }) } })
return postData;
}, handleDetail: function (item) { this.selectCertificate = item; this.showOverlay_detail = true; }, handleHideDetail: function () { this.showOverlay_detail = false; }, // 获取用户信息 handleGetUserInfo: function () { var _this = this; ehbAppJssdk.user.getUserInfo({ success: function (res) { //ehbAppJssdk.notice.toast({ text: "获取用户信息成功," + res.entUnitCode + "|" + res.name + "|" + res.agentMobile + "|" + res.agentName + "|" + res.agentPhone + "|" + res.entProperty + "|" + res.userType + "|" }); if (res.userType == "1") { ehbAppJssdk.notice.toast({ text: "登陆账号为自然人账号,无法使用此功能" }); return false; } console.log(res); _this.userInfo.entUnitCode = res.entUnitCode; _this.userInfo.name = res.name; _this.userInfo.agentMobile = res.agentMobile; _this.userInfo.agentName = res.agentName; _this.userInfo.agentPhone = res.agentPhone; _this.userInfo.entProperty = res.entProperty; _this.userInfo.userType = res.userType;
_this.applyInfo.enterpriseName = _this.userInfo.name; } })
//_this.userInfo.entUnitCode = "222222222222222222"; //_this.userInfo.name = "统一身份认证平台测试账号2"; //_this.userInfo.agentMobile = "13111111111"; //_this.userInfo.endAddr = "测试地址";
//_this.applyInfo.enterpriseName = _this.userInfo.name; //_this.applyInfo.enterpriseAddress = _this.userInfo.endAddr; },
// 执行提交 handleSubmit: function (operationType) { this.btnSubmitDisabled = true; //ehbAppJssdk.operateWindow.goBack(); console.log("执行提交|" + operationType);
//验证必填项 var verifyInput = verifyForm($("#divApplyInfo"));
if (!verifyInput) { this.btnSubmitDisabled = false; return false; }
//验证材料上传 verifyInput = this.verifyInput(); if (!verifyInput) { this.btnSubmitDisabled = false; return false; }
var newWorkContractImage = ""; var idCardImage = ""; var cancelContractImage = ""; var certificateImportApplyTableImage = ""; var exportSourceImage = ""; var certificateImage = ""; for (var i = 0; i < this.fileList_NewWorkContractImage.length; i++) { var id = this.fileList_NewWorkContractImage[i].id; newWorkContractImage = newWorkContractImage + id + "|"; } for (var i = 0; i < this.fileList_IDCardImage.length; i++) { var id = this.fileList_IDCardImage[i].id; idCardImage = idCardImage + id + "|"; } for (var i = 0; i < this.fileList_CancelContractImage.length; i++) { var id = this.fileList_CancelContractImage[i].id; cancelContractImage = cancelContractImage + id + "|"; } for (var i = 0; i < this.fileList_CertificateImportApplyTableImage.length; i++) { var id = this.fileList_CertificateImportApplyTableImage[i].id; certificateImportApplyTableImage = certificateImportApplyTableImage + id + "|"; } for (var i = 0; i < this.fileList_ExportSourceImage.length; i++) { var id = this.fileList_ExportSourceImage[i].id; exportSourceImage = exportSourceImage + id + "|"; } for (var i = 0; i < this.fileList_CertificateImage.length; i++) { var id = this.fileList_CertificateImage[i].id; certificateImage = certificateImage + id + "|"; }
var postData = {}; postData.TableInfo = JSON.stringify(this.applyInfo).toString(); postData.ItemCode = this.itemCode; postData.NewWorkContractImage = newWorkContractImage; postData.IDCardImage = idCardImage; postData.CancelContractImage = cancelContractImage; postData.CertificateImportApplyTableImage = certificateImportApplyTableImage; postData.ExportSourceImage = exportSourceImage; postData.CertificateImage = certificateImage; postData.OperationStatus = operationType; postData.CreateBy = this.userInfo.name; postData.CreateByType = this.userInfo.userType;
//alert(JSON.stringify(postData)); console.log(postData);
//调用保存接口 var response = this.sendPostData(postData, operationType);
////不能同步调用 //console.log("执行提交|成功"); //console.log(response); //if (response.IsSuccess) { // var sendZdyData = { materialList: [], ehbId: response.ApplyId };
// ehbAppJssdk.notice.alert({ // title: '提示', // message: "调用保存接口成功|" + response.ApplyId + "|" + JSON.stringify(sendZdyData) + "|" + operationType, // buttonName: '确认', // success: function () { // } // }) // //提交到鄂汇办 // ehbAppJssdk.network.submitInsertForm(sendZdyData, operationType); //} else { // //调用保存接口失败 // ehbAppJssdk.notice.toast({ text: "调用保存接口失败" + res.ErrorMessage }); // console.log(res); //} }, //提交数据 sendPostData(postData, operationType) { var response; //$.ajax({ // url: 'http://www.eanguan.com:13999/Api/EHBBaseAPI/SaveDataByEHB', // //url: 'http://vipcmcc.oicp.net:16339/Api/EHBBaseAPI/SaveDataByEHB', // type: "POST", // async: false, // data: postData, // datatype: "json", // success: function (res) { // response = res;
// }, // error: function (res) { // //response = res; // console.log("执行提交|接口异常"); // //this.$toast("调用保存接口异常"); // ehbAppJssdk.notice.toast({ text: "调用保存接口异常" }); // console.log(res); // } //})
ehbAppJssdk.network.request({ //湖北台玉矿山工程有限公司 //url: 'http://www.eanguan.com:10001/Api/GetCertificateInfo/GetCertificateInfoByEHB?enterpriseName=' + _this.userInfo.name, url: 'https://prod-gateway.ehbapp.hubei.gov.cn/7da7522ec2374ef592b4cf2227a08013', method: 'POST', async: false, data: { 'postdata': JSON.stringify(postData) }, headers: { 'contentType': 'application/json', 'X-hbzw-Api-Key': 'a5166e74-c332-4876-9134-151f7a2e2450' }, success: function (res) { console.log("执行提交|成功"); console.log(res); if (res.IsSuccess) { response = res;
var sendZdyData = { materialList: [], ehbId: res.ApplyId }; //提交到鄂汇办 ehbAppJssdk.network.submitInsertForm(sendZdyData, operationType);
} else { //ehbAppJssdk.notice.toast({ text: "调用接口失败" + res.ErrorMessage }); ehbAppJssdk.notice.alert({ title: '提示', message: "提交表单信息失败，" + res.ErrorMessage, buttonName: '确认', success: function () { } }) } }, fail: function (res) { ehbAppJssdk.notice.alert({ title: '提示', message: "提交表单信息异常，" + res.ErrorMessage, buttonName: '确认', success: function () { } }) } })
return response; },
//验证必填输入 verifyInput() { //if (this.applyInfo.certificateNo == '') { // this.$toast('请填写证书编号'); // return false; //} //if (this.applyInfo.employeeName == '') { // this.$toast('请填写姓名'); // return false; //} //if (this.applyInfo.idNumber == '') { // this.$toast('请填写身份证号'); // return false; //} else {
//} //if (this.applyInfo.employeePhoneNumber == '') { // this.$toast('请填写持证人手机号码'); // return false; //} else { // //验证手机号码 // var _regPhoneNumber = /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
// if (!_regPhoneNumber.test(this.applyInfo.employeePhoneNumber)) { // this.$toast('请填写正确的持证人手机号码'); // return false; // } //} //if (this.applyInfo.industry == '') { // this.$toast('请选择行业'); // return false; //} //if (this.applyInfo.examType == '') { // this.$toast('请选择证书类型'); // return false; //} //if (this.applyInfo.job == '') { // this.$toast('请选择职务'); // return false; //} //if (this.applyInfo.title4Technical == '') { // this.$toast('请选择职称'); // return false; //} //if (this.applyInfo.startCertificateDate == '') { // this.$toast('请选择有效期(起)'); // return false; //} //if (this.applyInfo.endCertificateDate == '') { // this.$toast('请选择有效期(止)'); // return false; //} //if (this.applyInfo.certificateOrg == '') { // this.$toast('请填写发证机关'); // return false; //} //if (this.applyInfo.enterpriseName == '') { // this.$toast('请填写现企业名称'); // return false; //} //if (this.applyInfo.enterprisePhoneNumber == '') { // this.$toast('请填写现企业电话'); // return false; //} //if (this.applyInfo.city == '') { // this.$toast('请填写现企业城市'); // return false; //} //if (this.applyInfo.enterpriseAddress == '') { // this.$toast('请填写现企业地址'); // return false; //} //if (this.applyInfo.oldEnterpriseName == '') { // this.$toast('请填写原企业名称'); // return false; //} //if (this.applyInfo.oldEnterprisePhoneNumber == '') { // this.$toast('请填写原企业电话'); // return false; //} //if (this.applyInfo.oldEnterpriseAddress == '') { // this.$toast('请填写原企业地址'); // return false; //}
if (this.applyInfo.idNumber == '') { this.$toast('请填写身份证号'); return false; } else { var idnumberStr = this.applyInfo.idNumber; var sexNumber = idnumberStr.substring(16, 17); if (sexNumber % 2 == 0) { this.applyInfo.sex = "女"; } else { this.applyInfo.sex = "男"; } var year = idnumberStr.substring(6, 10); var month = idnumberStr.substring(10, 12); var day = idnumberStr.substring(12, 14); this.applyInfo.birthday = year + "-" + month + "-" + day; }
if (this.promise != true) { this.$toast('请勾选同意承诺'); return false; } if (this.fileList_NewWorkContractImage.length < 1) { this.$toast('请上传现单位签订劳动合同证明照片'); return false; } if (this.fileList_IDCardImage.length < 1) { this.$toast('请上传安管人员手持个人身份证照片'); return false; } if (this.fileList_CancelContractImage.length < 1) { this.$toast('请上传原单位解除劳动合同证明'); return false; } if (this.fileList_CertificateImportApplyTableImage.length < 1) { this.$toast('请上传建筑安管人员证书外省调入申请表'); return false; } if (this.fileList_ExportSourceImage.length < 1) { this.$toast('请上传外省转出证明材料'); return false; } if (this.fileList_CertificateImage.length < 1) { this.$toast('请上传安管人员考核合格证书'); return false; } return true; }, afterRead(file) { // 此时可以自行将文件上传至服务器 console.log(file);
}, beforeRead(file) { if (!Array.isArray(file)) { if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png') { this.$toast('请上传 jpg/png 格式图片'); //ehbAppJssdk.notice.toast({ text: "请上传 jpg/png 格式图片" }); return false; } if (file.size > 1024 * 1024 * 10) { this.$toast('图片大小超过10M,请压缩图片大小'); //ehbAppJssdk.notice.toast({ text: "图片大小超过10M,请压缩图片大小" }); return false; } } else { for (var i = 0; i < file.length; i++) { if (file[i].type !== 'image/jpeg' && file[i].type !== 'image/jpg' && file[i].type !== 'image/png') { this.$toast('请上传 jpg/png 格式图片'); //ehbAppJssdk.notice.toast({ text: "请上传 jpg/png 格式图片" }); return false; } if (file[i].size > 1024 * 1024 * 10) { this.$toast('图片大小超过10M,请压缩图片大小'); //ehbAppJssdk.notice.toast({ text: "图片大小超过10M,请压缩图片大小" }); return false; } } } return true; }, afterRead_Common(fileInfo, fileType) { if (!Array.isArray(fileInfo)) { var fileResponse = this.saveImage(fileInfo.file); console.log(fileResponse); fileInfo.filepath = fileResponse.ImageInfoList[0].FilePath; fileInfo.filename = fileResponse.ImageInfoList[0].FileName; fileInfo.fileid = fileResponse.ImageInfoList[0].FileId; fileInfo.id = fileResponse.ImageInfoList[0].Id; fileInfo.filetype = fileType; } else { for (var i = 0; i < fileInfo.length; i++) { var fileResponse = this.saveImage(fileInfo[i].file); fileInfo[i].filepath = fileResponse.ImageInfoList[0].FilePath; fileInfo[i].filename = fileResponse.ImageInfoList[0].FileName; fileInfo[i].fileid = fileResponse.ImageInfoList[0].FileId; fileInfo[i].id = fileResponse.ImageInfoList[0].Id; fileInfo[i].filetype = fileType;
} } }, afterRead_NewWorkContractImage(fileInfo) { //此时可以自行将文件上传至服务器 this.afterRead_Common(fileInfo, "新单位劳动合同"); }, afterRead_IDCardImage(fileInfo) { this.afterRead_Common(fileInfo, "安管人员手持个人身份证照片"); }, afterRead_CancelContractImage(fileInfo) { this.afterRead_Common(fileInfo, "原单位解除劳动合同证明"); }, afterRead_CertificateImportApplyTableImage(fileInfo) { this.afterRead_Common(fileInfo, "建筑安管人员证书外省调入申请表"); }, afterRead_ExportSourceImage(fileInfo) { this.afterRead_Common(fileInfo, "外省转出证明材料"); }, afterRead_CertificateImage(fileInfo) { this.afterRead_Common(fileInfo, "安管人员考核合格证书"); }, agreePromise() { this.promise = !this.promise; }, saveImage(file) { var _this = this; console.log("调用上传接口"); var formData = new FormData(); formData.append("file", file) var response = {}; //ehbAppJssdk.network.request({ // url: 'https://prod-gateway.ehbapp.hubei.gov.cn/20866b8ebcfc4aa4be89072e0b166d67?api-key=77b1ccdd-9621-42e5-8746-51476965c1ad', // method: 'post', // data: formData, // processData: false, // 告诉jquery不要处理发送的数据 // contentType: false, // 告诉jquery不要设置content-Type请求头 // headers: { // //'contentType': 'application/json', // 'contentType':'multipart/form-data', // 'X-hbzw-Api-Key': '77b1ccdd-9621-42e5-8746-51476965c1ad' // }, // success: function (res) { // console.log("调用上传接口成功"); // console.log(res); // response = res;
// }, // fail: function (res) { // console.log("调用上传接口失败"); // console.log(res); // ehbAppJssdk.notice.toast({ text: "调用接口失败" + res.ErrorMessage }); // response = res;
// } //}); //鄂汇办提供的接口不能成功调用，被迫使用ajax调用 $.ajax({ url: 'https://www.eanguan.com:13996/Api/EHBBaseAPI/SaveImageByEHB', type: "POST", async: false, data: formData, processData: false, // 告诉jquery不要处理发送的数据 contentType: false, // 告诉jquery不要设置content-Type请求头 success: function (res) { console.log("调用上传接口成功"); console.log(res); if (res.IsSuccess) { response = res; } else { //response = res; console.log(res); } }, error: function (res) { //response = res; console.log("调用上传接口失败"); console.log(res); } })
return response; },
fnShowIndustry: function () { var _this = this; ehbAppJssdk.notice.linkagePicker({ title: '选择行业', data: this.industryList, type: 'clickSelect', length: '2', success: function (res) { console.log(res); var resObj = JSON.parse(res); console.log(resObj); console.log(resObj["1"].text); _this.applyInfo.industry = resObj["1"].text; } }) }, fnShowExamType: function () { var _this = this; ehbAppJssdk.notice.linkagePicker({ title: '选择证书类型', data: this.examTypeList, type: 'clickSelect', length: '2', success: function (res) { var res = JSON.parse(res); _this.applyInfo.examType = res["1"].text;
_this.selectJobList = [];
for (var i = 0; i < _this.jobList.length; i++) { if (_this.jobList[i].examType == res["1"].text) { _this.selectJobList.push(_this.jobList[i]); } } _this.applyInfo.job = ""; } }) }, fnShowJob: function () { var _this = this; ehbAppJssdk.notice.linkagePicker({ title: '选择职务', data: this.selectJobList, type: 'clickSelect', length: '2', success: function (res) { var res = JSON.parse(res); _this.applyInfo.job = res["1"].text; } }) }, fnShowTitle4Technical: function () { var _this = this; ehbAppJssdk.notice.linkagePicker({ title: '选择职称', data: this.title4TechnicalList, type: 'clickSelect', length: '2', success: function (res) { var res = JSON.parse(res); _this.applyInfo.title4Technical = res["1"].text; } }) }, fnShowStartCertificateDate: function () { var _this = this; var dateNow = new Date(); var dateStr = dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + dateNow.getDate(); ehbAppJssdk.notice.datePicker({ title: '选择有效期(起)', columnsType: '3', minDate: '2013-01-01', //maxDate: dateStr, maxDate: '2099-12-31', success: function (res) { var deathData = JSON.parse(res) var dateStr = deathData.year + '-' + deathData.month + '-' + deathData.day _this.applyInfo.startCertificateDate = dateStr; } }) }, fnShowEndCertificateDate: function () { var _this = this; var dateNow = new Date(); var dateStr = dateNow.getFullYear() + "-" + (dateNow.getMonth() + 1) + "-" + dateNow.getDate(); ehbAppJssdk.notice.datePicker({ title: '选择有效期(止)', columnsType: '3', //minDate: dateStr, minDate: '2013-01-01', maxDate: '2099-12-31', success: function (res) { var deathData = JSON.parse(res) var dateStr = deathData.year + '-' + deathData.month + '-' + deathData.day _this.applyInfo.endCertificateDate = dateStr; } }) }, fnShowCity: function () { if (this.applyInfo.city) { return false; } var _this = this; ehbAppJssdk.notice.linkagePicker({ title: '选择城市', data: this.cityList, type: 'clickSelect', length: '2', success: function (res) { var res = JSON.parse(res); _this.applyInfo.city = res["1"].text; } }) }, showImage: function (fileUrl) { var fileInfo = { data: [{ src: fileUrl }] } layer.photos({ photos: fileInfo //格式见API文档手册页 , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机 }); //$("#showFileModel").click(); }, downLoadFile: function (fileUrl) { ehbAppJssdk.network.downloadFile({ url: fileUrl, folderName: 'test', fileName: '建筑安管人员证书外省调入申请表.docx', }) }, }, computed: {} })
//触发返回和取消按键 //返回按钮 ehbAppJssdk.registerJsMethod.jsMethod({ method: 'clickBack', success: function (res) { //关闭当前页 ehbAppJssdk.notice.confirm({ title: '提示', message: '是否确认返回，返回将不保存本次操作数据', buttonLabels: ['取消', '确定'], success: function (res) { ehbAppJssdk.operateWindow.close(); } }); } }) //关闭按钮 ehbAppJssdk.registerJsMethod.jsMethod({ method: 'clickClose', success: function (res) { ehbAppJssdk.notice.confirm({ title: '提示', message: '是否确认退出，退出将不保存本次操作数据', buttonLabels: ['取消', '确定'], success: function (res) { ehbAppJssdk.operateWindow.close(); } }); } })
</script></body>
</html>
