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

2023-11-21 10:27:29 +08:00 · 2023-11-21 10:27:29 +08:00 · 1bb9df7b3c
commit 1bb9df7b3c
parent e0a731dd86
2 changed files with 130 additions and 76 deletions
--- a/src/views/mall/product/spu/components/SpuShowcase.vue
+++ b/src/views/mall/product/spu/components/SpuShowcase.vue
@ -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()
 }

--- a/src/views/mall/product/spu/components/SpuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SpuTableSelect.vue
@ -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 {
-    checkedSpus.value = []
-    checkedSpuIds.value = []
+const open = (spuList?: Spu[]) => {
+  // 重置
+  checkedSpus.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)
-    }
+    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 categoryList = ref() // 分类列表
-const categoryTreeList = ref() // 分类树
+// 查找商品在已选中商品列表中的索引
+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()
 /** 初始化 **/
 onMounted(async () => {
  await getList()