yxk_h5_master/pages/extraWork/selectPeople.vue

260 lines
7.2 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<view class="peopleTop">
<view class="search_container" @click="toSearch()">
<uni-icons class="search_icon" type="search" size="20" color="#bdbdbd"></uni-icons>
搜索姓名手机号码
</view>
<view class="deptBox" >
<view class="text" @click="showSinglePicker">{{deptResult.name}}</view>
</view>
</view>
<view class="box" v-if="listCards.length>0">
<view v-for="(item,index) in listCards" :key="index" class="people-box myContainer myContentBox" @click="toDetail(index,item)">
<view class="name_">{{item.NAME}}</view>
<view class="user_container">
<img src="../../static/img/user2.png">
<view class="username">{{item.deptName}}</view>
</view>
<view class="user_container">
<img src="../../static/img/phone.png">
<view class="username">{{item.mobile}}</view>
</view>
<uni-icons type="checkbox-filled" size="20" :color="item.checked?'#3699FF':'#CECECE'" class="checkbox-filled" ></uni-icons>
</view>
<uni-load-more :status="loading_status" ></uni-load-more>
</view>
<view class="box" v-else>
<xinsoft-no-record noRecordContent="暂无满足条件的内容,请输入关键字重新搜索" ></xinsoft-no-record>
</view>
<view class="goHome" @click='goMain("workInfo")'>
<img src="../../static/img/gohome.png">
</view>
<mpvue-picker ref="mpvuePicker" mode="multiLinkageSelector" :deepLength="deepLength" :pickerValueDefault="[0,0]"
@onConfirm="pickerConfirm" :pickerValueArray="deptArray"></mpvue-picker>
</view>
</template>
<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import xinsoftNoRecord from '@/components/xinsoft-no-record/xinsoft-no-record.vue';
export default {
components: {
devBlock,
uniIcons,
uniLoadMore,
mpvuePicker,
xinsoftNoRecord
},
data() {
return {
listCards: [],
pagenumber:1,//当前第几页
pagesize:20,//每页加载数据条数
loading_status: 'more',//moreloading前、loadingloading中、noMore没有更多了
deepLength:2,
deptArray:[],
deptResult:{
value:'',
name:'部门'
},
selectPeopleArray :[]
}
},
onShow(){
},
created() {
this.getDateList();
//部门
var _this = this;
//使用部门
this.$http.request({
url: '/apis/dept/tree',
method:'GET',
}).then(res=>{
if(res.statusCode == '200'){
var useType = res.data.data.children;
for (let i = 0; i < useType.length; i++) {
var myVal=
{
'label': useType[i].text,
'value': useType[i].id,
'children':[
{
'label':'-',
'value': ''
}
]
}
if(useType[i].children && useType[i].children.length>0){
for (let j = 0; j < useType[i].children.length; j++) {
var json = {
'label': useType[i].children[j].text,
'value': useType[i].children[j].id
}
myVal.children.push(json);
}
}
_this.deptArray.push(myVal);
}
}
}).catch(err=>{
console.log(err);
});
},
onLoad(option) {
//需要区别加班人还是 抄送人。 加班人单选,抄送人多选。
this.flag = option.flag;
},
//滚动到底部加载下一页
onReachBottom(obj){
if(this.loading_status=='noMore'){
return false;
}
this.pagenumber++;
this.getDateList();
},
//下拉刷新
onPullDownRefresh(){
this.listCards=[];
this.pagenumber=1;
this.loading_status="more";
this.getDateList();
},
methods: {
//获取列表数据
getDateList(){
this.loading_status="loading";
var filterRes = {};
filterRes.pageno = this.pagenumber;
filterRes.pagesize = this.pagesize;
filterRes.deptId=this.deptResult.value;
this.$http.request({
url: '/apis/user/list',
params: filterRes,
method:"GET"
}).then(res => {
uni.stopPullDownRefresh();
if(!res.data.data){
this.loading_status="noMore";
}else if(res.data.data.datas.length<this.pagesize){
this.loading_status="noMore";
}else{
this.loading_status="more";
}
if (res.data.code == 0) {
for(var i=0;i<res.data.data.datas.length;i++){
res.data.data.datas[i].checked=false;
}
this.listCards = this.listCards.concat(res.data.data.datas);
}
}).catch(err => {
this.loading_status="noMore";
});
},
showSinglePicker() {
this.$refs.mpvuePicker.show()
},
pickerConfirm(e){
var value = e.value;
this.deptResult.value = value[1]?value[1]:value[0];
var name = e.label;
if(!value[1]){
name = name.substring(0,name.length-2);
}
this.deptResult.name = name;
this.listCards=[];
this.pagenumber=1;
this.loading_status="more";
this.getDateList();
},
//点击事件
toDetail(index,item){
var thisItem = this.listCards[index];
//加班人单选,其他为多选。
if(this.flag == 'jbr' ){ //选择加班人 单选
for(var i=0;i<this.listCards.length;i++){
this.listCards[i].checked=false;
}
this.listCards[index].checked=true;
this.selectPeopleArray = [{
userId :thisItem.userId,
name:thisItem.NAME
}]
}
else if(this.flag == 'csr'){ //抄送人
this.listCards[index].checked = !(this.listCards[index].checked);
//如果是true 需要push
if(this.listCards[index].checked){
this.selectPeopleArray.push({
userId :thisItem.userId,
name:thisItem.NAME
})
}else{
var list = this.selectPeopleArray;
this.selectPeopleArray = [];
//如果是false 那么需要删除
for(var i=0;i<list.length;i++){
if(list[i].userId != thisItem.userId)
{
this.selectPeopleArray.push(list[i]);
}
}
}
}
},
//搜索人员列表 同样需要进行判断 区分维修转派 责任人和 抄送人
toSearch(){
uni.navigateTo({
url: "peopleSearch?flag="+this.flag
});
}
},
onNavigationBarButtonTap(obj) {
if(this.selectPeopleArray.length ==0){
uni.showToast({
title: '请选择人员',
duration: 2000,
icon:"none"
});
return false;
}
if(this.flag == 'jbr'){ //加班人
var arrays = this.selectPeopleArray[0];
var workInfo = uni.getStorageSync('workInfo');
if(!workInfo){
workInfo = {}
}
workInfo.overTimeUser = arrays;
}
else if(this.flag == 'csr'){ //抄送人
var arrays = this.selectPeopleArray;
var workInfo = uni.getStorageSync('workInfo');
if(!workInfo){
workInfo = {}
}
workInfo.targetList = arrays;
}
uni.setStorage({
key: 'workInfo',
data: workInfo,
success: function () {
uni.navigateTo({
url: 'addWorkApply'
});
}
});
}
}
</script>