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
Anna Ho 2 年之前
父節點
c1d9e99bf5 ebf4b375c8
當前提交
a9eae2b24c
共有 10 個檔案被更改，包括 402 行新增 和 119 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/pages/authentication/BusRegister.js
  2. +1
    -1
      src/pages/authentication/Register.js
  3. +20
    -14
      src/pages/authentication/auth-forms/AuthLoginCustom.js
  4. +125
    -34
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  5. +90
    -58
      src/pages/authentication/auth-forms/CustomFormWizard.js
  6. +48
    -0
      src/pages/authentication/auth-forms/PasswordAlertDialog.js
  7. +107
    -0
      src/pages/authentication/auth-forms/PreviewUploadFileTable.js
  8. +4
    -6
      src/pages/authentication/auth-forms/UploadFileTable.js
  9. +1
    -1
      src/utils/ApiPathConst.js
  10. +5
    -4
      src/utils/HttpUtils.js

+ 1
- 1
src/pages/authentication/BusRegister.js 查看文件

@@ -125,7 +125,7 @@
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack direction="row" sx={{ pb: 2 }}>
<Stack sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Stack>


+ 1
- 1
src/pages/authentication/Register.js 查看文件

@@ -141,7 +141,7 @@ const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
<CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack direction="row" sx={{ pb: 2 }}>
{ activeStep === 2|| activeStep === 0? (
<Button
color="inherit"


+ 20
- 14
src/pages/authentication/auth-forms/AuthLoginCustom.js 查看文件

@@ -1,6 +1,8 @@
import React, {
useEffect,
useState} from 'react';
useState,
lazy
} from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {useNavigate} from 'react-router-dom';
import {useForm,} from 'react-hook-form'
@@ -29,6 +31,8 @@ import { useFormik,FormikProvider } from 'formik';
// project import
//import FirebaseSocial from './FirebaseSocial';
import AnimateButton from 'components/@extended/AnimateButton';
import Loadable from 'components/Loadable';
const PasswordAlertDialog = Loadable(lazy(() => import('./PasswordAlertDialog')));

// assets
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
@@ -51,9 +55,9 @@ const AuthLoginCustom = () => {

// let [posts, setPosts] = useState([]);
const [isValid, setisValid] = useState(false);
const [isSuccess, setSuccess] = useState();
const [isSumitting, setSumitting] = useState();
// const [isSuccess, setSuccess] = useState();
// const [isSumitting, setSumitting] = useState();
const [open, setOpen] = React.useState(false);
// useEffect(() => {
// // console.log("POST: " + posts.accessToken);
// },[posts]);
@@ -64,7 +68,7 @@ const AuthLoginCustom = () => {

const tryLogin = () => {
if(isValid){
setSumitting(true)
// setSumitting(true)
useJwt
.login({username: values.username, password: values.password})
.then((response) => {
@@ -77,16 +81,18 @@ const AuthLoginCustom = () => {
//avatar: require('src/assets/images/users/avatar-3.png').default,
}
const data = {...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken}
setSuccess(true)
// setSuccess(true)
dispatch(handleLogin(data))
navigate('/dashboard');
setSumitting(false)
console.log(isSuccess)
// setSumitting(false)
})
.catch((error) => {
setSuccess(false)
// setSuccess(false)
setOpen(true)
console.error(error)
});
}else{
setOpen(true)
}
}

@@ -149,6 +155,10 @@ const AuthLoginCustom = () => {
// }
// }

const handleClose = () => {
setOpen(false);
};

const { values } = formik
useEffect(() => {
checkDataField(values)
@@ -162,11 +172,6 @@ const AuthLoginCustom = () => {
<Grid container spacing={3}>
<Grid item xs={12}>
<Stack spacing={1}>
{!isSuccess && isSumitting && (
<FormHelperText error id="standard-weight-helper-text-username-login">
用戶登入名稱或密碼錯誤
</FormHelperText>
)}
<InputLabel htmlFor="email-login">用戶登入名稱</InputLabel>
<OutlinedInput
id="username"
@@ -269,6 +274,7 @@ const AuthLoginCustom = () => {
{/* <FirebaseSocial />*/}
{/*</Grid> */}
</Grid>
<PasswordAlertDialog open={open} handleClose={handleClose}/>
</form>
</FormikProvider>
);


+ 125
- 34
src/pages/authentication/auth-forms/BusCustomFormWizard.js 查看文件

@@ -28,15 +28,16 @@ import * as yup from 'yup';
// import AnimateButton from 'components/@extended/AnimateButton';

import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
// import {apiPath} from "auth/utils";
import axios from "axios";
import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
import * as HttpUtils from 'utils/HttpUtils';
// import * as HttpUtils from 'utils/HttpUtils';

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable')));
// import UploadFileTable from './UploadFileTable';
// import LoadingComponent from "../../extra-pages/LoadingComponent";

@@ -57,6 +58,7 @@ const BusCustomFormWizard = (props) => {
const [fileListData, setFileListData] = useState([]);
const [checkUpload, setCheckUpload] = useState(false);
const [isLoading, setLoding] = useState(true);
const [updateRows, setUpdateRows] = useState([]);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
@@ -92,6 +94,7 @@ const BusCustomFormWizard = (props) => {
+ "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
+ "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
+ "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
const refType = "identification";

useEffect(() => {
changePassword('');
@@ -137,23 +140,66 @@ const BusCustomFormWizard = (props) => {
}
};

useEffect(() => {
let updateRowList = new DataTransfer();
var updateRowsIndex = updateRows.length;
const saveFileList = [];

if (updateRowsIndex!=null){
for (let i = 0; i < updateRowsIndex; i++){
const file = updateRows[i]
file.id = i;
updateRowList.items.add(file);
saveFileList.push(file);
}
let updatedFileList = updateRowList.files;
setFileList(updatedFileList);
setFileListData(saveFileList)
}

}, [updateRows]);

const handleFileUpload = (event)=>{
let updateList = new DataTransfer();
let currentFileList = fileListData;
const uploadFileList = event.target.files;
const saveFileList = [];
var currentIndex = 0;

if (!fileList.length==null){
currentIndex = fileList.length;
if (currentFileList.length!=null){
currentIndex = currentFileList.length;
for (let i = 0; i < currentIndex; i++){
const file = currentFileList[i]
// file.id = currentIndex;
updateList.items.add(file);
saveFileList.push(file);
}
}

for (let i = 0; i < uploadFileList.length; i++){
for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){
const file = event.target.files[i]
file.id = currentIndex+i+1
saveFileList.push(file)
let isDuplicate = false;

// Check if the file name already exists in saveFileList
for (let j = 0; j < saveFileList.length; j++) {
if (saveFileList[j].name === file.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate && i+currentIndex<5) {
file.id = currentIndex+i
saveFileList.push(file)
updateList.items.add(file);
}
console.log("currentIndex")
console.log(currentIndex)
}
let updatedFileList = updateList.files;

setFileListData(saveFileList)
setFileList(uploadFileList);
setFileList(updatedFileList);
};

useEffect(() => {
@@ -204,9 +250,8 @@ const BusCustomFormWizard = (props) => {
tncFlag = false
}

if (isValid){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: values.username,
const user = {
username: values.username,
password: values.password,
name: values.username,
enCompanyName: values.enCompanyName,
@@ -214,27 +259,36 @@ const BusCustomFormWizard = (props) => {
emailBus: values.email,
brNo:values.brNo,
brExpiryDate:values.brExpiryDate,
userFaxNo:userFaxNo,
busUserContactTel:busUserContactTel,
busUserAddress:busUserAddress,
contactPerson: values.enName,
tncFlag:tncFlag,
type:"ORG"
};

var formData = new FormData();
for (let i = 0; i < fileListData.length; i++){
const file = fileListData[i]
formData.append("multipartFileList", file);
}
formData.append("refType", refType);
for (const [key, value] of Object.entries(user)) {
formData.append(key, value);
}
formData.append("userFaxNo", JSON.stringify(userFaxNo));
formData.append("busUserContactTel", JSON.stringify(busUserContactTel));
formData.append("busUserAddress", JSON.stringify(busUserAddress));

if (isValid){
axios.post(POST_PUBLIC_USER_REGISTER, formData,{
headers: {
"Content-Type":"multipart/form-data"
}
})
.then((response) => {
console.log(response)
setCheckUpload(true)
HttpUtils.fileUpload(
{
refType:"brFile",
refId: response.data.id,
file: fileList[0],
onSuccess: (response)=>{
console.log(response);
setLoding(false);
// setOpen(true);
}
}
);
setLoding(false);
})
.catch(error => {
console.error(error);
@@ -276,7 +330,6 @@ const BusCustomFormWizard = (props) => {
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// var result = reg.test(email);
var result = email.match(validRegex);
console.log("test1: "+result)
if (result == false) {
return false;
}
@@ -836,7 +889,14 @@ const BusCustomFormWizard = (props) => {
value={formik.values.phoneCountryCode}
name="phoneCountryCode"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("phoneCountryCode",value);
}}
placeholder="國際區號"
error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur}
@@ -856,7 +916,14 @@ const BusCustomFormWizard = (props) => {
value={formik.values.phone}
name="phone"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("phone",value);
}}
placeholder="聯絡電話"
error={Boolean(formik.touched.phone && formik.errors.phone)}
inputProps={{
@@ -892,7 +959,14 @@ const BusCustomFormWizard = (props) => {
value={formik.values.faxCountryCode}
name="faxCountryCode"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("faxCountryCode",value);
}}
placeholder="國際區號"
inputProps={{
maxLength: 3,
@@ -910,7 +984,14 @@ const BusCustomFormWizard = (props) => {
value={formik.values.fax}
name="fax"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("fax",value);
}}
placeholder="傳真號碼"
inputProps={{
maxLength: 8,
@@ -937,7 +1018,7 @@ const BusCustomFormWizard = (props) => {
<span style={{color: '#f10000'}}>*</span>
</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
{/* <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> */}
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳商業登記證及其他文件
<input
@@ -953,7 +1034,7 @@ const BusCustomFormWizard = (props) => {
{/* <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography> */}
</Stack>
{fileList !=null?
<UploadFileTable recordList={fileListData} />:null}
<UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows}/>:null}
{/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
<Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
@@ -1178,7 +1259,17 @@ const BusCustomFormWizard = (props) => {
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12} mt={1} mb={1}>
<Grid container>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
{fileList !=null?
<PreviewUploadFileTable key="previewTable" recordList={fileListData} />:null}
</Stack>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>


+ 90
- 58
src/pages/authentication/auth-forms/CustomFormWizard.js 查看文件

@@ -27,15 +27,16 @@ import * as yup from 'yup';
// project import
// import AnimateButton from 'components/@extended/AnimateButton';
import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
// import {apiPath} from "auth/utils";
import axios from "axios";
import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
import * as HttpUtils from 'utils/HttpUtils';
// import * as HttpUtils from 'utils/HttpUtils';
import * as ComboData from "../../../utils/ComboData";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const UploadFileTable = Loadable(lazy(() => import('./UploadFileTable')));
const PreviewUploadFileTable = Loadable(lazy(() => import('./PreviewUploadFileTable')));
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// import UploadFileTable from './UploadFileTable';
// import LoadingComponent from "../../extra-pages/LoadingComponent";
@@ -58,6 +59,7 @@ const CustomFormWizard = (props) => {
const [fileList, setFileList] = useState([]);
const [fileListData, setFileListData] = useState([]);
const [checkUpload, setCheckUpload] = useState(false);
const [isLoading, setLoding] = useState(true);
const [updateRows, setUpdateRows] = useState([]);

const handleClickShowPassword = () => {
@@ -83,7 +85,6 @@ const CustomFormWizard = (props) => {
const [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const [isValid, setisValid] = useState(false);
const [isLoading, setLoding] = useState(true);

const idDocTypeComboList = ComboData.idDocType;
const address4ComboList = ComboData.district;
@@ -96,6 +97,7 @@ const CustomFormWizard = (props) => {
+ "於所有文本、平面圖像、圖畫、圖片、照片以及數據或其他資料的匯編，均受版權保障。\n香"
+ "港特別行政區政府是本網頁內所有版權作品的擁有人，除非預先得到政府物流服務署的書面"
+ "授權，否則嚴禁複製、改編、分發、發布或向公眾提供該等版權作品。"
const refType = "identification";

useEffect(() => {
changePassword('');
@@ -143,17 +145,21 @@ const CustomFormWizard = (props) => {
};

useEffect(() => {
console.log(updateRows);
let updateRowList = new DataTransfer();
var updateRowsIndex = updateRows.length;
const saveFileList = [];

if (updateRowsIndex!=null){
for (let i = 0; i < updateRowsIndex; i++){
const file = updateRows[i]
file.id = i;
updateRowList.items.add(file);
saveFileList.push(file);
}
let updatedFileList = updateRowList.files;
setFileList(updatedFileList);
setFileListData(saveFileList)
}

}, [updateRows]);
@@ -164,25 +170,21 @@ const CustomFormWizard = (props) => {
const uploadFileList = event.target.files;
const saveFileList = [];
var currentIndex = 0;
// console.log("uploadFileList")
// console.log(uploadFileList)

if (currentFileList.length!=null){
currentIndex = currentFileList.length;
for (let i = 0; i < currentIndex; i++){
const file = currentFileList[i]
// file.id = currentIndex;
updateList.items.add(file);
saveFileList.push(file);
}
}
// console.log("saveFileList")
// console.log(saveFileList)

for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){
const file = event.target.files[i]
let isDuplicate = false;
// console.log("file 1")
// console.log(file)

// Check if the file name already exists in saveFileList
for (let j = 0; j < saveFileList.length; j++) {
if (saveFileList[j].name === file.name) {
@@ -190,9 +192,7 @@ const CustomFormWizard = (props) => {
break;
}
}
if (!isDuplicate) {
// console.log("file2")
// console.log(file)
if (!isDuplicate && i+currentIndex<5) {
file.id = currentIndex+i
saveFileList.push(file)
updateList.items.add(file);
@@ -203,8 +203,6 @@ const CustomFormWizard = (props) => {

setFileListData(saveFileList)
setFileList(updatedFileList);
// console.log("saveFileList2")
// console.log(saveFileList)
};

useEffect(() => {
@@ -256,38 +254,50 @@ const CustomFormWizard = (props) => {
if (termsAndConNotAccept){
tncFlag = false
}

const user = {
username: values.username,
password: values.password,
name: values.username,
enName: values.enName,
chName: values.chName,
emailAddress: values.email,
idDocType:values.idDocType,
identification:values.idNo,
checkDigit:values.checkDigit,
tncFlag:tncFlag,
type:"IND",
};

var formData = new FormData();
for (let i = 0; i < fileListData.length; i++){
const file = fileListData[i]
formData.append("multipartFileList", file);
}
formData.append("refType", refType);
for (const [key, value] of Object.entries(user)) {
formData.append(key, value);
}
formData.append("userFaxNo", JSON.stringify(userFaxNo));
formData.append("userMobileNumber", JSON.stringify(userMobileNumber));
formData.append("userAddress", JSON.stringify(userAddress));

// if(refCode){
// formData.append("refCode", refCode);
// }

if (isValid){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: values.username,
password: values.password,
name: values.username,
enName: values.enName,
chName: values.chName,
emailAddress: values.email,
idDocType:values.idDocType,
identification:values.idNo,
checkDigit:values.checkDigit,
userFaxNo:userFaxNo,
userMobileNumber:userMobileNumber,
userAddress:userAddress,
tncFlag:tncFlag,
type:"IND"
axios.post(POST_PUBLIC_USER_REGISTER, formData,{
headers: {
"Content-Type":"multipart/form-data"
}
})
.then((response) => {
console.log(response)
setCheckUpload(true)
HttpUtils.fileUpload(
{
refType:"identification",
refId: response.data.id,
file: fileList,
onSuccess: (response)=>{
console.log(response);
// setOpen(true);
setLoding(false);
}
}
);
setLoding(false);
})
.catch(error => {
console.error(error);
@@ -341,7 +351,6 @@ const CustomFormWizard = (props) => {
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// var result = reg.test(email);
var result = email.match(validRegex);
console.log("test1: "+result)
if (result == false) {
return false;
}
@@ -388,9 +397,9 @@ const CustomFormWizard = (props) => {
checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'),
idDocType: yup.string().max(255).required('請輸入證件類別'),
phoneCountryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'),
faxCountryCode: yup.string().min(3,'請輸入3位數字'),
// faxCountryCode: yup.string().min(3,'請輸入3位數字'),
phone: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'),
fax: yup.string().min(8,'請輸入8位數字'),
// fax: yup.string().min(8,'請輸入8位數字'),
}),
});

@@ -599,11 +608,8 @@ const CustomFormWizard = (props) => {
// getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
onBlur={formik.handleBlur}
onChange={(event, newValue) => {
// console.log(newValue)
if (newValue!=null){
console.log(newValue)
setSelectedIdDocType(newValue);
// setSelectedIdDocLabel(newValue.label);
if (newValue.type!="HKID"){
formik.setFieldValue("checkDigit","")
}
@@ -951,7 +957,14 @@ const CustomFormWizard = (props) => {
value={formik.values.phoneCountryCode}
name="phoneCountryCode"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("phoneCountryCode",value);
}}
placeholder="國際區號"
error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur}
@@ -971,7 +984,14 @@ const CustomFormWizard = (props) => {
value={formik.values.phone}
name="phone"
// onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("phone",value);
}}
placeholder="聯絡電話"
error={Boolean(formik.touched.phone && formik.errors.phone)}
onBlur={formik.handleBlur}
@@ -1007,7 +1027,14 @@ const CustomFormWizard = (props) => {
type="faxCountryCode"
value={formik.values.faxCountryCode}
name="faxCountryCode"
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("faxCountryCode",value);
}}
placeholder="國際區號"
onBlur={formik.handleBlur}
inputProps={{
@@ -1026,7 +1053,14 @@ const CustomFormWizard = (props) => {
value={formik.values.fax}
name="fax"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
// onChange={formik.handleChange}
onChange={(event) => {
const value = event.target.value;
if (value.match(/[^0-9]/)) {
return event.preventDefault();
}
formik.setFieldValue("fax",value);
}}
placeholder="傳真號碼"
inputProps={{
maxLength: 8,
@@ -1067,7 +1101,7 @@ const CustomFormWizard = (props) => {
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
</Stack>
{fileList !=null?
<UploadFileTable recordList={fileListData} setUpdateRows={setUpdateRows} />:null}
<UploadFileTable key="uploadTable" recordList={fileListData} setUpdateRows={setUpdateRows}/>:null}
{/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
<Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
@@ -1288,13 +1322,11 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
{fileList !=null?
<UploadFileTable recordList={fileListData} updateRows={updateRows} />:null}
<PreviewUploadFileTable key="previewTable" recordList={fileListData} />:null}
</Stack>
</Grid>
</Grid>
</Grid>

</Grid>
</Grid>
</Grid>


+ 48
- 0
src/pages/authentication/auth-forms/PasswordAlertDialog.js 查看文件

@@ -0,0 +1,48 @@
import React, {
// useEffect,
// useState
} from 'react';

// material-ui
import {
Button,
// Link,
Stack,
Typography,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle
} from '@mui/material';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';

const PasswordAlertDialog = (props) => {
return (
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<Stack mt={1} mr={4} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<CancelOutlinedIcon color="error" sx={{width:"35px",height:"40px"}}/>
<Typography display="inline" variant="h4">用戶名或密碼錯誤</Typography>
</Stack>
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{""}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
關閉
</Button>
</DialogActions>
</Dialog>
);
};

export default PasswordAlertDialog;

+ 107
- 0
src/pages/authentication/auth-forms/PreviewUploadFileTable.js 查看文件

@@ -0,0 +1,107 @@
// material-ui
import * as React from 'react';
import {
DataGrid,
// GridActionsCellItem,
// GridRowModes
} from "@mui/x-data-grid";
// import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import {useEffect} from "react";
// import {useNavigate} from "react-router-dom";
// import { useTheme } from '@mui/material/styles';
import {
Box,
Stack
} from '@mui/material';
// ==============================|| EVENT TABLE ||============================== //

export default function PreviewUploadFileTable({recordList,}) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel] = React.useState({});
// const theme = useTheme();

// const navigate = useNavigate()

useEffect(() => {
setRows(recordList);
}, [recordList]);

function NoRowsOverlay() {
return (
<Stack height="100%" alignItems="center" justifyContent="center">
沒有上傳檔案
{/* <pre>(rows=&#123;[]&#125;)</pre> */}
</Stack>
);
}

// const handleCancelClick = (id) => () => {
// setRowModesModel({
// ...rowModesModel,
// [id]: { mode: GridRowModes.View, ignoreModifications: true },
// });
// console.log("Starting Delete")
// const editedRow = rows.find((row) => row.id === id);
// console.log(editedRow)
// console.log(editedRow.isNew)
// setUpdateRows(rows.filter((row) => row.id !== id));
// setRows(rows.filter((row) => row.id !== id));
// }

const columns = [
// {
// field: 'actions',
// type: 'actions',
// headerName: '',
// width: 30,
// cellClassName: 'actions',
// getActions: ({id}) => {
// return [
// <GridActionsCellItem
// key="OutSave"
// icon={<RemoveCircleOutlineIcon/>}
// label="delete"
// className="textPrimary"
// onClick={handleCancelClick(id)}
// color="error"
// />]
// },
// },
{
id: 'name',
field: 'name',
headerName: '檔案名稱',
flex: 1,
},
{
id: 'size',
field: 'size',
headerName: '檔案大小',
valueGetter: (params) => {
// console.log(params)
return Math.ceil(params.value/1024)+" KB";
},
flex: 1,
},
];

return (
<Box style={{ height: '200px', width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
sx={{border:1}}
rowModesModel={rowModesModel}
disablePagination
components={{ NoRowsOverlay, }}
// hideFooterPagination={true}
disableSelectionOnClick
disableColumnMenu
disableColumnSelector
hideFooter
/>
</Box>
);
}

+ 4
- 6
src/pages/authentication/auth-forms/UploadFileTable.js 查看文件

@@ -15,7 +15,7 @@ import {
} from '@mui/material';
// ==============================|| EVENT TABLE ||============================== //

export default function UploadFileTable({recordList, setUpdateRows}) {
export default function UploadFileTable({recordList, setUpdateRows,}) {
const [rows, setRows] = React.useState(recordList);
const [rowModesModel,setRowModesModel] = React.useState({});
@@ -25,12 +25,9 @@ export default function UploadFileTable({recordList, setUpdateRows}) {

useEffect(() => {
setRows(recordList);
// console.log(disableDelete);
}, [recordList]);

// useEffect(() => {
// console.log(updateRows);
// }, [updateRows]);

function NoRowsOverlay() {
return (
<Stack height="100%" alignItems="center" justifyContent="center">
@@ -45,7 +42,7 @@ export default function UploadFileTable({recordList, setUpdateRows}) {
...rowModesModel,
[id]: { mode: GridRowModes.View, ignoreModifications: true },
});
console.log("test123")
console.log("Starting Delete")
const editedRow = rows.find((row) => row.id === id);
console.log(editedRow)
console.log(editedRow.isNew)
@@ -60,6 +57,7 @@ export default function UploadFileTable({recordList, setUpdateRows}) {
headerName: '',
width: 30,
cellClassName: 'actions',
// hide:true,
getActions: ({id}) => {
return [
<GridActionsCellItem


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

@@ -37,4 +37,4 @@ export const GET_FILE_DELETE = apiPath+'/file/delete';
export const POST_LOGIN = '/login';

//register
export const POST_PUBLIC_USER_REGISTER = '/user/register';
export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';

+ 5
- 4
src/utils/HttpUtils.js 查看文件

@@ -54,11 +54,12 @@ export const fileDownload = ({fileId, skey, filename, onError}) =>{
});
};

export const fileUpload = ({ refType, refId, file,refCode, onSuccess, onFail, onError}) =>{
export const fileUpload = ({ refType, refId, files,refCode, onSuccess, onFail, onError}) =>{
console.log(files);
var formData = new FormData();
for (let i = 0; i < file.length; i++){
const file = file[i]
formData.append("multipartFile", file);
for (let i = 0; i < files.length; i++){
const file = files[i]
formData.append("multipartFileList", file);
}
// formData.append("multipartFile", file);
formData.append("refType", refType);


Write Preview
Loading…
取消
儲存