Add product category data and api in tree view #41

index.html

@@ -140,7 +140,7 @@
     </style>
     <div class="app-loading">
         <div class="app-loading-wrap">
-            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
             <div class="app-loading-dots">
                 <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
             </div>

src/api/product/model/productCategoryModel.ts

@@ -0,0 +1,9 @@
+export interface ProductCategoryResp {
+    id: number | string;
+    parentId: number | string;
+    categoryName: string;
+    categoryLevel: string;
+    serialNumber: string;
+    remark: string;
+    sort: number;
+}

src/api/product/productCategory.ts

@@ -0,0 +1,19 @@
+import {defHttp} from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+import {BaseDataResp} from "@/api/model/baseModel";
+import {ProductCategoryResp} from "@/api/product/model/productCategoryModel";
+
+enum Api {
+    List = '/product/category/list',
+}
+
+export function getCategoryList(mode: ErrorMessageMode = 'notice') {
+    return defHttp.get<BaseDataResp<ProductCategoryResp>>(
+        {
+            url: Api.List,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}

src/components/Table/src/hooks/useDataSource.ts

@@ -310,11 +310,19 @@ export function useDataSource(
       const result  = await api(params);
       const res = result.data;
       if (isTreeTable) {
-        const tree = array2tree(res.data);
-        rawDataSourceRef.value = tree;
-        isArrayResult = Array.isArray(tree);
-        resultItems = isArrayResult ? tree : get(tree, listField);
-        resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        if(res.data){
+          const tree = array2tree(res.data);
+          rawDataSourceRef.value = tree;
+          isArrayResult = Array.isArray(tree);
+          resultItems = isArrayResult ? tree : get(tree, listField);
+          resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        }else {
+          const tree = array2tree(res);
+          rawDataSourceRef.value = array2tree(res);
+          isArrayResult = Array.isArray(tree);
+          resultItems = isArrayResult ? tree : get(tree, listField);
+          resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        }
       } else {
         rawDataSourceRef.value = res;
         isArrayResult = Array.isArray(res);

src/views/product/category/CategoryDrawer.vue

@@ -0,0 +1,53 @@
+<template>
+  <BasicDrawer
+      v-bind="$attrs"
+      @register="registerDrawer"
+      showFooter
+      :title="getTitle"
+      width="50%"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { CategorySchema } from './category.data';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+export default defineComponent({
+  name: 'CategoryDrawer',
+  components: { BasicDrawer, BasicForm },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+    const menuId = ref<number>(0);
+    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+      labelWidth: 100,
+      schemas: CategorySchema,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 12, md: 24 },
+    });
+
+    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+      resetFields();
+      setDrawerProps({ confirmLoading: false });
+      isUpdate.value = !!data?.isUpdate;
+
+      if (unref(isUpdate)) {
+        setFieldsValue({
+          ...data,
+        });
+      }
+      if ('record' in data) {
+        menuId.value = data.id;
+      }
+    });
+
+    const getTitle = computed(() => (!unref(isUpdate) ? '新增产品分类' : '编辑产品分类'));
+
+    return { registerDrawer, registerForm, getTitle };
+  },
+});
+</script>

src/views/product/category/category.data.ts

@@ -0,0 +1,55 @@
+import {FormSchema} from "@/components/Form";
+import {BasicColumn} from "@/components/Table";
+import {getCategoryList} from "@/api/product/productCategory";
+export const columns: BasicColumn[] = [
+    {
+        title: '分类名称',
+        dataIndex: 'categoryName',
+        width: 150,
+        align: 'left',
+    },
+    {
+        title: '父级分类id',
+        dataIndex: 'parentId',
+    },
+    {
+        title: '分类级别',
+        dataIndex: 'categoryLevel',
+    },
+    {
+        title: '序列号',
+        dataIndex: 'serialNumber',
+    },
+    {
+        title: '排序',
+        dataIndex: 'sort',
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+    },
+]
+export const CategorySchema: FormSchema[] = [
+    {
+        field: 'id',
+        label: '分类id',
+        component: 'Input',
+        show: false,
+    },
+    {
+        field: 'categoryName',
+        label: '分类名称',
+        component: 'Input',
+    },
+    {
+        field: 'parentId',
+        label: '上级分类',
+        component: 'ApiTreeSelect',
+        componentProps: {
+            api: getCategoryList,
+            resultField: 'data',
+            labelField: 'categoryName',
+            valueField: 'id',
+        },
+    },
+]