feat(product): detail category

mock/product/category.ts

@@ -0,0 +1,73 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { mock, Random } from 'mockjs';
+import { resultPageSuccess } from '../_util';
+Random.extend({
+  phone: function () {
+    const phonePrefixs = ['132', '135', '189']; // 自己写前缀哈
+    return this.pick(phonePrefixs) + mock(/\d{8}/); //Number()
+  },
+});
+// console.log(Random.phone());
+// 生成 1 - 10 个 随机手机号码
+
+const categoryList = (() => {
+  const result: any[] = [];
+  for (let index = 0; index < 20; index++) {
+    result.push({
+      id: `${index}`,
+      icon: ['ion:layers-outline', 'ion:git-compare-outline', 'ion:tv-outline'][index],
+      component: 'LAYOUT',
+      name: '@ctitle(5,15)',
+      type: '0',
+      orderNo: index + 1,
+      createTime: '@datetime',
+      'status|1': ['0', '0', '1'],
+      children: (() => {
+        const children: any[] = [];
+        for (let j = 0; j < 4; j++) {
+          children.push({
+            id: `${index}-${j}`,
+            type: '1',
+            name: '@ctitle(5,15)',
+            icon: 'ion:document',
+            orderNo: j + 1,
+            createTime: '@datetime',
+            'status|1': ['0', '1'],
+            parentMenu: `${index}`,
+            children: (() => {
+              const children: any[] = [];
+              for (let k = 0; k < 4; k++) {
+                children.push({
+                  id: `${index}-${j}-${k}`,
+                  type: '2',
+                  name: '@ctitle(5,15)' + (j + 1) + '-' + (k + 1),
+                  icon: '',
+                  orderNo: j + 1,
+                  createTime: '@datetime',
+                  'status|1': ['0', '1'],
+                  parentMenu: `${index}-${j}`,
+                  children: undefined,
+                });
+              }
+              return children;
+            })(),
+          });
+        }
+        return children;
+      })(),
+    });
+  }
+  return result;
+})();
+
+export default [
+  {
+    url: '/basic-api/zfb/product/category',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { page = 1, pageSize = 20 } = query;
+      return resultPageSuccess(page, pageSize, categoryList);
+    },
+  },
+] as MockMethod[];

src/api/product/category.ts

@@ -0,0 +1,20 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageParams, RentListGetResultModel } from './model';
+
+enum Api {
+  category = '/zfb/product/category',
+}
+
+/**
+ * @description: Get sample list value
+ */
+
+export const categoryApi = (params: PageParams) =>
+  defHttp.get<RentListGetResultModel>({
+    url: Api.category,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/components/Table/src/hooks/useColumns.ts

@@ -153,7 +153,7 @@ export function useColumns(
       })
       .map((column) => {
         const { slots, dataIndex, customRender, format, edit, editRow, flag } = column;
-
+        Reflect.deleteProperty(column, 'slots');
         if (!slots || !slots?.title) {
           column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
           column.customTitle = column.title;

src/settings/componentSetting.ts

@@ -20,7 +20,7 @@ export default {
     // Number of pages that can be selected
     pageSizeOptions: ['10', '50', '80', '100'],
     // Default display quantity on one page
-    defaultPageSize: 10,
+    defaultPageSize: 20,
     // Default Size
     defaultSize: 'middle',
     // Custom general sort function

src/views/dashboard/product/category.vue

@@ -1,5 +1,116 @@
 <template>
-  <div> 商品分类 </div>
+  <BasicTable @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" @click="handleCreate"> 新增商品分类</a-button>
+      <a-button type="warning" @click="expandAll">展开全部</a-button>
+      <a-button type="error" @click="collapseAll">折叠全部</a-button>
+    </template>
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            icon: 'clarity:note-edit-line',
+            onClick: handleEdit.bind(null, record),
+          },
+          {
+            icon: 'ant-design:delete-outlined',
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDelete.bind(null, record),
+            },
+          },
+        ]"
+      />
+    </template>
+  </BasicTable>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts">
+  import { defineComponent, h } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+  import { categoryApi } from '/@/api/product/category';
+  import { Tag } from 'ant-design-vue';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction },
+    setup() {
+      const { createMessage } = useMessage();
+
+      const { t } = useI18n();
+
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 100,
+        },
+        {
+          title: '分类名称',
+          dataIndex: 'name',
+          width: 200,
+          align: 'left',
+        },
+        {
+          title: '排序',
+          dataIndex: 'orderNo',
+          width: 50,
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          width: 80,
+          customRender: ({ record }) => {
+            const status = record.status;
+            const enable = ~~status === 0;
+            const color = enable ? 'green' : 'red';
+            const text = enable ? '启用' : '停用';
+            return h(Tag, { color: color }, () => text);
+          },
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createTime',
+          width: 180,
+        },
+      ];
+
+      const [registerTable, { expandAll, collapseAll }] = useTable({
+        title: '商品分类',
+        api: categoryApi,
+        columns: columns,
+        useSearchForm: true,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        isTreeTable: true,
+        rowKey: 'id',
+        bordered: true,
+        actionColumn: {
+          width: 80,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+      });
+      function handleCreate() {}
+      function handleEdit() {}
+      function handleDelete() {}
+      return {
+        registerTable,
+        createMessage,
+        t,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        expandAll,
+        collapseAll,
+      };
+    },
+  });
+</script>

src/views/dashboard/product/productDrawer.vue

@@ -40,7 +40,7 @@
         if (unref(isUpdate)) {
           setFieldsValue({
             ...data.record,
-            steamRoom: data.record?.steamRoom?.name as unknown as Recordable,
+            steamRoom: data.record?.steamRoom?.name,
           });
         }
         // const treeData = await getMenuList();