index.jsx

import React, { useState, useMemo, useRef, useEffect } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { doFetch } from '@/utils/doFetch';
import { useRequest } from "ahooks";
const Custom = () => {
    let actionRef = useRef();
    const [drawer, setdrawer] = useState({
        open: false,
    });
    const { run, loading, runAsync } = useRequest(doFetch, {
        manual: true,
        onSuccess: (res, params) => {
            if (res?.code == "0000") {
                actionRef?.current?.reload();
                setdrawer((s) => ({
                    ...s,
                    open: false,
                    item: {}
                }));
            }
        },
    });

    const edit = (text, row, _, action) => {
        return (
            <PremButton
                key='edit'
                btn={{
                    size: 'small',
                    onClick: () => {
                        setdrawer((s) => ({
                            ...s,
                            open: true,
                            item: row,
                            val: 'edit',
                            title: '编辑'
                        }));
                    },
                }}
            >
                编辑
            </PremButton>
        );
    };

    const remove = (text, row, _, action) => {
        return (
            <PremButton
                key='remove'
                pop={{
                    title: '是否删除该客户?',
                    okText: '确认',
                    cancelText: '取消',
                    onConfirm: async () => {
                        let res = await doFetch({ url: pathconfig.delete, params: { id: row.id } });
                        if (res.code === '0000') {
                            actionRef.current.reload();
                        }
                    },
                }}
                btn={{
                    size: 'small',
                    type: 'danger',
                }}
            >
                删除
            </PremButton>
        );
    };
    const columns = useMemo(() => {
        let defcolumn = getcolumns(setdrawer)?.columns ?? [];
        let factory = defcolumn.filter(it => it.key == 'factoryId')?.[0];
        if (drawer.val == 'add') {
            factory.options.params = {}
        } else if (drawer.val == 'edit') {
            factory.options.params = { factoryId: drawer.item.factoryId };
        }
        return defcolumn.concat({
            title: '操作',
            valueType: 'option',
            width: 150,
            render: (text, row, _, action) => [edit(text, row, _, action), remove(text, row, _, action)],
        });
    }, [drawer.val, drawer.item]);
    const pathconfig = useMemo(() => {
        let pathconf = getcolumns(setdrawer)?.pathconfig ?? {};
        return pathconf;
    }, []);
    return <div>
        <AutoTable
            pagetitle={<h3 className="page-title">客户管理</h3>}
            columns={columns}
            path={pathconfig?.list}
            actionRef={actionRef}
            pageextra={'add'}
            resizeable={false}
            addconfig={{
                // access: 'sysDepartment_save',
                btn: {
                    type: 'primary',
                    disabled: false,
                    onClick: () => {
                        // let res = await doFetch({url:})
                        setdrawer((s) => ({
                            ...s,
                            open: true,
                            item: {},
                            params: {},
                            title: '新增',
                            val: 'add'
                        }));
                    },
                },
            }}
        />
        <DrawerPro
            {...drawer}
            fields={columns}
            detailpath={drawer.val == 'add' || !drawer?.item?.id ? '' : pathconfig?.detail}
            params={drawer.val == 'add' ? {} : { id: drawer?.item?.id }}
            defaultFormValue={drawer?.item ?? {}}
            placement="right"
            onClose={() => {
                setdrawer((s) => ({
                    ...s,
                    open: false,
                }));
            }}
            onFinish={async (vals) => {
                if (drawer?.val == "add") {
                    await runAsync({ url: pathconfig?.add, params: { ...vals } });
                } else if (drawer?.val == "edit") {
                    await runAsync({
                        url: pathconfig?.edit,
                        params: { ...vals, id: drawer?.item?.id },
                    });
                }
            }}
        >
        </DrawerPro>
    </div>
}
export default Custom;