alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

master
Alex Cheung 2 年之前
父節點
0b3512a907 ef3ba27a04
當前提交
e8e9b86549
共有 3 個檔案被更改，包括 195 行新增 和 297 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +190
    -295
      src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
  2. +0
    -1
      src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
  3. +5
    -1
      src/utils/DateUtils.js

+ 190
- 295
src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js 查看文件

@@ -2,16 +2,14 @@
import {
Grid, TextField, Typography, Button
} from '@mui/material';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import * as DateUtils from '../../utils/DateUtils';
import * as HttpUtils from '../../utils/HttpUtils';
import * as UrlUtils from "../../utils/ApiPathConst";
import {useNavigate} from "react-router-dom";
import { useFormik } from 'formik';

// ==============================|| DASHBOARD - DEFAULT ||============================== //

@@ -19,11 +17,48 @@ import {useNavigate} from "react-router-dom";
const OrganizationCard_loadFromUser = ({userData, id}) => {

const [currentUserData, setCurrentUserData] = useState(userData);
const form = useForm({defaultValues: userData});
const {register,reset, handleSubmit} = form;

const navigate = useNavigate();

const formik = useFormik({
enableReinitialize:true,
initialValues:currentUserData,
onSubmit: values =>{
HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id:null,
enCompanyName: values.enCompanyName,
chCompanyName: values.chCompanyName,
brNo: values.brNo,
brExpiryDate: values.brExpiryDate,
enCompanyNameTemp: values.enCompanyNameTemp,
chCompanyNameTemp: values.chCompanyNameTemp,
brExpiryDateTemp: values.brExpiryDateTemp,
contactPerson: values.contactPerson,
contactTel: {
countryCode: values.tel_countryCode,
phoneNumber: values.phoneNumber
},
faxNo: {
countryCode: values.fax_countryCode,
faxNumber: values.faxNumber
},
addressTemp: {
country: values.country,
district: values.district,
addressLine1: values.addressLine1,
addressLine2: values.addressLine2,
addressLine3: values.addressLine3,
}
},
onSuccess: function(responseData){
navigate('/org/'+responseData.id);
}
});
}
});

useEffect(() => {
if(id>0){
userData["country"] = userData.addressTemp?.country;
@@ -52,45 +87,9 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
}, [userData]);

useEffect(() => {
reset(currentUserData);
}, [currentUserData]);


const onSubmitForm=(_formData)=>{
console.log(_formData);
HttpUtils.post({
url: UrlUtils.POST_ORG_SAVE_PATH,
params: {
id:id>0?id:null,
enCompanyName: _formData.enCompanyName,
chCompanyName: _formData.chCompanyName,
brNo: _formData.brNo,
brExpiryDate: _formData.brExpiryDate,
enCompanyNameTemp: _formData.enCompanyNameTemp,
chCompanyNameTemp: _formData.chCompanyNameTemp,
brExpiryDateTemp: _formData.brExpiryDateTemp,
contactPerson: _formData.contactPerson,
contactTel: {
countryCode: _formData.tel_countryCode,
phoneNumber: _formData.phoneNumber
},
faxNo: {
countryCode: _formData.fax_countryCode,
faxNumber: _formData.faxNumber
},
addressTemp: {
country: _formData.country,
district: _formData.district,
addressLine1: _formData.addressLine1,
addressLine2: _formData.addressLine2,
addressLine3: _formData.addressLine3,
}
},
onSuccess: function(responseData){
navigate('/org/'+responseData.id);
}
});
}

return (
<MainCard elevation={0}
@@ -101,266 +100,162 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
Information
</Typography>

<form onSubmit={handleSubmit(onSubmitForm)}>
<form onSubmit={formik.handleSubmit}>

<Grid container spacing={1}>
{/*bottom top*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">

<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>
</Grid>
{/*bottom top*/}
<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
BR No.:
{/*bottom top*/}
<Grid item s={12} md={12} lg={12} sx={{mb: 3}} alignItems={"start"} justifyContent="center">

<Grid item sx={{ml: 3, mr: 3}}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}
>
Create
</Button>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id='brNo'
inputProps={{ maxLength: 8 }}
{...register("brNo")}
/>
</Grid>
</Grid>
</Grid>
<Grid item lg={8} >
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Name (Eng):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("enCompanyName")}
id='enCompanyName'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Name (Ch):
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("chCompanyName")}
id='chCompanyName'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Expiry Date:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<LocalizationProvider fullWidth dateAdapter={AdapterDayjs}>
<TextField
fullWidth
{...register("brExpiryDate")}
id='brExpiryDate'
/>
</LocalizationProvider>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Person:
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("contactPerson")}
id='contactPerson'
inputProps={{ maxLength: 150 }}
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Contact Tel:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
type="number"
defaultValue="852"
{...register("tel_countryCode")}
id='tel_countryCode'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
type="tel"
inputProps={{ maxLength: 20 }}
{...register("phoneNumber")}
id='phoneNumber'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Fax No:
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
type="number"
defaultValue="852"
{...register("fax_countryCode")}
id='fax_countryCode'
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
inputProps={{ maxLength: 20 }}
type="number"
{...register("faxNumber")}
id='faxNumber'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
Country :
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("country")}
id='country'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
District :
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
{...register("district")}
id='district'
/>
</Grid>
</Grid>
</Grid>

<Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
<Grid item lg={12} sx={{alignItems: 'center'}}>Address :</Grid>
</Grid>
<Grid item lg={6}>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine1")}
id='addressLine1'
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine2")}
id='addressLine2'
inputProps={{ maxLength: 255 }}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
{...register("addressLine3")}
id='addressLine3'
inputProps={{ maxLength: 255 }}
/>
</Grid>
</Grid>
</Grid>
</Grid>


{/*bottom top*/}

{getTextField("BR No.:","brNo",formik)}
<Grid item lg={8}></Grid>
{getTextField("Name (Eng):","enCompanyName",formik)}
{getTextField("Name (Ch):","chCompanyName",formik)}
{getDateField("Expiry Date:","brExpiryDate",formik)}
{getTextField("Contact Person:","contactPerson",formik)}
{getPhoneField("Contact Tel:","tel_countryCode", "phoneNumber",formik)}
{getPhoneField("Fax No.:","fax_countryCode", "faxNumber",formik)}
{getTextField("Country:","country",formik)}
{getTextField("District :","district", formik)}
{getAddressField("Address:","addressLine1","addressLine2","addressLine3",formik)}
</Grid>


</form>
</MainCard>
);
};

const getDateField=(label, key, form)=>{
return <Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id={key}
name={key}
type="date"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
</Grid>
</Grid>;
}


const getTextField=(label, key, form)=>{
return <Grid item lg={4} >
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<TextField
fullWidth
id={key}
name={key}
type="text"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
</Grid>
</Grid>;
}

const getPhoneField=(label, key, key2, form)=>{
return <Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
{label}
</Grid>
<Grid item xs={2}>
<TextField
fullWidth
id={key}
name={key}
type="number"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
id={key2}
name={key2}
type="number"
onChange={form.handleChange}
value={form.values[key2]}
/>
</Grid>
</Grid>
</Grid>;
}

const getAddressField=(label, key, key2, key3, form)=>{
return <Grid item lg={4} >
<Grid container alignItems={"top"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
<Grid item lg={12} sx={{alignItems: 'center'}}>{label}</Grid>
</Grid>
<Grid item lg={6}>
<Grid item lg={12}>
<TextField
fullWidth
id={key}
name={key}
type="text"
onChange={form.handleChange}
value={form.values[key]}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
id={key2}
name={key2}
type="text"
onChange={form.handleChange}
value={form.values[key2]}
/>
</Grid>
<Grid item lg={12}>
<TextField
fullWidth
id={key3}
name={key3}
type="text"
onChange={form.handleChange}
value={form.values[key3]}
/>
</Grid>
</Grid>
</Grid>
</Grid>;
}

export default OrganizationCard_loadFromUser;

+ 0
- 1
src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js 查看文件

@@ -36,7 +36,6 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
const formik = useFormik({
initialValues:(currentUserData),
validationSchema:yup.object().shape({
enName: yup.string().max(255).required('請輸入英文姓名'),
enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
chName: yup.string().max(255).required('請輸入中文姓名'),


+ 5
- 1
src/utils/DateUtils.js 查看文件

@@ -11,8 +11,12 @@ export const dateStr = (date) =>{
};

export const convertToDate = (date)=>{
console.log(date);
if(Array.isArray(date)){
return new Date(date[0],date[1],date[2],date[3],date[4],date[5]);
if(date.length==3){
return new Date(date[0],date[1]-1,date[2],0,0,0);
}
return new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]);
}
if(typeof date == 'number'){
return dayjs(date*1000);


Write Preview
Loading…
取消
儲存