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

update UI

master
Anna Ho 2 年之前
父節點
ddc902b65c
當前提交
3e304e8f49
共有 4 個檔案被更改，包括 189 行新增 和 158 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -5
      src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
  2. +7
    -13
      src/pages/PublicNotice/ListPanel/InProgressTab.js
  3. +68
    -30
      src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
  4. +110
    -110
      src/utils/FieldUtils.js

+ 4
- 5
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js 查看文件

@@ -76,7 +76,6 @@ const PublicNoticeApplyForm = ({loadedData}) => {
var selection = [];
for (var i = 0; i < formData?.gazetteIssueList?.length; i++) {
let data = formData.gazetteIssueList[i];
"2023 Vol 027, No. 36, 8 Sep 2023 (Fri)"
let label = data.year
+" Vol. "+zeroPad(data.volume,3)
+", No. "+zeroPad(data.issueNo,2)
@@ -92,7 +91,7 @@ const PublicNoticeApplyForm = ({loadedData}) => {
}

return (
<Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}>
<Grid container style={{ padding: 24}} rowSpacing={16} columnSpacing={2.75}>
<Grid item xs={12}>
<Typography variant="h5">申請公共啟事</Typography>
</Grid>
@@ -129,11 +128,11 @@ const PublicNoticeApplyForm = ({loadedData}) => {
<Grid item lg={4}></Grid>
<Grid item lg={4}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
<Grid item lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
目標期數:
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
<Grid item lg={6}>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
id="issueId"
@@ -188,7 +187,7 @@ const PublicNoticeApplyForm = ({loadedData}) => {
})}
<Grid item lg={4}></Grid>
<Grid item lg={12}>
<Grid item xs={12}>
<center>
<Button
variant="contained"


+ 7
- 13
src/pages/PublicNotice/ListPanel/InProgressTab.js 查看文件

@@ -3,13 +3,13 @@ import * as React from 'react';
import {
DataGrid,
} from "@mui/x-data-grid";
import {
import {
Button
} from '@mui/material';
import * as DateUtils from "../../../utils/DateUtils"
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({rows}) {
export default function SubmittedTab({ rows }) {
const [rowModesModel] = React.useState({});

const columns = [
@@ -24,7 +24,7 @@ export default function SubmittedTab({rows}) {
field: 'created',
headerName: '提交日期',
flex: 1,
valueGetter:(params)=>{
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
@@ -33,18 +33,12 @@ export default function SubmittedTab({rows}) {
field: 'remarks',
headerName: '我的備註',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'status',
field: 'status',
headerName: '狀態',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}
},
{
field: 'actions',
@@ -53,13 +47,13 @@ export default function SubmittedTab({rows}) {
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>;
return <Button onClick={() => { }}>查看詳細</Button>;
},
}
];

return (
<div style={{height: 400, width: '100%'}}>
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
@@ -67,11 +61,11 @@ export default function SubmittedTab({rows}) {
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
paginationModel: { page: 0, pageSize: 5 },
},
}}
pageSizeOptions={[5, 10]}
autoHeight = {true}
autoHeight={true}
/>
</div>
);


+ 68
- 30
src/pages/PublicNotice/ListPanel/PendingPaymentTab.js 查看文件

@@ -3,14 +3,20 @@ import * as React from 'react';
import {
DataGrid,
} from "@mui/x-data-grid";
import {
Button
import {
Stack,
Typography,
Button,
Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"

// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({rows}) {
const [rowModesModel] = React.useState({});
export default function SubmittedTab({ rows }) {
const [selectedRowItems, setSelectedRowItems] = React.useState([]);
const [isPopUp, setIsPopUp] = React.useState(false);


const columns = [
{
@@ -24,7 +30,7 @@ export default function SubmittedTab({rows}) {
field: 'created',
headerName: '提交日期',
flex: 1,
valueGetter:(params)=>{
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
@@ -33,18 +39,13 @@ export default function SubmittedTab({rows}) {
field: 'remarks',
headerName: '我的備註',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}

},
{
id: 'status',
field: 'status',
headerName: '狀態',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params.value);
}
},
{
field: 'actions',
@@ -53,31 +54,68 @@ export default function SubmittedTab({rows}) {
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>;
return <Button onClick={() => { }}>查看詳細</Button>;
},
}
];

const onPaymentClick=()=>{
const getWindowContent = () => {
var content = [];
const datas = rows?.filter((row) =>
selectedRowItems.includes(row.id)
);
for (var i = 0; i < datas?.length; i++) {
content.push(<>
<Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
備註: {datas[i].remarks}
<br /><br />
</>);
}
return content;
}

return (
<div style={{height: 400, width: '100%'}}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
pageSizeOptions={[5, 10]}
autoHeight = {true}
/>
<Button variant="contained" onClick={()=>{onPaymentClick()}}>付款</Button>
</div>
<>
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
disableRowSelectionOnClick
rows={rows}
columns={columns}
editMode="row"
rowSelectionModel={selectedRowItems}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
pageSizeOptions={[5, 10]}
autoHeight={true}
onRowSelectionModelChange={(newSelection) => {
setSelectedRowItems(newSelection);
}}
/>
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
</div>

<div>
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} >
<DialogTitle></DialogTitle>
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
{getWindowContent()}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>Close</Button>
<Button onClick={() => setIsPopUp(false)}>確認</Button>
</DialogActions>
</Dialog>
</div>
</>
);



}

+ 110
- 110
src/utils/FieldUtils.js 查看文件

@@ -5,152 +5,152 @@ import {

import Combo from "./Combo";

export const getDateField=({label, valueName, form, disabled})=>{
export const getDateField = ({ label, valueName, form, disabled }) => {
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'}}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
{initField({
type:"date",
valueName:valueName,
form:form,
disabled:disabled
})}
<Grid item lg={6}>
{initField({
type: "date",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getTextField=({label, valueName, form, disabled})=>{
return <Grid item lg={4} >
export const getTextField = ({ label, valueName, form, disabled }) => {
return <Grid item xs={12} 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'}}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
{initField({
type:"text",
valueName:valueName,
form:form,
disabled:disabled
})}
<Grid item lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>;
}

export const getTextArea=({label, valueName, form, disabled, ...props})=>{
return <Grid item lg={4} >
export const getTextArea = ({ label, valueName, form, disabled, ...props }) => {
return <Grid item xs={12} 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'}}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={7} s={7} md={7} lg={6}>
{initField({
type:"text",
valueName:valueName,
form:form,
disabled:disabled,
<Grid item lg={6}>
{initField({
type: "text",
valueName: valueName,
form: form,
disabled: disabled,
multiline: true,
row:10,
row: 10,
minRows: 4,
maxRows: 4,
props
})}
})}
</Grid>
</Grid>
</Grid>;
}

export const getPhoneField=({label, valueName, form, disabled})=>{
export const getPhoneField = ({ label, valueName, form, disabled }) => {
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}>
{initField({
type:"tel",
valueName:valueName.code,
form:form,
disabled:disabled
})}
</Grid>
<Grid item xs={4}>
{initField({
type:"tel",
valueName:valueName.num,
form:form,
disabled:disabled
})}
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item xs={2}>
{initField({
type: "tel",
valueName: valueName.code,
form: form,
disabled: disabled
})}
</Grid>
<Grid item xs={4}>
{initField({
type: "tel",
valueName: valueName.num,
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>
</Grid>;
</Grid>;
}


export const getAddressField=({label, valueName, form, disabled})=>{
export const getAddressField = ({ label, valueName, form, disabled }) => {
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}>
{initField({
type:"text",
valueName:valueName[0],
form:form,
disabled:disabled
})}
<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={12}>
{initField({
type:"text",
valueName:valueName[1],
form:form,
disabled:disabled
<Grid item lg={6}>
<Grid item lg={12}>
{initField({
type: "text",
valueName: valueName[0],
form: form,
disabled: disabled
})}
</Grid>
<Grid item lg={12}>
{initField({
type:"text",
valueName:valueName[2],
form:form,
disabled:disabled
</Grid>
<Grid item lg={12}>
{initField({
type: "text",
valueName: valueName[1],
form: form,
disabled: disabled
})}
</Grid>
<Grid item lg={12}>
{initField({
type: "text",
valueName: valueName[2],
form: form,
disabled: disabled
})}
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>;
</Grid>;
}

export const getComboField=({label,dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props})=>{
export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
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}>
<Combo
valueName={valueName}
disabled={disabled}
dataList={dataList}
form={form}
filterOptions={filterOptions}
getOptionLabel={getOptionLabel}
onInputChange={onInputChange}
onChange={onChange}
{...props}
/>
<Grid container alignItems={"center"}>
<Grid item lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
{label}
</Grid>
<Grid item lg={6}>
<Combo
valueName={valueName}
disabled={disabled}
dataList={dataList}
form={form}
filterOptions={filterOptions}
getOptionLabel={getOptionLabel}
onInputChange={onInputChange}
onChange={onChange}
{...props}
/>
{/* <Autocomplete
id={key}
name={key}
@@ -174,12 +174,12 @@ export const getComboField=({label,dataList, valueName, form, disabled, getOptio
/>
)}
/> */}
</Grid>
</Grid>
</Grid>;
</Grid>
</Grid>;
}

export const initField=({type, valueName, form, disabled, multiline, placeholder, inputProps, ...props})=>{
export const initField = ({ type, valueName, form, disabled, multiline, placeholder, inputProps, ...props }) => {
let err = Boolean(form.errors[valueName]);

return <TextField
@@ -191,16 +191,16 @@ export const initField=({type, valueName, form, disabled, multiline, placeholder
placeholder={placeholder}
inputProps={inputProps}
error={err}
helperText={form.errors[valueName]?form.errors[valueName]:''}
helperText={form.errors[valueName] ? form.errors[valueName] : ''}
onChange={form.handleChange}
value={form.values[valueName]}
disabled={disabled}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
WebkitTextFillColor: "#000000",
background: "#f8f8f8",
},
}}
}}
{...props}
/>
}

Write Preview
Loading…
取消
儲存