antd4.0中使用form组件相关注意点:
1、对多选的下拉框进行改造,加上全选功能
import { Form } from 'antd'
const [form] = Form.useForm()
// 识别类型
function handleChangeType(value: any) {
let alg = {}
let algs = ''
for (const item of value) {
// @ts-ignore
alg = algTypeList.find(i => i.commonName == item)
// @ts-ignore
algs += alg.algType + ","
}
value.length === algTypeList.length ? setAlgState(true) : setAlgState(false);
setAlgTypes(algs.substring(0, algs.length - 1))
}
return(
<Form style={{ display: 'flex' }}
form={form}
className="selectGroup1">
<Form.Item label="识别类型" name="algTypes"
rules={[{ required: true, message: '请选择或输入识别类型!' }]}
style={{ marginRight: 15 }}>
<Select onChange={handleChangeType}
className="none" mode="multiple" showArrow allowClear
value={1} maxTagCount={2} style={{ width: 180 }}
maxTagTextLength={4} placeholder="请选择"
//@ts-ignore
defaultValue={defaultType} key={defaultType}
dropdownRender={allSelectValue => (
<div>
<div style={{ padding: '4px 8px 8px 8px', cursor: 'pointer'}}>
<Checkbox checked={AlgState} onChange={(e) => {
if (e.target.checked === true) {
setAlgState(true)
form.setFieldsValue({
algTypes: algTypeList?.map((item: { commonName: any })=> item.commonName)})
} else {
setAlgState(false)
form.setFieldsValue({
algTypes: []
})
}
//调用onchange函数,将下拉框被选中的选项作为value值传入
handleChangeType(form.getFieldValue('algTypes'))
}}>全选</Checkbox>
</div>
<Divider style={{ margin: '0' }} />
{allSelectValue}
</div>)}>
{algTypeList.map((item, index) => (
// @ts-ignore
<Option value={item.commonName} key={index}>{item.commonName} </Option>))}
</Select>
</Form.Item>
</Form>)
效果:
2、图片全屏
// 图片全屏
const setfull = () => {
const imgFull = document.getElementById('img') as HTMLDivElement
var RFSN = document.documentElement.requestFullscreen || document.documentElement.requestFullscreen;
if (RFSN) {
RFSN.call(imgFull);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
3、时间选择器
// 时间切换
const changeDate = (dates: any) => {
if (dates !== null) {
setRangeTime({
startTime: moment(dates[0]).format("YYYY-MM-DD HH:mm:ss"),
endTime: moment(dates[1]).format("YYYY-MM-DD HH:mm:ss")
})
} else {
setRangeTime({
startTime: moment().startOf('day').format("YYYY-MM-DD HH:mm:ss"),
endTime: moment().format("YYYY-MM-DD HH:mm:ss")
})
}
}
//默认面板控件显示时间为当天零点到现在的时间
<RangePicker
placeholder={['开始时间', '结束时间']}
defaultValue={[moment().startOf('day'), moment()]}
showTime={{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
}}
format="YYYY-MM-DD HH:mm:ss"
onChange={changeDate}
/>
效果:
4、分页器
const [pageSize, setPageSize] = useState(10) // 每页记录条数
// 对总数进行设置时,需指明初始值类型,否则组件中defaultCurrent不生效。
const [total, setTotal] = useState(1) // 总数
<Pagination
style={{ marginTop: 20, textAlign: 'center' }}
total={total}
showSizeChanger
showQuickJumper
defaultCurrent={1}
defaultPageSize={pageSize}
showTotal={total => `共 ${total} 条记录`}
onChange={changePage}
pageSizeOptions={[`${pageSize}`]}
/>
效果:
5、拿到url地址中的相关参数
//上一个页面跳转地址为
history.push(`./project/system/${system.id}?pjId=${pjId}`)
//下一个页面获取相关参数的方法
const sysId = props.match.params.id
const pjId = props.location.query.pjId
6、通过url下载图片
export function download(url: string | undefined) {
const elemIF = document.createElement('iframe');
elemIF.src = url ? url :'';
elemIF.style.display = 'none';
document.body.appendChild(elemIF);
setTimeout(() => {
document.body.removeChild(elemIF)
}, 300)
}
7、通过uuid下载图片
/*
* 获取下载图片和文件地址
* th: 原图
* fileUuid: xxxx-xxxx-xxxx-xxxx-xxxx || xxx.url
* */
/*
* 1: 原图
* 2: 中大图
* 3: 中小图
* 4: 小图
* */
//fileDownloadUrl.d.ts
export type th = 1 | 2 | 3 | 4;
export type fileDownloadData = {
th?: th;
url?: string;
fileUuid?: string;
};
type FileDownload = (
th: th,
fileUuid: string,
urlPrefix?: string,
) => Promise<string>;
declare const fileDownloadUrl: FileDownload;
export default fileDownloadUrl;
//fileDownloadUrl.ts
import server from '@pms/pmserver';
import request from './utils/request';
const { homeServer } = server;
import { th, fileDownloadData } from './fileDownloadUrl.d';
export default (
th: th = 4,
fileUuid: string = '',
urlPrefix?: string,
): Promise<any> => {
// 兼容是http的url
if (fileUuid.includes('http')) return getSourceUrl(fileUuid);
// 先获取缓存
const cacheUrl = window.sessionStorage.getItem(fileUuid);
if (cacheUrl) return getCacheUrl(cacheUrl);
const data: fileDownloadData = {};
if (th) data['th'] = th;
const url = fileUuid.split('-');
url.length === 5
? fileUuid.includes('.')
? (data.url = fileUuid)
: (data.fileUuid = fileUuid)
: (data.url = fileUuid);
return new Promise((resolve, reject) => {
request(`${urlPrefix || homeServer}/common/fileDownloadUrl.htm`, {
method: 'POST',
requestType: 'form',
closeThrowErr: true,
data,
})
.then(res => {
// 缓存url,减少调用服务端
if (res) window.sessionStorage.setItem(fileUuid, res);
resolve(res);
})
.catch(err => {
reject(err);
});
});
};
function getSourceUrl(src: string) {
return new Promise(resolve => {
resolve(src);
});
}
function getCacheUrl(src: string) {
return new Promise(resolve => {
resolve(src);
});
}
// 图片下载
import { fileDownloadUrl } from '@pms/react-utils'
const downloadImg = (uuid: any) => {
fileDownloadUrl(1, uuid).then(result => {
window.open(result)
})
}
8、通过url导出列表
//例如接口地址为`/eyeai/project/home/deriveFPPLChildPage`,后面拼接的为请求参数
window.open(`/eyeai/project/home/deriveFPPLChildPage?projectId=${props.pjId || currentUser.pjId}&companyId=${currentUser.coId}&algTypes=${algTypes ? algTypes : ''}&cameraIds=${cameraIds ? cameraIds : ''}&startTime=${rangeTime.startTime}&endTime=${rangeTime.endTime}&selectType=${props.sysId}`, "_blank")
9、为表格设置rowkey
<Table
loading={initLoading}
style={{ maxHeight: 702, overflow: 'auto' }}
columns={columns}
dataSource={pageList}
pagination={false}
rowKey={record => record.id}
/>