302 lines
7.8 KiB
Vue
302 lines
7.8 KiB
Vue
|
<template>
|
||
|
|
<view class="dialog_out" >
|
||
|
|
<view class="dialog_container">
|
||
|
|
<uni-icons type="closeempty" size="40" class="close_icon" @click="choose()"></uni-icons>
|
||
|
|
<view class="dialog_title">选择人员</view>
|
||
|
|
<view class="search_container">
|
||
|
|
<view class="search_text">
|
||
|
|
<input type="search" placeholder="请输入名字" v-model="search_data.userName"/>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="searchSelectBox" style=" width: 50%;">
|
||
|
|
<view class="text" @click="showSinglePicker">{{ deptResult.name }}</view>
|
||
|
|
</view>
|
||
|
|
<button @click="search(1)" type="primary">查询</button>
|
||
|
|
</view>
|
||
|
|
<view class="table_container">
|
||
|
|
<t-table border=0>
|
||
|
|
<t-tr font-size="18">
|
||
|
|
<t-th>姓名</t-th>
|
||
|
|
<t-th>部门</t-th>
|
||
|
|
<t-th>手机</t-th>
|
||
|
|
<t-th>操作</t-th>
|
||
|
|
</t-tr>
|
||
|
|
<span @click="choose(items)" v-for="items in tableList" :key="items.userId" class="t-tr-span">
|
||
|
|
<t-tr font-size="17" >
|
||
|
|
<t-td>{{items.NAME}}</t-td>
|
||
|
|
<t-td>{{items.deptName}}</t-td>
|
||
|
|
<t-td>{{items.mobile}}</t-td>
|
||
|
|
<t-td style="color: #007AFF;" ><button @click="choose(items)" type="primary" plain="true">选择</button></t-td>
|
||
|
|
</t-tr>
|
||
|
|
</span>
|
||
|
|
<view v-if="show_nodata" class="nodata" style="text-align: center;font-size: 18px;color: #999;line-height: 40px;">暂无数据</view>
|
||
|
|
|
||
|
|
</t-table>
|
||
|
|
<uni-pagination show-icon="true" :pageSize="search_data.pagesize" :total="total_pages" :current="search_data.pageno" class="pagination" @change="changePages"></uni-pagination>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<lb-picker ref="picker" mode="multiSelector" :level="level" :pickerValueDefault="[0,0]"
|
||
|
|
@confirm="pickerConfirm" :props="pickerProps" :list="deptArray"></lb-picker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import 'static/css/chooseDialog.css'
|
||
|
|
import LbPicker from '@/components/lb-picker'
|
||
|
|
import uniIcons from '@/components/uni-icons/uni-icons.vue'
|
||
|
|
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'; //选择部门组件
|
||
|
|
import tTable from '@/components/t-table/t-table.vue';
|
||
|
|
import tTh from '@/components/t-table/t-th.vue';
|
||
|
|
import tTr from '@/components/t-table/t-tr.vue';
|
||
|
|
import tTd from '@/components/t-table/t-td.vue';
|
||
|
|
import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tTable,
|
||
|
|
tTh,
|
||
|
|
tTr,
|
||
|
|
tTd,
|
||
|
|
uniIcons,
|
||
|
|
mpvuePicker,
|
||
|
|
LbPicker,
|
||
|
|
uniPagination
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
search_data:{
|
||
|
|
deptId: "",
|
||
|
|
userName:"",
|
||
|
|
pageno:1,//当前页数
|
||
|
|
pagesize:4,//1页几条数据
|
||
|
|
status:1
|
||
|
|
},
|
||
|
|
deptResult: {
|
||
|
|
value: '',
|
||
|
|
name: '部门'
|
||
|
|
},
|
||
|
|
deptArray: [],
|
||
|
|
level:4,
|
||
|
|
pickerProps: {
|
||
|
|
label: 'text',
|
||
|
|
value: 'id',
|
||
|
|
children: 'children'
|
||
|
|
},
|
||
|
|
tableList: [],
|
||
|
|
total_pages: 0, //总页数
|
||
|
|
show_nodata: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
var myVal=
|
||
|
|
{
|
||
|
|
'id': '-',
|
||
|
|
'text': '-',
|
||
|
|
'children':[
|
||
|
|
{
|
||
|
|
'label':'-',
|
||
|
|
'value': '',
|
||
|
|
'children':[]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
this.deptArray[0].children.push(myVal)
|
||
|
|
var myVal1=
|
||
|
|
{
|
||
|
|
'id': '',
|
||
|
|
'text': '全部',
|
||
|
|
'children':[
|
||
|
|
{
|
||
|
|
'id':'-',
|
||
|
|
'text': '',
|
||
|
|
'children':[]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
this.deptArray.push(myVal1)
|
||
|
|
}
|
||
|
|
}).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 => {});
|
||
|
|
this.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.search_data.deptId = ''
|
||
|
|
} else {
|
||
|
|
this.search_data.deptId = 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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.deptResult.name = name;
|
||
|
|
this.listCards=[];
|
||
|
|
this.page=1;
|
||
|
|
this.loading_status="more";
|
||
|
|
// this.set_request();
|
||
|
|
},
|
||
|
|
// showSinglePicker() {
|
||
|
|
// this.$refs.mpvuePicker.show();
|
||
|
|
// },
|
||
|
|
// pickerConfirm(e) {
|
||
|
|
// var value = e.value;
|
||
|
|
// console.log(e)
|
||
|
|
// 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;
|
||
|
|
// var thisId = value [value .length-1]
|
||
|
|
// this.search_data.deptId = thisId
|
||
|
|
// },
|
||
|
|
search(n) {
|
||
|
|
if(n==1){
|
||
|
|
this.search_data.pageno=1;
|
||
|
|
}
|
||
|
|
this.$http.request({
|
||
|
|
url: '/apis/user/list',
|
||
|
|
method: 'get',
|
||
|
|
params: this.search_data,
|
||
|
|
}).then(res => {
|
||
|
|
if (res) {
|
||
|
|
if (res.data.code == 0) {
|
||
|
|
this.tableList = res.data.data ? res.data.data.datas : []
|
||
|
|
if (this.tableList.length == 0) {
|
||
|
|
this.show_nodata = true
|
||
|
|
}
|
||
|
|
this.total_pages = res.data.data ? res.data.data.totalPages * this.search_data.pagesize : 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changePages(e) {
|
||
|
|
console.log(e)
|
||
|
|
this.search_data.pageno = e.current;
|
||
|
|
this.search();
|
||
|
|
|
||
|
|
},
|
||
|
|
//点击选择
|
||
|
|
choose(val){
|
||
|
|
this.$emit("change", val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.dialog_out .search_container {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: 16px;
|
||
|
|
padding: 0px 60px !important;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.searchSelectBox {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.searchSelectBox .text {
|
||
|
|
margin: 0px 3%;
|
||
|
|
background: #f6f6f6;
|
||
|
|
border-radius: 40px;
|
||
|
|
width: 80%;
|
||
|
|
left: 1%;
|
||
|
|
line-height: 30px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
>>>.picker-item .lb-picker-column .lb-picker-column-label {
|
||
|
|
-webkit-transition: all 0.3s;
|
||
|
|
transition: all 0.3s;
|
||
|
|
/* line-height: 3.8 !important; */
|
||
|
|
font-size: 26px;
|
||
|
|
}
|
||
|
|
>>>.lb-picker .lb-picker-container .lb-picker-header .lb-picker-action {
|
||
|
|
font-size: 24px;
|
||
|
|
padding: 0 28px;
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: flex;
|
||
|
|
-webkit-box-align: center;
|
||
|
|
-webkit-align-items: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|