目录
获取当前用户角色
{
title: '操作',
fixed: 'right',
dataIndex: 'id',
width: 80,
render: (text, record) => {
const { route ,user:{currentUser}} = this.props;
@connect(({ contractRegistrationList, cache,user }) => ({
contractRegistrationList,
cache,
user,
}))
=========================================================================
数据计算自动填入输入框
类型一:主函数传入且有多条数据
MilesstoneForm.js
需要通过主类那边传过来
render调用到方法需要通过次调用
类型二:一条数据且在同一函数内
ProjectForm.js
=========================================================================
页面查询内容为 当前月份,且增加月份查询按钮
①页面显示按钮
效果
最上面引用即可
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
<label>请选择查询月份:</label><MonthPicker placeholder="请选择月份" onChange={this.onMonthChange} />
②传参设计
原
现
componentDidMount() {
/**
* 页面加载时,填充Table初始化数据
*/
const monthdate = moment(new Date()).subtract(0, 'months').startOf('month').format('YYYY-MM');
const { dispatch } = this.props;
dispatch({
type: 'milestone/fetchInit',
payload:monthdate
});
③按钮设计
// 按月份查询工资条数据
onMonthChange = (date, dateString) => {
const { dispatch } = this.props;
if(!!dateString) {
dispatch({
type: 'milestone/fetchInit',
payload: moment(dateString).format('YYYY-MM')
});
}
}
④路径设置
根据步骤③type的milestone.js文件找到fetchinit,然后再根据
跳转到api.js文件
增加参数
/**
* 销售 - 获取项目回款里程碑操作列表
*/
export async function queryMilestoneListAmendList(params) {
return request(`/api/bussiness/sales/milestone/AmendList?gmtCreateAmend=${params}`);
}
=========================================================================
导出excel
① 在开头处添加
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
② 添加按钮功能 (可直接用,换名称即可)
// 导出
handleExcelData = (columns, data) => {
// 构造数据结构
var dealData = {
tableName: '回款里程碑超时修改记录',
sheetName: '回款里程碑超时修改记录',
columns: columns,
excludeCols: ['操作'],
handleCols: ['操作类型','状态'],
rowDatas: data,
};
return dealData;
}
③ 添加页面按钮
<DownloadExcel excelData={this.handleExcelData(this.column(), data.myAmendListOverTime)} />
=========================================================================
弹窗设计
主页面设计
① 在开头处(即import下面)添加这段代码
const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleUpdate, handleModalVisible, addonClose, initData, data, values, fileList, isdisable, Ondelete, handleUploadFile, handleFileChange
, btnOfDelete, btnOfDownload, handleCheckModalVisible, checkForm, formTitle } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
console.info('fieldsValue', fieldsValue);
if (err) return;
form.resetFields();
if (!!formTitle & formTitle.toString() == '新建') {
handleAdd(fieldsValue);
} else if (!!formTitle & formTitle.toString() == '修改') {
handleUpdate(fieldsValue, values);
}
});
};
const parm = {
bizId: !!values && !!values.id ? values.id : null,
};
// const processParam = {
// //业务信息的id
// bizId: !!values && !!values.id ? values.id : null,
// //业务表单的编码
// tableCode: 'credit_management',
// //什么时候显示控件,一般为流程开始后作显示。因每个流程的状态设不一需自己设计
// hidden: !!values && !!values.state ? (values.state != 0 ? false : true) : true
// };
return (
<Drawer
destroyOnClose
title={formTitle}
visible={modalVisible}
onClose={addonClose}
okHandle={okHandle}
width="100%"
onCancel={() => handleModalVisible()}
>
<div>
<MilestoneOverTime form={form} isdisable={isdisable} {...parm} />
</div>
<div>
</div>
<FooterToolbar >
<Button onClick={addonClose} style={{ marginRight: 8 }}>
取消
</Button>
{/* <Button onClick={okHandle} type="primary" hidden={isdisable}>
提交
</Button> */}
</FooterToolbar>
</Drawer>
);
});
② 导入相关引用
import {
G2,
Chart,
Geom,
Axis,
Coord,
Label,
Legend,
View,
Guide,
Shape,
Facet,
Util
} from "bizcharts";import ReactDOM from 'react-dom';
这个是要跳转的页面
②添加注解和state
@Form.create()
state = {
modalVisible: false,
// updateModalVisible: false,
expandForm: false,
selectedRows: [],
formValues: {},
stepFormValues: {},
showFormValues: {},
checkForm: false,
formTitle: "",
};
addonClose = () => {
this.setState({
modalVisible: false,
});
};
③ 添加按钮功能 和 componentDidMount 位置同
handleBtton = () => {
this.handleModalVisible(true, null, false, true, false)
}
handleModalVisible = (flag, record, isdisable, checkForm, fileIsdisable) => {
console.log("aa",flag, record, isdisable, checkForm, fileIsdisable);
const { dispatch, milestone: { data } } = this.props;
const dataList = data && data.milestoneList ? data.milestoneList : null;
let formTitle;
// if (record != null) {
// dispatch({
// type: 'salePlanForm/resetData',
// // payload: {
// // bizId: data,
// // },
// });
this.setState({
// modalVisible: !!flag,
isdisable: false,
formTitle: '回款里程碑超时修改记录',
stepFormValues: {},
});
// }
console.log("新建后");
this.setState({
modalVisible: !!flag,
// stepFormValues: record || {},
// isdisable: !!isdisable,
checkForm: !!checkForm,
fileIsdisable: !!fileIsdisable,
// fileDelete: !!fileDelete,
});
}
④
const {
milestone: { data },
cache,
} = this.props;
const { selectedRows, modalVisible, updatemodalVisible, stepFormValues, showModalVisible, showFormValues, isdisable, checkForm, handleButton, formTitle, checkModalVisible } = this.state;
const { dispatch } = this.props;
const parentMethods = {
handleAdd: this.handleAdd,
handleUpdate: this.handleUpdate,
Ondelete: this.Ondelete,
handleModalVisible: this.handleModalVisible,
handleFileChange: this.handleFileChange,
modalVisible: false,
checkForm: checkForm,
addonClose: this.addonClose,
// initData: initData,
data: data,
formTitle: '',
handleButton: this.handleButton,
addonProClose: this.addonProClose,
checkModalVisible: false,
};
⑤ 添加页面按钮
<Button type="primary" onClick={() => this.handleBtton()} >
修改超时记录
</Button>
<Table
ref='table'
rowKey='id'
columns={this.column()}
scroll={{ x: 1300 }}
dataSource={data.myMilestoneListAmendList}
onRowDoubleClick={this.handleDoubleSelectRows}
>
</Table>
<CreateForm {...parentMethods} modalVisible={modalVisible} values={stepFormValues} isdisable={isdisable} formTitle={formTitle} />
弹窗页面
正常编写即可
=========================================================================
增加货币类型选择
弹窗里面的
①在 return( 上方添加
const currency = !!data ? data.currency : null;
const selectAfter = (
<Col span={6}>
{
form.getFieldDecorator('currency', {
initialValue: currency == null ? '人民币' : currency.toString() == '1' ? '人民币' : currency.toString() == '2' ? '港币' : currency.toString() == '3' ? '美元' : null,
})
(<Select defaultValue="人民币" disabled={isdisable}>
<Option value="1">人民币</Option>
<Option value="2">港币</Option>
<Option value="3">美元</Option>
</Select>)
}
</Col>
);
②在下面添加该方法
(<Input type='number' decimalSeparator={"."} precision={2} disabled={isdisable} min={0} max={MAX_VALUE}
formatter={value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
style={{ width: '100%' }} placeholder="请输入"
addonAfter={selectAfter}
onChange={this.handleconincomeBeforetaxChange}
/>)
列表的,list
if (!!formTitle & formTitle.toString() == '立项登记') {
// 处理货币信息
if(fieldsValue.currency === '人民币'){
let temps = '1';
fieldsValue.currency= temps;
}else if(fieldsValue.currency === '港币'){
let temps = '2';
fieldsValue.currency= temps;
}else if(fieldsValue.currency === '美元'){
let temps = '3';
fieldsValue.currency= temps;
}
// handleAdd(fieldsValue);
}
else if (!!formTitle & formTitle.toString() == '立项修改') {
// 处理货币信息
if(fieldsValue.currency === '人民币'){
let temps = '1';
fieldsValue.currency= temps;
}else if(fieldsValue.currency === '港币'){
let temps = '2';
fieldsValue.currency= temps;
}else if(fieldsValue.currency === '美元'){
let temps = '3';
fieldsValue.currency= temps;
}
}
=========================================================================
填充Form初始化数据(下拉框)---initData
eg效果:
① 在展示页面 添加访问From初始数据的路径(projectFromBusiness是查询中专页面)
② 在展示页面 获取查询得到的数据(projectFromBusiness是查询中专页面)
③在展示页面 将initData传到需要的地方
④在展示页面 上面eg效果添加此代码
(
<Select mode="multiple" disabled={!isdisable} showSearch optionFilterProp="children" placeholder="请选择">
{initData['contractList'] ? (initData['contractList'].map((item) => (
<Option key={item.contractId} value={item.contractId} >{item.contractName}</Option>
))) : undefined}
</Select>
)
注:后端该位置返回的数据处理返回项目id
map.put("purchaseContractIds",projectContractList.stream().map(ProjectContract::getContractId).collect(Collectors.toList()));
前端根据项目id获取名称后展示
⑤ 在projectFromBusiness是查询中专页面 添加跳转
import {
queryProjectFromBusiness,
queryContractFormInitBusiness,
} from '@/services/api';
import { message } from 'antd';
import { debounce } from 'lodash-decorators/debounce';
export default {
namespace: 'projectFromBusiness',
state: {
//初始化数据
initData: {
},
//查询数据
data: {
},
},
effects: {
/**
* 页面加载时,填充Form初始化数据(下拉框)
*/
*fetch1({ payload },{call, put}){
const response = yield call(queryContractFormInitBusiness, payload);
yield put({
type: 'initData',
payload: response,
});
},
/**
* 商务合同
*/
*fetch2({ payload }, { call, put }) {
const response = yield call(queryProjectFromBusiness, payload);
console.log("as",response);
if(response.code == 200){
yield put({
type: 'dataSave',
payload: response.result,
});
if(callback) callback(response);
}
else{
message.error(response.message);
}
},
},
reducers: {
/**
* 页面加载时,填充Form初始化数据(下拉框)
*/
initData(state, action){
return {
...state,
initData: action.payload.result,
};
},
dataSave(state, action){
return{
...state,
data:action.payload,
};
},
},
};
⑥ 在api。js设置
文件名和⑤跳转地址相同,若给别的页面使用 最好弄个新的
下面路径可不变
=========================================================================
问题与解决
填写时输入框内容规则提醒(eg:非空或0-100)
rules: [{pattern:/^(?:0|[1-9][0-9]?|100)$/, required:true, message: '请输入正确的完成进度' }],
})
-------------------------------------------------------------------------------------------------------------------------------
路径问题
层次对上
-------------------------------------------------------------------------------------------------------------------------------
路径引用错误
--------------------------------------------------------------------------------------------------------------------------------
返回内容存在null
通过空数组解决
-------------------------------------------------------------------------------------------------------------------------------
主页面传参给弹窗页面
-------------------------------------------------------------------------------------------------------------------------------
列表内容排序
日期,字符串可以直接排序
当没找到内容 导致没传过去,需要在前端判断若为空赋值空字符串
sorter: (a, b) => (a.gmtCreateNew!=null?a.gmtCreateNew:"").localeCompare(b.gmtCreateNew!=null?b.gmtCreateNew:""),
数字类型不能用排序 得转字符串