@ant-design/icons#ExportOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ExportOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: MainContent.jsx From stack-labs-site with MIT License | 5 votes |
|
generateMenuItem(isTop, item, { before = null, after = null }) {
const {
intl: { locale },
} = this.props;
const key = fileNameToPath(item.filename);
if (!item.title) {
return null;
}
const title = item.title[locale] || item.title;
const text = isTop
? title
: [
<span key="english">{title}</span>,
<span className="chinese" key="chinese">
{item.subtitle}
</span>,
];
const { disabled } = item;
const url = item.filename.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '').toLowerCase();
const child = !item.link ? (
<Link
to={utils.getLocalizedPathname(
/^components/.test(url) ? `${url}/` : url,
locale === 'zh-CN',
)}
disabled={disabled}
>
{before}
{text}
{after}
</Link>
) : (
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
disabled={disabled}
className="menu-item-link-outside"
>
{before}
{text} <ExportOutlined />
{after}
</a>
);
return (
<Menu.Item key={key.toLowerCase()} disabled={disabled}>
{child}
</Menu.Item>
);
}
Example #2
| Source File: DepositsTables.js From bonded-stablecoin-ui with MIT License | 4 votes |
|
DepositsTables = ({
timestamp,
my,
all,
growth_factor,
new_growth_factor,
minProtectionRatio,
setVisibleEditRecipient,
setWithdrawProtection,
setAddProtection,
setWithdrawInterest
}) => {
const [width] = useWindowSize();
const { t } = useTranslation();
const { activeWallet } = useSelector((state) => state.settings);
const {
deposit_state,
deposit_aa,
bonded_state,
symbol2,
symbol3,
reserve_asset_symbol,
params
} = useSelector((state) => state.active);
const actualParams = getParams(params, bonded_state);
const mySortedDeposits = my.sort((a, b) => b.ts - a.ts);
const allSortedDeposits = all.sort((a, b) => a.protection_ratio - b.protection_ratio);
const recipientSortedDeposits = all.filter((item) => item.interest_recipient === activeWallet && item.owner !== activeWallet).sort((a, b) => b.amount - a.amount).map((item) => ({ ...item, inRecipientTab: true }));
const columns = [
{
title: t("trade.tabs.deposits.opened", "Opened"),
dataIndex: "ts",
key: "ts",
render: (value) => {
return (
<Tooltip title={moment.unix(value).format("DD-MM-YYYY HH:mm")}>
{timestamp - value > 60 * 60 * 24
? moment.unix(value).format("DD-MM-YYYY")
: moment.unix(value).format("HH:mm")}
</Tooltip>
);
},
},
{
title: (
<Label
label={symbol2 || t("trade.tabs.deposits.interest_title", "Interest tokens")}
descr={t("trade.tabs.deposits.interest_title_desc", "Amount of interest tokens")}
/>
),
dataIndex: "amount",
key: "interest",
render: (value) => {
return (
<ShowDecimalsValue decimals={actualParams.decimals2} value={value} />
);
},
},
{
title: (
<Label
label={symbol3 || t("trade.tabs.deposits.stable_title", "Stable tokens")}
descr={t("trade.tabs.deposits.stable_title_desc", "Amount of stable tokens issued against the deposit")}
/>
),
dataIndex: "stable_amount",
key: "stable",
render: (value) => {
return (
<ShowDecimalsValue decimals={actualParams.decimals2} value={value} />
);
},
},
{
title: (
<Label
label={t("trade.tabs.deposits.protection", "Protection (ratio)")}
descr={t("trade.tabs.deposits.protection_desc", "Additional deposit in {{reserve}} that protects the deposit from being closed by others. The deposit with the least ratio of protection to deposit amount can be closed by anybody. There is no direct loss to you when your deposit is closed but you stop receiving interest from it.", {
reserve: actualParams.reserve_asset in config.reserves
? config.reserves[actualParams.reserve_asset].name
: reserve_asset_symbol || "reserve asset"
})}
/>
),
dataIndex: "protection",
key: "protection",
render: (value, records) => {
const ratio = Number(records.protection_ratio).toPrecision(3);
return (
<>
{value ? (
<>
<ShowDecimalsValue
decimals={actualParams.reserve_asset_decimals}
value={value}
/>{" "}
{actualParams.reserve_asset === "base"
? "GBYTE"
: config.reserves[actualParams.reserve_asset]
? config.reserves[actualParams.reserve_asset].name
: reserve_asset_symbol || ''}{" "}
({ratio})
</>
) : (
0
)}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.add_protection", "Add protection")}>
<Button
type="link"
disabled={records.owner !== activeWallet || records.id.match(/^dummy\d+$/)}
onClick={() => setAddProtection(records)}
size="middle"
icon={<DownloadOutlined />}
/>
</Tooltip>}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.withdraw_protection", "Withdraw protection")}>
<Button
disabled={
records.owner !== activeWallet ||
!records.protection ||
records.protection === 0
}
type="link"
size="middle"
onClick={() => setWithdrawProtection(records)}
icon={<ExportOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
title: (
<Label label={t("trade.tabs.deposits.interest", "Interest")} descr={t("trade.tabs.deposits.interest_desc", "Interest available for withdrawal")} />
),
dataIndex: "amount",
key: "amount",
render: (value, records) => {
const new_stable_amount = Math.floor(records.amount * growth_factor);
const interest = new_stable_amount - records.stable_amount;
return (
<>
{records.closer ? (
<ShowDecimalsValue
decimals={actualParams.decimals2}
value={records.close_interest}
/>
) : (
<ShowDecimalsValue
decimals={actualParams.decimals2}
value={interest}
/>
)}
{(records.isMy || (activeWallet === records.interest_recipient && records.inRecipientTab)) && <Tooltip title={t("trade.tabs.deposits.withdraw_interest", "Withdraw interest")}>
<Button
type="link"
onClick={() => setWithdrawInterest({ ...records, interest })}
disabled={
interest <= 0 ||
(records.interest_recipient
? activeWallet !== records.interest_recipient
: activeWallet !== records.owner) ||
records.closer ||
records.id.match(/^dummy\d+$/)
}
icon={<ExportOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
title: (
<Label
label={t("trade.tabs.deposits.interest_recipient", "Interest recipient")}
descr={t("trade.tabs.deposits.interest_recipient_desc", "Who receives interest (deposit owner by default)")}
/>
),
dataIndex: "interest_recipient",
render: (value, records) => {
const recipientName =
value && config.interestRecipients.find((a) => a.address === value);
return (
<>
{(!value && records.owner === activeWallet) || (value && value === activeWallet)
? t("trade.tabs.deposits.you", "you")
: (recipientName && (
<span style={{ fontSize: 12 }}>{recipientName.name}</span>
)) ||
(value || records.owner).slice(0, 9) + "..."}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.edit_interest_recipient", "Edit interest recipient")}>
<Button
type="link"
size="small"
style={{ padding: 0 }}
disabled={records.owner !== activeWallet || records.id.match(/^dummy\d+$/)}
onClick={() =>
setVisibleEditRecipient({
id: records.id,
current: records.interest_recipient || records.owner,
})
}
icon={<EditOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
id: "action",
render: (_, records) => {
const closeUrl = generateLink(
records.closer ? 1e4 : Math.ceil(records.amount * new_growth_factor),
{
id: records.id,
commit_force_close: records.closer ? 1 : undefined
},
activeWallet,
deposit_aa,
records.closer ? "base" : deposit_state.asset
);
const challengeLink = records.weakerId ? generateLink(
1e4,
{
id: records.id,
challenge_force_close: 1,
weaker_id: records.weakerId
},
activeWallet,
deposit_aa
) : null;
const aboveMin = {
is: !records.isMy && minProtectionRatio !== null && records.protection_ratio > minProtectionRatio,
info: t("trade.tabs.deposits.less_last", "This deposit's protection ratio is above the smallest")
};
const tooNew = {
is: records.ts + actualParams.min_deposit_term > timestamp || records.id.match(/^dummy\d+$/),
info: t("trade.tabs.deposits.too_new", "This deposit was opened less than {{hours}} hours ago and can't be closed yet", { hours: +Number(actualParams.min_deposit_term / 3600).toFixed(3) })
};
const inChallengingPeriod = {
is: (records.closer && records.force_close_ts && records.force_close_ts + actualParams.challenging_period > timestamp),
info: t("trade.tabs.deposits.challenging_period", "Commit will be available in {{hours}} hours when the challenging period expires", { hours: +Number((records.force_close_ts + actualParams.challenging_period - timestamp) / 3600).toFixed(3) })
};
const tooltip = aboveMin.is ? aboveMin.info : (tooNew.is ? tooNew.info : (inChallengingPeriod.is ? inChallengingPeriod.info : undefined));
return (
<Space size="large">
{!records.weakerId && <QRButton
config={{
tooltipMobile: tooltip,
tooltip
}}
type="link"
size="small"
style={{ padding: 0 }}
href={closeUrl}
onClick={() => {
ReactGA.event({
category: "Stablecoin",
action: "Close deposit",
});
}}
disabled={inChallengingPeriod.is || tooNew.is || (aboveMin.is && records.owner !== activeWallet)}
>
{!records.closer && (records.owner === activeWallet ? t("trade.tabs.deposits.close", "Close") : t("trade.tabs.deposits.force_close", "Force close"))}
{records.closer && t("trade.tabs.deposits.commit_force_close", "Commit force close")}
</QRButton>}
{records.weakerId ? <QRButton style={{ padding: 0 }} size="small" type="link" href={challengeLink}>{t("trade.tabs.deposits.challenge", "Challenge")}</QRButton> : null}
</Space>
);
},
},
];
const isSingle = all.length === 1;
return (
<Tabs defaultActiveKey="my-1">
<TabPane tab={t("trade.tabs.deposits.my_deposits", "My deposits")} key="my-1">
{width > 1279 ? (
<Table
dataSource={mySortedDeposits}
columns={columns}
onRow={(record) => {
return {
style: {
color: (minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle) ? "#e74c3c" : "inherit",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={mySortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
symbol2={symbol2}
symbol3={symbol3}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>
{activeWallet && <TabPane tab={t("trade.tabs.deposits.me_as_interest_recipient", "Me as interest recipient")} key="recipient-2">
<InterestRecipientDepositsInfo />
{width > 1279 ? (
<Table
dataSource={recipientSortedDeposits}
columns={columns.filter((column) => column.dataIndex !== "interest_recipient" && column.id !== "action")}
onRow={(record) => {
return {
style: {
color: (minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle)
? "#e74c3c"
: "inherit",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={recipientSortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
inRecipientTab={true}
symbol2={symbol2}
symbol3={symbol3}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>}
<TabPane tab={t("trade.tabs.deposits.all_deposits", "All deposits")} key="all-3">
<ForceCloseDepositsInfo
challengingPeriodInHours={+Number(actualParams.challenging_period / 3600).toFixed(2)}
depositAa={deposit_aa}
symbol2={symbol2}
symbol3={symbol3}
/>
{width > 1279 ? (
<Table
dataSource={allSortedDeposits}
columns={columns}
onRow={(record) => {
return {
style: {
color:
(minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle)
? "#e74c3c"
: "inherit",
background: record.owner === activeWallet ? "#f5f5f5" : "#fff",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={allSortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
symbol2={symbol2}
symbol3={symbol3}
inAllTab={true}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>
</Tabs>
)
}
Example #3
| Source File: AppRouter.jsx From React-Nest-Admin with MIT License | 4 votes |
|
sidebar = () => {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1">
<Link to={{ pathname: "/" }}>
<HomeOutlined />
<span>首页</span>
</Link>
</Menu.Item>
<Menu.Item key="5">
<Link to={{ pathname: "/user-management" }}>
<UserOutlined />
<span>用户管理</span>
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<FileOutlined />
<span>文件管理</span>
</span>
}
>
<Menu.Item key="sub1-1">
<Link to={{ pathname: "/file/list" }}>
<OrderedListOutlined />
<span>文件列表</span>
</Link>
</Menu.Item>
<Menu.Item key="sub1-2">
<Link to={{ pathname: "/file/add" }}>
<UploadOutlined />
<span>文件上传</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<DashboardOutlined />
<span>可视化图表</span>
</span>
}
>
<Menu.Item key="sub2-1">
<Link to={{ pathname: "/charts/line-chart" }}>
<LineChartOutlined />
<span>折线图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-2">
<Link to={{ pathname: "/charts/bar-chart" }}>
<BarChartOutlined />
<span>柱状图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-3">
<Link to={{ pathname: "/charts/pie-chart" }}>
<PieChartOutlined />
<span>饼状图</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub5"
title={
<span>
<FileExcelOutlined />
<span>Excel表格</span>
</span>
}
>
<Menu.Item key="sub5-1">
<Link to={{ pathname: "/excel/export-csv" }}>
<ExportOutlined />
<span>Export csv</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<EditOutlined />
<span>文本编辑器</span>
</span>
}
>
<Menu.Item key="sub4-1">
<Link to={{ pathname: "/rich-text-editor" }}>
<Html5Outlined />
<span>富文本编辑器</span>
</Link>
</Menu.Item>
<Menu.Item key="sub4-2">
<Link to={{ pathname: "/md-editor" }}>
<FileMarkdownOutlined />
<span>Markdown编辑器</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={
<span>
<BugOutlined />
<span>错误页面</span>
</span>
}
>
<Menu.Item key="sub3-1">
<Link to={{ pathname: "/not-found" }}>
<InboxOutlined />
<span>404</span>
</Link>
</Menu.Item>
<Menu.Item key="sub3-2">
<Link to={{ pathname: "/not-allow" }}>
<StopOutlined />
<span>403</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="6">
<a
href="https://github.com/cnscorpions/React-Nest-Admin"
target="_blank"
rel="noopener noreferrer"
>
<GithubOutlined />
<span>Github</span>
</a>
</Menu.Item>
</Menu>
);
}
Example #4
| Source File: AiSample.js From network-rc with Apache License 2.0 | 4 votes |
|
render() {
const {
clear,
download,
upload,
props: { onFinish, cameraEnabled },
} = this;
const { sampleList } = this.state;
return (
<div className="ai-sample">
<Form layout="inline" className="ai-sample-form">
{Object.keys(aiAction).map((key) => (
<Form.Item>
<Button
icon={aiAction[key].icon}
onClick={() => this.add({ action: key })}
disabled={!cameraEnabled}
>{aiAction[key].name}</Button>
</Form.Item>
))}
<Form.Item>
<Upload
customRequest={upload}
accept="application/json"
showUploadList={false}
>
<Button icon={<ImportOutlined />}>导入</Button>
</Upload>
</Form.Item>
<Form.Item>
<Button
icon={<ExportOutlined />}
disabled={!sampleList.length}
onClick={download}
>
导出
</Button>
</Form.Item>
<Form.Item>
<Button type="danger" disabled={!sampleList.length} onClick={clear}>
清除
</Button>
</Form.Item>
<Form.Item>
<Link to="../train">
<Button
type="primary"
disabled={sampleList.length < 10}
onClick={() => {
onFinish(sampleList);
}}
>
下一步
</Button>
</Link>
</Form.Item>
</Form>
<List
size="small"
className="ai-example-list"
grid={{ gutter: 16, column: 4 }}
itemLayout="vertical"
pagination={{
pageSize: 12,
}}
dataSource={sampleList}
renderItem={({ img, action }, index) => (
<List.Item>
<Card
size="small"
title={aiAction[action].icon}
actions={[
<Button
size="small"
icon={<CloseOutlined />}
type="danger"
onClick={() => this.remove(index)}
/>,
]}
>
<img
style={{ width: "100%" }}
src={img}
alt="example"
onLoad={function ({ target }) {
target.height = target.width * 0.75;
}}
/>
</Card>
</List.Item>
)}
/>
</div>
);
}
Example #5
| Source File: AiTrain.js From network-rc with Apache License 2.0 | 4 votes |
|
render() {
const {
state: { learnArgument, loss, loading },
props: { sampleList, ai },
train,
} = this;
return (
<div className="ai-train">
<Spin spinning={loading} tip={loading}>
<Form {...layout} initialValues={learnArgument} onFinish={train}>
<Form.Item label="Learning rate" name="learnRate">
<Select>
<Option value={0.00001}>0.00001</Option>
<Option value={0.0001}>0.0001</Option>
<Option value={0.001}>0.001</Option>
<Option value={0.003}>0.003</Option>
</Select>
</Form.Item>
<Form.Item label="Batch Size" name="batchSize">
<Select>
<Option value={0.05}>0.05</Option>
<Option value={0.1}>0.1</Option>
<Option value={0.4}>0.4</Option>
<Option value={1}>1</Option>
</Select>
</Form.Item>
<Form.Item label="Epochs" name="epochs">
<Select>
<Option value={10}>10</Option>
<Option value={20}>20</Option>
<Option value={40}>40</Option>
</Select>
</Form.Item>
<Form.Item label="Hidden units" name="hiddenUnits">
<Select>
<Option value={100}>100</Option>
<Option value={200}>200</Option>
<Option value={300}>300</Option>
<Option value={400}>400</Option>
<Option value={500}>500</Option>
</Select>
</Form.Item>
<Form.Item label="loss">
<InputNumber value={loss} disabled />
</Form.Item>
<Form.Item {...tailLayout}>
<Button
key="fit"
loading={loading}
disabled={!sampleList.length}
icon={<ReadOutlined />}
htmlType="submit"
>
学习(样本{sampleList.length})
</Button>
<Button
onClick={async () => {
await ai.save("test");
message.success("模型已经保存");
}}
icon={<ExportOutlined />}
disabled={!sampleList.length}
>
导出模型
</Button>
</Form.Item>
</Form>
<Form>
<Form.Item {...tailLayout}>
<Link to="../drive">
<Button type="primary" disabled={!ai || !ai.model}>
下一步
</Button>
</Link>
</Form.Item>
</Form>
</Spin>
</div>
);
}
Example #6
| Source File: newtask.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
return (
<>
<PageHeader
title="New Task"
extra={[
<Upload
key="Import Config"
accept=".json"
maxCount={1}
showUploadList={false}
onChange={this.onClickImportConfig}
beforeUpload={() => {return false;}}
>
<Button
type="text"
icon={<ImportOutlined />}
loading={this.state.isLoadingImportConfig}
>
Import Config
</Button>
</Upload>,
<Button
key="Export Config"
type="text"
icon={<ExportOutlined />}
onClick={this.onClickExportConfig}
loading={this.state.isLoadingExportConfig}
>
Export Config
</Button>
]}
/>
<Content style={{ padding: '16px 24px' }}>
<Row gutter={[16]}>
<Col span={4}>
<Steps direction="vertical" current={this.state.step} onChange={this.onChangeStep}>
<Step title="Target" icon={<AimOutlined />} description="Select Target" />
<Step title="Attack" icon={<ToolOutlined />} description="Configure Attack" />
<Step title="Advanced" icon={<ExperimentOutlined />} description="Advanced Options" />
<Step title="Output" icon={<ExportOutlined />} description="Set Output" />
<Step title="Finalize" icon={<FileDoneOutlined />} description="Review and Finalize" />
</Steps>
</Col>
<Col span={20}>
<div className="steps-content">
{this.state.step === 0 ? (
<Form layout="vertical">
<Form.Item
label="Hash"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Hash"
value={this.state.hash}
onChange={this.onChangeHash}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._hashes.map(hash =>
<Option value={hash} key={hash} title={hash}>{filename(hash)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Algorithm"
>
<Select
showSearch
style={{ width: "100%" }}
size="large"
placeholder="Select Algorithm"
value={this.state.algorithm}
onChange={this.onChangeAlgorithm}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Object.keys(this.state._algorithms).map(key =>
<Option value={Number(key)} key={Number(key)}>{key + " - " + this.state._algorithms[key]}</Option>
)}
</Select>
</Form.Item>
</Form>
) : this.state.step === 1 ? (
<Form layout="vertical" requiredMark="optional">
<Form.Item
label="Attack Mode"
required
>
<Radio.Group value={this.state.attackMode} onChange={this.onChangeAttackMode}>
<Radio value={0}>Dictionary Attack</Radio>
<Radio value={1}>Combinator Attack</Radio>
<Radio value={3}>Mask Attack</Radio>
<Radio value={6}>Hybrid1 (Dictionary + Mask)</Radio>
<Radio value={7}>Hybrid2 (Mask + Dictionary)</Radio>
</Radio.Group>
</Form.Item>
{this.state.attackMode === 0 ? (
<>
<Form.Item
label="Dictionaries"
required
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionaries"
size="large"
onChange={this.onChangeDictionaries}
value={this.state.dictionaries}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
<Form.Item
label="Rules"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder={"Select Rules [max. "+maxRules+"]"}
size="large"
onChange={this.onChangeRules}
value={this.state.rules}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._rules.map(rule =>
<Option value={rule} key={rule} title={rule}>{filename(rule)}</Option>
)}
</Select>
</Form.Item>
</>
) : this.state.attackMode === 1 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Left Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Left Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Left Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Left Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={24}>
<Form.Item
label="Right Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Right Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Right Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Right Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : this.state.attackMode === 3 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 6 ? (
<Row gutter={[18, 16]}>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeLeftDictionary}
value={this.state.leftDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeLeftRule}
value={this.state.leftRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
</Row>
) : this.state.attackMode === 7 ? (
<Row gutter={[18, 16]}>
<Col span={12}>
{this.state.maskInputType === "text" ? (
<Form.Item
label="Mask"
required
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Mask"
size="large"
onChange={this.onChangeMask}
value={this.state.mask}
suffix={
this.state.mask ? maskLength(this.state.mask) : undefined
}
/>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "file"})}
>
Use .hcmask file instead
</Button>
</Form.Item>
) : this.state.maskInputType === "file" ? (
<Form.Item
label="Mask"
required
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Mask"
size="large"
onChange={this.onChangeMaskFile}
value={this.state.maskFile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._masks.map(mask =>
<Option value={mask} key={mask} title={mask}>{filename(mask)}</Option>
)}
</Select>
<Button
type="link"
style={{ padding: '0' }}
onClick={() => this.onChangeMaskInputType({type: "text"})}
>
Use mask text instead
</Button>
</Form.Item>
) : "unsupported mask input type" }
<Form.Item
label="Mask increment mode"
>
<Checkbox
checked={this.state.enableMaskIncrementMode}
onChange={this.onChangeEnableMaskIncrementMode}
>
Enable
</Checkbox>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMin}
onChange={this.onChangeMaskIncrementMin}
/>
<InputNumber
disabled={!this.state.enableMaskIncrementMode}
min={maskIncrementMin}
max={maskIncrementMax}
value={this.state.maskIncrementMax}
onChange={this.onChangeMaskIncrementMax}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Custom charset 1"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 1"
size="large"
onChange={this.onChangeCustomCharset1}
value={this.state.customCharset1}
/>
</Form.Item>
<Form.Item
label="Custom charset 2"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 2"
size="large"
onChange={this.onChangeCustomCharset2}
value={this.state.customCharset2}
/>
</Form.Item>
<Form.Item
label="Custom charset 3"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 3"
size="large"
onChange={this.onChangeCustomCharset3}
value={this.state.customCharset3}
/>
</Form.Item>
<Form.Item
label="Custom charset 4"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Custom charset 4"
size="large"
onChange={this.onChangeCustomCharset4}
value={this.state.customCharset4}
/>
</Form.Item>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={12}>
<Form.Item
label="Dictionary"
required
>
<Select
showSearch
allowClear
style={{ width: '100%' }}
placeholder="Select Dictionary"
size="large"
onChange={this.onChangeRightDictionary}
value={this.state.rightDictionary}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{this.state._dictionaries.map(dictionary =>
<Option value={dictionary} key={dictionary} title={dictionary}>{filename(dictionary)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Rule"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Rule"
size="large"
onChange={this.onChangeRightRule}
value={this.state.rightRule}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
) : (
"Select Attack Mode"
)}
</Form>
) : this.state.step === 2 ? (
<Form layout="vertical">
<Collapse ghost onChange={this.onChangeAdvancedOptionsCollapse} activeKey={this.state.advancedOptionsCollapse}>
<Panel header="General" key="General">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.quiet}
onChange={this.onChangeQuiet}
>
Quiet
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disablePotFile}
onChange={this.onChangeDisablePotFile}
>
Disable Pot File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableLogFile}
onChange={this.onChangeDisableLogFile}
>
Disable Log File
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableOptimizedKernel}
onChange={this.onChangeEnableOptimizedKernel}
>
Enable optimized kernel
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.enableSlowerCandidateGenerators}
onChange={this.onChangeEnableSlowerCandidateGenerators}
>
Enable slower candidate generators
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.removeFoundHashes}
onChange={this.onChangeRemoveFoundHashes}
>
Remove found hashes
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreUsernames}
onChange={this.onChangeIgnoreUsernames}
>
Ignore Usernames
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.disableSelfTest}
onChange={this.onChangeDisableSelfTest}
>
Disable self-test (Not Recommended)
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.ignoreWarnings}
onChange={this.onChangeIgnoreWarnings}
>
Ignore warnings (Not Recommended)
</Checkbox>
</Col>
</Row>
</Panel>
<Panel header="Devices" key="Devices">
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Devices IDs"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices IDs"
size="large"
onChange={this.onChangeDevicesIDs}
value={this.state.devicesIDs}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
{Array.from(Array(16)).map((x,i) =>
<Option value={i+1} key={i+1}>{"Device #"+(i+1)}</Option>
)}
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Devices Types"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Devices Types"
size="large"
onChange={this.onChangeDevicesTypes}
value={this.state.devicesTypes}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>CPU</Option>
<Option value={2} key={2}>GPU</Option>
<Option value={3} key={3}>FPGA, DSP, Co-Processor</Option>
</Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label="Workload Profile"
tooltip={
<Table
columns={[
{
title: 'Performance',
dataIndex: 'performance',
key: 'Performance'
},
{
title: 'Runtime',
dataIndex: 'runtime',
key: 'Runtime'
},
{
title: 'Power Consumption',
dataIndex: 'powerConsumption',
key: 'Power Consumption'
},
{
title: 'Desktop Impact',
dataIndex: 'desktopImpact',
key: 'Desktop Impact'
}
]}
dataSource={[
{
key: '1',
performance: 'Low',
runtime: '2 ms',
powerConsumption: 'Low',
desktopImpact: 'Minimal'
},
{
key: '2',
performance: 'Default',
runtime: '12 ms',
powerConsumption: 'Economic',
desktopImpact: 'Noticeable'
},
{
key: '3',
performance: 'High',
runtime: '96 ms',
powerConsumption: 'High',
desktopImpact: 'Unresponsive'
},
{
key: '4',
performance: 'Nightmare',
runtime: '480 ms',
powerConsumption: 'Insane',
desktopImpact: 'Headless'
}
]}
size="small"
pagination={false}
style={{ overflow: 'auto' }}
/>
}
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Workload Profile"
size="large"
onChange={this.onChangeWorkloadProfile}
value={this.state.workloadProfile}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>Low</Option>
<Option value={2} key={2}>Default</Option>
<Option value={3} key={3}>High</Option>
<Option value={4} key={4}>Nightmare</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={[18, 16]}>
<Col>
<Button
loading={this.state.isLoadingDevicesInfo}
onClick={this.onClickDevicesInfo}
>
Devices Info
</Button>
</Col>
<Col>
<Button
loading={this.state.isLoadingBenchmark}
onClick={this.onClickBenchmark}
>
Benchmark
</Button>
</Col>
</Row>
</Panel>
<Panel header="Markov" key="Markov">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.markovDisable}
onChange={this.onChangeMarkovDisable}
>
Disables markov-chains, emulates classic brute-force
</Checkbox>
</Col>
<Col>
<Checkbox
checked={this.state.markovClassic}
onChange={this.onChangeMarkovClassic}
>
Enables classic markov-chains, no per-position
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Threshold X when to stop accepting new markov-chains"
>
<InputNumber
value={this.state.markovThreshold}
onChange={this.onChangeMarkovThreshold}
/>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Monitor" key="Monitor">
<Row gutter={[18, 16]}>
<Col>
<Checkbox
checked={this.state.disableMonitor}
onChange={this.onChangeDisableMonitor}
>
Disable Monitor
</Checkbox>
</Col>
<Col span={24}>
<Row gutter={[18, 16]}>
<Col span={8}>
<Form.Item
label="Temp Abort (°C)"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Temp Abort (°C)"
size="large"
onChange={this.onChangeTempAbort}
value={this.state.tempAbort}
disabled={this.state.disableMonitor}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={60} key={60}>60 °C</Option>
<Option value={65} key={65}>65 °C</Option>
<Option value={70} key={70}>70 °C</Option>
<Option value={75} key={75}>75 °C</Option>
<Option value={80} key={80}>80 °C</Option>
<Option value={85} key={85}>85 °C</Option>
<Option value={90} key={90}>90 °C</Option>
<Option value={95} key={95}>95 °C</Option>
<Option value={100} key={100}>100 °C</Option>
</Select>
</Form.Item>
</Col>
</Row>
</Col>
</Row>
</Panel>
<Panel header="Extra Arguments" key="Extra Arguments">
<Form.Item
label="Extra Arguments"
>
<Input
allowClear
style={{ width: '100%' }}
placeholder="Set Extra Arguments"
size="large"
onChange={this.onChangeExtraArguments}
value={this.state.extraArguments.join(" ")}
/>
</Form.Item>
</Panel>
<Panel header="Misc" key="Misc">
<Form.Item
label="Status Timer"
>
<Select
allowClear
style={{ width: '100%' }}
placeholder="Select Status Timer"
size="large"
onChange={this.onChangeStatusTimer}
value={this.state.statusTimer}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={10} key={10}>10 Seconds</Option>
<Option value={20} key={20}>20 Seconds</Option>
<Option value={30} key={30}>30 Seconds</Option>
<Option value={45} key={45}>45 Seconds</Option>
<Option value={60} key={60}>60 Seconds</Option>
<Option value={90} key={90}>90 Seconds</Option>
<Option value={120} key={120}>120 Seconds</Option>
<Option value={300} key={300}>300 Seconds</Option>
</Select>
</Form.Item>
</Panel>
</Collapse>
</Form>
) : this.state.step === 3 ? (
<Form layout="vertical">
<Form.Item
label="Output File"
extra={this.state.outputFile ? this.state.outputFile : null}
>
<Button
type="primary"
onClick={this.onChangeOutputFile}
loading={this.state.isLoadingSetOutputFile}
>
Set Output File
</Button>
</Form.Item>
<Form.Item
label="Output Format"
>
<Select
mode="multiple"
allowClear
style={{ width: '100%' }}
placeholder="Select Output Format"
size="large"
onChange={this.onChangeOutputFormat}
value={this.state.outputFormat}
filterOption={(input, option) =>
String(option.value).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
String(option.children).toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value={1} key={1}>hash[:salt]</Option>
<Option value={2} key={2}>plain</Option>
<Option value={3} key={3}>hex_plain</Option>
<Option value={4} key={4}>crack_pos</Option>
<Option value={5} key={5}>timestamp absolute</Option>
<Option value={6} key={6}>timestamp relative</Option>
</Select>
</Form.Item>
</Form>
) : this.state.step === 4 ? (
<Space direction="vertical">
<Form layout="vertical">
<Form.Item
label="Priority"
tooltip={
<Typography>
Tasks are started automatically in a descending order of priority.
<br />
Set to -1 to disable auto-start.
</Typography>
}
>
<InputNumber
min={-1}
max={999}
value={this.state.priority}
onChange={this.onChangePriority}
bordered={true}
/>
</Form.Item>
</Form>
<Space size="large" direction="horizontal">
<Button
type="primary"
icon={<PlusOutlined />}
onClick={this.onClickCreateTask}
loading={this.state.isLoadingCreateTask}
>
Create Task
</Button>
<Checkbox
checked={this.state.preserveTaskConfig}
onChange={this.onChangePreserveTaskConfig}
>
Preserve task config
</Checkbox>
</Space>
</Space>
) : null }
</div>
</Col>
</Row>
</Content>
</>
)
}
Example #7
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addContentType({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateContentType(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeContentType(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'app_label',
dataIndex: 'app_label',
rules: [
{
required: true,
message: 'app_label为必填项',
},
],
},
{
title: 'model',
dataIndex: 'model',
rules: [
{
required: true,
message: 'model为必填项',
},
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除content type吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryContentTypeDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryContentTypeListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="content type表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryContentType, table_columns, 'content type-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索content type" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'content type-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryContentType({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #8
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addGroup({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateGroup(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeGroup(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'name',
dataIndex: 'name',
rules: [
{
required: true,
message: 'name为必填项',
},
],
},
{
title: 'permissions',
dataIndex: 'permissions',
rules: [
],
width: '80%',
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, permissionsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除group吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryGroupDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryGroupListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [permissionsManyToManyList, setPermissionsManyToManyList] = useState([]);
useEffect(() => {
queryPermission({all:1}).then(value => {
setPermissionsManyToManyList(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="group表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryGroup, table_columns, 'group-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索group" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'group-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryGroup({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #9
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addPermission({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updatePermission(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removePermission(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'name',
dataIndex: 'name',
rules: [
{
required: true,
message: 'name为必填项',
},
],
},
{
title: 'content_type',
dataIndex: 'content_type',
rules: [
{
required: true,
message: 'content_type为必填项',
},
],
renderFormItem: (item, {value, onChange}) => {
return dealForeignKeyField(item, value, onChange, content_typeForeignKeyList);
},
render: (text, record) => {
return renderForeignKey(text, content_typeVerboseNameMap);
},
},
{
title: 'codename',
dataIndex: 'codename',
rules: [
{
required: true,
message: 'codename为必填项',
},
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除permission吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryPermissionDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryPermissionListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [content_typeForeignKeyList, setContent_typeForeignKeyList] = useState([]);
useEffect(() => {
queryContentType({all: 1}).then(value => {
setContent_typeForeignKeyList(value);
});
}, []);
const [content_typeVerboseNameMap, setContent_typeVerboseNameMap] = useState([]);
useEffect(() => {
queryContentTypeVerboseName().then(value => {
setContent_typeVerboseNameMap(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="permission表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryPermission, table_columns, 'permission-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索permission" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'permission-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryPermission({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #10
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTAnalysis({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTAnalysis(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTAnalysis(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: '序号',
dataIndex: 'number',
valueType: 'digit',
rules: [
],
},
{
title: 'openid',
dataIndex: 'openid',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '垃圾',
hideInSearch: true,
dataIndex: 'picture_trush',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_trush');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '结果',
dataIndex: 'machine_answer',
rules: [
],
},
{
title: '精度',
dataIndex: 'precisions',
rules: [
],
},
{
title: '时间',
dataIndex: 'data_time',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除识别结果吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTAnalysisDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTAnalysisListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="识别结果表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTAnalysis, table_columns, '识别结果-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索识别结果" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '识别结果-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTAnalysis({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #11
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTCamera({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTCamera(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTCamera(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: '序号',
dataIndex: 'number',
valueType: 'digit',
rules: [
],
},
{
title: 'openid',
dataIndex: 'openid',
rules: [
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '人脸',
hideInSearch: true,
dataIndex: 'face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '匹配',
hideInSearch: true,
dataIndex: 'picture_face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '垃圾',
hideInSearch: true,
dataIndex: 'picture_trush',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_trush');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '时间',
dataIndex: 'data_time',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除投放记录吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTCameraDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTCameraListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="投放记录表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTCamera, table_columns, '投放记录-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索投放记录" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '投放记录-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTCamera({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #12
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTUser({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTUser(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTUser(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'openid',
dataIndex: 'openid',
rules: [
{
required: true,
message: 'openid为必填项',
},
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '人脸',
hideInSearch: true,
dataIndex: 'face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: 'field_token',
dataIndex: 'field_token',
rules: [
],
},
{
title: '积分',
dataIndex: 'integral',
valueType: 'digit',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除用户概览吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTUserDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTUserListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="用户概览表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTUser, table_columns, '用户概览-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索用户概览" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '用户概览-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTUser({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #13
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updatePassWordModalVisible, handleUpdatePassWordModalVisible] = useState(false);
const [updatePasswordForm] = Form.useForm();
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addUserProfile({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateUserProfile(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeUserProfile(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const handlePassWordUpdate = () => {
if (updatePasswordForm.getFieldValue('password') !== updatePasswordForm.getFieldValue('re_password')) {
updatePasswordForm.setFields([{
name: 're_password',
errors: ['两次密码不一致'],
}]);
} else {
updatePasswordForm.validateFields().then(
value => {
updateUserPassword({
...value,
username: updateFormValues["username"],
}).then(
message.success('密码修改成功'),
handleUpdatePassWordModalVisible(false),
);
},
);
updatePasswordForm.submit;
}
};
const dateFieldList = ["last_login","date_joined"]
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'password',
hideInTable: true,
hideInSearch: true,
dataIndex: 'password',
rules: [
{
required: true,
message: 'password为必填项',
},
],
},
{
title: 'last_login',
dataIndex: 'last_login',
valueType: 'dateTime',
rules: [
],
},
{
title: 'is_superuser',
initialValue: false,
dataIndex: 'is_superuser',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'username',
dataIndex: 'username',
rules: [
{
required: true,
message: 'username为必填项',
},
],
},
{
title: 'first_name',
dataIndex: 'first_name',
rules: [
],
},
{
title: 'last_name',
dataIndex: 'last_name',
rules: [
],
},
{
title: 'email',
dataIndex: 'email',
rules: [
],
},
{
title: 'is_staff',
initialValue: false,
dataIndex: 'is_staff',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'is_active',
initialValue: true,
dataIndex: 'is_active',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'date_joined',
hideInForm: true,
dataIndex: 'date_joined',
valueType: 'dateTime',
rules: [
],
},
{
title: '性别',
initialValue: "female",
dataIndex: 'gender',
rules: [
],
valueEnum:{"male":"男","female":"女"}
},
{
title: '头像',
hideInSearch: true,
dataIndex: 'image',
valueType: 'avatar',
rules: [
{
required: true,
message: '头像为必填项',
},
],
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('image');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: 'groups',
dataIndex: 'groups',
rules: [
],
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, groupsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: 'user_permissions',
dataIndex: 'user_permissions',
rules: [
],
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, user_permissionsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
record.last_login = record.last_login === null ? record.last_login : moment(record.last_login);record.date_joined = record.date_joined === null ? record.date_joined : moment(record.date_joined);
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<KeyOutlined onClick={() => {
handleUpdatePassWordModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除登入管理吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryUserProfileDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryUserProfileListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [groupsManyToManyList, setGroupsManyToManyList] = useState([]);
useEffect(() => {
queryGroup({all:1}).then(value => {
setGroupsManyToManyList(value);
});
}, []);const [user_permissionsManyToManyList, setUser_permissionsManyToManyList] = useState([]);
useEffect(() => {
queryPermission({all:1}).then(value => {
setUser_permissionsManyToManyList(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="登入管理表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryUserProfile, table_columns, '登入管理-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索登入管理" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '登入管理-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryUserProfile({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={twoColumns}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={twoColumns}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
{
<UpdatePasswordForm
onCancel={() => {
handleUpdatePassWordModalVisible(false);
}}
handleUpdate={handlePassWordUpdate}
updateModalVisible={updatePassWordModalVisible}
userName={updateFormValues["username"]}
>
<Form form={updatePasswordForm}>
<FormItem
labelCol={{
span: 5,
}}
wrapperCol={{
span: 15,
}}
label="密码"
name="password"
rules={[
{
required: true,
message: '请输入密码！',
},
]}
>
<Input.Password placeholder="请输入密码" type="password" />
</FormItem>
<FormItem
labelCol={{
span: 5,
}}
wrapperCol={{
span: 15,
}}
label="重复密码"
name="re_password"
rules={[
{
required: true,
message: '请输入重复密码',
},
]}
>
<Input.Password placeholder="请再次输入密码" type="password" />
</FormItem>
</Form>
</UpdatePasswordForm>
}
</PageHeaderWrapper>
);
}
