绩效考核

Mr Ke

2020-05-29 227089fcb8f0facbc0d4456f876a75a747ee6af3

绩效考核

 src/components/common/SearchFormView/index.jsx

@@ -220,6 +220,7 @@
                                                                console.log(date, dateString);
                                                                this.monthPickerChange(item.key, date, dateString);
                                                            }}
                                                            disabledDate={item.disabledDate || false}
                                                            value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM') : undefined}
                                                        />
                                                    </Form.Item>

 src/components/common/TableView/index.jsx

@@ -107,11 +107,12 @@
    }

    render() {
        const { columns, rowSelection, showPagination = true } = this.props;
        const { columns, rowSelection, showPagination = true, rowClassName = '' } = this.props;
        const { page, size, } = this.props.formData;
        return (
            <div className="table-view-main">
                <Table
                    rowClassName={rowClassName}
                    rowSelection={rowSelection || null}
                    size="middle"
                    className="rowColor"

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

@@ -7,11 +7,14 @@
/** 绩效详情 */
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 } from 'antd';
import { createHashHistory } from 'history';
import './index.scss';
const history = createHashHistory();

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


export default class MeritsDetail extends Component {
@@ -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,15 @@
  // 保存操作
  onSave = (item) => {
    console.log('item', item);
    let { id , meritsGrade} = item;
    let { id, meritsGrade } = item;
    fetch({
      url: `api/merits/assess/modifyGrade`,
      params: {
        id,
        meritsGrade
      }
    }).then( res=> {
      if(res) {
    }).then(res => {
      if (res) {
        message.success('保存成功');
        this.setState({
          formData: {
@@ -58,11 +89,10 @@
        })
      }
    })

  }

  renderColumns = () => {
    return [
    var cols = [
      { title: '编号', dataIndex: 'id', width: '3%' },
      { title: '评分项目', dataIndex: 'scoreItems', width: '6%' },
      { title: '评分目标', dataIndex: 'scoreTarget', width: '10%' },
@@ -104,41 +134,84 @@
            }} />
        }
      },
      {

    ];
    if (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'))
      },
      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>
    )
  }

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

@@ -196,6 +196,10 @@
      extraFromData: {},
      setFormData: this.setFormData,
      showPagination: false,
      rowClassName: (cur, index) => {
        console.log(cur, index)
        return !cur.validStatus && 'text-grey'
      }
    }

    return (

 src/components/oa/merits/meritsDispose/index.scss

@@ -16,5 +16,6 @@
    & .ant-tag {
      cursor: pointer;
    }
   
  }
}

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

@@ -12,6 +12,7 @@
import { createHashHistory } from 'history';
import fetch from '../../../../api/request';
import './index.scss';
import moment from 'moment';

const history = createHashHistory();

