...

liyj

2020-06-24 7af09e42b49cd18f160c19297f47c4622b1eedc3

 src/components/oa/merits/meritsDetail/index.jsx

@@ -7,12 +7,15 @@
/** 绩效详情 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import TableView from '../../../common/TableView';
import { Row, Col, Button, InputNumber, message } from 'antd';
import { Row, Col, Button, InputNumber, message, DatePicker, Input } from 'antd';
import { createHashHistory } from 'history';
import './index.scss';
const history = createHashHistory();
import fetch from '../../../../api/request';

import fetch from '../../../../api/request';
import moment from 'moment';
const { MonthPicker } = DatePicker;
const { TextArea } = Input;

export default class MeritsDetail extends Component {
  constructor(props) {
@@ -22,13 +25,41 @@
    this.state = {
      formData: {
        __key: Date.now(),
        ...this.props.match.params
        // userId: this.props.match.params.userId || loginUser.userId,
        meritsMonth: this.props.match.params.meritsMonth || moment().month(moment().month() - 1).format('YYYY-MM')
      },

      title: null,
      boolean: this.props.match.params.boolean || false
    };
  }

  componentDidMount() { }
  componentDidMount() {
    var loginUser = window.localStorage.getItem('loginUser') || '{}';
    loginUser = JSON.parse(loginUser);
    this.setState({
      formData: {
        ...this.state.formData,
        userId: this.props.match.params.userId || loginUser.userId
      }
    }, () => {
      this.findTitle();
    })
  }

  findTitle = () => {
    fetch({
      url: `api/merits/assess/findTitle`,
      params: {
        userId: this.state.formData.userId
      }
    }).then(res => {
      if (res) {
        this.setState({
          title: res
        })
      }
    })
  }

  setFormData = data => {
    console.log('form', data);
@@ -40,15 +71,17 @@
  // 保存操作
  onSave = (item) => {
    console.log('item', item);
    let { id , meritsGrade} = item;
    let { meritsAssessId, meritsGrade, meritsContent } = item;
    fetch({
      url: `api/merits/assess/modifyGrade`,
      params: {
        id,
        meritsGrade
      method: 'POST',
      data: {
        id : meritsAssessId,
        meritsGrade : meritsGrade,
        meritsContent : meritsContent
      }
    }).then( res=> {
      if(res) {
    }).then(res => {
      if (res) {
        message.success('保存成功');
        this.setState({
          formData: {
@@ -58,14 +91,13 @@
        })
      }
    })

  }

  renderColumns = () => {
    return [
    var cols = [
      { title: '编号', dataIndex: 'id', width: '3%' },
      { title: '评分项目', dataIndex: 'scoreItems', width: '6%' },
      { title: '评分目标', dataIndex: 'scoreTarget', width: '10%' },
      // { title: '评分目标', dataIndex: 'scoreTarget', width: '10%' },
      {
        title: '定义与标准', dataIndex: 'standard', width: '25%', render: (cur, item) => {
          return <div dangerouslySetInnerHTML={{
@@ -80,21 +112,40 @@
          }}></div>
        }
      },
      { title: '数据来源', dataIndex: 'dataSources', width: '8%' },
      { title: '取值范围', dataIndex: 'valueRange', width: '5%' },
      // { title: '数据来源', dataIndex: 'dataSources', width: '8%' },
      {
        title: '计算方式', dataIndex: 'countMethod', width: '8%', render: (cur, item) => {
        title: '权重(%)', dataIndex: 'weight', width: '5%'
      },
      { 
        title: '取值范围', dataIndex: 'valueRange', width: '5%' 
      },
      {
        title: '计算方式', dataIndex: 'countMethod', width: '10%', render: (cur, item) => {
          return <div dangerouslySetInnerHTML={{
            __html: cur.replace(/\n/g, "<br/>")
          }}></div>
        }
      },
      {
        title: '权重(%)', dataIndex: 'weight', width: '6%'
      { 
        title: '计算结果', dataIndex: 'alculation', width: '10%' 
      },
      this.props.match.params.boolean == 'true'?
      { 
        title: '评分意见', dataIndex: 'meritsContent', width: '13%', render: (cur, item, index) => {
          return <TextArea autoSize={{ minRows: 3, maxRows: 10 }} onChange={(value) => {
              item['meritsContent'] = value;
              this.refs['table-view'].onSetDataSource({ index, data: item })
            }} />
        }
      }
      :
      {
        title: '配分(分)', dataIndex: 'allotment', width: '6%'
        title: '评分意见', dataIndex: 'meritsContent', width: '13%'
      },
      // {
      //   title: '配分(分)', dataIndex: 'allotment', width: '6%'
      // },
      this.props.match.params.boolean == 'true'?
      {
        title: '考评得分(分)', dataIndex: 'meritsGrade', width: '6%', render: (cur, item, index) => {
          return <InputNumber size="small" min={0}
@@ -103,42 +154,89 @@
              this.refs['table-view'].onSetDataSource({ index, data: item })
            }} />
        }
      },
      {
        title: '操作', dataIndex: 'operation', width: '10%', render: (cur, item) => {
          return <a onClick={() => { this.onSave(item) }}>保存</a>
        }
      }

      :
      {
        title: '考评得分(分)', dataIndex: 'meritsGrade', width: '6%'
      },
    ];
    if (this.props.match.params.boolean == 'true') {
      console.log(this.props.match.params.boolean);
      return cols.concat({
        title: '操作', dataIndex: 'operation', width: '10%', render: (cur, item) => {
          return <a onClick={() => { this.onSave(item) }}>评分</a>
        }
      })
    } else {
      return cols
    }
  }

  onBack = () => {
    history.goBack();
  }

  monthPickerChange = (m, d) => {
    let { formData } = this.state;
    this.setState({
      formData: {
        ...formData,
        meritsMonth: d
      }
    }, () => {
      this.setState({
        formData: {
          ...this.state.formData,
          __key: Date.now()
        }
      })
    })
  }

  render() {
    const { formData } = this.state;
    const { formData, title, boolean } = this.state;

    let tableParams = {
      url: `api/merits/assess/findMeritsDetail`,
      formData,
      formData: {
        ...formData,
        userId: this.props.match.params.userId || JSON.parse(window.localStorage.getItem('loginUser')).userId
      },
      key: formData.__key,
      columns: this.renderColumns(),
      extraFromData: {},
      setFormData: this.setFormData,
      showPagination: false
      showPagination: false,
    }

    function disabledDate(current) {
      return current && current >= moment().endOf('day');
    }

    return (
      <div className="merits-detail-main">
        <h2>2020年4月绩效评分表（初级研发工程师）</h2>
        <TableView {...tableParams} ref="table-view" />
        <Row className="margin-top">

        <Row className="margin-bottom" type="flex" justify="center" gutter={20}>
          <Col>
            <Button onClick={this.onBack}>返回</Button>
            <MonthPicker value={formData.meritsMonth ? moment(formData.meritsMonth, 'YYYY-MM') : ''} format={'YYYY-MM'} onChange={this.monthPickerChange} disabledDate={disabledDate} />
          </Col>
          {
            title &&
            <Col>
              <h2>{title}</h2>
            </Col>
          }
        </Row>

        <TableView {...tableParams} ref="table-view" />
        {
          boolean &&
          <Row className="margin-top">
            <Col>
              <Button onClick={this.onBack}>返回</Button>
            </Col>
          </Row>
        }
      </div>
    )
  }