vant ui 文檔地址

本文轉載自查看原文 2021-06-21 10:16 152 vantui

https://youzan.github.io/vant/#/zh-CN/home

<!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">  <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>  </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>  </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>  </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>  </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>  </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>  </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>  <script src="https://prod-pass4.ehbapp.hubei.gov.cn:30443/static/jssdk/jssdk.js"></script>  <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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vant ui 官網地址 Vant ui mint-ui 的地址選擇外部套了vant ui的彈出popup vant ui TabBar封裝 Vant UI 安裝 vant 官網文檔 vant-ui vant-ui rem問題 vant ui rem配置流程 vue同時安裝element ui跟 vant