|
@@ -0,0 +1,529 @@
|
|
|
+import React from 'react';
|
|
|
+import { Icon, Form, Button, Input, Select, Spin, Table, DatePicker, message, Modal, Checkbox, Upload } from 'antd';
|
|
|
+import { cognizanceStateList } from '../../dataDic.js';
|
|
|
+import { getCognizanceState, beforeUpload, getBase64, beforeUploadFile, downloadFile } from '../../tools.js';
|
|
|
+import ajax from 'jquery/src/ajax/xhr.js';
|
|
|
+import $ from 'jquery/src/ajax';
|
|
|
+
|
|
|
+const ApplyChangeFrom = Form.create()(React.createClass({
|
|
|
+ loadData() {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admintechproject/techProjectDetial",
|
|
|
+ data: {
|
|
|
+ pid: this.props.data.pid
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+
|
|
|
+ if (data.error.length || !data.data) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ this.state.data = data.data;
|
|
|
+
|
|
|
+ if (data.data.projectMode == 1) {
|
|
|
+ this.state.projectMode = data.data.projectMode;
|
|
|
+ this.setState({projectModeState:true});
|
|
|
+ }
|
|
|
+ if (data.data.subsidy == 1) {
|
|
|
+ this.state.subsidy = data.data.subsidy;
|
|
|
+ this.setState({subsidyState:true});
|
|
|
+ }
|
|
|
+ this.getDepartmentList();
|
|
|
+ this.getContactsList();
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ getStateData() {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/techproject/techProjectLog",
|
|
|
+ data: {
|
|
|
+ pid: this.props.data.pid
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ if (data.error.length || !data.data) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ var myDate = new Date();
|
|
|
+ this.state.stateTable = [];
|
|
|
+ for (let i = 0; i < data.data.length; i++) {
|
|
|
+ this.state.stateTable.push({
|
|
|
+ key: i,
|
|
|
+ state: data.data[i].state,
|
|
|
+ recordTime: myDate.toLocaleDateString(data.data[i].recordTime),
|
|
|
+ principal: data.data[i].principal,
|
|
|
+ comment: data.data[i].comment
|
|
|
+ });
|
|
|
+ };
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ getDepartmentList () {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/user/getDepartment",
|
|
|
+ success: function (data) {
|
|
|
+ if (data.error.length || !data.data) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ for (var item in data.data) {
|
|
|
+ this.state.departmentOption.push(
|
|
|
+ <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
|
|
|
+ )
|
|
|
+ };
|
|
|
+ this.setState({department:data.data[this.state.data.department]});
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ },
|
|
|
+ getContactsList() {
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admin/getContacts",
|
|
|
+ data: {
|
|
|
+ uid: this.props.data.uid,
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ let theOption = [];
|
|
|
+ if (data.error.length || !data.data) {
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ for (let item in data.data) {
|
|
|
+ let theData = data.data[item];
|
|
|
+ theOption.push(
|
|
|
+ <Select.Option value={item} key={item}>{theData}</Select.Option>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ contactsOption: theOption,
|
|
|
+ contacts: data.data[this.state.data.contacts]
|
|
|
+ });
|
|
|
+ }.bind(this),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ stateOption: [],
|
|
|
+ departmentOption: [],
|
|
|
+ projectDes:'',
|
|
|
+ projectMode: 0,
|
|
|
+ subsidy: 0,
|
|
|
+ projectModeState: false,
|
|
|
+ subsidyState: false,
|
|
|
+ stateColumns: [{
|
|
|
+ title: '专利状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ key: 'state',
|
|
|
+ render: (text) => { return getCognizanceState(text) }
|
|
|
+ }, {
|
|
|
+ title: '处理时间',
|
|
|
+ dataIndex: 'recordTime',
|
|
|
+ key: 'recordTime'
|
|
|
+ }, {
|
|
|
+ title: '负责人',
|
|
|
+ dataIndex: 'principal',
|
|
|
+ key: 'principal',
|
|
|
+ }, {
|
|
|
+ title: '备注',
|
|
|
+ dataIndex: 'comment',
|
|
|
+ key: 'comment',
|
|
|
+ }],
|
|
|
+ stateTable: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ componentWillMount() {
|
|
|
+ let _me = this;
|
|
|
+ cognizanceStateList.map(function (item) {
|
|
|
+ _me.state.stateOption.push(
|
|
|
+ <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
|
|
|
+ )
|
|
|
+ });
|
|
|
+ this.loadData();
|
|
|
+ this.getStateData();
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSubmit(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ this.props.form.validateFields((err, values) => {
|
|
|
+ if (values.state || values.principal || values.recordTime || values.comment) {
|
|
|
+ if (!values.state && !values.principal && !values.recordTime) {
|
|
|
+ message.warning("请填写完整的状态流转信息!");
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ };
|
|
|
+ if (!err) {
|
|
|
+ this.props.spinState(true);
|
|
|
+ let contacts = !isNaN(values.contacts) ? values.contacts : this.state.data.contacts;
|
|
|
+ $.ajax({
|
|
|
+ method: "POST",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + "/api/admintechproject/updateTechProject",
|
|
|
+ data: {
|
|
|
+ id: this.props.data.pid,
|
|
|
+ uid: this.props.data.uid,
|
|
|
+ contacts: contacts,
|
|
|
+ department: values.department,
|
|
|
+ projectName: values.projectName,
|
|
|
+ projectCatagory: values.projectCatagory,
|
|
|
+ techField: values.techField,
|
|
|
+ projectDes: values.projectDes,
|
|
|
+ projectMode: this.state.projectMode,
|
|
|
+ projectApproval: values.projectApproval,
|
|
|
+ subsidy: this.state.subsidy,
|
|
|
+ approvalUrl: this.state.approvalUrl,
|
|
|
+
|
|
|
+ recordTimeFormattedDate: values.recordTime ? values.recordTime.format("YYYY-MM-DD") : undefined,
|
|
|
+ state: values.state,
|
|
|
+ principal: values.principal,
|
|
|
+ comment: values.comment,
|
|
|
+ }
|
|
|
+ }).done(function (data) {
|
|
|
+ if (!data.error.length) {
|
|
|
+ message.success('保存成功!');
|
|
|
+ this.props.closeModal();
|
|
|
+ this.props.form.resetFields();
|
|
|
+ this.props.spinState(false);
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ this.props.spinState(false);
|
|
|
+ }
|
|
|
+ }.bind(this));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ if (!this.props.visible && nextProps.visible) {
|
|
|
+ this.getStateData();
|
|
|
+ this.loadData();
|
|
|
+ };
|
|
|
+ if (nextProps.data) {
|
|
|
+ this.state.pid = nextProps.data.pid;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ projectEstablishmentCheck(e) {
|
|
|
+ if (e.target.checked == true) {
|
|
|
+ this.setState({projectModeState:true})
|
|
|
+ this.state.projectMode = 1;
|
|
|
+ } else if (e.target.checked == false) {
|
|
|
+ this.setState({projectModeState:false})
|
|
|
+ this.state.projectMode = 0;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ subsidyCheck(e) {
|
|
|
+ if (e.target.checked == true) {
|
|
|
+ this.setState({subsidyState:true})
|
|
|
+ this.state.subsidy = 1;
|
|
|
+ } else if (e.target.checked == false) {
|
|
|
+ this.setState({subsidyState:false})
|
|
|
+ this.state.subsidy = 0;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ const FormItem = Form.Item;
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ const theData = this.state.data;
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: { span: 6 },
|
|
|
+ wrapperCol: { span: 12 },
|
|
|
+ };
|
|
|
+ const _me = this;
|
|
|
+ if (this.state.data) {
|
|
|
+ return (
|
|
|
+ <Form onSubmit={this.handleSubmit} id="highTechApply-form">
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">公司名称: </span>
|
|
|
+ <span>{theData.unitName}</span>
|
|
|
+ </div>
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">公司组织机构代码: </span>
|
|
|
+ <span>{theData.orgCode}</span>
|
|
|
+ </div>
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">公司地址: </span>
|
|
|
+ <span>{theData.province+' '+theData.city+' '+theData.area}</span>
|
|
|
+ </div>
|
|
|
+ <div className="half-item">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ wrapperCol={{ span: 10 }}
|
|
|
+ label="联系人:"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('contacts', {
|
|
|
+ initialValue: this.state.contacts
|
|
|
+ })(
|
|
|
+ <Select>{this.state.contactsOption}</Select>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem className="third-item"
|
|
|
+ {...formItemLayout}
|
|
|
+ label="科技部门"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('department', {
|
|
|
+ initialValue: this.state.department
|
|
|
+ })(
|
|
|
+ <Select>{this.state.departmentOption}</Select>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">派单信息: </span>
|
|
|
+ <span>{theData.dispatchInfo}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ wrapperCol={{ span: 12 }}
|
|
|
+ label="项目名称"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('projectName', {
|
|
|
+ initialValue: theData.projectName
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ wrapperCol={{ span: 12 }}
|
|
|
+ label="项目类型"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('projectCatagory', {
|
|
|
+ initialValue: theData.projectCatagory
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 4 }}
|
|
|
+ wrapperCol={{ span: 12 }}
|
|
|
+ label="技术领域"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('techField', {
|
|
|
+ initialValue: theData.techField
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <span className="item-title">项目简介: </span>
|
|
|
+ {getFieldDecorator('projectDes', {
|
|
|
+ initialValue: theData.projectDes
|
|
|
+ })(
|
|
|
+ <Input type="textarea"
|
|
|
+ placeholder="多行输入"
|
|
|
+ rows={6} />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">是否立项: </span>
|
|
|
+ <Checkbox
|
|
|
+ onChange={this.projectEstablishmentCheck}
|
|
|
+ checked={this.state.projectModeState}
|
|
|
+ >
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ <div className="half-item">
|
|
|
+ <FormItem
|
|
|
+ {...formItemLayout}
|
|
|
+ label="立项金额"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('projectApproval', {
|
|
|
+ initialValue: theData.projectApproval
|
|
|
+ })(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <div className="half-item">
|
|
|
+ <span className="item-title">是否后补助: </span>
|
|
|
+ <Checkbox
|
|
|
+ onChange={this.subsidyCheck}
|
|
|
+ checked={this.state.subsidyState}
|
|
|
+ >
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="hrSituation-roster">
|
|
|
+ <Upload
|
|
|
+ name="avatar"
|
|
|
+ action={globalConfig.context + "/api/techproject/upload"}
|
|
|
+ data={{ 'uid': this.props.data.uid }}
|
|
|
+ beforeUpload={beforeUploadFile}
|
|
|
+ showUploadList={false}
|
|
|
+ onChange={(info) => {
|
|
|
+ if (info.file.status !== 'uploading') {
|
|
|
+ console.log(info.file, info.fileList);
|
|
|
+ }
|
|
|
+ if (info.file.status === 'done') {
|
|
|
+ if (!info.file.response.error.length) {
|
|
|
+ message.success(`${info.file.name} 文件上传成功!`);
|
|
|
+ } else {
|
|
|
+ message.warning(info.file.response.error[0].message);
|
|
|
+ return;
|
|
|
+ };
|
|
|
+ this.state.approvalUrl = info.file.response.data;
|
|
|
+ } else if (info.file.status === 'error') {
|
|
|
+ message.error(`${info.file.name} 文件上传失败。`);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Button><Icon type="upload" /> 项目材料上传 </Button>
|
|
|
+ </Upload>
|
|
|
+ <p style={{ marginTop: '10px' }}>{theData.approvalUrl ? <a onClick={downloadFile.bind(null, theData.approvalUrl, theData.approvalDownloadFileName)}>{theData.approvalDownloadFileName}</a> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
|
|
|
+ </div>
|
|
|
+ <div className="form-title">状态流转记录: </div>
|
|
|
+ <Table pagination={false} dataSource={this.state.stateTable} columns={this.state.stateColumns} />
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem className="third-item"
|
|
|
+ {...formItemLayout}
|
|
|
+ label="状态流转"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('state')(
|
|
|
+ <Select placeholder="选择一个状态">{this.state.stateOption}</Select>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem className="third-item"
|
|
|
+ labelCol={{ span: 6 }}
|
|
|
+ wrapperCol={{ span: 12 }}
|
|
|
+ label="处理时间"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('recordTime')(
|
|
|
+ <DatePicker />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem className="third-item"
|
|
|
+ {...formItemLayout}
|
|
|
+ label="负责人"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('principal')(
|
|
|
+ <Select placeholder="选择负责人">{this.props.authorOption}</Select>
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <FormItem
|
|
|
+ labelCol={{ span: 2 }}
|
|
|
+ wrapperCol={{ span: 12 }}
|
|
|
+ label="备注"
|
|
|
+ >
|
|
|
+ {getFieldDecorator('comment')(
|
|
|
+ <Input />
|
|
|
+ )}
|
|
|
+ </FormItem>
|
|
|
+ <FormItem style={{ marginTop: '20px' }}>
|
|
|
+ <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
|
|
|
+ <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
|
|
|
+ </FormItem>
|
|
|
+ </Form >
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return (<div></div>)
|
|
|
+ };
|
|
|
+ },
|
|
|
+}));
|
|
|
+
|
|
|
+const ApplyChange = React.createClass({
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.state.visible = nextProps.showDesc
|
|
|
+ },
|
|
|
+ showModal() {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleOk() {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ this.props.closeDesc(false);
|
|
|
+ },
|
|
|
+ handleCancel(e) {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ this.props.closeDesc(false);
|
|
|
+ },
|
|
|
+ spinChange(e) {
|
|
|
+ this.setState({
|
|
|
+ loading: e
|
|
|
+ });
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div className="patent-addNew">
|
|
|
+ <Spin spinning={this.state.loading} className='spin-box'>
|
|
|
+ <Modal title="编辑科技项目" visible={this.state.visible}
|
|
|
+ onOk={this.handleOk} onCancel={this.handleCancel}
|
|
|
+ width='1000px'
|
|
|
+ footer=''
|
|
|
+ >
|
|
|
+ <ApplyChangeFrom
|
|
|
+ visible={this.state.visible}
|
|
|
+ authorOption={this.props.authorOption}
|
|
|
+ data={this.props.data}
|
|
|
+ spinState={this.spinChange} closeModal={this.handleCancel} />
|
|
|
+ </Modal>
|
|
|
+ </Spin>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+export default ApplyChange;
|