合并qzc
commit
78fda6b1f7
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div class="breadcrumb" v-if="!keyword">
|
||||
<div class="breadcrumb">
|
||||
<text
|
||||
v-for="(item,index) in treePath"
|
||||
class="breadcrumb_item"
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
@click="breadcrumbClick(item,index)"
|
||||
>
|
||||
{{item.name}}
|
||||
<text v-if="(treePath.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
|
||||
</text>
|
||||
</div>
|
||||
<div :style="{height:'calc( 100vh - 280px)',overflow:'scroll'}">
|
||||
|
|
@ -44,14 +45,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="personList.length>0">
|
||||
<div v-if="treeData==null || keyword">
|
||||
<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in personList">
|
||||
<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
|
||||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
|
||||
<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
|
|
@ -90,22 +91,47 @@
|
|||
watch: {
|
||||
treePath(newData,oldData){
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
if(this.keyword){
|
||||
this.getPerson({code:last.code, name:this.keyword})
|
||||
}else{
|
||||
if(last.data.children === null){
|
||||
this.getPerson({code:last.code})
|
||||
}else{
|
||||
this.personList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getSearch(this.keyword)
|
||||
},
|
||||
methods: {
|
||||
getHighlight(val) {
|
||||
const keyword = this.keyword
|
||||
if (keyword && val.indexOf(keyword) !== -1) {
|
||||
const text = val.replace(keyword, `<text :style="{color:'#42cccc'}">${keyword}</text>`)
|
||||
console.log(text)
|
||||
return text
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
},
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
getSearch(e) {
|
||||
if(e){
|
||||
this.getPerson({name:e})
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
this.getPerson({name:e, code:last.code})
|
||||
}else{
|
||||
const last = this.treePath[this.treePath.length-1]
|
||||
if(last.data.children === null){
|
||||
this.getPerson({code:last.code})
|
||||
}else{
|
||||
// this.getPerson({code:last.code,name:'不可能查到的值'})
|
||||
this.personList = []
|
||||
}
|
||||
}
|
||||
|
|
@ -116,14 +142,15 @@
|
|||
let url = '/gunshiApp/xfflood/addressbook/list/query'
|
||||
if(name){
|
||||
//搜索名字
|
||||
url = '/gunshiApp/xfflood/addressbook/list/query?args='+name
|
||||
url = '/gunshiApp/xfflood/addressbook/list/query?args='+name+'&departmentCode='+code
|
||||
}else{
|
||||
//搜索code
|
||||
url = '/gunshiApp/xfflood/addressbook/list/query?departmentCode='+code
|
||||
}
|
||||
console.log('查询的url',url)
|
||||
const res = await uni.$http.get(url)
|
||||
this.personList = res.data.data
|
||||
console.log('查询的人员',res.data.data)
|
||||
console.log('查询的人员',res)
|
||||
}catch(e){
|
||||
this.personList = []
|
||||
//TODO handle the exception
|
||||
|
|
@ -235,6 +262,7 @@
|
|||
}
|
||||
.breadcrumb_item{
|
||||
padding: 8px;
|
||||
padding-right: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.deptItem{
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
|
||||
<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
|
|
@ -67,6 +67,12 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
async getData () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/attendee')
|
||||
|
|
|
|||
|
|
@ -22,15 +22,23 @@
|
|||
v-model="keyword"
|
||||
></u-search>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb" v-if="deptList.length>0">
|
||||
<text
|
||||
v-for="(item,index) in deptList"
|
||||
class="breadcrumb_item"
|
||||
>
|
||||
{{item.departmentName}}
|
||||
<text v-if="(deptList.length-1)!==index" :style="{marginLeft:'8px',color:'#000000'}">></text>
|
||||
</text>
|
||||
</div>
|
||||
<div class="mybody">
|
||||
<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in getList">
|
||||
<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
|
||||
<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
|
||||
<div class="personItemRow_right">
|
||||
<div class="personItemRow_right_top">
|
||||
<div :style="{width:'100px'}"><text>{{item.userName}}</text></div>
|
||||
<div :style="{flex:'1'}"><text>{{item.phone}}</text></div>
|
||||
<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
|
||||
<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
|
||||
</div>
|
||||
<div class="personItemRow_right_bottom">
|
||||
<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
|
||||
|
|
@ -54,23 +62,40 @@
|
|||
data() {
|
||||
return {
|
||||
keyword:'',
|
||||
list:[]
|
||||
list:[],
|
||||
deptList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getList() {
|
||||
if(this.keyword){
|
||||
return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1)
|
||||
return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1||o.phone.indexOf(this.keyword)!==-1)
|
||||
}else{
|
||||
return [...this.list]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
highlightKeyword(text, keyword) {
|
||||
const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
|
||||
return `<span style="color: red;">${match}</span>`;
|
||||
});
|
||||
return highlightedText;
|
||||
},
|
||||
async getData () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department')
|
||||
this.list = res.data.data
|
||||
console.log('人员信息',res)
|
||||
this.list = [...res.data.data,...res.data.data,...res.data.data,...res.data.data]
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
},
|
||||
async getDept () {
|
||||
try {
|
||||
const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/department/super')
|
||||
console.log('部门信息',res)
|
||||
this.deptList = res.data.data
|
||||
} catch (e) {
|
||||
uni.$showMsg()
|
||||
}
|
||||
|
|
@ -99,6 +124,7 @@
|
|||
},
|
||||
created() {
|
||||
this.getData()
|
||||
this.getDept()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -115,7 +141,7 @@
|
|||
}
|
||||
.mybody{
|
||||
background-color: #ffffff;
|
||||
margin: 5px 5px;
|
||||
// margin: 5px 5px;
|
||||
padding: 5px 0px;
|
||||
height: calc( 100vh - 100px );
|
||||
overflow: scroll;
|
||||
|
|
@ -150,4 +176,14 @@
|
|||
display: flex;
|
||||
justify-content: flex-start
|
||||
}
|
||||
.breadcrumb{
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.breadcrumb_item{
|
||||
padding: 8px;
|
||||
padding-right: 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue