Commit 353f4445 by Sweet Zhang

职业查询

parent b31d4b63
This source diff could not be displayed because it is too large. You can view the blob instead.
*{margin:0;padding:0;}
.wrapper{
width:100%;
height:100%;
}
.title img{
margin-bottom: 5%;
}
.title .col-md-8 span{
display: block;
margin-bottom: 2%;
}
.title2 {
background-color: #ec2d37;
color: #fff;
height: 30px;
line-height: 30px;
padding-left: 5%;
margin-bottom: 5%;
}
.content{
padding:0 5%;
}
.category select,.search input{
margin-bottom: 5%;
}
.searchBtn{
width: 100%;
background: url("../images/search.png") no-repeat center;
background-size: contain;
height:70px;
}
.total{
width: 100%;
padding: 2% 4%;
}
#table{
width: 100%;
height:auto;
border-collapse: collapse;
border:1px #dcdcdc solid;
}
#table thead{
background-color: #ec2d37;
color:#fff;
}
#table thead th,#table tbody td{
text-align: center;
}
.table-responsive{
border:none;
}
\ No newline at end of file
*{padding: 0;margin: 0;color:#333;font-family: '微软雅黑'}
.wrapper{
width: 80%;
min-height: 400px;
margin: 0 auto;
position: relative;
}
.title{
width:100%;
margin:30px auto;
font-weight: 400;
position: relative;
}
.title img{
position: absolute;
left:0;
}
.condition{
width:100%;
margin-left:0;
}
.title2 {
background-color: #ec2d37;
color:#fff;
padding-left: 30px;
height: 30px;
line-height: 30px;
}
.content{
border:1px #ddd solid;
/* background-color: #EDEDED; */
padding: 20px 30px;
position: relative;
}
.category{
margin-bottom: 20px;
}
.category select{
width:220px;
height:40px;
line-height: 30px;
margin-right: 50px;
padding-left:5px;
/* -webkit-appearance: none;
-moz-appearance: none;
appearance: none; */
/* border:none;
border-bottom: 1px #ccc solid; */
/*清除select聚焦时候的边框颜色*/
outline: none;
/* cursor: pointer;
padding-right: 14px; */
border: 1px solid #cecccc;
/* -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; */
box-shadow: inset 0 0 3px #adacac;
margin-bottom: 10px;
}
.category select.disabled{
border-color:#dbd8d8;
color:#b8b7b7;
box-shadow: inset 0 0 3px #dbdada;
}
.form-control{
display: inline;
}
option::-ms-expand{ display: none; }
.category select option{
height:30px;
line-height:30px;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
appearance:none;
outline: none;
}
.search{
height: 30px;
margin-bottom: 10px;
}
.search input{
width:214px;
height:35px;
line-height: 35px;
margin-right: 60px;
padding-left: 5px;
float: left;
}
.search .reset{
float: left;
height: 29px;
line-height: 29px;
cursor: pointer;
}
.searchBtn{
width: 200px;
height:100px;
line-height:80px;
/* border-radius: 50%; */
position: absolute;
right:10%;
top:16%;
background: url("../images/search.png") no-repeat center;
background-size: contain;
cursor: pointer;
/* border:2px #a32e34 solid;
text-align: center;
background-color: #ec2d37;
color:#fff;
font-weight: bold; */
}
.total{
margin: 15px 0;
padding-left: 30px;
}
#table{
width: 100%;
height:auto;
border-collapse: collapse;
border:1px #dcdcdc solid;
}
#table thead{
background-color: #ec2d37;
color:#fff;
}
#table thead th{
height:25px;
line-height:25px;
color: #fff;
text-align: center;
}
#table tbody{
text-align: center;
}
#table tbody td:nth-child(1){
width: 10%;
}
#table tbody td:nth-child(2){
width: 30%;
}
#table tbody td:nth-child(3){
width: 35%;
}
#table tbody td:nth-child(4){
width: 10%;
}
#table tbody td:nth-child(5){
width: 15%;
}
.table > tbody > tr > td,.table > thead > tr > th{
border:1px #ddd solid;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>职业类别查询</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="./css/style.css"> -->
</head>
<body>
<div class="container">
<div class="wrapper">
<h1 class="row title">
<div class="col-md-4"> <img src="images/ydinsurance_logo.jpg" /></div>
<div class="col-md-8"> <span> 职业类别查询</span> </div>
</h1>
<div class="condition row">
<div class='title2'>查询条件</div>
<div class="content">
<div class="category">
<select class="form-control" id="chose" value="null">
</select>
<select class="form-control" id="choseTwo" class="disabled" disabled>
</select>
</div>
<div class="search">
<input type="text" class="form-control" placeholder="请输入职业名称"/>
<div class="reset">重置</div>
</div>
<div class="searchBtn"></div>
</div>
<div class="total">查询结果:共<span>0</span></div>
</div>
<div class="table-responsive">
<table id='table' border="1" cellspacing="0" style="display: none;" class="table text-nowrap">
<thead>
<tr>
<th>行业</th>
<th>职业类别</th>
<th>职业名称</th>
<th>职业代码</th>
<th>职业分类</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="noResult" style="display: none;text-align: center">无搜索结果</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/base.js"></script>
</body>
</html>
\ No newline at end of file
$(function(){
var api = 'https://mdev.zuihuibi.cn/api';
//初始化参?
var param = {"insurerId":2,"accurateOccupationFlag":1,"industryId":null,"occupationTypeId":null,"occupationName":null}
var optionListOrigin = "<option value='null' disabled selected hidden>请选择行业</option>"
var optionListOriginTwo = "<option value='null' disabled selected hidden>请选择职业类别</option>"
var industryList = '';
var occupationTypesList = ''
//初始化职业类别为请选择
$("#choseTwo").html(optionListOriginTwo)
getData();
function getData(){
$.ajax({
type:"POST",
url:api+'/metadata/occupationQry',
contentType: "application/json",
data:JSON.stringify(param),
success:function(res){
if(res.success){
var industryData = res.data.industry;
for(var i=0;i<industryData.length;i++){
industryList += "<option value="+industryData[i].industryId+">"+industryData[i].industryName+"</option>"
}
$("#chose").html(optionListOrigin+industryList)
}
}
})
}
$("#chose").change(function(){
$("#chose").attr("value",this.value)
//给行业赋?
param.industryId= this.value;
param.occupationTypeId=null;
param.occupationName=null;
if($("#chose").val()!= 'null'){
var num = this.value-1;
if(this.value !=null){
$("#choseTwo").removeAttr("disabled");
$("#choseTwo").removeClass("disabled");
$.ajax({
type:"POST",
url:api+'/metadata/occupationQry',
contentType: "application/json",
data:JSON.stringify(param),
success:function(res){
if(res.success){
if(res.data.industry.length>0){
var getoccupationTypesData = res.data.industry[0].occupationTypes;
occupationTypesList='';
for(var i=0;i<getoccupationTypesData.length;i++){
occupationTypesList += "<option value="+getoccupationTypesData[i].occupationTypeId+">"+getoccupationTypesData[i].occupationTypeName+"</option>"
}
$("#choseTwo").html(optionListOriginTwo+occupationTypesList)
}else{
$("#choseTwo").html(optionListOriginTwo)
}
}
}
})
}
}else{
param.occupationTypeId=null;
$("#choseTwo").html(optionListOriginTwo)
$("#choseTwo").attr("disabled","disabled");
}
})
//给职业类别赋?
$("#choseTwo").change(function(){
$("#choseTwo").attr("value",this.value)
param.occupationTypeId= this.value;
})
$(".searchBtn").click(function(){
var contentList = ''
if($(".search input").val()){
param.occupationName = $(".search input").val()
}else{
param.occupationName=null;
}
$.ajax({
type:"POST",
url:api+'/metadata/occupationQry',
contentType: "application/json",
data:JSON.stringify(param),
success:function(res){
if(res.success){
$("#table").show();
$(".noResult").hide();
if($("#chose").val()!=null){
if(res.data.industry.length>0){
var industryName = res.data.industry[0].industryName;
var occupationTypesData = res.data.industry[0].occupationTypes;
for(var i=0;i<occupationTypesData.length;i++){
for(var j=0;j<occupationTypesData[i].occupations.length;j++){
contentList +="<tr><td>"
+industryName+"</td><td>"
+occupationTypesData[i].occupationTypeName+"</td><td>"
+occupationTypesData[i].occupations[j].occupationName+"</td><td>"
+occupationTypesData[i].occupations[j].occupationCode+"</td><td>"
+occupationTypesData[i].occupations[j].occupationClass+"</td></tr>"
}
}
}else{
$("#table").hide();
$(".noResult").show();
}
}else{
var allData = res.data.industry
for(var i=0;i<allData.length;i++){
for(var j=0;j<allData[i].occupationTypes.length;j++){
for(var k=0;k<allData[i].occupationTypes[j].occupations.length;k++){
contentList +="<tr><td>"
+allData[i].industryName+"</td><td>"
+allData[i].occupationTypes[j].occupationTypeName+"</td><td>"
+allData[i].occupationTypes[j].occupations[k].occupationName+"</td><td>"
+allData[i].occupationTypes[j].occupations[k].occupationCode+"</td><td>"
+allData[i].occupationTypes[j].occupations[k].occupationClass+"</td></tr>"
}
}
}
}
$("#table tbody").html(contentList)
$('.total span').html(res.data.industryNum)
}else{
$("#table").hide();
$(".noResult").show();
}
}
})
})
$(".reset").click(function(){
param.industryId=null;
param.occupationTypeId=null;
param.occupationName=null;
$(".search input").val('')
$("#chose").html(optionListOrigin)
$("#choseTwo").html(optionListOriginTwo)
$("#choseTwo").attr("disabled","disabled");
$("#choseTwo").addClass("disabled");
getData();
})
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
loadStyle('./css/mstyle.css')
} else {
loadStyle('./css/style.css');
}
function loadStyle(url){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment