<template>
|
<view class="uni-page-org-selpsn">
|
<uni-search-bar class="uni-panel-search" radius="5" v-model="searchtext" placeholder="请输入搜索条件"
|
clearButton="auto" cancelButton="none" @input="inputSearch" @confirm="inputSearch" @clear="cancelSearch" />
|
<view class="uni-panel-breadcrumb" v-if="deptpsn.length>1"><!-- -->
|
<view class="uni-panel-breadcrumb-item" v-for="(item,index) in breadcrumbNavigation" :key="index">
|
<view
|
:class="index > (breadcrumbNavigation.length - 2)?'uni-breadcrumb-item-curtext':'uni-breadcrumb-item-text'"
|
@click.prevent.stop="deptClick(index)">{{item}}
|
<text class="uni-panel-breadcrumb-ico fs-delete_solid_circle"
|
@click.prevent.stop="deptPop(index)"></text>
|
</view>
|
<text v-if="index < (breadcrumbNavigation.length - 1)" class="uni-panel-breadcrumb-separator">/</text>
|
</view><!-- {{breadcrumbNavigation}} -->
|
</view><!-- 🔙{{breadcrumbNavigation}} ◀ -->
|
<view class="uni-panel-content">
|
<view class="uni-panel-personlist" v-if="deptpsn.length > 0">
|
<view class="uni-panel-org " v-for="(item,index) in deptpsn[deptpsn.length-1].dept" :key="item.id"
|
@click.prevent.stop="getNextOrg(item)">
|
<text class="uni-panel-icon fs-company"></text>
|
<text>{{item.name}} </text>
|
</view>
|
<checkbox-group @change="checkboxChange">
|
<label v-for="(item,index) in deptpsn[deptpsn.length-1].psn" class="uni-panel-org-user"
|
:key="item.login">
|
<checkbox style="transform:scale(0.8)" :value="item.login" color="#007aff"
|
:checked="item.checked" />
|
<!-- onerror= @error="onerror=null;javascript:this.src='{{userDefaultImgUrl}}';" -->
|
<image :src="item.img" @error="imageUserError(index)" />
|
<!-- <text class="uni-panel-person-item fs-person4"></text>
|
<image class="uni-panel-person-item" :src="imgUserHttp"></image> -->
|
<view class="">{{item.name}}</view>
|
</label>
|
</checkbox-group>
|
<view class="uni-panel-org-nouser">{{noListText}}</view>
|
</view>
|
<view v-else class="uni-panel-org-nouser">{{noListText}}</view>
|
</view>
|
<view class="uni-panel-person-bottom">
|
<view class="uni-panel-selperson ">
|
<view class="uni-panel-selperson-item" v-for="(item,index) in checkpsn"
|
@longpress="longPressSel(item,index)" :key="item.login">
|
<image :src="item.img" @error="imageSelUserError(index)" />
|
<text>{{item.name}}</text>
|
</view>
|
</view>
|
<button class="uni-panel-btn-ok" @click="clickOK">确定</button>
|
</view>
|
<view class="uni-panel-safe-bottom" :style="{height:safeAreaBottom + 'px'}" />
|
</view>
|
</template>
|
|
<script>
|
import {
|
getOrgList,
|
getOrgMember,
|
userQuery
|
} from "@/api/org.js"
|
import {
|
showModal,
|
showToast,
|
showLoading,
|
hideLoading
|
} from "@/common/Page.js"
|
export default {
|
data() {
|
return {
|
timerSearch: null,
|
options: {},
|
searchtext: '',
|
oldsearchtext: '',
|
noListText: '',
|
multiselect: false,
|
breadcrumbNavigation: [],
|
deptpsn: [],
|
checkpsn: [],
|
safeAreaBottom: getApp().globalData.safeAreaBottom,
|
}
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
imageUserError(index) {
|
// console.log("imageUserError",index)
|
let item = this.deptpsn[this.deptpsn.length - 1].psn[index]
|
item.img = getApp().globalData.defaultuserphoto
|
this.$set(this.deptpsn[this.deptpsn.length - 1].psn, index, item)
|
},
|
imageSelUserError(index) {
|
// console.log("imageSelUserError",index)
|
let item = this.checkpsn[index]
|
item.img = getApp().globalData.defaultuserphoto
|
this.$set(this.checkpsn, index, item)
|
},
|
checkboxChange(e) {
|
// console.log("checkboxChange", e)
|
var _this = this;
|
let deptpsn = _this.deptpsn;
|
let items = deptpsn[deptpsn.length - 1].psn;
|
let values = e.detail.value
|
let posFind = 0
|
if (_this.multiselect) {
|
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
delete items[i].checked
|
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
|
if (items[i].login === values[j]) {
|
items[i].checked = true
|
console.log("checkboxChange multiselect", items)
|
posFind = _this.checkpsn.indexOf(items[i])
|
if (posFind < 0) {
|
_this.checkpsn.push(items[i])
|
}
|
break
|
}
|
}
|
}
|
} else {
|
if (values.length) {
|
let thisone = values.pop();
|
if (thisone) {
|
items.filter(x => x.checked).map(x => delete x.checked);
|
let psn = items.filter(x => x.login == thisone)[0];
|
psn.checked = true;
|
console.log("checkboxChange thisone", psn)
|
_this.checkpsn = [psn];
|
}
|
} else {
|
for (let i = 0, lenI = items.length; i < lenI; ++i)
|
delete items[i].checked
|
_this.checkpsn = [];
|
}
|
}
|
_this.setData({
|
deptpsn,
|
checkpsn: _this.checkpsn
|
})
|
|
},
|
deptClick(index) {
|
var _this = this;
|
//let nPos = _this.deptpsn.length -
|
console.log("deptClick", index, _this.deptpsn.length)
|
while (_this.deptpsn.length > index + 2) {
|
_this.deptpsn.pop();
|
_this.breadcrumbNavigation.pop();
|
}
|
console.log("deptClick", _this.deptpsn.length, _this.breadcrumbNavigation.length)
|
|
// _this.setData({
|
// deptpsn: _this.deptpsn,
|
// breadcrumbNavigation:_this.breadcrumbNavigation,
|
// })
|
},
|
deptPop(index) {
|
var _this = this;
|
//let nPos = _this.deptpsn.length -
|
console.log("deptPop", index, _this.deptpsn.length)
|
while (_this.deptpsn.length > index + 1) {
|
_this.deptpsn.pop();
|
_this.breadcrumbNavigation.pop();
|
}
|
console.log("deptPop", _this.deptpsn.length, _this.breadcrumbNavigation.length)
|
|
// _this.setData({
|
// deptpsn: _this.deptpsn,
|
// breadcrumbNavigation:_this.breadcrumbNavigation,
|
// })
|
/*if(_this.deptpsn.length>1){
|
_this.deptpsn.pop();
|
_this.breadcrumbNavigation.pop();
|
_this.setData({
|
deptpsn: _this.deptpsn,
|
breadcrumbNavigation:_this.breadcrumbNavigation,
|
})
|
}*/
|
},
|
clickOK() {
|
//console.log(this.checkpsn);
|
//uni.$emit('selUser', this.checkpsn)
|
// let pages = getCurrentPages();
|
// let prepage = pages[pages.length - 2];
|
const eventChannel = this.getOpenerEventChannel();
|
//console.log("clickOK",prepage);
|
/* prepage.setData({
|
this.options.evalfunction(this.checkpsn)
|
}) */
|
// console.log("clickOK checkpsn", JSON.stringify(this.checkpsn));
|
// prepage.$vm[this.options.evalfunction](this.checkpsn)
|
|
eventChannel.emit('selPsnOk', this.checkpsn);
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
longPressSel(item, index) {
|
console.log("longPressSel", index)
|
var _this = this;
|
showModal("确定要删除用户吗？", "提醒").then((res) => {
|
if (res) {
|
let checkpsn = _this.checkpsn;
|
console.log("longPressSel2", checkpsn)
|
checkpsn.splice(index, 1);
|
console.log("longPressSel 3", checkpsn)
|
_this.setData({
|
checkpsn: checkpsn,
|
})
|
|
}
|
})
|
},
|
parsePsnList(data) {
|
if (Array.isArray(data)) {
|
const app = getApp()
|
for (let i = 0; i < data.length; i++) {
|
let userItem = data[i];
|
userItem.img = `${app.globalData.apiurl.org}/userphoto?login=${userItem.login}`;
|
}
|
}
|
return data
|
},
|
loadOrgList(id) {
|
console.log("loadOrgList", id)
|
var _this = this;
|
return new Promise(async function(resolve, reject) {
|
showLoading("加载中，请稍后...")
|
try {
|
let list2 =await getOrgList(id)|| []
|
let list =[]
|
if (id) {
|
list =await getOrgMember(id) || []
|
list = _this.parsePsnList(list) || []
|
}
|
hideLoading();
|
resolve({dept:list2,psn:list})
|
} catch (ex) {
|
hideLoading();
|
console.log("loadOrgList catch", ex)
|
reject(ex)
|
this.showError(ex)
|
}
|
})
|
},
|
getNextOrg(item) {
|
console.log("getNextOrg", item);
|
var _this = this;
|
_this.oldsearchtext = ""
|
|
_this.breadcrumbNavigation.push(item.name)
|
// if(!item.children){
|
let deptpsn = _this.deptpsn;
|
let psns = deptpsn[deptpsn.length - 1].psn;
|
if (psns && psns.length) {
|
psns.map(x => delete x.checked);
|
}
|
if (item.mem_users > 0 || item.sub_orgs > 0) {
|
_this.loadOrgList(item.id).then((res) => {
|
console.log("getNextOrg loadOrgList", res);
|
_this.deptpsn.push(res);
|
_this.setData({
|
deptpsn: _this.deptpsn,
|
breadcrumbNavigation: _this.breadcrumbNavigation,
|
// checkpsn:[]
|
})
|
if (res.dept.length > 0 || res.psn.length > 0) {
|
_this.setData({
|
noListText: ''
|
})
|
} else {
|
_this.setData({
|
noListText: '无下属部门和人员'
|
})
|
}
|
})
|
} else {
|
_this.deptpsn.push([]);
|
_this.setData({
|
deptpsn: _this.deptpsn,
|
breadcrumbNavigation: _this.breadcrumbNavigation,
|
noListText: '无下属部门和人员'
|
//checkpsn:[]
|
})
|
}
|
item.open = !item.open;
|
},
|
cancelSearch() {
|
// console.log("cancelSearch");
|
this.setData({
|
searchtext: ""
|
})
|
this.searchPsn("");
|
},
|
inputSearch() {
|
// console.log("inputSearch",this.searchtext);
|
var _this = this;
|
if (_this.timerSearch) {
|
clearTimeout(_this.timerSearch);
|
_this.timerSearch = null;
|
}
|
_this.timerSearch = setTimeout(() => {
|
let keyStr = _this.searchtext.trim()
|
if (_this.oldsearchtext != keyStr)
|
_this.searchPsn(keyStr);
|
}, 1000)
|
},
|
searchPsn(keyStr) {
|
var _this = this;
|
console.log("searchPsn", keyStr);
|
if (keyStr != '') {
|
_this.oldsearchtext = keyStr
|
userQuery(keyStr).then((res) => {
|
|
console.log("searchPsn queryOrgPsn", res);
|
if (res) {
|
res = _this.parsePsnList(res)
|
//_this.breadcrumbNavigation.push("搜索：‘"+_this.searchtext+"’");
|
_this.setData({
|
deptpsn: [{
|
psn: res
|
}],
|
breadcrumbNavigation: [],
|
noListText: ''
|
//breadcrumbNavigation:_this.breadcrumbNavigation
|
})
|
} else {
|
_this.oldsearchtext = ""
|
_this.setData({
|
deptpsn: [],
|
breadcrumbNavigation: [],
|
noListText: '没有符合条件的人员'
|
})
|
|
//showModal("查无此人！", '提示')
|
}
|
}).catch((rej) => {
|
console.log("searchPsn failed", rej);
|
_this.setData({
|
deptpsn: [],
|
breadcrumbNavigation: [],
|
noListText: '查询失败'
|
})
|
this.showError(rej)
|
})
|
} else {
|
_this.oldsearchtext = ""
|
_this.loadOrgList("").then((res) => {
|
console.log("searchPsn loadOrgList", res);
|
_this.setData({
|
deptpsn: [res],
|
breadcrumbNavigation: [],
|
//checkpsn:[]
|
})
|
if (res.dept.length > 0 || res.psn.length > 0) {
|
_this.setData({
|
noListText: ''
|
})
|
} else {
|
_this.setData({
|
noListText: '无下属部门和人员'
|
})
|
}
|
console.log("searchPsn deptpsn", _this.deptpsn);
|
})
|
}
|
},
|
userImgUrl(userID) {
|
return `${getApp().globalData.apiurl.org}/userphoto?login=${userID}`;
|
},
|
showError(ex) {
|
let tip = typeof ex == 'string' ? ex : typeof ex.err_msg == 'string' ? ex.err_msg : typeof ex.errMsg ==
|
'string' ? ex.errMsg : ""
|
showModal(tip, "提示", false)
|
},
|
|
},
|
onLoad(option) {
|
|
var _this = this;
|
// #ifdef MP-DINGTALK
|
|
my.setNavigationBar({
|
backgroundColor: "#007AFF",
|
frontColor: "#ffffff"
|
})
|
// #endif
|
if (option.title) {
|
uni.setNavigationBarTitle({
|
title: option.title
|
})
|
}
|
if (option.multiselect)
|
_this.multiselect = option.multiselect
|
if (!option.evalfunction)
|
option = {
|
evalfunction: 'getBackUser'
|
}
|
_this.options = option;
|
_this.oldsearchtext = ""
|
_this.loadOrgList("").then((res) => {
|
console.log("onLoad loadOrgList", res);
|
_this.setData({
|
deptpsn: [{
|
dept: res.dept,
|
psn: res.psn,
|
role: res.role
|
}]
|
})
|
if (res.dept.length > 0 || res.psn.length > 0) {
|
_this.setData({
|
noListText: ''
|
})
|
} else {
|
_this.setData({
|
noListText: '无下属部门和人员'
|
})
|
}
|
console.log("onLoad deptpsn", this.deptpsn);
|
})
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #eeeeee;
|
}
|
|
.uni-page-org-selpsn {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
}
|
|
.uni-panel-search {
|
width: calc(100% - 10px);
|
margin: 2px 5px;
|
}
|
|
.uni-panel-search-content {
|
display: flex;
|
width: 100%;
|
margin: 4px;
|
border: 1px solid grey;
|
border-radius: 5px;
|
padding: 2px 2px;
|
flex-direction: row !important;
|
}
|
|
.uni-panel-search-content:focus {
|
border: 1px solid blue;
|
}
|
|
.uni-panel-search-content input {
|
flex: 1;
|
margin: 4px 5px;
|
}
|
|
.uni-panel-search-ico {
|
display: flex;
|
margin: 5px;
|
font-size: 18px;
|
border-radius: 15px;
|
}
|
|
.uni-panel-breadcrumb {
|
display: flex;
|
flex-direction: row !important;
|
background-color: #f2f2f2;
|
color: #007aff;
|
top: 50px;
|
height: 27px;
|
padding: 5px 10px;
|
font-size: 14px;
|
border-bottom: 1px solid #cccccc;
|
}
|
|
.uni-panel-breadcrumb-item {
|
font-size: 14px;
|
margin: 0 2px;
|
display: flex;
|
flex-direction: row !important;
|
|
}
|
|
.uni-panel-breadcrumb-separator {
|
display: flex;
|
line-height: 27px;
|
}
|
|
.uni-panel-breadcrumb-ico {
|
line-height: 20px;
|
color: #fff;
|
margin-left: 4px;
|
font-size: 18px;
|
}
|
|
.uni-breadcrumb-item-text {
|
display: flex;
|
margin-right: 2px;
|
padding: 4px 5px;
|
background-color: #b9dff8;
|
color: #000;
|
border-radius: 15px;
|
}
|
|
.uni-breadcrumb-item-curtext {
|
display: flex;
|
margin-right: 2px;
|
padding: 4px 5px;
|
background-color: #62c0ff;
|
color: #000;
|
border-radius: 15px;
|
}
|
|
.uni-panel-h {
|
display: flex;
|
background-color: #ffffff;
|
flex-direction: row !important;
|
align-items: center !important;
|
padding: 8px 12px;
|
font-size: 14px;
|
/* border-bottom: 1px solid #cccccc; */
|
}
|
|
.uni-panel-org {
|
display: flex;
|
background-color: #eeeeee;
|
flex-direction: row !important;
|
align-items: center !important;
|
padding: 12px 16px;
|
font-size: 14px;
|
/* border-bottom: 1px solid #dddddd; */
|
}
|
|
.uni-panel-org-user {
|
display: flex;
|
background-color: #eeeeee;
|
flex-direction: row !important;
|
align-items: center !important;
|
padding: 10px 16px;
|
background-color: #ffffff;
|
font-size: 14px;
|
}
|
|
.uni-panel-org-nouser {
|
display: flex;
|
background-color: #eeeeee;
|
width: calc(100% - 36px);
|
padding: 10px 16px;
|
font-size: 14px;
|
}
|
|
.uni-panel-icon {
|
font-size: 18px;
|
color: #007aff;
|
line-height: 16px;
|
margin-right: 8px;
|
}
|
|
.uni-panel-line {
|
flex: 1;
|
margin-right: 10px;
|
font-size: 11px;
|
display: inline-block;
|
color: #808080;
|
line-height: 20px;
|
font-weight: normal;
|
}
|
|
.uni-panel-text {
|
flex: 1;
|
margin-left: 4px;
|
}
|
|
.uni-panel-content {
|
display: flex;
|
flex: 1;
|
width: 100%;
|
background-color: transparent;
|
height: calc(100vh - 360px);
|
|
}
|
|
.uni-panel-personlist {
|
display: flex;
|
overflow: auto;
|
width: 100%;
|
background-color: transparent;
|
flex-direction: column !important;
|
}
|
|
.uni-panel-org-user image {
|
padding: 4px;
|
margin-right: 4px;
|
height: 28px;
|
width: 28px;
|
border-radius: 14px;
|
color: #007aff;
|
}
|
|
.uni-panel-person-bottom {
|
display: flex;
|
flex-direction: row;
|
align-items: flex-end;
|
/* align-items:center; */
|
justify-content: space-between;
|
width: 100%;
|
/* z-index: 101;
|
bottom: 0; */
|
background: white;
|
padding-top: 4px;
|
padding-bottom: 15px;
|
background: #eeeeee;
|
border-top: 1px solid #cccccc;
|
|
}
|
|
.uni-panel-selperson {
|
display: flex;
|
width: calc(100% - 81px);
|
flex-direction: row !important;
|
flex-wrap: wrap;
|
margin: 0px 4px 0px 12px;
|
overflow: auto;
|
min-height: 60px;
|
max-height: 150px;
|
border-radius: 5px;
|
/* border:1px solid #aaa; */
|
background-color: #ffffff;
|
}
|
|
.uni-panel-selperson-item {
|
display: flex;
|
flex-direction: column;
|
margin: 5px;
|
height: 50px;
|
width: 50px;
|
}
|
|
.uni-panel-selperson-item image {
|
margin: 2px 8px;
|
height: 32px;
|
width: 32px;
|
border-radius: 16px;
|
}
|
|
.uni-panel-selperson-item text {
|
width: 50px;
|
height: 18px;
|
text-align: center;
|
font-size: 12px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: clip;
|
}
|
|
.uni-panel-btn-ok {
|
padding: 8px 10px;
|
|
line-height: 1.6;
|
font-size: 14px;
|
color: #fff;
|
background-color: #00aaff;
|
border-radius: 5px;
|
height: 36px;
|
margin-right: 12px;
|
margin-bottom: 8px;
|
}
|
</style>
|
