123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- <template>
- <view class="uni-app">
- <view class="status-bar" />
- <view class="main-container">
- <wk-nav-bar :title="navTitle">
- <!-- #ifndef MP-WEIXIN -->
- <button v-if="isRadio" class="button white-btn" @click="handleConfirm">
- 确定
- </button>
- <!-- #endif -->
- </wk-nav-bar>
-
- <wk-search-box @search="handleSearch" />
-
- <view class="list-scroll">
- <wk-select-list
- v-if="listData.length > 0"
- v-model="defaultVal"
- :list="listData"
- :label-field="typeObj.labelField"
- :value-field="typeObj.valueField"
- :max="bridge.maxlength"
- @change="handleChange">
- <template v-slot:default="{ scopeData }">
- <view class="user-item">
- <wk-avatar
- :avatar="scopeData.img"
- :name="scopeData.realname"
- :size="14"
- :preview="false"
- class="avatar" />
- <view class="username">
- {{ scopeData.realname }}
- </view>
- </view>
- </template>
- </wk-select-list>
- </view>
-
- <!-- #ifdef MP-WEIXIN -->
- <view v-if="isRadio" class="footer-btn-group">
- <button class="button" @click="handleConfirm">
- 确定
- </button>
- </view>
- <!-- #endif -->
-
- <view
- v-if="!isRadio"
- class="footer">
- <view class="left" @click="showPopup">
- <view class="total-box">
- <text class="total">
- 已选择:{{ selectedList.length }}人
- </text>
- <text class="wk wk-arrow-right icon" />
- </view>
- <view
- :class="{active: selectedList.length > 0}"
- class="desc">
- {{ selectedStr }}
- </view>
- </view>
- <view class="confirm-btn" @click="handleConfirm">
- 确定
- </view>
- </view>
- </view>
-
- <uni-popup
- ref="popup"
- radius="20rpx 20rpx 0 0"
- type="bottom">
- <view class="popup">
- <view class="popup-header">
- <text class="text">
- 已选择{{ selectedList.length }}人
- </text>
- <text class="confirm-btn" @click="handleConfirm">
- 确定
- </text>
- </view>
-
- <view class="popup-content">
- <view class="user-list">
- <view
- v-for="(item, index) in selectedList"
- :key="item.userId"
- class="user-list-item">
- <wk-avatar
- :avatar="item.img"
- :name="item.realname"
- :size="14"
- :preview="false"
- class="avatar" />
-
- <view class="text">
- {{ item.realname }}
- </view>
-
- <view class="remove-btn" @click="handleRemove(index)">
- 移除
- </view>
- </view>
- </view>
- </view>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- import { AdminQueryUserList } from 'API/admin'
- import { deepCopy } from '@/utils/lib.js'
-
- export default {
- name: 'UserChoose',
- data() {
- return {
- listData: [],
- userData: [],
- selectedList: [],
- defaultVal: [],
-
- typeObj: {
- labelField: 'realname',
- valueField: 'userId'
- },
-
- routerQuery: {},
- bridge: {}
- }
- },
- computed: {
- navTitle() {
- return this.bridge.title || '选择员工'
- },
- isRadio() {
- return this.bridge.maxlength === 1
- },
- selectedStr() {
- if (this.$isEmpty(this.selectedList)) return '请选择'
- return this.selectedList.map(o => o.realname).join(',')
- }
- },
- onLoad(options) {
- this.routerQuery = options || {}
- this.bridge = getApp().globalData.selectedValBridge.user || {}
- this.defaultVal = this.bridge.defaultVal || []
- this.handleChange(this.defaultVal)
- this.getList()
- },
- onUnload() {
- getApp().globalData.selectedValBridge = {}
- },
- methods: {
- /**
- * 获取选项列表
- */
- getList() {
- if (!this.$isEmpty(this.bridge.list)) {
- this.listData = this.bridge.list
- return
- }
- const otherParams = this.bridge.params || {} // 附加参数
- const params = {
- pageType: 0,
- ...otherParams
- }
-
- const request = this.bridge.request || AdminQueryUserList
- if (!request) return
- request(params).then(res => {
- this.userData = res.list
- this.listData = deepCopy(res.list)
- }).catch()
- },
-
- /**
- * 搜索
- * @param {String} keyword
- */
- handleSearch(keyword = '') {
- if (!keyword) {
- this.listData = deepCopy(this.userData)
- } else {
- this.listData = this.userData.filter(o => o.realname.indexOf(keyword) !== -1)
- }
- },
-
- /**
- * 保存记录选择的项
- * @param {Object} data
- */
- handleChange(data) {
- this.selectedList = data
- },
-
- showPopup() {
- this.$refs.popup.open()
- },
- handleRemove(index) {
- this.selectedList.splice(index, 1)
- },
-
- /**
- * 确认选择,通知上一级页面,员工已经选择
- */
- handleConfirm() {
- this.$refs.popup.close()
- const data = {
- guid: this.bridge.guid,
- bridge: this.bridge,
- data: this.selectedList
- }
- if (this.bridge.config && this.bridge.config.checkFn) {
- const res = this.bridge.config.checkFn(data)
- if (!res) return
- }
- uni.$emit('selected-user', data)
- this.$Router.navigateBack()
- }
- }
- }
- </script>
- <style scoped lang="scss">
- $active-color: #1C69FF;
-
- .main-container {
- display: flex;
- flex-direction: column;
- overflow: hidden;
- .list-scroll {
- flex: 1;
- overflow: auto;
- padding-bottom: 20rpx;
-
- .user-item {
- @include left;
- .avatar {
- width: 74rpx;
- height: 74rpx;
- flex-shrink: 0;
- margin-right: 20rpx;
- }
- .username {
- flex: 1;
- @include ellipsis;
- }
- }
- .dept-name {
- font-size: 22rpx;
- color: #666666;
- }
- }
-
- .footer {
- position: relative;
- z-index: 1;
- width: 100%;
- height: 104rpx;
- box-shadow: 0 -4rpx 14rpx rgba(220,220,220,0.7);
- background-color: white;
- padding: 0 4%;
- @include left;
- .left {
- flex: 1;
- overflow: hidden;
- margin-right: 30rpx;
- .total-box {
- width: 100%;
- font-size: $wk-font-base;
- color: $active-color;
- .total {
- margin-right: 15rpx;
- }
- .icon {
- transform: rotate(-90deg);
- display: inline-block;
- }
- }
- .desc {
- width: 100%;
- font-size: $wk-font-mini;
- color: $light;
- @include ellipsis;
- &.active {
- color: $gray;
- }
- }
- }
- .confirm-btn {
- width: 170rpx;
- height: 74rpx;
- font-size: $wk-font-base;
- color: white;
- border-radius: 12rpx;
- background-color: $active-color;
- flex-shrink: 0;
- @include center;
- }
- }
- }
-
- .popup {
- padding-bottom: 20rpx;
-
- .popup-header {
- position: relative;
- padding: 15rpx 38rpx;
- border-bottom: 1rpx solid $border-color;
- @include left;
- .text {
- flex: 1;
- color: $dark;
- font-size: $wk-font-medium;
- }
- .confirm-btn {
- color: $active-color;
- font-size: $wk-font-base;
- padding: 20rpx 0 20rpx 20rpx;
- }
- }
- .popup-content {
- min-height: 50vh;
- max-height: 80vh;
- overflow: auto;
-
- .remove-btn {
- width: 104rpx;
- height: 56rpx;
- font-size: $wk-font-base;
- border: 1rpx solid #D2D2D2;
- border-radius: 8rpx;
- @include center;
- }
- .user-list {
- .user-list-item {
- position: relative;
- width: 100%;
- font-size: $wk-font-medium;
- padding: 20rpx 4%;
- background-color: white;
- @include left;
- .text {
- flex: 1;
- margin-left: 36rpx;
- @include ellipsis
- }
- .avatar {
- width: 74rpx;
- height: 74rpx;
- }
- &::after {
- position: absolute;
- bottom: 1rpx;
- right: 0;
- content: '';
- width: calc(100% - 130rpx);
- height: 1rpx;
- background-color: #EBEEF1;
- display: block;
- }
- &:last-child::after {
- display: none;
- }
- }
- }
- }
- }
- </style>
|