app2.0 同步长阳分支多选组件

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

@@ -7,7 +7,12 @@
 
   <!-- #ifndef MP-DINGTALK -->
   <l-label @click="click" :arrow="!readonly" :required="required" :title="title">
-    {{ display || displayPlaceholder }}
+    <!-- {{ display || displayPlaceholder }} -->
+	<view style="white-space: normal;min-height: 54px;display: flex;align-items: center;justify-content: right;">
+		<view style="line-height: 24px;">
+			{{ display || displayPlaceholder }}
+		</view>
+	</view>
   </l-label>
   <!-- #endif -->
 </template>
@@ -24,7 +29,8 @@ export default {
     placeholder: {},
     readonly: {},
     rootId: {},
-    rootType: {}
+    rootType: {},
+	multiple: {}
   },
 
   methods: {
@@ -34,16 +40,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 +62,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]?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-single-item.vue

@@ -10,32 +10,80 @@
     ></image>
 
     <!-- 名称 -->
-    <text class="tree-item-title">{{ item.name }}</text>
+    <text class="tree-item-title">{{ item.name + (item.mobile ? '(' +item.mobile + ')' : "")  }}</text>
 
     <!-- 用户标签 -->
     <l-tag :line="tagColor" size="sm" class="margin-left-sm">{{ tagName }}</l-tag>
+	
+	<uni-view v-if="item.type === 'user' && item.mobile" class="margin-left-sm sm line-gray cu-tag" style="z-index: 1;" @tap="copy(item.mobile)">复制</uni-view>
 
     <!-- 如果开启选择按钮显示，并且级别符合，则显示按钮 -->
     <view v-if="button" class="tree-item-action">
-      <l-button @click="$emit('buttonClick', item)" line="green" size="sm">选择</l-button>
+	  <l-button v-if="!selectIds.includes(item.id)" @click="itemClick(item)" line="green" size="sm">选择</l-button>
+	  <l-button v-else @click="itemClick(item)" line="blue" size="sm">取消选择</l-button>
     </view>
   </view>
 </template>
 
 <script>
+import uniCopy from "@/common/js/uni-copy.js"
 export default {
   name: 'l-organize-single-item',
 
   props: {
     item: {},
-    button: {}
+    button: {},
+	value:{},
+  },
+  
+  data(){
+	  return{
+		selectIds:[],
+	  }
+  },
+  
+  created() {
+  	this.init()
   },
 
   methods: {
+	init(){
+		if(this.value){
+			this.selectIds = this.value.split(",")
+		}
+	},
     // 点击事件
     click(e) {
       this.$emit('click', e)
-    }
+    },
+	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)
+	},
+	
+	copy(mobile){
+		uniCopy({
+			content:mobile,
+			success:(res)=>{
+				uni.showToast({
+					title: "复制手机号成功~",
+					icon: 'none',
+					duration:3000,
+				})
+			},
+			error:(e)=>{
+				uni.showToast({
+					title: e,
+					icon: 'none',
+					duration:3000,
+				})
+			}
+		})
+	}
   },
 
   computed: {

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

@@ -21,16 +21,20 @@
       ></image>
 
       <!-- 名称 -->
-      <text class="tree-item-title">{{ name }}</text>
+      <!-- <text class="tree-item-title">{{ name }}</text> -->
+      <text class="tree-item-title">{{ name + (mobile ? '(' +mobile + ')' : "") }}</text>
 
       <!-- 非用户，显示后置标题 -->
       <l-tag v-if="root.type !== 'user' || staffTag" :line="tagColor" size="sm" class="margin-left-sm">
         {{ tagName }}
       </l-tag>
+	  
+	  <uni-view v-if="root.type === 'user' && mobile" class="margin-left-sm sm line-gray cu-tag" style="z-index: 1;" @tap="copy(mobile)">复制</uni-view>
 
       <!-- 开启按钮显示且级别对应，则显示按钮 -->
       <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>
 
@@ -50,12 +54,14 @@
         :root="child"
         :button="button"
         :level="level"
+		:value="value"
       />
     </view>
   </view>
 </template>
 
 <script>
+import uniCopy from "@/common/js/uni-copy.js"
 export default {
   name: 'l-organize-tree',
 
@@ -63,7 +69,8 @@ export default {
     root: { default: () => ({ type: 'company', id: '0' }) },
     level: { default: 'user' },
     button: {},
-    open: { default: true }
+    open: { default: true },
+	value:{},
   },
 
   data() {
@@ -72,7 +79,8 @@ export default {
       isLoading: false,
       isLoadOk: false,
       isEmpty: false,
-      children: []
+      children: [],
+	  selectIds:[]
     }
   },
 
@@ -83,6 +91,9 @@ export default {
   methods: {
     // 组件被创建
     async init() {
+	  if(this.value){
+		this.selectIds = this.value.split(",")
+	  }
       // 如果自己是根节点，则创建时直接加载子节点
       if (this.open) {
         await this.loadChildren()
@@ -107,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() {
@@ -159,7 +179,27 @@ export default {
       this.isLoadOk = true
       this.isOpen = true
       this.isLoading = false
-    }
+    },
+	
+	copy(mobile){
+		uniCopy({
+			content:mobile,
+			success:(res)=>{
+				uni.showToast({
+					title: "复制手机号成功~",
+					icon: 'none',
+					duration:3000,
+				})
+			},
+			error:(e)=>{
+				uni.showToast({
+					title: e,
+					icon: 'none',
+					duration:3000,
+				})
+			}
+		})
+	}
   },
 
   computed: {
@@ -196,6 +236,14 @@ export default {
       const rootItem = this.GET_GLOBAL(this.root.type)[this.root.id]
       return rootItem ? rootItem.name : '(根节点)'
     },
+	mobile() {
+	  if (this.root.mobile) {
+	    return this.root.mobile
+	  }
+	
+	  const rootItem = this.GET_GLOBAL(this.root.type)[this.root.id]
+	  return rootItem ? rootItem.mobile: '(根节点)'
+	},
 
     // 头像圆形/方形显示参数
     roundAvatar() {

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

@@ -146,6 +146,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,157 @@
+<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>