From 478c4d2be8081198df38bc9eebc352b241903ec7 Mon Sep 17 00:00:00 2001
From: wulibaibao <13366578180@163.com>
Date: Thu, 25 Aug 2022 10:08:33 +0800
Subject: [PATCH] feat: product category create in modal

---
 .../Product/TestProduct/CreateProduct.tsx     | 62 ++++++++++++-------
 src/pages/Product/TestProduct/services.ts     |  2 +-
 src/pages/Suite/components/Case/Base.tsx      |  8 +--
 src/pages/Suite/components/FormItems.tsx      |  3 +-
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/pages/Product/TestProduct/CreateProduct.tsx b/src/pages/Product/TestProduct/CreateProduct.tsx
index 091776b..cc81d1c 100644
--- a/src/pages/Product/TestProduct/CreateProduct.tsx
+++ b/src/pages/Product/TestProduct/CreateProduct.tsx
@@ -3,13 +3,50 @@ import { Modal, Row, Form, Space, Button, Select, Input, message } from "antd"
 import React from "react"
 import { queryTestPlanList } from "@/pages/Plan/services"
 import { useRequest } from "umi"
-import { createOneProduct, editOneProduct, queryCategoryList, queryOneProduct } from "./services"
+import { createOneCategory, createOneProduct, editOneProduct, queryCategoryList, queryOneProduct } from "./services"
+import { EditAddBtn } from "@/pages/Suite/components/FormItems"
+import type { FormItemProps } from "antd"
 
 type Props = Record<string, any>
 type Refs = Record<string, any>
 
 const isNumber = (num: unknown) => Object.prototype.toString.call(num) === "[object Number]"
 
+export const ProductCategoryItem: React.FC<FormItemProps> = () => {
+    const { data, run } = useRequest(() => queryCategoryList(), { debounceInterval: 150 })
+
+    const onOk = async (inp: string, callback: () => void) => {
+        if (!inp) return
+        const { code, msg } = await createOneCategory({ name: inp })
+        if (code !== 200) return message.error(msg)
+        run()
+        callback?.()
+    }
+
+    return (
+        <Form.Item
+            label="产品类别"
+            name="category_id"
+            rules={[{
+                required: true
+            }]}
+        >
+            <Select
+                placeholder="请选择产品类别"
+                filterOption={(input, option: any) => option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                options={data?.map(({ name, id }: any) => ({ label: name, value: id }))}
+                showSearch
+                dropdownRender={menu => (
+                    <>
+                        {menu}
+                        <EditAddBtn title="新建产品大类" onOk={onOk} />
+                    </>
+                )}
+            />
+        </Form.Item>
+    )
+}
+
 const CreateProduct: React.ForwardRefRenderFunction<Refs, Props> = (props, ref) => {
     const { onOk } = props
 
@@ -20,7 +57,6 @@ const CreateProduct: React.ForwardRefRenderFunction<Refs, Props> = (props, ref)
     const [form] = Form.useForm()
 
     const { data, run } = useRequest(() => queryTestPlanList(), { manual: true })
-    const { data: categrys, run: runCategrys } = useRequest(() => queryCategoryList(), { manual: true })
 
     const { run: getOneProduct } = useRequest((test_plan_id) => queryOneProduct(test_plan_id), { manual: true })
 
@@ -31,7 +67,6 @@ const CreateProduct: React.ForwardRefRenderFunction<Refs, Props> = (props, ref)
                     const editSource = await getOneProduct(_)
                     form.setFieldsValue(editSource)
                 }
-                runCategrys()
                 run()
                 setVisible(true)
                 setSource(_)
@@ -92,25 +127,8 @@ const CreateProduct: React.ForwardRefRenderFunction<Refs, Props> = (props, ref)
                 >
                     <Input placeholder="请输入测试产品名称" />
                 </Form.Item>
-                <Form.Item
-                    label="产品类别"
-                    name="category_id"
-                    rules={[{
-                        required: true
-                    }]}
-                >
-                    <Select
-                        placeholder="请选择产品类别"
-                        filterOption={
-                            (input, option: any) => {
-                                return (
-                                    option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                                )
-                            }
-                        }
-                        options={categrys?.map(({ name, id }: any) => ({ label: name, value: id }))}
-                    />
-                </Form.Item>
+                {/*  */}
+                <ProductCategoryItem />
                 <Form.Item
                     label="测试方案"
                     name="origin_plan_id"
diff --git a/src/pages/Product/TestProduct/services.ts b/src/pages/Product/TestProduct/services.ts
index a318118..9a4770d 100644
--- a/src/pages/Product/TestProduct/services.ts
+++ b/src/pages/Product/TestProduct/services.ts
@@ -41,5 +41,5 @@ export const queryCategoryList = async () => {
 };
 
 export const createOneCategory = async (data: { name: string }) => {
-    return request(`/api/product/get_category`, { method: 'post', data });
+    return request(`/api/product/create_category`, { method: 'post', data });
 };
diff --git a/src/pages/Suite/components/Case/Base.tsx b/src/pages/Suite/components/Case/Base.tsx
index c974c19..be6cda1 100644
--- a/src/pages/Suite/components/Case/Base.tsx
+++ b/src/pages/Suite/components/Case/Base.tsx
@@ -1,12 +1,10 @@
 import React from "react"
-import { Divider, Typography, Form, Table, Tag, Space } from "antd"
+import { Divider, Typography, Form, Table, Tag } from "antd"
 import styled from "styled-components"
 import { testTypeMap, runMethodMap, isAvailableMap, deviceTypeMap, deviceArchMap, runModelMap } from "@/pages/Suite/utils"
 import { CaseTag } from "@/pages/Suite/components/FormItems"
 
-type IProps = {
-    [k: string]: any
-}
+type IProps = Record<string, any>
 
 const TableCls = styled(Table)`
     .ant-table-thead > tr > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
@@ -57,7 +55,7 @@ const BaseChild: React.FC<IProps> = (props) => {
 
     if (!currentCase) return <></>
     const { labels, steps } = currentCase
-    let labelArr: any[] = labels.split(",").filter(Boolean)
+    const labelArr: any[] = labels.split(",").filter(Boolean)
 
     const { custom_fields } = currentCase
 
diff --git a/src/pages/Suite/components/FormItems.tsx b/src/pages/Suite/components/FormItems.tsx
index df89873..25309a4 100644
--- a/src/pages/Suite/components/FormItems.tsx
+++ b/src/pages/Suite/components/FormItems.tsx
@@ -1,6 +1,7 @@
 import React from "react"
-import { Form, Select, message, Row, Divider, Space, Typography, Input, Table, TableColumnProps, Button, FormItemProps } from "antd"
+import { Form, Select, message, Row, Divider, Space, Typography, Input, Table, Button } from "antd"
 import { priorityListOptions } from "@/pages/Suite/utils"
+import type { FormItemProps, TableColumnProps } from "antd"
 import { useCaseProvider } from "../provider";
 
 import { createModule } from "@/pages/Suite/services"
-- 
Gitee