<template>
<view>
<q-addBtn @openAdd="openPage('add')"></q-addBtn>
<view class="d-flex a-center j-end bg-white">
<view class="flex-1">
<q-search @search="openPopupSearch"></q-search>
</view>
<view @click="onTimeChange" class="d-flex a-center j-center" style="width: 120rpx;">
时间<text class="iconfont icon-cangpeitubiao_paixuzhandianpaixu font-lg-big"></text>
</view>
<view class="d-flex a-center j-center" style="width:88rpx;" @click="onCheckboxChange">
<text class="iconfont icon-gengduocaozuo font-lg-big"></text>
</view>
</view>
<!-- 全选 -->
<view class="q-checkboxTabber" :class="{'bottomShow':isShowCheckbox}">
<view class="flex-1">
<checkbox-group @change="allChoose">
<label>
<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false">
</checkbox> 全选
</label>
</checkbox-group>
</view>
<button size="mini" type="default">删除</button>
</view>
<!-- 全选列表 -->
<checkbox-group class="block" @change="changeCheckbox">
<uni-swipe-action>
<block v-for="(item,index) in filterlist">
<uni-swipe-action-item autoClose :right-options="item.options" :auto-close="false"
@change="onSwipeChange($event, index)">
<uni-list-item link>
<template v-slot:body>
<view class="d-flex a-center j-sb span24-24">
<view class="d-flex a-center j-center span24-2 q-ani" v-if="isShowCheckbox">
<view :key="item.value">
<checkbox :value="String(item.value)"
:checked="checkedArr.includes(String(item.value))"
:class="{'checked':checkedArr.includes(String(item.value))}">
</checkbox>
</view>
</view>
<view class="d-flex a-start j-center flex-column span24-22"
@click="openPage('detail')">
<view class="text-main font-md">{{item.Name}}/{{item.Region}}/{{item.OutTime}}
</view>
<view class="text-overflow text-main-light font-sm span24-24">
{{item.Source}}/{{item.Type}}/{{item.Address}}
</view>
<view class="text-overflow text-main-light font-sm span24-24">
{{item.SubjectMatter}}
</view>
</view>
</view>
</template>
</uni-list-item>
<template v-slot:right>
<view class="d-flex j-center a-strech">
<view class="bg-success text-white px-2"
@click="onSwipeClick({content:{text:isType},index:{index:0}})">
<view class=" font-md-lg d-flex a-center j-center" style="height: 100%;">
<text v-if="isType==0">开始外出</text>
<text v-if="isType==1">服务开始</text>
<text v-if="isType==2">服务结束</text>
<text v-if="isType==3">结束外出</text>
</view>
</view>
<view class="bg-warning text-white px-3"
@click="onSwipeClick({content:{text:'撤销'},index:{index:1}})">
<view class="d-flex a-center j-center font-lg-big iconfont icon-chehuixiaoxi"
style="height: 100%;"></view>
</view>
</view>
</template>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
Data: [{
value: 0,
Name: '张小乐',
Source: '客服预约',
Type: '上门服务',
OutTime: '2022-11-21 10:00',
Region: '东关',
SubjectMatter: '我要去安装机器设备',
Address: "杭州市余杭区青枫书院3栋东",
}, {
value: 1,
Name: '大志',
Source: '客服预约',
Type: '上门服务',
OutTime: '2022-10-21 10:00',
Region: '东关',
SubjectMatter: '我要去安装机器设备',
Address: "杭州市余杭区青枫书院3栋东",
}],
keyword: '', //输入框默认值
orderType: 1, //1按升序 2按降序
//选中的值
checkedArr: [],
allChecked: false, //是否全选
// 全选显示
isShowCheckbox: false,
//右滑状态
isType:0//0开始外出 1服务开始2服务结束3结束外出
}
},
computed: {
filterlist() {
// 取出相关的数据
const {
keyword,
orderType,
Data
} = this
// 过滤后显示的数据
let _filterlist
_filterlist = Data.filter(p => p.Name.indexOf(keyword) !== -1) // 搜索筛选
// 排序 0为默认 1按年龄降序 2按年龄降序 3按money升序
if (orderType !== 0) {
_filterlist.sort(function(p1, p2) {
var p1time = new Date(p1.OutTime).valueOf()
var p2time = new Date(p2.OutTime).valueOf()
if (orderType == 1) {
// 根据距离升序
return p1time - p2time
} else if (orderType == 2) {
// 根据距离降序
return p2time - p1time
}
})
}
return _filterlist //返回自定义的_filterlist
}
},
methods: {
openPage(e, t) {
uni.navigateTo({
url: `../${e}/${e}?title=${t}`,
})
},
//搜索
openPopupSearch(e) {
console.log(e)
},
onSwipeChange(e, index) {
console.log('返回：', e, index);
this.isShowCheckbox = false
this.allChecked = false;
},
onSwipeHandle(e, index) {
console.log(e,index);
uni.showToast({
title: `${e.content.text}按+钮`,
icon: 'none'
});
},
onSwipeClick(e) {
console.log(e);
uni.showToast({
title: `点击了${e.index.index}按钮`,
icon: 'none'
});
// isType:0//0开始外出 1服务开始2服务结束3结束外出
if(e.index.index==0){
if(this.isType<3){
this.isType++
uni.reLaunch({
url:'../../../index/index?isType='+this.isType
})
return this.isType
}
return this.isType=3
}
if(e.index.index==1){
if(this.isType>0){
return this.isType--
}
return this.isType=0
}
},
// onTabChange(e) {
// this.tabIndex = e
// console.log(`当前切换下标是${this.tabIndex}`)
// },
onCheckboxChange() {
this.isShowCheckbox = !this.isShowCheckbox
},
// 多选复选框改变事件
changeCheckbox(e) {
this.checkedArr = e.detail.value;
console.log(e)
// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
if (this.checkedArr.length > 0 && this.checkedArr.length == this.Data.length) {
this.allChecked = true;
} else {
this.allChecked = false;
}
},
// 全选事件
allChoose(e) {
let chooseItem = e.detail.value;
// 全选
if (chooseItem[0] == 'all') {
this.allChecked = true;
for (let item of this.Data) {
let itemVal = String(item.value);
if (!this.checkedArr.includes(itemVal)) {
this.checkedArr.push(itemVal);
}
}
} else {
// 取消全选
this.allChecked = false;
this.checkedArr = [];
}
},
onTimeChange() {
// 时间
this.orderType == 1 ? this.orderType = 2 : this.orderType = 1
}
}
}
</script>
<style>
</style>
0
点赞
收藏
分享
全选与单选
相关推荐
0 条评论
汤姆torn
关注