568 lines
13 KiB
Vue
568 lines
13 KiB
Vue
<template>
|
||
<view class="search-list-container" v-show="showsearch">
|
||
<view class="search-list-out">
|
||
<view class="search-container">
|
||
<view class="back_btn" @click="toBack"><uni-icons type="arrowleft" size="30" color="#999"></uni-icons></view>
|
||
<view class="search-title">人员列表</view>
|
||
<!-- <view class="search_btn1" @click="to_submit">确定</view> -->
|
||
<view class="search_btn" @click="to_search">搜索</view>
|
||
</view>
|
||
<view class="search-container2" style="height: 40px;">
|
||
<view class="search-container2-flex">
|
||
<view class="search-input" style="width: 50%;">
|
||
<uni-icons color="#bbb" size="20" type="search" class="my-uni-icon-search"></uni-icons>
|
||
<input style="text" class="input-" placeholder="请输入姓名或手机号" v-model="inputText" />
|
||
<uni-icons color="#bbb" size="20" type="close" class="my-uni-icon-close" v-if="inputText.length > 0" @click="clearInput"></uni-icons>
|
||
</view>
|
||
<view class="searchSelectBox" style=" width: 50%;">
|
||
<view class="text" @click="showSinglePicker">{{ deptResult.name }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="search-list" style="top: 90px;">
|
||
<view class="panel flex-column">
|
||
<view class="flex-row" v-for="(item1, index1) in dataList" @click="chooseItem(item1, index1)" :key="index1" @touchmove="hiddenkeyboard">
|
||
<view class="flex-cell ">
|
||
<span>姓名：</span>
|
||
{{ item1.NAME }}
|
||
</view>
|
||
<view class="flex-cell">
|
||
<span>部门：</span>
|
||
{{ item1.deptName }}
|
||
</view>
|
||
<view class="flex-cell-single">
|
||
<span>手机号：</span>
|
||
{{ item1.mobile }}
|
||
</view>
|
||
<uni-icons type="checkbox-filled" size="20" :color="item1.checked ? '#3699FF' : '#CECECE'" class="checkbox-filled"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="toloadmore" v-show="show_toloadmore && !show_search_none && !loadingmore" @click.stop="mysearchlist_">查看更多</view>
|
||
<view class="loading-container" v-if="loadingmore">加载中...</view>
|
||
<view class="search_none" v-show="show_search_none">搜索结果为空</view>
|
||
</view>
|
||
</view>
|
||
<lb-picker ref="picker" mode="multiSelector" :level="level" :pickerValueDefault="[0,0]"
|
||
@confirm="pickerConfirm" :props="myProps" :list="deptArray"></lb-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import LbPicker from '@/components/lb-picker'
|
||
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'; //选择部门组件
|
||
import uniIcons from '../uni-icons/uni-icons.vue';
|
||
var searchListHeight, panelHeight, query;
|
||
// var requestTask;
|
||
// var requestTaskAbort = true;
|
||
var timeout = '';
|
||
export default {
|
||
mounted() {},
|
||
components: {
|
||
LbPicker,
|
||
uniIcons,
|
||
mpvuePicker
|
||
},
|
||
data() {
|
||
return {
|
||
list_: [],
|
||
list2_: [],
|
||
loadingmore: false,
|
||
lastpage: false, //是否加载完最后一页数据了
|
||
show_search_none: false,
|
||
show_toloadmore: false,
|
||
inputText: '',
|
||
lastIndex: 0, //加载列表翻页数据时，上一页的最后一个index
|
||
pagesize: 10, //每页显示多少条
|
||
pageno: 1, //第几页
|
||
dataList: [], //显示在页面的列表数据
|
||
level:4,
|
||
myProps: {
|
||
label: 'text',
|
||
value: 'id',
|
||
children: 'children'
|
||
},
|
||
deptArray: [],
|
||
deptResult: {
|
||
value: '',
|
||
name: '部门'
|
||
}
|
||
};
|
||
},
|
||
props: {
|
||
showsearch: {
|
||
type: Boolean
|
||
},
|
||
itemInfo_: {},
|
||
singleRow: {
|
||
type: Array,
|
||
default: function() {
|
||
return [];
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
//使用部门
|
||
this.$http.request({
|
||
url: '/apis/dept/tree',
|
||
// params:{
|
||
// deptId:deptId
|
||
// },
|
||
method:'GET',
|
||
}).then(res=>{
|
||
if(res.statusCode == '200'){
|
||
this.deptArray =res.data.data.children
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err);
|
||
});
|
||
|
||
// var _this = this;
|
||
// //使用部门
|
||
// this.$http
|
||
// .request({
|
||
// url: '/apis/dept/tree',
|
||
// method: 'GET'
|
||
// })
|
||
// .then(res => {
|
||
// if (res.statusCode == '200') {
|
||
// var useType = res.data.data.children;
|
||
// let j = {
|
||
// label: '全部',
|
||
// value: '',
|
||
// children: [
|
||
// {
|
||
// label: '-',
|
||
// value: ''
|
||
// }
|
||
// ]
|
||
// };
|
||
// _this.deptArray.push(j);
|
||
// 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 => {});
|
||
},
|
||
watch: {
|
||
showsearch(newv) {
|
||
if (newv) {
|
||
this.to_search();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
showSinglePicker() {
|
||
this.$refs.picker.show()
|
||
},
|
||
pickerConfirm(e){
|
||
var value = e.value;
|
||
console.log(value)
|
||
var name = ''
|
||
if(value[1] == '-') {
|
||
name = e.item[0].text
|
||
this.deptResult.value = ''
|
||
} else {
|
||
this.deptResult.value = value[2]?value[2]:value[1];
|
||
if(value[2]){
|
||
// name = name.substring(0,name.length-2);
|
||
name = e.item[0].text+'/'+e.item[1].text+'/'+e.item[2].text
|
||
} else {
|
||
name = e.item[0].text+'/'+e.item[1].text
|
||
}
|
||
}
|
||
console.log(this.deptResult.value)
|
||
this.deptResult.name = name;
|
||
this.listCards=[];
|
||
this.page=1;
|
||
this.loading_status="more";
|
||
// this.set_request();
|
||
},
|
||
// 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;
|
||
// },
|
||
hiddenkeyboard() {
|
||
uni.hideKeyboard();
|
||
},
|
||
chooseItem(item, index) {
|
||
for (var i = 0; i < this.dataList.length; i++) {
|
||
this.$set(this.dataList[i], 'checked', false);
|
||
}
|
||
this.$set(this.dataList[index], 'checked', true);
|
||
this.$emit('update:itemInfo_', item);
|
||
this.clearAll();
|
||
uni.hideKeyboard();
|
||
},
|
||
clearAll() {
|
||
this.list_ = [];
|
||
this.show_search_none = false;
|
||
this.loadingmore = false;
|
||
this.show_toloadmore = false;
|
||
this.inputText = '';
|
||
this.lastIndex = 0;
|
||
this.dataList = [];
|
||
this.$emit('update:showsearch', false);
|
||
},
|
||
mysearchlist_() {
|
||
if (!this.lastpage) {
|
||
this.mysearchinput_();
|
||
}
|
||
},
|
||
clearInput() {
|
||
this.inputText = '';
|
||
},
|
||
toBack() {
|
||
this.clearAll();
|
||
uni.hideKeyboard();
|
||
},
|
||
to_search() {
|
||
this.loadingmore = true;
|
||
this.show_toloadmore = false;
|
||
this.show_search_none = false;
|
||
var v = this;
|
||
this.pageno = 1;
|
||
this.dataList = [];
|
||
v.set_request(v.inputText);
|
||
},
|
||
set_request(d) {
|
||
let filterRes = {
|
||
pagesize: this.pagesize,
|
||
pageno: this.pageno,
|
||
query: this.inputText,
|
||
deptId: this.deptResult.value,
|
||
status: 1
|
||
};
|
||
this.loadingmore = true;
|
||
this.$http
|
||
.request({
|
||
url: '/apis/user/list',
|
||
params: filterRes,
|
||
method: 'GET'
|
||
})
|
||
.then(res => {
|
||
this.loadingmore = false;
|
||
if (res.data.code !== 0) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return false;
|
||
}
|
||
if (res.data.data == undefined) {
|
||
if (this.pageno == 1) {
|
||
//搜索结果为空
|
||
this.show_search_none = true;
|
||
}
|
||
//最后一页搜索结果为空
|
||
this.show_toloadmore = false;
|
||
return false;
|
||
}
|
||
|
||
if (res.data.code == 0 && res.data.data) {
|
||
this.pageno = this.pageno + 1;
|
||
this.dataList = this.dataList.concat(res.data.data.datas);
|
||
if (this.pagesize == res.data.data.datas.length) {
|
||
this.show_toloadmore = true;
|
||
} else if (this.pagesize > res.data.data.datas.length) {
|
||
//已经加载到最后一页了
|
||
this.show_toloadmore = false;
|
||
}
|
||
}
|
||
this.$nextTick(function() {
|
||
//首次加载高度没有撑满页面，继续加载下一页
|
||
query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select('.search-list')
|
||
.boundingClientRect(data => {
|
||
searchListHeight = data.height;
|
||
})
|
||
.exec();
|
||
query
|
||
.select('.panel')
|
||
.boundingClientRect(data => {
|
||
panelHeight = data.height;
|
||
if (panelHeight <= searchListHeight && res.data.data != undefined) {
|
||
this.mysearchinput_();
|
||
}
|
||
})
|
||
.exec();
|
||
});
|
||
})
|
||
.catch(err => {
|
||
this.loadingmore = false;
|
||
if (res.errMsg == 'request:fail timeout') {
|
||
uni.showToast({
|
||
title: '请求超时',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '请求失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
mysearchinput_() {
|
||
this.set_request(this.inputText);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search-container,
|
||
.search-container2 {
|
||
position: fixed;
|
||
z-index: 10;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
left: 0;
|
||
}
|
||
.search-container {
|
||
border-bottom: 1px solid #d9d9d9;
|
||
box-sizing: border-box;
|
||
height: 50px;
|
||
box-sizing: border-box;
|
||
}
|
||
.search-container2 {
|
||
top: 50px;
|
||
height: auto;
|
||
}
|
||
.search-container2-flex {
|
||
position: relative;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 0 5px;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
}
|
||
.search-input {
|
||
position: relative;
|
||
height: 30px;
|
||
border: 1px solid #e6e6e6;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
.search-title {
|
||
position: absolute;
|
||
left: 60px;
|
||
right: 60px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: #000;
|
||
}
|
||
.searchSelectBox {
|
||
float: left;
|
||
}
|
||
.searchSelectBox .text {
|
||
margin: 0px 3%;
|
||
background: #f6f6f6;
|
||
border-radius: 40px;
|
||
width: 94%;
|
||
line-height: 30px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
.my-uni-icon-search {
|
||
line-height: 30px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.input- {
|
||
position: absolute;
|
||
height: 100%;
|
||
left: 30px;
|
||
top: 0;
|
||
right: 0px;
|
||
border: none;
|
||
outline: medium;
|
||
color: #666;
|
||
font-size: 14px;
|
||
padding: 0 30px 0 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.my-uni-icon-close {
|
||
position: absolute;
|
||
height: 30px;
|
||
width: 30px;
|
||
right: 0px;
|
||
line-height: 30px;
|
||
top: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.search_btn,
|
||
.search_btn1,
|
||
.back_btn {
|
||
position: absolute;
|
||
width: 50px;
|
||
height: 30px;
|
||
right: 5px;
|
||
top: 10px;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: #007aff;
|
||
}
|
||
.search_btn1 {
|
||
right: 55px;
|
||
}
|
||
.back_btn {
|
||
left: 5px;
|
||
right: auto;
|
||
color: #999;
|
||
}
|
||
|
||
.search-list-container {
|
||
position: fixed;
|
||
z-index: 10000;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.search-list-out {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0px;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
z-index: 1;
|
||
}
|
||
|
||
.search-list {
|
||
position: absolute;
|
||
overflow: scroll;
|
||
bottom: 0;
|
||
width: 100%;
|
||
left: 0;
|
||
}
|
||
|
||
.panel view {
|
||
line-height: 20px;
|
||
padding: 8px 10px 8px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.panel .flex-row:nth-of-type(even) {
|
||
//奇数
|
||
background-color: #efefef;
|
||
}
|
||
|
||
.panel .flex-row:nth-of-type(odd) {
|
||
//偶数
|
||
background-color: #f9f9fb;
|
||
}
|
||
|
||
.flex-row {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-right: 45px !important;
|
||
/* display: flex; */
|
||
/* flex-direction: row; */
|
||
}
|
||
|
||
.flex-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.flex-cell {
|
||
width: 50%;
|
||
float: left;
|
||
text-align: left;
|
||
/* display: flex;
|
||
font-size: 15px;
|
||
flex: 1;
|
||
justify-content: center;
|
||
align-items: center; */
|
||
}
|
||
.flex-cell-single {
|
||
width: 100%;
|
||
float: left;
|
||
}
|
||
.flex-cell-single span,
|
||
.flex-cell span {
|
||
color: #999;
|
||
}
|
||
.search_none,
|
||
.toloadmore {
|
||
position: relative;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
left: 0;
|
||
}
|
||
|
||
.toloadmore {
|
||
color: #666;
|
||
}
|
||
|
||
.loading-container {
|
||
position: relative;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
left: 0;
|
||
}
|
||
.checkbox-filled {
|
||
right: 10px;
|
||
}
|
||
>>>.picker-item .lb-picker-column .lb-picker-column-label {
|
||
-webkit-transition: all 0.3s;
|
||
transition: all 0.3s;
|
||
line-height: 3.8 !important;
|
||
}
|
||
</style>
|