示例图
1. Vue 组件的模板部分
2. JavaScript 部分
methods: {
// 全选或取消全选的处理函数
selectAllCards(index) {
// 切换全选状态
this.isAllSelected = !this.isAllSelected;
console.log("全选",this.isAllSelected)
for (let item of this.items) {
item.checked = this.isAllSelected;
}
if (this.isAllSelected) {
this.selectDetailData = this.items;
this.selectedIndexs = Array.from(this.items.keys());
} else {
//全不选
this.selectDetailData = [];
this.selectedIndexs = [];
}
this.$forceUpdate()
console.log("总值",this.items);
console.log("数组值", this.selectedIndexs)
console.log("选中所有数据", this.selectDetailData)
},
//点击卡片多选框触发
onChange(index) {
console.log("index的值:" + index)
let selectedIndexs = this.selectedIndexs;
//一个选中的index数组，每次点击遍历index数组，如果有就取消掉，没有就添加上
/* if(this.selectedIndexs.some(a=>a===index)){ */
if (selectedIndexs.includes(index)) {
//存在，删除index
//this.selectedIndexs.splice(this.selectedIndexs(index),1);
this.selectedIndexs = selectedIndexs.filter(item => item != index);
this.items[index].checked = false;
console.log("数组值：" + this.selectedIndexs);
} else {
//不存在，添加上某值
selectedIndexs.push(index);
this.selectedIndexs = selectedIndexs.sort();
console.log("数组值：" + this.selectedIndexs);
this.items[index].checked = true;
}
let selectDetailData = []; //选择的行数据
for (let i = 0; i < this.selectedIndexs.length; i++) {
selectDetailData.push(this.items[this.selectedIndexs[i]]);
}
this.selectDetailData = selectDetailData;
console.log("选中的所有数据", this.selectDetailData)
this.total = selectDetailData.reduce((sum, e) => sum + Number(e.quantity || 0),
0); //选中行的数量之和（selectDetailData是所有的选中行数据数组，quantity是需要累加的字段）
console.log("选中的总数量：" + this.total);
// 这里可以实现单独点击卡片复选框的逻辑，例如更新单个卡片的选中状态
// 然后可以检查是否所有卡片都被选中了，来更新全选复选框的状态
this.isAllSelected = (this.selectDetailData.length === this.items.length)
console.log("全选", this.isAllSelected)
console.log("总值",this.items)
},
}全部代码
<template>
<view class="container">
<!-- 操作提示信息 -->
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">展示多选checkBox</text>
</uni-card>
<!-- 提示信息弹窗 -->
<view>
<uni-popup ref="message" type="message">
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
</uni-popup>
</view>
<!-- 两个搜索框 -->
<uni-search-bar @blur="oneBlur" :focus="true" v-model="SelectOptions.one" placeholder="请输入字段1"
cancelButton="none" clearButton="none">
</uni-search-bar>
<uni-search-bar @blur="twoBlur" :focus="true" v-model="SelectOptions.two" placeholder="请输入字段2"
cancelButton="none" clearButton="none">
</uni-search-bar>
<!-- 提示暂无数据的图片 -->
<image src="../../../static/no.png" class="image" v-if="this.items.length===0"></image>
<!-- 卡片 -->
<div class="container1" style="display: flex; align-items: center;">
<uni-section title="字段详情" type="line" v-if="this.items.length!==0" style="flex: 1;">
<div style="display: flex; justify-content: flex-end;">
<!-- 全选 -->
<checkbox class="section-checkbox" @click="selectAllCards(index)" :checked="isAllSelected" style="margin-right: 40px;"></checkbox>
</div>
<div>
<uni-card :is-shadow="true" shadow="0px 0px 2px 2px #ccc" v-for="(item,index) in items"
:key="index">
<template v-slot:title>
<uni-list>
标题字段：{{item.one}}
<!-- 多选 -->
<checkbox class="checkbox" @click="onChange(index)" :checked="item.checked"></checkbox>
</uni-list>
</template>
<!-- extra="额外信息" :is-shadow卡片内容是否阴影-->
<text class="uni-body">字段1：{{item.one}}</text><br>
<text class="uni-body">字段2：{{item.two}}</text><br>
<view class="button-group">
<button class="uni-button" type="primary" size="mini" @click="play(index)">按钮1</button>
<button class="uni-button" type="warn" size="mini" @click="modifyOne(index)">按钮2</button>
</view>
</uni-card>
</div>
</uni-section>
</div>
<!-- 下方批量按钮 -->
<view class="button-group2 floatButton">
<button type="primary" @click="confirmAll" class="newButton2" v-if="this.items.length!==0">批量按钮1</button>
<button type="warn" @click="cancelAll" class="newButton3" v-if="this.items.length!==0">批量按钮2</button>
</view>
<view>
<!-- 批量操作1提示窗示例 -->
<uni-popup ref="alertplayDialog" type="dialog">
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提醒" content="是否确认批量操纵1?"
@confirm="dialogplayConfirm" @close="dialogplayClose"></uni-popup-dialog>
</uni-popup>
</view>
<view>
<!-- 批量操作2提示窗示例 -->
<uni-popup ref="alertCancelDialog" type="dialog">
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="提醒" content="是否确认批量操作2?"
@confirm="dialogCancelConfirm" @close="dialogCancelClose"></uni-popup-dialog>
</uni-popup>
</view>
<view>
<!-- 操作1提示信息弹窗 -->
<uni-popup ref="playDialog" type="dialog">
<uni-popup-dialog title="信息确认" cancelText='返回' confirmText='确认操作1' @cancel="groupBoxDialogCancel"
@confirm="playDialogConfirm">
<uni-forms ref="form"><!-- :modelValue="groupBoxFormData" :rules="rules" -->
</uni-forms>
</uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
import {
pickOne,
getSterePickInfo,
pickAll,
cancelAll,
} from "@/api/outBound/pickTask.js";
export default {
data() {
return {
//切换全选
isAllSelected: false,
//选中的id数组
selectDetailIds: [],
//搜索字段
SelectOptions: {
two: null, //搜索1
one: null, //搜索2
},
//加载圈圈
loading: false,
//选中的索引值
index: null,
//选中的单条操作1id
id: null,
//选中字段数据
selected: null,
//操作1确认的字段编码
itemCode: null,
//item: {},
//点击大按钮，选中的index数组
selectedIndexs: [],
//点击大按钮，选中的详细信息
selectDetailData: [],
//选中的总数
total: 0,
//总数据
items: [],
//提示消息框信息
messageText: null,
//提示消息框类型
msgType: null,
};
},
methods: {
// 全选或取消全选的处理函数
selectAllCards(index) {
// 切换全选状态
this.isAllSelected = !this.isAllSelected;
console.log("全选",this.isAllSelected)
for (let item of this.items) {
item.checked = this.isAllSelected;
}
if (this.isAllSelected) {
this.selectDetailData = this.items;
this.selectedIndexs = Array.from(this.items.keys());
} else {
//全不选
this.selectDetailData = [];
this.selectedIndexs = [];
}
this.$forceUpdate()
console.log("总值",this.items);
console.log("数组值", this.selectedIndexs)
console.log("选中所有数据", this.selectDetailData)
},
//点击卡片多选框触发
onChange(index) {
console.log("index的值:" + index)
let selectedIndexs = this.selectedIndexs;
//一个选中的index数组，每次点击遍历index数组，如果有就取消掉，没有就添加上
/* if(this.selectedIndexs.some(a=>a===index)){ */
if (selectedIndexs.includes(index)) {
//存在，删除index
//this.selectedIndexs.splice(this.selectedIndexs(index),1);
this.selectedIndexs = selectedIndexs.filter(item => item != index);
this.items[index].checked = false;
console.log("数组值：" + this.selectedIndexs);
} else {
//不存在，添加上某值
selectedIndexs.push(index);
this.selectedIndexs = selectedIndexs.sort();
console.log("数组值：" + this.selectedIndexs);
this.items[index].checked = true;
}
let selectDetailData = []; //选择的行数据
for (let i = 0; i < this.selectedIndexs.length; i++) {
selectDetailData.push(this.items[this.selectedIndexs[i]]);
}
this.selectDetailData = selectDetailData;
console.log("选中的所有数据", this.selectDetailData)
this.total = selectDetailData.reduce((sum, e) => sum + Number(e.quantity || 0),
0); //选中行的数量之和（selectDetailData是所有的选中行数据数组，quantity是需要累加的字段）
console.log("选中的总数量：" + this.total);
// 这里可以实现单独点击卡片复选框的逻辑，例如更新单个卡片的选中状态
// 然后可以检查是否所有卡片都被选中了，来更新全选复选框的状态
this.isAllSelected = (this.selectDetailData.length === this.items.length)
console.log("全选", this.isAllSelected)
console.log("总值",this.items)
},
oneBlur() {
if (this.$u.test.isEmpty(this.SelectOptions.one)) {
this.showMessage("warn", "当前字段1搜索框为空");
this.SelectOptions.one = null;
return;
} else {
if (this.$u.test.rangeLength(this.SelectOptions.one, [9, 20])) {
this.getData();
} else {
this.showMessage("error", "输入字段1错误");
this.SelectOptions.one = null;
}
}
},
twoBlur() {
//console.log(this.$u.test.rangeLength(this.two,[8,8]));
if (this.$u.test.isEmpty(this.SelectOptions.two)) {
this.showMessage("warn", "当前字段2搜索框为空");
this.SelectOptions.two = null;
return;
} else {
if (this.$u.test.rangeLength(this.SelectOptions.two, [1, 8])) { //判断位数
console.log(this.SelectOptions.two)
this.getData();
} else {
this.showMessage("error", "输入字段2错误！");
this.SelectOptions.two = null;
}
}
},
//点击操作1按钮
play(index) {
this.index = index;
let selected = this.items[this.index]; //当前行数据
this.selected = selected;
console.log(this.selected);
let id = this.items[this.index].playId; //当前行id
this.id = id;
console.log(this.id);
this.$refs.playDialog.open();
//this.playFinish(id);
},
//操作1信息确认时，输入字段编码回车响应
confirmplayBlur() {
if (this.itemCode === this.selected.threeCode) {
this.playFinish(this.id);
this.$refs.playDialog.close();
} else {
this.showMessage("warn", "操作1的字段编码不统一");
}
},
//操作1信息确认模态框，点击确认操作1
playDialogConfirm() {
if (this.itemCode === this.selected.threeCode) {
this.playFinish(this.id);
this.$refs.playDialog.close();
} else {
this.showMessage("warn", "操作1的字段编码不统一");
}
},
//点击操作1按钮后回传处理数据
playFinish(id) {
this.loading = true;
console.log(id);
pickOne(id).then(response => {
const orderList = response
console.log("orderList:", orderList)
console.log("orderList.length:", orderList.length);
}).catch(error => {
console.error('Failed to get order list:', error);
this.showMessage("error", "操作1失败")
})
this.loading = false;
},
//弹出框的
submit(ref) {
this.$refs.inputDialog.open();
},
change(value) {
this.numberValue = value;
},
search() {
console.log(this.item.one);
this.getList();
},
//通过字段2和字段1搜索框get操作1任务
getData() {
this.loading = true;
getSterePickInfo(this.SelectOptions).then(response => {
const orderList = response
.data //如果 response.rows 存在，那么将其赋值给 orderList 变量；否则，将一个空数组赋值给 orderList 变量。
//this.items = orderList//展示
//this.items.push(orderList);//数组中添加对象
console.log("orderList.length:", orderList.length); //返回条数
if (orderList.length == 0) {
this.showMessage('warn', '暂无操作1任务！');
this.items = [];
} else {
this.items = orderList;
}
}).catch(error => {
console.error('Failed to get order list:', error);
})
this.loading = false;
},
//消息提示弹出框，使用时this.showMessage('warn', 'XXX');
showMessage(msgType, messageText) {
this.msgType = msgType;
this.messageText = messageText;
this.$refs.message.open(); //提示信息弹框，上弹框
},
//批量操作1按钮
confirmAll() {
if (this.selectDetailData.length === 0) {
this.showMessage('warn', '请至少选择一条操作1任务进行操作1！');
return;
}
//批量操作1提示框弹出
this.dialogplayToggle('info');
//this.selectDetailData
},
//批量操作2按钮
cancelAll() {
console.log("是否需要操作1操作2", this.selectDetailData);
if (this.selectDetailData.length === 0) {
this.showMessage('warn', '请至少选择一条操作1任务进行操作2！');
return;
}
//批量操作1提示框弹出
this.dialogCancelToggle('info');
//this.selectDetailData
},
//批量操作1提示框弹出
dialogplayToggle(type) {
this.msgType = type
this.$refs.alertplayDialog.open()
},
//批量操作2提示框弹出
dialogCancelToggle(type) {
this.msgType = type
this.$refs.alertCancelDialog.open()
},
//批量操作1提示框的确认
dialogplayConfirm() {
/* const selectDetailIds = [];
selectDetailIds = this.selectDetailData.map(item => item.playId);
this.selectDetailIds = selectDetailIds; */
this.selectDetailIds = this.selectDetailData.map(item => item.playId);
console.log("选中数组：", this.selectDetailIds);
playAll(this.selectDetailIds).then(response => {
//TODO 处理返回结果
console.log("返回信息：", response)
this.getData();
})
console.log('点击确认')
this.showMessage('success', '成功批量操作1!');
},
//批量操作1提示框的确认
dialogCancelConfirm() {
this.selectDetailIds = this.selectDetailData.map(item => item.playId);
console.log("选中数组：", this.selectDetailIds);
cancelAll(this.selectDetailIds).then(response => {
//TODO 处理返回结果
console.log("返回信息：", response)
this.getData();
})
console.log('点击确认')
this.showMessage('success', '成功批量操作1!');
},
//批量操作1提示框的关闭
dialogplayClose() {
console.log('点击关闭操作1框')
},
//批量操作2提示框的关闭
dialogCancelClose() {
console.log('点击关闭操作2框')
},
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
//没有数据时的暂无数据提示图片
.image {
width: 100%;
height: 678px;
// mask-repeat: repeat;
}
// 两个按钮的样式
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
//弹出框样式
.dialog {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
//下拉列表框
.result-box {
text-align: center;
padding: 20px 0px;
font-size: 16px;
}
/* .number{
.number::before{content: '*';color: red;}
} */
//上面两个搜索框的样式，去掉会变宽
.uni-searchbar {
padding: 4px;
}
.newButton1 {
margin-top: 10px;
margin-left: 1%;
margin-right: 1%;
}
.newButton2 {
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
}
.newButton3 {
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
}
//卡片内容
.uni-section-content[data-v-5584ec96] {
font-size: 14px;
position: relative;
padding-bottom: 250px;
}
//最后三大按钮悬浮样式
.floatButton {
//bottom: 0;
//宽度
width: 100%;
left: 50%;
position: fixed;
//position: relative;
bottom: 45px;
//离最下面高度
height: 80px;
text-align: center;
//按钮显示在其他元素上方
z-index: 999;
transform: translate(-50%, -50%);
}
//横线上方样式
uni-view.uni-list.uni-border-top-bottom {
/* width: 338px; */
width: 100%;
height: 30px;
margin-top: 10px;
display: block; //横向排布，选择框
font-size: 18px; //字体大小
//color: red; //字体颜色
font-family: Arial, sans-serif; //字体样式
}
//多选框位置大小设置
.checkbox {
position: right;
float: right;
/* border:3px solid #999; */
width: 40px;
height: 40px;
position: relative;
}
.section-checkbox {
margin-right: 100px;
/* 可选：添加右边距以调整与标题之间的间距 */
justify-content: flex-end;
f: right;
}
uni-checkbox-input {
border: 5px solid #d1d1d1;
width: 25px;
height: 25px;
}
</style>问题：有没有会样式的小伙伴，这里的标题和全选框如何可以设置到一行
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
