app2.0 单选多选组件

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>

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

@@ -19,7 +19,7 @@ export default {
       type: null,
       contactList: [],
       searchText: '',
-      placeholder: '搜索公司名/部门名/职员姓名',
+      placeholder: '搜索学校名/部门名/职员姓名',
       root: { type: 'company', id: '0' }
     }
   },
@@ -41,8 +41,8 @@ export default {
     async init(type, rootId, rootType) {
       this.placeholder = {
         user: '搜索职员姓名',
-        department: '搜索公司名/部门名',
-        company: '搜索公司名/部门名/职员姓名'
+        department: '搜索学校名/部门名',
+        company: '搜索学校名/部门名/职员姓名'
       }[type]
 
       if (rootId && rootId !== 'undefined' && rootId !== 'null') {
@@ -50,7 +50,7 @@ export default {
       }
       this.type = type || 'user'
 
-      const selectType = { user: '职员', department: '部门', company: '公司' }[type]
+      const selectType = { user: '职员', department: '部门', company: '学校' }[type]
       this.SET_TITLE(`请选择一个${selectType}`)
     },