user.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. <template>
  2. <view class="uni-app">
  3. <view class="status-bar" />
  4. <view class="main-container">
  5. <wk-nav-bar :title="navTitle">
  6. <!-- #ifndef MP-WEIXIN -->
  7. <button v-if="isRadio" class="button white-btn" @click="handleConfirm">
  8. 确定
  9. </button>
  10. <!-- #endif -->
  11. </wk-nav-bar>
  12. <wk-search-box @search="handleSearch" />
  13. <view class="list-scroll">
  14. <wk-select-list
  15. v-if="listData.length > 0"
  16. v-model="defaultVal"
  17. :list="listData"
  18. :label-field="typeObj.labelField"
  19. :value-field="typeObj.valueField"
  20. :max="bridge.maxlength"
  21. @change="handleChange">
  22. <template v-slot:default="{ scopeData }">
  23. <view class="user-item">
  24. <wk-avatar
  25. :avatar="scopeData.img"
  26. :name="scopeData.realname"
  27. :size="14"
  28. :preview="false"
  29. class="avatar" />
  30. <view class="username">
  31. {{ scopeData.realname }}
  32. </view>
  33. </view>
  34. </template>
  35. </wk-select-list>
  36. </view>
  37. <!-- #ifdef MP-WEIXIN -->
  38. <view v-if="isRadio" class="footer-btn-group">
  39. <button class="button" @click="handleConfirm">
  40. 确定
  41. </button>
  42. </view>
  43. <!-- #endif -->
  44. <view
  45. v-if="!isRadio"
  46. class="footer">
  47. <view class="left" @click="showPopup">
  48. <view class="total-box">
  49. <text class="total">
  50. 已选择:{{ selectedList.length }}人
  51. </text>
  52. <text class="wk wk-arrow-right icon" />
  53. </view>
  54. <view
  55. :class="{active: selectedList.length > 0}"
  56. class="desc">
  57. {{ selectedStr }}
  58. </view>
  59. </view>
  60. <view class="confirm-btn" @click="handleConfirm">
  61. 确定
  62. </view>
  63. </view>
  64. </view>
  65. <uni-popup
  66. ref="popup"
  67. radius="20rpx 20rpx 0 0"
  68. type="bottom">
  69. <view class="popup">
  70. <view class="popup-header">
  71. <text class="text">
  72. 已选择{{ selectedList.length }}人
  73. </text>
  74. <text class="confirm-btn" @click="handleConfirm">
  75. 确定
  76. </text>
  77. </view>
  78. <view class="popup-content">
  79. <view class="user-list">
  80. <view
  81. v-for="(item, index) in selectedList"
  82. :key="item.userId"
  83. class="user-list-item">
  84. <wk-avatar
  85. :avatar="item.img"
  86. :name="item.realname"
  87. :size="14"
  88. :preview="false"
  89. class="avatar" />
  90. <view class="text">
  91. {{ item.realname }}
  92. </view>
  93. <view class="remove-btn" @click="handleRemove(index)">
  94. 移除
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </uni-popup>
  101. </view>
  102. </template>
  103. <script>
  104. import { AdminQueryUserList } from 'API/admin'
  105. import { deepCopy } from '@/utils/lib.js'
  106. export default {
  107. name: 'UserChoose',
  108. data() {
  109. return {
  110. listData: [],
  111. userData: [],
  112. selectedList: [],
  113. defaultVal: [],
  114. typeObj: {
  115. labelField: 'realname',
  116. valueField: 'userId'
  117. },
  118. routerQuery: {},
  119. bridge: {}
  120. }
  121. },
  122. computed: {
  123. navTitle() {
  124. return this.bridge.title || '选择员工'
  125. },
  126. isRadio() {
  127. return this.bridge.maxlength === 1
  128. },
  129. selectedStr() {
  130. if (this.$isEmpty(this.selectedList)) return '请选择'
  131. return this.selectedList.map(o => o.realname).join(',')
  132. }
  133. },
  134. onLoad(options) {
  135. this.routerQuery = options || {}
  136. this.bridge = getApp().globalData.selectedValBridge.user || {}
  137. this.defaultVal = this.bridge.defaultVal || []
  138. this.handleChange(this.defaultVal)
  139. this.getList()
  140. },
  141. onUnload() {
  142. getApp().globalData.selectedValBridge = {}
  143. },
  144. methods: {
  145. /**
  146. * 获取选项列表
  147. */
  148. getList() {
  149. if (!this.$isEmpty(this.bridge.list)) {
  150. this.listData = this.bridge.list
  151. return
  152. }
  153. const otherParams = this.bridge.params || {} // 附加参数
  154. const params = {
  155. pageType: 0,
  156. ...otherParams
  157. }
  158. const request = this.bridge.request || AdminQueryUserList
  159. if (!request) return
  160. request(params).then(res => {
  161. this.userData = res.list
  162. this.listData = deepCopy(res.list)
  163. }).catch()
  164. },
  165. /**
  166. * 搜索
  167. * @param {String} keyword
  168. */
  169. handleSearch(keyword = '') {
  170. if (!keyword) {
  171. this.listData = deepCopy(this.userData)
  172. } else {
  173. this.listData = this.userData.filter(o => o.realname.indexOf(keyword) !== -1)
  174. }
  175. },
  176. /**
  177. * 保存记录选择的项
  178. * @param {Object} data
  179. */
  180. handleChange(data) {
  181. this.selectedList = data
  182. },
  183. showPopup() {
  184. this.$refs.popup.open()
  185. },
  186. handleRemove(index) {
  187. this.selectedList.splice(index, 1)
  188. },
  189. /**
  190. * 确认选择,通知上一级页面,员工已经选择
  191. */
  192. handleConfirm() {
  193. this.$refs.popup.close()
  194. const data = {
  195. guid: this.bridge.guid,
  196. bridge: this.bridge,
  197. data: this.selectedList
  198. }
  199. if (this.bridge.config && this.bridge.config.checkFn) {
  200. const res = this.bridge.config.checkFn(data)
  201. if (!res) return
  202. }
  203. uni.$emit('selected-user', data)
  204. this.$Router.navigateBack()
  205. }
  206. }
  207. }
  208. </script>
  209. <style scoped lang="scss">
  210. $active-color: #1C69FF;
  211. .main-container {
  212. display: flex;
  213. flex-direction: column;
  214. overflow: hidden;
  215. .list-scroll {
  216. flex: 1;
  217. overflow: auto;
  218. padding-bottom: 20rpx;
  219. .user-item {
  220. @include left;
  221. .avatar {
  222. width: 74rpx;
  223. height: 74rpx;
  224. flex-shrink: 0;
  225. margin-right: 20rpx;
  226. }
  227. .username {
  228. flex: 1;
  229. @include ellipsis;
  230. }
  231. }
  232. .dept-name {
  233. font-size: 22rpx;
  234. color: #666666;
  235. }
  236. }
  237. .footer {
  238. position: relative;
  239. z-index: 1;
  240. width: 100%;
  241. height: 104rpx;
  242. box-shadow: 0 -4rpx 14rpx rgba(220,220,220,0.7);
  243. background-color: white;
  244. padding: 0 4%;
  245. @include left;
  246. .left {
  247. flex: 1;
  248. overflow: hidden;
  249. margin-right: 30rpx;
  250. .total-box {
  251. width: 100%;
  252. font-size: $wk-font-base;
  253. color: $active-color;
  254. .total {
  255. margin-right: 15rpx;
  256. }
  257. .icon {
  258. transform: rotate(-90deg);
  259. display: inline-block;
  260. }
  261. }
  262. .desc {
  263. width: 100%;
  264. font-size: $wk-font-mini;
  265. color: $light;
  266. @include ellipsis;
  267. &.active {
  268. color: $gray;
  269. }
  270. }
  271. }
  272. .confirm-btn {
  273. width: 170rpx;
  274. height: 74rpx;
  275. font-size: $wk-font-base;
  276. color: white;
  277. border-radius: 12rpx;
  278. background-color: $active-color;
  279. flex-shrink: 0;
  280. @include center;
  281. }
  282. }
  283. }
  284. .popup {
  285. padding-bottom: 20rpx;
  286. .popup-header {
  287. position: relative;
  288. padding: 15rpx 38rpx;
  289. border-bottom: 1rpx solid $border-color;
  290. @include left;
  291. .text {
  292. flex: 1;
  293. color: $dark;
  294. font-size: $wk-font-medium;
  295. }
  296. .confirm-btn {
  297. color: $active-color;
  298. font-size: $wk-font-base;
  299. padding: 20rpx 0 20rpx 20rpx;
  300. }
  301. }
  302. .popup-content {
  303. min-height: 50vh;
  304. max-height: 80vh;
  305. overflow: auto;
  306. .remove-btn {
  307. width: 104rpx;
  308. height: 56rpx;
  309. font-size: $wk-font-base;
  310. border: 1rpx solid #D2D2D2;
  311. border-radius: 8rpx;
  312. @include center;
  313. }
  314. .user-list {
  315. .user-list-item {
  316. position: relative;
  317. width: 100%;
  318. font-size: $wk-font-medium;
  319. padding: 20rpx 4%;
  320. background-color: white;
  321. @include left;
  322. .text {
  323. flex: 1;
  324. margin-left: 36rpx;
  325. @include ellipsis
  326. }
  327. .avatar {
  328. width: 74rpx;
  329. height: 74rpx;
  330. }
  331. &::after {
  332. position: absolute;
  333. bottom: 1rpx;
  334. right: 0;
  335. content: '';
  336. width: calc(100% - 130rpx);
  337. height: 1rpx;
  338. background-color: #EBEEF1;
  339. display: block;
  340. }
  341. &:last-child::after {
  342. display: none;
  343. }
  344. }
  345. }
  346. }
  347. }
  348. </style>