工时管理

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/AddModal.js

@@ -12,18 +12,17 @@ function AddModal(props) {
     onOk,
     onCancel,
     time,
-    form,
     typeList = [],
     subTypeList = [],
     dispatch,
     project = [],
     loading,
   } = props;
+  const [form] = Form.useForm();
   const [type, setType] = useState({});
   const [subType, setSubType] = useState({});
   const handleOk = () => {
-    form.validateFields((error, values) => {
-      if (error) return;
+    form.validateFields().then(values => {
       if (type.type == 0 || subType.type == 0) {
         if (!values.project) {
           message.error('请选择项目');
@@ -123,21 +122,12 @@ function AddModal(props) {
   //分类选单
   const renderType = () => {
     return (
-      <Form.Item label="分类">
-        {form.getFieldDecorator('type', {
-          rules: [
-            {
-              required: true,
-              message: '请选择分类',
-            },
-          ],
-        })(
-          <Select onChange={onChangeType} placeholder="请选择分类">
-            {typeList.map(item => (
-              <Option key={String(item.id)}>{item.name}</Option>
-            ))}
-          </Select>
-        )}
+      <Form.Item label="分类" name="type" rules={[{ required: true, message: '请选择分类' }]}>
+        <Select onChange={onChangeType} placeholder="请选择分类">
+          {typeList.map(item => (
+            <Option key={String(item.id)}>{item.name}</Option>
+          ))}
+        </Select>
       </Form.Item>
     );
   };
@@ -145,31 +135,22 @@ function AddModal(props) {
   //项目选单
   const renderProject = () => {
     return (
-      <Form.Item label="项目">
-        {form.getFieldDecorator('project', {
-          rules: [
-            {
-              required: true,
-              message: '请选择项目',
-            },
-          ],
-        })(
-          //售前支持特殊判断，增加“无项目”，选择项目时与子类联动
-          <Select
-            showSearch
-            onChange={onChangeProject}
-            placeholder="请选择项目"
-            optionFilterProp="children"
-            filterOption={(input, option) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-          >
-            {type.id === 2 && <Option key={'0'}>售前支持(10100)</Option>}
-            {project.map(item => (
-              <Option key={String(item.ID)}>{`${item.Name}(${item.Code})`}</Option>
-            ))}
-          </Select>
-        )}
+      <Form.Item label="项目" name="project" rules={[{ required: true, message: '请选择项目' }]}>
+        {/* 售前支持特殊判断，增加“无项目”，选择项目时与子类联动 */}
+        <Select
+          showSearch
+          onChange={onChangeProject}
+          placeholder="请选择项目"
+          optionFilterProp="children"
+          filterOption={(input, option) =>
+            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+        >
+          {type.id === 2 && <Option key={'0'}>售前支持(10100)</Option>}
+          {project.map(item => (
+            <Option key={String(item.ID)}>{`${item.Name}(${item.Code})`}</Option>
+          ))}
+        </Select>
       </Form.Item>
     );
   };
@@ -177,26 +158,17 @@ function AddModal(props) {
   //子类选单
   const renderSubType = () => {
     return (
-      <Form.Item label="子类">
-        {form.getFieldDecorator('subType', {
-          rules: [
-            {
-              required: true,
-              message: '请选择子类',
-            },
-          ],
-        })(
-          //售前支持特殊判断，子类不可选
-          <Select
-            disabled={type.id === 2}
-            onChange={onChangeSubType}
-            placeholder={type.id === 2 ? null : '请选择子类'}
-          >
-            {(subTypeList || []).map(item => (
-              <Option key={String(item.id)}>{`${item.name}(${item.code})`}</Option>
-            ))}
-          </Select>
-        )}
+      <Form.Item label="子类" name="subType" rules={[{ required: true, message: '请选择子类' }]}>
+        {/* 售前支持特殊判断，子类不可选 */}
+        <Select
+          disabled={type.id === 2}
+          onChange={onChangeSubType}
+          placeholder={type.id === 2 ? null : '请选择子类'}
+        >
+          {(subTypeList || []).map(item => (
+            <Option key={String(item.id)}>{`${item.name}(${item.code})`}</Option>
+          ))}
+        </Select>
       </Form.Item>
     );
   };
@@ -211,7 +183,7 @@ function AddModal(props) {
       onOk={handleOk}
       destroyOnClose
     >
-      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} form={form}>
         {renderType()}
         {type.type == 0 && renderProject()}
         {renderSubType()}
@@ -224,4 +196,4 @@ function AddModal(props) {
 export default connect(({ workload }) => ({
   project: workload.project,
   subTypeList: workload.subTypeList,
-}))(Form.create()(AddModal));
+}))(AddModal);

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/Auth.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import {
   message,
   InputNumber,
-  Form,
   Table,
   Divider,
   Modal,
@@ -22,7 +21,7 @@ import moment from 'moment';
 import { getList } from '@/services/devOpsScoreRule';
 
 function List(props) {
-  const { dispatch, loading, form, list, project, currentUser, allType, user } = props;
+  const { dispatch, loading, list, project, currentUser, allType, user } = props;
   const [visible, setVisible] = useState(false);
   const [filter, setFilter] = useState({});
   const [current, setCurrent] = useState({
@@ -211,4 +210,4 @@ export default connect(({ workload, user, loading }) => ({
   project: workload.project,
   currentUser: user.currentUser,
   loading: loading.models.workload,
-}))(Form.create()(List));
+}))(List);

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/AuthWorkList.js

@@ -19,18 +19,8 @@ const { Panel } = Collapse;
 const { Option } = Select;
 
 function AuthWorkList(props) {
-  const {
-    list,
-    onAuth,
-    onSearch,
-    onSave,
-    project = [],
-    allType,
-    onAgree,
-    onReject,
-    user,
-    form,
-  } = props;
+  const { list, onAuth, onSearch, onSave, project = [], allType, onAgree, onReject, user } = props;
+  const [form] = Form.useForm();
   const [edit, setEdit] = useState(false);
   const columns = [
     {
@@ -154,46 +144,41 @@ function AuthWorkList(props) {
 
   const renderSearch = () => {
     const onHandleSearch = () => {
-      form.validateFields((error, values) => {
-        if (error) return;
+      form.validateFields().then(values => {
         onSearch(values);
       });
     };
     return (
-      <Form style={{ marginBottom: 20 }}>
+      <Form style={{ marginBottom: 20 }} form={form}>
         <Row gutter={12}>
           <Col span={12}>
-            <Form.Item label="人员">
-              {form.getFieldDecorator('userId')(
-                <Select
-                  allowClear
-                  showSearch
-                  filterOption={(input, option) =>
-                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                  }
-                >
-                  {user.map(item => (
-                    <Option key={item.ID}>{item.CName}</Option>
-                  ))}
-                </Select>
-              )}
+            <Form.Item label="人员" name="userId">
+              <Select
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }
+              >
+                {user.map(item => (
+                  <Option key={item.ID}>{item.CName}</Option>
+                ))}
+              </Select>
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item label="项目">
-              {form.getFieldDecorator('projectId')(
-                <Select
-                  allowClear
-                  showSearch
-                  filterOption={(input, option) =>
-                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-                  }
-                >
-                  {project.map(item => (
-                    <Option key={item.ID}>{`${item.Name}(${item.Code})`}</Option>
-                  ))}
-                </Select>
-              )}
+            <Form.Item label="项目" name="projectId">
+              <Select
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }
+              >
+                {project.map(item => (
+                  <Option key={item.ID}>{`${item.Name}(${item.Code})`}</Option>
+                ))}
+              </Select>
             </Form.Item>
           </Col>
         </Row>
@@ -242,4 +227,4 @@ function AuthWorkList(props) {
   );
 }
 
-export default Form.create()(AuthWorkList);
+export default AuthWorkList;

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/CalendarModal.js

@@ -16,18 +16,8 @@ import styles from './index.less';
 import moment from 'moment';
 
 function CalendarModal(props) {
-  const {
-    allType,
-    projectList,
-    visible,
-    onOk,
-    onCancel,
-    data,
-    title,
-    form,
-    footer,
-    loading,
-  } = props;
+  const { allType, projectList, visible, onOk, onCancel, data, title, footer, loading } = props;
+  const [form] = Form.useForm();
   const [type, setType] = useState({});
   const [edit, setEdit] = useState(false);
   const [validRange, setValidRange] = useState(null);
@@ -36,9 +26,7 @@ function CalendarModal(props) {
     list: [],
   });
   const handleOk = () => {
-    form.validateFields((error, values) => {
-      if (error) return;
-      console.log(values);
+    form.validateFields().then(values => {
       let params = [];
       Object.keys(values).forEach(type_id => {
         if (type_id == 'comment') return;
@@ -146,16 +134,16 @@ function CalendarModal(props) {
         <Col span={6}>
           <Button>添加</Button>
           {current.list.map(item => (
-            <Form.Item label={item.TypeInfo?.name}>
-              {form.getFieldDecorator(`${item.type_id}.${item.time}`, {
-                initialValue: item?.workload,
-              })(<InputNumber min={0} max={8} disabled={!edit} />)}
+            <Form.Item
+              label={item.TypeInfo?.name}
+              name={`${item.type_id}.${item.time}`}
+              initialValue={item?.workload}
+            >
+              <InputNumber min={0} max={8} disabled={!edit} />
             </Form.Item>
           ))}
-          <Form.Item label="日志">
-            {form.getFieldDecorator('comment', { initialValue: current.list[0]?.comment })(
-              <Input.TextArea rows={5} disabled={!edit} />
-            )}
+          <Form.Item label="日志" name="comment" initialValue={current.list[0]?.comment}>
+            <Input.TextArea rows={5} disabled={!edit} />
           </Form.Item>
 
           <div className={styles.btns}>
@@ -185,4 +173,4 @@ function CalendarModal(props) {
   );
 }
 
-export default Form.create()(CalendarModal);
+export default CalendarModal;

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/WorkList.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Form, InputNumber, Popover, Divider, Table, message } from 'antd';
+import { InputNumber, Popover, Divider, Table, message } from 'antd';
 
 function WorkList(props) {
-  const { list, form, onAuth, onSave, allType } = props;
+  const { list, onAuth, onSave, allType } = props;
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
   const [dataSource, setDataSource] = useState([]);
+  let workHour = {};
   const columns = [
     {
       title: '分类',
@@ -33,9 +34,16 @@ function WorkList(props) {
           return '总计 ' + item.children.reduce((total, item) => total + item.workload, 0) + '小时';
         }
         if (item.audit_state == 1 || item.audit_state == 2) return item?.workload + '小时';
-        return form.getFieldDecorator(`${item.type_id}.${item.project_id}.${item.time}`, {
-          initialValue: item?.workload,
-        })(<InputNumber style={{width: 60}} min={0} step={0.5} />);
+        workHour[`${item.type_id}.${item.project_id}.${item.time}`] = item?.workload;
+        return (
+          <InputNumber
+            style={{ width: 60 }}
+            min={0}
+            step={0.5}
+            defaultValue={item?.workload}
+            onChange={value => onChange(value, `${item.type_id}.${item.project_id}.${item.time}`)}
+          />
+        );
       },
     },
     {
@@ -47,12 +55,18 @@ function WorkList(props) {
         return (
           <>
             <a
-              onClick={() => onHandleSave(item, form.getFieldValue(`${item.type_id}.${item.project_id}.${item.time}`))}
+              onClick={() =>
+                onHandleSave(item, workHour[`${item.type_id}.${item.project_id}.${item.time}`])
+              }
             >
               保存
             </a>
             <Divider type="vertical"></Divider>
-            <a onClick={() => onAuth(item, form.getFieldValue(`${item.type_id}.${item.project_id}.${item.time}`))}>
+            <a
+              onClick={() =>
+                onAuth(item, workHour[`${item.type_id}.${item.project_id}.${item.time}`])
+              }
+            >
               上报审批
             </a>
           </>
@@ -81,6 +95,10 @@ function WorkList(props) {
     }
   };
 
+  const onChange = (value, name) => {
+    workHour[name] = value;
+  };
+
   const onHandleSave = (item, data) => {
     let currentWorkload = list.reduce((total, temp) => {
       if (temp.id == item.id) return total;
@@ -126,4 +144,4 @@ function WorkList(props) {
   );
 }
 
-export default Form.create()(WorkList);
+export default WorkList;

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/index.js

@@ -1,21 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Form, Modal, Button, Calendar, Popover, Spin, Row, Col } from 'antd';
+import { Modal, Button, Calendar, Popover, Spin, Row, Col } from 'antd';
 import AddModal from './AddModal';
 import WorkList from './WorkList';
 import { connect } from 'dva';
 import moment from 'moment';
 
 function List(props) {
-  const {
-    typeList,
-    dispatch,
-    loading,
-    form,
-    dataList,
-    projectList,
-    currentUser,
-    allType,
-  } = props;
+  const { typeList, dispatch, loading, dataList, projectList, currentUser, allType } = props;
   const [visible, setVisible] = useState(false);
   const [current, setCurrent] = useState({
     date: moment(),
@@ -357,12 +348,7 @@ function List(props) {
               )}
             </div>
 
-            <WorkList
-              allType={allType}
-              list={current.list}
-              onAuth={onAuth}
-              onSave={onSave}
-            />
+            <WorkList allType={allType} list={current.list} onAuth={onAuth} onSave={onSave} />
           </Col>
         </Row>
       </Spin>
@@ -384,4 +370,4 @@ export default connect(({ workload, user, loading }) => ({
   allType: workload.allType,
   currentUser: user.currentUser,
   loading: loading.models.workload,
-}))(Form.create()(List));
+}))(List);