linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品中心：修复商品表格选择对话框，在多选时表头内的多选框不显示选中效果的问题

Browse Source
main
owen 2 years ago
parent e0a731dd86
commit 1bb9df7b3c
2 changed files with 130 additions and 76 deletions
Show Stats Download Patch File Download Diff File

6
src/views/mall/product/spu/components/SpuShowcase.vue
Unescape Escape View File

@ -20,7 +20,7 @@
</el-tooltip>
</div>
<!-- 商品选择对话框（表格形式） -->
<SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
<SpuTableSelect ref="spuTableSelectRef" :multiple="limit != 1" @change="handleSpuSelected" />
</template>
<script lang="ts" setup>
import * as ProductSpuApi from '@/api/mall/product/spu'
@ -88,8 +88,8 @@ const openSpuTableSelect = () => {
* 选择商品后触发
* @param spus 选中的商品列表
*/
const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
productSpus.value = spus
const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
productSpus.value = isArray(spus) ? spus : [spus]
emitSpuChange()
}

196
src/views/mall/product/spu/components/SpuTableSelect.vue
Unescape Escape View File

@ -1,8 +1,14 @@
<template>
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择商品" width="70%">
<ContentWrap>
<el-row :gutter="20" class="mb-10px">
<el-col :span="6">
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="商品名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
@ -10,19 +16,19 @@
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
/>
</el-col>
<el-col :span="6">
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-tree-select
v-model="queryParams.categoryId"
:data="categoryTreeList"
:props="defaultProps"
check-strictly
class="w-1/1"
class="!w-240px"
node-key="id"
placeholder="请选择商品分类"
/>
</el-col>
<el-col :span="6">
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
@ -32,8 +38,8 @@
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-col>
<el-col :span="6">
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
@ -42,30 +48,32 @@
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
<!-- 多选模式 -->
<el-table-column key="2" type="selection" width="55" v-if="multiple">
<!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
<el-table-column width="55" v-if="multiple">
<template #header>
<el-checkbox
:value="allChecked && checkedPageNos.indexOf(queryParams.pageNo) > -1"
v-model="isCheckAll"
:indeterminate="isIndeterminate"
@change="handleCheckAll"
/>
</template>
<template #default="{ row }">
<el-checkbox
:value="checkedSpuIds.indexOf(row.id) > -1"
@change="(checked: boolean) => handleCheckOne(checked, row)"
v-model="checkedStatus[row.id]"
@change="(checked: boolean) => handleCheckOne(checked, row, true)"
/>
</template>
</el-table-column>
<!-- 单选模式 -->
<!-- 2. 单选模式 -->
<el-table-column label="#" width="55" v-else>
<template #default="{ row }">
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)"
>&nbsp;</el-radio
>
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)">
<!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
&nbsp;
</el-radio>
</template>
</el-table-column>
<el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
@ -102,54 +110,71 @@
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
import { CHANGE_EVENT } from 'element-plus'
type Spu = Required<ProductSpuApi.Spu>
/**
* 商品表格选择对话框
* 1. 单选模式：
* 1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
* 1.2 再次打开时，保持选中状态
* 2. 多选模式：
* 2.1 点击表格左侧的多选框时，记录选中的商品
* 2.2 切换分页时，保持商品的选中的状态
* 2.3 点击右下角的确定按钮时，结束选择，关闭对话框
* 2.4 再次打开时，保持选中状态
*/
defineOptions({ name: 'SpuTableSelect' })
const props = defineProps({
// 多选
defineProps({
// 多选模式
multiple: propTypes.bool.def(false)
})
const total = ref(0) // 列表的总页数
const list = ref<Spu[]>([]) // 列表的数据
const loading = ref(false) // 列表的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
// 列表的总页数
const total = ref(0)
// 列表的数据
const list = ref<Spu[]>([])
// 列表的加载中
const loading = ref(false)
// 弹窗的是否展示
const dialogVisible = ref(false)
// 查询参数
const queryParams = ref({
pageNo: 1,
pageSize: 10,
tabType: 0, // 默认获取上架的商品
// 默认获取上架的商品
tabType: 0,
name: '',
categoryId: null,
createTime: []
}) // 查询参数
const selectedSpuId = ref() // 选中的商品 spuId
})
/** 打开弹窗 */
const open = (spus?: Spu[]) => {
if (spus && spus.length > 0) {
// todo check-box不显示选中？
checkedSpus.value = [...spus]
checkedSpuIds.value = spus.map((spu) => spu.id)
} else {
const open = (spuList?: Spu[]) => {
// 重置
checkedSpus.value = []
checkedSpuIds.value = []
checkedStatus.value = {}
isCheckAll.value = false
isIndeterminate.value = false
// 处理已选中
if (spuList && spuList.length > 0) {
checkedSpus.value = [...spuList]
checkedStatus.value = Object.fromEntries(spuList.map(spu => [spu.id, true]))
}
allChecked.value = false
checkedPageNos.value = []
dialogVisible.value = true
resetQuery()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
// 提供 open 方法，用于打开弹窗
defineExpose({ open })
/** 查询列表 */
const getList = async () => {
@ -158,6 +183,10 @@ const getList = async () => {
const data = await ProductSpuApi.getSpuPage(queryParams.value)
list.value = data.list
total.value = data.total
// checkbox绑定undefined会有问题，需要给一个bool值
list.value.forEach( spu => checkedStatus.value[spu.id] = checkedStatus.value[spu.id] || false)
// 计算全选框状态
calculateIsCheckAll()
} finally {
loading.value = false
}
@ -174,7 +203,8 @@ const resetQuery = () => {
queryParams.value = {
pageNo: 1,
pageSize: 10,
tabType: 0, // 默认获取上架的商品
// 默认获取上架的商品
tabType: 0,
name: '',
categoryId: null,
createTime: []
@ -182,65 +212,89 @@ const resetQuery = () => {
getList()
}
const allChecked = ref(false) //是否全选
const checkedPageNos = ref<number[]>([]) //选中的页码
const checkedSpuIds = ref<number[]>([]) //选中的商品ID
const checkedSpus = ref<Spu[]>([]) //选中的商品
// 是否全选
const isCheckAll = ref(false)
// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
const isIndeterminate = ref(false)
// 选中的商品
const checkedSpus = ref<Spu[]>([])
// 选中状态：key为商品ID，value为是否选中
const checkedStatus = ref<Record<string, boolean>>({})
// 选中的商品 spuId
const selectedSpuId = ref()
/** 单选中时触发 */
const handleSingleSelected = (row: Spu) => {
emits('change', row)
const handleSingleSelected = (spu: Spu) => {
emits(CHANGE_EVENT, spu)
// 关闭弹窗
dialogVisible.value = false
// 记住上次选择的ID
selectedSpuId.value = row.id
selectedSpuId.value = spu.id
}
/** 多选完成 */
const handleEmitChange = () => {
// 关闭弹窗
dialogVisible.value = false
emits('change', [...checkedSpus.value])
emits(CHANGE_EVENT, [...checkedSpus.value])
}
/** 确认选择时的触发事件 */
const emits = defineEmits<{
(e: 'change', spu: Spu | Spu[] | any): void
change: [spu: Spu | Spu[] | any]
}>()
/** 全选 */
/** 全选/全不选 */
const handleCheckAll = (checked: boolean) => {
debugger
console.log('checkAll', checked)
allChecked.value = checked
const index = checkedPageNos.value.indexOf(queryParams.value.pageNo)
checkedPageNos.value.push(queryParams.value.pageNo)
if (index > -1) {
checkedPageNos.value.splice(index, 1)
}
isCheckAll.value = checked
isIndeterminate.value = false
list.value.forEach((item) => handleCheckOne(checked, item))
list.value.forEach((spu) => handleCheckOne(checked, spu, false))
}
/** 选中一行 */
const handleCheckOne = (checked: boolean, spu: Spu) => {
/**
* 选中一行
* @param checked 是否选中
* @param spu 商品
* @param isCalcCheckAll 是否计算全选
*/
const handleCheckOne = (checked: boolean, spu: Spu, isCalcCheckAll: boolean) => {
if (checked) {
const index = checkedSpuIds.value.indexOf(spu.id)
if (index === -1) {
checkedSpuIds.value.push(spu.id)
checkedSpus.value.push(spu)
}
checkedStatus.value[spu.id] = true
} else {
const index = checkedSpuIds.value.indexOf(spu.id)
const index = findCheckedIndex(spu)
if (index > -1) {
checkedSpuIds.value.splice(index, 1)
checkedSpus.value.splice(index, 1)
checkedStatus.value[spu.id] = false
isCheckAll.value = false
}
}
// 计算全选框状态
if(isCalcCheckAll){
calculateIsCheckAll()
}
}
// 查找商品在已选中商品列表中的索引
const findCheckedIndex = (spu: Spu) => checkedSpus.value.findIndex(item => item.id === spu.id)
// 计算全选框状态
const calculateIsCheckAll = () => {
isCheckAll.value = list.value.every(spu => {
let valueElement = checkedStatus.value[spu.id];
debugger
return valueElement;
});
// 计算中间状态：不是全部选中 && 任意一个选中
isIndeterminate.value = !isCheckAll.value && list.value.some(spu => checkedStatus.value[spu.id])
}
const categoryList = ref() // 分类列表
const categoryTreeList = ref() // 分类树
// 分类列表
const categoryList = ref()
// 分类树
const categoryTreeList = ref()
/** 初始化 **/
onMounted(async () => {
await getList()

Write Preview
Loading…
Cancel
Save