Skip to content

J
jinfa-platform
Commit 4c880902 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

🐞 fix: 删除组件改小写没效果

parent 97fd25a6
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 452 deletions
src/pages/transaction/components/TableLayout/index.tsx deleted 100644 → 0
View file @ 97fd25a6
import React, { useRef, useState, useImperativeHandle } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card } from 'antd';
import { StandardTable } from 'god';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ColumnType, TableRowSelection } from 'antd/lib/table/interface';
import NiceForm from '@/components/NiceForm';
import { createFormActions, FormEffectHooks } from '@formily/antd';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { searchSelectGetSelectCategoryOptionEffect } from '@/pages/transaction/effect/index';
import { useLinkageUtils } from '@/utils/formEffectUtils';
const { onFormMount$ } = FormEffectHooks
interface Iprops {
/** 列表接口 */
// fetch?: () => Promise<unknown>,
fetch?: any,
/** 多选返回 */
fetchRowkeys?(e: any),
/** 操作按钮 */
controllerBtns?: React.ReactNode,
/** 搜索的schema */
schema?: any,
/** 列表表头 */
columns: ColumnType<any>[],
/** schema搜索第一个的name */
effects?: string,
/** 是否多选 */
selectedRow?: boolean,
/** 刷新 */
reload?: any,
/** 外部状态接口 */
externalStatusFetch?: Promise<unknown>,
/** 内部状态接口 */
interiorStatusFetch?: Promise<unknown>,
/** 状态选择接口 */
useStateEffects?: () => void,
/** rowKey */
rowKey?: string,
/** 禁用 */
getCheckboxProps?: (record: any) => void,
}
const formActions = createFormActions();
const Table: React.FC<Iprops> = (props: any) => {
const {
schema,
columns,
effects,
fetch,
controllerBtns,
selectedRow,
reload,
fetchRowkeys,
externalStatusFetch,
interiorStatusFetch,
useStateEffects,
rowKey,
getCheckboxProps
} = props;
const tableRef = useRef<any>({});
/** 列表数据 */
const fetchData = (params?: any) => {
return new Promise((resolve, reject) => {
if (!Array.isArray(fetch)) {
fetch({ ...params }).then(res => {
resolve(res.data)
}).catch(error => {
console.warn(error)
})
return
}
resolve({
code: 1000,
data: fetch
})
})
}
/**多选 */
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<number>>([]);
const rowSelection: TableRowSelection<any> = {
selectedRowKeys: selectedRowKeys,
onChange: (rowKeys: any) => {
fetchRowkeys(rowKeys)
setSelectedRowKeys(rowKeys);
},
getCheckboxProps: (record) => getCheckboxProps && getCheckboxProps(record)
}
useImperativeHandle(reload, () => ({
reload: () => {
tableRef.current.reload();
}
}));
// 搜索
const search = (values: any) => {
tableRef.current.reload(values)
}
const useBusinessEffects = () => {
const linkage = useLinkageUtils();
onFormMount$().subscribe(() => {
externalStatusFetch && externalStatusFetch.then(res => {
console.log(res, 10086)
const _enum = res.data.map((item) => { return { label: item.name, value: item.state } })
linkage.enum('externalState', _enum)
linkage.enum('externalStatusList', _enum)
linkage.enum('status', _enum);
}).catch(error => {
console.warn(error)
})
interiorStatusFetch && interiorStatusFetch.then(res => {
const _enum = res.data.map((item) => { return { label: item.name, value: item.state } })
linkage.enum('interiorState', _enum)
linkage.enum('innerStatusList', _enum)
}).catch(error => {
console.warn(error)
})
})
}
return (
<PageHeaderWrapper>
<Card>
<StandardTable
currentRef={tableRef}
columns={columns}
tableProps={{ rowKey: rowKey ? rowKey : 'id' }}
rowSelection={selectedRow && rowSelection}
fetchTableData={(params: any) => fetchData(params)}
controlRender={
<NiceForm
actions={formActions}
components={{
controllerBtns: () => controllerBtns,
}}
onSubmit={values => search(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, effects, FORM_FILTER_PATH)
FormEffectHooks.onFieldChange$('category').subscribe(state => {
searchSelectGetSelectCategoryOptionEffect(actions, 'category')
})
useBusinessEffects();
useStateEffects && useStateEffects();
}}
schema={schema}
>
</NiceForm>
}
/>
</Card>
</PageHeaderWrapper>
)
}
export default Table;
src/pages/transaction/components/TableModal/index.tsx deleted 100644 → 0
View file @ 97fd25a6
import { ISchema } from '@formily/antd';
import React, { useEffect, useRef, useState } from 'react';
import { Modal, Row, Col, Drawer, Button } from 'antd';
import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { ColumnsType } from 'antd/es/table';
import NiceForm from '@/components/NiceForm';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
const formActions = createFormActions();
interface Iprops {
modalType?: "Modal" | "Drawer"
/**
* 是否显示
*/
visible: boolean,
/**
* Modal 标题
*/
title: string,
/**
* 搜索schema
*/
schema: ISchema,
/**
* table Ccolumn
*/
columns: ColumnsType,
footer?: React.ReactNode,
tableProps?: {
rowKey: string | ((record) => any)
},
mode: 'checkbox' | 'radio',
customizeRadio?: boolean,
/**
* rowSelection
*/
value?: { [key: string]: any }[],
/**
* onChange
*/
expressionScope?: { [key: string]: any }
/**
* format话参数
*/
format?: ((value) => any) | null,
effects?: ($, actions) => void,
fetchData: (params: any) => any,
onClose: () => void,
onOk: (selectRow: number[] | string[], selectedRows: { [key: string]: any }[]) => void,
/** customKey */
customKey?: string
}
const TableModal: React.FC<Iprops> = (props: Iprops) => {
const { title, visible, schema, columns, effects, tableProps, mode, expressionScope, fetchData, onClose, onOk, value, format, customizeRadio, modalType, footer, customKey } = props;
const ref = useRef<any>({});
const [rowSelection, RowCtl] = useRowSelectionTable({ type: customizeRadio && mode === 'radio' ? 'checkbox' : mode, customKey: customKey });
const isFirstLoad = useRef<boolean>(true);
useEffect(() => {
if (!visible) {
return;
}
RowCtl.setSelectRow(value)
RowCtl.setSelectedRowKeys(value.map(v => v[customKey]))
}, [visible])
const handleEffects = ($: any, actions: any) => {
effects?.($, actions);
}
const handleOnClose = () => {
onClose?.()
}
const handleOk = () => {
onOk?.(RowCtl.selectedRowKeys, RowCtl.selectRow)
}
useEffect(() => {
if (!visible) {
return;
}
if (!isFirstLoad.current) {
ref.current?.reload?.();
}
isFirstLoad.current = false;
}, [visible])
const handleSearch = (params: any) => {
const res = (format && format(params)) || params;
ref.current.reload(res)
}
const Component = modalType === 'Modal' ? Modal : Drawer;
const renderFooter = () => {
return (
<div style={{ textAlign: 'right' }}>
<Button onClick={handleOnClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={handleOk} type="primary">
提交
</Button>
</div>
)
}
const otherProps = modalType === 'Drawer' ? { footer: renderFooter() } : { onOk: handleOk }
return (
<Component
title={title}
visible={visible}
onClose={handleOnClose}
onCancel={handleOnClose}
// onOk={handleOk}
width={900}
{...otherProps}
>
<StandardTable
keepAlive={false}
columns={columns}
tableProps={{
...tableProps,
pagination: false
}}
tableType="small"
fetchTableData={fetchData}
currentRef={ref}
rowSelection={{
...rowSelection,
hideSelectAll: customizeRadio,
}}
formRender={(child, ps) => <Row justify='space-between' style={{ marginBottom: 16 }}>
<Col span={18} style={{ zIndex: 99 }}>{child}</Col>
<Col style={{ marginTop: 4 }}>{ps}</Col>
</Row >}
controlRender={
<NiceForm
schema={schema}
actions={formActions}
onSubmit={handleSearch}
expressionScope={expressionScope}
effects={($, actions) => handleEffects($, actions)}
/>
}
>
</StandardTable>
</Component>
)
}
TableModal.defaultProps = {
// rowSelection: null,
mode: 'radio',
tableProps: {
rowKey: 'memberId'
},
value: [],
expressionScope: {},
format: null,
customizeRadio: false,
modalType: "Modal",
footer: null
}
export default TableModal;
src/pages/transaction/components/UploadFiles/index.less deleted 100644 → 0
View file @ 97fd25a6
.uploadList {
// width: 575px;
.uploadListItem {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
margin-bottom: 16px;
background-color: #ecf7ff;
}
}
src/pages/transaction/components/UploadFiles/index.tsx deleted 100644 → 0
View file @ 97fd25a6
import React, { useState } from 'react';
import { Upload, Button, message, Typography } from 'antd';
import data from '@/pages/transaction/common/uploadProps';
import { DeleteOutlined, FilePdfOutlined, UploadOutlined } from '@ant-design/icons';
import style from './index.less';
import { isEmpty } from 'lodash';
type fileType = {
/** 名字 */
name: string,
/** 链接 */
url: string
}
interface UploadFilesProps {
visible?: boolean,
/** label */
label?: React.ReactNode | string,
/** name */
name?: string,
/** 宽度 */
width?: string,
/** 对齐方式 */
labelAlign?: "left" | "right",
/** 限制文件类型 */
accept?: string,
/** 限制上传大小 */
size?: number,
/** 回显数据 */
fileList?: fileType[],
/** 返回数据 */
onChange?: (e?: any[]) => void,
/** 删除 */
onRemove?: (e?: number) => void,
}
const UploadFiles: React.FC<UploadFilesProps> = (props: any) => {
const { visible = true, width, accept, size, fileList, onChange, onRemove } = props;
const [loading, setLoading] = useState<boolean>(false);
const beforeUpload = (file: any) => {
const isSize = (file.size / 1024 / 1024) < size;
let index = file['name'].lastIndexOf(".");
//获取后缀
let ext = file['name'].substr(index + 1);
const accepts = accept.split(",").some((item) => item === `.${ext}`);
if (!accepts) {
message.error(`文件类型必须为${accept}`);
}
if (!isSize) {
message.error(`上传文件大小不超过 ${size}M!`);
}
return (accepts && isSize)
}
const handleFilesChange = ({ file }) => {
setLoading(true);
if (file.status !== "done") {
return
}
const files: fileType[] = fileList;
files.push({
name: file.name,
url: file.response.data,
})
onChange([...files]);
setLoading(false);
}
return (
<>
<div className={style.uploadList} style={{ width: width ? width : '100%'}}>
{!isEmpty(fileList) && fileList.map((item: fileType, index: number) => (
<div className={style.uploadListItem} key={`file${index}_1`}>
<div className={style.uploadInfo}>
<Typography.Link
style={{ display: 'block' }}
href={`/api/contract/contractTemplate/downloadContract?contractName=${item.name}&contractUrl=${item.url}`}
target="_blank"
>
<FilePdfOutlined style={{ marginRight: '5px' }} />
{item.name}
</Typography.Link>
</div>
<div className={style.uploadOperate} onClick={() => onRemove(index)}>
<DeleteOutlined />
</div>
</div>
))}
</div>
{visible && (
<Upload
{...data}
showUploadList={false}
accept={accept}
beforeUpload={beforeUpload}
onChange={handleFilesChange}
>
<Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
<div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 {size}M</div>
</Upload>
)}
</>
)
}
export default UploadFiles;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment