初步封装人员多选组件

Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/organize-picker.vue

@@ -24,7 +24,8 @@ export default {
     placeholder: {},
     readonly: {},
     rootId: {},
-    rootType: {}
+    rootType: {},
+	multiple: {}
   },
 
   methods: {
@@ -34,16 +35,18 @@ export default {
       }
 
       this.ONCE('select-organize', data => {
-        this.$emit('input', data.id)
-        this.$emit('change', data.id)
+        this.$emit('input', data.id||data.map(t=>t.id).toString())
+        this.$emit('change', data.id||data.map(t=>t.id).toString())
       })
 
       const rootType = this.rootType || { user: 'department', department: 'company', company: 'company' }[this.type]
       const rootId = this.rootId
-
+	  
+	  let url_ = this.multiple?"select-organize-multiple":"select-organize"
+	  this.SET_PARAM(this.value)
       const url = rootId
-        ? `/pages/common/select-organize?type=${this.type}&rootId=${rootId}&rootType=${rootType}`
-        : `/pages/common/select-organize?type=${this.type}`
+        ? `/pages/common/${url_}?type=${this.type}&rootId=${rootId}&rootType=${rootType}`
+        : `/pages/common/${url_}?type=${this.type}`
 
       this.NAV_TO(url)
     }
@@ -54,8 +57,17 @@ export default {
       if (!this.value) {
         return this.placeholder
       }
-      const orgItem = this.GET_GLOBAL(this.type)[this.value]
-
+	  
+      const list = this.GET_GLOBAL(this.type)
+	  
+	  let values = this.value.split(",")
+	  if(values.length>1){
+		  const orgItems = values.map(t=>list[t].name).toString()
+		  return orgItems
+	  }
+	  
+	  const orgItem = list[this.value]
+	  
       return orgItem ? orgItem.name : this.placeholder
     },
 

Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/organize-tree.vue

@@ -33,7 +33,8 @@
 
       <!-- 开启按钮显示且级别对应，则显示按钮 -->
       <view v-if="button && root.type === level" class="tree-item-action">
-        <l-button @click="$emit('buttonClick', root)" line="green" size="sm">选择</l-button>
+        <l-button v-if="!selectIds.includes(root.id)" @click="itemClick(root)" line="green" size="sm">选择</l-button>
+		<l-button v-else @click="itemClick(root)" line="blue" size="sm">取消选择</l-button>
       </view>
     </view>
 
@@ -53,6 +54,7 @@
         :root="child"
         :button="button"
         :level="level"
+		:value="value"
       />
     </view>
   </view>
@@ -67,7 +69,8 @@ export default {
     root: { default: () => ({ type: 'company', id: '0' }) },
     level: { default: 'user' },
     button: {},
-    open: { default: true }
+    open: { default: true },
+	value:{},
   },
 
   data() {
@@ -76,7 +79,8 @@ export default {
       isLoading: false,
       isLoadOk: false,
       isEmpty: false,
-      children: []
+      children: [],
+	  selectIds:[]
     }
   },
 
@@ -87,6 +91,9 @@ export default {
   methods: {
     // 组件被创建
     async init() {
+	  if(this.value){
+		this.selectIds = this.value.split(",")
+	  }
       // 如果自己是根节点，则创建时直接加载子节点
       if (this.open) {
         await this.loadChildren()
@@ -111,6 +118,15 @@ export default {
 
       this.loadChildren()
     },
+	
+	itemClick(root){
+		if(this.selectIds.indexOf(root.id) !== -1){
+			this.selectIds.splice(this.selectIds.indexOf(root.id),1)
+		}else{
+			this.selectIds.push(root.id)
+		}
+		this.$emit('buttonClick', root)
+	},
 
     // 加载子节点
     async loadChildren() {

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json

@@ -153,6 +153,12 @@
 				"navigationBarTitleText": "选择公司/部门/员工"
 			}
 		},
+		{
+			"path": "pages/common/select-organize-multiple",
+			"style": {
+				"navigationBarTitleText": "选择公司/部门/员工"
+			}
+		},
 		{
 			"path": "pages/common/select-layer",
 			"style": {

Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/common/select-organize-multiple.vue

@@ -0,0 +1,141 @@
+<template>
+  <view id="contact" class="page">
+    <!-- 顶部搜索栏 -->
+	<view class="topSearch">
+		<l-banner v-model="searchText" :placeholder="placeholder" type="search" noSearchButton fill fixed />
+		<view class="">
+			<view class="pearson">
+				已选择人员：{{names||'暂无'}}
+			</view>
+			<view style="display: flex;justify-content: center;">
+				<view class="cu-btn sm line-green" @tap="itemConfirm" style="font-size: 16px;">
+					确定选择
+				</view>
+			</view>
+		</view>
+		
+	</view>
+
+    <!-- 树形列表 -->
+    <l-organize-tree v-if="type && !searchText" @buttonClick="itemClick" :level="type" :root="root" button :value="ids" />
+    <!-- 如果用户输入了搜索关键字，只列出用户 -->
+    <view v-else-if="type" 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:'',
+    }
+  },
+
+  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("user")[s]){
+				  items.push({...this.GET_GLOBAL("user")[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
+	},
+
+    // 某一项被点击，触发事件
+    itemClick(item) {
+	  this.items = this.findItem(this.items,item)
+      // 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;
+	}
+}
+</style>