ad-manage/src/pages/launchSystemV3/account/changeRecord.tsx

import Tables from "@/components/Tables";
import { DatePicker, Drawer, Form, Input, Modal, Select } from "antd";
import moment from "moment";
import React, { useCallback, useEffect, useState } from "react";
import { useModel } from "umi";
import { columnsCrGdt } from "./tablesConfig"

type Props = {
    data?: { name: number, id: number } | null,
    visible?: boolean,
    onChange?: () => void,
    onClose?: () => void
}
function ChangeRecord(props: Props) {

    const { data, visible, onClose } = props
    const { getGdtChangeRecord, editAccountChangeRecord, editGdtChangeRecord, getResource } = useModel('useOperating.useAccountyyb')
    const [accountQueryForm, setAccountQueryForm] = useState<{ quickAppAccountId: number, pageNum: number, pageSize: number }>({ quickAppAccountId: data?.id as number, pageNum: 1, pageSize: 20 })
    const [gdtQueryForm, setGdtQueryForm] = useState<{ gdtAccountId: number, pageNum: number, pageSize: number }>({ gdtAccountId: data?.name as number, pageNum: 1, pageSize: 20 })
    const [editTitle, setEditTitle] = useState<string>('编辑')
    const [form] = Form.useForm()
    const [editData, setEditData] = useState<{ recordId: number, putResourceId: number | undefined, resourceNames: string, beginTime: any, endTime: any } | null>(null)
    const [editVisible, setEditVisible] = useState<boolean>(false)

    useEffect(() => {
        getList()
    }, [accountQueryForm, gdtQueryForm])

    const getList = () => {
        getGdtChangeRecord.run(gdtQueryForm)
    }

    // 分页
    const pageChange = useCallback((page: string | number, pageSize?: string | number) => {
        setGdtQueryForm({ ...gdtQueryForm, pageNum: page as number, pageSize: pageSize as number })
    }, [accountQueryForm, gdtQueryForm])

    // 编辑
    const editHandle = useCallback((data: any) => {
        const { beginTime, endTime, id, putResourceName } = data
        setEditData({ beginTime: moment(beginTime), endTime: endTime ? moment(endTime) : null, recordId: id, putResourceId: undefined, resourceNames: putResourceName })
        setEditTitle('编辑 ' + putResourceName)
        setEditVisible(true)
        setTimeout(() => {
            form.resetFields()
        }, 100)
    }, [editData, editTitle, editVisible, form])

    // 搜索资源
    const handleSearch = (value: string) => {
        getResource.run({ resourceName: value, resourceType: 0 })
    }

    const handleOk = async () => {
        form.submit()
        let { resourceNames, ...data1 }  = await form.validateFields()
        let proms = { ...data1, beginTime: moment(data1.beginTime).format('YYYY-MM-DD') }
        if (data1.endTime) {
            proms.endTime = moment(data1.endTime).format('YYYY-MM-DD')
        }
        editGdtChangeRecord.run({ ...proms, recordId: editData?.recordId }).then(res => {
            if(res) {
                setEditData(null);
                setEditVisible(false);
                getGdtChangeRecord.refresh()
            }
        })
    }

    return <div>

        <Drawer title={data?.name + ' 变更记录'} placement="right" width={1200} onClose={() => { onClose && onClose() }} open={visible}>
            <Tables
                columns={columnsCrGdt(editHandle)}
                dataSource={getGdtChangeRecord?.data?.records}
                total={getGdtChangeRecord?.data?.total}
                loading={getGdtChangeRecord?.loading}
                pageChange={pageChange}
                sizeChange={pageChange}
                current={getGdtChangeRecord?.data?.current}
                pageSize={getGdtChangeRecord?.data?.size}
                size={'small'}
                scroll={{ x: 1100 }}
            />
        </Drawer>

        {editVisible && <Modal title={editTitle} open={editVisible} onOk={handleOk} onCancel={() => { setEditData(null); form.resetFields(); setEditVisible(false); }} confirmLoading={editAccountChangeRecord.loading || editGdtChangeRecord.loading}>
            <Form
                name="basic"
                form={form}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                autoComplete="off"
                initialValues={{ ...editData }}
            >
                <Form.Item label="开始时间" name="beginTime" rules={[{ type: 'object' as const, required: true, message: '请选择时间!' }]}>
                    <DatePicker />
                </Form.Item>
                <Form.Item label="结束时间" name="endTime">
                    <DatePicker />
                </Form.Item>
                <Form.Item label="当前投放信息" name="resourceNames">
                    <Input.TextArea autoSize disabled />
                </Form.Item>
                <Form.Item label="投放信息" name="putResourceId" rules={[{ type: 'number', required: true, message: '请选择投放信息!' }]}>
                    <Select
                        showSearch
                        placeholder="选择投放信息"
                        defaultActiveFirstOption={false}
                        showArrow={false}
                        filterOption={false}
                        onSearch={handleSearch}
                        notFoundContent={null}
                    >
                        {getResource?.data?.map((item: { id: number, resourceName: string }) => <Select.Option key={item.id} value={item.id}>{item.resourceName}</Select.Option>)}
                    </Select>
                </Form.Item>

            </Form>

        </Modal>}

    </div>
}


export default React.memo(ChangeRecord)