index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <u-popup :show="isShow" @close="close" :closeOnClickOverlay="false">
  3. <view class="container">
  4. <view class="search">
  5. <u-row>
  6. <u-col :span="2" v-if="multiple">
  7. <view class="all-choosed">
  8. <image
  9. @click="handleChooseAll"
  10. :src="allChecked?'/static/icon/choosed.png':'/static/icon/nochoose.png'"
  11. class="choosed-image">
  12. </image>
  13. 全选
  14. </view>
  15. </u-col>
  16. <u-col :span="!multiple?12:10">
  17. <u-search
  18. v-model="search.text"
  19. placeholder="关键字搜索"
  20. @search="handleSearch"
  21. @custom="handleSearch"
  22. >
  23. </u-search>
  24. </u-col>
  25. </u-row>
  26. </view>
  27. <view class="last">
  28. <u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast">
  29. <u-icon name="arrow-up" color="#2979ff" size="28"></u-icon>
  30. </u-button>
  31. </view>
  32. <view class="list">
  33. <template v-for="(item,index) in showList">
  34. <view class="item" :key="index"
  35. @click="handleClick(item)"
  36. >
  37. <image
  38. v-if="multiple"
  39. :src="item.checked?'/static/icon/choosed.png':'/static/icon/nochoose.png'"
  40. class="choosed-image">
  41. </image>
  42. <view>
  43. <view class="item-value"
  44. :class="{
  45. 'is-disabled': renderItem(item,'disabled')
  46. }"
  47. >
  48. {{item[objMap.label]}}<text v-if="hasTip && !isNull(renderItem(item,'tip'))">{{renderItem(item,'tip')}}</text>
  49. </view>
  50. </view>
  51. </view>
  52. </template>
  53. <view class="empty" v-if="showList.length==0">暂无数据</view>
  54. </view>
  55. <view class="next">
  56. <u-button type="primary" :plain="true" :disabled="page==totalPage" @click="handleNext">
  57. <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
  58. </u-button>
  59. </view>
  60. <view class="page-footer" v-if="multiple">
  61. <u-row style="">
  62. <u-col :span="6">
  63. <u-button type="info" shape="" :hairline="false" :custom-style="{
  64. width: '100%',
  65. borderRadius: '0',
  66. background: '#FFF',
  67. height: '100rpx',
  68. fontSize: '32rpx',
  69. fontWeight: '500',
  70. }" @click="handleClose">取消
  71. </u-button>
  72. </u-col>
  73. <u-col :span="6">
  74. <u-button type="primary" shape="" :hairline="false" :custom-style="{
  75. width: '100%',
  76. borderRadius: '0',
  77. height: '100rpx',
  78. fontSize: '32rpx',
  79. fontWeight: '500',
  80. background:'linear-gradient(to right, #41B5FF, #4573FC)',
  81. }" @click="handleSubmit">确认
  82. </u-button>
  83. </u-col>
  84. </u-row>
  85. </view>
  86. </view>
  87. </u-popup>
  88. </template>
  89. <script>
  90. import {isArray,clone } from 'lodash'
  91. import {getImages} from '@/plugins/images'
  92. export default {
  93. props: {
  94. //单页展示数据量
  95. size: {
  96. type: Number,
  97. default: 30
  98. },
  99. // 多选
  100. multiple: {
  101. type: Boolean,
  102. default: false
  103. },
  104. dataList: {
  105. type: Array,
  106. default: () => []
  107. },
  108. objMap: {
  109. type: Object,
  110. default: () => {
  111. return {
  112. label: 'label',
  113. value: 'value',
  114. }
  115. }
  116. },
  117. hasTip: {
  118. type: Boolean,
  119. default: false
  120. },
  121. },
  122. data() {
  123. return {
  124. allChecked: false,
  125. isShow: false,
  126. loadding: false,
  127. page: 1,
  128. total: 0,
  129. totalPage: 0,
  130. search: {
  131. text: ''
  132. },
  133. orginList: [],
  134. resultList: [], //搜索结果集合
  135. showList: [],
  136. }
  137. },
  138. mounted() {
  139. },
  140. watch: {
  141. dataList: {
  142. immediate: true,
  143. deep: true,
  144. handler(newVal) {
  145. this.getData()
  146. }
  147. }
  148. },
  149. methods: {
  150. show() {
  151. this.isShow= true;
  152. },
  153. handleChooseAll() {
  154. this.allChecked = !this.allChecked
  155. this.resultList.map(e => {
  156. if(!this.renderItem(e,'disabled')) e.checked = this.allChecked
  157. })
  158. },
  159. computeCheckedData() {
  160. let allLength = this.resultList.filter((e) => !this.renderItem(e,'disabled')).length
  161. let checedLength = this.resultList.filter((e) => e.checked).length
  162. if(allLength == checedLength) {
  163. this.allChecked = true
  164. } else {
  165. this.allChecked = false
  166. }
  167. },
  168. getChoosed() {
  169. let data = this.orginList.filter((e) => e.checked)
  170. this.$emit('confirm',data)
  171. },
  172. handleClick(e) {
  173. if(this.renderItem(e,'disabled')) return
  174. if(this.multiple) {
  175. e.checked=!e.checked
  176. this.computeCheckedData()
  177. } else {
  178. console.log(e,'e')
  179. this.$emit('confirm',e);
  180. this.isShow = false;
  181. }
  182. },
  183. handleSearch() {
  184. this.page = 1
  185. if(this.search.text) {
  186. this.resultList = this.orginList.filter((e) => e[this.objMap.label].includes(this.search.text))
  187. } else {
  188. this.resultList = clone(this.orginList)
  189. }
  190. this.computeCheckedData()
  191. this.totalPage = Math.ceil(this.resultList.length / this.size)
  192. this.handlePageData()
  193. },
  194. //上一页
  195. handleLast() {
  196. if(this.page != 1) this.page -= 1;
  197. this.handlePageData()
  198. },
  199. //下一页
  200. handleNext() {
  201. if(this.page != this.totalPage) this.page += 1;
  202. this.handlePageData()
  203. },
  204. //处理分页数据
  205. handlePageData() {
  206. let index = (this.page - 1) * this.size
  207. this.showList = clone(this.resultList).splice(index,this.size)
  208. },
  209. getData() {
  210. let that = this;
  211. if(isArray(this.dataList)) {
  212. this.dataList.forEach((item) => {
  213. let obj = {
  214. ...item,
  215. checked: false,
  216. }
  217. this.orginList.push(obj);
  218. })
  219. this.$emit('onDataLoad',this.orginList)
  220. this.handleSearch()
  221. } else {
  222. this.orginList = [];
  223. this.showList = [];
  224. this.page = 1
  225. this.totalPage = 0
  226. }
  227. },
  228. close() {
  229. this.isShow = false
  230. this.allChecked = true
  231. this.handleChooseAll()
  232. },
  233. handleClose() {
  234. this.close()
  235. },
  236. handleSubmit() {
  237. if(this.multiple) this.getChoosed()
  238. this.close()
  239. },
  240. }
  241. }
  242. </script>
  243. <style lang="scss" scoped>
  244. /* 内容satrt */
  245. .container {
  246. background: #fff;
  247. .search {
  248. padding: 20rpx 40rpx 20rpx 40rpx;
  249. .all-choosed {
  250. display: flex;
  251. justify-content: flex-start;
  252. align-items: center;
  253. font-size: 24rpx;
  254. }
  255. }
  256. .list {
  257. height: calc(100vh - 540rpx);
  258. padding: 0 20rpx;
  259. overflow-y: auto;
  260. .item {
  261. padding: 20rpx 20rpx;
  262. display: flex;
  263. align-items: center;
  264. .item-value {
  265. font-size: 24rpx;
  266. }
  267. .item-label {
  268. font-size: 24rpx;
  269. }
  270. .is-disabled {
  271. color: #909193;
  272. }
  273. // border-bottom: 2rpx solid #ddd;
  274. }
  275. .empty {
  276. display: flex;
  277. align-items: center;
  278. justify-content: center;
  279. height: calc(100vh - 400rpx);
  280. color: #909193;
  281. min-height: 800rpx;
  282. }
  283. }
  284. .last,.next {
  285. margin: 10rpx 40rpx;
  286. display: flex;
  287. justify-content: center;
  288. align-items: center;
  289. }
  290. .page-footer {
  291. // position: absolute;
  292. width: 100%;
  293. left: 0;
  294. bottom: 0;
  295. }
  296. }
  297. /* 内容end */
  298. .choosed-image {
  299. width: 40rpx;
  300. height: 40rpx;
  301. margin-right: 10rpx;
  302. }
  303. </style>