fix(多租户): 多租户协议资产管理

多租户协议资产绑定/查看搜索表单 re #81
jetlinks · Jun 19, 2020 · 52adba9 · 52adba9
1 parent 8bc589d
commit 52adba9
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 75 deletions.
diff --git a/src/pages/system/tenant/components/assets/product/edit/add/index.tsx b/src/pages/system/tenant/components/assets/product/edit/add/index.tsx
@@ -1,5 +1,5 @@
-import { Form, Drawer, Select, Divider, Button, Table, message } from "antd";
-import React, { useState, useEffect, Fragment } from "react";
+import { Form, Drawer, Select, Divider, Button, message } from "antd";
+import React, { useState, useEffect } from "react";
 import { ListData } from "@/services/response";
 import Service from "@/pages/system/tenant/service";
 import encodeQueryParam from "@/utils/encodeParam";
@@ -75,7 +75,7 @@ const Add = (props: Props) => {
                     message.error('请选择成员');
                     setLoading(false);
                 } else {
-                    service.assets.bind(data.id, bindData).subscribe(resp => {
+                    service.assets.bind(data.id, bindData).subscribe(() => {
                         setLoading(false);
                         message.success('添加成功')
                         props.close();
@@ -123,6 +123,7 @@ const Add = (props: Props) => {
                         initialValue: checkedUserList
                     })(
                         <Select
+                            allowClear
                             value={checkedUserList}
                             mode="tags"
                             placeholder="选择成员"

diff --git a/src/pages/system/tenant/components/assets/protocol/edit/add/index.tsx b/src/pages/system/tenant/components/assets/protocol/edit/add/index.tsx
@@ -1,10 +1,13 @@
-import { Form, Drawer, Select, Divider, Button, Table, message } from "antd";
-import React, { useState, useEffect, Fragment } from "react";
+import { Form, Drawer, Select, Divider, Button, message } from "antd";
+import React, { useState, useEffect } from "react";
 import { ListData } from "@/services/response";
 import Service from "@/pages/system/tenant/service";
 import encodeQueryParam from "@/utils/encodeParam";
+import { FormComponentProps } from "antd/es/form";
+import SearchForm from "@/components/SearchForm";
+import ProTable from "@/pages/system/permission/component/ProTable";
 
-interface Props {
+interface Props extends FormComponentProps {
     close: Function
     data: any
     user: any
@@ -15,51 +18,75 @@ const Add = (props: Props) => {
     const [list, setList] = useState<ListData<any>>();
     const [loading, setLoading] = useState<boolean>(true);
     const [userList, setUserList] = useState();
-    const { data } = props;
+    const { data, form: { getFieldDecorator, validateFields } } = props;
     const [checkedUserList, setCheckedUserList] = useState<string[]>(props.user ? [props.user] : []);
     const [selectedAssetsId, setSelectedAssetsId] = useState<string[]>([]);
 
-    useEffect(() => {
-        service.assets.protocol(encodeQueryParam({
-            terms: {
-                id$assets: JSON.stringify({
-                    tenantId: data?.id,
-                    assetType: 'protocol',
-                    not: true,
-                })
-            }
-        })).subscribe(resp => {
+    const initSearch = {
+        terms: {
+            id$assets: JSON.stringify({
+                tenantId: data?.id,
+                assetType: 'protocol',
+                not: true,
+            })
+        },
+        pageIndex: 0,
+        pageSize: 10,
+    }
+    const [searchParam, setSearchParam] = useState<any>(initSearch);
+
+    const handleSearch = (params: any) => {
+        const tempParam = { ...searchParam, ...params, };
+        const defaultItem = searchParam.terms;
+        const tempTerms = params?.terms;
+        const terms = tempTerms ? { ...defaultItem, ...tempTerms } : initSearch;
+        let tempSearch = {};
+        if (tempTerms) {
+            tempParam.terms = terms;
+            tempSearch = tempParam
+        } else {
+            tempSearch = initSearch
+        }
+        setSearchParam(tempSearch);
+        service.assets.protocol(encodeQueryParam(tempSearch)).subscribe(resp => {
             setList(resp);
             setLoading(false);
         });
+    }
+    useEffect(() => {
+        handleSearch(searchParam);
 
         service.member.query(data.id, {}).subscribe(resp => {
             setUserList(resp.data);
-            console.log(resp, 'res');
         });
     }, []);
 
     const bind = () => {
         setLoading(true);
         const bindData: any[] = []
 
-        checkedUserList.forEach(id => bindData.push({
-            userId: id,
-            assetType: 'protocol',
-            assetIdList: selectedAssetsId,
-            allPermission: true,
-        }));
-        console.log(checkedUserList.length, bindData, 'jjj');
-        if (checkedUserList.length === 0) {
-            message.error('请选择成员');
-            setLoading(false);
-        } else {
-            service.assets.bind(data.id, bindData).subscribe(resp => {
+        validateFields((error) => {
+            if (!error) {
+                checkedUserList.forEach(id => bindData.push({
+                    userId: id,
+                    assetType: 'protocol',
+                    assetIdList: selectedAssetsId,
+                    allPermission: true,
+                }));
+                if (checkedUserList.length === 0) {
+                    message.error('请选择成员');
+                    setLoading(false);
+                } else {
+                    service.assets.bind(data.id, bindData).subscribe(() => {
+                        setLoading(false);
+                        message.success('添加成功')
+                        props.close();
+                    });
+                }
                 setLoading(false);
-                message.success('添加成功')
-                props.close();
-            });
-        }
+            }
+        });
+
     }
     const rowSelection = {
         onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
@@ -77,39 +104,73 @@ const Add = (props: Props) => {
         }, {
             title: '名称',
             dataIndex: 'name'
-        }, {
-            title: '操作',
-            render: () => (
-                <Fragment>
-                    <a>查看</a>
-                </Fragment>
-            )
         }]
     return (
         <Drawer
             title="添加产品资产"
             visible
-            width='60VW'
+            width='70VW'
             onClose={() => props.close()}
         >
-            <Form.Item label="选择成员">
-                <Select
-                    value={checkedUserList}
-                    mode="tags"
-                    placeholder="选择成员"
-                    onChange={(value: string[]) => { setCheckedUserList(value) }}
-                    style={{ width: '100%', marginBottom: 10 }}
+            <Form layout="horizontal">
+
+                <Form.Item label="选择成员"
+                    labelCol={{ xl: 2, xs: 4, lg: 3, md: 3 }}
+                    wrapperCol={{ xl: 22, xs: 20, lg: 21, md: 21 }}
                 >
-                    {(userList || []).map((item: any) => <Select.Option key={item.id} value={item.userId}>{item.name}</Select.Option>)}
-                </Select>
-            </Form.Item>
+                    {getFieldDecorator('checkUser', {
+                        rules: [{
+                            required: true,
+                            message: '请选择成员'
+                        }],
+                        initialValue: checkedUserList
+                    })(
+                        <Select
+                            allowClear
+                            value={checkedUserList}
+                            mode="tags"
+                            placeholder="选择成员"
+                            onChange={(value: string[]) => { setCheckedUserList(value) }}
+                            style={{ width: '100%', marginBottom: 10 }}
+                        >
+                            {(userList || []).map((item: any) => <Select.Option key={item.id} value={item.userId}>{item.name}</Select.Option>)}
+                        </Select>
+                    )}
+
+                </Form.Item>
+            </Form>
             <Divider />
-            <Table
+            <SearchForm
+                search={(searchData: any) => {
+                    setLoading(true)
+                    handleSearch({ terms: searchData });
+                }}
+                formItems={[
+                    {
+                        label: "ID",
+                        key: "id$LIKE",
+                        type: 'string'
+                    },
+                    {
+                        label: "名称",
+                        key: "name$LIKE",
+                        type: 'string'
+                    }
+                ]}
+            />
+            <ProTable
                 loading={loading}
                 rowKey="id"
                 rowSelection={rowSelection}
                 columns={columns}
-                dataSource={list?.data} />,
+                dataSource={list?.data || []}
+                onSearch={(params: any) => {
+                    setLoading(true);
+                    handleSearch(params)
+                }}
+                paginationConfig={list || {}}
+            />
+
             <div
                 style={{
                     position: 'absolute',
@@ -142,4 +203,4 @@ const Add = (props: Props) => {
         </Drawer>
     )
 }
-export default Add;
+export default Form.create<Props>()(Add);
diff --git a/src/pages/system/tenant/components/assets/protocol/edit/index.tsx b/src/pages/system/tenant/components/assets/protocol/edit/index.tsx
@@ -1,9 +1,10 @@
-import { Drawer, Button, Table, Select, message } from "antd";
+import { Drawer, Button, message } from "antd";
 import React, { useState, useEffect, Fragment } from "react";
 import Service from "@/pages/system/tenant/service";
 import { ListData } from "@/services/response";
 import encodeQueryParam from "@/utils/encodeParam";
 import SearchForm from "@/components/SearchForm";
+import ProTable from "@/pages/system/permission/component/ProTable";
 import Add from "./add";
 import User from "./user";
 
@@ -20,25 +21,43 @@ const Edit = (props: Props) => {
     const [cat, setCat] = useState<boolean>(false);
     const [asset, setAsset] = useState();
     const [selected, setSelected] = useState<any[]>([]);
-
     const { data } = props;
 
-    const handleSearch = () => {
-        service.assets.protocol(encodeQueryParam({
-            terms: {
-                id$assets: JSON.stringify({
-                    tenantId: data?.id,
-                    assetType: 'protocol',
-                    memberId: props.user,
-                    // not: true,
-                })
-            }
-        })).subscribe(resp => {
+    const initSearch = {
+        terms: {
+            id$assets: JSON.stringify({
+                tenantId: data?.id,
+                assetType: 'protocol',
+                memberId: props.user,
+                // not: true,
+            })
+        },
+        pageIndex: 0,
+        pageSize: 10,
+    }
+    const [searchParam, setSearchParam] = useState<any>(initSearch);
+
+    const handleSearch = (params: any) => {
+        const tempParam = { ...searchParam, ...params, };
+        const defaultItem = searchParam.terms;
+        const tempTerms = params?.terms;
+        const terms = tempTerms ? { ...defaultItem, ...tempTerms } : initSearch;
+        let tempSearch = {};
+
+        if (tempTerms) {
+            tempParam.terms = terms;
+            tempSearch = tempParam
+        } else {
+            tempSearch = initSearch
+        }
+        setSearchParam(tempSearch);
+        service.assets.protocol(encodeQueryParam(tempSearch)).subscribe(resp => {
             setList(resp);
         })
     }
+
     useEffect(() => {
-        handleSearch()
+        handleSearch(searchParam)
     }, []);
     const rowSelection = {
         onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
@@ -72,21 +91,21 @@ const Edit = (props: Props) => {
             assetType: 'protocol'
         }]).subscribe(() => {
             message.success('解绑成功');
-            handleSearch();
+            handleSearch(searchParam);
         })
     }
 
     return (
         <Drawer
             title="编辑协议资产"
             visible
-            width='60VW'
+            width='75VW'
             onClose={() => props.close()}
         >
 
             <SearchForm
                 search={(params: any) => {
-                    console.log(params, 'parsm')
+                    handleSearch({ terms: params });
                 }}
                 formItems={[
                     {
@@ -115,11 +134,14 @@ const Edit = (props: Props) => {
                     </Button>
                 )
             }
-            <Table
+            <ProTable
                 rowKey="id"
                 rowSelection={rowSelection}
                 columns={columns}
-                dataSource={list?.data} />,
+                dataSource={list?.data || []}
+                onSearch={(searchData: any) => handleSearch(searchData)}
+                paginationConfig={list || {}}
+            />
             <div
                 style={{
                     position: 'absolute',
@@ -147,7 +169,7 @@ const Edit = (props: Props) => {
                     data={data}
                     close={() => {
                         setAdd(false);
-                        handleSearch();
+                        handleSearch(searchParam);
                     }} />
             )}
             {cat && <User asset={asset} close={() => setCat(false)} />}