review：【mall 商城】product 相关代码

apps/web-antd/src/components/select-modal/index.ts

@@ -1,2 +1,3 @@
+// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
 export { default as DeptSelectModal } from './dept-select-modal.vue';
 export { default as UserSelectModal } from './user-select-modal.vue';

apps/web-antd/src/views/mall/product/category/index.vue

@@ -44,6 +44,7 @@ function handleEdit(row: MallCategoryApi.Category) {
 /** 查看商品操作 */
 const router = useRouter(); // 路由
 const handleViewSpu = (id: number) => {
+  // TODO @xingyu：貌似跳转不到详情；
   router.push({
     name: 'ProductSpu',
     query: { categoryId: id },
@@ -165,8 +166,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               icon: ACTION_ICON.VIEW,
               auth: ['product:category:update'],
-              ifShow: row.parentId > 0,
-              onClick: handleViewSpu.bind(null, row),
+              ifShow: row.parentId !== undefined && row.parentId > 0,
+              onClick: handleViewSpu.bind(null, row.id!),
             },
             {
               label: $t('common.delete'),

apps/web-antd/src/views/mall/product/comment/data.ts

@@ -111,6 +111,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 表格列配置 */
+// TODO @xingyu：列表的宽度需要优化下，样式~
 export function useGridColumns<T = MallCommentApi.Comment>(
   onStatusChange?: (
     newStatus: boolean,

apps/web-antd/src/views/mall/product/spu/index.vue

@@ -2,8 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
+// TODO @xingyu：所有 mall 的 search 少了，请输入 xxx；表单也是类似
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import {
@@ -30,6 +31,7 @@ import { ProductSpuStatusEnum } from '#/utils';
 import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
+const route = useRoute(); // 路由
 const tabType = ref(0);
 
 const categoryList = ref();
@@ -64,8 +66,9 @@ const tabsData = ref([
 ]);
 
 /** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
+async function onRefresh() {
+  await gridApi.query();
+  await getTabCount();
 }
 
 /** 获得每个 Tab 的数量 */
@@ -124,7 +127,7 @@ async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
     .then(async () => {
       await updateStatus({ id: row.id as number, status: newStatus });
       message.success(`${text}成功`);
-      onRefresh();
+      await onRefresh();
     })
     .catch(() => {
       message.error(`${text}失败`);
@@ -209,11 +212,16 @@ function onChangeTab(key: any) {
   gridApi.query();
 }
 
-onMounted(() => {
-  getTabCount();
-  getCategoryList({}).then((res) => {
-    categoryList.value = handleTree(res, 'id', 'parentId', 'children');
-  });
+onMounted(async () => {
+  // 解析路由的 categoryId
+  if (route.query.categoryId) {
+    await gridApi.formApi.setValues({
+      categoryId: Number(route.query.categoryId),
+    });
+  }
+  await getTabCount();
+  const categoryRes = await getCategoryList({});
+  categoryList.value = handleTree(categoryRes, 'id', 'parentId', 'children');
 });
 </script>
 
@@ -228,6 +236,7 @@ onMounted(() => {
 
     <Grid>
       <template #top>
+        <!-- TODO @xingyu：tabs 可以考虑往上以一些，和操作按钮在一排 -->
         <Tabs class="border-none" @change="onChangeTab">
           <Tabs.TabPane
             v-for="item in tabsData"
@@ -257,6 +266,7 @@ onMounted(() => {
         />
       </template>
       <template #expand_content="{ row }">
+        <!-- TODO @xingyu：展开的样子，有点丑 -->
         <Descriptions
           :column="4"
           class="mt-4"

apps/web-antd/src/views/mall/product/spu/modules/detail.vue

@@ -1,3 +1,6 @@
 <script lang="ts" setup></script>
 
-<template>detail</template>
+<template>
+  detail
+  <!-- TODO @xingyu：待开发 -->
+</template>

apps/web-antd/src/views/mall/product/spu/modules/form.vue

@@ -1,3 +1,6 @@
 <script lang="ts" setup></script>
 
-<template>form</template>
+<template>
+  form
+  <!-- TODO @xingyu：待开发 -->
+</template>