ad-manage/src/pages/launchSystemV3/tencenTasset/corpWechat/index.tsx

import { useAjax } from "@/Hook/useAjax";
import { delCorpWechatApi, getCorpWechatAllApi, getCorpWechatApi, getCorpWechatDetailApi } from "@/services/adqV3/global";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Card, Divider, Input, message, Select, Table, Typography } from "antd";
import React, { useEffect, useState } from "react"
import '../../tencentAdPutIn/index.less'
import Modify from "./modify";
import columns from "./tableConfig";
const { Text, Paragraph } = Typography;

/**
 * 企业微信
 * @returns 
 */
const CorpWechat: React.FC = () => {

    /**********************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, wechatName?: string, wechatIdList?: string[] }>({ pageNum: 1, pageSize: 20 })
    const [queryFormNew, setQueryFormNew] = useState<{ pageNum: number, pageSize: number, wechatName?: string, wechatIdList?: string[] }>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)

    const getCorpWechat = useAjax((params) => getCorpWechatApi(params))
    const delCorpWechat = useAjax((params) => delCorpWechatApi(params))
    /**********************************/

    useEffect(() => {
        getCorpWechat.run(queryFormNew)
    }, [queryFormNew])

    const del = (id: number) => {
        delCorpWechat.run(id).then(res => {
            if (res) {
                message.success('删除成功')
                getCorpWechat.refresh()
            }
        })
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Input style={{ width: 200 }} placeholder="请输入企业微信名称" value={queryForm?.wechatName} allowClear onChange={(e) => setQueryForm({ ...queryForm, wechatName: e.target.value, pageNum: 1 })} />
            <Input.TextArea
                style={{ width: 300 }}
                placeholder="请输入企业微信ID（多个逗号隔开）"
                allowClear
                rows={1}
                onChange={(e) => {
                    let value = e.target.value
                    let arr: string[] = []
                    if (value) {
                        value = value.replace(/[,，\s]/g, ',')
                        arr = value.split(',').filter((a: string) => a)
                    }
                    setQueryForm({ ...queryForm, wechatIdList: arr, pageNum: 1 })
                }}
            />
            <Button type="primary" icon={<SearchOutlined />} onClick={() => setQueryFormNew({ ...queryForm })}>搜索</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true) }}>新增企业微信</Button>
        </div>}
    >

        <Table
            columns={columns(del)}
            dataSource={getCorpWechat.data?.records}
            size="small"
            loading={getCorpWechat?.loading}
            scroll={{ y: 600 }}
            bordered
            rowKey={'id'}
            pagination={{
                defaultPageSize: 20,
                current: getCorpWechat.data?.current || 1,
                pageSize: getCorpWechat.data?.size || 10,
                total: getCorpWechat.data?.total || 0
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
                setQueryFormNew({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
            }}
        />

        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechat.refresh()
            }}
        />}
    </Card>
}


/**
 * 选择企微
 * @param param0 
 * @returns 
 */
export const SelectCorpWechat: React.FC<{ value?: number, onChange?: (value?: number) => void }> = ({ value, onChange }) => {

    /*******************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getCorpWechatAll = useAjax((params) => getCorpWechatAllApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        getCorpWechatAll.run({})
    }, [])

    return <>
        <Select
            showSearch
            allowClear
            placeholder="请选择企微"
            filterOption={(input: any, option: any) => {
                return option!.name?.toString().toLowerCase().includes(input.toLowerCase())
            }}
            style={{ width: 480 }}
            dropdownRender={menu => <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <div>
                    <Button type="link" onClick={() => {
                        window.location.href = '/#/launchSystemV3/tencenTasset/corpWechat'
                    }}>前往管理</Button>
                    <Button type="link" style={{ paddingLeft: 0, paddingRight: 0 }} onClick={() => {
                        setVisible(true)
                    }}>新增</Button>
                    {/* <Link href="/#/launchSystemV3/tencenTasset/miniProgramWechat" target="_blank">
                    前往管理
                </Link> */}
                </div>
            </>}
            value={value}
            onChange={(e) => onChange?.(e)}
        >
            {getCorpWechatAll?.data?.map((item: { id: number, wechatId: string, wechatName: string }) => {
                return <Select.Option value={item.id} key={item.id} name={item.wechatName + `(${item.wechatId})`}><Text strong>{item.wechatName}</Text><Text type="secondary">{`(${item.wechatId})`}</Text></Select.Option>
            })}
        </Select>
        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechatAll.refresh()
            }}
        />}
    </>
}

/**
 * 选择企微
 * @param param0 
 * @returns 
 */
export const SelectCorpWechatCorpId: React.FC<{ value?: string[], onChange?: (value?: string[]) => void }> = ({ value, onChange }) => {

    /*******************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getCorpWechatAll = useAjax((params) => getCorpWechatAllApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        getCorpWechatAll.run({})
    }, [])

    return <>
        <Select
            showSearch
            allowClear
            placeholder="请选择企微"
            filterOption={(input: any, option: any) => {
                return option!.name?.toString().toLowerCase().includes(input.toLowerCase())
            }}
            mode="multiple"
            style={{ width: 480 }}
            dropdownRender={menu => <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <div>
                    <Button type="link" onClick={() => {
                        window.location.href = '/#/launchSystemV3/tencenTasset/corpWechat'
                    }}>前往管理</Button>
                    <Button type="link" style={{ paddingLeft: 0, paddingRight: 0 }} onClick={() => {
                        setVisible(true)
                    }}>新增</Button>
                    {/* <Link href="/#/launchSystemV3/tencenTasset/miniProgramWechat" target="_blank">
                    前往管理
                </Link> */}
                </div>
            </>}
            value={value}
            onChange={(e) => onChange?.(e)}
        >
            {getCorpWechatAll?.data?.map((item: { id: number, wechatId: string, wechatName: string }) => {
                return <Select.Option value={item.wechatId} disabled={value && value?.length > 0 && !value.includes(item.wechatId)} key={item.id} name={item.wechatName + `(${item.wechatId})`}><Text strong>{item.wechatName}</Text><Text type="secondary">{`(${item.wechatId})`}</Text></Select.Option>
            })}
        </Select>
        {/* 新增修改 */}
        {visible && <Modify
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            onChange={() => {
                setVisible(false)
                getCorpWechatAll.refresh()
            }}
        />}
    </>
}


/**
 * 展示企微
 * @param param0 
 * @returns 
 */
export const ShowCorpWechatDetail: React.FC<{ id: number }> = ({ id }) => {

    /*******************************/
    const getCorpWechatDetail = useAjax((params) => getCorpWechatDetailApi(params))
    /*******************************/

    // 获取列表
    useEffect(() => {
        if (id) {
            getCorpWechatDetail.run(id)
        }
    }, [id])

    return <Paragraph style={{ fontSize: 12, wordBreak: 'break-all', marginBottom: 0 }} ellipsis={{ rows: 2 }}>
        {getCorpWechatDetail.data ? <>
            <Text strong>企业微信：{getCorpWechatDetail.data?.wechatName}</Text><Text type="secondary">{`(${getCorpWechatDetail.data?.wechatId}})`}</Text>
        </> : id}
    </Paragraph>
}

export default CorpWechat