302 lines
6.4 KiB
Vue

<template>
<view class="queryStaff">
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
人员查询
</view>
<view class="right" @click="scanQRcodeBtn()">
<image class="scancode" src="@/static/bthgIcon/scancode.png" mode=""></image>
</view>
</headers>
</view>
<view class="content" :style="{ 'padding-top': ((statusBarHeight * 1.5) + 55) * 2 + 'rpx' }">
<view class="flex input_Wrap">
<input placeholder="请输入人员姓名/身份证" @input="changeSeek" @focus="showValue=true" @blur="blur"
class="input_c" placeholder-style="font-size:28rpx" :value="inputVal" />
<text class="seekBtn" @click="changeSeek({detail:{value:inputVal}})">搜索</text>
</view>
<view class="results_wrap">
<view class="value" v-if="listData.length>0" v-for="(item,index) in listData" :key="index"
@click="showDetailsBtn(item.id)">
<!-- <text v-if="item.personType==1">{{item.workerName+'-'+item.teamName+'-'}}<text class="font_weight">{{item.idCard}}</text></text>
<text v-else>{{item.workerName+'-'+item.departmentName+'-'}}<text class="font_weight">{{item.idCard}}</text></text> -->
<view v-if="item.personType==1">
<text>{{item.workerName+'-'+(item.teamName?item.teamName+'-':'')}}</text>
<text class="font_weight">{{item.idCard}}</text>
</view>
<view v-else-if="item.personType==3">
<text>{{item.workerName+'-'+'临时人员-'}}</text>
<text class="font_weight">{{item.idCard}}</text>
</view>
<view v-else>
<text>{{item.workerName+'-'+(item.departmentName?item.departmentName +'-':'')}}</text>
<text class="font_weight">{{item.idCard}}</text>
</view>
<!-- <uni-icons2 class="arrowright" type="arrowright"></uni-icons2> -->
</view>
<!-- <view v-if="listData.length==0" class="noData">暂无数据</view> -->
<view class="no_data1" v-if="listData.length==0">
<image src="/static/bthgIcon/noData1.png"></image>
</view>
</view>
<!-- <view class="margin_top" v-else-if="COMPANY != 'nanchang'">
<view class="placeholder flex2">
<view class="striping"></view>
<view style="margin:0 20rpx;">其他搜索方式</view>
<view class="striping"></view>
</view>
<view class="func_wrap flex2">
<view class="item" @click="scanQRcodeBtn">
<image src="../../../static/scan.png" class="icon"></image>
<view>扫码</view>
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue"
export default {
data() {
return {
inputVal: "",
showValue: false,
projectSn: '',
listData: [],
statusBarHeight: 0
}
},
onLoad() {
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
},
methods: {
//输入内容时
changeSeek(val) {
let that = this;
this.inputVal = val.detail.value;
if (val.detail.value == "") {
this.listData = [];
this.showValue = true;
return
}
this.sendRequest({
url: 'xmgl/workerInfo/selectAppWorkerList',
method: "post",
data: {
projectSn: that.projectSn,
searchCondition: val.detail.value
},
success: res => {
this.listData = res.result;
this.listData.map(item => {
let str = "***************"
item.idCard = item.idCard.substring(0, 3) + str + item.idCard.substring(16)
})
}
})
},
//扫码按钮
scanQRcodeBtn() {
let that = this;
// 只允许通过相机扫码
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
// that.showDetailsBtn(res.result)
uni.navigateTo({
url: `${res.result}`
})
},
fail: function(error) {}
});
},
//输入框失去焦点时
blur() {
if (this.inputVal == '') {
this.showValue = false;
}
},
showDetailsBtn(id) {
uni.navigateTo({
url: './searchTeam/personDetail?id=' + id
})
},
}
}
</script>
<style scoped lang="scss">
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
:deep( .right ){
font-size: 24rpx;
position: absolute;
right: 20rpx;
top: 50%;
z-index: 4;
transform: translateY(-50%);
.scancode {
width: 44rpx;
height: 44rpx;
}
}
}
.flex {
display: flex;
align-items: center;
}
.flex2 {
display: flex;
align-items: center;
justify-content: center;
}
.flex3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.queryStaff {
width: 100%;
box-sizing: border-box;
}
.queryStaff .content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 110rpx 30rpx 0;
}
.input_Wrap {
// width: 80%;
width: 100%;
/* margin: 0 auto; */
border: 1px solid #d8d8e5;
box-sizing: border-box;
padding: 0;
border-radius: 40rpx;
}
.input_Wrap .input_c {
// width: calc(100% - 116rpx);
width: 100%;
height: 64rpx;
padding: 0 20rpx;
box-sizing: border-box;
font-size: 28rpx;
}
.input_Wrap .seekBtn {
padding: 6.10rpx 30rpx;
width: 116rpx;
height: 64rpx;
line-height: 48rpx;
box-sizing: border-box;
background-color: rgba(65, 129, 254, 0.9);
color: #fff;
font-size: 28rpx;
/* border-radius: 4rpx; */
border-radius: 40rpx;
position: absolute;
right: 30rpx;
}
.seekBtn:active {
background-color: #4181FE;
}
.placeholder {
text-align: center;
margin: 0 auto;
width: 80%;
font-size: 30rpx;
color: rgba(38, 45, 71, 0.8);
}
.striping {
background-color: rgba(38, 45, 71, 0.6);
height: 1px;
width: 120rpx;
}
.func_wrap .item {
text-align: center;
margin: 36rpx 0;
font-size: 28rpx;
color: rgba(38, 45, 71, 0.8);
line-height: 30rpx;
}
.icon {
width: 78rpx;
height: 39px;
}
.results_wrap .value {
/* text-align: center; */
font-size: 28rpx;
line-height: 70rpx;
margin: 10rpx 0;
border-bottom: 1px dashed #babcc5;
>view {
width: 100%;
// display: flex;
// align-items: center;
// text:nth-child(1){
// display: block;
// }
}
}
.arrowright {
color: #999 !important;
}
.margin_top {
margin-top: 100px;
}
.font_weight {
font-weight: 700;
}
.no_data1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: rgba(0, 0, 0, 0.5);
font-size: 28rpx;
uni-image {
width: 612rpx;
height: 522rpx;
display: block;
margin: 0 auto;
}
}
</style>