123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341 |
- <template>
- <u-popup :show="isShow" @close="close" :closeOnClickOverlay="false">
- <view class="container">
- <view class="search">
- <u-row>
- <u-col :span="2" v-if="multiple">
- <view class="all-choosed">
- <image
- @click="handleChooseAll"
- :src="allChecked?'/static/icon/choosed.png':'/static/icon/nochoose.png'"
- class="choosed-image">
- </image>
- 全选
- </view>
- </u-col>
- <u-col :span="!multiple?12:10">
- <u-search
- v-model="search.text"
- placeholder="关键字搜索"
- @search="handleSearch"
- @custom="handleSearch"
- >
- </u-search>
- </u-col>
- </u-row>
- </view>
- <view class="last">
- <u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast">
- <u-icon name="arrow-up" color="#2979ff" size="28"></u-icon>
- </u-button>
- </view>
- <view class="list">
- <template v-for="(item,index) in showList">
- <view class="item" :key="index"
- @click="handleClick(item)"
- >
- <image
- v-if="multiple"
- :src="item.checked?'/static/icon/choosed.png':'/static/icon/nochoose.png'"
- class="choosed-image">
- </image>
- <view>
- <view class="item-value"
- :class="{
- 'is-disabled': renderItem(item,'disabled')
- }"
- >
- {{item[objMap.label]}}<text v-if="hasTip && !isNull(renderItem(item,'tip'))">{{renderItem(item,'tip')}}</text>
- </view>
- </view>
-
- </view>
- </template>
-
- <view class="empty" v-if="showList.length==0">暂无数据</view>
- </view>
- <view class="next">
- <u-button type="primary" :plain="true" :disabled="page==totalPage" @click="handleNext">
- <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
- </u-button>
- </view>
-
- <view class="page-footer" v-if="multiple">
- <u-row style="">
- <u-col :span="6">
- <u-button type="info" shape="" :hairline="false" :custom-style="{
- width: '100%',
- borderRadius: '0',
- background: '#FFF',
- height: '100rpx',
- fontSize: '32rpx',
- fontWeight: '500',
- }" @click="handleClose">取消
- </u-button>
- </u-col>
- <u-col :span="6">
- <u-button type="primary" shape="" :hairline="false" :custom-style="{
- width: '100%',
- borderRadius: '0',
- height: '100rpx',
- fontSize: '32rpx',
- fontWeight: '500',
- background:'linear-gradient(to right, #41B5FF, #4573FC)',
- }" @click="handleSubmit">确认
- </u-button>
- </u-col>
- </u-row>
-
- </view>
- </view>
- </u-popup>
- </template>
- <script>
- import {isArray,clone } from 'lodash'
- import {getImages} from '@/plugins/images'
- export default {
- props: {
- //单页展示数据量
- size: {
- type: Number,
- default: 30
- },
- // 多选
- multiple: {
- type: Boolean,
- default: false
- },
- dataList: {
- type: Array,
- default: () => []
- },
- objMap: {
- type: Object,
- default: () => {
- return {
- label: 'label',
- value: 'value',
- }
- }
- },
- hasTip: {
- type: Boolean,
- default: false
- },
- },
- data() {
- return {
- allChecked: false,
- isShow: false,
- loadding: false,
-
- page: 1,
- total: 0,
- totalPage: 0,
- search: {
- text: ''
- },
-
- orginList: [],
- resultList: [], //搜索结果集合
- showList: [],
- }
- },
- mounted() {
-
- },
-
- watch: {
- dataList: {
- immediate: true,
- deep: true,
- handler(newVal) {
- this.getData()
- }
- }
- },
-
- methods: {
-
- show() {
- this.isShow= true;
- },
- handleChooseAll() {
- this.allChecked = !this.allChecked
- this.resultList.map(e => {
- if(!this.renderItem(e,'disabled')) e.checked = this.allChecked
-
- })
- },
-
-
- computeCheckedData() {
- let allLength = this.resultList.filter((e) => !this.renderItem(e,'disabled')).length
- let checedLength = this.resultList.filter((e) => e.checked).length
- if(allLength == checedLength) {
- this.allChecked = true
- } else {
- this.allChecked = false
- }
- },
-
- getChoosed() {
- let data = this.orginList.filter((e) => e.checked)
- this.$emit('confirm',data)
- },
-
- handleClick(e) {
- if(this.renderItem(e,'disabled')) return
- if(this.multiple) {
- e.checked=!e.checked
- this.computeCheckedData()
- } else {
- console.log(e,'e')
- this.$emit('confirm',e);
- this.isShow = false;
- }
- },
-
- handleSearch() {
- this.page = 1
- if(this.search.text) {
- this.resultList = this.orginList.filter((e) => e[this.objMap.label].includes(this.search.text))
- } else {
- this.resultList = clone(this.orginList)
- }
- this.computeCheckedData()
- this.totalPage = Math.ceil(this.resultList.length / this.size)
- this.handlePageData()
- },
- //上一页
- handleLast() {
- if(this.page != 1) this.page -= 1;
- this.handlePageData()
- },
- //下一页
- handleNext() {
- if(this.page != this.totalPage) this.page += 1;
- this.handlePageData()
- },
- //处理分页数据
- handlePageData() {
- let index = (this.page - 1) * this.size
- this.showList = clone(this.resultList).splice(index,this.size)
- },
- getData() {
-
- let that = this;
- if(isArray(this.dataList)) {
- this.dataList.forEach((item) => {
- let obj = {
- ...item,
- checked: false,
- }
- this.orginList.push(obj);
- })
- this.$emit('onDataLoad',this.orginList)
- this.handleSearch()
-
- } else {
- this.orginList = [];
- this.showList = [];
- this.page = 1
- this.totalPage = 0
- }
-
- },
-
- close() {
- this.isShow = false
- this.allChecked = true
- this.handleChooseAll()
- },
-
- handleClose() {
- this.close()
- },
- handleSubmit() {
- if(this.multiple) this.getChoosed()
- this.close()
- },
- }
- }
- </script>
- <style lang="scss" scoped>
-
- /* 内容satrt */
- .container {
- background: #fff;
- .search {
- padding: 20rpx 40rpx 20rpx 40rpx;
-
- .all-choosed {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- font-size: 24rpx;
- }
- }
- .list {
- height: calc(100vh - 540rpx);
- padding: 0 20rpx;
- overflow-y: auto;
-
- .item {
- padding: 20rpx 20rpx;
- display: flex;
- align-items: center;
-
- .item-value {
- font-size: 24rpx;
- }
- .item-label {
- font-size: 24rpx;
- }
- .is-disabled {
- color: #909193;
- }
- // border-bottom: 2rpx solid #ddd;
- }
- .empty {
- display: flex;
- align-items: center;
- justify-content: center;
- height: calc(100vh - 400rpx);
- color: #909193;
- min-height: 800rpx;
- }
- }
-
- .last,.next {
- margin: 10rpx 40rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .page-footer {
- // position: absolute;
- width: 100%;
- left: 0;
- bottom: 0;
- }
-
- }
-
- /* 内容end */
-
- .choosed-image {
- width: 40rpx;
- height: 40rpx;
- margin-right: 10rpx;
- }
- </style>
|