|
@@ -30,16 +30,24 @@
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
|
- <el-form-item label="商品品牌" prop="brandName">
|
|
|
|
|
- <el-select-v2
|
|
|
|
|
- v-model="queryParams.brandName"
|
|
|
|
|
- :options="brandOptionsFormatted"
|
|
|
|
|
- placeholder="请选择商品品牌"
|
|
|
|
|
- clearable
|
|
|
|
|
|
|
+ <el-form-item label="商品品牌" prop="brandId">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ v-model="queryParams.brandId"
|
|
|
|
|
+ placeholder="请输入品牌名称搜索"
|
|
|
filterable
|
|
filterable
|
|
|
|
|
+ remote
|
|
|
|
|
+ clearable
|
|
|
|
|
+ :remote-method="handleBrandSearch"
|
|
|
:loading="brandLoading"
|
|
:loading="brandLoading"
|
|
|
- @visible-change="handleBrandVisibleChange"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in brandOptions"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ :label="item.brandName"
|
|
|
|
|
+ :value="item.id"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
|
@@ -220,6 +228,7 @@
|
|
|
import { listBase, getBase, shelfReview, brandList, categoryTree } from '@/api/product/base';
|
|
import { listBase, getBase, shelfReview, brandList, categoryTree } from '@/api/product/base';
|
|
|
import { BaseVO, BaseQuery, BaseForm } from '@/api/product/base/types';
|
|
import { BaseVO, BaseQuery, BaseForm } from '@/api/product/base/types';
|
|
|
import { BrandVO } from '@/api/product/brand/types';
|
|
import { BrandVO } from '@/api/product/brand/types';
|
|
|
|
|
+import { listBrand } from '@/api/product/brand';
|
|
|
import { categoryTreeVO } from '@/api/product/category/types';
|
|
import { categoryTreeVO } from '@/api/product/category/types';
|
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
|
|
|
|
|
@@ -236,12 +245,7 @@ const multiple = ref(true);
|
|
|
const total = ref(0);
|
|
const total = ref(0);
|
|
|
const brandOptions = ref<BrandVO[]>([]);
|
|
const brandOptions = ref<BrandVO[]>([]);
|
|
|
const brandLoading = ref(false);
|
|
const brandLoading = ref(false);
|
|
|
-const brandOptionsFormatted = computed(() => {
|
|
|
|
|
- return brandOptions.value.slice(0, 500).map((item) => ({
|
|
|
|
|
- label: item.brandName,
|
|
|
|
|
- value: item.brandName // review.vue使用brandName作为value
|
|
|
|
|
- }));
|
|
|
|
|
-});
|
|
|
|
|
|
|
+let brandSearchTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
const categoryOptions = ref<categoryTreeVO[]>([]);
|
|
const categoryOptions = ref<categoryTreeVO[]>([]);
|
|
|
const hasMore = ref(true); // 是否还有更多数据
|
|
const hasMore = ref(true); // 是否还有更多数据
|
|
|
const pageHistory = ref([]);
|
|
const pageHistory = ref([]);
|
|
@@ -286,7 +290,7 @@ const queryParams = ref<BaseQuery>({
|
|
|
way: undefined,
|
|
way: undefined,
|
|
|
productNo: undefined,
|
|
productNo: undefined,
|
|
|
itemName: undefined,
|
|
itemName: undefined,
|
|
|
- brandName: undefined,
|
|
|
|
|
|
|
+ brandId: undefined,
|
|
|
purchaseNature: undefined,
|
|
purchaseNature: undefined,
|
|
|
bottomCategoryId: undefined,
|
|
bottomCategoryId: undefined,
|
|
|
isSelf: undefined,
|
|
isSelf: undefined,
|
|
@@ -366,8 +370,8 @@ const initRouteParams = () => {
|
|
|
if (route.query.productStatus) {
|
|
if (route.query.productStatus) {
|
|
|
queryParams.value.productStatus = Number(route.query.productStatus);
|
|
queryParams.value.productStatus = Number(route.query.productStatus);
|
|
|
}
|
|
}
|
|
|
- if (route.query.brandName) {
|
|
|
|
|
- queryParams.value.brandName = route.query.brandName as string;
|
|
|
|
|
|
|
+ if (route.query.brandId) {
|
|
|
|
|
+ queryParams.value.brandId = route.query.brandId as string;
|
|
|
}
|
|
}
|
|
|
if (route.query.bottomCategoryId) {
|
|
if (route.query.bottomCategoryId) {
|
|
|
queryParams.value.bottomCategoryId = route.query.bottomCategoryId as string;
|
|
queryParams.value.bottomCategoryId = route.query.bottomCategoryId as string;
|
|
@@ -457,24 +461,25 @@ const submitReview = async () => {
|
|
|
await getList();
|
|
await getList();
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-/** 查询品牌列表(实时请求,每次只加载500条) */
|
|
|
|
|
-const getBrandList = async () => {
|
|
|
|
|
|
|
+/** 加载品牌选项(默认100条) */
|
|
|
|
|
+const loadBrandOptions = async (keyword?: string) => {
|
|
|
|
|
+ brandLoading.value = true;
|
|
|
try {
|
|
try {
|
|
|
- brandLoading.value = true;
|
|
|
|
|
- const res = await brandList({ pageNum: 1, pageSize: 500 });
|
|
|
|
|
- brandOptions.value = res.data || [];
|
|
|
|
|
|
|
+ const res = await listBrand({ pageNum: 1, pageSize: 100, brandName: keyword });
|
|
|
|
|
+ brandOptions.value = res.rows || [];
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
- console.error('获取品牌列表失败:', error);
|
|
|
|
|
|
|
+ console.error('加载品牌列表失败:', error);
|
|
|
} finally {
|
|
} finally {
|
|
|
brandLoading.value = false;
|
|
brandLoading.value = false;
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-/** 处理品牌下拉框显示/隐藏 */
|
|
|
|
|
-const handleBrandVisibleChange = (visible: boolean) => {
|
|
|
|
|
- if (visible && brandOptions.value.length === 0) {
|
|
|
|
|
- getBrandList();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+/** 品牌远程搜索(防抖) */
|
|
|
|
|
+const handleBrandSearch = (query: string) => {
|
|
|
|
|
+ if (brandSearchTimer) clearTimeout(brandSearchTimer);
|
|
|
|
|
+ brandSearchTimer = setTimeout(() => {
|
|
|
|
|
+ loadBrandOptions(query || undefined);
|
|
|
|
|
+ }, 300);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/** 查询分类树 */
|
|
/** 查询分类树 */
|
|
@@ -486,6 +491,7 @@ const getCategoryTree = async () => {
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
getCategoryTree();
|
|
getCategoryTree();
|
|
|
initRouteParams();
|
|
initRouteParams();
|
|
|
|
|
+ loadBrandOptions();
|
|
|
getList();
|
|
getList();
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|