|
|
|
@ -1,300 +1,321 @@ |
|
|
|
import { useTranslation } from '../../../i18n.ts' |
|
|
|
import { Button, Form, Space, Tooltip, Badge, Divider } from 'antd' |
|
|
|
import { useAtom, useAtomValue, useSetAtom } from 'jotai' |
|
|
|
import { useTranslation } from "../../../i18n.ts"; |
|
|
|
import { Button, Form, Space, Tooltip, Badge, Divider, Spin } from "antd"; |
|
|
|
import { useAtom, useAtomValue, useSetAtom } from "jotai"; |
|
|
|
import { |
|
|
|
deleteWebsiteDnsAccountAtom, |
|
|
|
saveOrUpdateWebsiteDnsAccountAtom, websiteDnsAccountAtom, websiteDnsAccountsAtom, websiteDnsAccountSearchAtom, |
|
|
|
} from '@/store/websites/dns_account.ts' |
|
|
|
import { useEffect, useMemo, useState } from 'react' |
|
|
|
import Action from '@/components/action/Action.tsx' |
|
|
|
import { |
|
|
|
BetaSchemaForm, |
|
|
|
ProColumns, |
|
|
|
ProFormColumnsType, |
|
|
|
} from '@ant-design/pro-components' |
|
|
|
import ListPageLayout from '@/layout/ListPageLayout.tsx' |
|
|
|
import { useStyle } from './style.ts' |
|
|
|
import { FilterOutlined } from '@ant-design/icons' |
|
|
|
import { getValueCount, unSetColumnRules } from '@/utils' |
|
|
|
import { Table as ProTable } from '@/components/table' |
|
|
|
import { DNSTypeEnum, DNSTypes, syncDNSAtom } from '@/store/websites/dns.ts' |
|
|
|
import { WebSite } from '@/types' |
|
|
|
import Switch from '@/components/switch' |
|
|
|
import Popconfirm from '@/components/popconfirm' |
|
|
|
saveOrUpdateWebsiteDnsAccountAtom, |
|
|
|
websiteDnsAccountAtom, |
|
|
|
websiteDnsAccountsAtom, |
|
|
|
websiteDnsAccountSearchAtom, |
|
|
|
} from "@/store/websites/dns_account.ts"; |
|
|
|
import { useEffect, useMemo, useState } from "react"; |
|
|
|
import Action from "@/components/action/Action.tsx"; |
|
|
|
import { BetaSchemaForm, ProColumns, ProFormColumnsType } from "@ant-design/pro-components"; |
|
|
|
import ListPageLayout from "@/layout/ListPageLayout.tsx"; |
|
|
|
import { useStyle } from "./style.ts"; |
|
|
|
import { FilterOutlined } from "@ant-design/icons"; |
|
|
|
import { getValueCount, unSetColumnRules } from "@/utils"; |
|
|
|
import { Table as ProTable } from "@/components/table"; |
|
|
|
import { DNSTypeEnum, DNSTypes, syncDNSAtom } from "@/store/websites/dns.ts"; |
|
|
|
import { WebSite } from "@/types"; |
|
|
|
import Switch from "@/components/switch"; |
|
|
|
import Popconfirm from "@/components/popconfirm"; |
|
|
|
import { Link } from "@tanstack/react-router"; |
|
|
|
import "@/pages/globle/globle_style.css"; |
|
|
|
|
|
|
|
const i18nPrefix = 'websiteDnsAccounts.list' |
|
|
|
const i18nPrefix = "websiteDnsAccounts.list"; |
|
|
|
const getKeyColumn = (type: string, t) => { |
|
|
|
const columns: ProColumns<WebSite.IDnsAccount>[] = [] |
|
|
|
const columns: ProColumns<WebSite.IDnsAccount>[] = []; |
|
|
|
switch (type) { |
|
|
|
case DNSTypeEnum.AliYun: { |
|
|
|
columns.push(...[ |
|
|
|
case DNSTypeEnum.AliYun: |
|
|
|
{ |
|
|
|
columns.push( |
|
|
|
...[ |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.accessKey', 'Access Key'), |
|
|
|
dataIndex: [ 'authorization', 'accessKey' ], |
|
|
|
title: t("website.ssl.dns.columns.accessKey", "Access Key"), |
|
|
|
dataIndex: ["authorization", "accessKey"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.secretKey', 'Secret Key'), |
|
|
|
dataIndex: [ 'authorization', 'secretKey' ], |
|
|
|
title: t("website.ssl.dns.columns.secretKey", "Secret Key"), |
|
|
|
dataIndex: ["authorization", "secretKey"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
]) |
|
|
|
], |
|
|
|
); |
|
|
|
} |
|
|
|
break |
|
|
|
break; |
|
|
|
case DNSTypeEnum.TencentCloud: { |
|
|
|
columns.push(...[ |
|
|
|
columns.push( |
|
|
|
...[ |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.secretID', 'Secret ID'), |
|
|
|
dataIndex: [ 'authorization', 'secretID' ], |
|
|
|
title: t("website.ssl.dns.columns.secretID", "Secret ID"), |
|
|
|
dataIndex: ["authorization", "secretID"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
}, { |
|
|
|
title: t('website.ssl.dns.columns.secretKey', 'Secret Key'), |
|
|
|
dataIndex: [ 'authorization', 'secretKey' ], |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t("website.ssl.dns.columns.secretKey", "Secret Key"), |
|
|
|
dataIndex: ["authorization", "secretKey"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
]) |
|
|
|
break |
|
|
|
}, |
|
|
|
], |
|
|
|
); |
|
|
|
break; |
|
|
|
} |
|
|
|
case DNSTypeEnum.DnsPod: { |
|
|
|
columns.push(...[ |
|
|
|
columns.push( |
|
|
|
...[ |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.apiId', 'ID'), |
|
|
|
dataIndex: [ 'authorization', 'apiId' ], |
|
|
|
title: t("website.ssl.dns.columns.apiId", "ID"), |
|
|
|
dataIndex: ["authorization", "apiId"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
}, { |
|
|
|
title: t('website.ssl.dns.columns.token', 'Token'), |
|
|
|
dataIndex: [ 'authorization', 'token' ], |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t("website.ssl.dns.columns.token", "Token"), |
|
|
|
dataIndex: ["authorization", "token"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
]) |
|
|
|
break |
|
|
|
}, |
|
|
|
], |
|
|
|
); |
|
|
|
break; |
|
|
|
} |
|
|
|
case DNSTypeEnum.CloudFlare: { |
|
|
|
columns.push(...[ |
|
|
|
columns.push( |
|
|
|
...[ |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.email', 'Email'), |
|
|
|
dataIndex: [ 'authorization', 'email' ], |
|
|
|
title: t("website.ssl.dns.columns.email", "Email"), |
|
|
|
dataIndex: ["authorization", "email"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
}, { |
|
|
|
title: t('website.ssl.dns.columns.apiKey', 'API ToKen'), |
|
|
|
dataIndex: [ 'authorization', 'apiKey' ], |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t("website.ssl.dns.columns.apiKey", "API ToKen"), |
|
|
|
dataIndex: ["authorization", "apiKey"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
] |
|
|
|
) |
|
|
|
break |
|
|
|
], |
|
|
|
); |
|
|
|
break; |
|
|
|
} |
|
|
|
case DNSTypeEnum.Godaddy: |
|
|
|
case DNSTypeEnum.NameCheap: |
|
|
|
case DNSTypeEnum.NameSilo: |
|
|
|
columns.push({ |
|
|
|
title: t('website.ssl.dns.columns.apiKey', 'API Key'), |
|
|
|
dataIndex: [ 'authorization', 'apiKey' ], |
|
|
|
title: t("website.ssl.dns.columns.apiKey", "API Key"), |
|
|
|
dataIndex: ["authorization", "apiKey"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
) |
|
|
|
}); |
|
|
|
if (type === DNSTypeEnum.NameCheap) { |
|
|
|
columns.push({ |
|
|
|
title: t('website.ssl.dns.columns.apiUser', 'API User'), |
|
|
|
dataIndex: [ 'authorization', 'apiUser' ], |
|
|
|
title: t("website.ssl.dns.columns.apiUser", "API User"), |
|
|
|
dataIndex: ["authorization", "apiUser"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
}) |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}); |
|
|
|
} else if (type === DNSTypeEnum.Godaddy) { |
|
|
|
columns.push({ |
|
|
|
title: t('website.ssl.dns.columns.apiSecret', 'API Secret'), |
|
|
|
dataIndex: [ 'authorization', 'apiSecret' ], |
|
|
|
title: t("website.ssl.dns.columns.apiSecret", "API Secret"), |
|
|
|
dataIndex: ["authorization", "apiSecret"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
}) |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
break |
|
|
|
break; |
|
|
|
case DNSTypeEnum.NameCom: { |
|
|
|
columns.push( |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.apiUser', 'UserName'), |
|
|
|
dataIndex: [ 'authorization', 'apiUser' ], |
|
|
|
title: t("website.ssl.dns.columns.apiUser", "UserName"), |
|
|
|
dataIndex: ["authorization", "apiUser"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t('website.ssl.dns.columns.token', 'Token'), |
|
|
|
dataIndex: [ 'authorization', 'token' ], |
|
|
|
title: t("website.ssl.dns.columns.token", "Token"), |
|
|
|
dataIndex: ["authorization", "token"], |
|
|
|
formItemProps: { |
|
|
|
rules: [ { required: true, message: t('message.required') } ] |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
break |
|
|
|
rules: [{ required: true, message: t("message.required") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
); |
|
|
|
break; |
|
|
|
} |
|
|
|
default: |
|
|
|
break |
|
|
|
|
|
|
|
} |
|
|
|
return columns |
|
|
|
break; |
|
|
|
} |
|
|
|
return columns; |
|
|
|
}; |
|
|
|
const WebsiteDnsAccount = () => { |
|
|
|
const { styles, cx } = useStyle(); |
|
|
|
const { t } = useTranslation(); |
|
|
|
const [form] = Form.useForm(); |
|
|
|
const [filterForm] = Form.useForm(); |
|
|
|
const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateWebsiteDnsAccountAtom); |
|
|
|
const [search, setSearch] = useAtom(websiteDnsAccountSearchAtom); |
|
|
|
const setWebsiteDnsAccount = useSetAtom(websiteDnsAccountAtom); |
|
|
|
const { data, isFetching, isLoading, refetch } = useAtomValue(websiteDnsAccountsAtom); |
|
|
|
const { mutate: deleteWebsiteDnsAccount, isPending: isDeleting } = useAtomValue(deleteWebsiteDnsAccountAtom); |
|
|
|
const { mutate: asyncDNS, isPending: isAsyncing } = useAtomValue(syncDNSAtom); |
|
|
|
const [open, setOpen] = useState(false); |
|
|
|
const [openFilter, setFilterOpen] = useState(false); |
|
|
|
const [searchKey, setSearchKey] = useState(search?.title); |
|
|
|
|
|
|
|
const { styles, cx } = useStyle() |
|
|
|
const { t } = useTranslation() |
|
|
|
const [ form ] = Form.useForm() |
|
|
|
const [ filterForm ] = Form.useForm() |
|
|
|
const { mutate: saveOrUpdate, isPending: isSubmitting, isSuccess } = useAtomValue(saveOrUpdateWebsiteDnsAccountAtom) |
|
|
|
const [ search, setSearch ] = useAtom(websiteDnsAccountSearchAtom) |
|
|
|
const setWebsiteDnsAccount = useSetAtom(websiteDnsAccountAtom) |
|
|
|
const { data, isFetching, isLoading, refetch } = useAtomValue(websiteDnsAccountsAtom) |
|
|
|
const { mutate: deleteWebsiteDnsAccount, isPending: isDeleting } = useAtomValue(deleteWebsiteDnsAccountAtom) |
|
|
|
const { mutate: asyncDNS, isPending: isAsyncing } = useAtomValue(syncDNSAtom) |
|
|
|
const [ open, setOpen ] = useState(false) |
|
|
|
const [ openFilter, setFilterOpen ] = useState(false) |
|
|
|
const [ searchKey, setSearchKey ] = useState(search?.title) |
|
|
|
|
|
|
|
const columns = useMemo(() => { |
|
|
|
return [ |
|
|
|
{ |
|
|
|
title: 'ID', |
|
|
|
dataIndex: 'id', |
|
|
|
title: "ID", |
|
|
|
dataIndex: "id", |
|
|
|
hideInTable: true, |
|
|
|
hideInSearch: true, |
|
|
|
formItemProps: { hidden: true } |
|
|
|
formItemProps: { hidden: true }, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t(`${i18nPrefix}.columns.name`, '名称'), |
|
|
|
dataIndex: 'name', |
|
|
|
valueType: 'text', |
|
|
|
title: t(`${i18nPrefix}.columns.name`, "名称"), |
|
|
|
dataIndex: "name", |
|
|
|
valueType: "text", |
|
|
|
width: 250, |
|
|
|
fieldProps: { |
|
|
|
style: { |
|
|
|
width: '100%' |
|
|
|
} |
|
|
|
width: "100%", |
|
|
|
}, |
|
|
|
}, |
|
|
|
formItemProps: { |
|
|
|
rules: [ |
|
|
|
{ required: true, message: t('message.required', '请输入') } |
|
|
|
] |
|
|
|
} |
|
|
|
rules: [{ required: true, message: t("message.required", "请输入") }], |
|
|
|
}, |
|
|
|
render: (text, record) => <Link to={`/cert/domain?id=${record.name}`}>{record.name}</Link>, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t(`${i18nPrefix}.columns.name`, '标签'), |
|
|
|
dataIndex: 'tag', |
|
|
|
valueType: 'text', |
|
|
|
title: t(`${i18nPrefix}.columns.name`, "标签"), |
|
|
|
dataIndex: "tag", |
|
|
|
valueType: "text", |
|
|
|
hideInForm: true, |
|
|
|
width: 200, |
|
|
|
fieldProps: { |
|
|
|
style: { |
|
|
|
width: '100%' |
|
|
|
} |
|
|
|
} |
|
|
|
width: "100%", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t(`${i18nPrefix}.columns.type`, '类型'), |
|
|
|
dataIndex: 'type', |
|
|
|
valueType: 'select', |
|
|
|
title: t(`${i18nPrefix}.columns.type`, "类型"), |
|
|
|
dataIndex: "type", |
|
|
|
valueType: "select", |
|
|
|
width: 200, |
|
|
|
fieldProps: { |
|
|
|
style: { |
|
|
|
width: '100%' |
|
|
|
width: "100%", |
|
|
|
}, |
|
|
|
options: DNSTypes |
|
|
|
options: DNSTypes, |
|
|
|
}, |
|
|
|
formItemProps: { |
|
|
|
rules: [ |
|
|
|
{ required: true, message: t('message.required', '请选择') } |
|
|
|
] |
|
|
|
rules: [{ required: true, message: t("message.required", "请选择") }], |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: [ 'type' ], |
|
|
|
valueType: 'dependency', |
|
|
|
name: ["type"], |
|
|
|
valueType: "dependency", |
|
|
|
hideInSetting: true, |
|
|
|
hideInTable: true, |
|
|
|
columns: ({ type }) => { |
|
|
|
return getKeyColumn(type, t) |
|
|
|
} |
|
|
|
return getKeyColumn(type, t); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t(`${i18nPrefix}.columns.status`, '状态'), |
|
|
|
dataIndex: 'status', |
|
|
|
valueType: 'switch', |
|
|
|
title: t(`${i18nPrefix}.columns.status`, "状态111111"), |
|
|
|
dataIndex: "status", |
|
|
|
valueType: "switch", |
|
|
|
width: 200, |
|
|
|
//disable禁用，enable正常，syncing正在同步中
|
|
|
|
render(_dom, record) { |
|
|
|
return <Switch size={'small'} value={record.status}/> |
|
|
|
// return <Switch size={"small"} checked={false} />;
|
|
|
|
if (record.status == "syncing") { |
|
|
|
return ( |
|
|
|
<div className={cx('loadingStyle')}> |
|
|
|
<Spin tip={t(`${i18nPrefix}.columns.syncing`, "同步中")} size="small"> |
|
|
|
</Spin> |
|
|
|
<div className={cx('loadingStyle_table')} >{t(`${i18nPrefix}.columns.syncing`, "同步中")}</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} else { |
|
|
|
return <Switch size={"small"} checked={record.status==='enable'} />; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: t(`${i18nPrefix}.columns.option`, '操作'), |
|
|
|
key: 'option', |
|
|
|
title: t(`${i18nPrefix}.columns.option`, "操作"), |
|
|
|
key: "option", |
|
|
|
width: 300, |
|
|
|
valueType: 'option', |
|
|
|
fixed: 'right', |
|
|
|
valueType: "option", |
|
|
|
fixed: "right", |
|
|
|
render: (_, record) => [ |
|
|
|
<Action key="edit" |
|
|
|
as={'a'} |
|
|
|
disabled={record.status === 2} |
|
|
|
<Action |
|
|
|
key="edit" |
|
|
|
as={"a"} |
|
|
|
disabled={record.status === "syncing"} |
|
|
|
onClick={() => { |
|
|
|
record.status = record.status > 0 |
|
|
|
if (typeof record.authorization === 'string') { |
|
|
|
record.authorization = JSON.parse(record.authorization) |
|
|
|
} |
|
|
|
form.setFieldsValue(record) |
|
|
|
setOpen(true) |
|
|
|
}}>{t('actions.edit')}</Action>, |
|
|
|
<Divider type={'vertical'}/>, |
|
|
|
form.setFieldsValue(record); |
|
|
|
setOpen(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
{t("actions.edit", "编辑")} |
|
|
|
</Action>, |
|
|
|
<Divider type={"vertical"} />, |
|
|
|
<Popconfirm |
|
|
|
key={'sync_confirm'} |
|
|
|
disabled={isAsyncing || record.status === 2} |
|
|
|
key={"sync_confirm"} |
|
|
|
disabled={record.status == "syncing"} |
|
|
|
onConfirm={() => { |
|
|
|
asyncDNS(record.id) |
|
|
|
asyncDNS(record.id); |
|
|
|
}} |
|
|
|
title={t('message.syncConfirm', '您确定要同步吗？')}> |
|
|
|
{t('actions.sync', '同步')} |
|
|
|
title={t("message.syncConfirm", "您确定要同步吗？")} |
|
|
|
> |
|
|
|
{t("actions.sync", "同步")} |
|
|
|
</Popconfirm>, |
|
|
|
<Divider type={'vertical'}/>, |
|
|
|
<Divider type={"vertical"} />, |
|
|
|
<Popconfirm |
|
|
|
key={'del_confirm'} |
|
|
|
key={"del_confirm"} |
|
|
|
disabled={isDeleting} |
|
|
|
onConfirm={() => { |
|
|
|
deleteWebsiteDnsAccount([ record.id ]) |
|
|
|
deleteWebsiteDnsAccount([record.id]); |
|
|
|
}} |
|
|
|
title={t('message.deleteConfirm')}> |
|
|
|
{t('actions.delete', '删除')} |
|
|
|
</Popconfirm> |
|
|
|
] |
|
|
|
} |
|
|
|
] as ProColumns[] |
|
|
|
}, [ isAsyncing, isDeleting, form, asyncDNS, deleteWebsiteDnsAccount ]) |
|
|
|
title={t("message.deleteConfirm")} |
|
|
|
> |
|
|
|
{t("actions.delete", "删除")} |
|
|
|
</Popconfirm>, |
|
|
|
], |
|
|
|
}, |
|
|
|
] as ProColumns[]; |
|
|
|
}, [isAsyncing, isDeleting, form, asyncDNS, deleteWebsiteDnsAccount]); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setSearchKey(search?.title) |
|
|
|
filterForm.setFieldsValue(search) |
|
|
|
}, [ search ]) |
|
|
|
setSearchKey(search?.title); |
|
|
|
filterForm.setFieldsValue(search); |
|
|
|
}, [search]); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (isSuccess) { |
|
|
|
setOpen(false) |
|
|
|
setOpen(false); |
|
|
|
} |
|
|
|
}, [ isSuccess ]) |
|
|
|
}, [isSuccess]); |
|
|
|
|
|
|
|
return ( |
|
|
|
<ListPageLayout className={styles.container}> |
|
|
|
@ -302,49 +323,56 @@ const WebsiteDnsAccount = () => { |
|
|
|
rowKey="id" |
|
|
|
headerTitle={ |
|
|
|
<Space> |
|
|
|
<Button key={'add'} |
|
|
|
<Button |
|
|
|
key={"add"} |
|
|
|
onClick={() => { |
|
|
|
form.resetFields() |
|
|
|
form.resetFields(); |
|
|
|
form.setFieldsValue({ |
|
|
|
id: 0, |
|
|
|
}) |
|
|
|
setOpen(true) |
|
|
|
}); |
|
|
|
setOpen(true); |
|
|
|
}} |
|
|
|
type={'primary'}>{t(`${i18nPrefix}.add`, '添加帐号')}</Button> |
|
|
|
type={"primary"} |
|
|
|
> |
|
|
|
{t(`${i18nPrefix}.add`, "添加帐号")} |
|
|
|
</Button> |
|
|
|
</Space> |
|
|
|
} |
|
|
|
toolbar={{ |
|
|
|
search: { |
|
|
|
loading: isFetching && !!search?.title, |
|
|
|
onSearch: (value: string) => { |
|
|
|
setSearch(prev => ({ |
|
|
|
setSearch((prev) => ({ |
|
|
|
...prev, |
|
|
|
title: value |
|
|
|
})) |
|
|
|
title: value, |
|
|
|
})); |
|
|
|
}, |
|
|
|
allowClear: true, |
|
|
|
onChange: (e) => { |
|
|
|
setSearchKey(e.target?.value) |
|
|
|
setSearchKey(e.target?.value); |
|
|
|
}, |
|
|
|
value: searchKey, |
|
|
|
placeholder: t(`${i18nPrefix}.placeholder`, '输入账号管理名称') |
|
|
|
placeholder: t(`${i18nPrefix}.placeholder`, "输入账号管理名称"), |
|
|
|
}, |
|
|
|
actions: [ |
|
|
|
<Tooltip key={'filter'} title={t(`${i18nPrefix}.filter.tooltip`, '高级查询')}> |
|
|
|
<Tooltip key={"filter"} title={t(`${i18nPrefix}.filter.tooltip`, "高级查询")}> |
|
|
|
<Badge count={getValueCount(search)}> |
|
|
|
<Button |
|
|
|
onClick={() => { |
|
|
|
setFilterOpen(true) |
|
|
|
setFilterOpen(true); |
|
|
|
}} |
|
|
|
icon={<FilterOutlined/>} shape={'circle'} size={'small'}/> |
|
|
|
icon={<FilterOutlined />} |
|
|
|
shape={"circle"} |
|
|
|
size={"small"} |
|
|
|
/> |
|
|
|
</Badge> |
|
|
|
</Tooltip>, |
|
|
|
<Divider type={'vertical'} key={'divider'}/>, |
|
|
|
] |
|
|
|
<Divider type={"vertical"} key={"divider"} />, |
|
|
|
], |
|
|
|
}} |
|
|
|
scroll={{ |
|
|
|
// x: 2500,
|
|
|
|
y: 'calc(100vh - 290px)' |
|
|
|
y: "calc(100vh - 290px)", |
|
|
|
}} |
|
|
|
search={false} |
|
|
|
onRow={(record) => { |
|
|
|
@ -353,9 +381,9 @@ const WebsiteDnsAccount = () => { |
|
|
|
// 'ant-table-row-selected': currentWebsiteDnsAccount?.id === record.id
|
|
|
|
}), |
|
|
|
onClick: () => { |
|
|
|
setWebsiteDnsAccount(record as any) |
|
|
|
} |
|
|
|
} |
|
|
|
setWebsiteDnsAccount(record as any); |
|
|
|
}, |
|
|
|
}; |
|
|
|
}} |
|
|
|
dateFormatter="string" |
|
|
|
loading={isLoading || isFetching} |
|
|
|
@ -363,7 +391,7 @@ const WebsiteDnsAccount = () => { |
|
|
|
columns={columns} |
|
|
|
options={{ |
|
|
|
reload: () => { |
|
|
|
refetch() |
|
|
|
refetch(); |
|
|
|
}, |
|
|
|
}} |
|
|
|
pagination={{ |
|
|
|
@ -374,17 +402,17 @@ const WebsiteDnsAccount = () => { |
|
|
|
setSearch({ |
|
|
|
...search, |
|
|
|
pageSize: size, |
|
|
|
page: current |
|
|
|
}) |
|
|
|
page: current, |
|
|
|
}); |
|
|
|
}, |
|
|
|
onChange: (current, pageSize) => { |
|
|
|
setSearch(prev => { |
|
|
|
setSearch((prev) => { |
|
|
|
return { |
|
|
|
...prev, |
|
|
|
page: current, |
|
|
|
pageSize: pageSize, |
|
|
|
} |
|
|
|
}) |
|
|
|
}; |
|
|
|
}); |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
@ -393,70 +421,80 @@ const WebsiteDnsAccount = () => { |
|
|
|
shouldUpdate={false} |
|
|
|
width={1000} |
|
|
|
form={form} |
|
|
|
layout={'vertical'} |
|
|
|
layout={"vertical"} |
|
|
|
scrollToFirstError={true} |
|
|
|
title={t(`${i18nPrefix}.title_${form.getFieldValue('id') !== 0 ? 'edit' : 'add'}`, form.getFieldValue('id') !== 0 ? '账号管理编辑' : '账号管理添加')} |
|
|
|
layoutType={'DrawerForm'} |
|
|
|
title={t( |
|
|
|
`${i18nPrefix}.title_${form.getFieldValue("id") !== 0 ? "edit" : "add"}`, |
|
|
|
form.getFieldValue("id") !== 0 ? "账号管理编辑" : "账号管理添加", |
|
|
|
)} |
|
|
|
layoutType={"DrawerForm"} |
|
|
|
open={open} |
|
|
|
drawerProps={{ |
|
|
|
maskClosable: false, |
|
|
|
}} |
|
|
|
onOpenChange={(open) => { |
|
|
|
setOpen(open) |
|
|
|
setOpen(open); |
|
|
|
}} |
|
|
|
loading={isSubmitting} |
|
|
|
// onValuesChange={(values) => {
|
|
|
|
//
|
|
|
|
// }}
|
|
|
|
//disable禁用，enable正常，syncing正在同步中
|
|
|
|
onFinish={async (values) => { |
|
|
|
values.status = values.status ? 1 : 0 |
|
|
|
saveOrUpdate(values) |
|
|
|
values.status = values.status ?'enable': 'disable'; |
|
|
|
saveOrUpdate(values); |
|
|
|
}} |
|
|
|
columns={columns as ProFormColumnsType[]}/> |
|
|
|
columns={columns as ProFormColumnsType[]} |
|
|
|
/> |
|
|
|
|
|
|
|
<BetaSchemaForm |
|
|
|
title={t(`${i18nPrefix}.filter.title`, '账号管理高级查询')} |
|
|
|
title={t(`${i18nPrefix}.filter.title`, "账号管理高级查询")} |
|
|
|
grid={true} |
|
|
|
shouldUpdate={false} |
|
|
|
width={500} |
|
|
|
form={filterForm} |
|
|
|
open={openFilter} |
|
|
|
onOpenChange={open => { |
|
|
|
setFilterOpen(open) |
|
|
|
onOpenChange={(open) => { |
|
|
|
setFilterOpen(open); |
|
|
|
}} |
|
|
|
layout={'vertical'} |
|
|
|
layout={"vertical"} |
|
|
|
scrollToFirstError={true} |
|
|
|
layoutType={'DrawerForm'} |
|
|
|
layoutType={"DrawerForm"} |
|
|
|
drawerProps={{ |
|
|
|
maskClosable: false, |
|
|
|
mask: false, |
|
|
|
}} |
|
|
|
submitter={{ |
|
|
|
searchConfig: { |
|
|
|
resetText: t(`${i18nPrefix}.filter.reset`, '清空'), |
|
|
|
submitText: t(`${i18nPrefix}.filter.submit`, '查询'), |
|
|
|
resetText: t(`${i18nPrefix}.filter.reset`, "清空"), |
|
|
|
submitText: t(`${i18nPrefix}.filter.submit`, "查询"), |
|
|
|
}, |
|
|
|
onReset: () => { |
|
|
|
filterForm.resetFields() |
|
|
|
filterForm.resetFields(); |
|
|
|
}, |
|
|
|
render: (props,) => { |
|
|
|
render: (props) => { |
|
|
|
return ( |
|
|
|
<div style={{ textAlign: 'right' }}> |
|
|
|
<div style={{ textAlign: "right" }}> |
|
|
|
<Space> |
|
|
|
<Button onClick={() => { |
|
|
|
props.reset() |
|
|
|
|
|
|
|
}}>{props.searchConfig?.resetText}</Button> |
|
|
|
<Button type="primary" |
|
|
|
<Button |
|
|
|
onClick={() => { |
|
|
|
props.submit() |
|
|
|
props.reset(); |
|
|
|
}} |
|
|
|
>{props.searchConfig?.submitText}</Button> |
|
|
|
> |
|
|
|
{props.searchConfig?.resetText} |
|
|
|
</Button> |
|
|
|
<Button |
|
|
|
type="primary" |
|
|
|
onClick={() => { |
|
|
|
props.submit(); |
|
|
|
}} |
|
|
|
> |
|
|
|
{props.searchConfig?.submitText} |
|
|
|
</Button> |
|
|
|
</Space> |
|
|
|
</div> |
|
|
|
) |
|
|
|
); |
|
|
|
}, |
|
|
|
|
|
|
|
}} |
|
|
|
// onValuesChange={(values) => {
|
|
|
|
//
|
|
|
|
@ -464,19 +502,18 @@ const WebsiteDnsAccount = () => { |
|
|
|
|
|
|
|
onFinish={async (values) => { |
|
|
|
//处理,变成数组
|
|
|
|
Object.keys(values).forEach(key => { |
|
|
|
if (typeof values[key] === 'string' && values[key].includes(',')) { |
|
|
|
values[key] = values[key].split(',') |
|
|
|
Object.keys(values).forEach((key) => { |
|
|
|
if (typeof values[key] === "string" && values[key].includes(",")) { |
|
|
|
values[key] = values[key].split(","); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
setSearch(values) |
|
|
|
}); |
|
|
|
|
|
|
|
setSearch(values); |
|
|
|
}} |
|
|
|
columns={unSetColumnRules(columns.filter(item => !item.hideInSearch) as ProFormColumnsType[])}/> |
|
|
|
|
|
|
|
columns={unSetColumnRules(columns.filter((item) => !item.hideInSearch) as ProFormColumnsType[])} |
|
|
|
/> |
|
|
|
</ListPageLayout> |
|
|
|
) |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default WebsiteDnsAccount |
|
|
|
export default WebsiteDnsAccount; |
lk
3 months ago