@@ -25,14 +26,25 @@
        __key: Date.now(),
        page: 1,
        size: 10,
        keyWord: ''
        countMonth: moment().month(moment().month() - 1).format('YYYY-MM')
      },
      queryTerms: null
    };
  }

  componentDidMount() {
    this.loadqueryTerms()
  }


  loadqueryTerms = () => {
    fetch({
      url: `api/merits/assess/queryTerms`,
    }).then(res => {
      if (res) {
        console.log('res', res);
        this.setState({ queryTerms: res })
      }
    })
  }

  setFormData = data => {
@@ -44,7 +56,7 @@

  linkDetail = (item) => {
    let { userId, countMonth } = item;
    history.push(`/merits/meritsOverview/meritsDetail/${userId}/${countMonth}`)
    history.push(`/merits/meritsOverview/meritsDetail/${userId}/true/${countMonth}`)
  }

  renderColumns = () => {
@@ -70,7 +82,7 @@


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

    let tableParams = {
      url: `api/merits/assess/queryMerits`,
@@ -80,22 +92,31 @@
      extraFromData: {},
      setFormData: this.setFormData
    }

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

    return (
      <div className="merits-overview-main">
        <SearchFormView
          formData={formData}
          setFormData={this.setFormData}
          data={[
            { type: 'select', name: '部门', label: '部门', key: 'bumen', list: [{ name: '1', value: '部门1' }, { name: '2', value: '部门2' }], },
            { type: 'select', name: '岗位', label: '岗位', key: 'gangwei', list: [{ name: '1', value: '岗位1' }, { name: '2', value: '岗位2' }], },
            { type: 'input', name: '姓名', label: '姓名', key: 'name' },
            {
              type: 'monthPicker',
              label: '考评月份',
              name: '考评月份',
              key: 'kpyf',
            },
          ]} />
        {
          queryTerms &&
          <SearchFormView
            formData={formData}
            setFormData={this.setFormData}
            data={[
              { type: 'select', name: '部门', label: '部门', key: 'userDeptId', list: queryTerms.dept ? queryTerms.dept.map(({ name, id }) => ({ name, value: id })) : [], },
              { type: 'select', name: '岗位', label: '岗位', key: 'meritsPostId', list: queryTerms.post ? queryTerms.post.map(({ name, id }) => ({ name, value: id })) : [], },
              { type: 'input', name: '姓名', label: '姓名', key: 'userName' },
              {
                type: 'monthPicker',
                label: '考评月份',
                name: '考评月份',
                key: 'countMonth',
                disabledDate
              },
            ]} />
        }
        <TableView {...tableParams} />
      </div>
    )

 src/index.css

@@ -30,11 +30,138 @@
.ant-layout-content {
  overflow: auto;
}
.ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td{
.ant-table-middle
  > .ant-table-content
  > .ant-table-header
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-header
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-header
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-header
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th,
.ant-table-middle
  > .ant-table-content
  > .ant-table-header
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-header
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-header
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-header
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-tbody
  > tr
  > td,
.ant-table-middle
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-tbody
  > tr
  > td {
  padding: 9px 8px !important;
}

.border{
.border {
  border: 20px solid #ededed;
}

@@ -42,42 +169,42 @@
  margin: 20px;
}

.padding{
.padding {
  padding: 20px;
}

.bg-white{
.bg-white {
  background: #fff;
}

.ant-divider-horizontal{
.ant-divider-horizontal {
  margin: 20px 0 !important;
}

.margin-top{
.margin-top {
  margin-top: 20px;
}
.margin-bottom{
.margin-bottom {
  margin-bottom: 20px;
}

.fontSize12{
.fontSize12 {
  font-size: 12px;
}

.ant-divider-horizontal{
.ant-divider-horizontal {
  margin: 20px 0 !important;
}

.ant-card-head-title{
.ant-card-head-title {
  font-weight: bold !important;
}

div{
div {
  box-sizing: border-box;
}

.flex-box-column{
.flex-box-column {
  display: flex;
  flex-direction: column;
}
@@ -86,11 +213,11 @@
  display: flex;
}

.align-center{
.align-center {
  align-items: center;
}

.justify-content{
.justify-content {
  justify-content: center;
}

@@ -99,10 +226,10 @@
  overflow: auto;
}

.ant-spin-nested-loading{
.ant-spin-nested-loading {
  height: 100%;
}
.ant-spin-container{
.ant-spin-container {
  height: 100%;
}

@@ -117,4 +244,7 @@
  padding: 2px 8px !important;
}


.text-grey {
  /* background: #ccc; */
  color: #b3aaaa;
}

 src/routeDom/oaRouteDom.jsx

@@ -37,10 +37,10 @@
    <Route path="/logManage/operLog" component={OperLog} />
    <Route path="/logManage/rawler" component={Rawler} />
    <Route path="/personal/information" component={Information} />
    <Route path="/merits/meritsOverview/meritsDetail/:userId/:meritsMonth" component={MeritsDetail} />
    <Route path="/merits/meritsOverview/meritsDetail/:userId/:boolean/:meritsMonth" component={MeritsDetail} />
    <Route path="/merits/meritsOverview" component={MeritsOverview} />
    <Route path="/merits/meritsDispose" component={MeritsDispose} />
    <Route path="/merits/meritsExamine" component={MeritsExamine} />
    <Route path="/merits/meritsExamine" component={MeritsDetail} />


    {/* <Route path="/" component={Workbench} /> */}