fix Time component

quarkcloudio · Nov 12, 2020 · df2d912 · df2d912
1 parent 7b5c938
commit df2d912
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/src/pages/Quark/components/Form.tsx b/src/pages/Quark/components/Form.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, {  useEffect } from 'react';
 import ProForm from '@ant-design/pro-form';
 import ProCard from '@ant-design/pro-card';
 import FormItem from './FormItem';
 import { history } from 'umi';
 import { post } from '@/services/action';
+import moment from 'moment';
 import {
   Form as AntForm,
   message,
@@ -18,6 +19,18 @@ const Form: React.FC<Form> = (props:any) => {
 
   const [form] = AntForm.useForm();
 
+  useEffect(() => {
+    let initialValues = props.form.initialValues;
+    props.form.items.map((item:any) => {
+      if(item.component === 'time') {
+        if(initialValues.hasOwnProperty(item.name)) {
+          initialValues[item.name] = moment(initialValues[item.name],item.format);
+        }
+      }
+    })
+    form.setFieldsValue(initialValues);
+  }, []);
+
   const onFinish = async (values: any) => {
     const result = await post({
       actionUrl: props.form.api,
@@ -52,7 +65,6 @@ const Form: React.FC<Form> = (props:any) => {
           onFinish={async (values) => { onFinish(values) }}
           style={props.form.style ? props.form.style : {margin:'25px',width:'100%'}}
           colon={props.form.colon}
-          initialValues={props.form.initialValues}
           labelAlign={props.form.labelAlign}
           name={props.form.name}
           preserve={props.form.preserve}
@@ -75,7 +87,6 @@ const Form: React.FC<Form> = (props:any) => {
         onFinish={async (values) => { onFinish(values) }}
         style={props.form.style}
         colon={props.form.colon}
-        initialValues={props.form.initialValues}
         labelAlign={props.form.labelAlign}
         name={props.form.name}
         preserve={props.form.preserve}

diff --git a/src/pages/Quark/components/FormItem.tsx b/src/pages/Quark/components/FormItem.tsx
@@ -11,7 +11,8 @@ import {
   ProFormDatePicker,
   ProFormDateTimePicker,
   ProFormDateRangePicker,
-  ProFormDateTimeRangePicker
+  ProFormDateTimeRangePicker,
+  ProFormTimePicker
 } from '@ant-design/pro-form';
 import { createFromIconfontCN,PlusOutlined } from '@ant-design/icons';
 import {

diff --git a/src/pages/Quark/components/ModalForm.tsx b/src/pages/Quark/components/ModalForm.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useModel, history } from 'umi';
 import { get, post } from '@/services/action';
+import moment from 'moment';
 import {
   Form,
   Button,
@@ -17,6 +18,18 @@ const ModalForm: React.FC<any> = (props:any) => {
     scriptUrl: initialState.settings.iconfontUrl,
   });
 
+  useEffect(() => {
+    let initialValues = props.form.initialValues;
+    props.form.items.map((item:any) => {
+      if(item.component === 'time') {
+        if(initialValues.hasOwnProperty(item.name)) {
+          initialValues[item.name] = moment(initialValues[item.name],item.format);
+        }
+      }
+    })
+    form.setFieldsValue(initialValues);
+  }, []);
+
   const [formComponent, setFormComponentState] = useState({
     api:null,
     style:undefined,
@@ -146,7 +159,6 @@ const ModalForm: React.FC<any> = (props:any) => {
           form={form}
           style={formComponent.style}
           colon={formComponent.colon}
-          initialValues={formComponent.initialValues}
           labelAlign={formComponent.labelAlign}
           name={formComponent.name}
           preserve={formComponent.preserve}

diff --git a/src/pages/Quark/components/TabForm.tsx b/src/pages/Quark/components/TabForm.tsx
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import ProCard from '@ant-design/pro-card';
 import FormItem from './FormItem';
 import { history } from 'umi';
 import { post } from '@/services/action';
+import moment from 'moment';
 import {
   Form,
   message,
@@ -18,6 +19,18 @@ export interface Form {
 const TabForm: React.FC<Form> = (props:any) => {
   const [form] = Form.useForm();
 
+  useEffect(() => {
+    let initialValues = props.form.initialValues;
+    props.form.items.map((item:any) => {
+      if(item.component === 'time') {
+        if(initialValues.hasOwnProperty(item.name)) {
+          initialValues[item.name] = moment(initialValues[item.name],item.format);
+        }
+      }
+    })
+    form.setFieldsValue(initialValues);
+  }, []);
+
   const onFinish = async (values: any) => {
     const result = await post({
       actionUrl: props.form.api,