flying-monkey/pagesA/peopleManagement/peopleManagement.vue

347 lines
10 KiB
Vue

<template>
<view>
<statusNav returnColor="#c2c2c2" navBarTitle="人员状态"></statusNav>
<container-subgroup-two>
<view slot="content" style="margin: -30rpx;">
<view class="peopleManagement-input">
<input type="text" class="int" @confirm="callEv()" v-model="keyword" placeholder="请输入关键字" placeholder-style="color:#999999;" />
<image class="search" @tap="callEv()" src="../../static/iocn/ss.png" mode=""></image>
<view class="xian"></view>
</view>
<view class="peopleManagement-content pad-x50">
<view class="li" v-for="(item,index) in dataList" :key="index">
<view class="head">
<view class="name">
<view class="" v-if="order_id" @click="listStateFun(item)">
<!-- 选中 -->
<view class="icon" v-if="!item.state"></view>
<!-- 未选中 -->
<image class="iconImg" v-else src="../../static/iocn/pxz.png" mode=""></image>
</view>
<view class="">
{{item.name}}<text :class="item.isJob ? 'cor' : 'cor1'">({{item.isJob ? '正在作业' : '空闲中'}})</text>
</view>
</view>
<view class="state">{{['未审核','已审核'][item.is_check]}}</view>
</view>
<view class="con">
<image class="img" :src="item.avatar" mode="aspectFill"></image>
<view class="text scal09">
<view class="code">
<view class="">编号: {{item.number}}</view>
<view class="iconCon">
<view v-for="(item1,index1) in 5" :key="index1">
<image class="icon" v-if="index1 < item.rate" src="../../static/iocn/6.png" mode="aspectFill" ></image>
<image class="icon" v-else src="../../static/iocn/7.png" mode="aspectFill" ></image>
</view>
</view>
</view>
<view class="p">
<view class="one">待处理:{{item.num}}单 </view>
<view class="">已处理:{{item.allnum}}单 </view>
</view>
<view class="address">当前定位:{{item.address}}</view>
</view>
</view>
<view class="bottom">
<view class="bottom-content">
联系电话: <text class="cor3" v-if="item.phone">{{$toolAll.tools.hideMPhone(item.phone,'x')}}</text>
</view>
<view class="bottom-content">
注册时间: <text class="cor3">{{item.time}}</text>
</view>
</view>
</view>
</view>
<pitera v-if="total == dataList.length && dataList.length" textStr="暂无更多人员列表"></pitera>
<nothing-page v-if="!dataList.length" content="暂无人员状态数据"></nothing-page>
<button class="submit-button" type="default" @click="sellEv" :style="{display: tianxuan ? 'flex' : 'none'}"></button>
</view>
</container-subgroup-two>
</view>
</template>
<script>
import statusNav from '../../components/status-nav.vue';
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import pitera from '@/components/nothing/pitera.vue';
export default {
components: {
statusNav,
containerSubgroupTwo,
pitera
},
data() {
return {
dataList: [
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:5,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:3,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
// {id:'1',name: "陈志远",state: false,isJob: false,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',number:'YG20211207-001',rate:2,num:2,allnum:2000,address:'湖南省株洲市xxxxxxxx小区1栋202室',phone:'173xxxx1088',time:'2018-12-12'},
],
keyword:'',//关键字
page:1,
list_rows:20,
total:0,
tianxuan:'',
order_id:'',//工单id
}
},
onReachBottom() {
if(this.total!=this.dataList.length) {
this.page++;
this.checkList();
}
},
onLoad(op) {
if(op.orderId){
this.order_id = op.orderId;
}
this.checkList();
},
methods: {
// 查询人员状态列表
checkList() {
let params = {
list_rows:this.list_rows,
page:this.page,
keyword:this.keyword
}
this.$requst.get('/universal/api.order/user_location',params).then(res=>{
console.log(res,'人员状态')
if(res.code) {
this.total = res.data.total;
if(this.page==1) this.dataList = [];
if(res.data.data.length) {
res.data.data.forEach(item=>{
let obj = {
id:item.uid,
name: item.name,
imgsrc:item.avatar,
number:item.user_number,
rate:item.starlevel,
num:item.pending_order,
allnum:item.processed_order,
address:item.address,
phone:item.phone,
time:item.register_time,
state: false,
isJob: item.is_working==1 ? true : false,
is_check:item.is_check
}
this.dataList.push(obj);
})
}
}
})
},
// 派发工单事件
sellEv(){
this.$requst.post('/universal/api.order/dispatch',{order_id:this.order_id,uid:this.tianxuan}).then(res=>{
if(res.code){
this.$toolAll.tools.showToast('派单成功');
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},1000)
}
})
},
// 调用查询事件
callEv() {
this.page = 1;
this.checkList();
},
listStateFun(item){
this.dataList.forEach(item1=>{item1.state = false})
item.state = !item.state;
item.state ? this.tianxuan = item.id : '';
}
}
}
</script>
<style>
.submit-button {
position: fixed;
display: none;
bottom: 30rpx;
left: 50%;
transform: translateX(-50%);
width: 686rpx;
border-radius: 50rpx;
height: 90rpx;
background-color: #02A2ea;
line-height: 90rpx;
color: #FFFFFF;
margin-top: 60rpx;
text-align: center;
font-size: 30rpx;
}
.peopleManagement-input {
width: 100%;
position: relative;
padding: 40rpx 16rpx;
box-sizing: border-box;
background-color: #FFFFFF
}
.peopleManagement-input .int {
width: 100%;
background-color: #F7F7F7;
padding: 0 25rpx;
height: 67rpx;
box-sizing: border-box;
border-radius: 36rpx;
font-size: 24rpx;
}
.peopleManagement-input .xian {
width: 3rpx;
height: 35rpx;
position: absolute;
background-color: #EAEAEA;
right: 100rpx;
top: 50%;
margin-top: -14rpx;
}
.peopleManagement-input .search {
width: 28rpx;
height: 28rpx;
position: absolute;
right: 43rpx;
top: 50%;
margin-top: -14rpx;
z-index: 9;
}
.peopleManagement-content .li {
background-color: #FFFFFF;
padding-right: 30rpx;
margin-top: 18rpx;
}
.peopleManagement-content .li .head {
display: flex;
padding: 22rpx 0rpx;
padding-left: 40rpx;
border-bottom: 2rpx solid #eaeaea;
justify-content: space-between;
padding-right: 30rpx;
}
.peopleManagement-content .li .head .name {
display: flex;
align-items: center;
color: #333333;
font-size: 27rpx;
font-weight: bold;
}
.peopleManagement-content .li .head .name .icon {
width: 38rpx;
height: 38rpx;
margin-right: 12rpx;
border: solid #969696 2rpx;
box-sizing: border-box;
border-radius: 50%;
}
.peopleManagement-content .li .head .name .iconImg{
width: 38rpx;
height: 38rpx;
margin-right: 12rpx;
box-sizing: border-box;
border-radius: 50%;
}
.cor {
color: #1c9bdb;
}
.cor1 {
color: #ff424d;
}
.peopleManagement-content .li .head .state {
color: #1c9bdb;
font-size: 27rpx;
}
.peopleManagement-content .li .con {
padding: 20rpx 0rpx;
padding-left: 52rpx;
border-bottom: 2rpx solid #eaeaea;
display: flex;
}
.peopleManagement-content .li .con .img {
width: 140rpx;
height: 130rpx;
margin-right: 10rpx;
}
.peopleManagement-content .li .con .text {
flex: 1;
margin-left: -14rpx;
}
.peopleManagement-content .li .con .text .iconCon {
font-size: 0rpx;
display: flex;
}
.peopleManagement-content .li .con .text .icon {
width: 28rpx;
height: 26rpx;
margin-left: 10rpx;
}
.peopleManagement-content .li .con .text .code {
font-size: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
}
.peopleManagement-content .li .con .text .p{
color: #7a7979;
display: flex;
font-size: 24rpx;
padding: 15rpx 0rpx;
}
.peopleManagement-content .li .con .text .p .one{
margin-right: 40rpx;
}
.peopleManagement-content .li .con .text .address{
color: #7a7979;
font-size: 24rpx;
}
.peopleManagement-content .li .bottom{
display: flex;
padding: 10rpx 0rpx;
padding-left: 40rpx;
color: #333333;
font-size: 24rpx;
display: flex;
padding-right: 22rpx;
justify-content: space-between;
}
.peopleManagement-content .li .bottom .cor3{
color: #666666;
}
.peopleManagement-content .li .bottom .bottom-content{
height: 60rpx;
line-height: 60rpx;
}
.peopleManagement-content .li .bottom .bottom-content:last-child{
text-align: right;
width: 48%;
}
.peopleManagement-content .li .bottom .bottom-content:first-child{
border-right: 2rpx dashed #eaeaea;
width: 52%;
}
</style>