|
|
@@ -74,14 +74,20 @@
|
|
|
<!-- 表格 -->
|
|
|
<!-- @selection-change="handleSelectionChange" -->
|
|
|
<el-table
|
|
|
- class="singleTable"
|
|
|
- ref="singleTable"
|
|
|
+ :class="[selectMode]"
|
|
|
+ ref="tableRef"
|
|
|
v-loading="loading"
|
|
|
:data="tableList"
|
|
|
- row-key="couponNumber"
|
|
|
+ :row-key="(row) => row.couponNumber"
|
|
|
@select="handleSelect"
|
|
|
+ @select-all="handleSelectAll"
|
|
|
>
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ reserve-selection
|
|
|
+ />
|
|
|
<el-table-column label="卡券名称" align="center" prop="title" />
|
|
|
<el-table-column label="类型" align="center" prop="type">
|
|
|
<template slot-scope="scope">
|
|
|
@@ -159,6 +165,11 @@ export default {
|
|
|
type: String,
|
|
|
default: "",
|
|
|
},
|
|
|
+ // 勾选模式 single 单选 multiple 多选，默认多选
|
|
|
+ selectMode: {
|
|
|
+ type: String,
|
|
|
+ default: "multiple",
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -169,7 +180,7 @@ export default {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
type: "",
|
|
|
- descripiton: "",
|
|
|
+ title: "",
|
|
|
},
|
|
|
// 时间
|
|
|
dateRange: [],
|
|
|
@@ -181,7 +192,7 @@ export default {
|
|
|
// 表格相关
|
|
|
loading: false,
|
|
|
tableList: [],
|
|
|
- selectedRow: [],
|
|
|
+ curSelection: [], // 存储当前勾选的数据
|
|
|
total: 0,
|
|
|
// 弹窗相关
|
|
|
title: "",
|
|
|
@@ -190,39 +201,79 @@ export default {
|
|
|
dlgLoading: false,
|
|
|
};
|
|
|
},
|
|
|
- // created() {
|
|
|
- // this.getTableList();
|
|
|
- // },
|
|
|
+ created() {
|
|
|
+ this.resetQuery();
|
|
|
+ },
|
|
|
watch: {
|
|
|
+ // 传过来的勾选的数据
|
|
|
selectedIds: {
|
|
|
handler(newVal) {
|
|
|
- console.log(newVal);
|
|
|
- this.getTableList();
|
|
|
+ // console.log("selectedIds", newVal);
|
|
|
+ if (newVal) {
|
|
|
+ let arr = JSON.parse(newVal);
|
|
|
+ this.curSelection = [...arr];
|
|
|
+ } else {
|
|
|
+ this.curSelection = [];
|
|
|
+ }
|
|
|
},
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ showSelect() {
|
|
|
+ this.$refs.tableRef.clearSelection();
|
|
|
+ this.tableList.forEach((row) => {
|
|
|
+ const isSelected = this.curSelection.some(
|
|
|
+ (item) => item.couponNumber === row.couponNumber
|
|
|
+ );
|
|
|
+ this.$refs.tableRef.toggleRowSelection(row, isSelected);
|
|
|
+ });
|
|
|
+ },
|
|
|
// 用户勾选
|
|
|
handleSelect(selection, row) {
|
|
|
- console.log(111, selection, row);
|
|
|
- if (selection.length > 1) {
|
|
|
- // selection超过一个时说明之前已选中了一个，需要先清空选择再选中现在点击的
|
|
|
- this.$refs.singleTable.clearSelection();
|
|
|
- this.$refs.singleTable.toggleRowSelection(row, true);
|
|
|
+ // console.log("选择数据", selection, row);
|
|
|
+ // 目前this.curSelection是所有传进来的选中项
|
|
|
+ // 判断this.curSelection中有没有该操作项row
|
|
|
+ const index = this.curSelection.findIndex((item) => item.id === row.id);
|
|
|
+ // 如果有的话说明是取消选中，没有则是新选中的
|
|
|
+ if (index === -1) {
|
|
|
+ if (this.selectMode === "single") {
|
|
|
+ this.curSelection = [row];
|
|
|
+ this.showSelect();
|
|
|
+ } else {
|
|
|
+ this.curSelection.push(row);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.curSelection.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSelectAll(selection) {
|
|
|
+ // console.log("全选数据", selection);
|
|
|
+ if (selection.length) {
|
|
|
+ selection.forEach((row) => {
|
|
|
+ if (!this.curSelection.some((item) => item.id === row.id)) {
|
|
|
+ this.curSelection.push(row);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 当前页面取消全选，获取当前页面全部数据的id
|
|
|
+ const currentPageIds = this.tableList.map((item) => item.id);
|
|
|
+ // console.log("currentPageIds", currentPageIds);
|
|
|
+ this.curSelection = this.curSelection.filter(
|
|
|
+ (item) => !currentPageIds.includes(item.id)
|
|
|
+ );
|
|
|
}
|
|
|
- this.selectedRow = [row];
|
|
|
},
|
|
|
// 确认选择
|
|
|
handleConfirm() {
|
|
|
- this.$emit("confirm", this.selectedRow);
|
|
|
+ this.$emit("confirm", this.curSelection);
|
|
|
this.handleCancel();
|
|
|
},
|
|
|
// 关闭弹窗
|
|
|
handleCancel() {
|
|
|
this.$emit("close");
|
|
|
// 清空选择
|
|
|
- // this.$refs.singleTable.clearSelection();
|
|
|
+ this.$refs.tableRef.clearSelection();
|
|
|
},
|
|
|
// 搜索
|
|
|
handleQuery() {
|
|
|
@@ -236,15 +287,10 @@ export default {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
type: "",
|
|
|
- descripiton: "",
|
|
|
+ title: "",
|
|
|
};
|
|
|
this.getTableList();
|
|
|
},
|
|
|
- // 表格选中
|
|
|
- // handleSelectionChange(selection) {
|
|
|
- // console.log("表格选中值", selection);
|
|
|
- // this.selectedRow = selection;
|
|
|
- // },
|
|
|
// 查看
|
|
|
handleDetail(row) {
|
|
|
this.title = "查看";
|
|
|
@@ -267,14 +313,7 @@ export default {
|
|
|
if (res.code === 200) {
|
|
|
this.tableList = res.rows;
|
|
|
this.total = res.total;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.tableList.forEach((row) => {
|
|
|
- if (this.selectedIds === row.couponNumber) {
|
|
|
- // console.log(222);
|
|
|
- this.$refs.singleTable.toggleRowSelection(row, true);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
+ this.$nextTick(() => this.showSelect());
|
|
|
}
|
|
|
})
|
|
|
.finally(() => (this.loading = false));
|
|
|
@@ -284,7 +323,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep .singleTable {
|
|
|
+::v-deep .single.el-table {
|
|
|
thead .el-checkbox {
|
|
|
display: none;
|
|
|
}
|
mnisting