crm-mobile/pages/home/chooseUserOrDept.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="员工与部门" />

      <view ref="wkTabs" class="wk-tabs">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{active: activeTab === tab.value}"
          class="wk-tab-item"
          @click="handleToggleTabs(tab.value)">
          {{ tab.label }}
        </view>
      </view>

      <wk-search-box class="search-box" @search="handleSearch" />

      <view class="container">
        <wk-select-list
          v-if="activeTab === 1"
          v-model="selectedList"
          :max="1"
          :list="deptList"
          label-field="name"
          value-field="id"
          @change="handleChange" />
        <wk-select-list
          v-else-if="activeTab === 2"
          v-model="selectedList"
          :list="userList"
          :max="1"
          label-field="realname"
          value-field="userId"
          @change="handleChange">
          <template v-slot:default="{ scopeData }">
            <view>{{ scopeData.realname }}</view>
            <view class="dept-name">
              {{ scopeData.deptName }}
            </view>
          </template>
        </wk-select-list>
      </view>

      <view class="footer">
        <view class="left">
          已选择：{{ selectedStr }}
        </view>
        <button class="confirm-btn" @click="handleConfirm">
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  import { AdminQueryDeptTree, AdminQueryUserList } from 'API/admin'

  export default {
    name: 'ChooseUserOrDept',
    data() {
      return {
        activeTab: null,
        tabs: [
          { label: '部门', value: 1 },
          { label: '员工', value: 2 }
        ],

        allUserList: [],
        allDeptList: [],
        userList: [],
        deptList: [],

        bridge: {},
        selectedType: null,
        selectedList: []
      }
    },
    computed: {
      selectedStr() {
        if (this.selectedList.length === 0) return ''
        if (this.selectedType === 1) {
          return this.selectedList[0].name
        } else if (this.selectedType === 2) {
          return this.selectedList[0].realname
        } else {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.selectedList = []
          return ''
        }
      }
    },
    mounted() {
      this.bridge = getApp().globalData.selectedValBridge.userOrDept || {}
      if (this.bridge.data) {
        this.activeTab = this.bridge.data.type || 1
        this.selectedType = this.activeTab
        this.selectedList = this.bridge.data.data || []
      }
      this.getData()
    },
    onUnload() {
      getApp().globalData.selectedValBridge = {}
    },
    methods: {
      /**
       * 获取列表数据
       */
      getData() {
        AdminQueryUserList({
          pageType: 0
        }).then(res => {
          console.log('userList', res)
          this.allUserList = res.list
          this.userList = [...res.list]
        }).catch()

        AdminQueryDeptTree({
          search: ''
        }).then(res => {
          console.log('deptList', res)
          this.allDeptList = res
          this.deptList = [...res]
        }).catch()
      },

      /**
       * 切换tab
       * @param {Number} val
       */
      handleToggleTabs(val) {
        this.activeTab = null
        this.$nextTick(() => {
          this.activeTab = val
          this.removeSearch()
        })
      },

      handleChange(data) {
        if (data.length > 0) {
          this.selectedType = this.activeTab
        }
      },

      handleSearch(keyword) {
        if (!keyword) {
          this.removeSearch()
        } else {
          if (this.activeTab === 1) {
            this.deptList = this.allDeptList.filter(o => o.name.indexOf(keyword) !== -1)
          } else if (this.activeTab === 2) {
            this.userList = this.allUserList.filter(o => o.realname.indexOf(keyword) !== -1)
          }
        }
      },

      removeSearch() {
        if (this.activeTab === 1) {
          this.deptList = [...this.allDeptList]
        } else if (this.activeTab === 2) {
          this.userList = [...this.allUserList]
        }
      },

      /**
       * 确认选择
       */
      handleConfirm() {
        const data = {
          guid: this.bridge.guid,
          bridge: this.bridge,
          data: {
            data: this.selectedList,
            type: this.selectedType
          }
        }
        uni.$emit('selected-user-dept', data)
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		.wk-tabs {
			width: 100%;
			background-color: white;
			// margin-bottom: 15rpx;
		}

		.container {
			flex: 1;
			background-color: white;
			overflow: auto;
			.dept-name {
				font-size: 22rpx;
				color: #666666;
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			background-color: white;
			padding: 0 32rpx;
			margin-top: 15rpx;
			@include left;
			.left {
				flex: 1;
				color: $theme-color;
				font-size: $wk-font-base;
			}
			.confirm-btn {
				width: 120rpx;
				height: 60rpx;
				color: white;
				font-size: $wk-font-base;
				line-height: 60rpx;
				border-radius: 6rpx;
				background-color: $theme-color;
			}
		}
	}
</style>