@@ -97,7 +97,7 @@ const AuthLoginCustom = () => { | |||||
submit: null | submit: null | ||||
}), | }), | ||||
validationSchema:yup.object().shape({ | validationSchema:yup.object().shape({ | ||||
username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | |||||
// username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | |||||
password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') | password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') | ||||
.matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') | .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') | ||||
.matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') | .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') | ||||
@@ -109,8 +109,8 @@ const AuthLoginCustom = () => { | |||||
const checkDataField = (data)=> { | const checkDataField = (data)=> { | ||||
if (data.username !==""&& | if (data.username !==""&& | ||||
data.password !==""&& | data.password !==""&& | ||||
handlePassword(data.password)&& | |||||
handle8Digi(data.username) | |||||
handlePassword(data.password) | |||||
// &&handle6Digi(data.username) | |||||
) | ) | ||||
{ | { | ||||
setisValid(true) | setisValid(true) | ||||
@@ -140,13 +140,13 @@ const AuthLoginCustom = () => { | |||||
} | } | ||||
} | } | ||||
function handle8Digi(value) { | |||||
if (value.length < 8) { | |||||
return false; | |||||
} else { | |||||
return true; | |||||
} | |||||
} | |||||
// function handle6Digi(value) { | |||||
// if (value.length < 6) { | |||||
// return false; | |||||
// } else { | |||||
// return true; | |||||
// } | |||||
// } | |||||
const { values } = formik | const { values } = formik | ||||
useEffect(() => { | useEffect(() => { | ||||
@@ -147,6 +147,8 @@ const CustomFormWizard = (props) => { | |||||
const uploadFileList = event.target.files; | const uploadFileList = event.target.files; | ||||
const saveFileList = []; | const saveFileList = []; | ||||
var currentIndex = 0; | var currentIndex = 0; | ||||
// console.log("uploadFileList") | |||||
// console.log(uploadFileList) | |||||
if (currentFileList.length!=null){ | if (currentFileList.length!=null){ | ||||
currentIndex = currentFileList.length; | currentIndex = currentFileList.length; | ||||
@@ -156,10 +158,14 @@ const CustomFormWizard = (props) => { | |||||
saveFileList.push(file); | saveFileList.push(file); | ||||
} | } | ||||
} | } | ||||
// console.log("saveFileList") | |||||
// console.log(saveFileList) | |||||
for (let i = 0; i < uploadFileList.length && currentIndex>5; i++){ | |||||
for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){ | |||||
const file = event.target.files[i] | const file = event.target.files[i] | ||||
let isDuplicate = false; | let isDuplicate = false; | ||||
// console.log("file 1") | |||||
// console.log(file) | |||||
// Check if the file name already exists in saveFileList | // Check if the file name already exists in saveFileList | ||||
for (let j = 0; j < saveFileList.length; j++) { | for (let j = 0; j < saveFileList.length; j++) { | ||||
if (saveFileList[j].name === file.name) { | if (saveFileList[j].name === file.name) { | ||||
@@ -168,6 +174,8 @@ const CustomFormWizard = (props) => { | |||||
} | } | ||||
} | } | ||||
if (!isDuplicate) { | if (!isDuplicate) { | ||||
// console.log("file2") | |||||
// console.log(file) | |||||
file.id = currentIndex+i | file.id = currentIndex+i | ||||
saveFileList.push(file) | saveFileList.push(file) | ||||
updateList.items.add(file); | updateList.items.add(file); | ||||
@@ -178,6 +186,8 @@ const CustomFormWizard = (props) => { | |||||
setFileListData(saveFileList) | setFileListData(saveFileList) | ||||
setFileList(updatedFileList); | setFileList(updatedFileList); | ||||
// console.log("saveFileList2") | |||||
// console.log(saveFileList) | |||||
}; | }; | ||||
useEffect(() => { | useEffect(() => { | ||||
@@ -370,7 +380,8 @@ const CustomFormWizard = (props) => { | |||||
const handleReset = (resetForm) => { | const handleReset = (resetForm) => { | ||||
resetForm(); | resetForm(); | ||||
setSelectedAddress4("") | setSelectedAddress4("") | ||||
setSelectedIdDocType("") | |||||
setSelectedIdDocType({}) | |||||
// setSelectedIdDocLabel("") | // setSelectedIdDocLabel("") | ||||
}; | }; | ||||
@@ -1254,6 +1265,18 @@ const CustomFormWizard = (props) => { | |||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
:null} | :null} | ||||
<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? | |||||
<UploadFileTable recordList={fileListData} />:null} | |||||
</Stack> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -2,13 +2,16 @@ | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | import { | ||||
DataGrid, | DataGrid, | ||||
// GridActionsCellItem, | |||||
GridActionsCellItem, | |||||
} from "@mui/x-data-grid"; | } from "@mui/x-data-grid"; | ||||
// import EditIcon from '@mui/icons-material/Edit'; | |||||
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; | |||||
import {useEffect} from "react"; | import {useEffect} from "react"; | ||||
// import {useNavigate} from "react-router-dom"; | // import {useNavigate} from "react-router-dom"; | ||||
// import { useTheme } from '@mui/material/styles'; | // import { useTheme } from '@mui/material/styles'; | ||||
import {Box} from '@mui/material'; | |||||
import { | |||||
// Box, | |||||
Stack | |||||
} from '@mui/material'; | |||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
export default function UploadFileTable({recordList}) { | export default function UploadFileTable({recordList}) { | ||||
@@ -22,29 +25,38 @@ export default function UploadFileTable({recordList}) { | |||||
setRows(recordList); | setRows(recordList); | ||||
}, [recordList]); | }, [recordList]); | ||||
// const handleEditClick = (id) => () => { | |||||
// navigate('/user/'+ id); | |||||
// }; | |||||
function NoRowsOverlay() { | |||||
return ( | |||||
<Stack height="100%" alignItems="center" justifyContent="center"> | |||||
沒有上傳檔案 | |||||
{/* <pre>(rows={[]})</pre> */} | |||||
</Stack> | |||||
); | |||||
} | |||||
const handleEditClick = () => () => { | |||||
// navigate('/user/'+ id); | |||||
}; | |||||
const columns = [ | const columns = [ | ||||
// { | |||||
// field: 'actions', | |||||
// type: 'actions', | |||||
// headerName: 'Actions', | |||||
// width: 100, | |||||
// cellClassName: 'actions', | |||||
// getActions: ({id}) => { | |||||
// return [ | |||||
// <GridActionsCellItem | |||||
// key="OutSave" | |||||
// icon={<EditIcon/>} | |||||
// label="Edit" | |||||
// className="textPrimary" | |||||
// onClick={handleEditClick(id)} | |||||
// color="primary" | |||||
// />] | |||||
// }, | |||||
// }, | |||||
{ | |||||
field: 'actions', | |||||
type: 'actions', | |||||
headerName: '', | |||||
width: 30, | |||||
cellClassName: 'actions', | |||||
getActions: ({id}) => { | |||||
return [ | |||||
<GridActionsCellItem | |||||
key="OutSave" | |||||
icon={<RemoveCircleOutlineIcon/>} | |||||
label="delete" | |||||
className="textPrimary" | |||||
onClick={handleEditClick(id)} | |||||
color="error" | |||||
/>] | |||||
}, | |||||
}, | |||||
{ | { | ||||
id: 'name', | id: 'name', | ||||
field: 'name', | field: 'name', | ||||
@@ -56,7 +68,7 @@ export default function UploadFileTable({recordList}) { | |||||
field: 'size', | field: 'size', | ||||
headerName: '檔案大小', | headerName: '檔案大小', | ||||
valueGetter: (params) => { | valueGetter: (params) => { | ||||
console.log(params) | |||||
// console.log(params) | |||||
return Math.ceil(params.value/1024)+" KB"; | return Math.ceil(params.value/1024)+" KB"; | ||||
}, | }, | ||||
flex: 1, | flex: 1, | ||||
@@ -64,7 +76,7 @@ export default function UploadFileTable({recordList}) { | |||||
]; | ]; | ||||
return ( | return ( | ||||
<Box style={{height: '20%', width: '100%',}}> | |||||
<div style={{ height: 200, width: '100%' }}> | |||||
<DataGrid | <DataGrid | ||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
@@ -72,14 +84,19 @@ export default function UploadFileTable({recordList}) { | |||||
sx={{border:1}} | sx={{border:1}} | ||||
rowModesModel={rowModesModel} | rowModesModel={rowModesModel} | ||||
disablePagination | disablePagination | ||||
components={{ NoRowsOverlay, }} | |||||
initialState={{ | initialState={{ | ||||
pagination: { | pagination: { | ||||
paginationModel: {}, | paginationModel: {}, | ||||
}, | }, | ||||
}} | }} | ||||
hideFooterPagination={true} | |||||
autoHeight = {true} | |||||
// hideFooterPagination={true} | |||||
disableSelectionOnClick | |||||
disableColumnMenu | |||||
disableColumnSelector | |||||
hideFooter | |||||
//autoHeight = {true} | |||||
/> | /> | ||||
</Box> | |||||
</div> | |||||
); | ); | ||||
} | } |