bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view id="contact" class="page">
    <!-- 顶部搜索栏 -->
	<view class="topSearch">
		<!-- <view style="padding-top: 54px;"> -->
			<l-banner v-model="searchText" :placeholder="placeholder" type="search" noSearchButton fill />
		<!-- </view> -->
		<view>
			<view class="pearson">
				已选择：{{names||'暂无'}}
			</view>
			<view style="display: flex;justify-content: center;">
				<view class="cu-btn sm line-red" @tap="itemClear" style="font-size: 16px;margin: 4px;">
					清空选择
				</view>
				<view class="cu-btn sm line-green" @tap="itemConfirm" style="font-size: 16px;margin: 4px;">
					确定选择
				</view>
			</view>
		</view>
	</view>

    <!-- 树形列表 -->
    <l-organize-tree v-if="type && !searchText && refreshFlag" @buttonClick="itemClick" :level="type" :root="root" button :value="ids" />
    <!-- 如果用户输入了搜索关键字，只列出用户 -->
    <view v-else-if="type && refreshFlag" class="user-item-list">
      <l-organize-single-item v-for="item of searchList" @buttonClick="itemClick" :key="item.id" :item="item" button :value="ids" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      contactList: [],
      searchText: '',
      placeholder: '搜索公司名/部门名/职员姓名',
      root: { type: 'company', id: '0' },
	  items:[],
	  ids:'',
	  refreshFlag:true,
    }
  },

  onBackPress() {
    this.OFF('select-organize')
  },

  onUnload() {
    this.OFF('select-organize')
  },

  async onLoad({ type, rootId, rootType }) {
    await this.init(type, rootId, rootType)
  },

  methods: {
    // 加载页面
    async init(type, rootId, rootType) {
	  this.ids = this.GET_PARAM()
	  if(this.ids){
		  let arr = this.ids.split(",")
		  let items = []
		  for (let s of arr) {
			  if(this.GET_GLOBAL(type)[s]){
				  items.push({...this.GET_GLOBAL(type)[s],id:s})
			  }
		  }
		  this.items = items
	  }
      this.placeholder = {
        user: '搜索职员姓名',
        department: '搜索公司名/部门名',
        company: '搜索公司名/部门名/职员姓名'
      }[type]

      if (rootId && rootId !== 'undefined' && rootId !== 'null') {
        this.root = { id: rootId, type: rootType }
      }
      this.type = type || 'user'

      const selectType = { user: '职员', department: '部门', company: '公司' }[type]
      this.SET_TITLE(`请选择${selectType}`)
    },
	
	findItem(arr,item){
		const result = arr.findIndex(t => t.id === item.id);
		if(result === -1){
			arr.push(item)
		}else{
			arr.splice(result,1)
		}
		return arr
	},
	
	itemClear(){
		this.items = []
		this.ids = ''
		this.refreshFlag = false
		this.$nextTick(()=>{
			this.refreshFlag = true
		})
	},

    // 某一项被点击，触发事件
    itemClick(item) {
	  this.items = this.findItem(this.items,item)
	  this.ids = this.items.map(t=>t.id).toString()
      // this.EMIT('select-organize', item)
      // this.NAV_BACK()
    },
	
	itemConfirm(){
		this.EMIT('select-organize', this.items)
		this.NAV_BACK()
	}
  },

  computed: {
    // 用户输入关键字搜索时的列表
    searchList() {
      if (!this.searchText) {
        return []
      }

      return Object.entries(this.GET_GLOBAL(this.type))
        .filter(([id, item]) => item.name.includes(this.searchText))
        .map(([id, item]) => ({
          ...item,
          type: this.type,
          id
        }))
    },
	names(){
		if(!this.items.length){
			return ''
		}
		return this.items.map(t=>t.name).toString()
	}
  }
}
</script>

<style lang="scss">
// page {
//   padding-top: 100rpx;
// }
.topSearch{
	.pearson{
		color: #606266;
		line-height: 32px;
		padding: 6px 8px;
	}
}
</style>