目录
① 主页面添加弹窗按钮
控制弹窗的标签需和其他的不一样 不然会开启其他弹窗
关闭弹窗时用的
在代码顶部增加弹窗功能设置
② 弹窗内容设置（新页面）
最上面写要遍历的内容的方法
该名称必须对应上，且路径也得对上
⭐接收后端返回的数据 ，文件名得与上面一致
将后端传过来的值通过该方法遍历展示
代码展示：
ProjectList.js
import React, { PureComponent, Fragment, } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import {
Row,
Col,
Card,
Form,
Input,
Select,
Icon,
Button,
Modal,
message,
Steps,
Radio,
Table,
Drawer,
Switch,
Tooltip,
} from 'antd';
import Highlighter from 'react-highlight-words';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
// eslint-disable-next-line import/no-unresolved
import ProjectFollowList from './ProjectFollowList';
import { AuthorizedOpration , requestAuthMsg, authorityOpCheck } from '@/utils/Authorized';
import styles from './ProjectRegistration.less';
import { dateFormatYMD, getColumnSearchProps, getText } from '../Common/Common';
import ProjectForm from './ProjectForm';
import ProjectPlanViewList from './ProjectPlanViewList';
import ProjectFromPurchase from './ProjectFromPurchase'
import ProjectFromBusiness from './ProjectFromBusiness'
import DownloadExcel from '../../utils/DownloadExcel/DownloadExcel';
import {
MoreActionBtn
} from '@/components/Bctp';
const { TextArea } = Input;
//采购合同弹窗设置
const CreateProjectFromPurchase = Form.create()(props => {
const {
projectPlanVisible1,
handleProjectPlanVisible1,
form,
formTitle,
values,
projectPlanMethods,
} = props;
//debugger
const parm = {
projectId: !!values && !!values.projectId ? values.projectId : null,
};
return (
<Drawer
destroyOnClose
title={formTitle}
visible={projectPlanVisible1}
onClose={() => handleProjectPlanVisible1(null, false)}
width="100%"
>
<ProjectFromPurchase form={form} {...projectPlanMethods} formTitle={formTitle} {...parm}></ProjectFromPurchase>
<FooterToolbar>
<Button onClick={() => handleProjectPlanVisible1(null, false)} style={{ marginRight: 8 }}>
取消
</Button>
</FooterToolbar>
</Drawer>
);
});
//采购商务弹窗设置
const CreateProjectFromBusiness = Form.create()(props => {
const {
projectPlanVisible2,
handleProjectPlanVisible2,
form,
formTitle,
values,
projectPlanMethods,
} = props;
//debugger
const parm = {
projectId: !!values && !!values.projectId ? values.projectId : null,
};
return (
<Drawer
destroyOnClose
title={formTitle}
visible={projectPlanVisible2}
onClose={() => handleProjectPlanVisible2(null, false)}
width="100%"
>
<ProjectFromBusiness form={form} {...projectPlanMethods} formTitle={formTitle} {...parm}></ProjectFromBusiness>
<FooterToolbar>
<Button onClick={() => handleProjectPlanVisible2(null, false)} style={{ marginRight: 8 }}>
取消
</Button>
</FooterToolbar>
</Drawer>
);
});
const CreateForm = Form.create()(props => {
const {
modalVisible,
handleModalVisible,
form,
values,
isdisable,
formTitle,
isWeekyHidden,
followModalVisible,
followOnClose,
} = props;
const parm = {
projectId: !!values && !!values.projectId ? values.projectId : null,
};
// console.log("values",values)
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
const isThirdbuyer = fieldsValue['isThirdbuyer'];
let thirdbuyer = fieldsValue['thirdbuyer'];
let isSalesPurchse = fieldsValue['isSalesPurchse'];
let salesPurchse = fieldsValue['salesPurchse'];
// 判断直投陈本（销售外包采购选择是，金额需大于0）
if(formTitle === '立项登记') {
if(isThirdbuyer.toString() === '是' && thirdbuyer <= 0) {
message.warn("项目外包采购选择是，直投成本（项目外包采购）金额需大于0")
return;
}
if(isSalesPurchse.toString() === '是' && salesPurchse <= 0) {
message.warn("销售采购选择是，直投成本（销售采购）金额需大于0")
return;
}
}
const projectPurchase = fieldsValue.projectPurchaseList;
let temp1 = 0;
for(const key in projectPurchase) {
temp1 += projectPurchase[key].contractfee;
}
let salesPurchases = fieldsValue.salesPurchaseList;
let temp2 = 0;
for(let key in salesPurchases){
temp2 += salesPurchases[key].contractfee;
}
//判断金额是否与直投项目外包金额
if(formTitle === '立项登记' || formTitle === '立项修改') {
if(temp1 != thirdbuyer || temp2 != salesPurchse) {
if(temp1 != thirdbuyer){
message.warn("请检查项目外包合同金额，需与直投成本（项目外包采购）一致")
return;
}else if(temp2 != salesPurchse) {
message.warn("请检查销售采购合同金额，需与直投成本（销售采购）一致")
return;
}
}
}
// 该项目流程完成后的修改，判断是否需要重启流程
if (
(values && values.state && (values.state == '2' || values.state == '3')) &&
(
moment(fieldsValue['planEndTime']).startOf('month').format('YYYY-MM-DD') != values.planEndTime ||
moment(fieldsValue['planStartTime']).startOf('month').format('YYYY-MM-DD') != values.planStartTime ||
fieldsValue['conincomeBeforetax'] != values.conincome_beforetax ||
fieldsValue['projectIncome'] != values.projectIncome ||
fieldsValue['isThirdbuyer'] != values.isThirdbuyer ||
fieldsValue['isSalesPurchse'] != values.isSalesPurchse ||
fieldsValue['thirdbuyer'] != values.thirdbuyer ||
fieldsValue['salesPurchse'] != values.salesPurchse ||
fieldsValue['delivercost'] != values.delivercost ||
fieldsValue['reimbursementCosts'] != values.reimbursement_costs ||
fieldsValue['otherCosts'] != values.other_costs ||
fieldsValue['sharedcostProportion'] != values.sharedcostProportion ||
fieldsValue['saleBusinesslineProportion'] != values.saleBusinesslineProportion ||
fieldsValue['remark'] != values.remark ||
fieldsValue['projectManager'] != values.projectManager
)
)
{
fieldsValue['isRestart'] = '1'
}else {
fieldsValue['isRestart'] = '2'
}
console.log("fieldsValue",fieldsValue)
form.resetFields();
handleModalVisible(null, fieldsValue, values, null);
});
};
return (
<><Drawer
destroyOnClose
title={formTitle}
visible={modalVisible}
onClose={() => handleModalVisible(null, null, null, true)}
width="100%"
>
<ProjectForm form={form} isdisable={isdisable} isWeekyHidden={isWeekyHidden} formTitle={formTitle} {...parm}></ProjectForm>
<FooterToolbar>
<Button onClick={() => handleModalVisible(null, null, null, true)} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={okHandle} hidden={isdisable} type="primary" /*hidden={isdisable}*/>
提交
</Button>
</FooterToolbar>
</Drawer><Drawer
destroyOnClose
// title="跟进信息"
visible={followModalVisible}
onClose={followOnClose}
width="100%"
onCancel={() => handlefollowModalVisible()}
>
<ProjectFollowList {...parm} />
<FooterToolbar>
<Button onClick={followOnClose} type="primary" hidden={isdisable}>
关闭
</Button>
</FooterToolbar>
</Drawer></>
);
});
const CreatePlanViewForm = Form.create()(props => {
const {
projectPlanVisible,
handleProjectPlanVisible,
form,
values,
projectPlanMethods,
} = props;
//debugger
const parm = {
projectId: !!values && !!values.projectId ? values.projectId : null,
};
return (
<Drawer
destroyOnClose
visible={projectPlanVisible}
onClose={() => handleProjectPlanVisible(null, false)}
width="100%"
>
<ProjectPlanViewList form={form} {...projectPlanMethods} {...parm}></ProjectPlanViewList>
<FooterToolbar>
<Button onClick={() => handleProjectPlanVisible(null, false)} style={{ marginRight: 8 }}>
取消
</Button>
</FooterToolbar>
</Drawer>
);
});
@connect(({ projectList, loading, cache, user }) => ({
projectList,
loading: loading.models.projectList, user,
cache,
}))
@Form.create()
class ProjectList extends PureComponent {
state = {
modalVisible: false,
formTitle: "项目立项",
formValues: {},
isdisable: false,
searchText: '',
projectPlanVisible: false,
projectPlanVisible1: false,
projectPlanVisible2: false,
allFlag: false,
tableLoading:false,
followModalVisible: false,
};
//Table列定义
componentDidMount() {
/**
* 页面加载时，填充Form初始化数据（下拉框）
*/
this.setState({ tableloading: true })
const { dispatch, problemId, } = this.props;
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: this.state.allFlag,
},
callback:(res)=>{
console.log(res);
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
dispatch({
type: 'cache/fetchSearch',
payload: ['projectState']
});
dispatch({
type: 'cache/fetchSearch',
payload: ['projectType1']
});
}
//查看全部
selectAll = (checked) => {
this.setState({ tableloading: true })
this.state.allFlag = checked;
const { dispatch } = this.props;
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: checked,
},
callback:(res)=>{
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
};
//项目立项-新建/修改
handleModalVisible = (flag, fields, values, isdisable) => {
// if(!!values&&(values.state=="1"||values.state=="0")){
// message.error('项目审批中，无法修改');
// }
// else if(!!values&&(values.state=="2")){
// message.error('项目已审批通过，无法修改');
// }
// else{
if (!!fields) {
fields.parentProjectId = !!fields.parentProjectId ? fields.parentProjectId : "0";
const { dispatch } = this.props;
dispatch({
type: 'projectForm/ProjectOperating',
payload: fields,
callback: (res) => {
if (res.code === 200) {
this.setState({ tableloading: true })
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: this.state.allFlag,
},
callback:(res)=>{
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
// 提交成功-跳转到采购合同页面(新建项目立项时)
// if(fields.isThirdbuyer ==='是' && Object.keys(values).length === 0 ){
// this.getOtherPage(fields,res.result.projectId);
// }
}
}
});
}
const { route } = this.props;
let auth = requestAuthMsg(route);
let editAuth = authorityOpCheck(auth)(['editOther'])
console.log("editAuth",editAuth)
this.setState({
modalVisible: !!flag,
isdisable: !!isdisable,
formValues: values || {},
formTitle: !!values ? "立项修改" : "立项登记",
isWeekyHidden: editAuth ,
});
// }
};
onFinish = () => {
const { dispatch } = this.props;
dispatch({
type: 'projectForm/stopProject',
payload: {message:this.state.message,projectId:this.state.formValues.projectId},
callback: (res) => {
if (res.code === 200) {
this.setState({ tableloading: true ,stopVisible:false})
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: this.state.allFlag,
},
callback:(res)=>{
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
}
},
});
};
getValue = (value, option) => {
console.log(value)
this.setState({
message: value.target.value,
});
};
// 跳转-采购合同页面-新建
getOtherPage = (fields,projectId) => {
if(fields.isThirdbuyer === '是'){
router.push({
pathname:'/sales-platform/contract_manage',
query:{
isregistration: 'yes',
},
state:{
projectId: projectId,
caigouAmount:fields.thirdbuyer,
}
});
return;
}
}
// 项目立项-查看
handleExamine = (flag, fields, values, isdisable) => {
// debugger
this.setState({
modalVisible: !!flag,
formValues: values || {},
isdisable: !!isdisable,
formTitle: "查看项目",
});
};
// 项目立项-查看采购合同
handleExamine1 = (flag, fields, values, isdisable) => {
// debugger
this.setState({
projectPlanVisible1 :!!flag,
// modalVisible: !!flag,
formValues: values || {},
isdisable: !!isdisable,
formTitle: "查看采购合同",
});
};
// 项目立项-查看商务合同
handleExamine2 = (flag, fields, values, isdisable) => {
// debugger
this.setState({
projectPlanVisible2 :!!flag,
// modalVisible: !!flag,
formValues: values || {},
isdisable: !!isdisable,
formTitle: "查看商务合同",
});
};
// 项目立项-删除
handleDelete = (values) => {
// if(!!values&&(values.state=="1"||values.state=="0")){
// message.error('项目审批中，无法删除');
// }
// else if(!!values&&(values.state=="2")){
// message.error('项目已审批通过，无法删除');
// }
// else{
const { dispatch } = this.props;
dispatch({
type: 'projectForm/deleteProject',
payload: 'projectId=' + values.projectId,
callback: (res) => {
if (res.code === 200) {
this.setState({ tableloading: true })
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: this.state.allFlag,
},
callback:(res)=>{
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
}
},
});
// }
};
/**
*
*/
handleProjectPlan = (record) => {
window.location.href = "/project/project-plan"
localStorage.setItem('projectName', record.projectName);
localStorage.setItem('projectId', record.projectId);
};
/**
* 表头搜索
*/
getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
ref={node => {
this.searchInput = node;
}}
placeholder={`Search ${dataIndex}`}
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
style={{ width: 188, marginBottom: 8, display: 'block' }}
/>
<Button
type="primary"
onClick={() => this.handleSearch(selectedKeys, confirm)}
icon="search"
size="small"
style={{ width: 90, marginRight: 8 }}
>
Search
</Button>
<Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
Reset
</Button>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
searchWords={[this.state.searchText]}
autoEscape
textToHighlight={'' + text}
/>
),
});
handleSearch = (selectedKeys, confirm) => {
confirm();
this.setState({ searchText: selectedKeys[0] });
};
handleReset = clearFilters => {
clearFilters();
this.setState({ searchText: '' });
};
// 单击一行
handleSelectRows = rows => {
this.setState({
selectedRows: rows,
});
};
// 双击一行触发事件
handleDoubleSelectRows = rows => {
this.handleExamine(true, null, rows, true);
};
// 查看计划-弹窗
handleProjectPlanVisible = (flag, record) => {
this.setState({
projectPlanVisible: !!flag,
formValues: record,
});
};
// 查看计划-弹窗
handleProjectPlanVisible1 = (flag, record) => {
this.setState({
projectPlanVisible1: !!flag,
formValues: record,
});
};
// 查看计划-弹窗
handleProjectPlanVisible2 = (flag, record) => {
this.setState({
projectPlanVisible2: !!flag,
formValues: record,
});
};
handleModalEdit = (record) => {
this.handleModalVisible(true, null, record, false);
}
handleModalView = (record) => {
this.handleExamine(true, null, record, true);
}
handleModaPurchaselView = (record) => {
this.handleExamine1(true, null, record, true);
}
handleModalBusinessView = (record) => {
this.handleExamine2(true, null, record, true);
}
handleModalStop = (record) => {
this.setState({
stopVisible:true,
formValues:record
})
}
handleModalStopCancel = () => {
this.setState({
stopVisible:false
})
}
roleView = (arr) => {
let bb = false
arr.map(item=>{
if (item=='项目管理员') {
bb = true
}
})
// console.log("bb",bb)
return bb
}
// 导出
handleExcelData = (columns, data) => {
data.forEach(item=>{
item.planStartTime = moment(item.planStartTime).format(dateFormatYMD);
item.planEndTime = moment(item.planEndTime).format(dateFormatYMD);
})
// 构造数据结构
var dealData = {
tableName: '项目基本信息',
sheetName: '项目基本信息',
columns,
excludeCols: ['操作'],
handleCols: ['状态','项目类型'],
rowDatas: data,
};
return dealData;
}
//信息跟进
handlefollowModalVisible = (flag, record, isdisable) => {
this.setState({
followModalVisible: !!flag,
formValues: record || {},
isdisable: !!isdisable,
});
};
followOnClose = () => {
this.refreshPage();
this.setState({
followModalVisible: false,
});
const { dispatch } = this.props;
dispatch({
type: 'projectFollowList/resetData',
});
};
refreshPage = () => {
const { dispatch } = this.props;
const { allFlag } = this.state;
this.setState({
formValues: {},
});
dispatch({
type: 'projectList/fetchInit',
payload: {
flag: this.state.allFlag,
},
callback:(res)=>{
console.log(res);
if(res.code=='200'){
this.setState({ tableloading: false })
}else{
this.setState({ tableloading: false })
}
}
});
}
listColumns = () => {
return [
{
title: '项目名称',
dataIndex: 'projectName',
sorter: true,
width: 120,
className: styles.resultColumns,
sorter: (a, b) => a.projectName.localeCompare(b.projectName),
...this.getColumnSearchProps('projectName'),
render:
(text, record) => (
<Tooltip title={record.projectName} trigger="click" placement="bottom">
<div className={styles.resultColumnsDiv}>{record.projectName}</div>
</Tooltip>
),
},
{
title: '负责单位',
dataIndex: 'company',
width: 120,
sorter: true,
sorter: (a, b) => a.company.localeCompare(b.company),
...this.getColumnSearchProps('company'),
},
{
title: '计划启动时间',
width: 150,
dataIndex: 'planStartTime',
sorter: true,
sorter: (a, b) => a.planStartTime.localeCompare(b.planStartTime),
...this.getColumnSearchProps('planStartTime'),
render: val => <span>{moment(val).format(dateFormatYMD)}</span>
},
{
title: '计划完成时间',
width: 150,
dataIndex: 'planEndTime',
sorter: true,
sorter: (a, b) => a.planEndTime.localeCompare(b.planEndTime),
...this.getColumnSearchProps('planEndTime'),
render: val => <span>{moment(val).format(dateFormatYMD)}</span>
},
{
title: '创建人',
dataIndex: 'op_create',
width: 120,
sorter: true,
sorter: (a, b) => a.op_create.localeCompare(b.op_create),
...this.getColumnSearchProps('op_create'),
},
{
title: '状态',
width: 110,
dataIndex: 'state',
sorter: true,
sorter: (a, b) => a.state.localeCompare(b.state),
filters:this.props.cache.data['projectState'],
onFilter: (value, record) => record.state.indexOf(value) === 0,
render: value => <span>{getText(this.props.cache.data['projectState'], value)}</span>
},
{
title: '项目阶段',
width: 120,
dataIndex: 'projectStage',
sorter: true,
sorter: (a, b) => a.projectStage.localeCompare(b.projectStage),
...this.getColumnSearchProps('projectStage'),
},
{
title: '项目类型',
width: 120,
dataIndex: 'project_type',
sorter: true,
sorter: (a, b) => a.project_type.localeCompare(b.project_type),
// ...this.getColumnSearchProps('project_type'),
filters:this.props.cache.data['projectType1'],
onFilter: (value, record) => record.project_type.indexOf(value) === 0,
render: value => <span>{getText(this.props.cache.data['projectType1'], value)}</span>
},
{
title: '项目说明',
dataIndex: 'remark',
sorter: true,
width: 120,
className: styles.resultColumns,
sorter: (a, b) => a.remark.localeCompare(b.remark),
...this.getColumnSearchProps('remark'),
render:
(text, record) => (
<Tooltip title={record.remark} trigger="click" placement="bottom">
<div className={styles.resultColumnsDiv}>{record.remark}</div>
</Tooltip>
),
},
{
title: '项目经理',
width: 120,
dataIndex: 'projectManager',
sorter: true,
sorter: (a, b) => a.projectManager.localeCompare(b.projectManager),
...this.getColumnSearchProps('projectManager'),
},
{
title: '销售',
width: 120,
dataIndex: 'salesPerson',
sorter: true,
sorter: (a, b) => a.salesPerson.localeCompare(b.salesPerson),
...this.getColumnSearchProps('salesPerson'),
},
{
title: '审批人',
width: 120,
dataIndex: 'candidate',
sorter: true,
sorter: (a, b) => a.candidate.localeCompare(b.candidate),
...this.getColumnSearchProps('candidate'),
},
{
title: '专案分类',
width: 120,
dataIndex: 'classification',
sorter: true,
sorter: (a, b) => a.classification.localeCompare(b.classification),
...this.getColumnSearchProps('classification'),
},
{
title: '创建时间',
dataIndex: 'gmt_create',
width: 140,
sorter: true,
sorter: (a, b) => a.gmt_create.localeCompare(b.gmt_create),
...this.getColumnSearchProps('gmt_create'),
defaultSortOrder: 'descend',
render: val => <span>{moment(val).format(dateFormatYMD)}</span>
},
{
title: '跟进',
dataIndex: 'title',
// sorter: 'true',
width: 150,
...getColumnSearchProps(this, 'title'),
render: (text, record) => (
<Fragment>
<div className={styles.resultColumnsDiv}><a onClick={() => this.handlefollowModalVisible(true, record, false)}>
{record.title == "" || record.title == null ? '添加跟进信息' : record.title}
</a>
</div>
</Fragment>
),
},
{
title: '跟进日期',
width: 150,
dataIndex: 'followTime',
sorter: true,
sorter: (a, b) => a.followTime?a.followTime:'1970-01-01'.localeCompare(b.followTime?b.followTime:'1970-01-01'),
...this.getColumnSearchProps('followTime'),
render: val => <span>{val?moment(val).format(dateFormatYMD):null}</span>
},
{
title: '合同名称',
width: 120,
dataIndex: 'contractName',
sorter: true,
sorter: (a, b) => a.contractName.localeCompare(b.contractName),
...this.getColumnSearchProps('contractName'),
render: (text, record) => (
<Tooltip title={record.contractName} trigger="click" placement="bottom">
<div className={styles.resultColumnsDiv}>{record.contractName}</div>
</Tooltip>
),
},
{
title: '内部项目单价(元/小时)',
width:1,
dataIndex: 'projectinhour',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.projectinhour.localeCompare(b.projectinhour),
...this.getColumnSearchProps('projectinhour'),
},
{
title: '合同税前收入',
width:1,
dataIndex: 'conincome_beforetax',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.conincome_beforetax.localeCompare(b.conincome_beforetax),
...this.getColumnSearchProps('conincome_beforetax'),
},
{
title: '合同税后收入',
width:1,
dataIndex: 'projectIncome',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.projectIncome.localeCompare(b.projectIncome),
...this.getColumnSearchProps('projectIncome'),
},
{
title: '直投成本(项目外包采购)',
width:1,
dataIndex: 'thirdbuyer',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.thirdbuyer.localeCompare(b.thirdbuyer),
...this.getColumnSearchProps('thirdbuyer'),
},
{
title: '直投成本(销售采购)',
width:1,
dataIndex: 'salesPurchse',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.salesPurchse.localeCompare(b.salesPurchse),
...this.getColumnSearchProps('salesPurchse'),
},
{
title: '预计项目人员成本',
width:1,
dataIndex: 'delivercost',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.delivercost.localeCompare(b.delivercost),
...this.getColumnSearchProps('delivercost'),
},
{
title: '可控费用',
width:1,
dataIndex: 'reimbursement_costs',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.reimbursement_costs.localeCompare(b.reimbursement_costs),
...this.getColumnSearchProps('reimbursement_costs'),
},
{
title: '其他成本',
width:1,
dataIndex: 'other_costs',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.other_costs.localeCompare(b.other_costs),
...this.getColumnSearchProps('other_costs'),
},
{
title: '公司运营预提留',
width:1,
dataIndex: 'sharedcost',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.sharedcost.localeCompare(b.sharedcost),
...this.getColumnSearchProps('sharedcost'),
},
{
title: '销售预提留',
width:1,
dataIndex: 'sale_businessline',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.sale_businessline.localeCompare(b.sale_businessline),
...this.getColumnSearchProps('sale_businessline'),
},
{
title: '项目预算净利润',
width:1,
dataIndex: 'planIncomeProfit',
className: styles.notshow,
sorter: true,
sorter: (a, b) => a.planIncomeProfit.localeCompare(b.planIncomeProfit),
...this.getColumnSearchProps('planIncomeProfit'),
},
{
title: '是否需要写周报',
width:1,
dataIndex: 'isWeekly',
className: styles.notshow,
// sorter: true,
// sorter: (a, b) => a.planIncomeProfit.localeCompare(b.planIncomeProfit),
...this.getColumnSearchProps('isWeekly'),
},
// {
// title:'相关合同',//
// dataIndex:'contract',
// render:(text,record,index) => (
// <a>{"合同"}</a>
// ),
// },
// {
// title: '操作',
// width: '7%',
// // dataIndex:'state',
// render: (text, record) => (
// <Fragment>
// <a onClick={() => this.handleExamine(true, null, record, true)}>查看</a>
// {record.state == 3 ? <a onClick={() => this.handleModalVisible(true, null, record, false)}>修改 </a> : null}
// {record.state == 3 ? <Popconfirm title="确认删除吗？" okText="Yes" cancelText="No" onConfirm={() => this.handleDelete(record)}>
// <a>删除</a>
// </Popconfirm> : null}
// </Fragment>
// ),
// },
{
title: '操作',
width: 80,
fixed: 'right',
render: (text, record) => {
const { route,user: { currentUser }, } = this.props;
let auth = requestAuthMsg(route);
let viewAuth = authorityOpCheck(auth)(['view']);
let editAuth = authorityOpCheck(auth)(['edit']);
let delAuth = authorityOpCheck(auth)(['delete']);
// 根据条件编写操作按钮组参数
const btnGroup = [
{
name: '查看',
// visible: true,
visible: viewAuth,
operate: this.handleModalView
},
{
name: '查看商务合同',
// visible: true,
visible: viewAuth,
operate: this.handleModalBusinessView
},
{
name: '查看采购合同',
// visible: true,
visible: viewAuth,
operate: this.handleModaPurchaselView
},
{
name: '修改',
visible: record.state == 1 || record.projectStage === '终止' ? false :currentUser.name == record.op_create||currentUser.name == record.projectManager||currentUser.name == record.salesPerson || editAuth || this.roleView(currentUser.roleNames) ,
// visible: true,
operate: this.handleModalEdit
},
{
name: '删除',
confirm: true,
// visible: record.state == 3 ? delAuth : false,
visible: record.state == 1 ? false :(currentUser.name == record.projectManager && delAuth) || this.roleView(currentUser.roleNames) ,
// visible: delAuth,
operate: this.handleDelete
},
{
name: '任务',
visible: record.projectStage == "结项" ? false : true,
operate: this.handleProjectPlan
},
{
name: '终止',
visible: record.state == 1 || record.projectStage === '终止' ? false :(currentUser.name == record.op_create && editAuth) || this.roleView(currentUser.roleNames) ,
// visible: true,
operate: this.handleModalStop
},
];
return (
<Fragment>
<MoreActionBtn record={record}
btnGroup={btnGroup}
/>
</Fragment>
)
}
}
];
}
render() {
const {
modalVisible,
formTitle,
formValues,
isdisable,
projectPlanVisible,
projectPlanVisible1,
projectPlanVisible2,
isWeekyHidden,
tableloading,
followModalVisible,
} = this.state;
const {
projectList: { data },
} = this.props;
const columns = this.listColumns();
const parentMethods = {
handleModalVisible: this.handleModalVisible,
followModalVisible,
followOnClose: this.followOnClose,
};
const projectPlanMethods = {
getColumnSearchProps: this.getColumnSearchProps,
handleSearch: this.handleSearch,
handleReset: this.handleReset,
handleDoubleSelectRows: this.handleDoubleSelectRows,
handleProjectPlanVisible: this.handleProjectPlanVisible,
handleProjectPlanVisible1: this.handleProjectPlanVisible1,
handleProjectPlanVisible2: this.handleProjectPlanVisible2,
};
const dataList = data && data.ProjectList ? data.ProjectList : [];
return (
<PageHeaderWrapper title="项目立项">
<div>
<Card>
<div className={styles.clue}>
<div className={styles.clueOperator}>
<AuthorizedOpration authRoute={this.props.route} action={'add'} noMatch={null}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true, null, null, false)}>
新建
</Button>
全部
<Switch
checkedChildren={<Icon type="check" />}
unCheckedChildren={<Icon type="close" />}
defaultChecked={false} onChange={this.selectAll}
/>
<DownloadExcel excelData={this.handleExcelData(columns, dataList)} />
</AuthorizedOpration>
</div>
<Table
loading={tableloading}
dataSource={data.ProjectList}
locale={
tableloading
? {
emptyText: () => (
<div style={{ lineHeight: '150px' }}>
<div style={{ marginTop: '20px', color: "#000" }}>数据正在加载中</div>
</div>
),
}
: {}
}
columns={this.listColumns()}
scroll={{ x: 2600 }}
onSelectRow={this.handleSelectRows}
onRowDoubleClick={this.handleDoubleSelectRows}
/>
</div>
</Card>
</div>
<Modal
// style={{ overflow: scroll, height: '498px' }}
title="立项终止"
visible={this.state.stopVisible}
onCancel={this.handleModalStopCancel}
onOk={this.onFinish}
okText="确认"
cancelText="取消"
destroyOnClose
>
<div>
<Form>
<Card className={styles.card} bordered={false}>
<Row>
<Col>
<Form.Item label="终止理由" name='message' rules={[{ required: true, message: '请输入终止理由' }]}>
<TextArea placeholder="请输入终止理由" onChange={this.getValue} />
</Form.Item>
</Col>
</Row>
</Card>
</Form>
</div>
</Modal>
<CreateForm
modalVisible={modalVisible}
formTitle={formTitle}
{...parentMethods}
values={formValues}
isdisable={isdisable}
isWeekyHidden={isWeekyHidden}
/>
<CreatePlanViewForm
projectPlanVisible={projectPlanVisible}
values={formValues}
handleProjectPlanVisible={this.handleProjectPlanVisible}
styles={styles}
projectPlanMethods={projectPlanMethods}
/>
<CreateProjectFromPurchase
projectPlanVisible1={projectPlanVisible1}
formTitle={formTitle}
modalVisible={modalVisible}
values={formValues}
handleProjectPlanVisible1={this.handleProjectPlanVisible1}
styles={styles}
projectPlanMethods={projectPlanMethods}
/>
<CreateProjectFromBusiness
projectPlanVisible2={projectPlanVisible2}
formTitle={formTitle}
modalVisible={modalVisible}
values={formValues}
handleProjectPlanVisible2={this.handleProjectPlanVisible2}
styles={styles}
projectPlanMethods={projectPlanMethods}
/>
</PageHeaderWrapper>
);
}
}
export default ProjectList;
ProjectFromPurchase.js
import React, { PureComponent, Fragment } from 'react';
import {
Card,
Button,
Form,
Icon,
Col,
Row,
DatePicker,
TimePicker,
Input,
Select,
Radio,
Popover,
Upload,
Modal,
List,
Table,
InputNumber,
message,
} from 'antd';
const { Search } = Input;
import { connect } from 'dva';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import UploadFileList from '../File/UploadFileList';
import UploadFile from '../File/UploadFile';
import { dateFormatym, dateFormatYMD, dateFormatYMDHMS, getColumnSearchProps, getText, MAX_VALUE } from '../Common/Common';
import { any, number } from 'prop-types';
import user from '@/models/user';
// import milestone from './models/milestone';
import login from '@/models/login';
import { wrapConstructor } from 'lodash-decorators/utils';
import form from '@/locales/en-US/form';
import styles from './ContractRegistration.less';
const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker, MonthPicker } = DatePicker;
const { TextArea } = Input;
const PurchaseItems =({data, index, isdisable, states, leaders, form, processIsdisable, style,isAuth,handleconincomeBeforetaxChange,handleconincomeBeforetaxChangeA }) => {
// debugger
const PurchaseList = (name) => ('PurchaseList' + '[' + index + ']' + '[' + name + ']');
let initMilestoneId = 0;
//Col样式两列一行
const formItemLayout = {
labelCol: {
md: 8,
sm: 7,
},
wrapperCol: {
md: 16,
sm: 17,
},
};
const formItemLayout2 = {
labelCol: {
md: 4,
sm: 7,
},
wrapperCol: {
md: 20,
sm: 17,
},
};
const rowLayout = {
gutter: {
md: 8,
lg: 24,
xl: 48
}
};
const colLayout = {
md: 12,
sm: 24,
};
const colLayout2 = {
span: 24
};
/**
*新增 银行账户表单样式
*/
const formItemLayout3 = {
labelCol: {
md: 5,
sm: 5,
},
wrapperCol: {
md: 15,
sm: 15,
}
}
return (
<div>
{/* <Form hideRequiredMark layout="horizontal" autoComplete="off"> */}
<Form layout="horizontal" autoComplete="off">
<Card className={styles.card} bordered={false}>
<Row {...rowLayout}>
<Col {...colLayout2}>
<Form.Item {...formItemLayout2} label="">
{
form.getFieldDecorator(PurchaseList('contractId'), {
initialValue: !!data && !!data.contractId ? data.contractId : null,
})(<Input hidden />)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout2}>
<Form.Item {...formItemLayout2} label="项目名称">
{
form.getFieldDecorator(PurchaseList('projectid'), {
initialValue: !!data ? data.projectName : null,
// initialValue:!!associateprojectId ? associateprojectId: (!!data ? data.projectid : null),
rules: [{ required: true, message: '请选择项目所属项目' }],
})
(<Input disabled={!isdisable} placeholder="请输入" />)
}
</Form.Item>
</Col>
</Row>
{/* 新增采购合同类型 */}
<Row {...rowLayout}>
<Col {...colLayout2}>
<Form.Item {...formItemLayout2} label="采购合同类型：">
{
form.getFieldDecorator(PurchaseList('contractType'), {
initialValue: !!data ? data.contractType : null,
rules: [{ required: true, message: '请选择采购合同类型（必选项）' }],
})
(<Select disabled={!isdisable} showSearch placeholder="请选择（必选项）" style={{ width: '100%' }}>
<Option key='1'>项目采购合同</Option>
<Option key='2'>销售采购合同</Option>
</Select>)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合同名称" >
{
form.getFieldDecorator(PurchaseList('contractname'), {
initialValue: !!data ? data.contractname : null,
rules: [{ required: true, message: '请输入合同名称（必填项）' }],
})
(<Input
// disabled={data && data.contractname == null ? processIsdisable : true}
disabled={!isdisable}
placeholder="请输入合同名称（必填项）" />)
}
</Form.Item>
</Col>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合同编号">
{
form.getFieldDecorator(PurchaseList('contractNo'), {
initialValue: !!data ? data.contractNo : null,
rules: [{ required: false, message: '请输入合同编号' }],
})
(<Input
// disabled={data && data.contractNo == null ? processIsdisable : true}
disabled={!isdisable}
placeholder="请输入合同编号" />)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="签订日期">
{
form.getFieldDecorator(PurchaseList('signeddate'), {
initialValue: !!data ? moment(data.signStartDate) : null,
rules: [{ required: false, message: '请选择签订合同日期' }],
})
(<DatePicker
// disabled={data && data.signeddate == null ? processIsdisable : true}
disabled={!isdisable}
style={{ width: "100%" }} placeholder="请选择签订合同日期" />)
}
</Form.Item>
</Col>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合同期限">
{
form.getFieldDecorator(PurchaseList('deadline'), {
initialValue: !!data && !!data.deadline ? moment(data.deadline) : null,
rules: [{ required: false, message: '请选择合同期限' }],
})
(<DatePicker disabled={!isdisable} style={{ width: "100%" }} placeholder="请选择合同期限" />)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合作方名称">
{
form.getFieldDecorator(PurchaseList('partnername'), {
initialValue: !!data ? data.partnername : null,
// initialValue:{key:null,label:!!data ? data.partnername:null},
rules: [{ required: false, message: '请输入合作方名称' }],
})
(<Input disabled={!isdisable} placeholder="请输入" />)
// (<Input disabled={data.partnername == null ? processIsdisable : true} placeholder="请输入合作方名称" />)
// 新增 输入合同名称显示下拉框展示历史银行信息
// ((<Select disabled={isdisable} allowClear showSearch placeholder="请输入合作方名称" style={{ width: '100%' }} onSearch={this.handleSearch} onChange={this.handlePartnernameChange} onSelect={this.handleSelect} >
// {bankNameInfo.map((item) => <Option key={item.id} value={item.id}>{item.bankName} - {item.bankAccount}</Option>)}</Select>))
}
</Form.Item>
</Col>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合同金额" >
{
form.getFieldDecorator(PurchaseList('contractfee'), {
rules: [{ required: true, message: '请输入数字（必填项）' }],
initialValue: !!data ? data.contractfee : null,
// initialValue: !!purchaseAmount ? purchaseAmount : (!!data ? data.contractfee : null)
})
// (<InputNumber disabled={isdisable} min={1} max={10} defaultValue={3} />)
(<InputNumber disabled={!isdisable} placeholder="请输入合同金额必填项" style={{ width: "100%" }} />)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合作方联系人">
{
form.getFieldDecorator(PurchaseList('partnerman'), {
initialValue: !!data ? data.partnerman : null,
rules: [{ required: false, message: '请输入合作方联系人' }],
})
(<Input disabled={!isdisable} placeholder="请输入合作方联系人" />)
}
</Form.Item>
</Col>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="合作方联系方式">
{
form.getFieldDecorator(PurchaseList('partnercontact'), {
initialValue: !!data ? data.partnercontact : null,
rules: [
{
required: false,
message: '请输入合作方联系方式'
},
// { validator: this.checkPhoneNub }//自定义检验
],
})
(<Input disabled={!isdisable} placeholder="请输入合作方联系方式" />)
}
</Form.Item>
</Col>
</Row>
<Row {...rowLayout}>
<Col {...colLayout}>
<Form.Item {...formItemLayout} label="是否签订合同：">
{
form.getFieldDecorator(PurchaseList('isdone'), {
initialValue: !!data ? data.isdone : null,
rules: [{ required: true, message: '请选择是否签订合同（必选项）' }],
})
(<Select disabled={!isdisable} showSearch placeholder="请选择（必选项）" style={{ width: '100%' }}>
<Option key='0'>是</Option>
<Option key='1'>否</Option>
</Select>)
}
</Form.Item>
</Col>
</Row>
</Card>
</Form>
</div>
);
}
@connect(({ projectFromPurchase, loading, cache, user, }) => ({
projectFromPurchase,
loading: loading.models.projectFromPurchase,
user,
cache,
}))
@Form.create()
class ProjectFromPurchase extends PureComponent {
state = {
width: '100%',
dataSource: [],
milestoneDataSource: [],
values: [],
indexGenerator: 0,
dataSourceOnSearch:[],
// isAuth:true,
indextemporal:0,
};
currentIndex = () => {
return this.state.indexGenerator++;
}
componentDidMount() {
window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
// console.log("isDone",isDone);;
// const { dispatch, projectId } = this.props;
const { bizId, dataSource, contractId, milestoneDataSource, values,dispatch, projectId } = this.props;
console.log("projec",projectId);
// dispatch({
// type: 'cache/fetchSearch',
// payload: ['projectStage', 'isDone'],
// });
dispatch({
type: 'projectFromPurchase/fetch2',
payload:projectId,
// callback: (res) => {
// if (res.code === 200) {
// let temp = res.result.ProjectFromBusiness;
// this.setState({
// dataSource: temp,
// });
// }
// },
});
}
componentWillUnmount() {
window.removeEventListener('resize', this.resizeFooterToolbar);
}
resizeFooterToolbar = () => {
requestAnimationFrame(() => {
const sider = document.querySelectorAll('.ant-layout-sider')[0];
if (sider) {
const width = `calc(100% - ${sider.style.width})`;
const { width: stateWidth } = this.state;
if (stateWidth !== width) {
this.setState({ width });
}
}
});
};
render() {
const { form, cache,
projectFromPurchase:{data},
} = this.props;
console.log("DATA",dataSource);
console.log("DATAaa",dataSourceOnSearch);
console.log("DATAbb",data.ProjectFromPurchase);
console.log("asdasd",data);
console.log("pro",this.props);
const processIsdisable = this.props.processIsdisable || false;
const { width, dataSource, values,dataSourceOnSearch,isAuth} = this.state;
const isdisable = this.props.isdisable || false;
// const userList = !!users ? users : null;
//console.log("dataSource",dataSource)
//console.log("dataSourceOnSearch",dataSourceOnSearch)
// let index = 0;
// const states = cache.data['milestoneStatus'];
// const leaders = !!users.userList ? users.userList : null;
let showTitle = true;
const firstItem = dataSource && dataSource.length > 1 ? dataSource[1] : null;
const thisValues = values ? values : null;
return (
<div>
<Form hideRequiredMark>
<List
dataSource={data.ProjectFromPurchase && data.ProjectFromPurchase.length>0?data.ProjectFromPurchase:[]}
// dataSource={dataSourceOnSearch}
renderItem={item => (
<List.Item key={item.id}>
<List.Item.Meta
title={
<PurchaseItems
data={item}
index={item.index}
isdisable={isdisable}
// states={states}
// leaders={leaders}
form={form}
processIsdisable={processIsdisable}
// isAuth={isAuth}
/>
}
/>
</List.Item>
)}
/>
</Form>
</div>
);
}
}
export default ProjectFromPurchase;
projectFromPurchase.js
import {
queryProjectFromPurchase,
} from '@/services/api';
import { message } from 'antd';
import { debounce } from 'lodash-decorators/debounce';
export default {
namespace: 'projectFromPurchase',
state: {
//初始化数据
initData: {
},
//查询数据
data: {
},
},
effects: {
/**
* 商务合同
*/
*fetch2({ payload }, { call, put }) {
const response = yield call(queryProjectFromPurchase, 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: {
dataSave(state, action){
return{
...state,
data:action.payload,
};
},
/**
* 清空Form数据
*/
},
};
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
