feat(special-zone): 实现专区商品管理功能

- 新增添加商品到专区接口 addSectionGoods
- 新增从专区移除商品接口 removeSectionGoods
- 商品抽屉宽度调整并改造为支持搜索添加和移除商品
- 增加商品搜索输入框及搜索按钮,支持关键词搜索商品
- 搜索结果列表添加单条商品添加按钮和批量添加确认按钮
- 已关联商品列表新增移除商品操作按钮及确认弹窗
- 调整商品列表图片大小及表格滚动高度,提高界面整洁度
- 专区商品数据加载添加搜索结果过滤逻辑,避免重复添加
- 用户白名单弹窗移除 isStaff 限制,允许所有用户搜索
- 修复白名单用户选择框无法显示缺失勾选列宽度问题
- 采用 computed 管理多选配置及已选用户状态,提升响应性
This commit is contained in:
2026-08-17 01:14:16 +08:00
parent b5c67988a6
commit 4a7b217c2b
6 changed files with 224 additions and 24 deletions
@@ -32,13 +32,13 @@
</template>
</ele-pro-table>
<div class="mt-2 ele-text-secondary">
已选 {{ rowSelection.selectedRowKeys.length }}
已选 {{ selectedRowKeys.length }}
</div>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { ref, computed, watch } from 'vue';
import {
ColumnItem,
DatasourceFunction
@@ -106,14 +106,17 @@
}
]);
// 多选配置
const rowSelection = reactive({
type: 'checkbox' as const,
selectedRowKeys: [] as number[],
// 已选用户ID
const selectedRowKeys = ref<number[]>([]);
// 多选配置(与 shopCoupon 一致:computed + columnWidth
const rowSelection = computed(() => ({
columnWidth: 48,
selectedRowKeys: selectedRowKeys.value,
onChange: (keys: (string | number)[]) => {
rowSelection.selectedRowKeys = keys.map((k) => Number(k));
selectedRowKeys.value = keys.map((k) => Number(k));
}
});
}));
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
@@ -121,7 +124,6 @@
where.keywords = searchText.value;
}
return pageUsers({
isStaff: true,
keywords: searchText.value,
...where,
...orders,
@@ -137,7 +139,7 @@
/* 确认保存 */
const confirm = () => {
emit('confirm', [...rowSelection.selectedRowKeys]);
emit('confirm', [...selectedRowKeys.value]);
updateVisible(false);
};
@@ -146,7 +148,7 @@
() => props.visible,
(visible) => {
if (visible) {
rowSelection.selectedRowKeys = props.selectedUserIds
selectedRowKeys.value = props.selectedUserIds
? [...props.selectedUserIds]
: [];
if (tableRef.value) {