项目建档：列表页、新建、查看
This commit is contained in:
lix
747
src/pages/ProjectFiles/file.tsx
Normal file
747
src/pages/ProjectFiles/file.tsx
Normal file
@ -0,0 +1,747 @@
|
||||
import { CloseCircleOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Card, Col, Form, Popover, Row, message, Divider, Select, Input, Upload } from 'antd';
|
||||
import { history, useLocation } from 'umi';
|
||||
import type { Location } from 'umi';
|
||||
|
||||
import type { FC } from 'react';
|
||||
import React, { useState, Fragment } from 'react';
|
||||
import ProForm, {
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormRadio,
|
||||
ProFormDigit,
|
||||
ProFormDependency,
|
||||
ProFormUploadButton,
|
||||
} from '@ant-design/pro-form';
|
||||
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
|
||||
import { submitForm } from './service';
|
||||
import styles from './style.less';
|
||||
import {
|
||||
fundNatureOptions,
|
||||
fundsProviderOptions,
|
||||
budgetTypeOptions,
|
||||
regionDictTypeOptions,
|
||||
regionOutsideOptions,
|
||||
currencyCodeOptions,
|
||||
purchaseTypeEnum,
|
||||
openTenderFormEnum,
|
||||
reviewMethodEnum,
|
||||
organizationFormEnum,
|
||||
tenderAgencyEnum,
|
||||
bidMethodEnum,
|
||||
evaluationMethodEnum,
|
||||
reviewWayEnum,
|
||||
processEnum,
|
||||
subjectTypeOptions,
|
||||
subjectType2Options,
|
||||
} from './dict';
|
||||
import CitySelect from '@/components/CitySelect';
|
||||
|
||||
|
||||
type InternalNamePath = (string | number)[];
|
||||
|
||||
const fieldLabels = {
|
||||
projectName: '项目名称',
|
||||
ProjectBizNo: '项目编号',
|
||||
tendereeOrgId: '项目归属单位', //
|
||||
tendereeId: '项目归属部门', //
|
||||
appManagerId: '项目负责人',
|
||||
appManagerTel: '联系电话',
|
||||
fundNature: '资金性质', //
|
||||
fundsProviderDict: '资金来源',
|
||||
budgetType: '预算类型', //
|
||||
regionDictType: '项目所在行政区域类型', //?
|
||||
regionDict: '项目所在行政区域', //?
|
||||
budgetAmount: '项目预算',
|
||||
currencyCode: '币种',
|
||||
openTenderForm: '招标类型',
|
||||
bidMethodDict: '采购方式',
|
||||
reviewMethod: '资审方式', //
|
||||
bidOrgDict: '组织形式', //
|
||||
tenderAgencyId: '招标代理机构', //
|
||||
};
|
||||
|
||||
|
||||
interface ErrorField {
|
||||
name: InternalNamePath;
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
// 主要标的表单控件
|
||||
const SubjectFormItem = ({ value = [], onChange, disabled = false }: { value?: string[], onChange?: (value: string[]) => void, disabled?: boolean }) => {
|
||||
return (
|
||||
<Row gutter={8}>
|
||||
<Col span={8}>
|
||||
<Select
|
||||
value={value[0]}
|
||||
onChange={(v1: string) => onChange?.([v1, value[1] || ''])}
|
||||
placeholder="请选择主要标的类别"
|
||||
disabled={disabled}
|
||||
>
|
||||
{subjectTypeOptions.map(item => (
|
||||
<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<Select
|
||||
value={value[1]}
|
||||
onChange={(v2: string) => onChange?.([value[0] || '', v2])}
|
||||
placeholder="请选择主要标的类别"
|
||||
disabled={disabled}
|
||||
>
|
||||
{subjectType2Options.map(item => (
|
||||
<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
const normFile = (e: any) => {
|
||||
console.log('Upload event:', e);
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e?.fileList;
|
||||
};
|
||||
|
||||
const ProjectFileCreate: FC<Record<string, any>> = () => {
|
||||
const { query }: Location = useLocation();
|
||||
const readOnly = query?.action === 'view';
|
||||
const id = query?.id; // 文件 id
|
||||
|
||||
const [regionDictType, setRegionDictType] = useState<string>('1');
|
||||
const [error, setError] = useState<ErrorField[]>([]);
|
||||
const getErrorInfo = (errors: ErrorField[]) => {
|
||||
const errorCount = errors.filter((item) => item.errors.length > 0).length;
|
||||
if (!errors || errorCount === 0) {
|
||||
return null;
|
||||
}
|
||||
const scrollToField = (fieldKey: string) => {
|
||||
const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
|
||||
if (labelNode) {
|
||||
labelNode.scrollIntoView(true);
|
||||
}
|
||||
};
|
||||
const errorList = errors.map((err) => {
|
||||
if (!err || err.errors.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const key = err.name[0] as string;
|
||||
return (
|
||||
<li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
|
||||
<CloseCircleOutlined className={styles.errorIcon} />
|
||||
<div className={styles.errorMessage}>{err.errors[0]}</div>
|
||||
<div className={styles.errorField}>{fieldLabels[key as keyof typeof fieldLabels]}</div>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<span className={styles.errorIcon}>
|
||||
<Popover
|
||||
title="表单校验信息"
|
||||
content={errorList}
|
||||
overlayClassName={styles.errorPopover}
|
||||
trigger="click"
|
||||
getPopupContainer={(trigger: HTMLElement) => {
|
||||
if (trigger && trigger.parentNode) {
|
||||
return trigger.parentNode as HTMLElement;
|
||||
}
|
||||
return trigger;
|
||||
}}
|
||||
>
|
||||
<CloseCircleOutlined />
|
||||
</Popover>
|
||||
{errorCount}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const onFinish = async (values: Record<string, any>) => {
|
||||
setError([]);
|
||||
try {
|
||||
console.log(values);
|
||||
await submitForm(values);
|
||||
message.success('提交成功');
|
||||
} catch {
|
||||
// console.log
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
setError(errorInfo.errorFields);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.createProjectFile} style={{ backgroundColor: '#f8f8f8' }}>
|
||||
<ProForm
|
||||
layout="horizontal"
|
||||
requiredMark
|
||||
submitter={{
|
||||
searchConfig: {
|
||||
submitText: '建档完成',
|
||||
},
|
||||
render: (props, dom) => {
|
||||
if (readOnly) {
|
||||
return (
|
||||
<FooterToolbar className={styles.footerToolbar}>
|
||||
<Button key="cancel" onClick={() => {
|
||||
history.replace('/ProjectFiles');
|
||||
}}>
|
||||
返回
|
||||
</Button>
|
||||
</FooterToolbar>
|
||||
);
|
||||
}
|
||||
const _dom = dom.filter((item: JSX.Element) => item.key !== 'rest').concat([
|
||||
<Button key="stash" type="primary" onClick={() => {
|
||||
console.log('暂存');
|
||||
}}>
|
||||
暂存
|
||||
</Button>
|
||||
]).concat([
|
||||
<Button key="cancel" onClick={() => {
|
||||
history.replace('/ProjectFiles');
|
||||
}}>
|
||||
取消
|
||||
</Button>
|
||||
]);
|
||||
return (
|
||||
<FooterToolbar className={styles.footerToolbar}>
|
||||
{getErrorInfo(error)}
|
||||
{_dom}
|
||||
</FooterToolbar>
|
||||
);
|
||||
},
|
||||
}}
|
||||
initialValues={{
|
||||
budgetType: '1',
|
||||
regionDictType: '1',
|
||||
budgetAmount: 0,
|
||||
currencyCode: 'CNY',
|
||||
bidSection: [{
|
||||
bidSectionIndex: 1,
|
||||
bidSectionName: '',
|
||||
bidSectionNo: '',
|
||||
bidSectionBudget: 0,
|
||||
bidMethod: '',
|
||||
bidSectionCategory: [{
|
||||
type: [],
|
||||
percent: 0,
|
||||
}],
|
||||
}],
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
<PageContainer title="新建项目" style={{ paddingBottom: 50 }}>
|
||||
<Card title="招标项目概况" className={styles.card} bordered={false}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.projectName}
|
||||
name="projectName"
|
||||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||
placeholder="请输入"
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.ProjectBizNo}
|
||||
name="ProjectBizNo"
|
||||
rules={[{ required: true, message: '请输入项目编号' }]}
|
||||
placeholder="请输入"
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.tendereeOrgId}
|
||||
name="tendereeOrgId"
|
||||
rules={[{ required: true, message: '请输入项目归属单位' }]}
|
||||
fieldProps={{
|
||||
disabled: true,
|
||||
}}
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.tendereeId}
|
||||
name="tendereeId"
|
||||
rules={[{ required: true, message: '请输入项目归属部门' }]}
|
||||
fieldProps={{
|
||||
disabled: true,
|
||||
}}
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.appManagerId}
|
||||
name="appManagerId"
|
||||
rules={[{ required: true, message: '请输入项目负责人' }]}
|
||||
placeholder="请输入"
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
label={fieldLabels.appManagerTel}
|
||||
name="appManagerTel"
|
||||
rules={[{ required: true, message: '请输入联系电话' }]}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.fundNature}
|
||||
name="fundNature"
|
||||
rules={[{ required: true, message: '请选择资金性质' }]}
|
||||
options={fundNatureOptions}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.fundsProviderDict}
|
||||
name="fundsProviderDict"
|
||||
rules={[{ required: true, message: '请选择资金来源' }]}
|
||||
options={fundsProviderOptions}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.budgetType}
|
||||
name="budgetType"
|
||||
rules={[{ required: true, message: '请选择预算类型' }]}
|
||||
options={budgetTypeOptions}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormRadio.Group
|
||||
name="regionDictType"
|
||||
label={fieldLabels.regionDictType}
|
||||
rules={[{ required: true, message: '请选择项目所在行政区域类型' }]}
|
||||
options={regionDictTypeOptions}
|
||||
fieldProps={{
|
||||
onChange: (e) => {
|
||||
setRegionDictType(e.target.value);
|
||||
},
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormDependency name={['bidSection']}>
|
||||
{({ bidSection }) => {
|
||||
// 计算所有标段预算之和
|
||||
const total = Array.isArray(bidSection)
|
||||
? bidSection.reduce((sum, item) => sum + (parseFloat(item?.bidSectionBudget) || 0), 0)
|
||||
: 0;
|
||||
return (
|
||||
<ProFormDigit
|
||||
label={fieldLabels.budgetAmount}
|
||||
name="budgetAmount"
|
||||
fieldProps={{
|
||||
precision: 2,
|
||||
value: total,
|
||||
disabled: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
{regionDictType === '1' ? (
|
||||
<ProForm.Item
|
||||
name="regionDict"
|
||||
label={<span>​</span>}
|
||||
required={false}
|
||||
colon={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
if (!value || !value.province || !value.city || !value.district) {
|
||||
return Promise.reject(new Error('请完整选择省市区'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CitySelect
|
||||
placeholder={{
|
||||
province: '请选择省份',
|
||||
city: '请选择城市',
|
||||
district: '请选择区域',
|
||||
}}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</ProForm.Item>
|
||||
) : (
|
||||
<ProFormSelect
|
||||
name="regionDict"
|
||||
label={<span>​</span>}
|
||||
required={false}
|
||||
colon={false}
|
||||
rules={[{ required: true, message: '请选择项目所在行政区域' }]}
|
||||
options={regionOutsideOptions}
|
||||
placeholder="请选择行政区域"
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.currencyCode}
|
||||
name="currencyCode"
|
||||
rules={[{ required: true, message: '请选择币种' }]}
|
||||
options={currencyCodeOptions}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.openTenderForm}
|
||||
name="openTenderForm"
|
||||
rules={[{ required: true, message: '请选择招标类型' }]}
|
||||
valueEnum={openTenderFormEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card title="拟采用的招标方式和组织形式" className={styles.card} bordered={false}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.bidMethodDict}
|
||||
name="bidMethodDict"
|
||||
rules={[{ required: true, message: '请选择采购方式' }]}
|
||||
valueEnum={purchaseTypeEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.reviewMethod}
|
||||
name="reviewMethod"
|
||||
rules={[{ required: true, message: '请选择资审方式' }]}
|
||||
valueEnum={reviewMethodEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.bidOrgDict}
|
||||
name="bidOrgDict"
|
||||
rules={[{ required: true, message: '请选择组织形式' }]}
|
||||
valueEnum={organizationFormEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
label={fieldLabels.tenderAgencyId}
|
||||
name="tenderAgencyId"
|
||||
rules={[{ required: true, message: '请选择招标代理机构' }]}
|
||||
valueEnum={tenderAgencyEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card title="标段（包）信息" className={styles.card} bordered={false}>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.List name="bidSection">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
<Row style={{ marginBottom: 16 }}>
|
||||
<Col span={24}>
|
||||
<Button type="primary" onClick={() => add({ bidSectionIndex: fields.length + 1, bidSectionCategory: [{ type: [], percent: 0 }] })} disabled={readOnly}>
|
||||
新增标段
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
{fields.map(field => (
|
||||
<Fragment key={field.key}>
|
||||
{field.key !== 0 && <Divider />}
|
||||
<Row >
|
||||
<Col span={8}>
|
||||
<ProFormText
|
||||
{...field}
|
||||
label="标段序号"
|
||||
name={[field.name, 'bidSectionIndex']}
|
||||
readonly
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<ProFormText
|
||||
{...field}
|
||||
label="标段名称"
|
||||
name={[field.name, 'bidSectionName']}
|
||||
rules={[{ required: true, message: '请输入标段名称' }]}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col span={8}>
|
||||
<Button danger onClick={() => remove(field.name)} style={{ marginLeft: 16 }} hidden={fields.length === 1} disabled={readOnly}>
|
||||
删除标段
|
||||
</Button>
|
||||
</Col>
|
||||
|
||||
<Col span={8}>
|
||||
<ProFormText
|
||||
{...field}
|
||||
label="标段编号"
|
||||
name={[field.name, 'bidSectionNo']}
|
||||
rules={[{ required: true, message: '请输入标段编号' }]}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8} style={{ position: 'relative' }}>
|
||||
<ProFormDependency name={['currencyCode']}>
|
||||
{({ currencyCode }) => {
|
||||
return (
|
||||
<>
|
||||
<ProFormDigit
|
||||
label="标段预算"
|
||||
name={[field.name, 'bidSectionBudget']}
|
||||
rules={[{ required: true, message: '请输入标段预算' }]}
|
||||
fieldProps={{ precision: 2, style: { width: '80%' } }}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<span style={{ position: 'absolute', right: '6%', top: 5 }}>{currencyCode}</span>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</ProFormDependency>
|
||||
</Col>
|
||||
|
||||
<Col span={8} />
|
||||
|
||||
<Col span={8}>
|
||||
<ProFormSelect
|
||||
label="报价方式"
|
||||
name={[field.name, 'bidMethod']}
|
||||
rules={[{ required: true, message: '请选择报价方式' }]}
|
||||
valueEnum={bidMethodEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<ProFormSelect
|
||||
label="评价方法"
|
||||
name={[field.name, 'evaluationMethod']}
|
||||
rules={[{ required: true, message: '请选择评价方法' }]}
|
||||
valueEnum={evaluationMethodEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<ProFormSelect
|
||||
label="资格审查方法"
|
||||
name={[field.name, 'reviewWay']}
|
||||
rules={[{ required: true, message: '请选择资格审查方法' }]}
|
||||
valueEnum={reviewWayEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<ProFormSelect
|
||||
label="流程类型"
|
||||
name={[field.name, 'process']}
|
||||
rules={[{ required: true, message: '请选择流程类型' }]}
|
||||
valueEnum={processEnum}
|
||||
fieldProps={{
|
||||
disabled: readOnly,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<ProFormDigit
|
||||
label="评标专家人数"
|
||||
name={[field.name, 'reviewExpertCount']}
|
||||
rules={[{ required: true, message: '请输入评标专家人数' }]}
|
||||
fieldProps={{ precision: 0, disabled: readOnly }}
|
||||
min={0}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8} />
|
||||
|
||||
<Col span={24}>
|
||||
<Form.List name={[field.name, 'bidSectionCategory']} >
|
||||
{(subFields, { add: addCategory, remove: removeCategory }) => (
|
||||
<>
|
||||
{subFields.map(subField => (
|
||||
<Fragment key={subField.key}>
|
||||
<Row gutter={8}>
|
||||
<Col span={8}>
|
||||
<Form.Item label="主要标的类别" name={[subField.name, 'type']} rules={[
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
if (!value || !value[0] || !value[1]) {
|
||||
return Promise.reject(new Error('请完整选择主要标的类别'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}>
|
||||
<SubjectFormItem disabled={readOnly} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8} style={{ paddingLeft: 2, position: 'relative' }}>
|
||||
<ProFormDigit
|
||||
label="主要标的类别占百分比"
|
||||
name={[subField.name, 'percent']}
|
||||
rules={[{ required: true, message: '请输入主要标的类别占百分比' }]}
|
||||
fieldProps={{ precision: 2, style: { width: '80%' } }}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<span style={{ position: 'absolute', right: '8%', top: 5 }}>%</span>
|
||||
</Col>
|
||||
<Col span={1} hidden={subFields.length === 1}>
|
||||
<MinusCircleOutlined style={{ fontSize: 16, marginTop: 7, color: 'red' }} onClick={() => removeCategory(subField.name)} disabled={readOnly} />
|
||||
</Col>
|
||||
</Row>
|
||||
</Fragment>
|
||||
))}
|
||||
<Row>
|
||||
<Col span={16}>
|
||||
<Button type="dashed" onClick={() => addCategory()} block icon={<PlusOutlined />} disabled={readOnly}>
|
||||
增加主要标的类别
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Col>
|
||||
</Row>
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</Card>
|
||||
<Card title="备注" className={styles.card} bordered={false}>
|
||||
<Form.Item name="remark" labelCol={{ span: 0 }} wrapperCol={{ span: 24 }}>
|
||||
<Input.TextArea
|
||||
autoSize={{ minRows: 3 }}
|
||||
placeholder="请输入备注"
|
||||
onPressEnter={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
<Card title="附件信息" className={styles.card} bordered={false}>
|
||||
<Form.Item name="attachments" labelCol={{ span: 0 }} wrapperCol={{ span: 24 }} valuePropName="fileList" getValueFromEvent={normFile}>
|
||||
<ProFormUploadButton
|
||||
extra="支持格式：.rar .zip .doc .docx .pdf, 单个文件不超过20M"
|
||||
name="file"
|
||||
title="上传文件"
|
||||
accept='.rar,.zip,.doc,.docx,.pdf'
|
||||
disabled={readOnly}
|
||||
// action={'/api/file/upload'}
|
||||
fieldProps={{
|
||||
beforeUpload: (file) => {
|
||||
const isRarOrZipOrDocOrDocxOrPdf = file.type === 'application/x-rar-compressed' ||
|
||||
file.type === 'application/zip' ||
|
||||
file.type === 'application/msword' ||
|
||||
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||||
file.type === 'application/pdf';
|
||||
|
||||
if (!isRarOrZipOrDocOrDocxOrPdf) {
|
||||
message.error('你只能上传 rar/zip/doc/docx/pdf 文件!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
const isLt20M = file.size / 1024 / 1024 < 20;
|
||||
if (!isLt20M) {
|
||||
message.error('文件大小不能超过 20MB!');
|
||||
return Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
</ProForm>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectFileCreate;
|
||||
Reference in New Issue
Block a user