Skip to content

C
CmsPetrolPay
Commit e108ebbb by tdgiang
Options

update code

parent 52744883
Showing with 363 additions and 91 deletions
src/app/apis/Functions/dropdown.js
...@@ -54,3 +54,13 @@ export const dropdownMerchant = async (body) => ...@@ -54,3 +54,13 @@ export const dropdownMerchant = async (body) =>
GetData(url.dropdownMerchant, body) GetData(url.dropdownMerchant, body)
.then((res) => res) .then((res) => res)
.catch((err) => null) .catch((err) => null)
export const dropdownProduct = async (body) =>
GetData(url.dropdownProduct, body)
.then((res) => res)
.catch((err) => null)
export const dropdownProcutByType = async (id) =>
GetData(`${url.dropdownProcutByType}/${id}`, {})
.then((res) => res)
.catch((err) => null)
src/app/apis/url.js
...@@ -100,4 +100,5 @@ export default { ...@@ -100,4 +100,5 @@ export default {
dropdownProduct: `${root}/dropdown/productList`, dropdownProduct: `${root}/dropdown/productList`,
dropdownStore: `${root}/dropdown/listStore`, dropdownStore: `${root}/dropdown/listStore`,
dropdownMerchant: `${root}/dropdown/listmerchant`, dropdownMerchant: `${root}/dropdown/listmerchant`,
dropdownProcutByType: `${root}/dropdown/productListByType`,
} }
src/app/components/dialog/CreateField.jsx
import React, { useState, useEffect,use } from "react"; import React, { useState, useEffect, use } from 'react'
import { import {
Button, Button,
FormControl, FormControl,
...@@ -7,75 +7,63 @@ import { ...@@ -7,75 +7,63 @@ import {
Select, Select,
TextField, TextField,
Typography, Typography,
DialogActions,Dialog,DialogContent,DialogContentText,DialogTitle,IconButton,Icon,Tooltip DialogActions,
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Icon,
Tooltip,
} from '@material-ui/core' } from '@material-ui/core'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { hideLoading, showLoading } from 'app/redux/actions/loadingAction' import { hideLoading, showLoading } from 'app/redux/actions/loadingAction'
import { connect } from 'react-redux' import { connect } from 'react-redux'
function FormDialog(props) {
function FormDialog(props) {
const { t } = useTranslation() const { t } = useTranslation()
const { open, handleClose, data, onAgree } = props
const {open,handleClose,data,onAgree}=props const [name, setName] = useState()
const [amount,setamount]=useState()
return ( return (
<Dialog <Dialog
open={open} open={open}
onClose={handleClose} onClose={handleClose}
aria-labelledby="form-dialog-title" aria-labelledby="form-dialog-title"
> >
<DialogTitle id="form-dialog-title">Cập nhật CTV</DialogTitle> <DialogTitle id="form-dialog-title">Thêm trụ xăng</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
style={{marginBttom:20,minWidth:400}} style={{ marginBttom: 20, minWidth: 400 }}
variant="outlined" variant="outlined"
autoFocus autoFocus
margin="dense" margin="dense"
label="Lời nhuận chia sẻ %" label="Tên trụ *"
fullWidth fullWidth
value={amount || ''} value={name || ''}
onChange={(event)=>setamount(event.target.value)} onChange={(event) => setName(event.target.value)}
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button color="secondary" onClick={handleClose}>
color="secondary"
onClick={handleClose}
>
Thoát Thoát
</Button> </Button>
<Button onClick={onAgree} color="primary"> <Button onClick={()=>{
onAgree(name)
setName('')
}} color="primary">
Đồng ý Đồng ý
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) )
} }
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return {} return {}
} }
......
src/app/components/dialog/CreateFountain.jsx 0 → 100644
import React, { useState, useEffect } from 'react'
import {
Button,
FormControl,
Grid,
InputLabel,
Select,
TextField,
Typography,
Radio,
FormControlLabel,
DialogActions,
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
Icon,
Tooltip,
RadioGroup,
MenuItem,
} from '@material-ui/core'
import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next'
import { KeyboardDatePicker } from '@material-ui/pickers'
import {
convertDate,
toPriceVndInput,
convertViToEn,
} from 'app/config/Function'
import {
TextValidator,
ValidatorForm,
SelectValidator,
} from 'react-material-ui-form-validator'
import {dropdownProductType,dropdownProcutByType} from 'app/apis/Functions/dropdown'
export default function FormDialog({ onCreate }) {
const [open, setOpen] = React.useState(false)
const { t } = useTranslation()
const [state, setState] = useState({})
const [listType, setListType] = useState([])
const [listProduct, setListProduct] = useState([])
const [product,setProduct]=useState()
const [type, setType] = useState()
useEffect(()=>{
setProduct()
if(type){
getDropdownProduct(type)
}
},[type])
useEffect(() => {
getData()
}, [])
const getData = async () => {
const res = await dropdownProductType({})
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.map((e) => {
return { ...e,name: e.type_name, value: e.id}
})
setListType(newList)
}
else {
toast.error('Lấy giữ liệu thất bại !', {
theme: 'colored',
})
}
}
const getDropdownProduct= async (type) => {
const res = await dropdownProcutByType(type)
if (res.data.code == 200 && res.data.data) {
const newList = res.data.data.map((e) => {
return { ...e,name: e.product_name, value: e.id}
})
setListProduct(newList)
}
else {
toast.error('Lấy giữ liệu thất bại !', {
theme: 'colored',
})
}
}
function handleClickOpen() {
setOpen(true)
}
function handleClose() {
setOpen(false)
}
const handleSubmit = async (value) => {
console.log('state', state)
onCreate({...state,type})
}
const handleChange = (event) => {
event.persist()
setState({
...state,
[event.target.name]: event.target.value,
})
}
const { product_id, name, code } = state
return (
<>
<Tooltip title="Chuyển tiền đáo hạn">
<IconButton onClick={handleClickOpen}>
<Icon style={{ color: '#4caf50' }}>add_circle</Icon>
</IconButton>
</Tooltip>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">
Thêm vòi xăng
</DialogTitle>
<DialogContent>
<Grid container spacing={2}>
<Grid item lg={12} md={12} sm={12} xs={12}>
<TextValidator
className="mb-4 w-full"
label="Tên vòi xăng *"
onChange={handleChange}
variant="outlined"
type="text"
name="name"
value={name || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<TextValidator
className="mb-4 w-full"
label="Mã vòi xăng *"
onChange={handleChange}
variant="outlined"
type="text"
name="code"
value={code || ''}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
/>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<SelectValidator
variant={'outlined'}
label={'Loại nguyên liệu *'}
className="mb-4 w-full"
value={type || ''}
displayEmpty
name="merchan_id"
onChange={(event) => {
setType(event.target.value)
}}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
>
{listType.map((e) => (
<MenuItem value={e.id}>
{e.name}
</MenuItem>
))}
</SelectValidator>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<SelectValidator
variant={'outlined'}
label={'Loại xăng *'}
className="mb-4 w-full"
value={product_id || ''}
displayEmpty
name="product_id"
onChange={handleChange}
validators={['required']}
errorMessages={[
'Không được để trống trường này',
]}
>
{listProduct.map((e) => (
<MenuItem value={e.id}>
{e.name}
</MenuItem>
))}
</SelectValidator>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button color="secondary" onClick={handleClose}>
Thoát
</Button>
<Button onClick={handleSubmit} color="primary">
Đồng ý
</Button>
</DialogActions>
</Dialog>
</>
)
}
src/app/views/GasStation/Create.js
...@@ -13,7 +13,7 @@ import { ...@@ -13,7 +13,7 @@ import {
Icon, Icon,
Tooltip, Tooltip,
} from '@material-ui/core' } from '@material-ui/core'
import _ from 'lodash'
import { createFunction } from 'app/apis/Functions/function' import { createFunction } from 'app/apis/Functions/function'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction' import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
...@@ -30,44 +30,14 @@ import TableHead from '@material-ui/core/TableHead' ...@@ -30,44 +30,14 @@ import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow' import TableRow from '@material-ui/core/TableRow'
import Paper from '@material-ui/core/Paper' import Paper from '@material-ui/core/Paper'
import CreateField from 'app/components/dialog/CreateField' import CreateField from 'app/components/dialog/CreateField'
import CreateFountain from 'app/components/dialog/CreateFountain'
const SimpleForm = (props) => { const SimpleForm = (props) => {
const [state, setState] = useState({}) const [state, setState] = useState({})
const history = useHistory() const history = useHistory()
const [listDrop, setListDrop] = useState([]) const [listDrop, setListDrop] = useState([])
const [listField, setListField] = useState([
{
field_name: 'Trụ 1',
gas_olines: [
{
product_id: 'BDDD46BC-2264-43EF-21B7-08DC08411423',
name: 'Vòi 1',
code: 'A95',
},
{
product_id: '6D3A81A6-A189-4D83-BA47-08DC0CF4D4C3',
name: 'Vòi 2',
code: 'A99',
},
],
},
{
field_name: 'Trụ 2',
gas_olines: [
{
product_id: 'BDDD46BC-2264-43EF-21B7-08DC08411423',
name: 'Vòi 1',
code: 'A95',
},
{
product_id: '6D3A81A6-A189-4D83-BA47-08DC0CF4D4C3',
name: 'Vòi 2',
code: 'A99',
},
],
},
])
const [openCreate, setOpenCreate] = useState(false) const [openCreate, setOpenCreate] = useState(false)
const [listField, setListField] = useState([])
useEffect(() => { useEffect(() => {
getData() getData()
...@@ -128,13 +98,81 @@ const SimpleForm = (props) => { ...@@ -128,13 +98,81 @@ const SimpleForm = (props) => {
setState({ ...state, date }) setState({ ...state, date })
} }
const onCreateField = () => {} const onCreateField = (value) => {
if (value) {
console.log('value', value)
if (listField.findIndex((e) => e.field_name == value) == -1) {
setListField(
[
{
field_name: value,
gas_olines: [],
},
].concat(listField)
)
setOpenCreate(false)
toast.success('Thêm trụ thành công!', {
theme: 'colored',
})
} else {
toast.warning('Tên trụ xăng đã tồn tại', {
theme: 'colored',
})
}
} else {
toast.warning('Bạn chưa nhập đầy đủ thông tin', {
theme: 'colored',
})
}
}
const deletePillar = (index) => {
let arr = [...listField]
arr.splice(index, 1)
setListField(arr)
toast.success('Xoá trụ thành công!', {
theme: 'colored',
})
}
const createFountain = (data, index) => {
let arr = [...listField]
let newList = arr.map((e, i) => {
if (i == index) {
if (e.gas_olines) {
return {
...e,
gas_olines: [
{
...data,
},
].concat(e.gas_olines),
}
} else {
return {
...e,
gas_olines: [
{
...data,
},
],
}
}
} else return { ...e }
})
console.log('newList', newList)
setListField(newList)
}
const handleCloseCreate = () => { const handleCloseCreate = () => {
setOpenCreate(false) setOpenCreate(false)
} }
const { store_name, address, merchan_id } = state const { store_name, address, merchan_id } = state
console.log('listField', listField)
return ( return (
<div className="m-sm-30"> <div className="m-sm-30">
<div className="mb-sm-30"> <div className="mb-sm-30">
...@@ -150,7 +188,11 @@ const SimpleForm = (props) => { ...@@ -150,7 +188,11 @@ const SimpleForm = (props) => {
/> />
</div> </div>
<SimpleCard> <SimpleCard>
<ValidatorForm onSubmit={handleSubmit} onError={() => null}> <ValidatorForm
id="form-create"
onSubmit={handleSubmit}
onError={() => null}
>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid xs={6} sm={6} item> <Grid xs={6} sm={6} item>
<SelectValidator <SelectValidator
...@@ -248,7 +290,8 @@ const SimpleForm = (props) => { ...@@ -248,7 +290,8 @@ const SimpleForm = (props) => {
> >
<div> <div>
<Typography variant="subtitle1"> <Typography variant="subtitle1">
Số lượng vòi mỗi trụ:1 Số lượng vòi mỗi trụ:{' '}
{listField.length}
</Typography> </Typography>
<Typography variant="subtitle1"> <Typography variant="subtitle1">
Số lượng trụ:3 Số lượng trụ:3
...@@ -256,18 +299,21 @@ const SimpleForm = (props) => { ...@@ -256,18 +299,21 @@ const SimpleForm = (props) => {
</div> </div>
<Button <Button
style={{ style={{
width: 120, width: 140,
}}
onClick={() => {
setOpenCreate(true)
}} }}
variant="contained" variant="contained"
className={'bg-light-primary'} className={'bg-light-primary'}
> >
<span className={'text-primary'}> <span className={'text-primary'}>
Thêm mới Thêm mới trụ
</span> </span>
</Button> </Button>
</Grid> </Grid>
{listField.map((item) => ( {listField.map((item, index) => (
<Grid <Grid
style={{ style={{
border: '1px solid #B9B9B9', border: '1px solid #B9B9B9',
...@@ -294,6 +340,9 @@ const SimpleForm = (props) => { ...@@ -294,6 +340,9 @@ const SimpleForm = (props) => {
{item.field_name} {item.field_name}
</Typography> </Typography>
<Button <Button
onClick={() => {
deletePillar(index)
}}
variant="contained" variant="contained"
style={{ style={{
backgroundColor: backgroundColor:
...@@ -360,10 +409,10 @@ const SimpleForm = (props) => { ...@@ -360,10 +409,10 @@ const SimpleForm = (props) => {
> >
Sản phẩm Sản phẩm
</TableCell> </TableCell>
<TableCell align="center"> {/* <TableCell align="center">
Trạng thái hoạt Trạng thái hoạt
động động
</TableCell> </TableCell> */}
<TableCell <TableCell
style={{ style={{
textAlign: textAlign:
...@@ -441,7 +490,7 @@ const SimpleForm = (props) => { ...@@ -441,7 +490,7 @@ const SimpleForm = (props) => {
row?.product_name row?.product_name
} }
</TableCell> </TableCell>
<TableCell {/* <TableCell
style={{ style={{
borderRight: borderRight:
'0.05px solid #e0e0e0', '0.05px solid #e0e0e0',
...@@ -451,7 +500,7 @@ const SimpleForm = (props) => { ...@@ -451,7 +500,7 @@ const SimpleForm = (props) => {
{ {
row?.status row?.status
} }
</TableCell> </TableCell> */}
<TableCell> <TableCell>
<Tooltip title="Xoá"> <Tooltip title="Xoá">
...@@ -483,14 +532,11 @@ const SimpleForm = (props) => { ...@@ -483,14 +532,11 @@ const SimpleForm = (props) => {
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<IconButton <CreateFountain
onClick={() => {}} onCreate={(data) => {
aria-label="edit" createFountain(data, index)
> }}
<Icon color="primary"> />
add_circle
</Icon>
</IconButton>
</Grid> </Grid>
</Grid> </Grid>
))} ))}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment