\r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCard.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n chart: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","const cardBodyStyle = {\r\n cardBody: {\r\n padding: \"0.9375rem 20px\",\r\n flex: \"1 1 auto\",\r\n WebkitBoxFlex: \"1\",\r\n position: \"relative\"\r\n },\r\n cardBodyPlain: {\r\n paddingLeft: \"5px\",\r\n paddingRight: \"5px\"\r\n },\r\n cardBodyProfile: {\r\n marginTop: \"15px\"\r\n }\r\n};\r\n\r\nexport default cardBodyStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/cardBodyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardBody(props) {\r\n const classes = useStyles();\r\n const { className, children, plain, profile, ...rest } = props;\r\n const cardBodyClasses = classNames({\r\n [classes.cardBody]: true,\r\n [classes.cardBodyPlain]: plain,\r\n [classes.cardBodyProfile]: profile,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardBody.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n whiteColor\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst cardHeaderStyle = {\r\n cardHeader: {\r\n padding: \"0.75rem 1.25rem\",\r\n marginBottom: \"0\",\r\n borderBottom: \"none\",\r\n background: \"transparent\",\r\n zIndex: \"3 !important\",\r\n \"&$cardHeaderPlain,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n margin: \"0 15px\",\r\n padding: \"0\",\r\n position: \"relative\",\r\n color: whiteColor\r\n },\r\n \"&:first-child\": {\r\n borderRadius: \"calc(.25rem - 1px) calc(.25rem - 1px) 0 0\"\r\n },\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n \"&:not($cardHeaderIcon)\": {\r\n borderRadius: \"6px\",\r\n marginTop: \"-20px\",\r\n padding: \"15px\"\r\n }\r\n },\r\n \"&$cardHeaderStats svg\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n textAlign: \"center\",\r\n width: \"36px\",\r\n height: \"36px\",\r\n margin: \"10px 10px 4px\"\r\n },\r\n \"&$cardHeaderStats i,&$cardHeaderStats .material-icons\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n width: \"56px\",\r\n height: \"56px\",\r\n textAlign: \"center\",\r\n overflow: \"unset\",\r\n marginBottom: \"1px\"\r\n },\r\n \"&$cardHeaderStats$cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n }\r\n },\r\n cardHeaderPlain: {\r\n marginLeft: \"0px !important\",\r\n marginRight: \"0px !important\"\r\n },\r\n cardHeaderStats: {\r\n \"& $cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n },\r\n \"& h1,& h2,& h3,& h4,& h5,& h6\": {\r\n margin: \"0 !important\"\r\n }\r\n },\r\n cardHeaderIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n background: \"transparent\",\r\n boxShadow: \"none\"\r\n },\r\n \"& i,& .material-icons\": {\r\n width: \"33px\",\r\n height: \"33px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\"\r\n },\r\n \"& svg\": {\r\n width: \"24px\",\r\n height: \"24px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\",\r\n margin: \"5px 4px 0px\"\r\n }\r\n },\r\n warningCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...warningCardHeader\r\n }\r\n },\r\n successCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...successCardHeader\r\n }\r\n },\r\n dangerCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...dangerCardHeader\r\n }\r\n },\r\n infoCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...infoCardHeader\r\n }\r\n },\r\n primaryCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...primaryCardHeader\r\n }\r\n },\r\n roseCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderIcon)\": {\r\n ...roseCardHeader\r\n }\r\n }\r\n};\r\n\r\nexport default cardHeaderStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/cardHeaderStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardHeader(props) {\r\n const classes = useStyles();\r\n const { className, children, color, plain, stats, icon, customColor, borderRadius, style, ...rest } = props;\r\n const cardHeaderClasses = classNames({\r\n [classes.cardHeader]: true,\r\n [classes[color + \"CardHeader\"]]: color && !customColor, // ���շ���˹��ҡ prop �������� customColor\r\n //[classes[color + \"CardHeader\"]]: color,\r\n [classes.cardHeaderPlain]: plain,\r\n [classes.cardHeaderStats]: stats,\r\n [classes.cardHeaderIcon]: icon,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardFooter.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n stats: PropTypes.bool,\r\n chart: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n defaultFont,\r\n primaryBoxShadow,\r\n infoBoxShadow,\r\n successBoxShadow,\r\n warningBoxShadow,\r\n dangerBoxShadow,\r\n roseBoxShadow,\r\n whiteColor,\r\n blackColor,\r\n grayColor,\r\n infoColor,\r\n successColor,\r\n dangerColor,\r\n roseColor,\r\n primaryColor,\r\n warningColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst snackbarContentStyle = {\r\n root: {\r\n ...defaultFont,\r\n flexWrap: \"unset\",\r\n position: \"relative\",\r\n padding: \"20px 15px\",\r\n lineHeight: \"20px\",\r\n marginBottom: \"20px\",\r\n fontSize: \"14px\",\r\n backgroundColor: whiteColor,\r\n color: grayColor[7],\r\n borderRadius: \"3px\",\r\n minWidth: \"unset\",\r\n maxWidth: \"unset\",\r\n boxShadow:\r\n \"0 12px 20px -10px rgba(\" +\r\n hexToRgb(whiteColor) +\r\n \", 0.28), 0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 7px 8px -5px rgba(\" +\r\n hexToRgb(whiteColor) +\r\n \", 0.2)\"\r\n },\r\n top20: {\r\n top: \"20px\"\r\n },\r\n top40: {\r\n top: \"40px\"\r\n },\r\n info: {\r\n backgroundColor: infoColor[3],\r\n color: whiteColor,\r\n ...infoBoxShadow\r\n },\r\n success: {\r\n backgroundColor: successColor[3],\r\n color: whiteColor,\r\n ...successBoxShadow\r\n },\r\n warning: {\r\n backgroundColor: warningColor[3],\r\n color: whiteColor,\r\n ...warningBoxShadow\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[3],\r\n color: whiteColor,\r\n ...dangerBoxShadow\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[3],\r\n color: whiteColor,\r\n ...primaryBoxShadow\r\n },\r\n rose: {\r\n backgroundColor: roseColor[3],\r\n color: whiteColor,\r\n ...roseBoxShadow\r\n },\r\n message: {\r\n padding: \"0\",\r\n display: \"block\",\r\n maxWidth: \"89%\"\r\n },\r\n close: {\r\n width: \"11px\",\r\n height: \"11px\"\r\n },\r\n iconButton: {\r\n width: \"24px\",\r\n height: \"24px\",\r\n padding: \"0px\"\r\n },\r\n icon: {\r\n display: \"block\",\r\n left: \"15px\",\r\n position: \"absolute\",\r\n top: \"50%\",\r\n marginTop: \"-15px\",\r\n width: \"30px\",\r\n height: \"30px\"\r\n },\r\n infoIcon: {\r\n color: infoColor[3]\r\n },\r\n successIcon: {\r\n color: successColor[3]\r\n },\r\n warningIcon: {\r\n color: warningColor[3]\r\n },\r\n dangerIcon: {\r\n color: dangerColor[3]\r\n },\r\n primaryIcon: {\r\n color: primaryColor[3]\r\n },\r\n roseIcon: {\r\n color: roseColor[3]\r\n },\r\n iconMessage: {\r\n paddingLeft: \"50px\",\r\n display: \"block\"\r\n },\r\n actionRTL: {\r\n marginLeft: \"-8px\",\r\n marginRight: \"auto\"\r\n }\r\n};\r\n\r\nexport default snackbarContentStyle;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Snack from \"@material-ui/core/Snackbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\n// @material-ui/icons\r\nimport Close from \"@material-ui/icons/Close\";\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/snackbarContentStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Snackbar(props) {\r\n const classes = useStyles();\r\n const { message, color, close, icon, place, open, rtlActive } = props;\r\n var action = [];\r\n const messageClasses = classNames({\r\n [classes.iconMessage]: icon !== undefined\r\n });\r\n if (close !== undefined) {\r\n action = [\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default LoginPage;","import React, { useEffect, useRef } from 'react';\r\n\r\nexport default function AuthProvider({ userManager: manager, store, children }) {\r\n\r\n let userManager = useRef();\r\n\r\n useEffect(() => {\r\n userManager.current = manager \r\n }, [manager, store]);\r\n\r\n return (\r\n React.Children.only(children)\r\n )\r\n}","import React from 'react'\r\nimport { Route, Redirect } from 'react-router-dom'\r\nimport { useSelector } from 'react-redux'\r\n\r\nfunction ProtectedRoute({ children, component: Component, ...rest }) {\r\n const user = useSelector(state => state.auth.user)\r\n\r\n return user\r\n ? (- \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nDanger.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst cardIconStyle = {\r\n cardIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n borderRadius: \"6px\",\r\n backgroundColor: grayColor[0],\r\n padding: \"15px\",\r\n marginTop: \"-20px\",\r\n marginRight: \"15px\",\r\n float: \"left\"\r\n }\r\n },\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader\r\n};\r\n\r\nexport default cardIconStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/cardIconStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardIcon(props) {\r\n const classes = useStyles();\r\n const { className, children, color, ...rest } = props;\r\n const cardIconClasses = classNames({\r\n [classes.cardIcon]: true,\r\n [classes[color + \"CardHeader\"]]: color,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardIcon.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","/* eslint-disable react/prop-types */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { HorizontalBar } from \"react-chartjs-2\";\r\nimport { defaults } from \"react-chartjs-2\";\r\nimport { Chart } from \"chart.js\";\r\n\r\nconst Horizontal = props => {\r\n const [chart, setChart] = useState({});\r\n const [displayTitle] = useState(true);\r\n const [displayLegend] = useState(true);\r\n var [legendPosition] = useState(\"right\");\r\n // var [location] = useState(\"City\");\r\n var [tap] = useState(\"\");\r\n // var [option2] = useState(\"\");\r\n // var [option3] = useState(\"\");\r\n // var [option4] = useState(\"\");\r\n // var [option5] = useState(\"\");\r\n const [name, setName] = useState(\"\");\r\n\r\n // if (props.location !== null) {\r\n // location = props.location;\r\n // }\r\n if (props.legendPosition !== null) {\r\n legendPosition = props.legendPosition;\r\n }\r\n\r\n // const monthNames = [\r\n // \"มกราคม\",\r\n // \"กุมภาพันธ์\",\r\n // \"มีนาคม\",\r\n // \"เมษายน\",\r\n // \"พฤษภาคม\",\r\n // \"มิถุนายน\",\r\n // \"กรกฎาคม\",\r\n // \"สิงหาคม\",\r\n // \"กันยายน\",\r\n // \"ตุลาคม\",\r\n // \"พฤศจิกายน\",\r\n // \"ธันวาคม\"\r\n // ];\r\n\r\n // const chartData = () => {\r\n // setChartData(props.chartData);\r\n // };\r\n\r\n useEffect(() => {\r\n if (props.topTen) {\r\n fetch(\r\n \"/api/v1/data/topTen?tap=\" +\r\n tap +\r\n \"&year=\" +\r\n props.year +\r\n \"&month=\" +\r\n props.month,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if ((result.data.datasets.length = 1 && props.name !== \"\")) {\r\n var calYear = 0;\r\n if (props.year === \"\" || props.year === 0) {\r\n var dateObj = new Date();\r\n var month = dateObj.getUTCMonth() + 1; //months from 1-12\r\n // var day = dateObj.getUTCDate();\r\n var year = dateObj.getUTCFullYear() + 543;\r\n //newdate = year + \"/\" + month + \"/\" + day;]\r\n if (month > 9) {\r\n calYear = year + 1;\r\n }\r\n calYear = year;\r\n } else {\r\n calYear = props.year;\r\n }\r\n\r\n var sMonth = \"\";\r\n if (props.month !== \"\" && props.month !== 0) {\r\n var calMonth = \"\";\r\n if (props.month === 1) {\r\n calMonth = \"ตุลาคม\";\r\n } else if (props.month === 2) {\r\n calMonth = \"พฤศจิกายน\";\r\n } else if (props.month === 3) {\r\n calMonth = \"ธันวาคม\";\r\n } else if (props.month === 4) {\r\n calMonth = \"มกราคม\";\r\n } else if (props.month === 5) {\r\n calMonth = \"กุมภาพันธ์\";\r\n } else if (props.month === 6) {\r\n calMonth = \"มีนาคม\";\r\n } else if (props.month === 7) {\r\n calMonth = \"เมษายน\";\r\n } else if (props.month === 8) {\r\n calMonth = \"พฤษภาคม\";\r\n } else if (props.month === 9) {\r\n calMonth = \"มิถุนายน\";\r\n } else if (props.month === 10) {\r\n calMonth = \"กรกฎาคม\";\r\n } else if (props.month === 11) {\r\n calMonth = \"สิงหาคม\";\r\n } else if (props.month === 12) {\r\n calMonth = \"กันยายน\";\r\n }\r\n sMonth = \" เดือน \" + calMonth;\r\n //monthNames[d.getMonth()\r\n }\r\n\r\n setName(props.name + \" \" + calYear + sMonth);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.topTen, props.month, props.year]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n useEffect(() => {\r\n if (props.other) {\r\n fetch(\r\n \"/api/v1/data/barOtherHorizontal?data=\" +\r\n props.data +\r\n \"&year=\" +\r\n props.year,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if (props.name !== \"\") {\r\n setName(props.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.other, props.year]);\r\n\r\n defaults.global.defaultFontFamily = '\"Sarabun\", sans-serif';\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Horizontal;\r\n","/* eslint-disable react/prop-types */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Bar } from \"react-chartjs-2\";\r\nimport { Chart } from \"chart.js\";\r\nimport { defaults } from \"react-chartjs-2\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nconst ChartBar = props => {\r\n const [chart, setChart] = useState({});\r\n //const [isFetch, setIsFetch] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [displayTitle] = useState(true);\r\n const [displayLegend] = useState(true);\r\n var [legendPosition] = useState(\"right\");\r\n // var [location] = useState(\"City\");\r\n var [tap] = useState(\"\");\r\n var [option2] = useState(\"\");\r\n var [option3] = useState(\"\");\r\n var [option4] = useState(\"\");\r\n var [option5] = useState(\"\");\r\n const [name, setName] = useState(\"\");\r\n\r\n const monthNames = [\r\n \"มกราคม\",\r\n \"กุมภาพันธ์\",\r\n \"มีนาคม\",\r\n \"เมษายน\",\r\n \"พฤษภาคม\",\r\n \"มิถุนายน\",\r\n \"กรกฎาคม\",\r\n \"สิงหาคม\",\r\n \"กันยายน\",\r\n \"ตุลาคม\",\r\n \"พฤศจิกายน\",\r\n \"ธันวาคม\"\r\n ];\r\n\r\n // if (props.location !== null) {\r\n // location = props.location;\r\n // }\r\n\r\n if (props.legendPosition !== null) {\r\n legendPosition = props.legendPosition;\r\n }\r\n\r\n // const chartData = () => {\r\n // setChartData(props.chartData);\r\n // };\r\n\r\n // const handleChange = (time) => {\r\n // var d = new Date(time);\r\n // var c = new Date().toLocaleString();\r\n // var e = new Date(c);\r\n // var daysDiff = Math.round((e-d)/86400000);\r\n // props.callbackFunction(daysDiff.toString())\r\n // }\r\n\r\n function handleChange(e) {\r\n props.checkFetch(e);\r\n }\r\n\r\n function setExportData(e) {\r\n props.exportData(e);\r\n }\r\n\r\n useEffect(() => {\r\n if (props.option2 !== \"\") {\r\n option2 = props.option2;\r\n } else {\r\n option2 = 0;\r\n }\r\n if (props.option3 !== \"\") {\r\n option3 = props.option3;\r\n } else {\r\n option3 = 0;\r\n }\r\n if (props.option4 !== \"\") {\r\n option4 = props.option4;\r\n } else {\r\n option4 = 0;\r\n }\r\n if (props.option5 !== \"\") {\r\n option5 = props.option5;\r\n } else {\r\n option5 = 0;\r\n }\r\n\r\n if (props.tap !== \"\" || props.tap !== undefined) {\r\n tap = props.tap;\r\n } else {\r\n tap = 1;\r\n }\r\n\r\n var data = 0;\r\n if (option3 === 0) {\r\n data = option2;\r\n option2 = 0;\r\n option3 = 0;\r\n option4 = 0;\r\n } else if (option4 === 0 && option5 === 0) {\r\n data = option3;\r\n option3 = 0;\r\n option4 = 0;\r\n } else if (option4 !== 0 && option5 === 0) {\r\n data = option4;\r\n option4 = 0;\r\n } else if (option4 !== 0 && option5 !== 0) {\r\n data = option5;\r\n }\r\n\r\n if (\r\n props.oldTap === \"\" ||\r\n (props.year !== \"\" && props.oldTap === \"\") ||\r\n (props.year !== 0 && props.oldTap === \"\") ||\r\n (props.oldTap !== \"\" &&\r\n props.option2 !== 0 &&\r\n props.tap !== \"\" &&\r\n props.option3 === 0) ||\r\n props.isCheck\r\n ) {\r\n fetch(\"/api/v1/data/info/\" + data)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n handleChange(result.isFetch);\r\n if (!result.isFetch) {\r\n fetch(\r\n \"/api/v1/data/bar?tap=\" +\r\n tap +\r\n \"&year=\" +\r\n props.year +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4 +\r\n \"&data=\" +\r\n data +\r\n \"&filter=\" +\r\n props.filter,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if (\r\n result.data.name !== null &&\r\n result.data.name !== undefined &&\r\n result.data.name !== \"\"\r\n ) {\r\n setName(result.data.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n if (props.year !== \"\") {\r\n var mockData =\r\n '{ \"datasets\" : [' +\r\n '{ \"label\":\"Peter\" , \"lastName\":\"Jones\" } ]}';\r\n var obj = JSON.parse(mockData);\r\n setChart(obj);\r\n }\r\n // handleChange(result.data.isFetch);\r\n setChart(result.data);\r\n setExportData(result.data);\r\n //console.log(result.data)\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else {\r\n const fetchData = async () => {\r\n setIsLoading(true);\r\n const response = await fetch(\r\n \"/api/v1/data/barFetch?tap=\" +\r\n tap +\r\n \"&year=\" +\r\n props.year +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4 +\r\n \"&data=\" +\r\n data +\r\n \"&filter=\" +\r\n props.filter +\r\n \"&serviceUnit=\" +\r\n props.serviceUnitFilter\r\n );\r\n if (response.status !== 200) {\r\n console.log(\"\");\r\n } else {\r\n const data = await response.json();\r\n if (\r\n data.data.name !== null &&\r\n data.data.name !== undefined &&\r\n data.data.name !== \"\"\r\n ) {\r\n setName(\r\n data.data.name + \" (\" + props.serviceUnitName + \")\"\r\n );\r\n } else {\r\n setName(\"\");\r\n }\r\n if (props.year !== \"\") {\r\n var mockData =\r\n '{ \"datasets\" : [' +\r\n '{ \"label\":\"Peter\" , \"lastName\":\"Jones\" } ]}';\r\n var obj = JSON.parse(mockData);\r\n setChart(obj);\r\n }\r\n // setIsFetch(result.data.isFetch);\r\n setChart(data.data);\r\n console.log(data.data);\r\n setExportData(result.data);\r\n }\r\n setIsLoading(false);\r\n };\r\n fetchData();\r\n\r\n // fetch(\r\n // \"/api/v1/data/barFetch?tap=\" +\r\n // tap +\r\n // \"&year=\" +\r\n // props.year +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // option3 +\r\n // \"&group4=\" +\r\n // option4 +\r\n // \"&data=\" +\r\n // data +\r\n // \"&filter=\" +\r\n // props.filter +\r\n // \"&serviceUnit=\" +\r\n // props.serviceUnitFilter,\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // if (result.data.name !== null && result.data.name !== undefined && result.data.name !== \"\") {\r\n // setName(result.data.name + \" (\" + props.serviceUnitName + \")\");\r\n // } else {\r\n // setName(\"\");\r\n // }\r\n // if(props.year !== \"\"){\r\n // var mockData = '{ \"datasets\" : [' +\r\n // '{ \"label\":\"Peter\" , \"lastName\":\"Jones\" } ]}';\r\n // var obj = JSON.parse(mockData);\r\n // setChart(obj)\r\n // }\r\n // // setIsFetch(result.data.isFetch);\r\n // setChart(result.data);\r\n // console.log(result.data)\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [\r\n props.year,\r\n props.tap,\r\n props.option2,\r\n props.option3,\r\n props.option4,\r\n props.option5,\r\n props.filter,\r\n props.serviceUnitFilter\r\n ]);\r\n\r\n useEffect(() => {\r\n if (props.total) {\r\n fetch(\"/api/v1/data/barTotal\", {\r\n method: \"GET\"\r\n })\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if (result.data.datasets !== null) {\r\n setName(result.data.datasets[0].label);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.total]);\r\n\r\n useEffect(() => {\r\n // if(props.totalGender){\r\n // fetch(\r\n // \"/api/v1/data/barTotal2\",\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // if (result.data.datasets !== null && result.data.datasets.length == 1) {\r\n // setName(result.data.datasets[0].label);\r\n // } else if (result.data.datasets.length > 1 && props.name != \"\"){\r\n // setName(props.name);\r\n // }\r\n // else {\r\n // setName(\"\");\r\n // }\r\n // setChart(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n // }\r\n\r\n if (props.totalGender || props.data === 5) {\r\n const fetchData = async () => {\r\n setIsLoading(true);\r\n const response = await fetch(\"/api/v1/data/barTotal2\");\r\n if (response.status !== 200) {\r\n console.log(\"\");\r\n } else {\r\n const data = await response.json();\r\n\r\n if (data.data.datasets !== null && data.data.datasets.length === 1) {\r\n setName(data.data.datasets[0].label);\r\n } else if (data.data.datasets.length > 1 && props.name !== \"\") {\r\n setName(props.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n if (props.year !== \"\") {\r\n var mockData =\r\n '{ \"datasets\" : [' +\r\n '{ \"label\":\"Peter\" , \"lastName\":\"Jones\" } ]}';\r\n var obj = JSON.parse(mockData);\r\n setChart(obj);\r\n }\r\n setChart(data.data);\r\n }\r\n setIsLoading(false);\r\n };\r\n fetchData();\r\n }\r\n }, [props.totalGender]);\r\n\r\n useEffect(() => {\r\n if (props.ageRange || props.data === 8) {\r\n fetch(\"/api/v1/data/ageRange\", {\r\n method: \"GET\"\r\n })\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if ((result.data.datasets.length = 1 && props.name !== \"\")) {\r\n setName(props.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.ageRange]);\r\n\r\n useEffect(() => {\r\n if (props.serviceUnit) {\r\n fetch(\"/api/v1/data/serviceUnit\", {\r\n method: \"GET\"\r\n })\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if ((result.data.datasets.length = 1 && props.name !== \"\")) {\r\n setName(props.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.serviceUnit]);\r\n\r\n useEffect(() => {\r\n if (props.topTen) {\r\n const d = new Date();\r\n\r\n fetch(\"/api/v1/data/topTen\", {\r\n method: \"GET\"\r\n })\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if (result.data.datasets.length === 1 && props.name !== \"\") {\r\n setName(props.name + monthNames[d.getMonth() + props.month]);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.topTen]);\r\n\r\n useEffect(() => {\r\n if (props.other && props.data !== 8 && props.data !== 5) {\r\n fetch(\r\n \"/api/v1/data/barOther?year=\" +\r\n props.year +\r\n \"&data=\" +\r\n props.data +\r\n \"&filter=\" +\r\n props.filter,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n if (props.name !== \"\") {\r\n setName(props.name);\r\n } else {\r\n setName(\"\");\r\n }\r\n setChart(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [props.other, props.year, props.filter]);\r\n\r\n defaults.global.defaultFontFamily = '\"Sarabun\", sans-serif';\r\n if (isLoading) {\r\n return (\r\n \r\n 
\r\n
\r\n );\r\n }\r\n // else if((props.isFetch || isFetch) && (!isLoading)){\r\n // return (\r\n // \r\n // \r\n // = 1e3) return +(n / 1e3).toFixed(1) + \"K\";\r\n // }\r\n // }\r\n // }\r\n // ]\r\n // }\r\n // }}\r\n // />\r\n // \r\n //
\r\n // );\r\n // }\r\n else {\r\n return (\r\n \r\n \r\n item.datasetIndex != 1\r\n // }\r\n },\r\n maintainAspectRatio: false,\r\n // events: true,\r\n // tooltips: {\r\n // enabled: true\r\n // },\r\n hover: {\r\n animationDuration: 10\r\n },\r\n animation: {\r\n duration: 1,\r\n onComplete: function() {\r\n var chartInstance = this.chart,\r\n ctx = chartInstance.ctx;\r\n ctx.font = Chart.helpers.fontString(\r\n \"10\",\r\n \"normal\",\r\n '\"Sarabun\", sans-serif'\r\n );\r\n ctx.textAlign = \"center\";\r\n ctx.textBaseline = \"bottom\";\r\n ctx.fillStyle = \"Black\";\r\n\r\n //ตัวเลขบน chart\r\n this.data.datasets.forEach(function(dataset, i) {\r\n var meta = chartInstance.controller.getDatasetMeta(i);\r\n meta.data.forEach(function(bar, index) {\r\n var data = dataset.data[index];\r\n ctx.fillText(data, bar._model.x, bar._model.y - 5);\r\n });\r\n });\r\n }\r\n }\r\n }}\r\n />\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nexport default ChartBar;\r\n","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport Select from \"react-select\";\r\n\r\nconst TSSelect = props => {\r\n const [defaultValue, setDefaultValue] = useState({\r\n label: null,\r\n value: null\r\n });\r\n\r\n var [options] = useState({\r\n label: null,\r\n value: null\r\n });\r\n\r\n var [disabled] = useState(false);\r\n\r\n if (props.options != null) {\r\n options = props.options;\r\n }\r\n if (props.disabled != null) {\r\n disabled = props.disabled;\r\n }\r\n const customStyles = {\r\n container: base => ({ ...base, zIndex: props.zIndex }),\r\n menu: base => ({ ...base, textAlign: \"left\", fontSize: \"1.2em\" }),\r\n singleValue: base => ({ ...base, fontSize: \"1.2em\" })\r\n };\r\n\r\n useEffect(() => {\r\n if (props.clear != null) {\r\n setDefaultValue(props.clear);\r\n }\r\n }, [props.clear]);\r\n\r\n useEffect(() => {\r\n if (props.default !== null) {\r\n setDefaultValue(props.default);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.defaulfAdd !== null && props.defaulfAdd !== undefined) {\r\n setDefaultValue(props.defaulfAdd);\r\n }\r\n }, [props.defaulfAdd]);\r\n\r\n useEffect(() => {\r\n if (props.defaulfAdd2 != null && props.defaulfAdd2[0].value != \"\") {\r\n setDefaultValue(props.defaulfAdd2);\r\n }\r\n }, [props.defaulfAdd2]);\r\n\r\n function handleChange(e) {\r\n if (props.onChange) {\r\n props.onChange(e.value);\r\n\r\n setDefaultValue(e);\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TSSelect;\r\n","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport {\r\n TabContent,\r\n TabPane,\r\n Nav,\r\n NavItem,\r\n NavLink,\r\n Card,\r\n Button,\r\n CardTitle,\r\n CardText,\r\n Row,\r\n Col\r\n} from \"reactstrap\";\r\nimport classnames from \"classnames\";\r\nimport \"bootstrap/dist/css/bootstrap.css\";\r\nimport axios from \"axios\";\r\n\r\nconst TabGroup2 = props => {\r\n const [activeTab, setActiveTab] = useState(\"1\");\r\n const [tap1, setTap1] = useState(\"\");\r\n const [tap2, setTap2] = useState(\"\");\r\n const [tap3, setTap3] = useState(\"\");\r\n const [tap4, setTap4] = useState(\"\");\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // console.log(result);\r\n // setTap1(result.data[0].label);\r\n // setTap2(result.data[1].label);\r\n // setTap3(result.data[2].label);\r\n // setTap4(result.data[3].label);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setTap1(res.data[0].label);\r\n setTap2(res.data[1].label);\r\n setTap3(res.data[2].label);\r\n setTap4(res.data[3].label);\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n if (props.setTap !== null) {\r\n setActiveTab(props.setTap);\r\n }\r\n }, []);\r\n\r\n const toggle = tab => {\r\n if (activeTab !== tab) setActiveTab(tab);\r\n handleChange(tab);\r\n };\r\n function handleChange(e) {\r\n props.tap(e);\r\n }\r\n return (\r\n \r\n \r\n \r\n {\r\n toggle(\"1\");\r\n }}\r\n >\r\n {tap1}\r\n \r\n \r\n \r\n {\r\n toggle(\"2\");\r\n }}\r\n >\r\n {tap2}\r\n \r\n \r\n \r\n {\r\n toggle(\"3\");\r\n }}\r\n >\r\n {tap3}\r\n \r\n \r\n \r\n {\r\n toggle(\"4\");\r\n }}\r\n >\r\n {tap4}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TabGroup2;\r\n","\r\nconst mapDataThailand = {\"title\":\"Thailand\",\"version\":\"1.1.3\",\"type\":\"FeatureCollection\",\"copyright\":\"Copyright (c) 2020 Highsoft AS, Based on data from Natural Earth\",\"copyrightShort\":\"Natural Earth\",\"copyrightUrl\":\"http://www.naturalearthdata.com\",\"crs\":{\"type\":\"name\",\"properties\":{\"name\":\"urn:ogc:def:crs:EPSG:32647\"}},\"hc-transform\":{\"default\":{\"crs\":\"+proj=utm +zone=47 +datum=WGS84 +units=m +no_defs\",\"scale\":0.000427525171275,\"jsonres\":15.5,\"jsonmarginX\":-999,\"jsonmarginY\":9851.0,\"xoffset\":328899.640185,\"yoffset\":2260900.49542}},\r\n\"features\":[{\"type\":\"Feature\",\"id\":\"TH.CT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.57,\"hc-middle-y\":0.50,\"hc-key\":\"th-ct\",\"hc-a2\":\"CT\",\"labelrank\":\"7\",\"hasc\":\"TH.CT\",\"alt-name\":\"Chantaburi|Muang Chan\",\"woe-id\":\"2347172\",\"subregion\":null,\"fips\":\"TH48\",\"postal-code\":\"CT\",\"name\":\"Chanthaburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"102.139\",\"woe-name\":\"Chanthaburi\",\"latitude\":\"12.8117\",\"woe-label\":\"Chanthaburi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2526,4608],[2565,4509],[2644,4407],[2627,4356],[2656,4263],[2650,4223],[2617,4211],[2579,4163],[2589,4089],[2564,4107],[2533,4083],[2547,4034],[2536,4003],[2567,3969],[2553,3937],[2521,3906],[2502,3924],[2491,3997],[2441,3991],[2467,3977],[2494,3913],[2462,3911],[2387,3980],[2348,4030],[2367,4071],[2330,4069],[2342,4091],[2302,4080],[2342,4055],[2337,4015],[2302,4063],[2258,4059],[2233,4078],[2172,4163],[2142,4182],[2163,4230],[2166,4325],[2134,4366],[2112,4365],[2112,4403],[2085,4428],[2069,4501],[2072,4512],[2087,4529],[2125,4536],[2187,4578],[2205,4564],[2223,4604],[2285,4652],[2314,4592],[2318,4524],[2381,4545],[2412,4585],[2452,4556],[2484,4556],[2526,4608]]]}},{\"type\":\"Feature\",\"id\":\"TH.4255\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.95,\"hc-middle-y\":0.98,\"hc-key\":\"th-4255\",\"hc-a2\":\"NU\",\"labelrank\":\"20\",\"hasc\":\"-99\",\"alt-name\":null,\"woe-id\":\"-99\",\"subregion\":null,\"fips\":null,\"postal-code\":null,\"name\":null,\"country\":\"Thailand\",\"type-en\":null,\"region\":null,\"longitude\":\"99.2992\",\"woe-name\":null,\"latitude\":\"6.53959\",\"woe-label\":null,\"type\":null},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[361,-362],[345,-359],[336,-322],[365,-321],[361,-362]]],[[[120,609],[133,606],[125,571],[89,613],[120,609]]]]}},{\"type\":\"Feature\",\"id\":\"TH.PG\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.43,\"hc-middle-y\":0.62,\"hc-key\":\"th-pg\",\"hc-a2\":\"PG\",\"labelrank\":\"7\",\"hasc\":\"TH.PG\",\"alt-name\":null,\"woe-id\":\"2347185\",\"subregion\":null,\"fips\":\"TH59\",\"postal-code\":\"PG\",\"name\":\"Phangnga\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"98.39400000000001\",\"woe-name\":\"Phangnga\",\"latitude\":\"8.576779999999999\",\"woe-label\":\"Phangnga, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[-204,813],[-167,787],[-150,754],[-149,675],[-174,670],[-184,713],[-170,734],[-208,794],[-204,813]]],[[[-142,804],[-179,816],[-140,869],[-130,854],[-142,804]]],[[[-380,1414],[-397,1372],[-411,1402],[-403,1471],[-367,1446],[-380,1414]]],[[[-379,1492],[-419,1508],[-411,1575],[-369,1559],[-358,1518],[-379,1492]]],[[[-309,1714],[-280,1723],[-221,1686],[-205,1670],[-242,1503],[-225,1446],[-257,1432],[-260,1379],[-228,1372],[-177,1315],[-157,1313],[-154,1256],[-195,1214],[-170,1188],[-112,1201],[-74,1187],[-86,1145],[-111,1136],[-101,1060],[-121,999],[-158,1004],[-222,972],[-270,967],[-257,887],[-285,838],[-310,829],[-335,865],[-392,906],[-418,1027],[-449,1121],[-419,1206],[-431,1268],[-410,1291],[-403,1352],[-357,1444],[-309,1488],[-344,1475],[-353,1500],[-315,1514],[-354,1582],[-323,1628],[-337,1646],[-309,1714]]]]}},{\"type\":\"Feature\",\"id\":\"TH.ST\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.31,\"hc-middle-y\":0.55,\"hc-key\":\"th-st\",\"hc-a2\":\"ST\",\"labelrank\":\"7\",\"hasc\":\"TH.ST\",\"alt-name\":null,\"woe-id\":\"2347184\",\"subregion\":null,\"fips\":\"TH60\",\"postal-code\":\"ST\",\"name\":\"Surat Thani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"99.0107\",\"woe-name\":\"Surat Thani\",\"latitude\":\"9.0048\",\"woe-label\":\"Surat Thani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[925,1884],[907,1802],[881,1777],[824,1769],[809,1824],[808,1877],[851,1887],[894,1876],[925,1884]]],[[[860,2047],[910,2031],[927,1950],[853,1990],[840,2023],[860,2047]]],[[[206,2036],[240,2041],[267,1933],[328,1803],[370,1748],[346,1747],[302,1696],[320,1632],[390,1622],[410,1603],[480,1609],[514,1659],[567,1663],[637,1693],[697,1691],[682,1669],[684,1628],[667,1574],[704,1546],[708,1506],[679,1500],[664,1442],[635,1409],[561,1396],[519,1346],[516,1264],[491,1218],[464,1198],[461,1169],[432,1142],[374,1110],[342,1126],[345,1085],[312,1020],[329,979],[282,965],[179,986],[133,959],[74,958],[56,1043],[68,1065],[51,1101],[81,1138],[75,1157],[24,1199],[-33,1222],[-74,1187],[-112,1201],[-170,1188],[-195,1214],[-154,1256],[-157,1313],[-177,1315],[-228,1372],[-260,1379],[-257,1432],[-225,1446],[-242,1503],[-205,1670],[-221,1686],[-203,1713],[-103,1723],[-115,1771],[-29,1862],[-47,1902],[-23,1958],[64,1996],[160,2000],[206,2036]]]]}},{\"type\":\"Feature\",\"id\":\"TH.KR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.56,\"hc-middle-y\":0.42,\"hc-key\":\"th-kr\",\"hc-a2\":\"KR\",\"labelrank\":\"7\",\"hasc\":\"TH.KR\",\"alt-name\":null,\"woe-id\":\"2347187\",\"subregion\":null,\"fips\":\"TH63\",\"postal-code\":\"KR\",\"name\":\"Krabi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"98.984\",\"woe-name\":\"Krabi\",\"latitude\":\"8.1333\",\"woe-label\":\"Krabi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[221,347],[177,365],[155,415],[150,463],[190,442],[198,389],[221,347]]],[[[221,433],[186,452],[167,482],[226,478],[221,433]]],[[[-121,999],[-101,1060],[-111,1136],[-86,1145],[-74,1187],[-33,1222],[24,1199],[75,1157],[81,1138],[51,1101],[68,1065],[56,1043],[74,958],[133,959],[179,986],[282,965],[329,979],[365,943],[366,876],[344,804],[387,725],[382,687],[377,647],[351,620],[384,544],[363,505],[322,476],[235,541],[217,513],[176,508],[159,526],[145,593],[180,626],[186,674],[155,658],[111,697],[108,727],[66,764],[53,744],[10,734],[-11,767],[-33,746],[-50,779],[-52,886],[-64,915],[-79,894],[-87,955],[-141,943],[-121,999]]]]}},{\"type\":\"Feature\",\"id\":\"TH.SA\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.79,\"hc-middle-y\":0.71,\"hc-key\":\"th-sa\",\"hc-a2\":\"SA\",\"labelrank\":\"7\",\"hasc\":\"TH.SA\",\"alt-name\":null,\"woe-id\":\"2347191\",\"subregion\":null,\"fips\":\"TH67\",\"postal-code\":\"SA\",\"name\":\"Satun\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"99.9633\",\"woe-name\":\"Satun\",\"latitude\":\"6.85827\",\"woe-label\":\"Satun, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[316,-315],[294,-343],[262,-341],[278,-318],[316,-315]]],[[[623,-372],[575,-309],[616,-206],[651,-327],[623,-372]]],[[[1013,-223],[989,-226],[982,-281],[990,-321],[974,-340],[961,-411],[934,-380],[943,-345],[914,-364],[868,-320],[835,-249],[759,-167],[739,-172],[719,-134],[637,-93],[652,-32],[633,-23],[632,16],[680,92],[738,101],[741,75],[781,47],[806,91],[821,92],[858,48],[901,43],[919,-4],[955,-53],[1023,-87],[1010,-155],[1013,-223]]]]}},{\"type\":\"Feature\",\"id\":\"TH.TG\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.39,\"hc-middle-y\":0.41,\"hc-key\":\"th-tg\",\"hc-a2\":\"TG\",\"labelrank\":\"7\",\"hasc\":\"TH.TG\",\"alt-name\":\"Tab Tiang\",\"woe-id\":\"2347189\",\"subregion\":null,\"fips\":\"TH65\",\"postal-code\":\"TG\",\"name\":\"Trang\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"99.6467\",\"woe-name\":\"Trang\",\"latitude\":\"7.56967\",\"woe-label\":\"Trang, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[461,180],[434,164],[415,138],[417,198],[461,180]]],[[[889,64],[901,43],[858,48],[821,92],[806,91],[781,47],[741,75],[738,101],[680,92],[642,82],[627,122],[584,97],[562,111],[530,175],[572,248],[572,272],[537,218],[519,224],[506,278],[479,201],[422,225],[381,277],[386,340],[361,383],[349,451],[322,476],[363,505],[384,544],[351,620],[377,647],[382,687],[428,648],[529,640],[578,714],[663,723],[681,713],[669,651],[679,620],[732,495],[717,439],[758,354],[784,275],[822,218],[822,181],[841,127],[889,64]]]]}},{\"type\":\"Feature\",\"id\":\"TH.TT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.60,\"hc-middle-y\":0.32,\"hc-key\":\"th-tt\",\"hc-a2\":\"TT\",\"labelrank\":\"7\",\"hasc\":\"TH.TT\",\"alt-name\":null,\"woe-id\":\"2347173\",\"subregion\":null,\"fips\":\"TH49\",\"postal-code\":\"TT\",\"name\":\"Trat\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"102.541\",\"woe-name\":\"Trat\",\"latitude\":\"12.3925\",\"woe-label\":\"Trat, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[2714,3471],[2741,3445],[2736,3356],[2686,3386],[2686,3441],[2699,3494],[2714,3471]]],[[[2553,3937],[2567,3969],[2536,4003],[2547,4034],[2533,4083],[2564,4107],[2589,4089],[2579,4163],[2617,4211],[2650,4223],[2645,4161],[2697,4139],[2775,4069],[2848,3984],[2813,3929],[2798,3808],[2804,3779],[2869,3680],[2876,3644],[2910,3580],[2963,3507],[2974,3436],[2958,3434],[2958,3490],[2898,3574],[2862,3607],[2862,3654],[2841,3707],[2755,3788],[2770,3794],[2735,3826],[2704,3824],[2712,3743],[2697,3721],[2683,3759],[2641,3785],[2541,3819],[2512,3813],[2487,3886],[2525,3888],[2553,3937]]],[[[2512,3715],[2479,3786],[2491,3785],[2523,3781],[2564,3746],[2620,3663],[2609,3646],[2574,3676],[2572,3653],[2510,3655],[2512,3715]]]]}},{\"type\":\"Feature\",\"id\":\"TH.PL\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.45,\"hc-key\":\"th-pl\",\"hc-a2\":\"PL\",\"labelrank\":\"7\",\"hasc\":\"TH.PL\",\"alt-name\":null,\"woe-id\":\"2347190\",\"subregion\":null,\"fips\":\"TH66\",\"postal-code\":\"PL\",\"name\":\"Phatthalung\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"100.062\",\"woe-name\":\"Phatthalung\",\"latitude\":\"7.47276\",\"woe-label\":\"Phatthalung, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1012,563],[971,524],[979,448],[1002,374],[1033,345],[1057,286],[1088,249],[1137,241],[1143,225],[1118,184],[1071,148],[980,129],[911,90],[889,64],[841,127],[822,181],[822,218],[784,275],[758,354],[717,439],[732,495],[679,620],[727,643],[836,659],[872,641],[898,601],[960,585],[984,581],[1012,563]]]}},{\"type\":\"Feature\",\"id\":\"TH.PS\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.57,\"hc-middle-y\":0.58,\"hc-key\":\"th-ps\",\"hc-a2\":\"PS\",\"labelrank\":\"7\",\"hasc\":\"TH.PS\",\"alt-name\":\"Bisnulok|Phisanulauk|Phitsnulok|Pitsanuloke\",\"woe-id\":\"2347139\",\"subregion\":null,\"fips\":\"TH12\",\"postal-code\":\"PS\",\"name\":\"Phitsanulok\",\"country\":\"Thailand\",\"type-en\":\"Province\",\r\n\"region\":\"Central\",\"longitude\":\"100.49\",\"woe-name\":\"Phitsanulok\",\"latitude\":\"16.9748\",\"woe-label\":\"Phitsanulok, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1509,7850],[1461,7751],[1498,7738],[1460,7673],[1489,7572],[1537,7570],[1610,7498],[1592,7452],[1563,7331],[1565,7294],[1593,7263],[1571,7262],[1474,7159],[1496,7104],[1459,7082],[1434,7033],[1435,6987],[1402,6929],[1342,6900],[1316,6850],[1254,6909],[1230,6981],[1139,6989],[1045,6968],[1007,7029],[955,7003],[926,6972],[865,6956],[842,7000],[783,7022],[766,7056],[774,7097],[793,7123],[762,7134],[809,7227],[856,7221],[864,7246],[924,7250],[933,7294],[901,7326],[848,7357],[789,7415],[783,7446],[827,7447],[864,7446],[946,7472],[984,7471],[1023,7511],[1013,7549],[1046,7596],[1147,7632],[1191,7623],[1252,7640],[1267,7665],[1345,7718],[1385,7773],[1424,7804],[1454,7849],[1478,7835],[1509,7850]]]}},{\"type\":\"Feature\",\"id\":\"TH.KP\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.45,\"hc-middle-y\":0.52,\"hc-key\":\"th-kp\",\"hc-a2\":\"KP\",\"labelrank\":\"7\",\"hasc\":\"TH.KP\",\"alt-name\":\"Gampheang Phet|Kambhengbhej\",\"woe-id\":\"2347138\",\"subregion\":null,\"fips\":\"TH11\",\"postal-code\":\"KP\",\"name\":\"Kamphaeng Phet\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"99.5098\",\"woe-name\":\"Kamphaeng Phet\",\"latitude\":\"16.4009\",\"woe-label\":\"Kamphaeng Phet, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[865,6956],[827,6858],[839,6840],[803,6796],[796,6737],[765,6645],[722,6608],[678,6538],[653,6466],[607,6434],[570,6504],[517,6530],[459,6514],[389,6529],[335,6510],[290,6541],[250,6538],[191,6495],[184,6589],[153,6613],[142,6680],[151,6738],[133,6798],[143,6886],[126,6929],[139,6943],[215,6940],[260,6976],[304,6988],[316,7013],[311,7070],[344,7121],[348,7170],[365,7188],[379,7242],[408,7226],[484,7239],[508,7233],[527,7189],[624,7128],[742,7129],[774,7097],[766,7056],[783,7022],[842,7000],[865,6956]]]}},{\"type\":\"Feature\",\"id\":\"TH.PC\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.55,\"hc-key\":\"th-pc\",\"hc-a2\":\"PC\",\"labelrank\":\"7\",\"hasc\":\"TH.PC\",\"alt-name\":null,\"woe-id\":\"2347140\",\"subregion\":null,\"fips\":\"TH13\",\"postal-code\":\"PC\",\"name\":\"Phichit\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.374\",\"woe-name\":\"Phichit\",\"latitude\":\"16.2321\",\"woe-label\":\"Phichit, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[839,6840],[827,6858],[865,6956],[926,6972],[955,7003],[1007,7029],[1045,6968],[1139,6989],[1230,6981],[1254,6909],[1316,6850],[1337,6780],[1292,6697],[1292,6633],[1340,6620],[1390,6586],[1380,6545],[1272,6560],[1203,6540],[1136,6539],[1057,6550],[1055,6530],[1000,6538],[965,6560],[942,6603],[908,6697],[872,6728],[860,6815],[839,6840]]]}},{\"type\":\"Feature\",\"id\":\"TH.SH\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.76,\"hc-middle-y\":0.70,\"hc-key\":\"th-sh\",\"hc-a2\":\"SH\",\"labelrank\":\"7\",\"hasc\":\"TH.SH\",\"alt-name\":null,\"woe-id\":\"2347175\",\"subregion\":null,\"fips\":\"TH51\",\"postal-code\":\"SH\",\"name\":\"Suphan Buri\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.034\",\"woe-name\":\"Suphan Buri\",\"latitude\":\"14.4298\",\"woe-label\":\"Suphan Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1014,5706],[998,5680],[1009,5607],[989,5545],[1004,5502],[1030,5484],[1051,5423],[1032,5294],[1008,5257],[959,5230],[840,5233],[764,5174],[715,5171],[687,5201],[683,5251],[714,5280],[724,5318],[720,5373],[724,5506],[769,5542],[740,5575],[754,5594],[697,5621],[618,5708],[523,5709],[512,5659],[462,5632],[447,5686],[408,5687],[337,5762],[355,5782],[334,5858],[365,5911],[425,5883],[433,5859],[587,5820],[603,5853],[652,5830],[703,5824],[756,5802],[826,5793],[867,5804],[885,5832],[948,5804],[998,5827],[1006,5794],[999,5732],[1014,5706]]]}},{\"type\":\"Feature\",\"id\":\"TH.AT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.95,\"hc-middle-y\":0.52,\"hc-key\":\"th-at\",\"hc-a2\":\"AT\",\"labelrank\":\"9\",\"hasc\":\"TH.AT\",\"alt-name\":null,\"woe-id\":\"2347160\",\"subregion\":null,\"fips\":\"TH35\",\"postal-code\":\"AT\",\"name\":\"Ang Thong\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.357\",\"woe-name\":\"Ang Thong\",\"latitude\":\"14.6335\",\"woe-label\":\"Ang Thong, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1030,5484],[1004,5502],[989,5545],[1009,5607],[998,5680],[1014,5706],[1092,5709],[1126,5678],[1189,5660],[1196,5647],[1216,5631],[1206,5553],[1206,5462],[1157,5454],[1145,5501],[1030,5484]]]}},{\"type\":\"Feature\",\"id\":\"TH.LB\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.48,\"hc-middle-y\":0.47,\"hc-key\":\"th-lb\",\"hc-a2\":\"LB\",\"labelrank\":\"7\",\"hasc\":\"TH.LB\",\"alt-name\":null,\"woe-id\":\"2347159\",\"subregion\":null,\"fips\":\"TH34\",\"postal-code\":\"LB\",\"name\":\"Lop Buri\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.944\",\"woe-name\":\"Lop Buri\",\"latitude\":\"15.1147\",\"woe-label\":\"Lop Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1216,5631],[1196,5647],[1189,5660],[1200,5679],[1188,5741],[1157,5807],[1175,5839],[1163,5906],[1186,5938],[1200,5990],[1221,6003],[1244,6054],[1364,6169],[1371,6228],[1474,6206],[1538,6218],[1590,6179],[1667,6153],[1722,6158],[1745,6110],[1772,6088],[1757,6042],[1759,5931],[1831,5912],[1881,5810],[1880,5766],[1808,5723],[1800,5698],[1758,5668],[1699,5687],[1651,5750],[1621,5757],[1554,5727],[1529,5681],[1475,5701],[1470,5740],[1439,5777],[1409,5769],[1362,5688],[1284,5636],[1272,5610],[1246,5616],[1216,5631]]]}},{\"type\":\"Feature\",\"id\":\"TH.PA\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.50,\"hc-key\":\"th-pa\",\"hc-a2\":\"PA\",\"labelrank\":\"7\",\"hasc\":\"TH.PA\",\"alt-name\":\"Phranakhon Si Ayutthaya|Ayudhya|Ayutthaya|Phranakhornsri-ayuthaya\",\"woe-id\":\"2347161\",\"subregion\":null,\"fips\":\"TH36\",\"postal-code\":\"PA\",\"name\":\"Phra Nakhon Si Ayutthaya\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.522\",\"woe-name\":\"Phra Nakhon Si Ayutthaya\",\"latitude\":\"14.402\",\"woe-label\":\"Phra Nakhon Si Ayutthaya, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1216,5631],[1246,5616],[1272,5610],[1259,5561],[1294,5530],[1353,5547],[1399,5541],[1389,5504],[1397,5427],[1415,5409],[1407,5373],[1437,5355],[1438,5307],[1319,5250],[1293,5224],[1247,5212],[1101,5211],[1064,5226],[1053,5213],[1048,5250],[1008,5257],[1032,5294],[1051,5423],[1030,5484],[1145,5501],[1157,5454],[1206,5462],[1206,5553],[1216,5631]]]}},{\"type\":\"Feature\",\"id\":\"TH.NP\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.51,\"hc-middle-y\":0.55,\"hc-key\":\"th-np\",\"hc-a2\":\"NP\",\"labelrank\":\"7\",\"hasc\":\"TH.NP\",\"alt-name\":null,\"woe-id\":\"2347177\",\"subregion\":null,\"fips\":\"TH53\",\"postal-code\":\"NP\",\"name\":\"Nakhon Pathom\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.072\",\"woe-name\":\"Nakhon Pathom\",\"latitude\":\"13.917\",\"woe-label\":\"Nathon Pathon, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1008,5257],[1048,5250],[1053,5213],[1039,5149],[1062,5105],[1059,5048],[1092,4980],[1086,4945],[1089,4930],[1048,4911],[1037,4879],[908,4895],[884,4903],[873,4935],[827,4920],[814,4940],[823,5012],[809,5072],[765,5086],[713,5152],[715,5171],[764,5174],[840,5233],[959,5230],[1008,5257]]]}},{\"type\":\"Feature\",\"id\":\"TH.SB\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.42,\"hc-middle-y\":0.52,\"hc-key\":\"th-sb\",\"hc-a2\":\"SB\",\"labelrank\":\"9\",\"hasc\":\"TH.SB\",\"alt-name\":null,\"woe-id\":\"2347158\",\"subregion\":null,\"fips\":\"TH33\",\"postal-code\":\"SB\",\"name\":\"Sing Buri\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.343\",\"woe-name\":\"Sing Buri\",\"latitude\":\"14.9746\",\"woe-label\":\"Sing Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1163,5906],[1175,5839],[1157,5807],[1188,5741],[1200,5679],[1189,5660],[1126,5678],[1092,5709],[1014,5706],[999,5732],[1006,5794],[998,5827],[1038,5826],[1063,5857],[1040,5878],[1059,5905],[1041,5943],[1067,5984],[1089,5978],[1107,5930],[1163,5906]]]}},{\"type\":\"Feature\",\"id\":\"TH.CN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.50,\"hc-key\":\"th-cn\",\"hc-a2\":\"CN\",\"labelrank\":\"7\",\"hasc\":\"TH.CN\",\"alt-name\":\"Chainat\",\"woe-id\":\"2347157\",\"subregion\":null,\"fips\":\"TH32\",\"postal-code\":\"CN\",\"name\":\"Chai Nat\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.013\",\"woe-name\":\"Chai Nat\",\"latitude\":\"15.1055\",\"woe-label\":\"Chai Nat, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1067,5984],[1041,5943],[1059,5905],[1040,5878],[1063,5857],[1038,5826],[998,5827],[948,5804],[885,5832],[867,5804],[826,5793],[756,5802],[703,5824],[652,5830],[659,5869],[697,5894],[711,5924],[672,5979],[646,6057],[676,6091],[772,6068],[846,6075],[882,6054],[897,6092],[871,6140],[887,6167],[930,6169],[992,6123],[1033,6072],[1067,5984]]]}},{\"type\":\"Feature\",\"id\":\"TH.BM\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.19,\"hc-middle-y\":0.92,\"hc-key\":\"th-bm\",\"hc-a2\":\"BM\",\"labelrank\":\"7\",\"hasc\":\"TH.BM\",\"alt-name\":\"Bangkok|Krung Thep|Krung Thep Maha Nakhon|Phra Nakhon-Thonburi\",\"woe-id\":\"2347165\",\"subregion\":null,\"fips\":\"TH40\",\"postal-code\":\"BM\",\"name\":\"Bangkok Metropolis\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.626\",\"woe-name\":\"Bangkok Metropolis\",\"latitude\":\"13.793\",\"woe-label\":\"Bangkok, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1187,4759],[1160,4754],[1139,4755],[1147,4770],[1131,4843],[1099,4876],[1089,4930],[1086,4945],[1092,4980],[1201,4980],[1225,5017],[1245,5090],[1337,5069],[1498,5094],[1493,5018],[1513,4997],[1460,4913],[1465,4904],[1362,4918],[1328,4875],[1271,4885],[1278,4907],[1210,4884],[1206,4835],[1184,4823],[1187,4759]]]}},{\"type\":\"Feature\",\"id\":\"TH.PT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.78,\"hc-middle-y\":0.53,\"hc-key\":\"th-pt\",\"hc-a2\":\"PT\",\"labelrank\":\"9\",\"hasc\":\"TH.PT\",\"alt-name\":null,\"woe-id\":\"2347164\",\"subregion\":null,\"fips\":\"TH39\",\r\n\"postal-code\":\"PT\",\"name\":\"Pathum Thani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.625\",\"woe-name\":\"Pathum Thani\",\"latitude\":\"14.034\",\"woe-label\":\"Pathum Thani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1245,5090],[1213,5089],[1108,5130],[1094,5160],[1101,5211],[1247,5212],[1293,5224],[1319,5250],[1438,5307],[1469,5321],[1502,5287],[1505,5146],[1499,5098],[1498,5094],[1337,5069],[1245,5090]]]}},{\"type\":\"Feature\",\"id\":\"TH.NO\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.36,\"hc-middle-y\":0.59,\"hc-key\":\"th-no\",\"hc-a2\":\"NO\",\"labelrank\":\"9\",\"hasc\":\"TH.NO\",\"alt-name\":null,\"woe-id\":\"2347163\",\"subregion\":null,\"fips\":\"TH38\",\"postal-code\":\"NO\",\"name\":\"Nonthaburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.407\",\"woe-name\":\"Nonthaburi\",\"latitude\":\"13.8933\",\"woe-label\":\"Nonthaburi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1101,5211],[1094,5160],[1108,5130],[1213,5089],[1245,5090],[1225,5017],[1201,4980],[1092,4980],[1059,5048],[1062,5105],[1039,5149],[1053,5213],[1064,5226],[1101,5211]]]}},{\"type\":\"Feature\",\"id\":\"TH.SP\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.49,\"hc-key\":\"th-sp\",\"hc-a2\":\"SP\",\"labelrank\":\"9\",\"hasc\":\"TH.SP\",\"alt-name\":\"Pak Nam|Samudh Prakarn|Samudraprakar|Samut Phrakhan\",\"woe-id\":\"2347167\",\"subregion\":null,\"fips\":\"TH42\",\"postal-code\":\"SP\",\"name\":\"Samut Prakan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.704\",\"woe-name\":\"Samut Prakan\",\"latitude\":\"13.606\",\"woe-label\":\"Samut Prakan, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1455,4748],[1340,4770],[1276,4802],[1251,4770],[1187,4759],[1184,4823],[1206,4835],[1210,4884],[1278,4907],[1271,4885],[1328,4875],[1362,4918],[1465,4904],[1526,4880],[1530,4859],[1480,4802],[1455,4748]]]}},{\"type\":\"Feature\",\"id\":\"TH.SS\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.83,\"hc-middle-y\":0.40,\"hc-key\":\"th-ss\",\"hc-a2\":\"SS\",\"labelrank\":\"9\",\"hasc\":\"TH.SS\",\"alt-name\":\"Krokkrak Maha Chai|Mahachai|Samudrasagara\",\"woe-id\":\"2347179\",\"subregion\":null,\"fips\":\"TH55\",\"postal-code\":\"SS\",\"name\":\"Samut Sakhon\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.225\",\"woe-name\":\"Samut Sakhon\",\"latitude\":\"13.5655\",\"woe-label\":\"Samut Sakhon, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1139,4755],[1094,4748],[1049,4773],[1022,4744],[916,4706],[907,4727],[879,4763],[891,4840],[908,4895],[1037,4879],[1048,4911],[1089,4930],[1099,4876],[1131,4843],[1147,4770],[1139,4755]]]}},{\"type\":\"Feature\",\"id\":\"TH.SM\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.34,\"hc-middle-y\":0.42,\"hc-key\":\"th-sm\",\"hc-a2\":\"SM\",\"labelrank\":\"9\",\"hasc\":\"TH.SM\",\"alt-name\":\"Mae Klong|Samudrasonggram\",\"woe-id\":\"2347178\",\"subregion\":null,\"fips\":\"TH54\",\"postal-code\":\"SM\",\"name\":\"Samut Songkhram\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"99.97360000000001\",\"woe-name\":\"Samut Songkhram\",\"latitude\":\"13.4036\",\"woe-label\":\"Samut Songkhran, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[879,4763],[907,4727],[916,4706],[880,4689],[857,4638],[825,4607],[783,4594],[775,4568],[751,4591],[751,4634],[793,4767],[836,4754],[879,4763]]]}},{\"type\":\"Feature\",\"id\":\"TH.PE\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.53,\"hc-middle-y\":0.52,\"hc-key\":\"th-pe\",\"hc-a2\":\"PE\",\"labelrank\":\"7\",\"hasc\":\"TH.PE\",\"alt-name\":\"Phetcha Buri|Bejraburi|Petchburi|Phet Buri|Tetchburit\",\"woe-id\":\"2347180\",\"subregion\":null,\"fips\":\"TH56\",\"postal-code\":\"PE\",\"name\":\"Phetchaburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Western\",\"longitude\":\"99.5964\",\"woe-name\":\"Phetchaburi\",\"latitude\":\"12.8727\",\"woe-label\":\"Phetchaburi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[751,4634],[751,4591],[775,4568],[783,4594],[825,4607],[852,4553],[906,4506],[928,4436],[897,4379],[871,4282],[845,4240],[829,4181],[826,4127],[729,4120],[683,4087],[620,4082],[585,4060],[546,4080],[477,4089],[426,4075],[418,4092],[334,4147],[319,4179],[289,4198],[286,4240],[258,4277],[243,4388],[202,4420],[208,4518],[269,4547],[318,4522],[329,4500],[367,4518],[384,4559],[459,4526],[515,4538],[554,4533],[611,4549],[614,4587],[640,4621],[679,4636],[751,4634]]]}},{\"type\":\"Feature\",\"id\":\"TH.CC\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.74,\"hc-middle-y\":0.59,\"hc-key\":\"th-cc\",\"hc-a2\":\"CC\",\"labelrank\":\"7\",\"hasc\":\"TH.CC\",\"alt-name\":\"Chaxerngsao|Pad Rew|Paed Riu|Petrieu|Shajeun Dhrao\",\"woe-id\":\"2347169\",\"subregion\":null,\"fips\":\"TH44\",\"postal-code\":\"CC\",\"name\":\"Chachoengsao\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"101.419\",\"woe-name\":\"Chachoengsao\",\"latitude\":\"13.6342\",\"woe-label\":\"Chachoengsao, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1498,5094],[1499,5098],[1527,5108],[1667,5109],[1679,5075],[1670,5042],[1683,5023],[1718,5041],[1821,5031],[1961,4967],[1974,4952],[1998,4974],[2051,4955],[2074,4984],[2109,4991],[2162,4929],[2196,4934],[2204,4898],[2238,4832],[2272,4837],[2278,4767],[2248,4758],[2285,4652],[2223,4604],[2205,4564],[2187,4578],[2125,4536],[2087,4529],[2059,4586],[2031,4615],[1976,4645],[1944,4695],[1901,4700],[1859,4737],[1832,4736],[1768,4804],[1679,4831],[1605,4795],[1607,4772],[1556,4737],[1490,4741],[1455,4748],[1480,4802],[1530,4859],[1526,4880],[1465,4904],[1460,4913],[1513,4997],[1493,5018],[1498,5094]]]}},{\"type\":\"Feature\",\"id\":\"TH.NN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.55,\"hc-middle-y\":0.36,\"hc-key\":\"th-nn\",\"hc-a2\":\"NN\",\"labelrank\":\"7\",\"hasc\":\"TH.NN\",\"alt-name\":\"Nakon Nayok\",\"woe-id\":\"2347168\",\"subregion\":null,\"fips\":\"TH43\",\"postal-code\":\"NN\",\"name\":\"Nakhon Nayok\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"101.21\",\"woe-name\":\"Nakhon Nayok\",\"latitude\":\"14.2249\",\"woe-label\":\"Nakhon Nayok, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1667,5109],[1527,5108],[1499,5098],[1505,5146],[1502,5287],[1526,5314],[1528,5347],[1556,5342],[1591,5371],[1604,5427],[1654,5411],[1680,5387],[1712,5409],[1737,5485],[1765,5502],[1856,5445],[1873,5420],[1907,5403],[1933,5359],[1920,5331],[1873,5321],[1849,5330],[1845,5299],[1789,5255],[1781,5231],[1799,5180],[1721,5167],[1663,5125],[1667,5109]]]}},{\"type\":\"Feature\",\"id\":\"TH.CB\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.37,\"hc-middle-y\":0.29,\"hc-key\":\"th-cb\",\"hc-a2\":\"CB\",\"labelrank\":\"7\",\"hasc\":\"TH.CB\",\"alt-name\":null,\"woe-id\":\"2347170\",\"subregion\":null,\"fips\":\"TH46\",\"postal-code\":\"CB\",\"name\":\"Chon Buri\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"101.278\",\"woe-name\":\"Chon Buri\",\"latitude\":\"13.2988\",\"woe-label\":\"Chon Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2087,4529],[2072,4512],[2069,4501],[2029,4513],[1988,4491],[1958,4449],[1930,4451],[1909,4426],[1849,4416],[1818,4446],[1774,4435],[1700,4454],[1687,4412],[1634,4415],[1640,4328],[1608,4274],[1575,4246],[1555,4156],[1559,4133],[1556,4103],[1521,4118],[1515,4150],[1472,4142],[1477,4178],[1457,4183],[1479,4229],[1496,4223],[1515,4270],[1478,4328],[1524,4417],[1484,4469],[1532,4545],[1508,4613],[1522,4645],[1557,4661],[1556,4737],[1607,4772],[1605,4795],[1679,4831],[1768,4804],[1832,4736],[1859,4737],[1901,4700],[1944,4695],[1976,4645],[2031,4615],[2059,4586],[2087,4529]]]}},{\"type\":\"Feature\",\"id\":\"TH.BR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.60,\"hc-middle-y\":0.51,\"hc-key\":\"th-br\",\"hc-a2\":\"BR\",\"labelrank\":\"7\",\"hasc\":\"TH.BR\",\"alt-name\":\"Buri Rum\",\"woe-id\":\"2347153\",\"subregion\":null,\"fips\":\"TH28\",\"postal-code\":\"BR\",\"name\":\"Buri Ram\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.971\",\"woe-name\":\"Buri Ram\",\"latitude\":\"14.699\",\"woe-label\":\"Buriram, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3169,5404],[3094,5386],[3057,5368],[3000,5317],[2950,5296],[2936,5269],[2868,5268],[2793,5243],[2707,5254],[2700,5288],[2722,5355],[2691,5416],[2678,5478],[2638,5518],[2624,5566],[2639,5627],[2592,5757],[2635,5737],[2680,5742],[2685,5759],[2655,5855],[2716,5835],[2778,5846],[2811,5870],[2829,5936],[2884,5998],[2972,6026],[2964,6108],[2975,6152],[2948,6168],[2963,6199],[2994,6211],[2938,6253],[2864,6255],[2836,6281],[2828,6351],[2848,6338],[2884,6350],[2907,6450],[2938,6463],[2983,6417],[2961,6377],[3040,6290],[3041,6254],[3062,6240],[3052,6207],[3086,6195],[3101,6155],[3118,6159],[3166,6116],[3192,6117],[3243,6148],[3288,6126],[3316,6135],[3339,6111],[3301,6027],[3309,5935],[3305,5844],[3272,5793],[3195,5719],[3187,5651],[3158,5592],[3158,5544],[3177,5486],[3169,5404]]]}},{\"type\":\"Feature\",\"id\":\"TH.KK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.72,\"hc-middle-y\":0.31,\"hc-key\":\"th-kk\",\"hc-a2\":\"KK\",\"labelrank\":\"7\",\"hasc\":\"TH.KK\",\"alt-name\":null,\"woe-id\":\"2347147\",\"subregion\":null,\"fips\":\"TH22\",\"postal-code\":\"KK\",\"name\":\"Khon Kaen\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.683\",\"woe-name\":\"Khon Kaen\",\"latitude\":\"16.5762\",\"woe-label\":\"Khon Kaen, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2938,6463],[2907,6450],[2884,6350],[2848,6338],[2828,6351],[2785,6370],[2758,6408],[2690,6396],[2634,6404],[2565,6388],[2531,6413],[2500,6467],[2502,6510],[2541,6599],[2461,6645],[2451,6663],[2495,6705],[2548,6789],[2579,6910],[2549,6943],[2519,6932],[2441,6955],[2409,6977],[2315,6976],[2242,7036],[2225,7070],[2151,7087],[2103,7076],[2080,7096],[2104,7136],[2106,7167],[2163,7189],[2228,7229],[2243,7225],[2303,7257],[2398,7239],[2427,7261],[2462,7254],[2492,7212],[2559,7190],[2623,7192],[2653,7172],[2687,7179],[2730,7307],[2741,7376],[2765,7382],[2808,7360],[2833,7322],[2842,7259],[2889,7259],[2929,7235],[3039,7290],[3055,7271],[3048,7235],[3088,7252],[3098,7225],[3081,7175],[3079,7093],[3030,6996],[2974,6960],[2924,6945],[2936,6922],\r\n[2897,6848],[2866,6821],[2876,6658],[2911,6606],[2907,6570],[2930,6518],[2938,6463]]]}}\r\n,{\"type\":\"Feature\",\"id\":\"TH.PH\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.44,\"hc-middle-y\":0.31,\"hc-key\":\"th-ph\",\"hc-a2\":\"PH\",\"labelrank\":\"7\",\"hasc\":\"TH.PH\",\"alt-name\":null,\"woe-id\":\"2347141\",\"subregion\":null,\"fips\":\"TH14\",\"postal-code\":\"PH\",\"name\":\"Phetchabun\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"101.21\",\"woe-name\":\"Phetchabun\",\"latitude\":\"16.2589\",\"woe-label\":\"Phetchabun, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2106,7167],[2104,7136],[2080,7096],[2061,7084],[2038,7105],[1996,7104],[1971,7119],[1942,7095],[1909,7097],[1902,7053],[1911,7004],[1878,6979],[1880,6955],[1835,6899],[1819,6863],[1809,6779],[1782,6656],[1795,6587],[1826,6566],[1808,6514],[1786,6492],[1789,6419],[1836,6380],[1816,6276],[1821,6165],[1772,6088],[1745,6110],[1722,6158],[1667,6153],[1590,6179],[1538,6218],[1474,6206],[1371,6228],[1411,6270],[1437,6322],[1435,6362],[1409,6452],[1411,6496],[1380,6545],[1390,6586],[1340,6620],[1292,6633],[1292,6697],[1337,6780],[1316,6850],[1342,6900],[1402,6929],[1435,6987],[1434,7033],[1459,7082],[1496,7104],[1474,7159],[1571,7262],[1593,7263],[1631,7279],[1640,7359],[1665,7366],[1693,7418],[1771,7381],[1876,7388],[1915,7367],[1946,7331],[2002,7368],[2054,7256],[2055,7171],[2106,7167]]]}},{\"type\":\"Feature\",\"id\":\"TH.KL\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.46,\"hc-middle-y\":0.49,\"hc-key\":\"th-kl\",\"hc-a2\":\"KL\",\"labelrank\":\"7\",\"hasc\":\"TH.KL\",\"alt-name\":null,\"woe-id\":\"2347148\",\"subregion\":null,\"fips\":\"TH23\",\"postal-code\":\"KL\",\"name\":\"Kalasin\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.679\",\"woe-name\":\"Kalasin\",\"latitude\":\"16.6224\",\"woe-label\":\"Kalasin, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3079,7093],[3081,7175],[3098,7225],[3088,7252],[3048,7235],[3055,7271],[3039,7290],[3059,7324],[3126,7329],[3242,7288],[3268,7233],[3299,7287],[3302,7330],[3318,7355],[3316,7393],[3369,7436],[3417,7395],[3515,7330],[3513,7301],[3559,7251],[3625,7206],[3639,7232],[3688,7262],[3720,7247],[3802,7127],[3804,7087],[3843,7026],[3849,6956],[3793,6964],[3722,6927],[3704,6959],[3629,6957],[3582,6976],[3538,6967],[3469,6912],[3500,6857],[3485,6792],[3439,6792],[3420,6771],[3343,6780],[3292,6766],[3265,6830],[3231,6851],[3181,6917],[3122,6888],[3097,6895],[3107,6941],[3091,6988],[3102,7019],[3093,7060],[3104,7087],[3079,7093]]]}},{\"type\":\"Feature\",\"id\":\"TH.SR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.55,\"hc-middle-y\":0.44,\"hc-key\":\"th-sr\",\"hc-a2\":\"SR\",\"labelrank\":\"7\",\"hasc\":\"TH.SR\",\"alt-name\":\"Sara Buri\",\"woe-id\":\"2347162\",\"subregion\":null,\"fips\":\"TH37\",\"postal-code\":\"SR\",\"name\":\"Saraburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.909\",\"woe-name\":\"Saraburi\",\"latitude\":\"14.4914\",\"woe-label\":\"Sara Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1699,5687],[1711,5559],[1697,5533],[1737,5485],[1712,5409],[1680,5387],[1654,5411],[1604,5427],[1591,5371],[1556,5342],[1528,5347],[1526,5314],[1502,5287],[1469,5321],[1438,5307],[1437,5355],[1407,5373],[1415,5409],[1397,5427],[1389,5504],[1399,5541],[1353,5547],[1294,5530],[1259,5561],[1272,5610],[1284,5636],[1362,5688],[1409,5769],[1439,5777],[1470,5740],[1475,5701],[1529,5681],[1554,5727],[1621,5757],[1651,5750],[1699,5687]]]}},{\"type\":\"Feature\",\"id\":\"TH.NR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.47,\"hc-key\":\"th-nr\",\"hc-a2\":\"NR\",\"labelrank\":\"7\",\"hasc\":\"TH.NR\",\"alt-name\":\"Khorat|Nagara Rajasima|Nakaun Rachasima\",\"woe-id\":\"2347152\",\"subregion\":null,\"fips\":\"TH32\",\"postal-code\":\"NR\",\"name\":\"Nakhon Ratchasima\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.103\",\"woe-name\":\"Nakhon Ratchasima\",\"latitude\":\"14.8923\",\"woe-label\":\"Nakhon Ratchasima, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1737,5485],[1697,5533],[1711,5559],[1699,5687],[1758,5668],[1800,5698],[1808,5723],[1880,5766],[1881,5810],[1831,5912],[1759,5931],[1757,6042],[1772,6088],[1826,6058],[1848,6024],[1961,6055],[2017,6099],[2148,6156],[2187,6154],[2198,6187],[2239,6217],[2233,6264],[2270,6308],[2295,6356],[2327,6328],[2370,6375],[2390,6421],[2436,6427],[2500,6467],[2531,6413],[2565,6388],[2634,6404],[2690,6396],[2758,6408],[2785,6370],[2828,6351],[2836,6281],[2864,6255],[2938,6253],[2994,6211],[2963,6199],[2948,6168],[2975,6152],[2964,6108],[2972,6026],[2884,5998],[2829,5936],[2811,5870],[2778,5846],[2716,5835],[2655,5855],[2685,5759],[2680,5742],[2635,5737],[2592,5757],[2639,5627],[2624,5566],[2638,5518],[2678,5478],[2691,5416],[2722,5355],[2700,5288],[2707,5254],[2668,5232],[2675,5212],[2641,5216],[2636,5248],[2540,5257],[2498,5236],[2453,5243],[2425,5276],[2400,5241],[2343,5255],[2319,5275],[2252,5327],[2242,5347],[2267,5390],[2248,5416],[2233,5403],[2205,5426],[2188,5407],[2111,5392],[2100,5369],[2007,5452],[1955,5448],[1914,5471],[1856,5445],[1765,5502],[1737,5485]]]}},{\"type\":\"Feature\",\"id\":\"TH.SI\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.61,\"hc-key\":\"th-si\",\"hc-a2\":\"SI\",\"labelrank\":\"7\",\"hasc\":\"TH.SI\",\"alt-name\":\"Sisaket|Khukhan|Khukhandh|Srisaket\",\"woe-id\":\"2347155\",\"subregion\":null,\"fips\":\"TH30\",\"postal-code\":\"SI\",\"name\":\"Si Sa Ket\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"104.418\",\"woe-name\":\"Si Sa Ket\",\"latitude\":\"14.8248\",\"woe-label\":\"Sisaket, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3684,6200],[3752,6294],[3784,6316],[3800,6269],[3876,6173],[3906,6155],[3975,6137],[3995,6115],[4026,6099],[4114,6086],[4126,6096],[4185,6091],[4224,6037],[4191,5984],[4198,5889],[4215,5862],[4267,5846],[4296,5811],[4289,5774],[4324,5707],[4362,5660],[4327,5659],[4305,5589],[4327,5559],[4325,5502],[4347,5503],[4367,5468],[4307,5480],[4263,5499],[4222,5474],[4137,5474],[4101,5437],[4064,5446],[4043,5433],[3944,5446],[3888,5462],[3855,5444],[3844,5463],[3818,5437],[3790,5444],[3744,5426],[3754,5498],[3741,5570],[3748,5652],[3710,5704],[3698,5758],[3653,5774],[3654,5823],[3713,5927],[3678,6026],[3694,6097],[3746,6151],[3738,6195],[3684,6200]]]}},{\"type\":\"Feature\",\"id\":\"TH.RE\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.48,\"hc-middle-y\":0.62,\"hc-key\":\"th-re\",\"hc-a2\":\"RE\",\"labelrank\":\"7\",\"hasc\":\"TH.RE\",\"alt-name\":null,\"woe-id\":\"2347150\",\"subregion\":null,\"fips\":\"TH25\",\"postal-code\":\"RE\",\"name\":\"Roi Et\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.827\",\"woe-name\":\"Roi Et\",\"latitude\":\"15.9601\",\"woe-label\":\"Roi Et, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3784,6316],[3752,6294],[3684,6200],[3677,6213],[3622,6227],[3618,6242],[3541,6217],[3437,6223],[3401,6234],[3355,6211],[3302,6217],[3278,6204],[3294,6265],[3213,6298],[3191,6334],[3219,6391],[3245,6411],[3289,6420],[3308,6526],[3326,6575],[3304,6683],[3309,6721],[3343,6780],[3420,6771],[3439,6792],[3485,6792],[3500,6857],[3469,6912],[3538,6967],[3582,6976],[3629,6957],[3704,6959],[3722,6927],[3793,6964],[3849,6956],[3897,6973],[3914,6882],[3931,6878],[3912,6831],[3883,6823],[3846,6761],[3759,6706],[3761,6623],[3698,6617],[3694,6486],[3739,6503],[3738,6522],[3781,6480],[3780,6417],[3808,6406],[3841,6348],[3784,6316]]]}},{\"type\":\"Feature\",\"id\":\"TH.LE\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.61,\"hc-middle-y\":0.51,\"hc-key\":\"th-le\",\"hc-a2\":\"LE\",\"labelrank\":\"7\",\"hasc\":\"TH.LE\",\"alt-name\":null,\"woe-id\":\"2347145\",\"subregion\":null,\"fips\":\"TH18\",\"postal-code\":\"LE\",\"name\":\"Loei\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"101.517\",\"woe-name\":\"Loei\",\"latitude\":\"17.4099\",\"woe-label\":\"Loei, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2303,7257],[2243,7225],[2228,7229],[2163,7189],[2106,7167],[2055,7171],[2054,7256],[2002,7368],[1946,7331],[1915,7367],[1876,7388],[1771,7381],[1693,7418],[1665,7366],[1640,7359],[1631,7279],[1593,7263],[1565,7294],[1563,7331],[1592,7452],[1610,7498],[1537,7570],[1489,7572],[1460,7673],[1498,7738],[1529,7733],[1577,7695],[1635,7671],[1659,7707],[1684,7716],[1715,7767],[1792,7832],[1823,7873],[1861,7885],[1870,7863],[1893,7897],[1931,7917],[1945,7973],[1961,7963],[1986,7993],[2051,8007],[2075,8101],[2092,8126],[2158,8095],[2173,8100],[2288,8228],[2313,8231],[2289,8177],[2280,8140],[2258,8061],[2278,7947],[2261,7879],[2269,7834],[2290,7847],[2330,7770],[2345,7715],[2300,7673],[2242,7670],[2240,7637],[2263,7607],[2264,7574],[2236,7541],[2212,7485],[2235,7448],[2313,7418],[2355,7353],[2277,7301],[2303,7257]]]}},{\"type\":\"Feature\",\"id\":\"TH.NK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.76,\"hc-middle-y\":0.44,\"hc-key\":\"th-nk\",\"hc-a2\":\"NK\",\"labelrank\":\"7\",\"hasc\":\"TH.NK\",\"alt-name\":null,\"woe-id\":\"2347144\",\"subregion\":null,\"fips\":\"TH17\",\"postal-code\":\"NK\",\"name\":\"Nong Khai\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.754\",\"woe-name\":\"Nong Khai\",\"latitude\":\"17.7553\",\"woe-label\":\"Nong Khai, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2280,8140],[2289,8177],[2313,8231],[2358,8223],[2373,8188],[2455,8116],[2497,8107],[2530,8075],[2579,8059],[2639,8060],[2671,8020],[2661,7971],[2723,7943],[2711,7972],[2840,8065],[2899,8093],[2970,8081],[2994,8115],[2987,8157],[2997,8188],[3037,8212],[3045,8252],[3069,8280],[3130,8295],[3146,8309],[3150,8265],[3192,8254],[3201,8232],[3162,8179],[3168,8149],[3249,8087],[3211,8078],[3227,8045],[3226,7996],[3170,7971],[3131,8003],[3098,7990],[3062,7945],[2984,8005],[2937,7957],[2909,7996],[2864,8001],[2840,7946],[2850,7884],[2763,7790],[2709,7787],[2675,7802],[2673,7854],[2623,7898],[2576,7900],[2529,7965],[2515,8001],[2444,8059],[2384,8090],[2347,8072],[2320,8119],[2280,8140]]]}},{\"type\":\"Feature\",\"id\":\"TH.AC\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.45,\"hc-middle-y\":0.61,\"hc-key\":\"th-ac\",\"hc-a2\":\"AC\",\"labelrank\":\"7\",\"hasc\":\"TH.AC\",\"alt-name\":null,\"woe-id\":\"2347201\"\r\n,\"subregion\":null,\"fips\":\"TH77\",\"postal-code\":\"AC\",\"name\":\"Amnat Charoen\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"104.766\",\"woe-name\":\"Amnat Charoen\",\"latitude\":\"15.8583\",\"woe-label\":\"Amnat Charoen, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[4258,6789],[4304,6803],[4381,6869],[4409,6843],[4423,6758],[4470,6725],[4459,6695],[4420,6653],[4438,6583],[4412,6554],[4415,6509],[4390,6460],[4360,6367],[4360,6291],[4341,6263],[4305,6288],[4280,6282],[4254,6327],[4208,6336],[4178,6373],[4148,6368],[4161,6348],[4117,6319],[4056,6336],[4005,6375],[3991,6436],[4017,6578],[4041,6610],[4083,6701],[4120,6734],[4255,6767],[4258,6789]]]}},{\"type\":\"Feature\",\"id\":\"TH.MD\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.48,\"hc-key\":\"th-md\",\"hc-a2\":\"MD\",\"labelrank\":\"7\",\"hasc\":\"TH.MD\",\"alt-name\":null,\"woe-id\":\"2347197\",\"subregion\":null,\"fips\":\"TH78\",\"postal-code\":\"MD\",\"name\":\"Mukdahan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"104.531\",\"woe-name\":\"Mukdahan\",\"latitude\":\"16.5636\",\"woe-label\":\"Mukdahan, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[4381,6869],[4304,6803],[4258,6789],[4187,6804],[4155,6820],[4129,6804],[4096,6830],[4076,6870],[4031,6894],[3964,6895],[3931,6878],[3914,6882],[3897,6973],[3849,6956],[3843,7026],[3804,7087],[3802,7127],[3720,7247],[3740,7251],[3768,7294],[3837,7297],[3883,7267],[3910,7279],[3952,7268],[4019,7268],[4052,7243],[4091,7258],[4151,7251],[4155,7214],[4199,7204],[4190,7239],[4206,7251],[4223,7175],[4207,7100],[4210,7037],[4293,6973],[4322,6911],[4381,6869]]]}},{\"type\":\"Feature\",\"id\":\"TH.SN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.37,\"hc-middle-y\":0.44,\"hc-key\":\"th-sn\",\"hc-a2\":\"SN\",\"labelrank\":\"7\",\"hasc\":\"TH.SN\",\"alt-name\":null,\"woe-id\":\"2347146\",\"subregion\":null,\"fips\":\"TH20\",\"postal-code\":\"SN\",\"name\":\"Sakon Nakhon\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.845\",\"woe-name\":\"Sakon Nakhon\",\"latitude\":\"17.3577\",\"woe-label\":\"Sakon Nakhon, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3837,7297],[3768,7294],[3740,7251],[3720,7247],[3688,7262],[3639,7232],[3625,7206],[3559,7251],[3513,7301],[3515,7330],[3417,7395],[3417,7441],[3373,7480],[3347,7483],[3290,7520],[3235,7520],[3193,7542],[3145,7553],[3128,7588],[3158,7639],[3142,7676],[3149,7707],[3190,7786],[3228,7797],[3227,7909],[3205,7936],[3226,7996],[3227,8045],[3211,8078],[3249,8087],[3278,8127],[3322,8142],[3389,8106],[3381,8077],[3468,8037],[3478,8060],[3506,8001],[3577,8011],[3594,7965],[3629,7934],[3657,7958],[3667,7926],[3698,7905],[3706,7867],[3675,7833],[3688,7805],[3663,7714],[3700,7654],[3748,7653],[3771,7675],[3820,7672],[3886,7686],[3949,7687],[3953,7640],[3975,7561],[3948,7507],[3944,7465],[3920,7437],[3944,7404],[3895,7358],[3881,7327],[3837,7297]]]}},{\"type\":\"Feature\",\"id\":\"TH.NW\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.46,\"hc-middle-y\":0.52,\"hc-key\":\"th-nw\",\"hc-a2\":\"NW\",\"labelrank\":\"7\",\"hasc\":\"TH.NW\",\"alt-name\":null,\"woe-id\":\"2347156\",\"subregion\":null,\"fips\":\"TH31\",\"postal-code\":\"NW\",\"name\":\"Narathiwat\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"101.727\",\"woe-name\":\"Narathiwat\",\"latitude\":\"6.17758\",\"woe-label\":\"Narathiwat, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2041,-325],[2034,-276],[2070,-271],[2105,-311],[2131,-310],[2193,-390],[2267,-436],[2349,-513],[2389,-541],[2388,-637],[2380,-661],[2306,-722],[2277,-774],[2273,-834],[2209,-892],[2190,-922],[2146,-891],[2107,-907],[2080,-891],[2068,-838],[2027,-801],[1969,-811],[1958,-744],[1960,-699],[1882,-588],[1897,-567],[1920,-430],[1994,-407],[2050,-341],[2041,-325]]]}},{\"type\":\"Feature\",\"id\":\"TH.PI\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.57,\"hc-middle-y\":0.21,\"hc-key\":\"th-pi\",\"hc-a2\":\"PI\",\"labelrank\":\"7\",\"hasc\":\"TH.PI\",\"alt-name\":null,\"woe-id\":\"2347193\",\"subregion\":null,\"fips\":\"TH69\",\"postal-code\":\"PI\",\"name\":\"Pattani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"101.381\",\"woe-name\":\"Pattani\",\"latitude\":\"6.7391\",\"woe-label\":\"Pattani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2131,-310],[2105,-311],[2070,-271],[2034,-276],[2041,-325],[2009,-332],[1973,-295],[1939,-314],[1854,-329],[1823,-293],[1820,-241],[1772,-291],[1716,-293],[1674,-266],[1646,-254],[1628,-196],[1630,-148],[1649,-105],[1740,-101],[1778,-72],[1857,-90],[1840,-60],[1791,-40],[1834,-37],[1881,-69],[1945,-84],[2014,-122],[2131,-310]]]}},{\"type\":\"Feature\",\"id\":\"TH.RN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.11,\"hc-middle-y\":0.84,\"hc-key\":\"th-rn\",\"hc-a2\":\"RN\",\"labelrank\":\"7\",\"hasc\":\"TH.RN\",\"alt-name\":null,\"woe-id\":\"2347183\",\"subregion\":null,\"fips\":\"TH59\",\"postal-code\":\"RN\",\"name\":\"Ranong\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"98.58\",\"woe-name\":\"Ranong\",\"latitude\":\"9.51717\",\"woe-label\":\"Ranong, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-221,1686],[-280,1723],[-309,1714],[-283,1779],[-260,1864],[-238,1849],[-206,1876],[-255,1904],[-218,1941],[-228,1989],[-197,1979],[-181,2006],[-223,2029],[-180,2055],[-219,2075],[-176,2132],[-132,2167],[-153,2189],[-110,2257],[-68,2361],[-61,2408],[-16,2575],[-27,2621],[-48,2651],[-34,2699],[12,2753],[47,2772],[80,2738],[68,2698],[93,2682],[116,2630],[111,2587],[71,2548],[65,2505],[95,2472],[99,2444],[72,2404],[60,2332],[90,2286],[65,2207],[29,2189],[6,2156],[-30,2150],[-68,2090],[-126,2037],[-129,2014],[-108,1942],[-47,1902],[-29,1862],[-115,1771],[-103,1723],[-203,1713],[-221,1686]]]}},{\"type\":\"Feature\",\"id\":\"TH.NT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.75,\"hc-key\":\"th-nt\",\"hc-a2\":\"NT\",\"labelrank\":\"7\",\"hasc\":\"TH.NT\",\"alt-name\":\"Nakhon Thammarat|Nagara Sridharmaraj|Nakhon Sri Thammarat|Nakhornsrithamrat|Nakornsrithamaraj\",\"woe-id\":\"2347188\",\"subregion\":null,\"fips\":\"TH64\",\"postal-code\":\"NT\",\"name\":\"Nakhon Si Thammarat\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"99.78189999999999\",\"woe-name\":\"Nakhon Si Thammarat\",\"latitude\":\"8.37448\",\"woe-label\":\"Nakhon Si Thammarat, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[382,687],[387,725],[344,804],[366,876],[365,943],[329,979],[312,1020],[345,1085],[342,1126],[374,1110],[432,1142],[461,1169],[464,1198],[491,1218],[516,1264],[519,1346],[561,1396],[635,1409],[664,1442],[679,1500],[708,1506],[704,1546],[667,1574],[684,1628],[682,1669],[697,1691],[719,1698],[756,1678],[780,1578],[802,1537],[814,1463],[805,1448],[834,1197],[852,1154],[894,1129],[940,1036],[979,1013],[1000,1021],[984,1097],[1025,1059],[1063,963],[1086,817],[1115,685],[1069,676],[979,638],[960,585],[898,601],[872,641],[836,659],[727,643],[679,620],[669,651],[681,713],[663,723],[578,714],[529,640],[428,648],[382,687]]]}},{\"type\":\"Feature\",\"id\":\"TH.SG\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.68,\"hc-key\":\"th-sg\",\"hc-a2\":\"SG\",\"labelrank\":\"7\",\"hasc\":\"TH.SG\",\"alt-name\":null,\"woe-id\":\"2347192\",\"subregion\":null,\"fips\":\"TH68\",\"postal-code\":\"SG\",\"name\":\"Songkhla\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"100.568\",\"woe-name\":\"Songkhla\",\"latitude\":\"6.81212\",\"woe-label\":\"Songkhla, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"MultiPolygon\",\"coordinates\":[[[[901,43],[889,64],[911,90],[980,129],[1071,148],[1118,184],[1143,225],[1148,193],[1179,178],[1154,161],[1177,123],[1222,100],[1273,104],[1297,130],[1295,163],[1427,-14],[1473,-37],[1489,-29],[1561,-88],[1598,-106],[1649,-105],[1630,-148],[1628,-196],[1646,-254],[1674,-266],[1676,-305],[1622,-384],[1546,-416],[1543,-485],[1515,-513],[1472,-515],[1458,-430],[1412,-404],[1390,-373],[1343,-407],[1247,-382],[1210,-359],[1151,-353],[1100,-313],[1073,-230],[1013,-223],[1010,-155],[1023,-87],[955,-53],[919,-4],[901,43]]],[[[1012,563],[984,581],[960,585],[979,638],[1069,676],[1115,685],[1188,347],[1232,243],[1281,166],[1268,142],[1212,188],[1178,194],[1187,213],[1165,275],[1163,384],[1151,413],[1104,419],[1078,377],[1067,420],[1102,449],[1090,553],[1063,580],[1012,563]]]]}},{\"type\":\"Feature\",\"id\":\"TH.PR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.66,\"hc-middle-y\":0.52,\"hc-key\":\"th-pr\",\"hc-a2\":\"PR\",\"labelrank\":\"7\",\"hasc\":\"TH.PR\",\"alt-name\":null,\"woe-id\":\"2347134\",\"subregion\":null,\"fips\":\"TH07\",\"postal-code\":\"PR\",\"name\":\"Phrae\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"99.9263\",\"woe-name\":\"Phrae\",\"latitude\":\"18.0577\",\"woe-label\":\"Phrae, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[918,8655],[951,8668],[1079,8658],[1109,8594],[1093,8573],[1098,8532],[1117,8527],[1104,8486],[1120,8425],[1177,8423],[1205,8410],[1214,8375],[1185,8315],[1188,8264],[1150,8171],[1120,8157],[1132,8073],[1092,8041],[1073,7984],[1039,8030],[993,8005],[928,7955],[835,7933],[803,7899],[764,7915],[686,7900],[655,7855],[600,7909],[556,7924],[521,7916],[467,7859],[402,7821],[381,7825],[356,7861],[356,7888],[398,7895],[497,8015],[564,8084],[589,8075],[642,8110],[705,8219],[742,8260],[775,8274],[812,8339],[837,8356],[875,8429],[880,8465],[914,8474],[921,8502],[909,8595],[918,8655]]]}},{\"type\":\"Feature\",\"id\":\"TH.PY\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.56,\"hc-middle-y\":0.57,\"hc-key\":\"th-py\",\"hc-a2\":\"PY\",\"labelrank\":\"7\",\"hasc\":\"TH.PY\",\"alt-name\":null,\"woe-id\":\"2347166\",\"subregion\":null,\"fips\":\"TH41\",\"postal-code\":\"PY\",\"name\":\"Phayao\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"100.16\",\"woe-name\":\"Phayao\",\"latitude\":\"19.1866\",\"woe-label\":\"Phayao, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1079,8658],[951,8668],[918,8655],[884,8664],[865,8713],[808,8748],[784,8781],[723,8792],[708,8829],[686,8835],[629,8959],[629,9025],[613,9106],[654,9126],[767,9146],[769,9084],[793,9074],[833,9106],[887,9108]\r\n,[922,9138],[959,9244],[1013,9260],[1069,9290],[1100,9325],[1121,9259],[1146,9223],[1151,9188],[1212,9158],[1230,9168],[1225,9135],[1187,9080],[1204,9047],[1230,9050],[1255,9027],[1246,8979],[1273,8895],[1225,8861],[1231,8821],[1166,8832],[1155,8791],[1181,8784],[1163,8757],[1125,8747],[1079,8658]]]}},{\"type\":\"Feature\",\"id\":\"TH.SO\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.34,\"hc-middle-y\":0.70,\"hc-key\":\"th-so\",\"hc-a2\":\"SO\",\"labelrank\":\"7\",\"hasc\":\"TH.SO\",\"alt-name\":\"Sawankhalokt|Sukhotai|Sukothai|Svargalok\",\"woe-id\":\"2347136\",\"subregion\":null,\"fips\":\"TH09\",\"postal-code\":\"SO\",\"name\":\"Sukhothai\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"99.7009\",\"woe-name\":\"Sukhothai\",\"latitude\":\"17.2435\",\"woe-label\":\"Sukhothai, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[764,7915],[816,7842],[816,7778],[788,7750],[803,7723],[852,7673],[863,7643],[839,7627],[849,7557],[819,7513],[827,7447],[783,7446],[789,7415],[848,7357],[901,7326],[933,7294],[924,7250],[864,7246],[856,7221],[809,7227],[762,7134],[793,7123],[774,7097],[742,7129],[624,7128],[527,7189],[508,7233],[484,7239],[408,7226],[379,7242],[334,7271],[325,7297],[332,7368],[360,7404],[358,7515],[380,7510],[410,7474],[445,7491],[471,7586],[439,7612],[444,7640],[426,7664],[442,7708],[430,7739],[453,7765],[469,7818],[467,7859],[521,7916],[556,7924],[600,7909],[655,7855],[686,7900],[764,7915]]]}},{\"type\":\"Feature\",\"id\":\"TH.UD\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.43,\"hc-middle-y\":0.59,\"hc-key\":\"th-ud\",\"hc-a2\":\"UD\",\"labelrank\":\"7\",\"hasc\":\"TH.UD\",\"alt-name\":null,\"woe-id\":\"2347137\",\"subregion\":null,\"fips\":\"TH10\",\"postal-code\":\"UD\",\"name\":\"Uttaradit\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"100.531\",\"woe-name\":\"Uttaradit\",\"latitude\":\"17.7188\",\"woe-label\":\"Uttaradit, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[827,7447],[819,7513],[849,7557],[839,7627],[863,7643],[852,7673],[803,7723],[788,7750],[816,7778],[816,7842],[764,7915],[803,7899],[835,7933],[928,7955],[993,8005],[1039,8030],[1073,7984],[1092,8041],[1132,8073],[1198,8075],[1238,8098],[1370,8082],[1425,8125],[1480,8247],[1587,8338],[1644,8303],[1626,8246],[1648,8216],[1636,8157],[1654,8105],[1617,8074],[1585,8017],[1545,7988],[1536,7931],[1515,7916],[1509,7850],[1478,7835],[1454,7849],[1424,7804],[1385,7773],[1345,7718],[1267,7665],[1252,7640],[1191,7623],[1147,7632],[1046,7596],[1013,7549],[1023,7511],[984,7471],[946,7472],[864,7446],[827,7447]]]}},{\"type\":\"Feature\",\"id\":\"TH.KN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.65,\"hc-middle-y\":0.65,\"hc-key\":\"th-kn\",\"hc-a2\":\"KN\",\"labelrank\":\"7\",\"hasc\":\"TH.KN\",\"alt-name\":\"Kan Buri|Park Prag\",\"woe-id\":\"2347174\",\"subregion\":null,\"fips\":\"TH50\",\"postal-code\":\"KN\",\"name\":\"Kanchanaburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Western\",\"longitude\":\"99.29689999999999\",\"woe-name\":\"Kanchanaburi\",\"latitude\":\"14.3317\",\"woe-label\":\"Kanchanaburi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[240,4923],[213,4951],[201,5025],[146,5080],[101,5146],[96,5176],[44,5208],[-41,5272],[-75,5323],[-101,5322],[-156,5361],[-188,5402],[-238,5504],[-256,5513],[-280,5571],[-366,5654],[-405,5716],[-420,5801],[-439,5843],[-436,5897],[-460,5951],[-441,5990],[-451,6021],[-424,6019],[-375,6071],[-298,6048],[-308,6076],[-294,6119],[-239,6139],[-197,6097],[-178,6119],[-173,6190],[-189,6299],[-189,6353],[-104,6311],[-57,6236],[46,6087],[57,6063],[121,6020],[136,5915],[192,5867],[231,5874],[312,5853],[334,5858],[355,5782],[337,5762],[408,5687],[447,5686],[462,5632],[512,5659],[523,5709],[618,5708],[697,5621],[754,5594],[740,5575],[769,5542],[724,5506],[720,5373],[724,5318],[714,5280],[683,5251],[687,5201],[715,5171],[713,5152],[765,5086],[706,4991],[628,4996],[548,4970],[527,4949],[478,4976],[389,4944],[312,4953],[281,4928],[240,4923]]]}},{\"type\":\"Feature\",\"id\":\"TH.TK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.68,\"hc-middle-y\":0.29,\"hc-key\":\"th-tk\",\"hc-a2\":\"TK\",\"labelrank\":\"7\",\"hasc\":\"TH.TK\",\"alt-name\":null,\"woe-id\":\"2347135\",\"subregion\":null,\"fips\":\"TH08\",\"postal-code\":\"TK\",\"name\":\"Tak\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Western\",\"longitude\":\"98.8441\",\"woe-name\":\"Tak\",\"latitude\":\"17.0043\",\"woe-label\":\"Tak, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-189,6353],[-190,6397],[-167,6471],[-171,6533],[-160,6574],[-180,6632],[-141,6626],[-107,6676],[-80,6684],[-19,6666],[18,6697],[24,6744],[52,6781],[66,6857],[54,6889],[1,6913],[-15,6866],[-90,6792],[-108,6812],[-128,6894],[-126,6931],[-173,6996],[-185,7046],[-210,7063],[-249,7122],[-236,7161],[-204,7188],[-211,7246],[-263,7333],[-288,7354],[-349,7363],[-381,7404],[-373,7425],[-414,7472],[-499,7547],[-507,7599],[-544,7623],[-581,7696],[-633,7733],[-592,7744],[-494,7794],[-426,7799],[-393,7827],[-355,7835],[-387,7789],[-386,7750],[-352,7739],[-342,7708],[-347,7613],[-332,7546],[-277,7508],[-173,7536],[-167,7577],[-182,7591],[-170,7634],[-194,7668],[-174,7734],[-138,7745],[-128,7768],[-138,7812],[-101,7864],[-69,7878],[-44,7826],[-72,7811],[-76,7771],[-61,7680],[-25,7679],[40,7714],[60,7777],[87,7796],[143,7772],[158,7693],[144,7634],[167,7604],[256,7569],[289,7614],[325,7612],[333,7557],[358,7515],[360,7404],[332,7368],[325,7297],[334,7271],[379,7242],[365,7188],[348,7170],[344,7121],[311,7070],[316,7013],[304,6988],[260,6976],[215,6940],[139,6943],[126,6929],[143,6886],[133,6798],[151,6738],[142,6680],[153,6613],[184,6589],[191,6495],[195,6467],[221,6422],[223,6384],[208,6317],[167,6264],[182,6213],[175,6149],[146,6053],[121,6020],[57,6063],[46,6087],[-57,6236],[-104,6311],[-189,6353]]]}},{\"type\":\"Feature\",\"id\":\"TH.UT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.51,\"hc-middle-y\":0.54,\"hc-key\":\"th-ut\",\"hc-a2\":\"UT\",\"labelrank\":\"7\",\"hasc\":\"TH.UT\",\"alt-name\":null,\"woe-id\":\"2347142\",\"subregion\":null,\"fips\":\"TH15\",\"postal-code\":\"UT\",\"name\":\"Uthai Thani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"99.5275\",\"woe-name\":\"Uthai Thani\",\"latitude\":\"15.27\",\"woe-label\":\"Uthai Thani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[221,6422],[250,6425],[307,6383],[395,6337],[408,6312],[468,6272],[498,6269],[605,6346],[651,6357],[685,6327],[740,6325],[754,6274],[784,6238],[826,6231],[879,6187],[887,6167],[871,6140],[897,6092],[882,6054],[846,6075],[772,6068],[676,6091],[646,6057],[672,5979],[711,5924],[697,5894],[659,5869],[652,5830],[603,5853],[587,5820],[433,5859],[425,5883],[365,5911],[334,5858],[312,5853],[231,5874],[192,5867],[136,5915],[121,6020],[146,6053],[175,6149],[182,6213],[167,6264],[208,6317],[223,6384],[221,6422]]]}},{\"type\":\"Feature\",\"id\":\"TH.NS\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.66,\"hc-middle-y\":0.51,\"hc-key\":\"th-ns\",\"hc-a2\":\"NS\",\"labelrank\":\"7\",\"hasc\":\"TH.NS\",\"alt-name\":null,\"woe-id\":\"2347143\",\"subregion\":null,\"fips\":\"TH16\",\"postal-code\":\"NS\",\"name\":\"Nakhon Sawan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Central\",\"longitude\":\"100.25\",\"woe-name\":\"Nakhon Sawan\",\"latitude\":\"15.6943\",\"woe-label\":\"Nakhon Sawan, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[887,6167],[879,6187],[826,6231],[784,6238],[754,6274],[740,6325],[685,6327],[651,6357],[605,6346],[498,6269],[468,6272],[408,6312],[395,6337],[307,6383],[250,6425],[221,6422],[195,6467],[191,6495],[250,6538],[290,6541],[335,6510],[389,6529],[459,6514],[517,6530],[570,6504],[607,6434],[653,6466],[678,6538],[722,6608],[765,6645],[796,6737],[803,6796],[839,6840],[860,6815],[872,6728],[908,6697],[942,6603],[965,6560],[1000,6538],[1055,6530],[1057,6550],[1136,6539],[1203,6540],[1272,6560],[1380,6545],[1411,6496],[1409,6452],[1435,6362],[1437,6322],[1411,6270],[1371,6228],[1364,6169],[1244,6054],[1221,6003],[1200,5990],[1186,5938],[1163,5906],[1107,5930],[1089,5978],[1067,5984],[1033,6072],[992,6123],[930,6169],[887,6167]]]}},{\"type\":\"Feature\",\"id\":\"TH.PK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.66,\"hc-middle-y\":0.19,\"hc-key\":\"th-pk\",\"hc-a2\":\"PK\",\"labelrank\":\"7\",\"hasc\":\"TH.PK\",\"alt-name\":\"Korh Luxk|Prachuab Girikhand|Prachuapkirikhan|Prachut Khirikhan\",\"woe-id\":\"2347181\",\"subregion\":null,\"fips\":\"TH57\",\"postal-code\":\"PK\",\"name\":\"Prachuap Khiri Khan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Western\",\"longitude\":\"99.7274\",\"woe-name\":\"Prachuap Khiri Khan\",\"latitude\":\"12.3053\",\"woe-label\":\"Prachuap Khiri Khan, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[237,2956],[289,3006],[311,3072],[363,3162],[398,3203],[408,3246],[444,3291],[453,3365],[472,3384],[518,3389],[573,3459],[590,3525],[549,3556],[535,3583],[549,3643],[509,3679],[528,3756],[471,3752],[464,3848],[446,3877],[438,3941],[414,4001],[426,4075],[477,4089],[546,4080],[585,4060],[620,4082],[683,4087],[729,4120],[826,4127],[841,4057],[841,3994],[863,3942],[842,3866],[870,3802],[847,3773],[824,3714],[752,3637],[721,3537],[725,3471],[678,3448],[599,3311],[587,3250],[547,3172],[544,3130],[559,3084],[508,3054],[492,3011],[505,2969],[499,2925],[433,2895],[327,2896],[246,2930],[237,2956]]]}},{\"type\":\"Feature\",\"id\":\"TH.UR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.60,\"hc-middle-y\":0.58,\"hc-key\":\"th-ur\",\"hc-a2\":\"UR\",\"labelrank\":\"7\",\"hasc\":\"TH.UR\",\"alt-name\":null,\"woe-id\":\"2347199\",\"subregion\":null,\"fips\":\"TH75\",\"postal-code\":\"UR\",\"name\":\"Ubon Ratchathani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"105.016\",\"woe-name\":\"Ubon Ratchathani\",\"latitude\":\"15.0137\",\"woe-label\":\"Ubon Ratchathani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[4470,6725],[4563,6695],[4684,6675],[4694,6658],[4655,6627],[4654,6601],[4694,6514],[4720,6489],[4775,6490],[4839,6461],[4868,6397],[4828,6241],[4756,6202],[4755,6172],[4809,6167],[4814,6129],[4772,6097],[4738,6055],[4738,5995],[4785,5976],[4812,5931],[4841,5921],[4800,5878],[4813,5855],[4790,5836],[4792,5804],[4771,5769],[4784,5732],[4778,5676]\r\n,[4790,5627],[4781,5585],[4726,5503],[4669,5470],[4635,5475],[4621,5453],[4541,5426],[4504,5351],[4465,5338],[4436,5359],[4413,5401]\r\n,[4409,5460],[4367,5468],[4347,5503],[4325,5502],[4327,5559],[4305,5589],[4327,5659],[4362,5660],[4324,5707],[4289,5774],[4296,5811],[4267,5846],[4215,5862],[4198,5889],[4191,5984],[4224,6037],[4185,6091],[4126,6096],[4114,6086],[4026,6099],[3995,6115],[4008,6163],[3973,6197],[3966,6224],[3980,6294],[4043,6300],[4056,6336],[4117,6319],[4161,6348],[4148,6368],[4178,6373],[4208,6336],[4254,6327],[4280,6282],[4305,6288],[4341,6263],[4360,6291],[4360,6367],[4390,6460],[4415,6509],[4412,6554],[4438,6583],[4420,6653],[4459,6695],[4470,6725]]]}},{\"type\":\"Feature\",\"id\":\"TH.SK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.37,\"hc-middle-y\":0.37,\"hc-key\":\"th-sk\",\"hc-a2\":\"SK\",\"labelrank\":\"7\",\"hasc\":\"TH.SK\",\"alt-name\":\"Srakaeo\",\"woe-id\":\"20069925\",\"subregion\":null,\"fips\":\"TH80\",\"postal-code\":\"SK\",\"name\":\"Sa Kaeo\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"102.384\",\"woe-name\":\"Sa Kaeo\",\"latitude\":\"13.8589\",\"woe-label\":null,\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2936,5269],[2910,5200],[2906,5163],[2837,5100],[2786,4971],[2698,4920],[2674,4886],[2715,4855],[2655,4826],[2525,4822],[2526,4608],[2484,4556],[2452,4556],[2412,4585],[2381,4545],[2318,4524],[2314,4592],[2285,4652],[2248,4758],[2278,4767],[2272,4837],[2238,4832],[2204,4898],[2196,4934],[2216,4958],[2217,4998],[2180,5027],[2190,5088],[2219,5112],[2216,5153],[2275,5188],[2314,5235],[2319,5275],[2343,5255],[2400,5241],[2425,5276],[2453,5243],[2498,5236],[2540,5257],[2636,5248],[2641,5216],[2675,5212],[2668,5232],[2707,5254],[2793,5243],[2868,5268],[2936,5269]]]}},{\"type\":\"Feature\",\"id\":\"TH.RY\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.49,\"hc-middle-y\":0.55,\"hc-key\":\"th-ry\",\"hc-a2\":\"RY\",\"labelrank\":\"7\",\"hasc\":\"TH.RY\",\"alt-name\":null,\"woe-id\":\"2347171\",\"subregion\":null,\"fips\":\"TH47\",\"postal-code\":\"RY\",\"name\":\"Rayong\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"101.402\",\"woe-name\":\"Rayong\",\"latitude\":\"12.8125\",\"woe-label\":\"Rayong, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2142,4182],[2068,4184],[2037,4146],[1993,4147],[1986,4132],[1941,4136],[1893,4125],[1883,4105],[1807,4137],[1753,4150],[1637,4164],[1559,4133],[1555,4156],[1575,4246],[1608,4274],[1640,4328],[1634,4415],[1687,4412],[1700,4454],[1774,4435],[1818,4446],[1849,4416],[1909,4426],[1930,4451],[1958,4449],[1988,4491],[2029,4513],[2069,4501],[2085,4428],[2112,4403],[2112,4365],[2134,4366],[2166,4325],[2163,4230],[2142,4182]]]}},{\"type\":\"Feature\",\"id\":\"TH.CY\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.48,\"hc-middle-y\":0.45,\"hc-key\":\"th-cy\",\"hc-a2\":\"CY\",\"labelrank\":\"7\",\"hasc\":\"TH.CY\",\"alt-name\":null,\"woe-id\":\"2347151\",\"subregion\":null,\"fips\":\"TH26\",\"postal-code\":\"CY\",\"name\":\"Chaiyaphum\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"101.877\",\"woe-name\":\"Chaiyaphum\",\"latitude\":\"16.0138\",\"woe-label\":\"Chaiyaphum, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1772,6088],[1821,6165],[1816,6276],[1836,6380],[1789,6419],[1786,6492],[1808,6514],[1826,6566],[1795,6587],[1782,6656],[1809,6779],[1819,6863],[1835,6899],[1880,6955],[1878,6979],[1911,7004],[1902,7053],[1909,7097],[1942,7095],[1971,7119],[1996,7104],[2038,7105],[2061,7084],[2080,7096],[2103,7076],[2151,7087],[2225,7070],[2242,7036],[2315,6976],[2409,6977],[2441,6955],[2519,6932],[2549,6943],[2579,6910],[2548,6789],[2495,6705],[2451,6663],[2461,6645],[2541,6599],[2502,6510],[2500,6467],[2436,6427],[2390,6421],[2370,6375],[2327,6328],[2295,6356],[2270,6308],[2233,6264],[2239,6217],[2198,6187],[2187,6154],[2148,6156],[2017,6099],[1961,6055],[1848,6024],[1826,6058],[1772,6088]]]}},{\"type\":\"Feature\",\"id\":\"TH.SU\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.57,\"hc-middle-y\":0.62,\"hc-key\":\"th-su\",\"hc-a2\":\"SU\",\"labelrank\":\"7\",\"hasc\":\"TH.SU\",\"alt-name\":null,\"woe-id\":\"2347154\",\"subregion\":null,\"fips\":\"TH29\",\"postal-code\":\"SU\",\"name\":\"Surin\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.588\",\"woe-name\":\"Surin\",\"latitude\":\"14.9355\",\"woe-label\":\"Surin, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3744,5426],[3712,5417],[3693,5433],[3619,5413],[3585,5431],[3483,5440],[3475,5474],[3443,5479],[3421,5454],[3388,5466],[3322,5430],[3297,5437],[3239,5411],[3169,5404],[3177,5486],[3158,5544],[3158,5592],[3187,5651],[3195,5719],[3272,5793],[3305,5844],[3309,5935],[3301,6027],[3339,6111],[3316,6135],[3288,6126],[3243,6148],[3192,6117],[3166,6116],[3118,6159],[3101,6155],[3086,6195],[3052,6207],[3062,6240],[3145,6217],[3226,6184],[3278,6204],[3302,6217],[3355,6211],[3401,6234],[3437,6223],[3541,6217],[3618,6242],[3622,6227],[3677,6213],[3684,6200],[3738,6195],[3746,6151],[3694,6097],[3678,6026],[3713,5927],[3654,5823],[3653,5774],[3698,5758],[3710,5704],[3748,5652],[3741,5570],[3754,5498],[3744,5426]]]}},{\"type\":\"Feature\",\"id\":\"TH.NF\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.40,\"hc-middle-y\":0.31,\"hc-key\":\"th-nf\",\"hc-a2\":\"NF\",\"labelrank\":\"7\",\"hasc\":\"TH.NF\",\"alt-name\":null,\"woe-id\":\"2347196\",\"subregion\":null,\"fips\":\"TH73\",\"postal-code\":\"NF\",\"name\":\"Nakhon Phanom\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"104.628\",\"woe-name\":\"Nakhon Phanom\",\"latitude\":\"17.2227\",\"woe-label\":\"Nakhon Phanom, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3789,8122],[3851,8005],[3898,7979],[3950,7892],[3993,7849],[4104,7795],[4160,7762],[4235,7660],[4239,7562],[4235,7511],[4192,7402],[4206,7251],[4190,7239],[4199,7204],[4155,7214],[4151,7251],[4091,7258],[4052,7243],[4019,7268],[3952,7268],[3910,7279],[3883,7267],[3837,7297],[3881,7327],[3895,7358],[3944,7404],[3920,7437],[3944,7465],[3948,7507],[3975,7561],[3953,7640],[3949,7687],[3886,7686],[3820,7672],[3771,7675],[3748,7653],[3700,7654],[3663,7714],[3688,7805],[3675,7833],[3706,7867],[3698,7905],[3667,7926],[3657,7958],[3642,8002],[3652,8048],[3678,8057],[3698,8018],[3727,8008],[3742,8041],[3737,8108],[3789,8122]]]}},{\"type\":\"Feature\",\"id\":\"TH.BK\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.62,\"hc-middle-y\":0.50,\"hc-key\":\"th-bk\",\"hc-a2\":\"BK\",\"labelrank\":\"7\",\"hasc\":\"TH.BK\",\"alt-name\":\"??????\",\"woe-id\":\"-2347144\",\"subregion\":null,\"fips\":\"TH81\",\"postal-code\":\"BK\",\"name\":\"Bueng Kan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.752\",\"woe-name\":null,\"latitude\":\"18.1565\",\"woe-label\":null,\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3146,8309],[3106,8338],[3119,8386],[3151,8405],[3207,8418],[3362,8392],[3435,8356],[3476,8355],[3560,8313],[3605,8348],[3640,8339],[3690,8264],[3722,8191],[3789,8122],[3737,8108],[3742,8041],[3727,8008],[3698,8018],[3678,8057],[3652,8048],[3642,8002],[3657,7958],[3629,7934],[3594,7965],[3577,8011],[3506,8001],[3478,8060],[3468,8037],[3381,8077],[3389,8106],[3322,8142],[3278,8127],[3249,8087],[3168,8149],[3162,8179],[3201,8232],[3192,8254],[3150,8265],[3146,8309]]]}},{\"type\":\"Feature\",\"id\":\"TH.MH\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.55,\"hc-middle-y\":0.23,\"hc-key\":\"th-mh\",\"hc-a2\":\"MH\",\"labelrank\":\"7\",\"hasc\":\"TH.MH\",\"alt-name\":null,\"woe-id\":\"2347128\",\"subregion\":null,\"fips\":\"TH01\",\"postal-code\":\"MH\",\"name\":\"Mae Hong Son\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"97.89109999999999\",\"woe-name\":\"Mae Hong Son\",\"latitude\":\"18.4043\",\"woe-label\":\"Mae Hong Son, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-633,7733],[-730,7825],[-744,7869],[-795,7936],[-763,8019],[-739,8037],[-763,8099],[-782,8112],[-787,8167],[-833,8238],[-819,8285],[-873,8302],[-896,8256],[-949,8306],[-955,8357],[-999,8444],[-973,8426],[-908,8422],[-832,8466],[-742,8479],[-732,8517],[-759,8694],[-802,8739],[-770,8767],[-752,8821],[-694,8875],[-691,8933],[-723,8996],[-696,9014],[-723,9085],[-666,9155],[-672,9200],[-554,9261],[-556,9323],[-542,9381],[-482,9362],[-412,9318],[-395,9279],[-346,9297],[-254,9295],[-228,9308],[-225,9278],[-177,9234],[-156,9164],[-138,9142],[-148,9076],[-137,8993],[-152,8940],[-127,8913],[-106,8865],[-118,8831],[-191,8810],[-225,8818],[-243,8796],[-270,8810],[-328,8817],[-390,8895],[-420,8912],[-453,8898],[-480,8849],[-470,8822],[-486,8793],[-477,8755],[-505,8668],[-480,8626],[-494,8529],[-484,8454],[-454,8414],[-419,8395],[-448,8378],[-495,8308],[-482,8285],[-501,8232],[-478,8125],[-508,8077],[-495,8035],[-457,8007],[-397,7936],[-419,7896],[-395,7852],[-355,7835],[-393,7827],[-426,7799],[-494,7794],[-592,7744],[-633,7733]]]}},{\"type\":\"Feature\",\"id\":\"TH.PU\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.50,\"hc-key\":\"th-pu\",\"hc-a2\":\"PU\",\"labelrank\":\"9\",\"hasc\":\"TH.PU\",\"alt-name\":null,\"woe-id\":\"2347186\",\"subregion\":null,\"fips\":\"TH62\",\"postal-code\":\"PU\",\"name\":\"Phuket\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"98.3472\",\"woe-name\":\"Phuket\",\"latitude\":\"7.97108\",\"woe-label\":\"Phuket, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\"\r\n,\"coordinates\":[[[-344,607],[-370,559],[-386,577],[-410,677],[-390,731],[-395,780],[-384,868],[-354,854],[-332,816],[-275,777],[-305,696],[-274,646],[-304,630],[-305,594],[-344,607]]]}},{\"type\":\"Feature\",\"id\":\"TH.CP\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.80,\"hc-middle-y\":0.16,\"hc-key\":\"th-cp\",\"hc-a2\":\"CP\",\"labelrank\":\"7\",\"hasc\":\"TH.CP\",\"alt-name\":null,\"woe-id\":\"2347182\",\"subregion\":null,\"fips\":\"TH58\",\"postal-code\":\"CP\",\"name\":\"Chumphon\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"99.07550000000001\",\"woe-name\":\"Chumphon\",\"latitude\":\"10.3809\",\"woe-label\":\"Chumphon, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[499,2925],[494,2886],[505,2829],[462,2836],[450,2782],[407,2716],[354,2656],[314,2519],[344,2496],[337,2456],[305,2446],[280,2471],[245,2456],[250,2416],[310,2351],[281,2348],[251,2288],[246,2250],[262,2204],[250,2187],[257,2080],[240,2041],[206,2036],[160,2000],[64,1996],[-23,1958],[-47,1902],[-108,1942],[-129,2014],[-126,2037],[-68,2090],[-30,2150],[6,2156],[29,2189],[65,2207],[90,2286],[60,2332],[72,2404],[99,2444],[95,2472],[65,2505],[71,2548],[111,2587],[116,2630],[93,2682],[68,2698],[80,2738],[47,2772],[66,2791],[116,2798],[122,2875],[136,2896],[175,2887],[190,2924],[237,2956],[246,2930],[327,2896],[433,2895],[499,2925]]]}},{\"type\":\"Feature\",\"id\":\"TH.YL\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.48,\"hc-middle-y\":0.36,\"hc-key\":\"th-yl\",\"hc-a2\":\"YL\",\"labelrank\":\"7\",\"hasc\":\"TH.YL\",\"alt-name\":null,\"woe-id\":\"2347194\",\"subregion\":null,\"fips\":\"TH70\",\"postal-code\":\"YL\",\"name\":\"Yala\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Southern\",\"longitude\":\"101.218\",\"woe-name\":\"Yala\",\"latitude\":\"6.14264\",\"woe-label\":\"Yala, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1969,-811],[1785,-889],[1768,-954],[1713,-998],[1680,-999],[1630,-935],[1596,-926],[1578,-894],[1613,-808],[1654,-792],[1671,-671],[1640,-635],[1667,-595],[1661,-553],[1618,-557],[1582,-534],[1535,-561],[1479,-561],[1472,-515],[1515,-513],[1543,-485],[1546,-416],[1622,-384],[1676,-305],[1674,-266],[1716,-293],[1772,-291],[1820,-241],[1823,-293],[1854,-329],[1939,-314],[1973,-295],[2009,-332],[2041,-325],[2050,-341],[1994,-407],[1920,-430],[1897,-567],[1882,-588],[1960,-699],[1958,-744],[1969,-811]]]}},{\"type\":\"Feature\",\"id\":\"TH.CR\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.50,\"hc-middle-y\":0.37,\"hc-key\":\"th-cr\",\"hc-a2\":\"CR\",\"labelrank\":\"7\",\"hasc\":\"TH.CR\",\"alt-name\":null,\"woe-id\":\"2347130\",\"subregion\":null,\"fips\":\"TH03\",\"postal-code\":\"CR\",\"name\":\"Chiang Rai\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"99.9059\",\"woe-name\":\"Chiang Rai\",\"latitude\":\"19.9607\",\"woe-label\":\"Chiang Rai, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[487,9636],[499,9668],[471,9704],[457,9760],[426,9799],[483,9777],[586,9749],[667,9766],[691,9781],[714,9831],[786,9851],[817,9809],[851,9799],[895,9759],[898,9719],[920,9702],[943,9712],[942,9741],[971,9756],[979,9783],[1038,9820],[1078,9798],[1119,9711],[1146,9668],[1194,9638],[1207,9644],[1204,9577],[1158,9429],[1128,9409],[1095,9354],[1100,9325],[1069,9290],[1013,9260],[959,9244],[922,9138],[887,9108],[833,9106],[793,9074],[769,9084],[767,9146],[654,9126],[613,9106],[581,9159],[545,9137],[531,9086],[538,9006],[524,8976],[514,8906],[526,8882],[507,8844],[475,8836],[443,8798],[414,8789],[406,8822],[362,8881],[350,8927],[373,8992],[366,9061],[340,9157],[358,9191],[323,9237],[323,9275],[373,9309],[402,9378],[425,9390],[403,9446],[441,9504],[497,9497],[518,9462],[544,9530],[489,9564],[488,9586],[526,9615],[487,9636]]]}},{\"type\":\"Feature\",\"id\":\"TH.CM\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.53,\"hc-middle-y\":0.40,\"hc-key\":\"th-cm\",\"hc-a2\":\"CM\",\"labelrank\":\"7\",\"hasc\":\"TH.CM\",\"alt-name\":null,\"woe-id\":\"2347129\",\"subregion\":null,\"fips\":\"TH02\",\"postal-code\":\"CM\",\"name\":\"Chiang Mai\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"98.69670000000001\",\"woe-name\":\"Chiang Mai\",\"latitude\":\"18.8368\",\"woe-label\":\"Chiang Mai, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-228,9308],[-190,9286],[-114,9337],[-39,9350],[1,9382],[54,9337],[117,9368],[141,9411],[134,9456],[146,9554],[160,9579],[216,9610],[258,9613],[340,9570],[441,9598],[487,9636],[526,9615],[488,9586],[489,9564],[544,9530],[518,9462],[497,9497],[441,9504],[403,9446],[425,9390],[402,9378],[373,9309],[323,9275],[323,9237],[358,9191],[340,9157],[366,9061],[373,8992],[350,8927],[362,8881],[406,8822],[414,8789],[394,8772],[392,8715],[363,8694],[377,8681],[390,8618],[361,8515],[382,8502],[355,8446],[289,8491],[290,8533],[258,8575],[235,8573],[165,8537],[142,8547],[83,8445],[-23,8382],[-75,8367],[-70,8305],[-89,8278],[-19,8243],[6,8162],[-3,8058],[30,8035],[72,7924],[63,7871],[22,7848],[-40,7879],[-69,7878],[-101,7864],[-138,7812],[-128,7768],[-138,7745],[-174,7734],[-194,7668],[-170,7634],[-182,7591],[-167,7577],[-173,7536],[-277,7508],[-332,7546],[-347,7613],[-342,7708],[-352,7739],[-386,7750],[-387,7789],[-355,7835],[-395,7852],[-419,7896],[-397,7936],[-457,8007],[-495,8035],[-508,8077],[-478,8125],[-501,8232],[-482,8285],[-495,8308],[-448,8378],[-419,8395],[-454,8414],[-484,8454],[-494,8529],[-480,8626],[-505,8668],[-477,8755],[-486,8793],[-470,8822],[-480,8849],[-453,8898],[-420,8912],[-390,8895],[-328,8817],[-270,8810],[-243,8796],[-225,8818],[-191,8810],[-118,8831],[-106,8865],[-127,8913],[-152,8940],[-137,8993],[-148,9076],[-138,9142],[-156,9164],[-177,9234],[-225,9278],[-228,9308]]]}},{\"type\":\"Feature\",\"id\":\"TH.LN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.53,\"hc-middle-y\":0.16,\"hc-key\":\"th-ln\",\"hc-a2\":\"LN\",\"labelrank\":\"7\",\"hasc\":\"TH.LN\",\"alt-name\":\"Hariphunchai|Lampoon\",\"woe-id\":\"2347132\",\"subregion\":null,\"fips\":\"TH05\",\"postal-code\":\"LN\",\"name\":\"Lamphun\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"98.9979\",\"woe-name\":\"Lamphun\",\"latitude\":\"18.1333\",\"woe-label\":\"Lamphun, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-69,7878],[-40,7879],[22,7848],[63,7871],[72,7924],[30,8035],[-3,8058],[6,8162],[-19,8243],[-89,8278],[-70,8305],[-75,8367],[-23,8382],[83,8445],[142,8547],[165,8537],[235,8573],[258,8575],[290,8533],[289,8491],[355,8446],[352,8424],[300,8406],[208,8258],[146,8235],[175,8156],[179,8098],[201,8053],[212,7998],[259,7956],[251,7919],[210,7910],[220,7890],[178,7821],[173,7779],[143,7772],[87,7796],[60,7777],[40,7714],[-25,7679],[-61,7680],[-76,7771],[-72,7811],[-44,7826],[-69,7878]]]}},{\"type\":\"Feature\",\"id\":\"TH.NA\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.47,\"hc-middle-y\":0.51,\"hc-key\":\"th-na\",\"hc-a2\":\"NA\",\"labelrank\":\"7\",\"hasc\":\"TH.NA\",\"alt-name\":null,\"woe-id\":\"2347131\",\"subregion\":null,\"fips\":\"TH04\",\"postal-code\":\"NA\",\"name\":\"Nan\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"100.837\",\"woe-name\":\"Nan\",\"latitude\":\"18.8264\",\"woe-label\":\"Nan, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1230,9168],[1270,9193],[1327,9172],[1354,9150],[1438,9247],[1507,9248],[1612,9214],[1670,9232],[1696,9219],[1704,9184],[1692,9147],[1660,9132],[1651,9054],[1668,9048],[1688,8966],[1689,8905],[1751,8838],[1758,8816],[1728,8787],[1693,8721],[1691,8650],[1680,8589],[1701,8561],[1651,8511],[1642,8474],[1588,8440],[1556,8379],[1587,8338],[1480,8247],[1425,8125],[1370,8082],[1238,8098],[1198,8075],[1132,8073],[1120,8157],[1150,8171],[1188,8264],[1185,8315],[1214,8375],[1205,8410],[1177,8423],[1120,8425],[1104,8486],[1117,8527],[1098,8532],[1093,8573],[1109,8594],[1079,8658],[1125,8747],[1163,8757],[1181,8784],[1155,8791],[1166,8832],[1231,8821],[1225,8861],[1273,8895],[1246,8979],[1255,9027],[1230,9050],[1204,9047],[1187,9080],[1225,9135],[1230,9168]]]}},{\"type\":\"Feature\",\"id\":\"TH.LG\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.61,\"hc-middle-y\":0.36,\"hc-key\":\"th-lg\",\"hc-a2\":\"LG\",\"labelrank\":\"7\",\"hasc\":\"TH.LG\",\"alt-name\":null,\"woe-id\":\"2347133\",\"subregion\":null,\"fips\":\"TH06\",\"postal-code\":\"LG\",\"name\":\"Lampang\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northern\",\"longitude\":\"99.5707\",\"woe-name\":\"Lampang\",\"latitude\":\"18.6296\",\"woe-label\":\"Lampang, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[918,8655],[909,8595],[921,8502],[914,8474],[880,8465],[875,8429],[837,8356],[812,8339],[775,8274],[742,8260],[705,8219],[642,8110],[589,8075],[564,8084],[497,8015],[398,7895],[356,7888],[356,7861],[381,7825],[402,7821],[467,7859],[469,7818],[453,7765],[430,7739],[442,7708],[426,7664],[444,7640],[439,7612],[471,7586],[445,7491],[410,7474],[380,7510],[358,7515],[333,7557],[325,7612],[289,7614],[256,7569],[167,7604],[144,7634],[158,7693],[143,7772],[173,7779],[178,7821],[220,7890],[210,7910],[251,7919],[259,7956],[212,7998],[201,8053],[179,8098],[175,8156],[146,8235],[208,8258],[300,8406],[352,8424],[355,8446],[382,8502],[361,8515],[390,8618],[377,8681],[363,8694],[392,8715],[394,8772],[414,8789],[443,8798],[475,8836],[507,8844],[526,8882],[514,8906],[524,8976],[538,9006],[531,9086],[545,9137],[581,9159],[613,9106],[629,9025],[629,8959],[686,8835],[708,8829],[723,8792],[784,8781],[808,8748],[865,8713],[884,8664],[918,8655]]]}},{\"type\":\"Feature\",\"id\":\"TH.PB\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.69,\"hc-middle-y\":0.34,\"hc-key\":\"th-pb\",\"hc-a2\":\"PB\",\"labelrank\":\"7\",\"hasc\":\"TH.PB\",\"alt-name\":null,\"woe-id\":\"20069926\",\"subregion\":null,\"fips\":\"TH74\",\"postal-code\":\"PB\",\"name\":\"Prachin Buri\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Eastern\",\"longitude\":\"101.594\",\"woe-name\":\"Prachin Buri\",\"latitude\":\"14.1081\",\"woe-label\":\"Prachin Buri, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[1667,5109],[1663,5125],[1721,5167],[1799,5180],[1781,5231],[1789,5255],[1845,5299],[1849,5330],[1873,5321],[1920,5331],[1933,5359],[1907,5403],[1873,5420],[1856,5445],[1914,5471],[1955,5448],[2007,5452],[2100,5369],[2111,5392]\r\n,[2188,5407],[2205,5426],[2233,5403],[2248,5416],[2267,5390],[2242,5347],[2252,5327],[2319,5275],[2314,5235],[2275,5188],[2216,5153],[2219,5112],[2190,5088],[2180,5027],[2217,4998],[2216,4958],[2196,4934],[2162,4929],[2109,4991],[2074,4984],[2051,4955],[1998,4974],[1974,4952],[1961,4967],[1821,5031],[1718,5041],[1683,5023],[1670,5042],[1679,5075],[1667,5109]]]}},{\"type\":\"Feature\",\"id\":\"TH.RT\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.35,\"hc-middle-y\":0.56,\"hc-key\":\"th-rt\",\"hc-a2\":\"RT\",\"labelrank\":\"7\",\"hasc\":\"TH.RT\",\"alt-name\":null,\"woe-id\":\"2347176\",\"subregion\":null,\"fips\":\"TH52\",\"postal-code\":\"RT\",\"name\":\"Ratchaburi\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Western\",\"longitude\":\"99.61279999999999\",\"woe-name\":\"Ratchaburi\",\"latitude\":\"13.4964\",\"woe-label\":\"Ratchaburi, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[751,4634],[679,4636],[640,4621],[614,4587],[611,4549],[554,4533],[515,4538],[459,4526],[384,4559],[367,4518],[329,4500],[318,4522],[269,4547],[259,4613],[269,4633],[270,4705],[244,4819],[240,4923],[281,4928],[312,4953],[389,4944],[478,4976],[527,4949],[548,4970],[628,4996],[706,4991],[765,5086],[809,5072],[823,5012],[814,4940],[827,4920],[873,4935],[884,4903],[908,4895],[891,4840],[879,4763],[836,4754],[793,4767],[751,4634]]]}},{\"type\":\"Feature\",\"id\":\"TH.YS\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.30,\"hc-middle-y\":0.28,\"hc-key\":\"th-ys\",\"hc-a2\":\"YS\",\"labelrank\":\"7\",\"hasc\":\"TH.YS\",\"alt-name\":null,\"woe-id\":\"2347195\",\"subregion\":null,\"fips\":\"TH72\",\"postal-code\":\"YS\",\"name\":\"Yasothon\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"104.324\",\"woe-name\":\"Yasothon\",\"latitude\":\"16.0225\",\"woe-label\":\"Yasothon, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[4258,6789],[4255,6767],[4120,6734],[4083,6701],[4041,6610],[4017,6578],[3991,6436],[4005,6375],[4056,6336],[4043,6300],[3980,6294],[3966,6224],[3973,6197],[4008,6163],[3995,6115],[3975,6137],[3906,6155],[3876,6173],[3800,6269],[3784,6316],[3841,6348],[3808,6406],[3780,6417],[3781,6480],[3738,6522],[3739,6503],[3694,6486],[3698,6617],[3761,6623],[3759,6706],[3846,6761],[3883,6823],[3912,6831],[3931,6878],[3964,6895],[4031,6894],[4076,6870],[4096,6830],[4129,6804],[4155,6820],[4187,6804],[4258,6789]]]}},{\"type\":\"Feature\",\"id\":\"TH.MS\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.47,\"hc-middle-y\":0.49,\"hc-key\":\"th-ms\",\"hc-a2\":\"MS\",\"labelrank\":\"7\",\"hasc\":\"TH.MS\",\"alt-name\":null,\"woe-id\":\"2347149\",\"subregion\":null,\"fips\":\"TH24\",\"postal-code\":\"MS\",\"name\":\"Maha Sarakham\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"103.188\",\"woe-name\":\"Maha Sarakham\",\"latitude\":\"15.9151\",\"woe-label\":\"Maha Sarakham, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[3062,6240],[3041,6254],[3040,6290],[2961,6377],[2983,6417],[2938,6463],[2930,6518],[2907,6570],[2911,6606],[2876,6658],[2866,6821],[2897,6848],[2936,6922],[2924,6945],[2974,6960],[3030,6996],[3079,7093],[3104,7087],[3093,7060],[3102,7019],[3091,6988],[3107,6941],[3097,6895],[3122,6888],[3181,6917],[3231,6851],[3265,6830],[3292,6766],[3343,6780],[3309,6721],[3304,6683],[3326,6575],[3308,6526],[3289,6420],[3245,6411],[3219,6391],[3191,6334],[3213,6298],[3294,6265],[3278,6204],[3226,6184],[3145,6217],[3062,6240]]]}},{\"type\":\"Feature\",\"id\":\"TH.UN\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.53,\"hc-middle-y\":0.57,\"hc-key\":\"th-un\",\"hc-a2\":\"UN\",\"labelrank\":\"7\",\"hasc\":\"TH.UN\",\"alt-name\":null,\"woe-id\":\"2347200\",\"subregion\":null,\"fips\":\"TH76\",\"postal-code\":\"UN\",\"name\":\"Udon Thani\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.882\",\"woe-name\":\"Udon Thani\",\"latitude\":\"17.4511\",\"woe-label\":\"Udon Thani, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2280,8140],[2320,8119],[2347,8072],[2384,8090],[2444,8059],[2515,8001],[2529,7965],[2576,7900],[2623,7898],[2673,7854],[2675,7802],[2709,7787],[2763,7790],[2850,7884],[2840,7946],[2864,8001],[2909,7996],[2937,7957],[2984,8005],[3062,7945],[3098,7990],[3131,8003],[3170,7971],[3226,7996],[3205,7936],[3227,7909],[3228,7797],[3190,7786],[3149,7707],[3142,7676],[3158,7639],[3128,7588],[3145,7553],[3193,7542],[3235,7520],[3290,7520],[3347,7483],[3373,7480],[3417,7441],[3417,7395],[3369,7436],[3316,7393],[3318,7355],[3302,7330],[3299,7287],[3268,7233],[3242,7288],[3126,7329],[3059,7324],[3039,7290],[2929,7235],[2889,7259],[2842,7259],[2833,7322],[2808,7360],[2765,7382],[2741,7376],[2730,7307],[2644,7388],[2612,7444],[2622,7466],[2658,7481],[2668,7512],[2611,7496],[2584,7521],[2585,7572],[2554,7584],[2557,7629],[2522,7709],[2505,7801],[2485,7791],[2403,7812],[2375,7789],[2348,7792],[2330,7770],[2290,7847],[2269,7834],[2261,7879],[2278,7947],[2258,8061],[2280,8140]]]}},{\"type\":\"Feature\",\"id\":\"TH.NB\",\"properties\":{\"hc-group\":\"admin1\",\"hc-middle-x\":0.40,\"hc-middle-y\":0.39,\"hc-key\":\"th-nb\",\"hc-a2\":\"NB\",\"labelrank\":\"7\",\"hasc\":\"TH.NB\",\"alt-name\":\"Nong Bua Lamphu\",\"woe-id\":\"2347202\",\"subregion\":null,\"fips\":\"TH79\",\"postal-code\":\"NB\",\"name\":\"Nong Bua Lam Phu\",\"country\":\"Thailand\",\"type-en\":\"Province\",\"region\":\"Northeastern\",\"longitude\":\"102.311\",\"woe-name\":\"Nong Bua Lam Phu\",\"latitude\":\"17.2392\",\"woe-label\":\"Nong Bua Lam Phu, TH, Thailand\",\"type\":\"Changwat\"},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[2730,7307],[2687,7179],[2653,7172],[2623,7192],[2559,7190],[2492,7212],[2462,7254],[2427,7261],[2398,7239],[2303,7257],[2277,7301],[2355,7353],[2313,7418],[2235,7448],[2212,7485],[2236,7541],[2264,7574],[2263,7607],[2240,7637],[2242,7670],[2300,7673],[2345,7715],[2330,7770],[2348,7792],[2375,7789],[2403,7812],[2485,7791],[2505,7801],[2522,7709],[2557,7629],[2554,7584],[2585,7572],[2584,7521],[2611,7496],[2668,7512],[2658,7481],[2622,7466],[2612,7444],[2644,7388],[2730,7307]]]}}]}\r\nexport default mapDataThailand;\r\n","import { BehaviorSubject } from 'rxjs';\r\nimport { Route, withRouter, useHistory } from 'react-router-dom';\r\nimport { Redirect } from 'react-router-dom';\r\n//import config from 'config';\r\nimport { handleResponse } from '_helpers';\r\n\r\nconst currentUserSubject = new BehaviorSubject((localStorage.getItem('currentUser') != '[object Object]') ? JSON.parse(localStorage.getItem('currentUser')) : [{}]);\r\n\r\nexport const authenticationService = {\r\n login,\r\n logout,\r\n currentUser: currentUserSubject.asObservable(),\r\n get currentUserValue () { return currentUserSubject.value }\r\n};\r\n\r\nfunction login(email, password) {\r\n const requestOptions = {\r\n method: 'POST',\r\n headers: {\r\n 'Accept': 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: \"{\\\"email\\\":\\\"\" + email + \"\\\",\\\"password\\\":\\\"\" + password + \"\\\"}\"\r\n //body: JSON.stringify({ username, password })\r\n };\r\n /*https://localhost:5001*/\r\n return fetch('/api/v1/identity/login', requestOptions)\r\n .then(handleResponse)\r\n .then(user => {\r\n // store user details and jwt token in local storage to keep user logged in between page refreshes\r\n console.log(user);\r\n localStorage.setItem('currentUser', JSON.stringify(user));\r\n currentUserSubject.next(user);\r\n\r\n return user;\r\n });\r\n}\r\n\r\nfunction logout() {\r\n // remove user from local storage to log user out\r\n localStorage.removeItem('currentUser');\r\n currentUserSubject.next(null);\r\n /*\r\n const { from } = this.props.location.state || { from: { pathname: \"/login\" } };\r\n this.props.history.push(from);\r\n this.props.history.push('/login');\r\n */\r\n}\r\n","import { authenticationService } from '_services';\r\n\r\nexport function authHeader() {\r\n // return authorization header with jwt token\r\n const currentUser = authenticationService.currentUserValue;\r\n\r\n if (currentUser && currentUser.token) {\r\n\r\n return {\r\n 'Content-Type': 'application/json' ,\r\n 'Authorization': `Bearer ${currentUser.token}`\r\n };\r\n\r\n } else {\r\n return {};\r\n }\r\n}","import { authenticationService, logoff } from '_services';\r\n\r\nexport function handleResponse(response) {\r\n return response.text().then(text => {\r\n const data = text && JSON.parse(text);\r\n //console.log('response=');\r\n \r\n if (!response.ok) {\r\n if ([401, 403].indexOf(response.status) !== -1) {\r\n // auto logout if 401 Unauthorized or 403 Forbidden response returned from api\r\n //logoff();\r\n //const { from } = props.location.state || { from: { pathname: \"/auth/logout\" } };\r\n window.location.href='/auth/logout'\r\n //this.props.history.push('/login');\r\n //authenticationService.logout();\r\n //this.location.reload(true);\r\n }\r\n\r\n const error = (data && data.message) || response.statusText;\r\n return Promise.reject(error);\r\n }\r\n\r\n return data;\r\n });\r\n}","import { createBrowserHistory } from 'history';\r\n\r\nexport const history = createBrowserHistory();","import React, { useState, useEffect } from \"react\";\r\nimport Highcharts from \"highcharts\";\r\nimport HighchartsReact from \"highcharts-react-official\";\r\nimport mapDataThailand from \"./mapDataThailand\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\n\r\nrequire(\"highcharts/modules/exporting\")(Highcharts);\r\nrequire(\"highcharts/modules/map\")(Highcharts);\r\n\r\n// var data2 = [\r\n// [\"th-ct\", 0],\r\n// [\"th-4255\", 1],\r\n// [\"th-pg\", 2],\r\n// [\"th-st\", 3],\r\n// [\"th-kr\", 4],\r\n// [\"th-sa\", 5],\r\n// [\"th-tg\", 6],\r\n// [\"th-tt\", 7],\r\n// [\"th-pl\", 8],\r\n// [\"th-ps\", 9],\r\n// [\"th-kp\", 10],\r\n// [\"th-pc\", 11],\r\n// [\"th-sh\", 12],\r\n// [\"th-at\", 13],\r\n// [\"th-lb\", 14],\r\n// [\"th-pa\", 15],\r\n// [\"th-np\", 16],\r\n// [\"th-sb\", 17],\r\n// [\"th-cn\", 18],\r\n// [\"th-bm\", 19],\r\n// [\"th-pt\", 20],\r\n// [\"th-no\", 21],\r\n// [\"th-sp\", 22],\r\n// [\"th-ss\", 23],\r\n// [\"th-sm\", 24],\r\n// [\"th-pe\", 25],\r\n// [\"th-cc\", 26],\r\n// [\"th-nn\", 27],\r\n// [\"th-cb\", 28],\r\n// [\"th-br\", 29],\r\n// [\"th-kk\", 30],\r\n// [\"th-ph\", 31],\r\n// [\"th-kl\", 32],\r\n// [\"th-sr\", 33],\r\n// [\"th-nr\", 34],\r\n// [\"th-si\", 35],\r\n// [\"th-re\", 36],\r\n// [\"th-le\", 37],\r\n// [\"th-nk\", 38],\r\n// [\"th-ac\", 39],\r\n// [\"th-md\", 40],\r\n// [\"th-sn\", 41],\r\n// [\"th-nw\", 42],\r\n// [\"th-pi\", 43],\r\n// [\"th-rn\", 44],\r\n// [\"th-nt\", 45],\r\n// [\"th-sg\", 46],\r\n// [\"th-pr\", 47],\r\n// [\"th-py\", 48],\r\n// [\"th-so\", 49],\r\n// [\"th-ud\", 50],\r\n// [\"th-kn\", 51],\r\n// [\"th-tk\", 52],\r\n// [\"th-ut\", 53],\r\n// [\"th-ns\", 54],\r\n// [\"th-pk\", 55],\r\n// [\"th-ur\", 56],\r\n// [\"th-sk\", 57],\r\n// [\"th-ry\", 58],\r\n// [\"th-cy\", 59],\r\n// [\"th-su\", 60],\r\n// [\"th-nf\", 61],\r\n// [\"th-bk\", 62],\r\n// [\"th-mh\", 63],\r\n// [\"th-pu\", 64],\r\n// [\"th-cp\", 65],\r\n// [\"th-yl\", 66],\r\n// [\"th-cr\", 67],\r\n// [\"th-cm\", 68],\r\n// [\"th-ln\", 69],\r\n// [\"th-na\", 70],\r\n// [\"th-lg\", 71],\r\n// [\"th-pb\", 72],\r\n// [\"th-rt\", 73],\r\n// [\"th-ys\", 74],\r\n// [\"th-ms\", 75],\r\n// [\"th-un\", 76],\r\n// [\"th-nb\", 77]\r\n// ];\r\n\r\n// Render app with demo chart\r\nexport default function MapDataThailand() {\r\n const [data, setData] = useState();\r\n\r\n const mapOptions = {\r\n title: {\r\n text: \"\"\r\n },\r\n colorAxis: {\r\n min: 0\r\n //stops: [[0.4, \"#ffff00\"], [0.65, \"#bfff00\"], [1, \"\t#40ff00\"]]\r\n },\r\n\r\n series: [\r\n {\r\n mapData: mapDataThailand,\r\n name: \"Thailand\",\r\n data: data\r\n }\r\n ]\r\n };\r\n\r\n useEffect(() => {\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/data/topProvince\"\r\n })\r\n .then(\r\n result => {\r\n var res = result.data.data;\r\n setData(res);\r\n },\r\n error => {console.log(error);}\r\n ); \r\n\r\n\r\n // fetch(\"/api/v1/data/topProvince\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // if (result.data !== null) {\r\n // setData(result.data);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import {\r\n successColor,\r\n whiteColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst dashboardStyle = {\r\n successText: {\r\n color: successColor[0]\r\n },\r\n upArrowCardCategory: {\r\n width: \"16px\",\r\n height: \"16px\"\r\n },\r\n stats: {\r\n color: grayColor[0],\r\n display: \"inline-flex\",\r\n fontSize: \"12px\",\r\n lineHeight: \"22px\",\r\n \"& svg\": {\r\n top: \"4px\",\r\n width: \"16px\",\r\n height: \"16px\",\r\n position: \"relative\",\r\n marginRight: \"3px\",\r\n marginLeft: \"3px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n top: \"4px\",\r\n fontSize: \"16px\",\r\n position: \"relative\",\r\n marginRight: \"3px\",\r\n marginLeft: \"3px\"\r\n }\r\n },\r\n cardCategory: {\r\n color: grayColor[0],\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n paddingTop: \"10px\",\r\n marginBottom: \"0\"\r\n },\r\n cardCategoryWhite: {\r\n color: \"rgba(\" + hexToRgb(whiteColor) + \",.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitle: {\r\n color: grayColor[2],\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: grayColor[1],\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n hStyle: {\r\n fontSize: \"25px\",\r\n display: \"flex\",\r\n flex: \"1\",\r\n justifyContent: \"right\",\r\n alignItems: \"right\",\r\n width: \"25px\",\r\n height: \"25px\",\r\n transition: \"all 0.2s\",\r\n\r\n \"&:hover\": {\r\n background: \"#efefef\"\r\n },\r\n \"&:last-child\": {\r\n \r\n }\r\n },\r\n cardTitleWhite: {\r\n color: whiteColor,\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: grayColor[1],\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nexport default dashboardStyle;\r\n","/* eslint-disable react/jsx-key */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n//import { useHistory } from 'react-router-dom';\r\n//react plugin for creating charts\r\nimport ChartistGraph from \"react-chartist\";\r\n//@material-ui/core\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n//@material-ui/icons\r\nimport Store from \"@material-ui/icons/Store\";\r\nimport Warning from \"@material-ui/icons/Warning\";\r\nimport DateRange from \"@material-ui/icons/DateRange\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport LocalOffer from \"@material-ui/icons/LocalOffer\";\r\nimport Update from \"@material-ui/icons/Update\";\r\nimport ArrowUpward from \"@material-ui/icons/ArrowUpward\";\r\nimport AccessTime from \"@material-ui/icons/AccessTime\";\r\nimport MenuIcon from \"@material-ui/icons/Menu\";\r\nimport Accessibility from \"@material-ui/icons/Accessibility\";\r\n// import BugReport from \"@material-ui/icons/BugReport\";\r\n// import Code from \"@material-ui/icons/Code\";\r\n// import Cloud from \"@material-ui/icons/Cloud\";\r\n//core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\n// import Table from \"components/Table/Table.js\";\r\n// import Tasks from \"components/Tasks/Tasks.js\";\r\n// import CustomTabs from \"components/CustomTabs/CustomTabs.js\";\r\nimport Danger from \"components/Typography/Danger.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n// import { bugs, website, server } from \"variables/general.js\";\r\n// import Chart from \"components/Charts/Chart.js\";\r\nimport ChartRadar from \"components/Charts/ChartRadar.js\";\r\nimport ChartDoughnut from \"components/Charts/ChartDoughnut.js\";\r\nimport ChartPolar from \"components/Charts/ChartPolar.js\";\r\nimport Horizontal from \"components/Charts/Horizontal.js\";\r\nimport ChartLine from \"components/Charts/ChartLine.js\";\r\nimport ChartBar from \"components/Charts/ChartBar\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TabGroup from \"components/Tabs/TabGroup\";\r\nimport TabGroup2 from \"components/Tabs/TabGroup2\";\r\nimport GaugeChart from \"react-gauge-chart\";\r\nimport { Redirect } from \"react-router-dom\";\r\nimport MapThailand from \"components/Map/MapThailand\";\r\nimport Popup from \"reactjs-popup\";\r\nimport ReactFullScreenElement from \"react-fullscreen-element\";\r\nimport KeyboardEventHandler from \"react-keyboard-event-handler\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nimport {\r\n dailySalesChart,\r\n emailsSubscriptionChart,\r\n completedTasksChart,\r\n js,\r\n chartRadar,\r\n chartDoughnut,\r\n chartPolar,\r\n horizontal,\r\n chartLine\r\n} from \"variables/charts.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nexport default function Dashboard() {\r\n const classes = useStyles();\r\n const [year, setYear] = useState(\"\");\r\n const [month, setMonth] = useState(\"\");\r\n const [month2, setMonth2] = useState(\"\");\r\n const [tap, setTap] = useState(checkTap());\r\n const [oldTap, setOldTap] = useState(\"\");\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [l5Option, setL5Option] = useState([]);\r\n const [option2, setOption2] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [option5, setOption5] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption1, setOldOption1] = useState(\"1\");\r\n const [optionYear, setOptionYear] = useState([]);\r\n const [listReport, setListReport] = useState([]);\r\n const [listReportOther, setListReportOther] = useState([]);\r\n const [closeList, setCloseList] = useState(false);\r\n const [, forceUpdate] = useState();\r\n const [filter, setFilter] = useState(0);\r\n const [name, setName] = useState(\"\");\r\n const [days, setDays] = useState(\"\");\r\n const [days2, setDays2] = useState(\"\");\r\n const [objective, setObjective] = useState(\"\");\r\n const [dataSource, setDataSource] = useState(\"\");\r\n const [fullScreen, setFullScreen] = useState(false);\r\n const [fullScreenOther, setFullScreenOther] = useState(false);\r\n const [fullDataId, setFullDataId] = useState(0);\r\n const [fullDataId2, setFullDataId2] = useState(0);\r\n const [fullDataId3, setFullDataId3] = useState(0);\r\n const [fullIsCheck, setFullIsCheck] = useState(0);\r\n const [isHorizontal, setIsHorizontal] = useState(false);\r\n const [isFetch, setIsFetch] = useState(false);\r\n const [serviceUnit, setServiceUnit] = useState(161);\r\n const [serviceUnitName, setServiceUnitName] = useState(\r\n \"OR งานผู้ป่วยนอกศัลยกรรมและตรวจรักษาพิเศษ\"\r\n );\r\n const [exportClipboard, setExportClipboard] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n //const history = useHistory();\r\n\r\n // const _dataId = (props.location.state !== undefined && props.location.state !== null) ? props.location.state.dataId : null;\r\n // const _option1 = (props.location.state !== undefined && props.location.state !== null) ? props.location.state.option1 : null;\r\n // const _option2 = (props.location.state !== undefined && props.location.state !== null) ? props.location.state.option2 : null;\r\n // const _option3 = (props.location.state !== undefined && props.location.state !== null) ? props.location.state.option3 : null;\r\n // const _option4 = (props.location.state !== undefined && props.location.state !== null) ? props.location.state.option4 : null;\r\n\r\n const onExport = e => {\r\n if (e !== undefined) {\r\n setExportClipboard(e.dataId);\r\n }\r\n };\r\n\r\n const d = new Date();\r\n const monthNames = [\r\n \"มกราคม\",\r\n \"กุมภาพันธ์\",\r\n \"มีนาคม\",\r\n \"เมษายน\",\r\n \"พฤษภาคม\",\r\n \"มิถุนายน\",\r\n \"กรกฎาคม\",\r\n \"สิงหาคม\",\r\n \"กันยายน\",\r\n \"ตุลาคม\",\r\n \"พฤศจิกายน\",\r\n \"ธันวาคม\"\r\n ];\r\n\r\n const optionMonth = [\r\n { value: 0, label: \"ไม่ระบุ\" },\r\n { value: 1, label: \"ตุลาคม\" },\r\n { value: 2, label: \"พฤศจิกายน\" },\r\n { value: 3, label: \"ธันวาคม\" },\r\n { value: 4, label: \"มกราคม\" },\r\n { value: 5, label: \"กุมภาพันธ์\" },\r\n { value: 6, label: \"มีนาคม\" },\r\n { value: 7, label: \"เมษายน\" },\r\n { value: 8, label: \"พฤษภาคม\" },\r\n { value: 9, label: \"มิถุนายน\" },\r\n { value: 10, label: \"กรกฎาคม\" },\r\n { value: 11, label: \"สิงหาคม\" },\r\n { value: 12, label: \"กันยายน\" }\r\n ];\r\n\r\n const optionChart = [\r\n { value: 0, label: \"Full screen\" },\r\n { value: 1, label: \"Copy to clipboard\" },\r\n { value: 2, label: \"Copy link\" }\r\n ];\r\n\r\n const optionChartIsFetch = [\r\n { value: 0, label: \"Full screen\" },\r\n { value: 107, label: \"OPD\" },\r\n { value: 161, label: \"OR งานผู้ป่วยนอกศัลยกรรมและตรวจรักษาพิเศษ\" },\r\n { value: 173, label: \"Laser ศูนย์เลเซอร์\" },\r\n { value: 67, label: \"คลินิกพิเศษนอกเวลา (SMC)\" },\r\n { value: 167, label: \"Photobiology (รังสีชีววิทยา)\" },\r\n { value: 152, label: \"รับยาเดิม\" },\r\n { value: 9001130, label: \"Telemedicine\" }\r\n ];\r\n\r\n const optionFilter = [\r\n { value: 0, label: \"ไม่ระบุ\" },\r\n { value: 1, label: \"เดือนสะสม\" }\r\n ];\r\n\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n const dataId = params.get(\"dataId\");\r\n const urlTap = params.get(\"option1\");\r\n const urlOption2 = params.get(\"option2\");\r\n const urlOption3 = params.get(\"option3\");\r\n const urlOption4 = params.get(\"option4\");\r\n\r\n\r\n // const dataId = _dataId;\r\n // const urlTap = _option1 != null ? String(_option1) : null;\r\n // const urlOption2 = _option2\r\n // const urlOption3 = _option3\r\n // const urlOption4 = _option4\r\n\r\n function checkTap() {\r\n const a = window.location.search;\r\n const b = new URLSearchParams(a);\r\n if(urlTap === \"\" || b.size === 0){\r\n return '1'\r\n } else if (urlTap !== \"\"){\r\n return ''\r\n }\r\n }\r\n\r\n\r\n const onTap = e => {\r\n if (urlTap !== \"\") {\r\n var url = document.location.href;\r\n window.history.pushState({}, \"\", url.split(\"?\")[0]);\r\n }\r\n setOldTap(tap);\r\n setTap(e);\r\n };\r\n\r\n const onFetch = e => {\r\n setIsFetch(e);\r\n };\r\n\r\n function setMonthF(e) {\r\n setMonth2(e);\r\n }\r\n\r\n function setChartMenu(e, num) {\r\n if (\r\n e.dataId !== \"esc\" &&\r\n !fullScreen &&\r\n e.dataId !== 0 &&\r\n e.dataId !== undefined\r\n ) {\r\n if (num === 1) {\r\n setFullDataId(e.dataId);\r\n } else if (num === 2) {\r\n setFullDataId2(e.dataId);\r\n } else if (num === 3) {\r\n setFullDataId3(e.dataId);\r\n } else if (num === 4) {\r\n setFullIsCheck(true);\r\n setFullDataId(e.dataId);\r\n } else if (e === 1) {\r\n console.log(\"Test\");\r\n console.log(exportClipboard);\r\n }\r\n setFullScreen(true);\r\n setName(e.name);\r\n setDays(e.days);\r\n setObjective(e.objective);\r\n setDataSource(e.dataSource);\r\n } else if (fullScreen && e.dataId !== 0 && fullDataId !== 0) {\r\n setFullScreen(false);\r\n setName(\"\");\r\n setDays(\"\");\r\n setObjective(\"\");\r\n setDataSource(\"\");\r\n setFullDataId(0);\r\n setFullDataId2(0);\r\n setFullDataId3(0);\r\n setFullIsCheck(false);\r\n } else if (e === \"esc\") {\r\n setFullScreen(false);\r\n }\r\n }\r\n\r\n function setChartMenu2(e, name) {\r\n if (e === 0) {\r\n if (!fullScreen) {\r\n setFullScreen(true);\r\n } else {\r\n setFullScreen(false);\r\n }\r\n } else if (e === \"esc\") {\r\n setFullScreen(false);\r\n } else if (e === 1) {\r\n fetch(\r\n \"/api/v1/data/clipboard?data=\" +\r\n (name === undefined ? exportClipboard : name) +\r\n \"&year=\" +\r\n year +\r\n \"&filter=\" +\r\n filter\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n console.log(result);\r\n excelData(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n console.log(exportClipboard);\r\n } else if (e === 2) {\r\n var dataId = 0;\r\n if (tap == 2 || tap == 3) {\r\n dataId = option3;\r\n } else if (tap == 3) {\r\n dataId = option4;\r\n } else if (tap == 4) {\r\n dataId = option5;\r\n }\r\n var a =\r\n document.location.href +\r\n \"?dataId=\" +\r\n dataId +\r\n \"&option1=\" +\r\n tap +\r\n \"&option2=\" +\r\n option2 +\r\n \"&option3=\" +\r\n option3 +\r\n \"&option4=\" +\r\n (option4 != \"\" ? option4 : 0);\r\n\r\n try {\r\n navigator.clipboard.writeText(a);\r\n console.log(\"copy\");\r\n } catch (err) {\r\n console.log(\"fail copy\");\r\n }\r\n } else if ((e !== 0 && e !== 1) || e === 99) {\r\n setServiceUnit(name.value);\r\n setServiceUnitName(name.label);\r\n }\r\n }\r\n\r\n const excelData = array => {\r\n var csv = \"\",\r\n row,\r\n cell;\r\n for (row = 0; row < array.length; row++) {\r\n for (cell = 0; cell < array[row].length; cell++) {\r\n csv += (array[row][cell] + \"\").replace(/[\\n\\t]+/g, \" \");\r\n if (cell + 1 < array[row].length) csv += \"\\t\";\r\n }\r\n if (row + 1 < array.length) csv += \"\\n\";\r\n }\r\n\r\n try {\r\n navigator.clipboard.writeText(csv);\r\n console.log(\"copy\");\r\n } catch (err) {\r\n console.log(\"fail copy\");\r\n }\r\n };\r\n\r\n function setChartMenuOther(e) {\r\n if (e !== \"esc\") {\r\n setFullScreenOther(true);\r\n if (e.name !== undefined) {\r\n setName(e.name);\r\n }\r\n if (e.dataId !== undefined) {\r\n setFullDataId(e.dataId);\r\n }\r\n if (e.isHorizontal !== undefined) {\r\n setIsHorizontal(e.isHorizontal);\r\n }\r\n if (fullScreenOther && fullDataId !== 0) {\r\n setFullScreenOther(false);\r\n setFullDataId(0);\r\n if (e.isHorizontal !== undefined) {\r\n setIsHorizontal(false);\r\n }\r\n }\r\n if (fullScreenOther && e.dataId === undefined && fullDataId === 0) {\r\n setFullScreenOther(false);\r\n if (e.isHorizontal !== undefined) {\r\n setIsHorizontal(false);\r\n }\r\n }\r\n } else if (e === \"esc\") {\r\n setFullScreenOther(false);\r\n }\r\n }\r\n\r\n const isCheck = () => {\r\n if (tap !== oldOption1 && urlOption2 === null) {\r\n return [{ value: \"\", label: \"\" }];\r\n } else if ((tap !== oldOption1 || urlTap === \"1\") && urlOption2 !== null) {\r\n if (l2Option.length !== 0) {\r\n var value = l2Option.filter(p => p.value === Number(urlOption2));\r\n return [value[0]];\r\n }\r\n }\r\n };\r\n\r\n const isCheck2 = () => {\r\n if (option2 !== oldOption2 && urlOption3 === null) {\r\n return [{ value: \"\", label: \"\" }];\r\n } else if (option2 !== oldOption2 && urlOption3 !== null) {\r\n if (l3Option.length !== 0) {\r\n var a = 0;\r\n if (urlOption3 === \"0\") {\r\n a = dataId;\r\n } else {\r\n a = urlOption3;\r\n }\r\n var value = l3Option.filter(p => p.value === Number(a));\r\n return [value[0]];\r\n }\r\n }\r\n };\r\n\r\n const isCheck3 = () => {\r\n if (option2 !== oldOption2) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n\r\n if (option3 !== oldOption3 && urlOption4 === null) {\r\n return [{ value: \"\", label: \"\" }];\r\n } else if (option3 !== oldOption3 && urlOption4 !== null) {\r\n if (l4Option.length !== 0) {\r\n var b = 0;\r\n if (urlOption4 === \"0\") {\r\n b = dataId;\r\n } else {\r\n b = urlOption4;\r\n }\r\n var value2 = l4Option.filter(p => p.value === Number(b));\r\n return [value2[0]];\r\n }\r\n }\r\n };\r\n\r\n const isCheck4 = () => {\r\n if (option3 !== oldOption3) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n if (option4 !== oldOption4 && urlOption4 === null) {\r\n return [{ value: \"\", label: \"\" }];\r\n } else if (option4 !== oldOption4 && urlOption4 !== null) {\r\n if (l5Option.length !== 0) {\r\n var value2 = l5Option.filter(p => p.value === Number(dataId));\r\n return [value2[0]];\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n optionYear.push({ value: 0, label: \"ไม่ระบุ\" });\r\n result.forEach(e => {\r\n optionYear.push(e);\r\n });\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n var js = {\r\n UserName: currentUser.userName,\r\n }\r\n\r\n axios.post(\"/api/v1/data/datacenterLog\", js)\r\n .then (\r\n result => {\r\n \r\n },\r\n error => { console.log(error);}\r\n );\r\n \r\n }, []);\r\n\r\n useEffect(() => {\r\n if (urlTap !== null) {\r\n setTap(urlTap);\r\n }\r\n if (urlOption2 !== null) {\r\n setOption2(urlOption2);\r\n }\r\n if (urlOption3 !== null) {\r\n if (urlOption3 === \"0\") {\r\n // if(option3 === \"\" || option3 === null) {\r\n // setOption3(dataId);\r\n // }\r\n setOption3(dataId);\r\n setOption4(0);\r\n } else {\r\n setOption3(urlOption3);\r\n }\r\n }\r\n if (urlOption4 !== null) {\r\n if (urlOption4 === \"0\") {\r\n // if(option4 === \"\" || option4 === null) {\r\n // setOption4(dataId);\r\n // }\r\n setOption4(dataId);\r\n } else {\r\n setOption4(urlOption4);\r\n if (option5 === \"\" || option5 === null) {\r\n setOption5(dataId);\r\n }\r\n //setOption5(dataId);\r\n }\r\n }\r\n });\r\n\r\n useEffect(() => {\r\n if (urlTap !== \"1\" && urlTap !== \"4\" && urlTap !== null) {\r\n fetch(\"/api/v1/group3/\" + urlOption2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setOldOption2(urlOption2);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (urlOption2 !== null) {\r\n fetch(\"/api/v1/subGroup3/\" + urlOption2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setOldOption2(urlOption2);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n\r\n // if (urlTap === \"1\") {\r\n // fetch(\"/api/v1/group4/\" + urlOption3)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL4Option(result.data);\r\n // setOldOption3(urlOption3);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n // } else {\r\n // fetch(\"/api/v1/subGroup4/\" + urlOption3)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL4Option(result.data);\r\n // setOldOption3(urlOption3);\r\n // setCloseList(true);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n // }\r\n\r\n // if (urlTap === \"4\") {\r\n // fetch(\"/api/v1/Group5/\" + urlOption4)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL5Option(result.data);\r\n // setOldOption4(urlOption4);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n // }\r\n\r\n if (urlTap !== null) {\r\n // fetch(\"/api/v1/group2/\" + urlTap)\r\n // .then(response => response.json())\r\n // .then(\r\n // result2 => {\r\n // setL2Option(result2.data);\r\n // setOldOption1(urlTap);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n \r\n axios(\"/api/v1/group2/\" + urlTap)\r\n .then(\r\n result2 => {\r\n var res = result2.data;\r\n setL2Option(res.data);\r\n setOldOption1(urlTap);\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (tap !== \"\" && urlTap === null) {\r\n // fetch(\"/api/v1/group2/\" + tap)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setOldOption1(tap);\r\n // setL2Option(result.data);\r\n // if (tap !== oldOption1) {\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setOption4(\"\");\r\n // setOption5(\"\");\r\n // setL3Option([]);\r\n // setL4Option([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n var urlTapTemp;\r\n if(urlTap === null){\r\n urlTapTemp = tap;\r\n } else {\r\n urlTapTemp = urlTap;\r\n }\r\n axios(\"/api/v1/group2/\" + urlTapTemp)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setOldOption1(tap);\r\n setL2Option(res.data);\r\n if (tap !== oldOption1) {\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setOption4(\"\");\r\n setOption5(\"\");\r\n setL3Option([]);\r\n setL4Option([]);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n \"\" +\r\n \"&group3=\" +\r\n \"\" +\r\n \"&group4=\" +\r\n \"\" +\r\n \"&isOther=\" +\r\n true,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReportOther(result.data.reportSub);\r\n } else {\r\n setListReportOther([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n \"\" +\r\n \"&group3=\" +\r\n \"\" +\r\n \"&group4=\" +\r\n \"\",\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n !result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReport(result.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [tap]);\r\n\r\n useEffect(() => {\r\n if (tap !== \"1\" && tap !== \"4\") {\r\n if (option2 !== \"\") {\r\n setIsLoading(true);\r\n // fetch(\"/api/v1/group3/\" + option2)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL3Option(result.data);\r\n // setOldOption2(option2);\r\n // setOldTap(\"\");\r\n // if (option2 !== oldOption2) {\r\n // setOption3(\"\");\r\n // setOption4(\"\");\r\n // setOption5(\"\");\r\n // setL4Option([]);\r\n // }\r\n\r\n // fetch(\r\n // \"/api/v1/checkReport?group1=\" +\r\n // tap +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // option3 +\r\n // \"&group4=\" +\r\n // option4,\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // var list = [];\r\n // if (\r\n // result.data.reportSub !== null &&\r\n // result.data.reportSub.length > 0\r\n // ) {\r\n // result.data.reportSub.forEach(e => {\r\n // list = list.concat(e.dataId);\r\n // });\r\n // setListReport(result.data.reportSub);\r\n // setCloseList(false);\r\n // } else {\r\n // setListReport([]);\r\n // setCloseList(true);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios.get(\"/api/v1/group3/\"+ option2)\r\n .then (\r\n result => {\r\n var res = result.data;\r\n // setL3Option(res.data);\r\n var res2 = res.data.filter(x => x.isEnabled === true);\r\n setL3Option(res2);\r\n setOldOption2(option2);\r\n setOldTap(\"\");\r\n if (option2 !== oldOption2) {\r\n setOption3(\"\");\r\n setOption4(\"\");\r\n setOption5(\"\");\r\n setL4Option([]);\r\n\r\n var params = new URLSearchParams();\r\n params.append(\"group1\", tap);\r\n params.append(\"group2\", option2);\r\n params.append(\"group3\", option3);\r\n params.append(\"group4\", option4);\r\n var request = {\r\n params: params\r\n };\r\n axios.get(\"/api/v1/checkReport\"+ request)\r\n .then (\r\n result => {\r\n var res = result.data;\r\n var list = [];\r\n if (\r\n res.data.reportSub !== null &&\r\n res.data.reportSub.length > 0\r\n ) {\r\n res.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReport(res.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => { console.log(error);}\r\n );\r\n }\r\n setIsLoading(false);\r\n // history.replace({ state: null });\r\n },\r\n error => { console.log(error);}\r\n );\r\n\r\n var intervalID = window.setInterval(function() {\r\n var url = document.location.href;\r\n window.history.pushState({}, \"\", url.split(\"?\")[0]);\r\n window.clearInterval(intervalID);\r\n }, 2000);\r\n\r\n }\r\n } else {\r\n if (option2 !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setOldOption2(option2);\r\n setOldTap(\"\");\r\n if (option2 !== oldOption2) {\r\n setOption3(\"\");\r\n setOption4(\"\");\r\n setOption5(\"\");\r\n setL4Option([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n\r\n // const fetchData = async () => {\r\n // const response = await fetch(\r\n // \"/api/v1/checkReport?group1=\" +\r\n // tap +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // '' +\r\n // \"&group4=\" +\r\n // '' +\r\n // \"&isOther=\" + true,\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // );\r\n // const data = await response.json();\r\n // var list = [];\r\n // if (\r\n // data.data.reportSub !== null &&\r\n // data.data.reportSub.length > 0 &&\r\n // data.data.isOther\r\n // ) {\r\n // data.data.reportSub.forEach(e => {\r\n // list = list.concat(e.dataId);\r\n // });\r\n // setListReportOther(data.data.reportSub);\r\n // } else {\r\n // setListReportOther([]);\r\n // }\r\n // }\r\n\r\n // fetch(\r\n // \"/api/v1/checkReport?group1=\" +\r\n // tap +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // '' +\r\n // \"&group4=\" +\r\n // '' +\r\n // \"&isOther=\" + true,\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // var list = [];\r\n // if (\r\n // result.data.reportSub !== null &&\r\n // result.data.reportSub.length > 0 &&\r\n // result.data.isOther\r\n // ) {\r\n // result.data.reportSub.forEach(e => {\r\n // list = list.concat(e.dataId);\r\n // });\r\n // setListReportOther(result.data.reportSub);\r\n // } else {\r\n // setListReportOther([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n // fetchData();\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n setListReportOther([]);\r\n const fetchData = async () => {\r\n const response = await fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n \"\" +\r\n \"&group4=\" +\r\n \"\" +\r\n \"&isOther=\" +\r\n true,\r\n {\r\n method: \"GET\"\r\n }\r\n );\r\n const data = await response.json();\r\n var list = [];\r\n if (\r\n data.data.reportSub !== null &&\r\n data.data.reportSub.length > 0 &&\r\n data.data.isOther\r\n ) {\r\n data.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReportOther(data.data.reportSub);\r\n } else {\r\n setListReportOther([]);\r\n }\r\n };\r\n fetchData();\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n (urlOption4 !== null ? option4 : \"\"),\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setListReport(result.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n if (tap === \"1\") {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/group4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setOldOption3(option3);\r\n setOldTap(\"\");\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n setOption5(\"\");\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n (urlOption4 !== null ? option4 : \"\"),\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setListReport(result.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n var intervalID = window.setInterval(function() {\r\n var url = document.location.href;\r\n window.history.pushState({}, \"\", url.split(\"?\")[0]);\r\n window.clearInterval(intervalID);\r\n }, 2000);\r\n }\r\n } else {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setOldOption3(option3);\r\n setCloseList(true);\r\n setOldTap(\"\");\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n setOption5(\"\");\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n\r\n // fetch(\r\n // \"/api/v1/checkReport?group1=\" +\r\n // tap +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // option3 +\r\n // \"&group4=\" +\r\n // '' +\r\n // \"&isOther=\" + true,\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // var list = [];\r\n // if (\r\n // result.data.reportSub !== null &&\r\n // result.data.reportSub.length > 0 &&\r\n // result.data.isOther\r\n // ) {\r\n // result.data.reportSub.forEach(e => {\r\n // list = list.concat(e.dataId);\r\n // });\r\n // setListReportOther(result.data.reportSub);\r\n // } else {\r\n // setListReportOther([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n setListReportOther([]);\r\n const fetchData = async () => {\r\n const response = await fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n \"\" +\r\n \"&isOther=\" +\r\n true,\r\n {\r\n method: \"GET\"\r\n }\r\n );\r\n const data = await response.json();\r\n var list = [];\r\n if (\r\n data.data.reportSub !== null &&\r\n data.data.reportSub.length > 0 &&\r\n data.data.isOther\r\n ) {\r\n data.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReportOther(data.data.reportSub);\r\n } else {\r\n setListReportOther([]);\r\n }\r\n };\r\n\r\n fetchData();\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n (urlOption4 !== null ? option4 : \"\"),\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setListReport(result.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n if (tap === \"4\") {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/Group5/\" + option4)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL5Option(result.data);\r\n setOldOption4(option4);\r\n setOldTap(\"\");\r\n if (option4 !== oldOption4) {\r\n setOption5(\"\");\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n urlTap === null\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setListReport(result.data.reportSub);\r\n setCloseList(false);\r\n } else {\r\n setListReport([]);\r\n setCloseList(true);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n var intervalID = window.setInterval(function() {\r\n var url = document.location.href;\r\n window.history.pushState({}, \"\", url.split(\"?\")[0]);\r\n window.clearInterval(intervalID);\r\n }, 3000);\r\n }\r\n } else {\r\n setCloseList(true);\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n tap +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4 +\r\n \"&isOther=\" +\r\n true,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list = list.concat(e.dataId);\r\n });\r\n setListReportOther(result.data.reportSub);\r\n } else {\r\n setListReportOther([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, [option4]);\r\n\r\n useEffect(() => {\r\n setCloseList(true);\r\n }, [option5]);\r\n\r\n const getInfo = e => {\r\n if (e !== -1 && e !== -2) {\r\n fetch(\"/api/v1/data/info/\" + e)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setName(result.name);\r\n setDays(result.days);\r\n setObjective(result.objective);\r\n setDataSource(result.dataSource);\r\n if (isFetch) {\r\n fetch(\"/api/v1/data/infoDaily\")\r\n .then(response => response.text())\r\n .then(\r\n result => {\r\n setDays2(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else {\r\n if (days2 === \"\") {\r\n fetch(\"/api/v1/data/infoDaily\")\r\n .then(response => response.text())\r\n .then(\r\n result => {\r\n setDays2(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n defaulfAdd={isCheck()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption3(e)}\r\n defaulfAdd={isCheck2()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n \r\n {(tap === \"1\" || tap === \"4\") && (\r\n \r\n \r\n setOption4(e)}\r\n defaulfAdd={isCheck3()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n )}\r\n \r\n {tap === \"4\" && (\r\n \r\n \r\n setOption5(e)}\r\n defaulfAdd2={isCheck4()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setYear(e)}\r\n default={optionYear[0]}\r\n />\r\n \r\n \r\n \r\n {year !== 0 && year !== \"\" && (\r\n \r\n \r\n setFilter(e)}\r\n default={optionFilter[0]}\r\n />\r\n \r\n \r\n )}\r\n \r\n {/* \r\n \r\n setMonth(e)}\r\n default={optionMonth[0]}\r\n />\r\n \r\n */}\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n {listReport.map((prop, key) => {\r\n if (\r\n tap !== null &&\r\n option2 === \"\" &&\r\n option3 === \"\" &&\r\n option4 === \"\" &&\r\n option5 === \"\"\r\n ) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } else if (\r\n option2 !== \"\" &&\r\n tap !== \"1\" &&\r\n tap !== \"4\" &&\r\n !closeList\r\n ) {\r\n return (\r\n \r\n \r\n setChartMenu(key)}\r\n />\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n }\r\n position=\"bottom\"\r\n on=\"hover\"\r\n closeOnDocumentClick\r\n mouseLeaveDelay={300}\r\n mouseEnterDelay={0}\r\n contentStyle={{ padding: \"0px\", border: \"none\" }}\r\n arrow={false}\r\n >\r\n {/* style={{backgroundColor: \"#efefef\"}} */}\r\n กรุณาเลือก
\r\n\r\n ตัวชี้วัด \r\n
\r\n\r\n
*/}\r\n กรุณาเลือก
\r\n\r\n ปีงบประมาณ \r\n
\r\n\r\n
*/}\r\n {prop.objective}
\r\n\r\n \r\n {prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : key === 0\r\n ? setChartMenu(prop, 1)\r\n : // : setChartMenu(prop, key)\r\n setChartMenu2(key, prop.dataId)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : setChartMenu(prop, 1)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : setChartMenu(prop, 1)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(prop, 3)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(prop, 4)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {dataSource + \"\"}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {dataSource + \"\"}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu2(key)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {\" \" + dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChartIsFetch\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n setChartMenu2(\r\n optionChartIsFetch.length < 5\r\n ? key\r\n : 99,\r\n name\r\n )\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {\" \" + dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n Completed Tasks
\r\nLast Campaign Performance
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในแต่ละวัน\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในใช้บริการในแต่ละวันแบ่งตามเพศ\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในวันนี้แบ่งตามหน่วยบริการ\r\n
\r\n\r\n
\r\n \r\n ช่วงอายุของผู้ใช้บริการในวันนี้\r\n
\r\n\r\n
\r\n \r\n โรค Top 10 ประจำเดือน {monthNames[d.getMonth()]}\r\n
\r\n\r\n
\r\n \r\n โรค Top 10 ประจำเดือน {monthNames[d.getMonth()]}\r\n
\r\n\r\n
\r\n \r\n รายงาน\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการประจำเดือน{monthNames[d.getMonth()]} แบ่งตามจังหวัด\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการประจำเดือน{monthNames[d.getMonth()]} แบ่งตามจังหวัด\r\n
\r\n \r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในแต่ละวัน\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n จำนวนครั้งในการใช้บริการในแต่ละวันแบ่งตามเพศ\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในวันนี้แบ่งตามหน่วยบริการ\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n ช่วงอายุของผู้ใช้บริการในวันนี้\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop, 1)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.name}
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop, 1)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.name}
\r\n\r\n
\r\n \r\n {optionMonth\r\n .slice(0, 13)\r\n .map((monthName, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setMonthF(key)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {monthName.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n โรค Top 10 ประจำเดือน {monthNames[d.getMonth()]}\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการประจำเดือน\r\n {monthNames[d.getMonth()]} แบ่งตามจังหวัด\r\n
\r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {name}
\r\n\r\n
\r\n Used Space
\r\n\r\n 49/50 GB\r\n
\r\n\r\n \r\n \r\n e.preventDefault()}>\r\n Get more space\r\n \r\n
\r\n Revenue
\r\n$34,245
\r\n\r\n
\r\n Fixed Issues
\r\n75
\r\n\r\n
\r\n Followers
\r\n+245
\r\n\r\n
\r\n Daily Sales
\r\n\r\n \r\n
\r\n
\r\n Email Subscriptions
\r\nLast Campaign Performance
\r\n\r\n
\r\n Completed Tasks
\r\nLast Campaign Performance
\r\n\r\n
\r\n Employees Stats
\r\n\r\n New employees on 15th September, 2016\r\n
\r\nCompleted Tasks
\r\nLast Campaign Performance
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n defaulfAdd={isCheck()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption3(e)}\r\n defaulfAdd={isCheck2()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n \r\n {(tap === \"1\" || tap === \"4\") && (\r\n \r\n \r\n setOption4(e)}\r\n defaulfAdd={isCheck3()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n )}\r\n \r\n {tap === \"4\" && (\r\n \r\n \r\n setOption5(e)}\r\n defaulfAdd2={isCheck4()}\r\n disabled={isLoading}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setYear(e)}\r\n default={optionYear[0]}\r\n />\r\n \r\n \r\n \r\n {year !== 0 && year !== \"\" && (\r\n \r\n \r\n setFilter(e)}\r\n default={optionFilter[0]}\r\n />\r\n \r\n \r\n )}\r\n \r\n {/* \r\n \r\n setMonth(e)}\r\n default={optionMonth[0]}\r\n />\r\n \r\n */}\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n {listReport.map((prop, key) => {\r\n if (\r\n tap !== null &&\r\n option2 === \"\" &&\r\n option3 === \"\" &&\r\n option4 === \"\" &&\r\n option5 === \"\"\r\n ) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n } else if (\r\n option2 !== \"\" &&\r\n tap !== \"1\" &&\r\n tap !== \"4\" &&\r\n !closeList\r\n ) {\r\n return (\r\n \r\n \r\n setChartMenu(key)}\r\n />\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n
\r\n }\r\n position=\"bottom\"\r\n on=\"hover\"\r\n closeOnDocumentClick\r\n mouseLeaveDelay={300}\r\n mouseEnterDelay={0}\r\n contentStyle={{ padding: \"0px\", border: \"none\" }}\r\n arrow={false}\r\n >\r\n {/* style={{backgroundColor: \"#efefef\"}} */}\r\n กรุณาเลือก
\r\n\r\n ตัวชี้วัด \r\n
\r\n\r\n
*/}\r\n กรุณาเลือก
\r\n\r\n ปีงบประมาณ \r\n
\r\n\r\n
*/}\r\n {prop.objective}
\r\n\r\n \r\n {prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : key === 0\r\n ? setChartMenu(prop, 1)\r\n : // : setChartMenu(prop, key)\r\n setChartMenu2(key, prop.dataId)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : setChartMenu(prop, 1)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {(prop.isFetch ? optionChartIsFetch : optionChart)\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n prop.isFetch\r\n ? setChartMenu2(key, name)\r\n : setChartMenu(prop, 1)\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(prop, 3)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(prop, 4)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.objective}
\r\n\r\n \r\n {\" \" + prop.dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {dataSource + \"\"}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {dataSource + \"\"}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenu2(key)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {\" \" + dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {optionChartIsFetch\r\n .slice(0, 10)\r\n .map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() =>\r\n setChartMenu2(\r\n optionChartIsFetch.length < 5\r\n ? key\r\n : 99,\r\n name\r\n )\r\n }\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {objective}
\r\n\r\n \r\n {\" \" + dataSource}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในแต่ละวัน\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n จำนวนครั้งในการใช้บริการในแต่ละวันแบ่งตามเพศ\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการในวันนี้แบ่งตามหน่วยบริการ\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n ช่วงอายุของผู้ใช้บริการในวันนี้\r\n
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop, 1)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.name}
\r\n\r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(prop, 1)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {prop.name}
\r\n\r\n
\r\n \r\n {optionMonth\r\n .slice(0, 13)\r\n .map((monthName, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor =\r\n \"#ffffff\")\r\n }\r\n onClick={() => setMonthF(key)}\r\n style={{\r\n width: \"150px\",\r\n textAlign: \"center\"\r\n }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {monthName.label}\r\n
\r\n \r\n ))}\r\n \r\n \r\n โรค Top 10 ประจำเดือน {monthNames[d.getMonth()]}\r\n
\r\n\r\n
\r\n \r\n จำนวนครั้งในการใช้บริการประจำเดือน\r\n {monthNames[d.getMonth()]} แบ่งตามจังหวัด\r\n
\r\n \r\n
\r\n \r\n {optionChart.slice(0, 3).map((name, key) => (\r\n \r\n (e.target.style.backgroundColor =\r\n \"rgb(31, 76, 166)\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.backgroundColor = \"#ffffff\")\r\n }\r\n onClick={() => setChartMenuOther(fullDataId)}\r\n style={{ width: \"150px\", textAlign: \"center\" }}\r\n >\r\n \r\n (e.target.style.color = \"#ffffff\")\r\n }\r\n onMouseLeave={e =>\r\n (e.target.style.color = \"black\")\r\n }\r\n >\r\n {name.label}\r\n
\r\n \r\n ))}\r\n \r\n {name}
\r\n\r\n
\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardAvatar.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n className: PropTypes.string,\r\n profile: PropTypes.bool,\r\n plain: PropTypes.bool\r\n};\r\n","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport {\r\n Input,\r\n Label,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from \"reactstrap\";\r\n\r\nconst TSText = props => {\r\n const [value, setValue] = useState(props.value !== null ? props.value : \"\");\r\n const [label, setLabel] = useState(props.label !== null ? props.label : \"\");\r\n const [name, setName] = useState(props.name !== null ? props.name : \"\");\r\n const [type, setType] = useState(props.type !== null ? props.type : \"text\");\r\n const [placeholder, setPlaceholder] = useState(\r\n props.placeholder !== null ? props.placeholder : \"\"\r\n );\r\n const [icon, setIcon] = useState(props.icon !== null ? props.icon : \"\");\r\n const [isRequire, setIsRequire] = useState(props.isRequire);\r\n const [maxLength, setMaxLength] = useState(\r\n props.maxLength !== \"undefined\" ? props.maxLength : null\r\n );\r\n const [disabled, setDisabled] = useState(props.disabled !== null ? props.value : false);\r\n\r\n useEffect(() => {\r\n\r\n setValue(props.value !== null ? props.value : '')\r\n setDisabled(props.disabled !== null ? props.disabled : false)\r\n\r\n }, [props]);\r\n\r\n function handleChange(e) {\r\n if (props.onChange) {\r\n \r\n\r\n if(props.type == 'tel')\r\n {\r\n const re = /^[0-9\\b]+$/;\r\n if (e.target.value === '' || re.test(e.target.value)) {\r\n props.onChange(e);\r\n setValue(e.target.value);\r\n }\r\n }\r\n else\r\n {\r\n props.onChange(e);\r\n setValue(e.target.value);\r\n }\r\n \r\n\r\n \r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n this.setFocus(true)}\r\n //onBlur={() => this.setFocus(false)}\r\n value={value}\r\n disabled = {disabled}\r\n onChange={handleChange}\r\n //invalid={this.state.invalid}\r\n /> \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TSText;\r\n","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport {\r\n Input,\r\n Label,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nconst TSSelect2 = props => {\r\n const [value, setValue] = useState((props.value != null) ? props.value : '');\r\n const [label, setLabel] = useState((props.label != null) ? props.label : '');\r\n const [type, setType] = useState((props.type != null) ? props.type : 'select');\r\n const [placeholder, setPlaceholder] = useState((props.placeholder != null) ? props.placeholder : '');\r\n const [icon, setIcon] = useState('');\r\n\r\n const [options, setOptions] = useState((props.options !== \"undefined\") ? props.options : []);\r\n const [styles, setStyles] = useState((props.styles !== \"undefined\") ? props.styles : null);\r\n const [isRequire, setIsRequire] = useState(props.isRequire);\r\n const [isDisabled, setIsDisabled] = useState(props.isDisabled);\r\n const [isClearable, setIsClearable] = useState(props.isClearable);\r\n const [zIndex, setzIndex] = useState((props.zIndex != null) ? props.zIndex : 'null');\r\n const [fontSize, setFontSize] = useState((props.fontSize != null) ? props.fontSize : '1.2em');\r\n const [defaultValue, setDefaultValue] = useState({ label: null, value: null });\r\n\r\n useEffect(() => {\r\n\r\n if (props.options != null) {\r\n const val = props.options.find(e => e.value == props.value)\r\n\r\n if (val !== undefined)\r\n setDefaultValue(val);\r\n else\r\n setDefaultValue({ label: null, value: null })\r\n }\r\n\r\n }, [props.value, props.options]);\r\n\r\n function handleChange(e) {\r\n var val = (e != null ) ? e.value : null;\r\n if (props.onChange) {\r\n props.onChange(e);\r\n setValue(val);\r\n }\r\n }\r\n\r\n const customStyles = {\r\n container: (base) => ({ ...base, zIndex: zIndex }),\r\n control: (base) => ({ ...base, /*padding: '12px 5px',*/ marginBottom: '10px', border: (false? \"red solid 1px\" : \"\") }),\r\n menu: (base) => ({ ...base,zIndex: 2, textAlign: 'left', fontSize: fontSize }),\r\n singleValue: (base) => ({ ...base, fontSize: fontSize }),\r\n}\r\n return (\r\n \r\n \r\n {(label != \"\") ? :<>}\r\n
\r\n );\r\n};\r\n\r\nexport default TSSelect2;\r\n","import React, { useState } from \"react\";\r\n// @material-ui/core components\r\nimport { withStyles } from '@material-ui/core/styles';\r\nimport FormGroup from '@material-ui/core/FormGroup';\r\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\r\nimport Switch from '@material-ui/core/Switch';\r\n\r\n\r\nconst TSCheckBox = withStyles((theme) => ({\r\n root: {\r\n width: 42,\r\n height: 26,\r\n padding: 0,\r\n margin: theme.spacing(1),\r\n },\r\n switchBase: {\r\n padding: 1,\r\n '&$checked': {\r\n transform: 'translateX(16px)',\r\n color: theme.palette.common.white,\r\n '& + $track': {\r\n backgroundColor: '#52d869',\r\n opacity: 1,\r\n border: 'none',\r\n },\r\n },\r\n '&$focusVisible $thumb': {\r\n color: '#52d869',\r\n border: '6px solid #fff',\r\n },\r\n },\r\n thumb: {\r\n width: 24,\r\n height: 24,\r\n },\r\n track: {\r\n borderRadius: 26 / 2,\r\n border: `1px solid ${theme.palette.grey[400]}`,\r\n backgroundColor: theme.palette.grey[50],\r\n opacity: 1,\r\n transition: theme.transitions.create(['background-color', 'border']),\r\n },\r\n checked: {},\r\n focusVisible: {},\r\n}))(({ classes, ...props }) => {\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setTitleName(e.target.value)} />\r\n \r\n setFirstName(e.target.value)} />\r\n \r\n setLastName(e.target.value)} />\r\n \r\n setNickName(e.target.value)} />\r\n \r\n setCid(e.target.value)} />\r\n \r\n setGenderKey(e.value) } />\r\n \r\n \r\n \r\n {year + 543}; }}\r\n //isValidDate={isDateValid}\r\n //renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"BirthDT\", placeholder: \"วันเดือนปีเกิด\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => setBirthDT(e.format('YYYY-MM-DD'))} \r\n />\r\n\r\n \r\n \r\n setIsShowBirthdate(!IsShowBirthdate) } /> {(IsShowBirthdate)? แสดงวันเกิด :ไม่แสดงวันเกิด }\r\n \r\n\r\n setMobilePhone(e.target.value)} />\r\n \r\n setEmail(e.target.value)} />\r\n \r\n setGmail(e.target.value)} />\r\n \r\n \r\n setTypeGovKey(e.value) } />\r\n \r\n setPositionName(e.target.value)} />\r\n \r\n\r\n setPhoto(e.target.value)} />\r\n \r\n\r\n setLineNotify(e.target.value)} />\r\n \r\n\r\n setLineToken(e.target.value)} />\r\n \r\n\r\n setIsActive(!IsActive) } />{(IsActive)? เปิดการใช้งานอยู่ :ปิดการใช้งานไปแล้ว }\r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการเชื่อมโยง Line\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n setModalClear(false)} isOpen={modalClear}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันลบ Line Notify\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n refresh()} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\n\r\n// @material-ui/core components\r\nimport PropTypes from 'prop-types';\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\n\r\nimport Card from \"@material-ui/core/Card\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Hidden from '@material-ui/core/Hidden';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport ButtonBase from '@material-ui/core/ButtonBase';\r\n\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport DeleteIcon from '@material-ui/icons/Delete';\r\nimport LabelMui from '@material-ui/icons/Label';\r\nimport SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';\r\nimport InfoIcon from '@material-ui/icons/Info';\r\nimport ForumIcon from '@material-ui/icons/Forum';\r\nimport LocalOfferIcon from '@material-ui/icons/LocalOffer';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport ChevronRightIcon from '@material-ui/icons/ChevronRight';\r\n\r\n\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport TSText from \"components/Forms/TSText\";\r\n\r\nimport ImageList from '@material-ui/core/ImageList';\r\nimport ImageListItem from '@material-ui/core/ImageListItem';\r\nimport ImageListItemBar from '@material-ui/core/ImageListItemBar';\r\nimport ListSubheader from '@material-ui/core/ListSubheader';\r\nimport IconButton from '@material-ui/core/IconButton';\r\n\r\n\r\nimport {\r\n Input,\r\n Label,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from \"reactstrap\";\r\n\r\nimport axios from \"axios\";\r\n\r\nconst useTreeItemStyles = makeStyles((theme) => ({\r\n root: {\r\n color: theme.palette.text.secondary,\r\n '&:hover > $content': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n '&:focus > $content, &$selected > $content': {\r\n backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,\r\n color: 'var(--tree-view-color)',\r\n },\r\n '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n content: {\r\n color: theme.palette.text.secondary,\r\n borderTopRightRadius: theme.spacing(2),\r\n borderBottomRightRadius: theme.spacing(2),\r\n paddingRight: theme.spacing(1),\r\n fontWeight: theme.typography.fontWeightMedium,\r\n '$expanded > &': {\r\n fontWeight: theme.typography.fontWeightRegular,\r\n },\r\n },\r\n group: {\r\n marginLeft: 0,\r\n '& $content': {\r\n paddingLeft: theme.spacing(2),\r\n },\r\n },\r\n expanded: {},\r\n selected: {},\r\n label: {\r\n fontWeight: 'inherit',\r\n color: 'inherit',\r\n },\r\n labelRoot: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(0.5, 0),\r\n },\r\n labelIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n labelText: {\r\n fontWeight: 'inherit',\r\n flexGrow: 1,\r\n },\r\n}));\r\n\r\n\r\nfunction StyledTreeItem(props) {\r\n const classes = useTreeItemStyles();\r\n const { labelText, labelIcon: LabelIcon, labelInfo, color, bgColor, nodeType, nodeVal, onTreeClick, ...other } = props;\r\n \r\n\r\n return (\r\n \r\n \r\n {FirstName} {LastName}
\r\n{PositionName}
\r\n\r\n {params.get(\"code\")}\r\n
\r\n\r\n \r\n
\r\nEdit Profile
\r\nComplete your profile
\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setAddress(e.target.value) }\r\n >\r\n
\r\n \r\n บันทึก
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setModal(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n setModalClear(false)}\r\n >\r\n
\r\n ใช่
\r\n \r\n\r\nไม่ใช่
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n refresh()}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n
\r\n \r\n เจ้าหน้าที่ที่เลือก
\r\nค้นหาเจ้าหน้าที่จากชื่อ {Keyword}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n {!showAdd && (\r\n \r\n \r\n \r\n \r\n setOption1(e)}\r\n clear={checkDefault()}\r\n defaulfAdd={isCheck8()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n clear={checkDefault()}\r\n disabled={disable1}\r\n defaulfAdd={isCheck()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption3(e)}\r\n clear={checkDefault()}\r\n disabled={\r\n disable2 || (showAdd && (option1 !== 1 && option1 !== 4))\r\n }\r\n defaulfAdd={isCheck2()}\r\n defaulfAdd2={isCheck3()}\r\n />\r\n \r\n \r\n \r\n \r\n {(option1 === 1 || option1 === 4) && (\r\n \r\n \r\n setOption4(e)}\r\n disabled={disable3 || (showAdd && option1 !== 4)}\r\n defaulfAdd={isCheck5()}\r\n defaulfAdd2={isCheck4()}\r\n />\r\n \r\n \r\n )}\r\n \r\n {option1 === 4 && (\r\n \r\n \r\n setOption5(e)}\r\n disabled={disable4 || showAdd}\r\n defaulfAdd={isCheck7()}\r\n defaulfAdd2={isCheck6()}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n setName(e)}\r\n value={name}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n วัตถุประสงค์\r\n
\r\n \r\n แก้ไขตัวชี้วัด
\r\n )}\r\n {showAdd && (\r\nเพิ่มตัวชี้วัด
\r\n )}\r\n\r\n โปรดเลือกหน่วยงานและตัวชี้วัดหรือเพิ่มตัวชี้วัดใหม่\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal3(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nCEO / CO-FOUNDER
\r\nAlec Thompson
\r\n\r\n Don{\"'\"}t be scared of the truth because we need to restart the\r\n human foundation in truth And I love you like Kanye loves Kanye\r\n I love Rick Owens’ bed design but the back is...\r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n { handleResponsible(e) } } />\r\n \r\n \r\n \r\n */}\r\n {/* Confirm */}\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )} */}\r\n\r\n {showMonth && (\r\n ผู้รับผิดชอบ
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setYear(e)}\r\n default={optionsYear[0]}\r\n defaulfAdd={isCheckDataYear()}\r\n disabled={showAdd ? false : !isResponsible }\r\n />\r\n \r\n \r\n setDataGroup(e)}\r\n defaulfAdd={isCheckDataGroup()}\r\n year={year}\r\n />\r\n \r\n \r\n \r\n {(unit === 1 || unit === 3) && (\r\n \r\n \r\n \r\n \r\n setM2Value1(e)}\r\n value={m2Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n setM2Value2(e)}\r\n value={m2Value2}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 2 ||\r\n (isAddGroup && calMonth >= 2) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 2);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 2 ||\r\n (isAddGroup && calMonth >= 2) || (year === '' ? calYear : year) < calYear) &&\r\n m2Approve && (\r\n \r\n \r\n )}\r\n \r\n setM2Target(e)}\r\n value={m2Target}\r\n numericInput={true}\r\n />\r\n \r\n {m2Value1 !== \"\" &&\r\n (m2Value2 !== \"\" && m2Value2 !== null) && (\r\n \r\n \r\n \r\n )}\r\n {m2Value1 !== \"\" &&\r\n (m2Value2 !== \"\" && m2Value2 !== null) && (\r\n \r\n setM2Link(e)}\r\n value={m2Link}\r\n />\r\n \r\n )}\r\n \r\n
\r\n \r\n เพิ่มและแก้ไขข้อมูล\r\n
\r\nกรุณากรอกข้อมูล
\r\n\r\n {1 === 1 && (\r\n \r\n \r\n \r\n \r\n setM1Value1(e)}\r\n value={m1Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n setM1Value2(e)}\r\n value={m1Value2}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 1 ||\r\n (isAddGroup && calMonth >= 1) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 1);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 1 ||\r\n (isAddGroup && calMonth >= 1) || (year === '' ? calYear : year) < calYear) &&\r\n m1Approve && (\r\n \r\n \r\n )}\r\n \r\n setM1Target(e)}\r\n value={m1Target}\r\n numericInput={true}\r\n />\r\n \r\n {m1Value1 !== \"\" &&\r\n (m1Value2 !== \"\" && m1Value2 !== null) && (\r\n \r\n \r\n \r\n )}\r\n {m1Value1 !== \"\" &&\r\n (m1Value2 !== \"\" && m1Value2 !== null) && (\r\n \r\n setM1Link(e)}\r\n value={m1Link}\r\n />\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n setGroupName(e)}\r\n value={groupName}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n
\r\n )}\r\n {1 === 1 && (\r\n \r\n \r\n \r\n setData1(e)}\r\n value={data1}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n setData2(e)}\r\n value={data2}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n
\r\n )}\r\n เดือนตุลาคม
\r\n \r\n\r\n เดือนพฤศจิกายน\r\n
\r\n \r\nเดือนธันวาคม
\r\n \r\nเดือนมกราคม
\r\n \r\n\r\n เดือนกุมภาพันธ์\r\n
\r\n \r\nเดือนมีนาคม
\r\n \r\nเดือนเมษายน
\r\n \r\nเดือนพฤษภาคม
\r\n \r\n\r\n เดือนมิถุนายน\r\n
\r\n \r\nเดือนกรกฎาคม
\r\n \r\nเดือนสิงหาคม
\r\n \r\nเดือนกันยายน
\r\n \r\n\r\n {1 === 1 && (\r\n \r\n \r\n \r\n setM1Value1(e)}\r\n value={m1Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 1 ||\r\n (isAddGroup && calMonth >= 1) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 1);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 1 || (isAddGroup && calMonth >= 1 ) || (year === '' ? calYear : year) < calYear) &&\r\n m1Approve && (\r\n \r\n setM1Target(e)}\r\n value={m1Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM1Link(e)}\r\n value={m1Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM2Value1(e)}\r\n value={m2Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 2 ||\r\n (isAddGroup && calMonth >= 2) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 2);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 2 || (isAddGroup && calMonth >= 2) || (year === '' ? calYear : year) < calYear) &&\r\n m2Approve && (\r\n \r\n setM2Target(e)}\r\n value={m2Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM2Link(e)}\r\n value={m2Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM3Value1(e)}\r\n value={m3Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 3 ||\r\n (isAddGroup && calMonth >= 3) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 3);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 3 || (isAddGroup && calMonth >= 3) || (year === '' ? calYear : year) < calYear) &&\r\n m3Approve && (\r\n \r\n setM3Target(e)}\r\n value={m3Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM3Link(e)}\r\n value={m3Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM4Value1(e)}\r\n value={m4Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 4 ||\r\n (isAddGroup && calMonth >= 4) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 4);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 4 || (isAddGroup && calMonth >= 4) || (year === '' ? calYear : year) < calYear) &&\r\n m4Approve && (\r\n \r\n setM4Target(e)}\r\n value={m4Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM4Link(e)}\r\n value={m4Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM5Value1(e)}\r\n value={m5Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 5 ||\r\n (isAddGroup && calMonth >= 5) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 5);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 5 || (isAddGroup && calMonth >= 5) || (year === '' ? calYear : year) < calYear) &&\r\n m5Approve && (\r\n \r\n setM5Target(e)}\r\n value={m5Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM5Link(e)}\r\n value={m5Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM6Value1(e)}\r\n value={m6Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 6 ||\r\n (isAddGroup && calMonth >= 6) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 6);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 6 || (isAddGroup && calMonth >= 6) || (year === '' ? calYear : year) < calYear) &&\r\n m6Approve && (\r\n \r\n setM6Target(e)}\r\n value={m6Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM6Link(e)}\r\n value={m6Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM7Value1(e)}\r\n value={m7Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 7 ||\r\n (isAddGroup && calMonth >= 7) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 7);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 7 || (isAddGroup && calMonth >= 7) || (year === '' ? calYear : year) < calYear) &&\r\n m7Approve && (\r\n \r\n setM7Target(e)}\r\n value={m7Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM7Link(e)}\r\n value={m7Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM8Value1(e)}\r\n value={m8Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 8 ||\r\n (isAddGroup && calMonth >= 8) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 8);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 8 || (isAddGroup && calMonth >= 8) || (year === '' ? calYear : year) < calYear) &&\r\n m8Approve && (\r\n \r\n setM8Target(e)}\r\n value={m8Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM8Link(e)}\r\n value={m8Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM9Value1(e)}\r\n value={m9Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 9 ||\r\n (isAddGroup && calMonth >= 9) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 9);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 9 || (isAddGroup && calMonth >= 9) || (year === '' ? calYear : year) < calYear) &&\r\n m9Approve && (\r\n \r\n setM9Target(e)}\r\n value={m9Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM9Link(e)}\r\n value={m9Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM10Value1(e)}\r\n value={m10Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 10 ||\r\n (isAddGroup && calMonth >= 10) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 10);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 10 ||\r\n (isAddGroup && calMonth >= 10) || (year === '' ? calYear : year) < calYear) &&\r\n m10Approve && (\r\n \r\n setM10Target(e)}\r\n value={m10Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM10Link(e)}\r\n value={m10Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM11Value1(e)}\r\n value={m11Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 11 ||\r\n (isAddGroup && calMonth >= 11) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 11);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 11 ||\r\n (isAddGroup && calMonth >= 11) || (year === '' ? calYear : year) < calYear) &&\r\n m11Approve && (\r\n \r\n setM11Target(e)}\r\n value={m11Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM11Link(e)}\r\n value={m11Link}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM12Value1(e)}\r\n value={m12Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 12 ||\r\n (isAddGroup && calMonth >= 12) || (year === '' ? calYear : year) < calYear) && (\r\n {\r\n handleClick(event, 12);\r\n }}\r\n disabled = {showAdd ? false : !isResponsible }\r\n />\r\n )}\r\n {(frequency === 1 ||\r\n frequency === 2 ||\r\n frequency === 3 ||\r\n frequency === 4) &&\r\n (calMonth >= 12 ||\r\n (isAddGroup && calMonth >= 12) || (year === '' ? calYear : year) < calYear) &&\r\n m12Approve && (\r\n \r\n setM12Target(e)}\r\n value={m12Target}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM12Link(e)}\r\n value={m12Link}\r\n />\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n \r\n setGroupName(e)}\r\n value={groupName}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n
\r\n )}\r\n {1 === 1 && (\r\n \r\n \r\n \r\n setData1(e)}\r\n value={data1}\r\n inputProps={{\r\n disabled: showAdd ? false : !isResponsible \r\n }}\r\n />\r\n \r\n \r\n
\r\n )}\r\n เดือนตุลาคม
\r\n \r\nเดือนพฤศจิกายน
\r\n \r\nเดือนธันวาคม
\r\n \r\nเดือนมกราคม
\r\n \r\n\r\n เดือนกุมภาพันธ์\r\n
\r\n \r\nเดือนมีนาคม
\r\n \r\nเดือนเมษายน
\r\n \r\nเดือนพฤษภาคม
\r\n \r\nเดือนมิถุนายน
\r\n \r\nเดือนกรกฎาคม
\r\n \r\nเดือนสิงหาคม
\r\n \r\nเดือนกันยายน
\r\n \r\n\r\n {(!addMonth || isAddGroup) && (\r\n \r\n )}\r\n {addMonth && !isAddGroup && (\r\n \r\n )}\r\n
\r\n )}\r\n { isResponsible && (\r\n \r\n {!isAddGroup && (\r\n \r\n )}\r\n {!isAddGroup && (\r\n \r\n )}\r\n {isAddGroup && (\r\n \r\n )}\r\n
\r\n )}\r\n {/* Confirm */}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal2(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal4(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModalDelete(false)}\r\n >\r\n \r\n
\r\n \r\n\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModalDelete2(false)}\r\n >\r\n \r\n
\r\n \r\n\r\n {/* Error */}\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n \r\n ตกลง
\r\n \r\n\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n // tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n// import { Redirect } from \"react-router-dom\";\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\nimport { Badge } from \"reactstrap\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\nimport Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport { blue, red } from \"@material-ui/core/colors\";\r\nimport Table2 from \"components/Table/TableMonth\";\r\nimport {\r\n BrowserRouter as Router,\r\n Switch,\r\n Route,\r\n Link,\r\n useLocation\r\n} from \"react-router-dom\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles3 = makeStyles(theme => ({\r\n tableCell: {\r\n \"&:hover\": {\r\n backgroundColor: \"tomato !important\"\r\n },\r\n padding: \"12px 8px\",\r\n textAlign: \"center\"\r\n }\r\n}));\r\n\r\nconst useStyles4 = makeStyles(theme => ({\r\n tableCell: {\r\n \"&:hover\": {\r\n backgroundColor: \"green !important\"\r\n },\r\n padding: \"12px 8px\",\r\n textAlign: \"center\"\r\n }\r\n}));\r\n\r\nconst useStyles5 = makeStyles(theme => ({\r\n tableCell: {\r\n \"&:hover\": {\r\n // backgroundColor: \"white !important\"\r\n },\r\n padding: \"12px 8px\",\r\n textAlign: \"center\"\r\n }\r\n}));\r\n\r\n// const useStyles5 = makeStyles(theme => ({\r\n// tableRow: {\r\n// \"&$hover:hover\": {\r\n// backgroundColor: \"white !important\"\r\n// }\r\n// },\r\n// hover: {}\r\n// }));\r\n\r\n// export default function CustomTable(props) {\r\n export default function CustomTable(props) {\r\n // const [dataId, setDataId] = useState(\"\");\r\n // const [option1, setOption1] = useState(\"\");\r\n // const [option2, setOption2] = useState(\"\");\r\n // const [option3, setOption3] = useState(\"\");\r\n // const [option4, setOption4] = useState(\"\");\r\n // const [redirect, setRedirect] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const classes = useStyles();\r\n const classes3 = useStyles3();\r\n const classes4 = useStyles4();\r\n const classes5 = useStyles5();\r\n const [tableHead2, setTableHead2] = useState([]);\r\n const [data, setData] = useState([]);\r\n const [icon, setIcon] = useState(\"fas fa-calendar-day\");\r\n const { tableHead, tableData, tableHeaderColor } = props;\r\n\r\n // const test = e => {\r\n // if (e !== null) {\r\n // setDataId(e[8]);\r\n // setOption1(e[9]);\r\n // setOption2(e[10]);\r\n // if (e[11] !== null && e[11] !== undefined) {\r\n // if (typeof e[11] !== \"string\") {\r\n // setOption3(e[11]);\r\n // } else {\r\n // setOption3(0);\r\n // }\r\n // } else {\r\n // setOption3(0);\r\n // }\r\n // if (e[12] !== null && e[12] !== undefined) {\r\n // if (typeof e[12] !== \"string\") {\r\n // setOption4(e[12]);\r\n // } else {\r\n // setOption4(0);\r\n // }\r\n // } else {\r\n // setOption4(0);\r\n // }\r\n // }\r\n // };\r\n\r\n useEffect(() => {\r\n tableHead2.push(\r\n \"ค่าเป้าหมาย\",\r\n \"ความถี่\",\r\n \"ตุลาคม\",\r\n \"พฤศจิกายน\",\r\n \"ธันวาคม\",\r\n \"มกราคม\",\r\n \"กุมภาพันธ์\",\r\n \"มีนาคม\",\r\n \"เมษายน\",\r\n \"พฤษภาคม\",\r\n \"มิถุนายน\",\r\n \"กรกฎาคม\",\r\n \"สิงหาคม\",\r\n \"กันยายน\"\r\n );\r\n }, []);\r\n\r\n function tags(e) {\r\n return e[e.length - 1];\r\n }\r\n\r\n const handleCellEdit = e => {\r\n return \"/datacenter/edit/\" + e;\r\n };\r\n\r\n const handleCellClickModal = e => {\r\n fetch(\"/api/v1/data/modalMonth?dataId=\" + e[10])\r\n .then(response => response.json())\r\n .then(result => {\r\n var tableList = [];\r\n if (result.data.result.length > 0) {\r\n tableList.push([\r\n e[3],\r\n result.data.result[0],\r\n result.data.result[1],\r\n result.data.result[2],\r\n result.data.result[3],\r\n result.data.result[4],\r\n result.data.result[5],\r\n result.data.result[6],\r\n result.data.result[7],\r\n result.data.result[8],\r\n result.data.result[9],\r\n result.data.result[10],\r\n result.data.result[11],\r\n result.data.result[12]\r\n ]);\r\n }\r\n\r\n setData(tableList);\r\n });\r\n // console.log(\"test\");\r\n // console.log(e);\r\n setModal(true);\r\n };\r\n\r\n // const handleCellClick = e => {\r\n // var o1 = 0;\r\n // var o2 = 0;\r\n // var o3 = 0;\r\n // if (e[11] === 2 && e[12] === \"\") {\r\n // const response = fetch(\"/api/v1/data/\" + e[10], {\r\n // method: \"GET\"\r\n // });\r\n // const data = response.json();\r\n // o1 = data.data.group1Id === null ? 0 : data.data.group1Id;\r\n // o2 = data.data.group2Id === null ? 0 : data.data.group2Id;\r\n // o3 = data.data.group3Id === null ? 0 : data.data.group3Id;\r\n // } else if (e[11] === 1 && e[12] === \"\") {\r\n // const response3 = fetch(\r\n // \"/api/v1/dataReport?group1=\" + e[11] + \"&group2=\" + e[12] + \"&group3=\" + e[13] + \"&group4=\" + e[14] + \"&dataId=\" + e[10],\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // );\r\n // const data3 = response3.json();\r\n // if (data3.data !== null) {\r\n // o2 = data3.data.group2Id === null ? 0 : data3.data.group2Id;\r\n // o3 = data3.data.group3Id === null ? 0 : data3.data.group3Id;\r\n // } else {\r\n // const response2 = fetch(\"/api/v1/data/\" + e[10], {\r\n // method: \"GET\"\r\n // });\r\n // const data2 = response2.json();\r\n // o1 = data2.data.group1Id === null ? 0 : data2.data.group1Id;\r\n // o2 = data2.data.group2Id === null ? 0 : data2.data.group2Id;\r\n // o3 = data2.data.group3Id === null ? 0 : data2.data.group3Id;\r\n // }\r\n // }\r\n \r\n // var id = e[10];\r\n // if (o1 === 0) {\r\n // o1 = e[11];\r\n // }\r\n // if (o2 === 0) {\r\n // o2 = e[12];\r\n // }\r\n // var o4 = 0;\r\n // if (e[13] !== null && e[13] !== undefined && o3 === 0) {\r\n // if (typeof e[13] !== \"string\") {\r\n // o3 = e[13];\r\n // }\r\n // }\r\n // if (e[14] !== null && e[14] !== undefined) {\r\n // if (typeof e[14] !== \"string\") {\r\n // o4 = e[14];\r\n // }\r\n // }\r\n\r\n // props.history.push({\r\n // pathname: 'dashboard',\r\n // state: {\r\n // dataId: id ,\r\n // option1: o1,\r\n // option2: o2,\r\n // option3: o3,\r\n // option4: o4\r\n // }\r\n // })\r\n // }\r\n\r\n const handleCellClick = e => {\r\n const fetchData = async () => {\r\n var o1 = 0;\r\n var o2 = 0;\r\n var o3 = 0;\r\n if (e[11] === 2 && e[12] === \"\") {\r\n const response = await fetch(\"/api/v1/data/\" + e[10], {\r\n method: \"GET\"\r\n });\r\n const data = await response.json();\r\n o1 = data.data.group1Id === null ? 0 : data.data.group1Id;\r\n o2 = data.data.group2Id === null ? 0 : data.data.group2Id;\r\n o3 = data.data.group3Id === null ? 0 : data.data.group3Id;\r\n } else if (e[11] === 1 && e[12] === \"\") {\r\n const response3 = await fetch(\r\n \"/api/v1/dataReport?group1=\" +\r\n e[11] +\r\n \"&group2=\" +\r\n e[12] +\r\n \"&group3=\" +\r\n e[13] +\r\n \"&group4=\" +\r\n e[14] +\r\n \"&dataId=\" +\r\n e[10],\r\n {\r\n method: \"GET\"\r\n }\r\n );\r\n const data3 = await response3.json();\r\n if (data3.data !== null) {\r\n o2 = data3.data.group2Id === null ? 0 : data3.data.group2Id;\r\n o3 = data3.data.group3Id === null ? 0 : data3.data.group3Id;\r\n } else {\r\n const response2 = await fetch(\"/api/v1/data/\" + e[10], {\r\n method: \"GET\"\r\n });\r\n const data2 = await response2.json();\r\n o1 = data2.data.group1Id === null ? 0 : data2.data.group1Id;\r\n o2 = data2.data.group2Id === null ? 0 : data2.data.group2Id;\r\n o3 = data2.data.group3Id === null ? 0 : data2.data.group3Id;\r\n }\r\n }\r\n\r\n var id = e[10];\r\n if (o1 === 0) {\r\n o1 = e[11];\r\n }\r\n if (o2 === 0) {\r\n o2 = e[12];\r\n }\r\n var o4 = 0;\r\n if (e[13] !== null && e[13] !== undefined && o3 === 0) {\r\n if (typeof e[13] !== \"string\") {\r\n o3 = e[13];\r\n }\r\n }\r\n if (e[14] !== null && e[14] !== undefined) {\r\n if (typeof e[14] !== \"string\") {\r\n o4 = e[14];\r\n }\r\n }\r\n\r\n window.location.href =\r\n \"/datacenter/dashboard?dataId=\" +\r\n id +\r\n \"&option1=\" +\r\n o1 +\r\n \"&option2=\" +\r\n o2 +\r\n \"&option3=\" +\r\n o3 +\r\n \"&option4=\" +\r\n o4;\r\n };\r\n fetchData();\r\n };\r\n\r\n // var id = e[8];\r\n // var o1 = e[9];\r\n // var o2 = e[10];\r\n // var o3 = 0;\r\n // var o4 = 0;\r\n // if (e[11] !== null && e[11] !== undefined) {\r\n // if (typeof e[11] !== \"string\") {\r\n // o3 = e[11];\r\n // }\r\n // }\r\n // if (e[12] !== null && e[12] !== undefined) {\r\n // if (typeof e[12] !== \"string\") {\r\n // o4 = e[12];\r\n // }\r\n // }\r\n\r\n // window.location.href = \"/admin/dashboard?dataId=\" +\r\n // id +\r\n // \"&option1=\" +\r\n // o1 +\r\n // \"&option2=\" +\r\n // o2 +\r\n // \"&option3=\" +\r\n // o3 +\r\n // \"&option4=\" +\r\n // o4;\r\n // }\r\n\r\n // const test2 = () => {\r\n // if (\r\n // dataId !== \"\" &&\r\n // option1 !== \"\" &&\r\n // option2 !== \"\" &&\r\n // option3 !== \"\" &&\r\n // option4 !== \"\"\r\n // ) {\r\n // return (\r\n // \r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n\r\n","/* eslint-disable no-undef */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useMemo, useEffect } from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Table from \"components/Table/TableList2.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n// import PaginationComponent from \"react-reactstrap-pagination\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\nimport axios from \"axios\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n cardCategory: {\r\n marginTop: \"0\",\r\n marginBottom: \"3px\",\r\n minHeight: \"auto\"\r\n },\r\n cardTitle: {\r\n marginTop: \"0\",\r\n marginBottom: \"3px\",\r\n minHeight: \"auto\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function TableList() {\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n // const [selectedPage, setSelectedPage] = useState(1);\r\n const [l1Option, setL1Option] = useState([]);\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [data, setData] = useState([]);\r\n const [dataInfo, setDataInfo] = useState([]);\r\n const [option1, setOption1] = useState(\"\");\r\n const [option2, setOption2] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [oldOption1, setOldOption1] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [disable1, setDisable1] = useState(true);\r\n const [disable2, setDisable2] = useState(true);\r\n const [disable3, setDisable3] = useState(true);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [pageSize] = useState(10);\r\n const windowWidth = useWindowWidth();\r\n const [tableHead, setTableHead] = useState([]);\r\n const [year, setYear] = useState([]);\r\n const [value, setValue] = useState([]);\r\n const [isYear, setIsYear] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [select, setSelect] = useState([]);\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL1Option(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL1Option(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n }, []);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + option1)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2Option(result.data);\r\n // setDisable1(false);\r\n // setOldOption1(option1);\r\n // // window.history.replaceState(\r\n // // null,\r\n // // \"New Page Title\",\r\n // // \"/admin/table/\" + option1\r\n // // );\r\n // if (option1 !== oldOption1) {\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setDisable2(true);\r\n // setL3Option([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + option1)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2Option(res.data);\r\n setDisable1(false);\r\n setOldOption1(option1);\r\n if (option1 !== oldOption1) {\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setDisable2(true);\r\n setL3Option([]);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [option1]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1 || option1 === 4) {\r\n if (option2 !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setDisable2(false);\r\n setOldOption2(option2);\r\n // window.history.replaceState(\r\n // null,\r\n // \"New Page Title\",\r\n // \"/admin/table/\" + option1 + \"/\" + option2\r\n // );\r\n if (option2 !== oldOption2) {\r\n setOption3(\"\");\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n // if (option1 !== \"\") {\r\n // window.history.replaceState(\r\n // null,\r\n // \"New Page Title\",\r\n // \"/admin/table/\" + option1 + \"/\" + option2\r\n // );\r\n // }\r\n setOldOption2(option2);\r\n }\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setDisable3(false);\r\n setOldOption3(option3);\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption3(option3);\r\n }\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n setOldOption4(option4);\r\n }, [option4]);\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n tableHead.push(\r\n \"\",\r\n \"\",\r\n \"ชื่อตัวชี้วัด\",\r\n \"ค่าเป้าหมาย\",\r\n result[5].label,\r\n result[4].label,\r\n result[3].label,\r\n result[2].label,\r\n result[1].label,\r\n result[0].label\r\n );\r\n setYear(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\" && (option2 === \"\" || option1 !== oldOption1)) {\r\n if (option1 !== oldOption1) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/tableOption/\" +\r\n option1 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n bindTable(result);\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }, [option1, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 !== 1 && option1 !== 4) {\r\n if (option2 !== \"\") {\r\n if (option2 !== oldOption2) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/table/\" +\r\n option2 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n bindTable(result);\r\n setIsLoading(false);\r\n\r\n // fetch(\r\n // \"/api/v1/data/approve?group1=\" +\r\n // option1 +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // \"\" +\r\n // \"&group4=\" +\r\n // \"\",\r\n // {\r\n // method: \"GET\"\r\n // }\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // if(result.data.length > 0){\r\n // setSelect(result.data);\r\n // } else {\r\n // setSelect();\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n } else if (option2 !== \"\" && (option3 === \"\" || option2 !== oldOption2)) {\r\n if (option2 !== oldOption2) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/tableOption2/\" +\r\n option2 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n bindTable(result);\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }, [option2, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1) {\r\n if (option3 !== \"\") {\r\n if (option3 !== oldOption3) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/table2/\" +\r\n option3 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n bindTable(result);\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }\r\n if (option3 !== \"\" && (option4 === \"\" || option3 !== oldOption3)) {\r\n if (option3 !== oldOption3) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/tableOption3/\" +\r\n option3 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n bindTable(result);\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }, [option3, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option4 !== \"\") {\r\n if (option4 !== oldOption4) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/table3/\" +\r\n option4 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n bindTable(result);\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }\r\n }, [option4, currentPage]);\r\n\r\n const isCheck = () => {\r\n if (option1 !== oldOption1) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck2 = () => {\r\n if (option2 !== oldOption2) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck3 = () => {\r\n if (option3 !== oldOption3) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n\r\n return windowWidth;\r\n }\r\n\r\n const onSelected = e => {\r\n setSelected(e);\r\n };\r\n // function handleSelected(selectedPage) {\r\n // setSelectedPage(selectedPage);\r\n // }\r\n\r\n const search = window.location.search;\r\n const params = new URLSearchParams(search);\r\n const text = params.get(\"search\");\r\n const year1 = params.get(\"year1\");\r\n const year2 = params.get(\"year2\");\r\n const year3 = params.get(\"year3\");\r\n const year4 = params.get(\"year4\");\r\n const year5 = params.get(\"year5\");\r\n const year6 = params.get(\"year6\");\r\n\r\n useMemo(() => {\r\n if (text !== \"\" && text !== null) {\r\n var obj1 = JSON.parse(year1);\r\n var obj2 = JSON.parse(year2);\r\n var obj3 = JSON.parse(year3);\r\n var obj4 = JSON.parse(year4);\r\n var obj5 = JSON.parse(year5);\r\n var obj6 = JSON.parse(year6);\r\n var y = [];\r\n y = [\r\n { value: obj1.value, label: obj1.label },\r\n { value: obj2.value, label: obj2.label },\r\n { value: obj3.value, label: obj3.label },\r\n { value: obj4.value, label: obj4.label },\r\n { value: obj5.value, label: obj5.label },\r\n { value: obj6.value, label: obj6.label }\r\n ];\r\n setIsYear(y);\r\n }\r\n\r\n setValue(text);\r\n }, [text]);\r\n\r\n useEffect(() => {\r\n fetch(\r\n \"/api/v1/search/\" +\r\n text +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n //bindTable(result);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var tags;\r\n var flag;\r\n var flagTarget;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === isYear[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n flag = e.flag;\r\n flagTarget = e.flagTarget;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n flag = e.flag;\r\n flagTarget = e.flagTarget;\r\n }\r\n }\r\n\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n e.dataId,\r\n e.group1Id,\r\n e.group2Id,\r\n e.group3Id,\r\n e.group4Id,\r\n flag,\r\n flagTarget,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n e.group1Id,\r\n e.group2Id,\r\n e.group3Id,\r\n e.group4Id,\r\n e.flag,\r\n flagTarget,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n e.group1Id,\r\n e.group2Id,\r\n e.group3Id,\r\n e.group4Id,\r\n e.flag,\r\n flagTarget,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // e.group1Id,\r\n // e.group2Id,\r\n // e.group3Id,\r\n // e.group4Id,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, [text, currentPage]);\r\n\r\n const bindTable = result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var tags;\r\n var flag;\r\n var flagTarget;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target = e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n flag = e.flag;\r\n flagTarget = e.flagTarget;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target = e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n flag = e.flag;\r\n flagTarget = e.flagTarget;\r\n }\r\n }\r\n\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n flag,\r\n flagTarget,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.flag,\r\n e.flagTarget,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n \"Dashboard\",\r\n \"Edit\",\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.flag,\r\n e.flagTarget,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // option3,\r\n // option4,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n };\r\n\r\n // const handleConfirm = evt => {\r\n // evt.preventDefault();\r\n // setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n // const requestOptions = {\r\n // method: \"POST\",\r\n // headers: {\r\n // \"Content-Type\": \"application/json-patch+json\"\r\n // },\r\n // body: JSON.stringify({\r\n // selected: selected,\r\n // option1Save: option1 === \"\" ? null : option1,\r\n // option2Save: option2 === \"\" ? null : option2,\r\n // option3Save: option3 === \"\" ? null : option3,\r\n // option4Save: option4 === \"\" ? null : option4,\r\n\r\n // })\r\n // };\r\n\r\n // fetch(\"/api/v1/data/approve\", requestOptions)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setModal(false);\r\n // setIcon(\"far fa-question-circle\");\r\n // },\r\n // error => {\r\n // alert(error);\r\n // }\r\n // );\r\n // };\r\n\r\n // const handleSubmit = evt => {\r\n // evt.preventDefault();\r\n // var cntErr = 0;\r\n\r\n // var errMsg = [];\r\n\r\n // if (cntErr > 0) {\r\n // setErrMsg(errMsg);\r\n // setModalError(true);\r\n // } else {\r\n // setModal(true);\r\n // }\r\n // };\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n setOption1(e)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n disabled={disable1}\r\n defaulfAdd={isCheck()}\r\n />\r\n \r\n \r\n \r\n {(option1 === 1 || option1 === 4) && (\r\n \r\n \r\n setOption3(e)}\r\n disabled={disable2}\r\n defaulfAdd={isCheck2()}\r\n />\r\n \r\n \r\n )}\r\n \r\n {option1 === 4 && (\r\n \r\n \r\n setOption4(e)}\r\n disabled={disable3}\r\n defaulfAdd={isCheck3()}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ตัวชี้วัดที่ปีงบประมาณล่าสุดเป็นสี\r\n \r\n \r\n tttt\r\n \r\n \r\n คือตัวชี้วัดที่ยังไม่ได้อนุมัติ\r\n \r\n \r\n {/* for this table */}\r\n \r\n \r\n \r\n {!isLoading && (\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n {/* \r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n */}\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\nimport { Badge } from \"reactstrap\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const classes = useStyles();\r\n const { tableHead, tableData, tableHeaderColor, tableSelect } = props;\r\n const [selected, setSelected] = useState([]);\r\n\r\n const handleClick = (event, name) => {\r\n const selectedIndex = selected.indexOf(name);\r\n let newSelected = [];\r\n\r\n if (selectedIndex === -1) {\r\n newSelected = newSelected.concat(selected, name);\r\n } else if (selectedIndex === 0) {\r\n newSelected = newSelected.concat(selected.slice(1));\r\n } else if (selectedIndex === selected.length - 1) {\r\n newSelected = newSelected.concat(selected.slice(0, -1));\r\n } else if (selectedIndex > 0) {\r\n newSelected = newSelected.concat(\r\n selected.slice(0, selectedIndex),\r\n selected.slice(selectedIndex + 1)\r\n );\r\n }\r\n\r\n setSelected(newSelected);\r\n handleChange(newSelected);\r\n };\r\n\r\n function handleChange(e) {\r\n props.select(e);\r\n }\r\n\r\n function tags(e) {\r\n return e[e.length - 1];\r\n }\r\n\r\n useEffect(() => {\r\n var list = [];\r\n if (tableSelect !== undefined && tableSelect.length > 0) {\r\n tableSelect.forEach(e => {\r\n if (e.dataId === undefined) {\r\n list = list.concat(e);\r\n } else {\r\n list = list.concat(e.dataId);\r\n }\r\n });\r\n }\r\n setSelected(list);\r\n }, [tableSelect]);\r\n\r\n return (\r\n Welcome to
*/}\r\nกรุณาเลือก
\r\n\r\n หน่วยงาน \r\n
\r\nรายการตัวชี้วัด
\r\n\r\n {/* Here is a subtitle */}\r\n
\r\n \r\n
\r\n )}\r\n \r\n Table on Plain Background\r\n
\r\n\r\n Here is a subtitle for this table\r\n
\r\n\r\n
\r\n
\r\n
\r\n Reacstrap Pagination Component
\r\n\r\n
Selected page: {selectedPage}
\r\n\r\n
Default maxPaginationNumbers (5)
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),\r\n tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport { Redirect } from \"react-router-dom\";\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\nimport { Badge } from \"reactstrap\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const [dataId, setDataId] = useState(\"\");\r\n const [option1, setOption1] = useState(\"\");\r\n const [option2, setOption2] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const classes = useStyles();\r\n const { tableHead, tableData, tableHeaderColor } = props;\r\n\r\n const test = e => {\r\n if (e !== null) {\r\n setDataId(e[8]);\r\n setOption1(e[9]);\r\n setOption2(e[10]);\r\n if (e[11] !== null && e[11] !== undefined) {\r\n if (typeof e[11] !== \"string\") {\r\n setOption3(e[11]);\r\n } else {\r\n setOption3(0);\r\n }\r\n } else {\r\n setOption3(0);\r\n }\r\n if (e[12] !== null && e[12] !== undefined) {\r\n if (typeof e[12] !== \"string\") {\r\n setOption4(e[12]);\r\n } else {\r\n setOption4(0);\r\n }\r\n } else {\r\n setOption4(0);\r\n }\r\n }\r\n };\r\n\r\n function tags(e) {\r\n return e[e.length - 1];\r\n }\r\n\r\n const test2 = () => {\r\n if (\r\n dataId !== \"\" &&\r\n option1 !== \"\" &&\r\n option2 !== \"\" &&\r\n option3 !== \"\" &&\r\n option4 !== \"\"\r\n ) {\r\n return (\r\n \r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-undef */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Table from \"components/Table/Table2.js\";\r\nimport Table1 from \"components/Table/Table.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n// import PaginationComponent from \"react-reactstrap-pagination\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AddBox from \"@material-ui/icons/AddBox\";\r\nimport Subject from \"@material-ui/icons/Subject\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\nimport axios from \"axios\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n cardCategory: {\r\n marginTop: \"0\",\r\n marginBottom: \"3px\",\r\n minHeight: \"auto\"\r\n },\r\n cardTitle: {\r\n marginTop: \"0\",\r\n marginBottom: \"3px\",\r\n minHeight: \"auto\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function TableList() {\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n // const [selectedPage, setSelectedPage] = useState(1);\r\n const [l1Option, setL1Option] = useState([]);\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [l1OptionSave, setL1OptionSave] = useState([]);\r\n const [l2OptionSave, setL2OptionSave] = useState([]);\r\n const [l3OptionSave, setL3OptionSave] = useState([]);\r\n const [l4OptionSave, setL4OptionSave] = useState([]);\r\n const [data, setData] = useState([]);\r\n const [data2, setData2] = useState([]);\r\n const [dataInfo, setDataInfo] = useState([]);\r\n const [option1, setOption1] = useState(\"\");\r\n const [option2, setOption2] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [option1Save, setOption1Save] = useState(\"\");\r\n const [option2Save, setOption2Save] = useState(\"\");\r\n const [option3Save, setOption3Save] = useState(\"\");\r\n const [option4Save, setOption4Save] = useState(\"\");\r\n const [oldOption1, setOldOption1] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [oldOption1Save, setOldOption1Save] = useState(\"\");\r\n const [oldOption2Save, setOldOption2Save] = useState(\"\");\r\n const [oldOption3Save, setOldOption3Save] = useState(\"\");\r\n const [oldOption4Save, setOldOption4Save] = useState(\"\");\r\n const [disable1, setDisable1] = useState(true);\r\n const [disable2, setDisable2] = useState(true);\r\n const [disable3, setDisable3] = useState(true);\r\n const [disable1Save, setDisable1Save] = useState(true);\r\n const [disable2Save, setDisable2Save] = useState(true);\r\n const [disable3Save, setDisable3Save] = useState(true);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [currentPage2, setCurrentPage2] = useState(1);\r\n const [totalPages2, setTotalPages2] = useState(1);\r\n const [pageSize] = useState(10);\r\n const windowWidth = useWindowWidth();\r\n const [tableHead, setTableHead] = useState([]);\r\n const [tableHead2, setTableHead2] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [select, setSelect] = useState([]);\r\n const [year, setYear] = useState([]);\r\n const [isShow, setIsShow] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [isLoading2, setIsLoading2] = useState(false);\r\n\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n\r\n const onSelected = e => {\r\n setSelected(e);\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModal(true);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL1Option(result.data);\r\n // setL1OptionSave(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL1Option(res.data);\r\n setL1OptionSave(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n }, []);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + option1)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2Option(result.data);\r\n // setDisable1(false);\r\n // setOldOption1(option1);\r\n // if (option1 !== oldOption1) {\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setDisable2(true);\r\n // setDisable3(true);\r\n // setL3Option([]);\r\n // setData([]);\r\n // setIsShow(false);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + option1)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2Option(res.data);\r\n setDisable1(false);\r\n setOldOption1(option1);\r\n if (option1 !== oldOption1) {\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setData([]);\r\n setIsShow(false);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [option1]);\r\n\r\n useEffect(() => {\r\n if (option1Save !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + option1Save)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2OptionSave(result.data);\r\n // setDisable1Save(false);\r\n // setOldOption1Save(option1Save);\r\n // if (option1Save !== oldOption1Save) {\r\n // setOption2Save(\"\");\r\n // setOption3Save(\"\");\r\n // setOption4Save(\"\");\r\n // setDisable2Save(true);\r\n // setDisable3Save(true);\r\n // setL3OptionSave([]);\r\n // setData2([]);\r\n // setIsOpen(false);\r\n\r\n // setOption1(\"\");\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setOption4(\"\");\r\n // setDisable1(true);\r\n // setDisable2(true);\r\n // setDisable3(true);\r\n // setL3Option([]);\r\n // setL2Option([]);\r\n // setData([]);\r\n // setIsShow(false);\r\n // setSelect([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + option1Save)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2OptionSave(res.data);\r\n setDisable1Save(false);\r\n setOldOption1Save(option1Save);\r\n if (option1Save !== oldOption1Save) {\r\n setOption2Save(\"\");\r\n setOption3Save(\"\");\r\n setOption4Save(\"\");\r\n setDisable2Save(true);\r\n setDisable3Save(true);\r\n setL3OptionSave([]);\r\n setData2([]);\r\n setIsOpen(false);\r\n\r\n setOption1(\"\");\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setOption4(\"\");\r\n setDisable1(true);\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setL2Option([]);\r\n setData([]);\r\n setIsShow(false);\r\n setSelect([]);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [option1Save]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1 || option1 === 4) {\r\n if (option2 !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setDisable2(false);\r\n setOldOption2(option2);\r\n if (option2 !== oldOption2) {\r\n setDisable3(true);\r\n setOption3(\"\");\r\n setData([]);\r\n setIsShow(false);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption2(option2);\r\n }\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n if (option1Save === 1 || option1Save === 4) {\r\n if (option2Save !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2Save)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3OptionSave(result.data);\r\n setDisable2Save(false);\r\n setOldOption2Save(option2Save);\r\n if (option2Save !== oldOption2Save) {\r\n setDisable3Save(true);\r\n setOption3Save(\"\");\r\n setData2([]);\r\n setIsOpen(false);\r\n setOption4Save(\"\");\r\n\r\n setOption1(\"\");\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setOption4(\"\");\r\n setDisable1(true);\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setL2Option([]);\r\n setData([]);\r\n setIsShow(false);\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption2Save(option2Save);\r\n }\r\n }, [option2Save]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setDisable3(false);\r\n setOldOption3(option3);\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n setData([]);\r\n setIsShow(false);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption3(option3);\r\n }\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n if (option1Save === 4) {\r\n if (option3Save !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3Save)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4OptionSave(result.data);\r\n setDisable3Save(false);\r\n setOldOption3Save(option3Save);\r\n if (option3Save !== oldOption3Save) {\r\n setOption4Save(\"\");\r\n setData2([]);\r\n setIsOpen(false);\r\n\r\n setOption1(\"\");\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setDisable1(true);\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setL2Option([]);\r\n setData([]);\r\n setIsShow(false);\r\n setOption4(\"\");\r\n setL4Option(\"\");\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption3Save(option3Save);\r\n }\r\n }, [option3Save]);\r\n\r\n useEffect(() => {\r\n setOldOption4(option4);\r\n }, [option4]);\r\n\r\n useEffect(() => {\r\n setOldOption4Save(option4Save);\r\n }, [option4Save]);\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n tableHead.push(\r\n \"\",\r\n \"ชื่อตัวชี้วัด\",\r\n \"ค่าเป้าหมาย\",\r\n result[5].label,\r\n result[4].label,\r\n result[3].label,\r\n result[2].label,\r\n result[1].label,\r\n result[0].label\r\n );\r\n tableHead2.push(\r\n \"ชื่อตัวชี้วัด\",\r\n \"ค่าเป้าหมาย\",\r\n result[5].label,\r\n result[4].label,\r\n result[3].label,\r\n result[2].label,\r\n result[1].label,\r\n result[0].label\r\n );\r\n setYear(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (option1 !== 1 && option1 !== 4) {\r\n if (option2 !== \"\") {\r\n if (option2 !== oldOption2) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/tableSave/\" +\r\n option2 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n if (option2 === option2Save) {\r\n setData([]);\r\n setIsShow(false);\r\n } else {\r\n setData(tableList);\r\n if (tableList.length > 0) {\r\n setIsShow(true);\r\n } else {\r\n setIsShow(false);\r\n }\r\n }\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }\r\n }, [option2, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1) {\r\n if (option3 !== \"\") {\r\n if (option3 !== oldOption3) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/table2Save/\" +\r\n option3 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // option3,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n if (option3 === option3Save) {\r\n setData([]);\r\n setIsShow(false);\r\n } else {\r\n setData(tableList);\r\n if (tableList.length > 0) {\r\n setIsShow(true);\r\n } else {\r\n setIsShow(false);\r\n }\r\n }\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }\r\n }, [option3, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option4 !== \"\") {\r\n if (option4 !== oldOption4) {\r\n setCurrentPage(1);\r\n }\r\n setIsLoading(true);\r\n fetch(\r\n \"/api/v1/table3Save/\" +\r\n option4 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // option3,\r\n // option4,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n if (option4 === option4Save) {\r\n setData([]);\r\n setIsShow(false);\r\n } else {\r\n setData(tableList);\r\n if (tableList.length > 0) {\r\n setIsShow(true);\r\n } else {\r\n setIsShow(false);\r\n }\r\n }\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n setIsLoading(false);\r\n },\r\n error => {\r\n console.log(error);\r\n setIsLoading(false);\r\n }\r\n );\r\n }\r\n }\r\n }, [option4, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1Save !== 1 && option1Save !== 4) {\r\n if (option2Save !== \"\") {\r\n if (option2Save !== oldOption2Save) {\r\n setCurrentPage2(1);\r\n }\r\n setIsLoading2(true);\r\n fetch(\r\n \"/api/v1/table/\" +\r\n option2Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n setIsLoading2(false);\r\n },\r\n error => {\r\n setIsLoading2(false);\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option2Save, currentPage2]);\r\n\r\n useEffect(() => {\r\n if (option1Save === 1) {\r\n if (option3Save !== \"\") {\r\n if (option3Save !== oldOption3Save) {\r\n setCurrentPage2(1);\r\n }\r\n setIsLoading2(true);\r\n fetch(\r\n \"/api/v1/table2/\" +\r\n option3Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setIsOpen(true);\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // option3Save,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n setIsLoading2(false);\r\n },\r\n error => {\r\n setIsLoading2(false);\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option3Save, currentPage2]);\r\n\r\n useEffect(() => {\r\n if (option1Save === 4) {\r\n if (option4Save !== \"\") {\r\n if (option4Save !== oldOption4Save) {\r\n setCurrentPage2(1);\r\n }\r\n setIsLoading2(true);\r\n fetch(\r\n \"/api/v1/table3/\" +\r\n option4Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setIsOpen(true);\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // option3Save,\r\n // option4Save,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n setIsLoading2(false);\r\n },\r\n error => {\r\n setIsLoading2(false);\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option4Save, currentPage2]);\r\n\r\n const isCheck = () => {\r\n if (option1 !== oldOption1) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck2 = () => {\r\n if (option2 !== oldOption2) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck3 = () => {\r\n if (option3 !== oldOption3) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck4 = () => {\r\n if (option1Save !== oldOption1Save) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck5 = () => {\r\n if (option2Save !== oldOption2Save) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck6 = () => {\r\n if (option3Save !== oldOption3Save) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n\r\n return windowWidth;\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json-patch+json\"\r\n },\r\n body: JSON.stringify({\r\n selected: selected,\r\n option1: option1 === \"\" ? null : option1,\r\n option2: option2 === \"\" ? null : option2,\r\n option3: option3 === \"\" ? null : option3,\r\n option4: option4 === \"\" ? null : option4,\r\n option1Save: option1Save === \"\" ? null : option1Save,\r\n option2Save: option2Save === \"\" ? null : option2Save,\r\n option3Save: option3Save === \"\" ? null : option3Save,\r\n option4Save: option4Save === \"\" ? null : option4Save,\r\n user: currentUser.userName\r\n })\r\n };\r\n\r\n fetch(\"/api/v1/data/select\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n if (option2Save !== \"\" && option3Save === \"\") {\r\n fetch(\r\n \"/api/v1/table/\" +\r\n option2Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n dataId,\r\n option1Save,\r\n option2Save,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (option3Save !== \"\" && option4Save === \"\") {\r\n fetch(\r\n \"/api/v1/table2/\" +\r\n option3Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setIsOpen(true);\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // option3Save\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (option4Save !== \"\") {\r\n fetch(\r\n \"/api/v1/table3/\" +\r\n option4Save +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setIsOpen(true);\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1Save,\r\n option2Save,\r\n option3Save,\r\n option4Save\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1Save,\r\n // option2Save,\r\n // option3Save,\r\n // option4Save\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1Save +\r\n \"&group2=\" +\r\n option2Save +\r\n \"&group3=\" +\r\n option3Save +\r\n \"&group4=\" +\r\n option4Save,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData2(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n };\r\n\r\n // function handleSelected(selectedPage) {\r\n // setSelectedPage(selectedPage);\r\n // }\r\n return (\r\n กรุณาเลือก
\r\n\r\n หน่วยงานที่ต้องการเพิ่มตัวชี้วัดจากหน่วยงานอื่น \r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\nรายการตัวชี้วัด
\r\n\r\n รายการตัวชี้วัดทั้งหมดที่มีในหน่วยงานและที่เพิ่มจากหน่วยงานอื่น\r\n
\r\n\r\n \r\n
\r\n )}\r\n กรุณาเลือก
\r\n\r\n หน่วยงานเพื่อเลือกตัวชี้วัด\r\n
\r\nรายการตัวชี้วัด
\r\n\r\n ให้เลือกตัวชี้วัดที่ต้องการแล้วกดบันทึก\r\n หากต้องการลบตัวชี้วัดที่เคยเพิ่มให้ติ๊กออกแล้วกดบันทึก\r\n
\r\n\r\n \r\n
\r\n )}\r\n \r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n // tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter2 from \"components/Card/CardFooter.js\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport Table from \"components/Table/TableAdmin\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport axios from \"axios\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function UserProfile() {\r\n const user = useSelector((state) => state.auth.user);\r\n const [clear, setClear] = useState(false);\r\n const [name, setName] = useState(\"\");\r\n const [data1, setData1] = useState(\"\");\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n const [year, setYear] = useState(\"\");\r\n const [dataGroup, setDataGroup] = useState(0);\r\n const [m1Value1, setM1Value1] = useState(\"\");\r\n const [m2Value1, setM2Value1] = useState(\"\");\r\n const [m3Value1, setM3Value1] = useState(\"\");\r\n const [m4Value1, setM4Value1] = useState(\"\");\r\n const [m5Value1, setM5Value1] = useState(\"\");\r\n const [m6Value1, setM6Value1] = useState(\"\");\r\n const [m7Value1, setM7Value1] = useState(\"\");\r\n const [m8Value1, setM8Value1] = useState(\"\");\r\n const [m9Value1, setM9Value1] = useState(\"\");\r\n const [m10Value1, setM10Value1] = useState(\"\");\r\n const [m11Value1, setM11Value1] = useState(\"\");\r\n const [m12Value1, setM12Value1] = useState(\"\");\r\n const [dataOId, setDataOId] = useState(0);\r\n const [optionsYear, setOptionsYear] = useState([]);\r\n const [optionsDataGroup, setOptionsDataGroup] = useState([]);\r\n const [modalDelete, setModalDelete] = useState(false);\r\n const [tableHead, setTableHead] = useState([]);\r\n const [pageSize] = useState(10);\r\n const [data, setData] = useState([]);\r\n const [isEdit, setIsEdit] = useState(false);\r\n const [isFecth, setIsFecth] = useState(false);\r\n const [isHorizontal, setIsHorizontal] = useState(false);\r\n const [isAdd, setIsAdd] = useState(false);\r\n const windowWidth = useWindowWidth();\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [idOther, setIdOther] = useState(0);\r\n const [isFinishAdd, setIsFinishAdd] = useState(false);\r\n const [disable, setDisable] = useState(false);\r\n const [isAdd2, setIsAdd2] = useState(false);\r\n const [oldYear, setOldYear] = useState(\"\");\r\n\r\n // const optionsYear = [\r\n // { value: \"2563\", label: \"2563\" },\r\n // { value: \"2562\", label: \"2562\" },\r\n // { value: \"2561\", label: \"2561\" },\r\n // { value: \"2560\", label: \"2560\" },\r\n // { value: \"2559\", label: \"2559\" },\r\n // { value: \"2558\", label: \"2558\" }\r\n // ];\r\n\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (name === null || name === \"\") {\r\n cntErr += 1;\r\n errMsg.push(\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {(isEdit || isAdd || isAdd2) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setName(e)}\r\n value={name}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n setModal3(false)} isOpen={modal3}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {/* \r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n {(isEdit || isAdd) && !isFecth && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setYear(e)}\r\n default={optionsYear[0]}\r\n defaulfAdd={isCheckYear()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setDataGroup(e)}\r\n defaulfAdd={isCheck()}\r\n year={year}\r\n idOther={idOther}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n {isAdd && (\r\n \r\n setData1(e)}\r\n value={data1}\r\n // inputProps={{\r\n // disabled: true\r\n // }}\r\n />\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n setM1Value1(e)}\r\n value={m1Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM2Value1(e)}\r\n value={m2Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM3Value1(e)}\r\n value={m3Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM4Value1(e)}\r\n value={m4Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM5Value1(e)}\r\n value={m5Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM6Value1(e)}\r\n value={m6Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM7Value1(e)}\r\n value={m7Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM8Value1(e)}\r\n value={m8Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM9Value1(e)}\r\n value={m9Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM10Value1(e)}\r\n value={m10Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM11Value1(e)}\r\n value={m11Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setM12Value1(e)}\r\n value={m12Value1}\r\n numericInput={true}\r\n />\r\n \r\n \r\n \r\n \r\n {isAdd && !isFecth && (\r\n \r\n )}\r\n {isEdit && !isFecth && (\r\n \r\n )}\r\n {/* Confirm */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n {icon2 !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n setModal4(false)} isOpen={modal4}>\r\n \r\n \r\n {icon2 !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n setModalDelete(false)}\r\n isOpen={modalDelete}\r\n >\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการลบข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\nimport PropTypes from \"prop-types\";\r\nimport React, { useState, useEffect } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const classes = useStyles();\r\n const { tableHead, tableData, tableHeaderColor } = props;\r\n\r\n const handleOpen = (e, name, id) => {\r\n onOpen(name, id);\r\n };\r\n\r\n function onOpen(name, id) {\r\n props.isOpen(true);\r\n props.name(name);\r\n props.reportId(id);\r\n }\r\n\r\n\r\n\r\n return (\r\n Simple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\n\r\n {\r\n handleClick();\r\n }}\r\n />\r\n
\r\n -
\r\nแสดงกราฟแนวนอน
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal3(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nCEO / CO-FOUNDER
\r\nAlec Thompson
\r\n\r\n Don{\"'\"}t be scared of the truth because we need to restart the\r\n human foundation in truth And I love you like Kanye loves Kanye\r\n I love Rick Owens’ bed design but the back is...\r\n
\r\n \r\nเพิ่มข้อมูล
\r\nกรุณากรอกข้อมูล
\r\n\r\n \r\n \r\n
\r\n เดือนตุลาคม
\r\nเดือนพฤศจิกายน
\r\n \r\nเดือนธันวาคม
\r\n \r\nเดือนมกราคม
\r\n \r\nเดือนกุมภาพันธ์
\r\n \r\nเดือนมีนาคม
\r\n \r\nเดือนเมษายน
\r\n \r\nเดือนพฤษภาคม
\r\n \r\nเดือนมิถุนายน
\r\n \r\nเดือนกรกฎาคม
\r\n \r\nเดือนสิงหาคม
\r\n \r\nเดือนกันยายน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal2(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal4(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModalDelete(false)}\r\n >\r\n \r\n
\r\n \r\n\r\n {/* Error */}\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n // tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport Table from \"components/Table/TableAccess\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport Datetime from 'react-datetime';\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Label,\r\n FormGroup\r\n} from \"reactstrap\";\r\n\r\nvar nowYear = new Date().getFullYear() + 543;\r\n\r\nconst optionMonth = [\r\n { value: 0, label: \"ไม่ระบุ\" },\r\n { value: 1, label: \"มกราคม\" },\r\n { value: 2, label: \"กุมภาพันธ์\" },\r\n { value: 3, label: \"มีนาคม\" },\r\n { value: 4, label: \"เมษายน\" },\r\n { value: 5, label: \"พฤษภาคม\" },\r\n { value: 6, label: \"มิถุนายน\" },\r\n { value: 7, label: \"กรกฎาคม\" },\r\n { value: 8, label: \"สิงหาคม\" },\r\n { value: 9, label: \"กันยายน\" },\r\n { value: 10, label: \"ตุลาคม\" },\r\n { value: 11, label: \"พฤศจิกายน\" },\r\n { value: 12, label: \"ธันวาคม\" },\r\n { value: 13, label: \"ตุลาคม \" + (nowYear - 1) + \" - มีนาคม \"+ nowYear},\r\n { value: 13, label: \"เมษายน \" + (nowYear) + \" - กันยายน \"+ nowYear}\r\n];\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst ReportAccess = (props) => {\r\n\r\n const paraMonth = (props.match.params.month !== undefined && props.match.params.month !== '') ? props.match.params.month : 0;\r\n\r\n const [optionsYear, setOptionsYear] = useState([]);\r\n const [tableHead, setTableHead] = useState([]);\r\n const [pageSize] = useState(30);\r\n const [data, setData] = useState([]);\r\n const windowWidth = useWindowWidth();\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [dateFocus, setDateFocus] = useState(false);\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [StartDatetime, setStartDatetime] = useState('');\r\n const [EndDatetime, setEndDatetime] = useState('');\r\n const [holidays, setHolidays] = useState([]);\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [month, setMonth] = useState(\"\");\r\n\r\n useEffect(() => {}, [currentPage])\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n return windowWidth;\r\n }\r\n\r\n useEffect(() => {\r\n tableHead.push(\"ชื่อ\", \"เวลา\");\r\n const now = new Date();\r\n setStartDatetime(now.toLocaleDateString(\"fr-CA\"));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if(StartDatetime !== ''){\r\n fetch(\r\n \"/api/dc/checkin/\" + StartDatetime + \"/\" + paraMonth +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([e.staffName, e.checkinDatetime]);\r\n });\r\n }\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [currentPage, StartDatetime]);\r\n\r\n function isDateValid(e, selectedDate) {\r\n var holiday = holidays.find(h => moment(h.holidayDate).format(\"YYYYMMDD\") === moment(e).format(\"YYYYMMDD\"))\r\n //return current.day() !== 0 && current.day() !== 6;\r\n if (holiday != null)\r\n return false\r\n else\r\n return (e.day() !== 0 && e.day() !== 6 && e > (new Date()).setDate((new Date().getDate() - 1)))\r\n }\r\n\r\n const handleStartDate = (date) => {\r\n setStartDatetime(date);\r\n }\r\n \r\n const handleHoliday = (txt) => {\r\n setHolidayText(txt);\r\n setModalHoliday(true);\r\n }\r\n\r\n function renderDay(props, currentDate, selectedDate) {\r\n var holiday = holidays.find(h => moment(h.holidayDate).format(\"YYYYMMDD\") === moment(currentDate).format(\"YYYYMMDD\"))\r\n var hdt = (holiday != null) ? holiday.name : '';\r\n\r\n if ((props.className.indexOf('rdtDisabled') >= 0) && (currentDate.day() !== 0 && currentDate.day() !== 6 && currentDate > (new Date()).setDate((new Date().getDate() - 1)))) {\r\n props.className += ' text-danger';\r\n return \r\n \r\n \r\n \r\n \r\n {paraMonth == 0 && ()} \r\n {paraMonth != 0 && ()} \r\n \r\n \r\n \r\n {paraMonth == 0 && (\r\n \r\n \r\n \r\n \r\n {year + 543}; }}\r\n //isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"วันที่เข้าห้อง Datacenter\", placeholder: \"วันที่เข้าห้อง Datacenter\", readOnly: 'readonly', \r\n style: { fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', \r\n background: '#ffffff', color: '#000000'}\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDate(e.format('YYYY-MM-DD'))} \r\n /> \r\n \r\n )}\r\n {paraMonth == 0 && (\r\n\r\n )}\r\n {/* {paraMonth != 0 && (\r\n )} */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {paraMonth == 0 && ( \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default ReportAccess;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport Table from \"components/Table/TableAdmin.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport CardFooter2 from \"components/Card/CardFooter.js\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport { Modal, ModalBody } from \"reactstrap\";\r\nimport axios from \"axios\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function Admin() {\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n\r\n const [l1Option, setL1Option] = useState([]);\r\n const [option1, setOption1] = useState(\"\");\r\n const [tableHead, setTableHead] = useState([]);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [currentPage2, setCurrentPage2] = useState(1);\r\n const [currentPage3, setCurrentPage3] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [totalPages2, setTotalPages2] = useState(1);\r\n const [totalPages3, setTotalPages3] = useState(1);\r\n const [pageSize] = useState(10);\r\n const [data, setData] = useState([]);\r\n const [data2, setData2] = useState([]);\r\n const [data3, setData3] = useState([]);\r\n const windowWidth = useWindowWidth();\r\n const [isEdit, setIsEdit] = useState(false);\r\n const [isAdd, setIsAdd] = useState(false);\r\n const [isEdit2, setIsEdit2] = useState(false);\r\n const [isAdd2, setIsAdd2] = useState(false);\r\n const [isEdit3, setIsEdit3] = useState(false);\r\n const [isAdd3, setIsAdd3] = useState(false);\r\n const [isDelete, setIsDelete] = useState(false);\r\n const [isDelete2, setIsDelete2] = useState(false);\r\n const [isDelete3, setIsDelete3] = useState(false);\r\n const [group2Id, setGroup2Id] = useState(0);\r\n const [group3Id, setGroup3Id] = useState(0);\r\n const [group4Id, setGroup4Id] = useState(0);\r\n const [name, setName] = useState(\"\");\r\n const [name2, setName2] = useState(\"\");\r\n const [name3, setName3] = useState(\"\");\r\n const [tag, setTag] = useState(\"\");\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError2, setModalError2] = useState(false);\r\n const [errMsg2, setErrMsg2] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [modalDelete, setModalDelete] = useState(false);\r\n\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL1Option(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL1Option(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n tableHead.push(\"ชื่อ\", \"แก้ไข\", \"ลบ\");\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (group2Id !== 0) {\r\n fetch(\"/api/v1/group2Id/\" + group2Id)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setName(result.data.groupName);\r\n setTag(result.data.tags);\r\n //console.log(result.data);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [isEdit, group2Id]);\r\n\r\n useEffect(() => {\r\n if (group3Id !== 0) {\r\n fetch(\"/api/v1/group3Id/\" + group3Id)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setName2(result.data.groupName);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [isEdit2, group3Id]);\r\n\r\n useEffect(() => {\r\n if (group4Id !== 0) {\r\n fetch(\"/api/v1/group4Id/\" + group4Id)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setName3(result.data.groupName);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [isEdit3, group4Id]);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\") {\r\n setName(\"\");\r\n setTag(\"\");\r\n setIsAdd(false);\r\n setIsDelete(false);\r\n setIsEdit(false);\r\n setGroup2Id(0);\r\n fetch(\r\n \"/api/v1/tableAdmin/\" +\r\n option1 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group1Id,\r\n e.group2Id\r\n ]);\r\n });\r\n setData(tableList);\r\n setIsEdit(false);\r\n setIsEdit2(false);\r\n setIsEdit3(false);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n } else {\r\n setData([]);\r\n setCurrentPage(1);\r\n setTotalPages(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [option1, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1 || option1 === 4) {\r\n fetch(\r\n \"/api/v1/tableAdmin2/\" +\r\n group2Id +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group2Id,\r\n e.group3Id\r\n ]);\r\n });\r\n setData2(tableList);\r\n setIsEdit2(false);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n } else {\r\n setData2([]);\r\n setCurrentPage2(1);\r\n setTotalPages2(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [isEdit, group2Id, currentPage2]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n fetch(\r\n \"/api/v1/tableAdmin3/\" +\r\n group3Id +\r\n \"/pagination?PageNumber=\" +\r\n currentPage3 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group3Id,\r\n e.group4Id\r\n ]);\r\n });\r\n setData3(tableList);\r\n setIsEdit3(false);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages3((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages3(1);\r\n } else {\r\n setTotalPages3(total);\r\n }\r\n } else {\r\n setData3([]);\r\n setCurrentPage3(1);\r\n setTotalPages3(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [isEdit2, group3Id, currentPage3]);\r\n\r\n const onEdit = e => {\r\n setIsEdit(e);\r\n setIsAdd(false);\r\n };\r\n\r\n const onDelete = e => {\r\n setIsDelete(e);\r\n setModalDelete(true);\r\n };\r\n\r\n const onSelected = e => {\r\n setGroup2Id(e);\r\n };\r\n\r\n const onEdit2 = e => {\r\n setIsEdit2(e);\r\n setIsAdd2(false);\r\n };\r\n\r\n const onDelete2 = e => {\r\n setIsDelete2(e);\r\n setModalDelete(true);\r\n };\r\n\r\n const onSelected2 = e => {\r\n setGroup3Id(e);\r\n };\r\n\r\n const onEdit3 = e => {\r\n setIsEdit3(e);\r\n setIsAdd3(false);\r\n };\r\n\r\n const onDelete3 = e => {\r\n setIsDelete3(e);\r\n setModalDelete(true);\r\n };\r\n\r\n const onSelected3 = e => {\r\n setGroup4Id(e);\r\n };\r\n\r\n const setBoth = () => {\r\n setIsAdd(true);\r\n setIsEdit(false);\r\n setIsEdit2(false);\r\n setIsEdit3(false);\r\n setGroup2Id(0);\r\n setGroup3Id(0);\r\n setGroup4Id(0);\r\n setName(\"\");\r\n setTag(\"\");\r\n };\r\n\r\n const setBoth2 = () => {\r\n setIsAdd2(true);\r\n setIsEdit2(false);\r\n setIsEdit3(false);\r\n setGroup3Id(0);\r\n setGroup4Id(0);\r\n setName2(\"\");\r\n };\r\n\r\n const setBoth3 = () => {\r\n setIsAdd3(true);\r\n setIsEdit3(false);\r\n setGroup4Id(0);\r\n setName3(\"\");\r\n };\r\n\r\n const getTable = () => {\r\n fetch(\r\n \"/api/v1/tableAdmin/\" +\r\n option1 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group1Id,\r\n e.group2Id\r\n ]);\r\n });\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n } else {\r\n setData([]);\r\n setCurrentPage(1);\r\n setTotalPages(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n };\r\n\r\n const getTable2 = () => {\r\n fetch(\r\n \"/api/v1/tableAdmin2/\" +\r\n group2Id +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group2Id,\r\n e.group3Id\r\n ]);\r\n });\r\n setData2(tableList);\r\n setIsEdit2(false);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages2((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages2(1);\r\n } else {\r\n setTotalPages2(total);\r\n }\r\n } else {\r\n setData2([]);\r\n setCurrentPage2(1);\r\n setTotalPages2(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n };\r\n\r\n const getTable3 = () => {\r\n fetch(\r\n \"/api/v1/tableAdmin3/\" +\r\n group3Id +\r\n \"/pagination?PageNumber=\" +\r\n currentPage3 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n result.data.forEach(e => {\r\n tableList.push([\r\n e.groupName,\r\n \"edit\",\r\n \"delete\",\r\n e.group3Id,\r\n e.group4Id\r\n ]);\r\n });\r\n setData3(tableList);\r\n setIsEdit3(false);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages3((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages3(1);\r\n } else {\r\n setTotalPages3(total);\r\n }\r\n } else {\r\n setData3([]);\r\n setCurrentPage3(1);\r\n setTotalPages3(1);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n };\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n return windowWidth;\r\n }\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (\r\n (name === null || name === \"\") &&\r\n ((isEdit && !isEdit2 && !isEdit3) || (isAdd && !isAdd2 && !isAdd3))\r\n ) {\r\n cntErr += 1;\r\n errMsg.push(รายชื่อผู้เข้าออกห้อง Datacenter
\r\nกรุณาเลือกวันที่
รายงานประจำเดือน
\r\n setMonth(e)}\r\n default={optionMonth[0]}\r\n />\r\n
\r\n รายชื่อผู้เข้าออกห้อง Datacenter
)}\r\n {paraMonth != 0 && (รายชื่อผู้เข้าออกห้อง Datacenter ประจำเดือน {optionMonth[paraMonth].label}
)}\r\n\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOption1(e)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {option1 !== 0 && option1 !== \"\" && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {(isEdit || isAdd) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setName(e)}\r\n value={name}\r\n />\r\n \r\n \r\n setTag(e)}\r\n value={tag}\r\n />\r\n \r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n \r\n {/* Error */}\r\n setModalError2(false)} isOpen={modalError2}>\r\n \r\n \r\n \r\n \r\n\r\n {(isDelete || isDelete2 || isDelete3) && (\r\n \r\n setModalDelete(false)} isOpen={modalDelete}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการลบข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {isEdit && !isAdd && (option1 === 1 || option1 === 4) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {(isEdit2 || isAdd2) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setName2(e)}\r\n value={name2}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {isEdit2 && !isAdd2 && option1 === 4 && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {(isEdit3 || isAdd3) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setName3(e)}\r\n value={name3}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport Backup from \"@material-ui/icons/Backup\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\nimport { blue, red } from \"@material-ui/core/colors\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const classes = useStyles();\r\n const { tableHead, tableData, tableHeaderColor } = props;\r\n\r\n const handleOpen = (e, name, id) => {\r\n onOpen(name, id);\r\n };\r\n\r\n function onOpen(name, id) {\r\n props.isOpen(true);\r\n props.name(name);\r\n props.reportId(id);\r\n }\r\n\r\n const handleCellClick = (name, id) => {\r\n onOpen(name, id);\r\n const fetchData = async () => {\r\n // const response = await fetch(\"/api/v1/data/\" + e[10], {\r\n // method: \"GET\"\r\n // });\r\n // const data = await response.json();\r\n };\r\n fetchData();\r\n };\r\n\r\n return (\r\n Welcome to
\r\n\r\n ปีงบประมาณ 2563\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg2}
\r\n \r\n setModalError2(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModalDelete(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\n\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n // tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport Table from \"components/Table/TableReport\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport Cancel from \"@material-ui/icons/Cancel\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport CardFooter2 from \"components/Card/CardFooter.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Subject from \"@material-ui/icons/Subject\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { Iso } from \"@material-ui/icons\";\r\nimport { blue, red } from \"@material-ui/core/colors\";\r\nimport axios from \"axios\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function Report() {\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [tableHead, setTableHead] = useState([]);\r\n const [pageSize] = useState(10);\r\n const [dataReport, setDataReport] = useState([]);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [name, setName] = useState(\"\");\r\n const [reportId, setReportId] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [icon, setIcon] = useState(\"fa fa-file\");\r\n const [year, setYear] = useState(\"\");\r\n const [oldOption1, setOldOption1] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [disable1, setDisable1] = useState(true);\r\n const [disable2, setDisable2] = useState(true);\r\n const [disable3, setDisable3] = useState(true);\r\n const [l1Option, setL1Option] = useState([]);\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [option1, setOption1] = useState(\"\");\r\n const [option2, setOption2] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [isShow, setIsShow] = useState(\"\");\r\n const [optionsYear, setOptionsYear] = useState([]);\r\n\r\n const windowWidth = useWindowWidth();\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n\r\n return windowWidth;\r\n }\r\n\r\n useEffect(() => {\r\n tableHead.push(\"ชื่อ\");\r\n\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n result.forEach(e => {\r\n optionsYear.push(e);\r\n });\r\n\r\n setYear(optionsYear[0].value);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(\r\n \"/api/v1/report/\" +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n var name;\r\n result.data.forEach(e => {\r\n name = e.reportName;\r\n tableList.push([name, e.isShow, e.id]);\r\n });\r\n }\r\n\r\n setDataReport(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, [currentPage]);\r\n\r\n const onOpen = e => {\r\n if (!isOpen) {\r\n setIsOpen(e);\r\n }\r\n // else {\r\n // setIsOpen(!e);\r\n // }\r\n };\r\n\r\n const onSetname = e => {\r\n setName(e);\r\n };\r\n\r\n const onSetReport = e => {\r\n setReportId(e);\r\n };\r\n\r\n const handleClose = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const handleConfirm = evt => {};\r\n\r\n const isCheck4 = () => {\r\n if (option1 !== oldOption1) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck5 = () => {\r\n if (option2 !== oldOption2) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck6 = () => {\r\n if (option3 !== oldOption3) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL1Option(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL1Option(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n }, []);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + option1)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2Option(result.data);\r\n // setDisable1(false);\r\n // setOldOption1(option1);\r\n // if (option1 !== oldOption1) {\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setDisable2(true);\r\n // setDisable3(true);\r\n // setL3Option([]);\r\n // setIsShow(false);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + option1)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2Option(res.data);\r\n setDisable1(false);\r\n setOldOption1(option1);\r\n if (option1 !== oldOption1) {\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setIsShow(false);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [option1]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1 || option1 === 4) {\r\n if (option2 !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setDisable2(false);\r\n setOldOption2(option2);\r\n if (option2 !== oldOption2) {\r\n setDisable3(true);\r\n setOption3(\"\");\r\n setIsShow(false);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n if (option2 !== \"\") {\r\n setOldOption2(option2);\r\n setIsShow(true);\r\n }\r\n }\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setDisable3(false);\r\n setOldOption3(option3);\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n setIsShow(false);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else if (option3 !== \"\") {\r\n setIsShow(true);\r\n }\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n if (option4 !== \"\") {\r\n setIsShow(true);\r\n }\r\n }, [option4]);\r\n\r\n const handleReport = evt => {\r\n // fetch(\r\n // \"/api/v1/report/export?group1=\" +\r\n // option1 +\r\n // \"&group2=\" +\r\n // option2 +\r\n // \"&group3=\" +\r\n // option3 +\r\n // \"&group4=\" +\r\n // option4 +\r\n // \"&year=\" +\r\n // year +\r\n // \"&id=\" +\r\n // reportId\r\n // )\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // if (result.data.length == 0) {\r\n // setModalError(true);\r\n // } else if (result.data[0].length === 17) {\r\n // excelData(result.data);\r\n // } else {\r\n // excelData2(result.data);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n \r\n axios.get(\"/api/v1/report/export?group1=\" +\r\n option1 +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4 +\r\n \"&year=\" +\r\n year +\r\n \"&id=\" +\r\n reportId)\r\n .then(\r\n result => {\r\n var data = result.data.data;\r\n if (data.length == 0) {\r\n setModalError(true);\r\n } else if (data[0].length === 17) {\r\n excelData(data);\r\n } else {\r\n excelData2(data);\r\n }\r\n },\r\n error => { alert(error); }\r\n );\r\n };\r\n\r\n const excelData = array => {\r\n var csv = \"\",\r\n row,\r\n cell;\r\n for (row = 0; row < array.length - 1; row++) {\r\n for (cell = 0; cell < array[row].length - 1; cell++) {\r\n csv += (array[row][cell] + \"\").replace(/[\\n\\t]+/g, \" \");\r\n if (cell + 1 < array[row].length - 1) csv += \"\\t\";\r\n }\r\n if (row + 1 < array.length - 1) csv += \"\\n\";\r\n }\r\n\r\n try {\r\n navigator.clipboard.writeText(csv);\r\n console.log(\"copy\");\r\n setModal(true);\r\n } catch (err) {\r\n console.log(\"fail copy\");\r\n }\r\n };\r\n\r\n const excelData2 = array => {\r\n var csv = \"\",\r\n row,\r\n cell;\r\n for (row = 0; row < array.length; row++) {\r\n for (cell = 0; cell < array[row].length; cell++) {\r\n csv += (array[row][cell] + \"\").replace(/[\\n\\t]+/g, \" \");\r\n if (cell + 1 < array[row].length) csv += \"\\t\";\r\n }\r\n if (row + 1 < array.length) csv += \"\\n\";\r\n }\r\n\r\n try {\r\n navigator.clipboard.writeText(csv);\r\n console.log(\"copy\");\r\n setModal(true);\r\n } catch (err) {\r\n console.log(\"fail copy\");\r\n }\r\n };\r\n\r\n const isCheckYear = () => {\r\n if (year === \"\") {\r\n return [optionsYear[0]];\r\n } else var value = optionsYear.filter(p => p.value === year);\r\n return [value[0]];\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {isOpen && (\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n \r\n \r\n handleClose()}\r\n >\r\n \r\n \r\n \r\n \r\n {\" \"}\r\n \r\n \r\n setYear(e)}\r\n default={optionsYear[0]}\r\n defaulfAdd={isCheckYear()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption1(e)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n disabled={disable1}\r\n defaulfAdd={isCheck4()}\r\n />\r\n \r\n \r\n \r\n {(option1 === 1 || option1 === 4) && (\r\n \r\n \r\n setOption3(e)}\r\n disabled={disable2}\r\n defaulfAdd={isCheck5()}\r\n />\r\n \r\n \r\n )}\r\n \r\n {option1 === 4 && (\r\n \r\n \r\n setOption4(e)}\r\n disabled={disable3}\r\n defaulfAdd={isCheck6()}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {isShow && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n )}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n {\"ไม่มีข้อมูลรายงาน\"}\r\n \r\n \r\n \r\n\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {\"Export ไว้ใน clipboard สำเร็จ\"}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport Table from \"components/Table/Table2.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport { CardFooter } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport CardFooter2 from \"components/Card/CardFooter.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Subject from \"@material-ui/icons/Subject\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport axios from \"axios\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function EditDashboard() {\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n\r\n const [l1OptionMain, setL1OptionMain] = useState([]);\r\n const [optionMain, setOptionMain] = useState(\"\");\r\n const [option1, setOption1] = useState(\"\");\r\n const [option2, setOption2] = useState(\"\");\r\n const [option2B, setOption2B] = useState(\"\");\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [option3B, setOption3B] = useState(\"\");\r\n const [option4B, setOption4B] = useState(\"\");\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [currentPage2, setCurrentPage2] = useState(1);\r\n const [tableHead, setTableHead] = useState([]);\r\n const [data, setData] = useState([]);\r\n const [tableHeadOther, setTableHeadOther] = useState([]);\r\n const [dataOther, setDataOther] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [select, setSelect] = useState([]);\r\n const [selected2, setSelected2] = useState([]);\r\n const [select2, setSelect2] = useState([]);\r\n const [l1Option, setL1Option] = useState([]);\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l2OptionB, setL2OptionB] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [l3OptionB, setL3OptionB] = useState([]);\r\n const [l4OptionB, setL4OptionB] = useState([]);\r\n const [disable1, setDisable1] = useState(true);\r\n const [disable2, setDisable2] = useState(true);\r\n const [disable3, setDisable3] = useState(true);\r\n const [disable1B, setDisable1B] = useState(true);\r\n const [disable2B, setDisable2B] = useState(true);\r\n const [disable3B, setDisable3B] = useState(true);\r\n const [oldOption1, setOldOption1] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [oldOption2B, setOldOption2B] = useState(\"\");\r\n const [oldOption3B, setOldOption3B] = useState(\"\");\r\n const [oldOption4B, setOldOption4B] = useState(\"\");\r\n const [pageSize] = useState(10);\r\n const [year, setYear] = useState([]);\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isOther, setIsOther] = useState(false);\r\n const [oldOptionMain, setOldOptionMain] = useState(\"\");\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const windowWidth = useWindowWidth();\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n\r\n return windowWidth;\r\n }\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModal(true);\r\n }\r\n };\r\n\r\n const handleToggle = evt => {\r\n setIsOther(!isOther);\r\n };\r\n\r\n const onSelected = e => {\r\n setSelected(e);\r\n };\r\n\r\n const onSelected2 = e => {\r\n setSelected2(e);\r\n };\r\n\r\n const isCheckMain = () => {\r\n if (optionMain !== oldOptionMain || option1 === 0) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck = () => {\r\n if (optionMain !== oldOptionMain) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck2 = () => {\r\n if (option2 !== oldOption2) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck3 = () => {\r\n if (option3 !== oldOption3) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck4 = () => {\r\n if (option1 !== oldOption1) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck2B = () => {\r\n if (option2B !== oldOption2B) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n const isCheck3B = () => {\r\n if (option3B !== oldOption3B) {\r\n return [{ value: \"\", label: \"\" }];\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n // fetch(\"/api/v1/group1\")\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL1OptionMain(result.data);\r\n // setL1Option(result.data);\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group1\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL1OptionMain(res.data);\r\n setL1Option(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n \r\n }, []);\r\n\r\n // useEffect(() => {\r\n // setOldOptionMain(optionMain);\r\n // if(optionMain !== oldOptionMain){\r\n // setIsOpen(true);\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setDisable2(true);\r\n // setDisable3(true);\r\n // setL3Option([]);\r\n // setData([]);\r\n // setDataOther([]);\r\n // }\r\n // }, [optionMain]);\r\n\r\n useEffect(() => {\r\n if (optionMain !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + optionMain)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2OptionB(result.data);\r\n // setDisable1B(false);\r\n // setOldOptionMain(optionMain);\r\n // if (optionMain !== oldOptionMain) {\r\n // setOption2B(\"\");\r\n // setOption3B(\"\");\r\n // setDisable2(true);\r\n // setDisable2B(true);\r\n // setDisable3B(true);\r\n // setL3OptionB([]);\r\n // setData([]);\r\n // if (oldOptionMain === \"\") {\r\n // setIsOpen(true);\r\n // } else {\r\n // //setIsOpen(false);\r\n // setOption1(0);\r\n // setOption2(0);\r\n // setOption3(0);\r\n // setOption4(0);\r\n // setData([]);\r\n // }\r\n // setDataOther([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + optionMain)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2OptionB(res.data);\r\n setDisable1B(false);\r\n setOldOptionMain(optionMain);\r\n if (optionMain !== oldOptionMain) {\r\n setOption2B(\"\");\r\n setOption3B(\"\");\r\n setDisable2(true);\r\n setDisable2B(true);\r\n setDisable3B(true);\r\n setL3OptionB([]);\r\n setData([]);\r\n if (oldOptionMain === \"\") {\r\n setIsOpen(true);\r\n } else {\r\n setOption1(0);\r\n setOption2(0);\r\n setOption3(0);\r\n setOption4(0);\r\n setData([]);\r\n }\r\n setDataOther([]);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [optionMain]);\r\n\r\n useEffect(() => {\r\n if (option1 !== \"\") {\r\n // fetch(\"/api/v1/group2/\" + option1)\r\n // .then(response => response.json())\r\n // .then(\r\n // result => {\r\n // setL2Option(result.data);\r\n // setDisable1(false);\r\n // setOldOption1(option1);\r\n // if (option1 !== oldOption1) {\r\n // setOption2(\"\");\r\n // setOption3(\"\");\r\n // setDisable2(true);\r\n // setDisable3(true);\r\n // setL3Option([]);\r\n // setData([]);\r\n // }\r\n // },\r\n // error => {\r\n // console.log(error);\r\n // }\r\n // );\r\n\r\n axios(\"/api/v1/group2/\" + option1)\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setL2Option(res.data);\r\n setDisable1(false);\r\n setOldOption1(option1);\r\n if (option1 !== oldOption1) {\r\n setOption2(\"\");\r\n setOption3(\"\");\r\n setDisable2(true);\r\n setDisable3(true);\r\n setL3Option([]);\r\n setData([]);\r\n }\r\n }, \r\n error => {\r\n console.log(error);\r\n }\r\n ); \r\n }\r\n }, [option1]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1 || option1 === 4) {\r\n if (option2 !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3Option(result.data);\r\n setDisable2(false);\r\n setOldOption2(option2);\r\n if (option2 !== oldOption2) {\r\n setDisable3(true);\r\n setOption3(\"\");\r\n setData([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption2(option2);\r\n }\r\n }, [option2]);\r\n\r\n useEffect(() => {\r\n if (optionMain === 1 || optionMain === 4) {\r\n if (option2B !== \"\") {\r\n fetch(\"/api/v1/subGroup3/\" + option2B)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL3OptionB(result.data);\r\n setDisable2B(false);\r\n setOldOption2B(option2B);\r\n if (option2B !== oldOption2B) {\r\n setDisable3B(true);\r\n setOption3B(\"\");\r\n setData([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n } else {\r\n setOldOption2B(option2B);\r\n }\r\n }, [option2B]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option3 !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4Option(result.data);\r\n setDisable3(false);\r\n setOldOption3(option3);\r\n if (option3 !== oldOption3) {\r\n setOption4(\"\");\r\n setData([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option3]);\r\n\r\n useEffect(() => {\r\n if (optionMain === 4) {\r\n if (option3B !== \"\") {\r\n fetch(\"/api/v1/subGroup4/\" + option3B)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setL4OptionB(result.data);\r\n setDisable3B(false);\r\n setOldOption3B(option3B);\r\n if (option3B !== oldOption3B) {\r\n setOption4B(\"\");\r\n setData([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option3B]);\r\n\r\n useEffect(() => {\r\n setOldOption4(option4);\r\n }, [option4]);\r\n\r\n useEffect(() => {\r\n setOldOption4B(option4B);\r\n }, [option4B]);\r\n\r\n useEffect(() => {\r\n if (option1 !== 1 && option1 !== 4) {\r\n // if (option2 !== \"\") {\r\n if (option2 !== oldOption2) {\r\n setCurrentPage(1);\r\n }\r\n\r\n fetch(\r\n \"/api/v1/tableSave/\" +\r\n option2 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n if (option2B !== \"\" && option2B !== oldOption2B) {\r\n setIsOpen(true);\r\n setOption1(0);\r\n }\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n optionMain +\r\n \"&group2=\" +\r\n option2B +\r\n \"&group3=\" +\r\n option3B +\r\n \"&group4=\" +\r\n option4B,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n !result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else if (selected.length > 0) {\r\n setSelect(selected);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n // }\r\n }, [option2, currentPage]);\r\n\r\n useEffect(() => {\r\n if (option1 === 1) {\r\n if (option3 !== \"\") {\r\n if (option3 !== oldOption3) {\r\n setCurrentPage(1);\r\n }\r\n fetch(\r\n \"/api/v1/table2Save/\" +\r\n option3 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // option3,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n optionMain +\r\n \"&group2=\" +\r\n option2B +\r\n \"&group3=\" +\r\n option3B +\r\n \"&group4=\" +\r\n option4B,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n !result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else if (selected.length > 0) {\r\n setSelect(selected);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option3, currentPage]);\r\n\r\n useEffect(() => {\r\n if (isOther) {\r\n fetch(\r\n \"/api/v1/tableOther/\" +\r\n \"/pagination?PageNumber=\" +\r\n currentPage2 +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n var name;\r\n result.data.forEach(e => {\r\n name = e.name;\r\n var dataId = e.dataOId;\r\n tableList.push([name, dataId]);\r\n });\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n optionMain +\r\n \"&group2=\" +\r\n option2B +\r\n \"&group3=\" +\r\n option3B +\r\n \"&group4=\" +\r\n option4B +\r\n \"&isOther=\" +\r\n true,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect2(result.data.reportSub);\r\n } else if (selected.length > 0) {\r\n setSelect(selected);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setDataOther(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }, [optionMain, isOther, option2B, option3B, option4B, currentPage2]);\r\n\r\n useEffect(() => {\r\n if (option1 === 4) {\r\n if (option4 !== \"\") {\r\n if (option4 !== oldOption4) {\r\n setCurrentPage(1);\r\n }\r\n fetch(\r\n \"/api/v1/table3Save/\" +\r\n option4 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n // if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName + \" \" + Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2.toFixed(2).toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2.toFixed(2).toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2.toFixed(2).toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2.toFixed(2).toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2.toFixed(2).toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2.toFixed(2).toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName + \" \" + Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n // } else {\r\n // tableList.push([\r\n // result.data[0].name,\r\n // result.data[0].typeName + \" \" + result.data[0].target,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // 0,\r\n // result.data[0].dataId,\r\n // option1,\r\n // option2,\r\n // option3,\r\n // option4,\r\n // result.data[0].tags\r\n // ]);\r\n // }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n optionMain +\r\n \"&group2=\" +\r\n option2B +\r\n \"&group3=\" +\r\n option3B +\r\n \"&group4=\" +\r\n option4B,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0 &&\r\n !result.data.isOther\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n } else if (selected.length > 0) {\r\n setSelect(selected);\r\n } else {\r\n setSelect([]);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n }\r\n }, [option4, currentPage]);\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n tableHead.push(\r\n \"\",\r\n \"ชื่อตัวชี้วัด\",\r\n \"ค่าเป้าหมาย\",\r\n result[5].label,\r\n result[4].label,\r\n result[3].label,\r\n result[2].label,\r\n result[1].label,\r\n result[0].label\r\n );\r\n setYear(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n tableHeadOther.push(\"\", \"ชื่อข้อมูล\");\r\n }, []);\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json-patch+json\"\r\n },\r\n body: JSON.stringify({\r\n selected: isOther ? selected2 : selected,\r\n option1: option1 === \"\" ? null : option1,\r\n option2: option2 === \"\" ? null : option2,\r\n option3: option3 === \"\" ? null : option3,\r\n option4: option4 === \"\" ? null : option4,\r\n option1Save: optionMain === \"\" ? null : optionMain,\r\n option2Save: option2B === \"\" ? null : option2B,\r\n option3Save: option3B === \"\" ? null : option3B,\r\n option4Save: option4B === \"\" ? null : option4B,\r\n isOther: isOther\r\n })\r\n };\r\n\r\n fetch(\"/api/v1/data/select\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n if (option2 !== \"\" && option3 === \"\") {\r\n fetch(\r\n \"/api/v1/tableSave/\" +\r\n option2 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n tags = e.tags;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n tags\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n e.tags\r\n ]);\r\n }\r\n }\r\n });\r\n } else {\r\n tableList.push([\r\n result.data[0].name,\r\n result.data[0].typeName + \" \" + result.data[0].target,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n result.data[0].dataId,\r\n option1,\r\n option2,\r\n result.data[0].tags\r\n ]);\r\n }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1 +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (option3 !== \"\" && option4 === \"\") {\r\n fetch(\r\n \"/api/v1/table2Save/\" +\r\n option3 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data);\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(\r\n e.listData[j].value2 === null\r\n ? 0\r\n : e.listData[j].value2.toFixed(2)\r\n );\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3\r\n ]);\r\n }\r\n }\r\n });\r\n } else {\r\n tableList.push([\r\n result.data[0].name,\r\n result.data[0].typeName + \" \" + result.data[0].target,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n result.data[0].dataId,\r\n option1,\r\n option2,\r\n option3\r\n ]);\r\n }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1 +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n } else if (option4 !== \"\") {\r\n fetch(\r\n \"/api/v1/table3Save/\" +\r\n option4 +\r\n \"/pagination?PageNumber=\" +\r\n currentPage +\r\n \"&PageSize=\" +\r\n pageSize\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n //setData(result.data)\r\n setIsOpen(true);\r\n var tableList = [];\r\n if (result.data.length > 0) {\r\n if (result.data[0].listData[0].key !== 0) {\r\n result.data.forEach(e => {\r\n if (e.listData.length < 6) {\r\n var l1 = [];\r\n var name;\r\n var target;\r\n var dataId;\r\n var tags;\r\n var j = 0;\r\n for (var i = 0; i < 6; i++) {\r\n if (\r\n e.listData[j] !== undefined &&\r\n e.listData[j].key.toString() === year[i].value\r\n ) {\r\n if (e.showId === 1) {\r\n l1 = l1.concat(e.listData[j].value2.toFixed(2));\r\n } else if (e.showId === 2) {\r\n l1 = l1.concat(e.listData[j].value);\r\n }\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n dataId = e.dataId;\r\n j++;\r\n } else {\r\n l1 = l1.concat(0);\r\n name = e.name;\r\n target =\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString();\r\n tags = e.tags;\r\n }\r\n }\r\n\r\n tableList.push([\r\n name,\r\n target,\r\n l1[5].toLocaleString(),\r\n l1[4].toLocaleString(),\r\n l1[3].toLocaleString(),\r\n l1[2].toLocaleString(),\r\n l1[1].toLocaleString(),\r\n l1[0].toLocaleString(),\r\n (dataId = e.listData[0].dataId),\r\n option1,\r\n option2,\r\n option3,\r\n option4\r\n ]);\r\n } else {\r\n if (e.showId === 1 || e.showId === 3) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value2\r\n .toFixed(2)\r\n .toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4\r\n ]);\r\n } else if (e.showId === 2 || e.showId === 4) {\r\n tableList.push([\r\n e.name,\r\n e.typeName +\r\n \" \" +\r\n Number(e.target).toLocaleString(),\r\n e.listData[5] === undefined\r\n ? 0\r\n : e.listData[5].value.toLocaleString(),\r\n e.listData[4] === undefined\r\n ? 0\r\n : e.listData[4].value.toLocaleString(),\r\n e.listData[3] === undefined\r\n ? 0\r\n : e.listData[3].value.toLocaleString(),\r\n e.listData[2] === undefined\r\n ? 0\r\n : e.listData[2].value.toLocaleString(),\r\n e.listData[1] === undefined\r\n ? 0\r\n : e.listData[1].value.toLocaleString(),\r\n e.listData[0] === undefined\r\n ? 0\r\n : e.listData[0].value.toLocaleString(),\r\n e.dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4\r\n ]);\r\n }\r\n }\r\n });\r\n } else {\r\n tableList.push([\r\n result.data[0].name,\r\n result.data[0].typeName + \" \" + result.data[0].target,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n result.data[0].dataId,\r\n option1,\r\n option2,\r\n option3,\r\n option4\r\n ]);\r\n }\r\n }\r\n\r\n fetch(\r\n \"/api/v1/checkReport?group1=\" +\r\n option1 +\r\n \"&group2=\" +\r\n option2 +\r\n \"&group3=\" +\r\n option3 +\r\n \"&group4=\" +\r\n option4,\r\n {\r\n method: \"GET\"\r\n }\r\n )\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var list = [];\r\n if (\r\n result.data.reportSub !== null &&\r\n result.data.reportSub.length > 0\r\n ) {\r\n result.data.reportSub.forEach(e => {\r\n list.push([e.dataId]);\r\n });\r\n setSelect(result.data.reportSub);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setData(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n };\r\n\r\n return (\r\n Simple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\n{name}
\r\nกรุณาเลือกหน่วยงาน
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOptionMain(e)}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption2B(e)}\r\n defaulfAdd={isCheck()}\r\n />\r\n \r\n \r\n \r\n {(optionMain === 1 || optionMain === 4) && (\r\n \r\n \r\n setOption3B(e)}\r\n disabled={disable2B}\r\n defaulfAdd={isCheck2B()}\r\n />\r\n \r\n \r\n )}\r\n \r\n {optionMain === 4 && (\r\n \r\n \r\n setOption4B(e)}\r\n disabled={disable3B}\r\n defaulfAdd={isCheck3B()}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n {isOpen && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n {isOpen && !isOther && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOption1(e)}\r\n defaulfAdd={isCheckMain()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n setOption2(e)}\r\n disabled={disable1}\r\n defaulfAdd={isCheck4()}\r\n />\r\n \r\n \r\n \r\n {(option1 === 1 || option1 === 4) && (\r\n \r\n \r\n setOption3(e)}\r\n disabled={disable2}\r\n defaulfAdd={isCheck2()}\r\n />\r\n \r\n \r\n )}\r\n \r\n {option1 === 4 && (\r\n \r\n \r\n setOption4(e)}\r\n disabled={disable3}\r\n defaulfAdd={isCheck3()}\r\n />\r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {isOpen && !isOther && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {isOther && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\n// import Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport avatar from \"assets/img/skin.png\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function UserProfile() {\r\n const classes = useStyles();\r\n return (\r\n Welcome to
\r\n\r\n ปีงบประมาณ 2563\r\n
\r\nWelcome to
\r\n\r\n ปีงบประมาณ 2563\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\nSimple Table
\r\n\r\n Here is a subtitle for this table\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n boxShadow,\r\n whiteColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst iconsStyle = {\r\n iframe: {\r\n width: \"100%\",\r\n height: \"500px\",\r\n border: \"0\",\r\n ...boxShadow\r\n },\r\n iframeContainer: {\r\n margin: \"0 -20px 0\"\r\n },\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(\" + hexToRgb(whiteColor) + \",.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: whiteColor\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: whiteColor,\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: grayColor[1],\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n }\r\n};\r\n\r\nexport default iconsStyle;\r\n","/*eslint-disable*/\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport AsyncSelect from 'react-select/async';\r\nimport TabGroup2 from \"components/Tabs/TabGroup2\";\r\nimport axios from \"axios\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport AssignmentInd from \"@material-ui/icons/AssignmentInd\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/views/iconsStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function SelectTest() {\r\n const [tap, setTap] = useState(checkTap());\r\n const [oldTap, setOldTap] = useState(\"\");\r\n const [l2Option, setL2Option] = useState([]);\r\n const [l3Option, setL3Option] = useState([]);\r\n const [l4Option, setL4Option] = useState([]);\r\n const [l5Option, setL5Option] = useState([]);\r\n const [option2, setOption2] = useState();\r\n const [option3, setOption3] = useState(\"\");\r\n const [option4, setOption4] = useState(\"\");\r\n const [option5, setOption5] = useState(\"\");\r\n const [oldOption4, setOldOption4] = useState(\"\");\r\n const [oldOption3, setOldOption3] = useState(\"\");\r\n const [oldOption2, setOldOption2] = useState(\"\");\r\n const [oldOption1, setOldOption1] = useState(\"\");\r\n const [defaultValue, setDefaultValue] = useState();\r\n const [value, setValue] = useState();\r\n const classes = useStyles();\r\n\r\n const onTap = e => {\r\n setOldTap(tap);\r\n setTap(e);\r\n };\r\n\r\n function checkTap() {\r\n return '1'\r\n }\r\n \r\n const options = [\r\n { value: \"ocean\", label: \"Ocean\", color: \"#00B8D9\", isFixed: true },\r\n { value: \"blue\", label: \"Blue\", color: \"#0052CC\", disabled: true },\r\n { value: \"purple\", label: \"Purple\", color: \"#5243AA\" },\r\n { value: \"red\", label: \"Red\", color: \"#FF5630\", isFixed: true },\r\n { value: \"orange\", label: \"Orange\", color: \"#FF8B00\" },\r\n { value: \"yellow\", label: \"Yellow\", color: \"#FFC400\" },\r\n { value: \"green\", label: \"Green\", color: \"#36B37E\" },\r\n { value: \"forest\", label: \"Forest\", color: \"#00875A\" },\r\n { value: \"slate\", label: \"Slate\", color: \"#253858\" },\r\n { value: \"silver\", label: \"Silver\", color: \"#666666\" }\r\n ];\r\n\r\n \r\n const loadOptions = (searchKey) => {\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n !defaultValue &&\r\n console.log(l2Option);\r\n if(l2Option.length == 0){\r\n axios.get(\r\n \"/api/v1/group2/\" + tap)\r\n .then(response => {\r\n setDefaultValue(response.data.data.find((o) => o.value === \"\"));\r\n const filtered = response.data.data.filter((o) => o.label.includes(searchKey));\r\n resolve(filtered);\r\n })\r\n .catch(err => {\r\n console.log(err);\r\n });\r\n } else {\r\n setDefaultValue(l2Option.find((o) => o.value === \"\"));\r\n const filtered = l2Option.filter((o) => o.label.includes(searchKey));\r\n resolve(filtered);\r\n }\r\n }, 5000);\r\n });\r\n };\r\n\r\n \r\n useEffect(() => {\r\n datasend();\r\n \r\n // axios(\"/api/v1/group2/\" + tap)\r\n // .then(\r\n // result2 => {\r\n // var res = result2.data;\r\n // setL2Option(res.data);\r\n // setOldOption1(tap);\r\n // console.log(l2Option);\r\n // console.log(oldOption1);\r\n // }, \r\n // error => {\r\n // console.log(error);\r\n // }\r\n // ); \r\n }, []);\r\n\r\n const datasend = async () => {\r\n await axios.get(\r\n \"/api/v1/group2/\" + tap)\r\n .then(response => {\r\n setL2Option(response.data.data);\r\n console.log(l2Option);\r\n })\r\n .catch(err => {\r\n console.log(err);\r\n });\r\n \r\n };\r\n\r\n useEffect(() => {\r\n\r\n }, [l2Option]);\r\n\r\n useEffect(() => {\r\n loadOptions(\"\");\r\n }, [tap]);\r\n\r\n useEffect(() => {\r\n setOption2(defaultValue);\r\n }, [defaultValue]);\r\n\r\n const onChange = (option) => setOption2(option);\r\n\r\n return (\r\n CONSULTANTS
\r\n\r\n นางนริศรา งามขจรวิวัฒน์ ผู้อำนวยการโรงพยาบาล\r\n
\r\n\r\n นายนพดล จริงจิตร ประธานคณะกรรมการพัฒนาคุณภาพโรงพยาบาล\r\n
\r\n\r\n นายสุตศรัญย์ พรึงลำภู ประธานคณะกรรมการสารสนเทศและจัดการความรู้\r\n
\r\n\r\n
PROJECT MANAGER
\r\n\r\n นายธงชัย ทำเผือก หัวหน้ากลุ่มงานดิจิทัลการแพทย์\r\n
\r\n\r\n
PROJECT TEAM
\r\n\r\n นายนิธิ ปานดำ นักวิชาการคอมพิวเตอร์ปฏิบัติการ\r\n
\r\n\r\n นายอรรณพ คงการ นักวิชาการคอมพิวเตอร์\r\n
\r\n\r\n นางสาวขวัญลดา บุญสิน นักวิชาการสถิติ\r\n
\r\n\r\n นางสาววรรณภา เกิดแก้ว เจ้าพนักงานธุรการ\r\n
\r\n\r\n
\r\n คณะกรรมการสารสนเทศและจัดการความรู้ (IM)\r\n
\r\n\r\n คณะกรรมการพัฒนาคุณภาพโรงพยาบาล (HA)\r\n
\r\n {/*\r\n Don{\"'\"}t be scared of the truth because we need to restart the\r\n human foundation in truth And I love you like Kanye loves Kanye\r\n I love Rick Owens’ bed design but the back is...\r\n
*/}\r\n {/* */}\r\nMaterial Design Icons
\r\n\r\n Handcrafted by our friends from{\" \"}\r\n
กรุณาเลือก
\r\n\r\n ตัวชี้วัด \r\n
\r\n\r\n
*/}\r\n \r\n
\r\n \r\n );\r\n}","import {\r\n primaryColor,\r\n whiteColor,\r\n primaryBoxShadow,\r\n defaultFont,\r\n blackColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst dropdownStyle = theme => ({\r\n buttonLink: {\r\n [theme.breakpoints.down(\"md\")]: {\r\n display: \"flex\",\r\n marginLeft: \"30px\",\r\n width: \"auto\"\r\n }\r\n },\r\n links: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n zIndex: \"4\",\r\n [theme.breakpoints.down(\"md\")]: {\r\n display: \"block\",\r\n width: \"30px\",\r\n height: \"30px\",\r\n color: grayColor[9],\r\n marginRight: \"15px\"\r\n }\r\n },\r\n linkText: {\r\n zIndex: \"4\",\r\n ...defaultFont,\r\n fontSize: \"14px\"\r\n },\r\n popperClose: {\r\n pointerEvents: \"none\"\r\n },\r\n pooperResponsive: {\r\n [theme.breakpoints.down(\"md\")]: {\r\n zIndex: \"1640\",\r\n position: \"static\",\r\n float: \"none\",\r\n width: \"auto\",\r\n marginTop: \"0\",\r\n backgroundColor: \"transparent\",\r\n border: \"0\",\r\n WebkitBoxShadow: \"none\",\r\n boxShadow: \"none\",\r\n color: \"black\"\r\n }\r\n },\r\n popperNav: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n position: \"static !important\",\r\n left: \"unset !important\",\r\n top: \"unset !important\",\r\n transform: \"none !important\",\r\n willChange: \"unset !important\",\r\n \"& > div\": {\r\n boxShadow: \"none !important\",\r\n marginLeft: \"0rem\",\r\n marginRight: \"0rem\",\r\n transition: \"none !important\",\r\n marginTop: \"0px !important\",\r\n marginBottom: \"0px !important\",\r\n padding: \"0px !important\",\r\n backgroundColor: \"transparent !important\",\r\n \"& ul li\": {\r\n color: whiteColor + \" !important\",\r\n margin: \"10px 15px 0!important\",\r\n padding: \"10px 15px !important\",\r\n \"&:hover\": {\r\n backgroundColor: \"hsla(0,0%,78%,.2)\",\r\n boxShadow: \"none\"\r\n }\r\n }\r\n }\r\n }\r\n },\r\n dropdown: {\r\n borderRadius: \"3px\",\r\n border: \"0\",\r\n boxShadow: \"0 2px 5px 0 rgba(\" + hexToRgb(blackColor) + \", 0.26)\",\r\n top: \"100%\",\r\n zIndex: \"1000\",\r\n minWidth: \"160px\",\r\n padding: \"5px 0\",\r\n margin: \"2px 0 0\",\r\n fontSize: \"14px\",\r\n textAlign: \"left\",\r\n listStyle: \"none\",\r\n backgroundColor: whiteColor,\r\n WebkitBackgroundClip: \"padding-box\",\r\n backgroundClip: \"padding-box\"\r\n },\r\n dropdownItem: {\r\n ...defaultFont,\r\n fontSize: \"13px\",\r\n padding: \"10px 20px\",\r\n margin: \"0 5px\",\r\n borderRadius: \"2px\",\r\n WebkitTransition: \"all 150ms linear\",\r\n MozTransition: \"all 150ms linear\",\r\n OTransition: \"all 150ms linear\",\r\n MsTransition: \"all 150ms linear\",\r\n transition: \"all 150ms linear\",\r\n display: \"block\",\r\n clear: \"both\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1.42857143\",\r\n color: grayColor[8],\r\n whiteSpace: \"nowrap\",\r\n height: \"unset\",\r\n minHeight: \"unset\",\r\n \"&:hover\": {\r\n backgroundColor: primaryColor[0],\r\n color: whiteColor,\r\n ...primaryBoxShadow\r\n }\r\n }\r\n});\r\n\r\nexport default dropdownStyle;\r\n","import {\r\n defaultFont,\r\n dangerColor,\r\n whiteColor\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nimport dropdownStyle from \"assets/jss/material-dashboard-react/dropdownStyle.js\";\r\n\r\nconst headerLinksStyle = theme => ({\r\n ...dropdownStyle(theme),\r\n search: {\r\n \"& > div\": {\r\n marginTop: \"0\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n margin: \"10px 15px !important\",\r\n float: \"none !important\",\r\n paddingTop: \"1px\",\r\n paddingBottom: \"1px\",\r\n padding: \"0!important\",\r\n width: \"60%\",\r\n marginTop: \"40px\",\r\n \"& input\": {\r\n color: whiteColor\r\n }\r\n }\r\n },\r\n linkText: {\r\n zIndex: \"4\",\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n margin: \"0px\"\r\n },\r\n buttonLink: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n display: \"flex\",\r\n margin: \"10px 15px 0\",\r\n width: \"-webkit-fill-available\",\r\n \"& svg\": {\r\n width: \"24px\",\r\n height: \"30px\",\r\n marginRight: \"15px\",\r\n marginLeft: \"-15px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n fontSize: \"24px\",\r\n lineHeight: \"30px\",\r\n width: \"24px\",\r\n height: \"30px\",\r\n marginRight: \"15px\",\r\n marginLeft: \"-15px\"\r\n },\r\n \"& > span\": {\r\n justifyContent: \"flex-start\",\r\n width: \"100%\"\r\n }\r\n }\r\n },\r\n searchButton: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"-50px !important\",\r\n marginRight: \"22px\",\r\n float: \"right\"\r\n }\r\n },\r\n margin: {\r\n zIndex: \"4\",\r\n margin: \"0\"\r\n },\r\n searchIcon: {\r\n width: \"17px\",\r\n zIndex: \"4\"\r\n },\r\n notifications: {\r\n zIndex: \"4\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n position: \"absolute\",\r\n top: \"2px\",\r\n border: \"1px solid \" + whiteColor,\r\n right: \"4px\",\r\n fontSize: \"9px\",\r\n background: dangerColor[0],\r\n color: whiteColor,\r\n minWidth: \"16px\",\r\n height: \"16px\",\r\n borderRadius: \"10px\",\r\n textAlign: \"center\",\r\n lineHeight: \"16px\",\r\n verticalAlign: \"middle\",\r\n display: \"block\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n marginRight: \"8px\"\r\n }\r\n },\r\n manager: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\"\r\n },\r\n display: \"inline-block\"\r\n },\r\n searchWrapper: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"-webkit-fill-available\",\r\n margin: \"10px 15px 0\"\r\n },\r\n display: \"inline-block\"\r\n }\r\n});\r\n\r\nexport default headerLinksStyle;\r\n","import React, { useState, useEffect } from \"react\";\r\n// import classNames from \"classnames\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// import MenuItem from \"@material-ui/core/MenuItem\";\r\n// import MenuList from \"@material-ui/core/MenuList\";\r\n// import Grow from \"@material-ui/core/Grow\";\r\n// import Paper from \"@material-ui/core/Paper\";\r\n// import ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\r\n// import Hidden from \"@material-ui/core/Hidden\";\r\n// import Poppers from \"@material-ui/core/Popper\";\r\n// import Divider from \"@material-ui/core/Divider\";\r\n// @material-ui/icons\r\n// import Person from \"@material-ui/icons/Person\";\r\n// import Notifications from \"@material-ui/icons/Notifications\";\r\n// import Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport Search from \"@material-ui/icons/Search\";\r\nimport { useHistory } from \"react-router-dom\";\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/components/headerLinksStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function AdminNavbarLinks() {\r\n const classes = useStyles();\r\n const [Search1, setSearch1] = useState([]);\r\n const [year, setYear] = useState([]);\r\n const history = useHistory();\r\n\r\n const handleClick = () => {\r\n // if(Search1 !== \"\" && Search1.length !== 0){\r\n // var obj1 = JSON.stringify(year[0]);\r\n // var obj2 = JSON.stringify(year[1]);\r\n // var obj3 = JSON.stringify(year[2]);\r\n // var obj4 = JSON.stringify(year[3]);\r\n // var obj5 = JSON.stringify(year[4]);\r\n // var obj6 = JSON.stringify(year[5]);\r\n\r\n // history.push(\"/admin/table?search=\" + Search1 +\r\n // \"&year1=\" +\r\n // obj1 +\r\n // \"&year2=\" +\r\n // obj2 +\r\n // \"&year3=\" +\r\n // obj3 +\r\n // \"&year4=\" +\r\n // obj4 +\r\n // \"&year5=\" +\r\n // obj5 +\r\n // \"&year6=\" +\r\n // obj6);\r\n // }\r\n };\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/year/\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setYear(result);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n}, []);\r\n\r\n // const [openNotification, setOpenNotification] = React.useState(null);\r\n // const [openProfile, setOpenProfile] = React.useState(null);\r\n // const handleClickNotification = event => {\r\n // if (openNotification && openNotification.contains(event.target)) {\r\n // setOpenNotification(null);\r\n // } else {\r\n // setOpenNotification(event.currentTarget);\r\n // }\r\n // };\r\n // const handleCloseNotification = () => {\r\n // setOpenNotification(null);\r\n // };\r\n // const handleClickProfile = event => {\r\n // if (openProfile && openProfile.contains(event.target)) {\r\n // setOpenProfile(null);\r\n // } else {\r\n // setOpenProfile(event.currentTarget);\r\n // }\r\n // };\r\n // const handleCloseProfile = () => {\r\n // setOpenProfile(null);\r\n // };\r\n return (\r\n \r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n \r\n
\r\n \r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-label=\"Dashboard\"\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n */}\r\n {/*
\r\n );\r\n}\r\n","import {\r\n defaultFont,\r\n dangerColor,\r\n whiteColor\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nimport dropdownStyle from \"assets/jss/material-dashboard-react/dropdownStyle.js\";\r\n\r\nconst headerLinksStyle = theme => ({\r\n ...dropdownStyle(theme),\r\n search: {\r\n \"& > div\": {\r\n marginTop: \"0\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n margin: \"10px 15px !important\",\r\n float: \"none !important\",\r\n paddingTop: \"1px\",\r\n paddingBottom: \"1px\",\r\n padding: \"0!important\",\r\n width: \"60%\",\r\n marginTop: \"40px\",\r\n \"& input\": {\r\n color: whiteColor\r\n }\r\n }\r\n },\r\n linkText: {\r\n zIndex: \"4\",\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n margin: \"0px\"\r\n },\r\n buttonLink: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n display: \"flex\",\r\n margin: \"10px 15px 0\",\r\n width: \"-webkit-fill-available\",\r\n \"& svg\": {\r\n width: \"24px\",\r\n height: \"30px\",\r\n marginRight: \"15px\",\r\n marginLeft: \"-15px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n fontSize: \"24px\",\r\n lineHeight: \"30px\",\r\n width: \"24px\",\r\n height: \"30px\",\r\n marginRight: \"15px\",\r\n marginLeft: \"-15px\"\r\n },\r\n \"& > span\": {\r\n justifyContent: \"flex-start\",\r\n width: \"100%\"\r\n }\r\n }\r\n },\r\n searchButton: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"-50px !important\",\r\n marginRight: \"22px\",\r\n float: \"right\"\r\n }\r\n },\r\n margin: {\r\n zIndex: \"4\",\r\n margin: \"0\"\r\n },\r\n searchIcon: {\r\n width: \"17px\",\r\n zIndex: \"4\"\r\n },\r\n notifications: {\r\n zIndex: \"4\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n position: \"absolute\",\r\n top: \"2px\",\r\n border: \"1px solid \" + whiteColor,\r\n right: \"4px\",\r\n fontSize: \"9px\",\r\n background: dangerColor[0],\r\n color: whiteColor,\r\n minWidth: \"16px\",\r\n height: \"16px\",\r\n borderRadius: \"10px\",\r\n textAlign: \"center\",\r\n lineHeight: \"16px\",\r\n verticalAlign: \"middle\",\r\n display: \"block\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n marginRight: \"8px\"\r\n }\r\n },\r\n manager: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"100%\"\r\n },\r\n display: \"inline-block\"\r\n },\r\n searchWrapper: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n width: \"-webkit-fill-available\",\r\n margin: \"10px 15px 0\"\r\n },\r\n display: \"inline-block\"\r\n }\r\n});\r\n\r\nexport default headerLinksStyle;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport MenuList from \"@material-ui/core/MenuList\";\r\nimport Grow from \"@material-ui/core/Grow\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport Poppers from \"@material-ui/core/Popper\";\r\n// @material-ui/icons\r\nimport Person from \"@material-ui/icons/Person\";\r\nimport Notifications from \"@material-ui/icons/Notifications\";\r\nimport Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport Search from \"@material-ui/icons/Search\";\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/components/rtlHeaderLinksStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function RTLNavbarLinks() {\r\n const classes = useStyles();\r\n const [open, setOpen] = React.useState(null);\r\n const handleToggle = event => {\r\n if (open && open.contains(event.target)) {\r\n setOpen(null);\r\n } else {\r\n setOpen(event.currentTarget);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(null);\r\n };\r\n\r\n return (\r\n \r\n setSearch1(e)}\r\n isSearch={true}\r\n />\r\n handleClick()}\r\n >\r\n
\r\n {/* Dashboard
\r\n\r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-owns={openNotification ? \"notification-menu-list-grow\" : null}\r\n aria-haspopup=\"true\"\r\n onClick={handleClickNotification}\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n \r\n \r\n {({ TransitionProps, placement }) => (\r\n \r\n \r\n \r\n \r\n \r\n Mike John responded to your email\r\n \r\n \r\n You have 5 new tasks\r\n \r\n \r\n You{\"'\"}re now friend with Andrew\r\n \r\n \r\n Another Notification\r\n \r\n \r\n Another One\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
*/}\r\n {/* \r\n Notification\r\n
\r\n\r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-owns={openProfile ? \"profile-menu-list-grow\" : null}\r\n aria-haspopup=\"true\"\r\n onClick={handleClickProfile}\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n \r\n \r\n {({ TransitionProps, placement }) => (\r\n \r\n \r\n \r\n \r\n \r\n Profile\r\n \r\n \r\n Settings\r\n \r\n \r\n Logout\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
*/}\r\n Profile
\r\n\r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-label=\"Dashboard\"\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n \r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-label=\"Person\"\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n container,\r\n defaultFont,\r\n primaryColor,\r\n defaultBoxShadow,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n whiteColor,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst headerStyle = () => ({\r\n appBar: {\r\n backgroundColor: \"transparent\",\r\n boxShadow: \"none\",\r\n borderBottom: \"0\",\r\n marginBottom: \"0\",\r\n position: \"absolute\",\r\n width: \"100%\",\r\n paddingTop: \"10px\",\r\n zIndex: \"1029\",\r\n color: grayColor[7],\r\n border: \"0\",\r\n borderRadius: \"3px\",\r\n padding: \"10px 0\",\r\n transition: \"all 150ms ease 0s\",\r\n minHeight: \"50px\",\r\n display: \"block\"\r\n },\r\n container: {\r\n ...container,\r\n minHeight: \"50px\"\r\n },\r\n flex: {\r\n flex: 1\r\n },\r\n title: {\r\n ...defaultFont,\r\n letterSpacing: \"unset\",\r\n lineHeight: \"30px\",\r\n fontSize: \"18px\",\r\n borderRadius: \"3px\",\r\n textTransform: \"none\",\r\n color: \"inherit\",\r\n margin: \"0\",\r\n \"&:hover,&:focus\": {\r\n background: \"transparent\"\r\n }\r\n },\r\n appResponsive: {\r\n top: \"8px\"\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow\r\n },\r\n info: {\r\n backgroundColor: infoColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow\r\n },\r\n success: {\r\n backgroundColor: successColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow\r\n }\r\n});\r\n\r\nexport default headerStyle;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\n// @material-ui/icons\r\nimport Menu from \"@material-ui/icons/Menu\";\r\n// core components\r\nimport AdminNavbarLinks from \"./AdminNavbarLinks.js\";\r\nimport RTLNavbarLinks from \"./RTLNavbarLinks.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/components/headerStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Header(props) {\r\n const classes = useStyles();\r\n function makeBrand() {\r\n var name;\r\n props.routes.map(prop => {\r\n if (window.location.href.indexOf(prop.layout + prop.path) !== -1) {\r\n name = props.rtlActive ? prop.rtlName : prop.name;\r\n }\r\n return null;\r\n });\r\n return name;\r\n }\r\n const { color } = props;\r\n const appBarClasses = classNames({\r\n [\" \" + classes[color]]: color\r\n });\r\n return (\r\n \r\n
\r\n آمارها
\r\n\r\n 959 ? \"transparent\" : \"white\"}\r\n justIcon={window.innerWidth > 959}\r\n simple={!(window.innerWidth > 959)}\r\n aria-owns={open ? \"menu-list-grow\" : null}\r\n aria-haspopup=\"true\"\r\n onClick={handleToggle}\r\n className={classes.buttonLink}\r\n >\r\n \r\n \r\n \r\n \r\n {({ TransitionProps, placement }) => (\r\n \r\n \r\n \r\n \r\n \r\n محمدرضا به ایمیل شما پاسخ داد\r\n \r\n \r\n شما ۵ وظیفه جدید دارید\r\n \r\n \r\n از حالا شما با علیرضا دوست هستید\r\n \r\n \r\n اعلان دیگر\r\n \r\n \r\n اعلان دیگر\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n اعلانها\r\n
\r\nحساب کاربری
\r\n\r\n {/* Here we create navbar brand, based on route name */}\r\n \r\n
\r\n - \r\n {routes.filter(p=>p.hidden==null || p.hidden == false).map((prop, key) => {\r\n var activePro = \" \";\r\n var listItemClasses;\r\n if (prop.path === \"/upgrade-to-pro\") {\r\n activePro = classes.activePro + \" \";\r\n listItemClasses = classNames({\r\n [\" \" + classes[color]]: true\r\n });\r\n } else {\r\n listItemClasses = classNames({\r\n [\" \" + classes[color]]: activeRoute(prop.layout + prop.path)\r\n });\r\n }\r\n const whiteFontClasses = classNames({\r\n [\" \" + classes.whiteFont]: activeRoute(prop.layout + prop.path)\r\n });\r\n return (\r\n
\r\n \r\n
\r\n\r\n\r\n );\r\n return (\r\n \r\n 
\r\n
\r\n \r\n {logoText}\r\n \r\n \r\n \r\n \r\n \r\n {brand}\r\n \r\n \r\n \r\n {brand}\r\n \r\n
\r\n );\r\n}\r\n\r\nSidebar.propTypes = {\r\n rtlActive: PropTypes.bool,\r\n handleDrawerToggle: PropTypes.func,\r\n bgColor: PropTypes.oneOf([\"purple\", \"blue\", \"green\", \"orange\", \"red\"]),\r\n logo: PropTypes.string,\r\n image: PropTypes.string,\r\n logoText: PropTypes.string,\r\n routes: PropTypes.arrayOf(PropTypes.object),\r\n open: PropTypes.bool\r\n};\r\n","/*eslint-disable*/\r\nimport React, { Component } from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// nodejs library that concatenates classes\r\nimport classnames from \"classnames\";\r\n\r\nimport imagine1 from \"assets/img/sidebar-1.jpg\";\r\nimport imagine2 from \"assets/img/sidebar-2.jpg\";\r\nimport imagine3 from \"assets/img/sidebar-3.jpg\";\r\nimport imagine4 from \"assets/img/sidebar-4.jpg\";\r\n\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nexport default function FixedPlugin(props) {\r\n const [classes, setClasses] = React.useState(\"dropdown show\");\r\n const [bg_checked, setBg_checked] = React.useState(true);\r\n const [bgImage, setBgImage] = React.useState(props.bgImage);\r\n const handleClick = () => {\r\n props.handleFixedClick();\r\n };\r\n return (\r\n \r\n {props.rtlActive ?
\r\n {image !== undefined ? (\r\n {links}
\r\n {image !== undefined ? (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nFixedPlugin.propTypes = {\r\n bgImage: PropTypes.string,\r\n handleFixedClick: PropTypes.func,\r\n rtlActive: PropTypes.bool,\r\n fixedClasses: PropTypes.string,\r\n bgColor: PropTypes.oneOf([\"purple\", \"blue\", \"green\", \"orange\", \"red\"]),\r\n handleColorClick: PropTypes.func,\r\n handleImageClick: PropTypes.func\r\n};\r\n","import {\r\n drawerWidth,\r\n transition,\r\n container\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst appStyle = theme => ({\r\n wrapper: {\r\n position: \"relative\",\r\n top: \"0\",\r\n height: \"100vh\"\r\n },\r\n mainPanel: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerWidth}px)`\r\n },\r\n overflow: \"auto\",\r\n position: \"relative\",\r\n float: \"right\",\r\n ...transition,\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n overflowScrolling: \"touch\"\r\n },\r\n content: {\r\n marginTop: \"70px\",\r\n padding: \"30px 15px\",\r\n minHeight: \"calc(100vh - 123px)\"\r\n },\r\n container,\r\n map: {\r\n marginTop: \"70px\"\r\n }\r\n});\r\n\r\nexport default appStyle;\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\n\r\nimport routes from \"routes.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nlet ps;\r\n\r\nconst switchRoutes = (\r\n \r\n \r\n
\r\n - \r\n
- SIDEBAR FILTERS \r\n
- \r\n \r\n \r\n\r\n \r\n \r\n
- Images \r\n
- \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n\r\n - \r\n \r\n\r\n \r\n
- \r\n \r\n\r\n \r\n
- \r\n
\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Build } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Request from \"views/Repair/Request.js\";\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"ขอแจ้งซ่อม\",\r\n icon: Build,\r\n component: Request,\r\n layout: \"/repair\",\r\n path: \"/request\",\r\n },\r\n];\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n
\r\n );\r\n}\r\n","import {\r\n primaryColor,\r\n blackColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst checkboxAdnRadioStyle = {\r\n root: {\r\n padding: \"13px\",\r\n \"&:hover\": {\r\n backgroundColor: \"unset\"\r\n }\r\n },\r\n labelRoot: {\r\n marginLeft: \"-14px\"\r\n },\r\n checked: {\r\n color: primaryColor[0] + \"!important\"\r\n },\r\n checkedIcon: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n border: \"1px solid rgba(\" + hexToRgb(blackColor) + \", .54)\",\r\n borderRadius: \"3px\"\r\n },\r\n uncheckedIcon: {\r\n width: \"0px\",\r\n height: \"0px\",\r\n padding: \"10px\",\r\n border: \"1px solid rgba(\" + hexToRgb(blackColor) + \", .54)\",\r\n borderRadius: \"3px\"\r\n },\r\n radio: {\r\n color: primaryColor[0] + \"!important\"\r\n },\r\n radioChecked: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n border: \"1px solid \" + primaryColor[0],\r\n borderRadius: \"50%\"\r\n },\r\n radioUnchecked: {\r\n width: \"0px\",\r\n height: \"0px\",\r\n padding: \"10px\",\r\n border: \"1px solid rgba(\" + hexToRgb(blackColor) + \", .54)\",\r\n borderRadius: \"50%\"\r\n }\r\n};\r\n\r\nexport default checkboxAdnRadioStyle;\r\n","import React, { useState } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Radio from \"@material-ui/core/Radio\";\r\n// @material-ui/icons\r\nimport FiberManualRecord from \"@material-ui/icons/FiberManualRecord\";\r\n//core components\r\nimport styles from \"assets/jss/material-dashboard-react/checkboxAdnRadioStyle.js\";\r\nimport Label from \"reactstrap/lib/Label\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst TSRadio = props => {\r\n const classes = useStyles();\r\n const [selectedValue, setSelectedValue] = React.useState(null);\r\n\r\n const [options, setOptions] = useState(\r\n props.options !== \"undefined\" ? props.options : []\r\n );\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n {options.map(key => (\r\n <>\r\n \r\n \r\n ))}\r\n\r\n {/*\r\n setSelectedValue(\"b\")}\r\n value=\"b\"\r\n name=\"radio button demo\"\r\n aria-label=\"B\"\r\n icon={
\r\n );\r\n};\r\n\r\nexport default TSRadio;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\nimport \"./custom-style.css\";\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst Request = (props) => {\r\n\r\n const [RepairTypeKey, setRepairTypeKey] = useState(null);\r\n const [RepairSubTypeKey, setRepairSubTypeKey] = useState(null);\r\n\r\n const [AssetKey, setAssetKey] = useState(null);\r\n const [AssetCode, setAssetCode] = useState('');\r\n const [AssetName, setAssetName] = useState('');\r\n const [RepairNote, setRepairNote] = useState('');\r\n\r\n const [isCheckAsset, setIsCheckAsset] = useState(false);\r\n\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const urgentList = [{ label:\"ปกติ\", value:0}, { label:\"ด่วน\", value:1} , { label:\"ฉุกเฉิน\", value:2}];\r\n\r\n const myRef = useRef(null);\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n console.log(RepairTypeKey)\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n /*\r\n if (name === null || name === \"\") {\r\n cntErr += 1;\r\n errMsg.push(\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n setRepairTypeKey(e.value) } />\r\n \r\n setRepairSubTypeKey(e.value)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n (!isCheckAsset) ? \r\n <>\r\n setAssetKey(e.value)} />\r\n \r\n setAssetCode(e.target.value)} />\r\n \r\n \r\n :\r\n setAssetName(e.target.value)} />\r\n \r\n }\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default Request;","/* eslint-disable react/prop-types */\r\n/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport {\r\n Input,\r\n Label,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\nimport Select from \"react-select\";\r\nconst TSSelectMultiple = props => {\r\n const [value, setValue] = useState((props.value != null) ? props.value : []);\r\n const [label, setLabel] = useState((props.label != null) ? props.label : '');\r\n const [type, setType] = useState((props.type != null) ? props.type : 'select');\r\n const [placeholder, setPlaceholder] = useState((props.placeholder != null) ? props.placeholder : '');\r\n const [icon, setIcon] = useState('');\r\n\r\n const [options, setOptions] = useState((props.options !== \"undefined\") ? props.options : []);\r\n const [styles, setStyles] = useState((props.styles !== \"undefined\") ? props.styles : null);\r\n const [isRequire, setIsRequire] = useState(props.isRequire);\r\n const [isDisabled, setIsDisabled] = useState(props.isDisabled);\r\n const [zIndex, setzIndex] = useState((props.zIndex != null) ? props.zIndex : 'null');\r\n const [defaultValue, setDefaultValue] = useState([]/*{ label: null, value: null }*/);\r\n\r\n useEffect(() => {\r\n\r\n if (props.options != null) {\r\n setValue(props.value);\r\n }\r\n\r\n }, [props.value]);\r\n\r\n function handleChange(e) {\r\n var val = (e != null ) ? e.value : null;\r\n if (props.onChange) {\r\n props.onChange(e);\r\n setValue(val);\r\n }\r\n }\r\n\r\n const customStyles = {\r\n container: (base) => ({ ...base, zIndex: zIndex }),\r\n control: (base) => ({ ...base, /*padding: '12px 5px',*/ marginBottom: '10px', border: (false? \"red solid 1px\" : \"\") }),\r\n menu: (base) => ({ ...base,zIndex: 2, textAlign: 'left', fontSize: '1.2em' }),\r\n singleValue: (base) => ({ ...base, fontSize: '1.2em' }),\r\n}\r\n return (\r\n \r\n แบบฟอร์มขอแจ้งซ่อม
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setRepairNote(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n {(label != \"\") ? :<>}\r\n
\r\n );\r\n};\r\n\r\nexport default TSSelectMultiple;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport Hidden from '@material-ui/core/Hidden';\r\nimport { PDFViewer, PDFDownloadLink, Page, Text, View, Document, StyleSheet, Font, Svg, Polygon, Line } from 'react-pdf-renderer-v2';\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { login, logoff,loadUserFromStorage } from \"_services/oauth\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"../../views/Leave/custom-style.css\"\r\nFont.register({\r\n family: 'thsarabun',\r\n src: '../thsarabun.ttf'\r\n});\r\n \r\nFont.register({\r\n family: 'thsarabunbold',\r\n src: '../thsarabunbold.ttf'\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n body: {\r\n paddingTop: 20,\r\n paddingBottom: 20,\r\n paddingHorizontal: 30,\r\n },\r\n title: {\r\n fontSize: 22,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n author: {\r\n fontSize: 16,\r\n textAlign: 'right',\r\n fontFamily: 'thsarabun'\r\n },\r\n subtitle: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabunbold',\r\n },\r\n subtitle2: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabun',\r\n },\r\n textBold: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n text: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun',\r\n },\r\n text14: {\r\n fontSize: 14,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun'\r\n },\r\n textCenter: {\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n image: {\r\n marginVertical: 15,\r\n marginHorizontal: 100,\r\n },\r\n header: {\r\n fontSize: 12,\r\n marginBottom: 20,\r\n textAlign: 'center',\r\n color: 'grey',\r\n fontFamily: 'thsarabun'\r\n },\r\n pageNumber: {\r\n position: 'absolute',\r\n fontSize: 12,\r\n bottom: 30,\r\n left: 0,\r\n right: 0,\r\n textAlign: 'center',\r\n color: 'grey',\r\n },\r\n\r\n row: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n marginTop: 10,\r\n },\r\n left: {\r\n // width: '33%',//<- working alternative\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n right: {\r\n // width: '66%', //<- working alternative\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n table: {\r\n display: \"table\",\r\n width: \"auto\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderRightWidth: 0,\r\n borderBottomWidth: 0\r\n },\r\n tableRow: {\r\n margin: \"auto\",\r\n flexDirection: \"row\"\r\n },\r\n tableCol: {\r\n width: \"25%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableColMerge: {\r\n width: \"100%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableCell: {\r\n\r\n marginTop: 5,\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n checkbox: {\r\n height: 21,\r\n width: 31,\r\n display: 'inline-block',\r\n marginTop: -3,\r\n marginRight: -15\r\n },\r\n box: {\r\n points: \"5,10 15,10 15,20 5,20\",\r\n stroke: \"black\",\r\n strokeWidth: 1,\r\n },\r\n\r\n\r\n\r\n});\r\n\r\n\r\n\r\nconst TSLeaveForm = props => {\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const [LeaveRequestID, setLeaveRequestID] = useState('');\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(null);\r\n const [LeaveTypeName, setLeaveTypeName] = useState(null);\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [EnabledUrgent, setEnabledUrgent] = useState(false);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [StartType, setStartType] = useState(0);\r\n\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [CreateDT, setCreateDT] = useState(\"\");\r\n const [EndType, setEndType] = useState(0);\r\n const [LeaveReason, setLeaveReason] = useState('');\r\n\r\n const [ContactAddress, setContactAddress] = useState('');\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n const [TotalDate, setTotalDate] = useState(1);\r\n const [TotalHistory, setTotalHistory] = useState(0);\r\n const [TotalAll, setTotalAll] = useState(0);\r\n const [RequestBefore, setRequestBefore] = useState(0);\r\n const [Accrued, setAccrued] = useState(0);\r\n const [MaxOnly, setMaxOnly] = useState(0);\r\n const [FullName, setFullName] = useState('');\r\n const [PositionName, setPositionName] = useState('');\r\n const [TypeGovName, setTypeGovName] = useState('');\r\n\r\n\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n\r\n const [ArrLeaveType, setArrLeaveType] = useState([]);\r\n const [ArrStandin, setArrStandin] = useState([]);\r\n const [ArrDepartmentBoss, setArrDepartmentBoss] = useState([]);\r\n const [ArrGroupworkBoss, setArrGroupworkBoss] = useState([]);\r\n const [ArrMissionBoss, setArrMissionBoss] = useState([]);\r\n const [LeaveApprove, setLeaveApprove] = useState([]);\r\n\r\n const [FlowLevel, setFlowLevel] = useState([]);\r\n\r\n const [LeaveHistory, SetLeaveHistory] = useState(\"\");\r\n\r\n const [Standin, SetStandin] = useState(\"\");\r\n const [DepartmentBoss, SetDepartmentBoss] = useState(\"\");\r\n const [GroupworkBoss, SetGroupworkBoss] = useState(\"\");\r\n const [MissionBoss, SetMissionBoss] = useState(\"\");\r\n const [HR, SetHR] = useState(\"\");\r\n const [Director, SetDirector] = useState(\"\");\r\n\r\n const [StandinTxt, SetStandinTxt] = useState(\"\");\r\n const [DepartmentBossTxt, SetDepartmentBossTxt] = useState(\"\");\r\n const [GroupworkBossTxt, SetGroupworkBossTxt] = useState(\"\");\r\n const [MissionBossTxt, SetMissionBossTxt] = useState(\"\");\r\n const [HRTxt, SetHRTxt] = useState(\"\");\r\n const [DirectorTxt, SetDirectorTxt] = useState(\"\");\r\n\r\n const [StandinApprove, setStandinApprove] = useState(null);\r\n const [DepartmentApprove, setDepartmentApprove] = useState(null);\r\n const [GroupworkApprove, setGroupworkApprove] = useState(null);\r\n const [MissionApprove, setMissionApprove] = useState(null);\r\n const [HRApprove, setHRApprove] = useState(null);\r\n const [DirectorApprove, setDirectorApprove] = useState(null);\r\n\r\n const [IsDirector, setIsDirector] = useState(false);\r\n\r\n const [LeaveHisText, SetLeaveHisText] = useState(\"\");\r\n\r\n\r\n const [GroupText, SetGroupText] = useState(\"\");\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isEdit, setIsEdit] = useState(false);\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label:\"ปกติ\", value:0}, { label:\"ด่วน\", value:1} , { label:\"ฉุกเฉิน\", value:2}];\r\n const dateTypeList = [{ label:\"ทั้งวัน\", value:0}, { label:\"ครึ่งวันเช้า\", value:1} , { label:\"ครึ่งวันบ่าย\", value:2}];\r\n const dateTypeList2 = [{ label:\"ทั้งวัน\", value:0}, { label:\"ครึ่งวันเช้า\", value:1} ];\r\n\r\n\r\nuseEffect(() => {\r\n\r\n setLeaveRequestID(props.LeaveRequestID !== null ? props.LeaveRequestID : '')\r\n setIsEdit(props.LeaveRequestID !== null && props.LeaveRequestID != '');\r\n\r\n\r\n if(props.LeaveRequestID != null && props.LeaveRequestID != '' )\r\n {\r\n var _alt = [];\r\n axios.post(\"/api/v1/leave/type\", { \"IsApprove\": true, \"LeaveRequestID\": \r\n //(isEdit ? LeaveRequestID: '00000000-0000-0000-0000-000000000000')})\r\n (props.LeaveRequestID)})\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":')*/);\r\n setArrLeaveType(json)\r\n _alt = json;\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios.post(\"/api/v1/myteam\", {userName: \"\" })\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"firstName\":').join('\"label\":').split('\"userName\":').join('\"value\":')*/);\r\n \r\n const myteam = json.map((o) => ({\r\n ...o,\r\n value: o.userName,\r\n label: `${o.userProfile.firstName} ${o.userProfile.lastName}`\r\n }));\r\n \r\n const jsonMy = myteam.filter(e => e.userName == result.data.userName)[0];\r\n\r\n if(!isEdit){\r\n setContactPhone(jsonMy.userProfile.mobilePhone);\r\n setContactAddress(jsonMy.userProfile.address);\r\n }\r\n\r\n const jsonStanin = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey != 3)\r\n setArrStandin(jsonStanin)\r\n\r\n const jsonDept = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 1 && jsonMy.userLevelKey < 1 /*e.userLevelKey == jsonMy.userLevelKey*/)\r\n setArrDepartmentBoss(jsonDept)\r\n\r\n const jsonGroup = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 2 && jsonMy.userLevelKey < 2)\r\n setArrGroupworkBoss(jsonGroup)\r\n\r\n const jsonMission = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 || e.userLevelKey == 3))\r\n setArrMissionBoss(jsonMission)\r\n\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/lastleave/\" + props.LeaveRequestID,\r\n //headers: { 'referpage': '/leave/request/' + props.LeaveRequestID }\r\n })\r\n .then(\r\n resEdit => {\r\n SetLeaveHisText(resEdit.data.data)\r\n },\r\n error => {\r\n\r\n }\r\n ); \r\n \r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/leave/\" + props.LeaveRequestID,\r\n headers: { 'referpage': '/leave/request/' + props.LeaveRequestID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res=resEdit.data.data;\r\n setLeaveTypeKey(res.leaveTypeKey)\r\n \r\n var _leaveText = (_alt != \"\") ? _alt.find(t => t.value == res.leaveTypeKey).label : \"\";\r\n setLeaveTypeName(_leaveText)\r\n\r\n setStartDate(moment(res.startDate).format('YYYY-MM-DD').toString())\r\n setStartType(res.startDateType)\r\n setEndDate(moment(res.endDate).format('YYYY-MM-DD').toString())\r\n setEndType(res.endDateType)\r\n\r\n\r\n setIsUrgent(res.isUrgent)\r\n\r\n setCreateDT(moment(res.createDT).format('YYYY-MM-DD').toString())\r\n\r\n //handleLeaveType(_alt, res.leaveTypeKey, moment(res.startDate))\r\n //ให้ดึงสถิติจากที่บันทึกใน record (ไม่คำนวนใหม่เพราะจะสับสน) คำนวนใหม่เมื่อต้องการจะแก้ไข และเลือกวันใหม่\r\n var his = _alt.find(t => t.leaveTypeKey == res.leaveTypeKey);\r\n //console.log(his)\r\n var txt = 'ใช้วันลาแล้ว '; \r\n var dt = (moment(res.startDate).isValid()) ? moment(res.startDate) : moment();\r\n \r\n if(his != null){\r\n if(his.maxLeave != null && his.maxLeave > 0) {\r\n txt += res.totalHistory + '/'+ res.totalAll + ' วัน';\r\n }\r\n else{\r\n if(dt.format('M') >=4 && dt.format('M') <= 9){\r\n txt += res.totalHistory + '/'+ res.totalAll + ' วัน (ครึ่งปีหลัง)'; \r\n } \r\n else{\r\n txt += res.totalHistory + '/'+ res.totalAll+ ' วัน (ครึ่งปีแรก)';\r\n }\r\n }\r\n \r\n setTotalHistory(res.totalHistory);\r\n setTotalAll(res.totalAll);\r\n\r\n setAccrued(his.accrued)\r\n setMaxOnly(his.maxOnly)\r\n \r\n setEnabledUrgent(his.enabledUrgent == 1)\r\n setRequestBefore(his.requestBefore)\r\n SetLeaveHistory(txt);\r\n\r\n }\r\n\r\n setFullName(res.userView.titleName+res.userView.firstName+' '+res.userView.lastName)\r\n\r\n var group = res.userView.userDepartment.find(t => t.isDefault == true);\r\n \r\n var _dep = (group != null && group.department != null) ? group.department : '';\r\n var _gw = (_dep != null && _dep.groupWork != null) ? _dep.groupWork : '';\r\n var _mission = (_gw != null && _gw.mission != null) ? _gw.mission : '';\r\n\r\n var fullText = _dep.name+' '+ _gw.name+' '+_mission.name;\r\n\r\n SetGroupText(fullText)\r\n\r\n setPositionName(res.userView.positionName)\r\n setTypeGovName(res.userView.typeGov.name)\r\n\r\n setLeaveReason(res.leaveDesc)\r\n\r\n setContactAddress(res.contactAddress)\r\n setContactPhone(res.contactPhone)\r\n\r\n setTotalDate(res.totalDate)\r\n\r\n setIsMoreDate(moment(res.startDate) != moment(res.endDate))\r\n\r\n var _standin = res.leaveApprove.find(t => t.approveTypeKey == 5);\r\n if (_standin != null) {\r\n SetStandin(_standin.approveUserName);\r\n SetStandinTxt((_standin.userView.titleName != null ? _standin.userView.titleName : '') + _standin.userView.firstName + ' ' + _standin.userView.lastName);\r\n setStandinApprove(_standin);\r\n }\r\n \r\n var _dept = res.leaveApprove.find(t => t.approveTypeKey == 4);\r\n if (_dept != null) {\r\n SetDepartmentBoss(_dept.approveUserName);\r\n SetDepartmentBossTxt((_dept.userView.titleName != null ? _dept.userView.titleName : '') + _dept.userView.firstName + ' ' + _dept.userView.lastName);\r\n setDepartmentApprove(_dept);\r\n }\r\n\r\n var _gw = res.leaveApprove.find(t => t.approveTypeKey == 3);\r\n if (_gw != null) {\r\n SetGroupworkBoss(_gw.approveUserName);\r\n SetGroupworkBossTxt((_gw.userView.titleName != null ? _gw.userView.titleName : '') + _gw.userView.firstName + ' ' + _gw.userView.lastName);\r\n setGroupworkApprove(_gw);\r\n }\r\n\r\n var _mission = res.leaveApprove.find(t => t.approveTypeKey == 2);\r\n if (_mission != null) {\r\n SetMissionBoss(_mission.approveUserName);\r\n SetMissionBossTxt((_mission.userView.titleName != null ? _mission.userView.titleName : '') + _mission.userView.firstName + ' ' + _mission.userView.lastName);\r\n setMissionApprove(_mission);\r\n }\r\n\r\n\r\n var _hr = res.leaveApprove.find(t => t.approveTypeKey == 0);\r\n if (_hr != null) {\r\n SetHR(_hr.approveUserName);\r\n SetHRTxt((_hr.userView.titleName != null ? _hr.userView.titleName : '') + _hr.userView.firstName + ' ' + _hr.userView.lastName);\r\n setHRApprove(_hr);\r\n\r\n console.log(_hr)\r\n }\r\n\r\n\r\n var _dr = res.leaveApprove.find(t => t.approveTypeKey == 1);\r\n if (_dr != null) {\r\n SetDirector(_dr.approveUserName);\r\n SetDirectorTxt((_dr.userView.titleName != null ? _dr.userView.titleName : '') + _dr.userView.firstName + ' ' + _dr.userView.lastName);\r\n setDirectorApprove(_dr);\r\n\r\n console.log(_dr)\r\n\r\n if (_dr.userView != null)\r\n setIsDirector(_dr.userView.userDepartment.find(t => t.userLevelKey == 4) != null)\r\n \r\n }\r\n\r\n\r\n //if(res.leaveApprove.find(t => t.approveTypeKey == 4) != null)\r\n // SetDepartmentBoss(res.leaveApprove.find(t => t.approveTypeKey == 4).approveUserName)\r\n\r\n //if(res.leaveApprove.find(t => t.approveTypeKey == 3) != null)\r\n // SetGroupworkBoss(res.leaveApprove.find(t => t.approveTypeKey == 3).approveUserName)\r\n\r\n //if(res.leaveApprove.find(t => t.approveTypeKey == 2) != null)\r\n // SetMissionBoss(res.leaveApprove.find(t => t.approveTypeKey == 2).approveUserName)\r\n \r\n setLeaveApprove(res.leaveApprove);\r\n\r\n handleFlowLevel(res.leaveType.systemTypeKey)\r\n\r\n },\r\n error => {\r\n\r\n }\r\n ); \r\n }\r\n\r\n\r\n}, [props.LeaveRequestID]);\r\n\r\n const handleFlowLevel = (stk) => {\r\n axios.get('/api/v1/flowlevel?SystemKey=1&SystemTypeKey='+stk)\r\n .then(\r\n result => {\r\n setFlowLevel(result.data.data)\r\n \r\n \r\n }, error => { console.log(error); }\r\n ); \r\n };\r\n\r\n\r\n function renderText() {\r\n\r\n return \r\n {(approve.approveTypeKey == 0 && LeaveApprove.find(t => t.approveTypeKey >= 2 && t.approveTypeKey <= 4) == null) ?\r\n <>\r\n \r\n \r\n \r\n {hrFlowTxt} \r\n \r\n {hrDT}\r\n \r\n \r\n \r\n \r\n \r\n\r\n {(hr.approveStatusKey == 2) ?\r\n \r\n \r\n \r\n {(hr.userView != null) ?\r\n <>\r\n {hr.approveDescription} \r\n {hr.userView.firstName} {hr.userView.lastName} \r\n : <>\r\n }\r\n\r\n\r\n {\r\n (isHR && hr.approveStatusKey == 1) ?\r\n }\r\n onClick={e => {\r\n setApproveDescription('');\r\n setModalHRApprove(true);\r\n setLeaveApproveKey(hr.leaveApproveKey);\r\n }\r\n }\r\n >\r\n อนุมัติ\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n {hrFlowTxt} \r\n {hrDT}\r\n {(hr.userView != null) ?\r\n <>\r\n {hr.approveDescription} \r\n {hr.userView.firstName} {hr.userView.lastName} \r\n : <>\r\n }\r\n {\r\n (isHR && hr.approveStatusKey == 1) ?\r\n }\r\n onClick={e => {\r\n setModalHRApprove(true);\r\n setLeaveApproveKey(hr.leaveApproveKey);\r\n }\r\n }\r\n >\r\n อนุมัติ\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n } \r\n\r\n {(approve.approveTypeKey != 0 && approve.approveUserName != null) ?\r\n <>\r\n \r\n \r\n \r\n {flowTxt} \r\n \r\n {dt}\r\n \r\n \r\n \r\n \r\n \r\n {(approve.approveTypeKey != minItem.approveTypeKey && approve.approveTypeKey != 1) ?\r\n \r\n \r\n \r\n {approve.approveDescription} \r\n {approve.userView.firstName} {approve.userView.lastName} {\" \"}\r\n {\r\n (isHR && approve.approveStatusKey == 1 && approve.isApprove == null) ?\r\n }\r\n onClick={e => {\r\n setModalDirector(true);\r\n setLeaveApproveKey(approve.leaveApproveKey);\r\n setApproveTypeKey(approve.approveTypeKey);\r\n }\r\n }\r\n > : <>\r\n }\r\n \r\n {\r\n ((currentUser.userName == approve.approveUserName && approve.approveStatusKey == 1) || isHR) ?\r\n }\r\n onClick={e => {\r\n setModalApprove(true);\r\n setLeaveApproveKey(approve.leaveApproveKey);\r\n setApproveTypeKey(approve.approveTypeKey);\r\n setApproveDescription(isApprove ? (approve.approveTypeKey != 5 ? 'เห็นควรอนุญาต' : 'รับทราบ') : '')\r\n }\r\n }\r\n >\r\n {approve.approveTypeKey != 5 ? \"อนุมัติ\" : \"รับทราบ\"}\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n {flowTxt} \r\n {dt}\r\n {approve.approveDescription} \r\n {approve.userView.firstName} {approve.userView.lastName} \r\n {\r\n (approve.approveStatusKey == 1) ?\r\n }\r\n onClick={e => {\r\n setModalApprove(true);\r\n setLeaveApproveKey(approve.leaveApproveKey);\r\n setApproveTypeKey(approve.approveTypeKey);\r\n setApproveDescription(!isApprove ? (approve.approveTypeKey != 5 ? 'เห็นควรอนุญาต' : 'รับทราบ') : '')\r\n }\r\n }\r\n >\r\n อนุมัติ\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n } \r\n\r\n {(approve.approveTypeKey == 2 && approve.approveStatusKey == 2 && hr != null) ?\r\n <>\r\n \r\n \r\n \r\n {hrFlowTxt} \r\n \r\n {hrDT}\r\n \r\n \r\n \r\n \r\n \r\n\r\n {(hr.approveStatusKey == 2) ?\r\n \r\n \r\n \r\n {(hr.userView != null) ?\r\n <>\r\n {hr.approveDescription} \r\n {hr.userView.firstName} {hr.userView.lastName} \r\n : <>\r\n }\r\n\r\n\r\n {\r\n (isHR && hr.approveStatusKey == 1) ?\r\n }\r\n onClick={e => {\r\n setApproveDescription('');\r\n setModalHRApprove(true);\r\n setLeaveApproveKey(hr.leaveApproveKey);\r\n }\r\n }\r\n >\r\n อนุมัติ\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n {hrFlowTxt} \r\n {hrDT}\r\n {(hr.userView != null) ?\r\n <>\r\n {hr.approveDescription} \r\n {hr.userView.firstName} {hr.userView.lastName} \r\n : <>\r\n }\r\n {\r\n (isHR && hr.approveStatusKey == 1) ?\r\n }\r\n onClick={e => {\r\n setModalHRApprove(true);\r\n setLeaveApproveKey(hr.leaveApproveKey);\r\n }\r\n }\r\n >\r\n อนุมัติ\r\n : <>\r\n }\r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n } \r\n \r\n \r\n
\r\n}\r\n\r\n\r\n\r\n function renderDay2(props, currentDate, selectedDate) {\r\n var holiday = holidays.find(h => moment(h.holidayDate).format(\"YYYYMMDD\") === moment(currentDate).format(\"YYYYMMDD\"))\r\n var hdt = (holiday != null) ? holiday.name : '';\r\n\r\n // Adds 0 to the days in the days view\r\n if ((props.className.indexOf('rdtDisabled') >= 0) && (currentDate.day() !== 0 && currentDate.day() !== 6 && moment(currentDate) >= moment(StartDate) )) {\r\n props.className += ' text-danger';\r\n //return \r\n \r\n\r\n */}\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n handleLeaveType( ArrLeaveType, e.value, StartDate) } />\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"StartDate\", placeholder: \"วันที่ลา\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(StartDate).isValid() ? moment(StartDate).format('D MMMM BBBB') : '' \r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDate(e.format('YYYY-MM-DD'))}\r\n minDate={new Date(\"02-01-2020\")}\r\n \r\n />\r\n \r\n \r\n\r\n handleStartType(e.value) } />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {year + 543}; }}\r\n isValidDate={isDateValid2}\r\n renderDay={renderDay2}\r\n inputProps={{\r\n name: \"EndDate\", placeholder: \"วันที่ลา\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(EndDate).isValid() ? moment(EndDate).format('D MMMM BBBB') : '' \r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleEndDate(e.format('YYYY-MM-DD'))}\r\n \r\n \r\n />\r\n \r\n \r\n\r\n handleEndType(e.value) } />\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n setContactPhone(e.target.value)} />\r\n {/* แก้ให้ลากิจฉุกเฉินมีผู้ปฏิบัติงานแทนเหมือนลากิจปกติ */}\r\n {/* {(LeaveTypeKey == 3 || (LeaveTypeKey == 2 && !IsUrgent )) ? */}\r\n {/* {(LeaveTypeKey == 3 || (LeaveTypeKey == 2)) ? */}\r\n {(LeaveTypeKey == 3 || (LeaveTypeKey == 2 && StartDate2 > currentDate)) ?\r\n SetStandin(e != null ? e.value : '') } />\r\n :\r\n <> \r\n }\r\n\r\n \r\n\r\n {(ArrDepartmentBoss.length > 0) ?\r\n SetDepartmentBoss(e != null ? e.value : '')} />\r\n :\r\n <> \r\n }\r\n\r\n {(ArrGroupworkBoss.length > 0) ?\r\n SetGroupworkBoss(e!=null?e.value:'') } />\r\n :\r\n <>\r\n }\r\n\r\n {(ArrMissionBoss.length > 0) ? \r\n SetMissionBoss(e != null ? e.value : '') } />\r\n :\r\n <>\r\n }\r\n \r\n \r\n \r\n \r\n\r\n 0 ? LeaveApprove[0].isApprove == null : false) || (isHR && !ApproveDirector) ? '' : 'none') }}>\r\n \r\n {(location.state != null && location.state != '' && location.state.leaveRequestID != null && location.state.leaveRequestID != '') ? \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n {setModal(false); setIcon(\"far fa-question-circle\");}} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n {/* Approve */}\r\n { setModalApprove(false); setIcon(\"far fa-question-circle\"); }} isOpen={modalApprove}>\r\n \r\n { setIsApprove(!isApprove); setApproveDescription(!isApprove ? (ApproveTypeKey !=5 ? 'เห็นควรอนุญาต':'รับทราบ') : '')}} />{(isApprove) ? อนุมัติ : ไม่อนุมัติ }\r\n setApproveDescription(e.target.value)}\r\n >\r\n \r\n \r\n \r\n {/* HR Approve */}\r\n { setModalHRApprove(false); setIcon(\"far fa-question-circle\"); }} isOpen={modalHRApprove}>\r\n \r\n \r\n \r\n
\r\n setIsApprove(!isApprove)} />{(isApprove) ? อนุมัติ : ไม่อนุมัติ }\r\n\r\n\r\n\r\n setApproveDescription(e.target.value)}\r\n >\r\n\r\n setIsReceiveMoney(!isReceiveMoney)} />{(isReceiveMoney) ? ได้รับเงินเดือน : ไม่ได้รับเงินเดือน }\r\n\r\n {(!isReceiveMoney) ?\r\n setHRMoneyDesc(e.target.value)}\r\n >\r\n :\r\n <>\r\n }\r\n\r\n SetDirector(e.value)} />\r\n \r\n \r\n\r\n {/* Director change */}\r\n { setModalDirector(false); setIcon(\"far fa-question-circle\"); }} isOpen={modalDirector}>\r\n \r\n SetDirector(e.value)} />\r\n \r\n \r\n\r\n \r\n {/* Success */}\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการลา\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n {\r\n LeaveApprove.map((item, index) => (\r\n (item.approveTypeKey != 0 || true ) ?\r\n renderFlowLevel(item, index)\r\n :\r\n \r\n ))}\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n );\r\n}\r\nexport default Request;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst Goto = (props) => {\r\n const _leaveRequestID = (props.match.params.LeaveRequestID !== undefined) ? props.match.params.LeaveRequestID : null;\r\n \r\n useEffect(() => {\r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\",\r\n headers: { 'referpage': '/leave/request' }\r\n })\r\n .then(\r\n result => {\r\n\r\n if (_leaveRequestID != null && _leaveRequestID != '') {\r\n props.history.push({\r\n pathname: '/leave/request',\r\n state: {\r\n leaveRequestID: _leaveRequestID\r\n }\r\n })\r\n }\r\n\r\n },\r\n error => {\r\n props.history.push({\r\n pathname: '/auth/login-page',\r\n state: {\r\n redirect: '/leave/id/' + _leaveRequestID\r\n }\r\n })\r\n }\r\n ); \r\n\r\n \r\n\r\n\r\n }, [])\r\n\r\n return (\r\n\r\n แบบฟอร์มขออนุมัติลา
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setLeaveReason(e.target.value) }\r\n >\r\n
\r\n \r\n\r\n \r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setContactAddress(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setLeaveReasonDelay(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setMedicalCertificate(e.target.value) }\r\n >\r\n
\r\n \r\n ยกเลิกการลา
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {setModal(false); setIcon(\"far fa-question-circle\");}}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n \r\n\r\n
\r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการอนุมัติ\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n
\r\n \r\n \r\n \r\n { setModalApprove(false); setIcon(\"far fa-question-circle\"); }}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"งานทรัพย์ยืนยันการตรวจสอบ\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n
\r\n\r\n | สถิติการลาในปีงบประมาณนี้ | \r\n|||
|---|---|---|---|
| ประเภทลา | \r\nลามาแล้ว | \r\nลาครั้งนี้ | \r\nรวม | \r\n
| {((ArrLeaveType != \"\" && LeaveTypeKey > 0) ? ArrLeaveType.find(t => t.value == LeaveTypeKey).label : \"\")} | \r\n
\r\n \r\n { setModalHRApprove(false); setIcon(\"far fa-question-circle\"); }}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"เปลี่ยนผู้อนุมัติระดับสูงสุด\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n
\r\n\r\n \r\n \r\n { setModalDirector(false); setIcon(\"far fa-question-circle\"); }}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n {/*{errMsg}
*/}\r\n \r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nติดตามสถานะ การลา
\r\n\r\n\r\n
ใบลา
\r\n\r\n\r\n
ใบลา
\r\n\r\n\r\n
\r\n\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Goto;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport { PDFViewer, PDFDownloadLink, Page, Text, View, Document, StyleSheet, Font, Svg, Polygon, Line } from 'react-pdf-renderer-v2';\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { login, logoff,loadUserFromStorage } from \"_services/oauth\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n/*\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport Datetime from 'react-datetime';\r\nimport Select from 'react-select';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Fab from '@material-ui/core/Fab';\r\n\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\n\r\n\r\nimport Timeline from '@material-ui/lab/Timeline';\r\nimport TimelineItem from '@material-ui/lab/TimelineItem';\r\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\r\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\r\nimport TimelineContent from '@material-ui/lab/TimelineContent';\r\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\r\nimport TimelineDot from '@material-ui/lab/TimelineDot';\r\nimport FastfoodIcon from '@material-ui/icons/Fastfood';\r\nimport LaptopMacIcon from '@material-ui/icons/LaptopMac';\r\nimport HotelIcon from '@material-ui/icons/Hotel';\r\nimport RepeatIcon from '@material-ui/icons/Repeat';\r\nimport Paper from '@material-ui/core/Paper';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport Avatar from '@material-ui/core/Avatar';\r\n\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport Leave from \"layouts/Leave\";\r\nimport { ContactsRounded, Description, Grade } from \"@material-ui/icons\";\r\n\r\n*/\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\n\r\nFont.register({\r\n family: 'thsarabun',\r\n src: 'https://e.trangskin.go.th/thsarabun.ttf'\r\n});\r\n\r\nFont.register({\r\n family: 'thsarabunbold',\r\n src: 'https://e.trangskin.go.th/thsarabunbold.ttf'\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n body: {\r\n paddingTop: 20,\r\n paddingBottom: 20,\r\n paddingHorizontal: 30,\r\n },\r\n title: {\r\n fontSize: 22,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n author: {\r\n fontSize: 16,\r\n textAlign: 'right',\r\n fontFamily: 'thsarabun'\r\n },\r\n subtitle: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabunbold',\r\n },\r\n subtitle2: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabun',\r\n },\r\n textBold: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n text: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun',\r\n },\r\n text14: {\r\n fontSize: 14,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun'\r\n },\r\n textCenter: {\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n image: {\r\n marginVertical: 15,\r\n marginHorizontal: 100,\r\n },\r\n header: {\r\n fontSize: 12,\r\n marginBottom: 20,\r\n textAlign: 'center',\r\n color: 'grey',\r\n fontFamily: 'thsarabun'\r\n },\r\n pageNumber: {\r\n position: 'absolute',\r\n fontSize: 12,\r\n bottom: 30,\r\n left: 0,\r\n right: 0,\r\n textAlign: 'center',\r\n color: 'grey',\r\n },\r\n\r\n row: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n marginTop: 10,\r\n },\r\n left: {\r\n // width: '33%',//<- working alternative\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n right: {\r\n // width: '66%', //<- working alternative\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n table: {\r\n display: \"table\",\r\n width: \"auto\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderRightWidth: 0,\r\n borderBottomWidth: 0\r\n },\r\n tableRow: {\r\n margin: \"auto\",\r\n flexDirection: \"row\"\r\n },\r\n tableCol: {\r\n width: \"25%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableColMerge: {\r\n width: \"100%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableCell: {\r\n\r\n marginTop: 5,\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n checkbox: {\r\n height: 21,\r\n width: 31,\r\n display: 'inline-block',\r\n marginTop: -3,\r\n marginRight: -15\r\n },\r\n box: {\r\n points: \"5,10 15,10 15,20 5,20\",\r\n stroke: \"black\",\r\n strokeWidth: 1,\r\n },\r\n\r\n\r\n\r\n});\r\n\r\n\r\n\r\nconst LeaveForm = (props) => {\r\n\r\n const _leaveRequestID = (props.match.params.LeaveRequestID !== undefined) ? props.match.params.LeaveRequestID : null;\r\n \r\n\r\n const isEdit =(_leaveRequestID != null && _leaveRequestID != '');\r\n\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const [LeaveRequestID, setLeaveRequestID] = useState('');\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(null);\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [EnabledUrgent, setEnabledUrgent] = useState(false);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [StartType, setStartType] = useState(0);\r\n\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [CreateDT, setCreateDT] = useState(\"\");\r\n const [EndType, setEndType] = useState(0);\r\n const [LeaveReason, setLeaveReason] = useState('');\r\n\r\n const [ContactAddress, setContactAddress] = useState('');\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n const [TotalDate, setTotalDate] = useState(1);\r\n const [TotalHistory, setTotalHistory] = useState(0);\r\n const [TotalAll, setTotalAll] = useState(0);\r\n const [RequestBefore, setRequestBefore] = useState(0);\r\n\r\n const [FullName, setFullName] = useState('');\r\n const [PositionName, setPositionName] = useState('');\r\n const [TypeGovName, setTypeGovName] = useState('');\r\n\r\n\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n const [isHovered, setIsHovered] = useState(false);\r\n\r\n const [ArrLeaveType, setArrLeaveType] = useState([]);\r\n const [ArrStandin, setArrStandin] = useState([]);\r\n const [ArrDepartmentBoss, setArrDepartmentBoss] = useState([]);\r\n const [ArrGroupworkBoss, setArrGroupworkBoss] = useState([]);\r\n const [ArrMissionBoss, setArrMissionBoss] = useState([]);\r\n const [LeaveApprove, setLeaveApprove] = useState([]);\r\n\r\n const [FlowLevel, setFlowLevel] = useState([]);\r\n\r\n const [LeaveHistory, SetLeaveHistory] = useState(\"\");\r\n\r\n const [Standin, SetStandin] = useState(\"\");\r\n const [DepartmentBoss, SetDepartmentBoss] = useState(\"\");\r\n const [GroupworkBoss, SetGroupworkBoss] = useState(\"\");\r\n const [MissionBoss, SetMissionBoss] = useState(\"\");\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n //const [isEdit, setIsEdit] = useState(false);\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label:\"ปกติ\", value:0}, { label:\"ด่วน\", value:1} , { label:\"ฉุกเฉิน\", value:2}];\r\n const dateTypeList = [{ label:\"ทั้งวัน\", value:0}, { label:\"ครึ่งวันเช้า\", value:1} , { label:\"ครึ่งวันบ่าย\", value:2}];\r\n const dateTypeList2 = [{ label:\"ทั้งวัน\", value:0}, { label:\"ครึ่งวันเช้า\", value:1} ];\r\n\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n\r\n\r\n var _alt = [];\r\n axios.post(\"/api/v1/leave/type\", { \"IsApprove\": true, \"LeaveRequestID\": (isEdit ? _leaveRequestID: '00000000-0000-0000-0000-000000000000')})\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":')*/);\r\n setArrLeaveType(json)\r\n _alt = json;\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios.post(\"/api/v1/myteam\", {userName: \"\" })\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"firstName\":').join('\"label\":').split('\"userName\":').join('\"value\":')*/);\r\n \r\n const myteam = json.map((o) => ({\r\n ...o,\r\n value: o.userName,\r\n label: `${o.userProfile.firstName} ${o.userProfile.lastName}`\r\n }));\r\n \r\n const jsonMy = myteam.filter(e => e.userName == result.data.userName)[0];\r\n\r\n if(!isEdit){\r\n setContactPhone(jsonMy.userProfile.mobilePhone);\r\n setContactAddress(jsonMy.userProfile.address);\r\n }\r\n\r\n const jsonStanin = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey != 3)\r\n setArrStandin(jsonStanin)\r\n\r\n const jsonDept = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 1 && jsonMy.userLevelKey < 1 /*e.userLevelKey == jsonMy.userLevelKey*/)\r\n setArrDepartmentBoss(jsonDept)\r\n\r\n const jsonGroup = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 2 && jsonMy.userLevelKey < 2)\r\n setArrGroupworkBoss(jsonGroup)\r\n\r\n const jsonMission = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 || e.userLevelKey == 3))\r\n setArrMissionBoss(jsonMission)\r\n\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n\r\n\r\n if(isEdit)\r\n {\r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/leave/\" + _leaveRequestID,\r\n headers: { 'referpage': '/leave/request/' + _leaveRequestID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res=resEdit.data.data;\r\n //console.log(resEdit)\r\n setLeaveTypeKey(res.leaveTypeKey)\r\n\r\n setStartDate(moment(res.startDate).format('YYYY-MM-DD').toString())\r\n setStartType(res.startDateType)\r\n setEndDate(moment(res.endDate).format('YYYY-MM-DD').toString())\r\n setEndType(res.endDateType)\r\n\r\n\r\n setCreateDT(moment(res.createDT).format('YYYY-MM-DD').toString())\r\n\r\n //handleLeaveType(_alt, res.leaveTypeKey, moment(res.startDate))\r\n //ให้ดึงสถิติจากที่บันทึกใน record (ไม่คำนวนใหม่เพราะจะสับสน) คำนวนใหม่เมื่อต้องการจะแก้ไข และเลือกวันใหม่\r\n var his = _alt.find(t => t.leaveTypeKey == res.leaveTypeKey);\r\n //console.log(his)\r\n var txt = 'ใช้วันลาแล้ว '; \r\n var dt = (moment(res.startDate).isValid()) ? moment(res.startDate) : moment();\r\n \r\n if(his != null){\r\n if(his.maxLeave != null && his.maxLeave > 0) {\r\n txt += res.totalHistory + '/'+ res.totalAll + ' วัน';\r\n }\r\n else{\r\n if(dt.format('M') >=4 && dt.format('M') <= 9){\r\n txt += res.totalHistory + '/'+ res.totalAll + ' วัน (ครึ่งปีหลัง)'; \r\n } \r\n else{\r\n txt += res.totalHistory + '/'+ res.totalAll+ ' วัน (ครึ่งปีแรก)';\r\n }\r\n }\r\n \r\n setTotalHistory(res.totalHistory);\r\n setTotalAll(res.totalAll);\r\n \r\n setEnabledUrgent(his.enabledUrgent == 1)\r\n setRequestBefore(his.requestBefore)\r\n SetLeaveHistory(txt);\r\n\r\n }\r\n\r\n setFullName(res.userView.titleName+res.userView.firstName+' '+res.userView.lastName)\r\n setPositionName(res.userView.positionName)\r\n setTypeGovName(res.userView.typeGov.name)\r\n\r\n setLeaveReason(res.leaveDesc)\r\n \r\n setContactAddress(res.contactAddress)\r\n setContactPhone(res.contactPhone)\r\n\r\n setTotalDate(res.totalDate)\r\n \r\n setIsMoreDate(moment(res.startDate) != moment(res.endDate))\r\n\r\n if(res.leaveApprove.find(t => t.approveTypeKey == 5) != null)\r\n SetStandin(res.leaveApprove.find(t => t.approveTypeKey == 5).approveUserName)\r\n\r\n if(res.leaveApprove.find(t => t.approveTypeKey == 4) != null)\r\n SetDepartmentBoss(res.leaveApprove.find(t => t.approveTypeKey == 4).approveUserName)\r\n\r\n if(res.leaveApprove.find(t => t.approveTypeKey == 3) != null)\r\n SetGroupworkBoss(res.leaveApprove.find(t => t.approveTypeKey == 3).approveUserName)\r\n\r\n if(res.leaveApprove.find(t => t.approveTypeKey == 2) != null)\r\n SetMissionBoss(res.leaveApprove.find(t => t.approveTypeKey == 2).approveUserName)\r\n \r\n setLeaveApprove(res.leaveApprove);\r\n\r\n handleFlowLevel(res.leaveType.systemTypeKey)\r\n\r\n },\r\n error => {\r\n \r\n }\r\n ); \r\n }\r\n\r\n \r\n\r\n\r\n }, []);\r\n\r\n \r\n const handleFlowLevel = (stk) => {\r\n axios.get('/api/v1/flowlevel?SystemKey=1&SystemTypeKey='+stk)\r\n .then(\r\n result => {\r\n setFlowLevel(result.data.data)\r\n\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n};\r\n\r\n\r\n\r\n\r\nfunction renderText() {\r\n\r\n var _leaveText = (ArrLeaveType != \"\") ? ArrLeaveType.find(t=>t.value==1).label : \"\";\r\n return {eventInfo.timeText}
\r\n {(eventInfo.event.extendedProps.isCancel == true) ? \"ยกเลิกประชุม\" : \"\"} {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n return (\r\n \r\n c.id === id).color }}>{customHeader + ' ' + moment(defaultDate).format('DD MMM BBBB')}
}\r\n dayHeaderClassNames={{color:'red'}}\r\n height={\"75vh\"}\r\n dateClick={handleDateClick}\r\n events={events}\r\n droppable={true}\r\n rerenderDelay={10}\r\n eventDurationEditable={false}\r\n //editable={true}\r\n //eventClick={}\r\n eventClick={handleClick}\r\n slotMinTime={\"08:00:00\"}\r\n slotMaxTime={\"21:00:00\"}\r\n locale={'th'}\r\n selectable={true}\r\n select={handleTimeSelect}\r\n selectOverlap={false}\r\n eventBackgroundColor={_color.find(c=>c.id===id).color}\r\n eventContent={renderEventContent}\r\n />\r\n \r\n );\r\n}\r\n\r\nexport default withRouter(Calendar);\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst MyLeave = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(0);\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [optionYear, setOptionYear] = useState([]);\r\n const [year, setYear] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n // const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n useEffect(() => {\r\n\r\n var startYear = parseInt(moment().format(\"BBBB\"));\r\n if(moment().month() >= 9){\r\n startYear = startYear + 1;\r\n }\r\n setYear(startYear);\r\n for (var i = startYear + 1; i > startYear - 10; i--)\r\n {\r\n optionYear.push({ value: i, label: i });\r\n }\r\n\r\n\r\n axios(\"/api/v1/leave/leavetypeall\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":'));\r\n setArrLeave(json)\r\n getMeeting(startYear)\r\n }, error => { console.log(error); }\r\n );\r\n\r\n //optionYear.push({ value: 0, label: \"กรุณาระบุปีงบประมาณ\" });\r\n\r\n\r\n }, [])\r\n\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n\r\n if (year > 0) {\r\n axios.get(\"/api/v1/leave/myheader/\" + \"?Calyear=\"+year+\"&LeaveTypeKey=\" + LeaveTypeKey)\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n console.log(json);\r\n setIsLoading(false);\r\n }\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n },[LeaveTypeKey, year]);\r\n\r\n\r\n\r\n const getMeeting = (startYear) => {\r\n setIsLoading(true);\r\n axios.get(\"/api/v1/leave/myheader/\" + \"?Calyear=\" + startYear)\r\n .then(\r\n result => {\r\n \r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n };\r\n\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n\r\n };\r\n\r\n\r\n const handleEventClickList = e => {\r\n\r\n if (e.event._def.publicId != null && e.event._def.publicId != '') {\r\n props.history.push({\r\n pathname: 'id/'+e.event._def.publicId,\r\n //state: {\r\n // meetingID: e.event._def.publicId\r\n //}\r\n })\r\n }\r\n\r\n }\r\n\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n setYear(e.value)}\r\n value={year}\r\n //defaulfAdd={optionYear[0]}\r\n />\r\n setLeaveTypeKey(e.value)} />\r\n {/* : <>\r\n } */}\r\n \r\n {/* setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แยกห้อง : รายการ }\r\n */}\r\n \r\n \r\n \r\n {/* {(!isShowCalendar) ?\r\n \r\n \r\n : */}\r\n \r\n {isLoading && (\r\n <>\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const _room = ArrLeave.find(c => c.value === eventInfo.event.extendedProps.leaveTypeKey);\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการลาของฉัน
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {(leaveAll.length > 0) && (\r\n \r\n \r\n \r\n
\r\n
\r\n )}\r\n )\r\n }\r\n | วันที่ | \r\nรายละเอียด | \r\nจำนวนวัน | \r\nสถานะ | \r\n|
|---|---|---|---|---|
| \r\n {moment(item.start).format('D MMM BB')}\r\n | \r\n\r\n {item.title}\r\n | \r\n\r\n {item.totalDate} {item.isApprove}\r\n | \r\n\r\n {(item.isApprove == 1) ? : <>}\r\n {(item.approveStatusKey == 1) ? : <>}\r\n {(item.approveStatusKey == -1) ? : <>}\r\n | \r\n {/*\r\n | */}\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {roomTxt} {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const _room = ArrLeave.find(c => c.value === eventInfo.event.extendedProps.leaveTypeKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {roomTxt} {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default MyLeave;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\nconst _approveList = [{ label: \"ทั้งหมด\", value: 0 }, { label: \"?\", value: 1 }, { label: \"✓\", value: 2 }, { label: \"X\", value: -1 }];\r\nconst _dateOrderList = [{ label: \"วันที่คีย์\", value: 1 }, { label: \"วันที่ลา\", value: 2 }];\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst MyApprove = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(0);\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [optionYear, setOptionYear] = useState([]);\r\n const [year, setYear] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [ApproveStatusKey, setApproveStatusKey] = useState(0);\r\n const [DateOrder, setDateOrder] = useState(2);\r\n // const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n/*\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n */ \r\n\r\n\r\n useEffect(() => {\r\n\r\n var startYear = parseInt(moment().format(\"BBBB\"));\r\n if(moment().month() >= 9){\r\n startYear = startYear + 1;\r\n }\r\n setYear(startYear);\r\n for (var i = startYear + 1; i > startYear - 10; i--) {\r\n optionYear.push({ value: i, label: i });\r\n }\r\n\r\n axios(\"/api/v1/leave/leavetypeall\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":'));\r\n setArrLeave(json)\r\n getMeeting(startYear)\r\n }, error => { console.log(error); }\r\n );\r\n }, [])\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n if (year > 0) {\r\n axios.get(\"/api/v1/leave/myapprove/\" + \"?Calyear=\" + year + \"&LeaveTypeKey=\" + LeaveTypeKey + \"&ApproveStatusKey=\" + ApproveStatusKey + \"&DateOrder=\" + DateOrder)\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n }\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n }, [LeaveTypeKey, year, ApproveStatusKey, DateOrder]);\r\n\r\n\r\n\r\n const getMeeting = (startYear) => {\r\n setIsLoading(true);\r\n axios.get('/api/v1/leave/myapprove/?Calyear=' + startYear)\r\n .then(\r\n result => {\r\n \r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n console.log(json)\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n };\r\n\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n\r\n };\r\n\r\n\r\n const handleEventClickList = e => {\r\n\r\n if (e.event._def.publicId != null && e.event._def.publicId != '') {\r\n props.history.push({\r\n pathname: 'form/'+e.event._def.publicId,\r\n //state: {\r\n // meetingID: e.event._def.publicId\r\n //}\r\n })\r\n }\r\n\r\n }\r\n\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n setYear(e.value)}\r\n value={year}\r\n //defaulfAdd={optionYear[0]}\r\n />\r\n setLeaveTypeKey(e.value)} />\r\n {/* : <>\r\n } */}\r\n \r\n {/* setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แยกห้อง : รายการ }\r\n */}\r\n \r\n \r\n \r\n {/* {(!isShowCalendar) ?\r\n \r\n \r\n : */}\r\n \r\n {isLoading && (\r\n <>\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n // const colorTxt = (_c !== undefined) ? (eventInfo.event.extendedProps.approveStatusKey == 2) ? 'white'\r\n // :((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการลาของฉัน
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n )\r\n }\r\n | ประเภท | \r\nวันที่ | \r\nรายละเอียด | \r\nจำนวนวัน | \r\nสถานะ | \r\n|
|---|---|---|---|---|---|
| \r\n \r\n | |||||
| \r\n {item.flowName}\r\n | \r\n\r\n {moment(item.start).format('D MMM BB')}\r\n | \r\n\r\n {item.title}\r\n | \r\n\r\n {item.totalDate}\r\n | \r\n\r\n {(item.approveStatusKey == 2) ? : <>}\r\n {(item.approveStatusKey == 1) ? : <>}\r\n {(item.approveStatusKey == -1) ? : <>}\r\n | \r\n {/*\r\n | */}\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const _room = ArrLeave.find(c => c.value === eventInfo.event.extendedProps.leaveTypeKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {eventInfo.event.title} {roomTxt}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default MyApprove;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\nconst _approveList = [{ label: \"ทั้งหมด\", value: 0 }, { label: \"?\", value: 1 }, { label: \"✓\", value: 2 }, { label: \"X\", value: -1 }];\r\nconst _dateOrderList = [{ label: \"วันที่คีย์\", value: 1 }, { label: \"วันที่ลา\", value: 2 }];\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst HRApprove = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(0);\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [optionYear, setOptionYear] = useState([]);\r\n const [year, setYear] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [HRApproveKey, setHRApproveKey] = useState(0);\r\n const [DRApproveKey, setDRApproveKey] = useState(0);\r\n const [DateOrder, setDateOrder] = useState(1);\r\n const [keyword, setKeyword] = useState('');\r\n // const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n/*\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n */ \r\n\r\n\r\n useEffect(() => {\r\n\r\n var startYear = parseInt(moment().format(\"BBBB\"));\r\n if(moment().month() >= 9){\r\n startYear = startYear + 1;\r\n }\r\n setYear(startYear);\r\n for (var i = startYear + 1; i > startYear - 10; i--) {\r\n optionYear.push({ value: i, label: i });\r\n }\r\n\r\n axios(\"/api/v1/leave/leavetypeall\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":'));\r\n setArrLeave(json)\r\n getMeeting(startYear)\r\n }, error => { console.log(error); }\r\n );\r\n }, [])\r\n\r\n \r\n useEffect(() => {\r\n setIsLoading(true);\r\n if (year > 0) {\r\n axios.get(\"/api/v1/leave/hrapprove/\" + \"?Calyear=\" + year + \"&LeaveTypeKey=\" + LeaveTypeKey + \"&HRApproveKey=\" + HRApproveKey + \"&DRApproveKey=\" + DRApproveKey + \"&DateOrder=\" + DateOrder)\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n }\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n }, [LeaveTypeKey, year, HRApproveKey, DRApproveKey, DateOrder]);\r\n\r\n\r\n\r\n const getMeeting = (startYear) => {\r\n setIsLoading(true);\r\n axios.get('/api/v1/leave/hrapprove/?Calyear=' + startYear)\r\n .then(\r\n result => {\r\n \r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n console.log(json)\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n };\r\n\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n\r\n };\r\n\r\n\r\n const handleEventClickList = e => {\r\n\r\n if (e.event._def.publicId != null && e.event._def.publicId != '') {\r\n props.history.push({\r\n pathname: 'form/'+e.event._def.publicId,\r\n //state: {\r\n // meetingID: e.event._def.publicId\r\n //}\r\n })\r\n }\r\n\r\n }\r\n\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n setYear(e.value)}\r\n value={year}\r\n //defaulfAdd={optionYear[0]}\r\n />\r\n setLeaveTypeKey(e.value)} />\r\n {/* : <>\r\n } */}\r\n \r\n {/* setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แยกห้อง : รายการ }\r\n */}\r\n \r\n \r\n \r\n {/* {(!isShowCalendar) ?\r\n \r\n \r\n : */}\r\n \r\n {isLoading && (\r\n <>\r\n \r\n {/* } */}\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการลาของฉัน
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n
\r\n }\r\n \r\n \r\n )\r\n }\r\n | วันที่ | \r\nรายละเอียด | \r\nจำนวนวัน | \r\nHR ตรวจสอบ | \r\nผอ.อนุมัติ | \r\n|
|---|---|---|---|---|---|
| \r\n | \r\n | ||||
| \r\n {moment(DateOrder == 1 ? item.createDT : item.start).format('D MMM BB')}\r\n | \r\n\r\n {item.title}\r\n | \r\n\r\n {item.totalDate}\r\n | \r\n\r\n {(item.hrApproveStatusKey == 2) ? : <>}\r\n {(item.hrApproveStatusKey == -1) ? : <>}\r\n {(item.hrApproveStatusKey == 1) ? : <>}\r\n | \r\n\r\n {(item.directorApproveStatusKey == 2) ? : <>}\r\n {(item.directorApproveStatusKey == -1) ? : <>}\r\n {(item.directorApproveStatusKey == 1) ? : <>}\r\n | \r\n {/*\r\n | */}\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const _room = ArrLeave.find(c => c.value === eventInfo.event.extendedProps.leaveTypeKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {eventInfo.event.title} {roomTxt}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default HRApprove;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport Datetime from 'react-datetime';\r\nimport Select from 'react-select';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Fab from '@material-ui/core/Fab';\r\n\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport Hidden from '@material-ui/core/Hidden';\r\n\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport \"./accrued-style.css\";\r\nimport { time } from \"highcharts\";\r\n\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: \"gray\",\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles2 = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n largeAvatar: {\r\n width: theme.spacing(7),\r\n height: theme.spacing(7),\r\n },\r\n}));\r\n\r\nconst useTreeItemStyles = makeStyles((theme) => ({\r\n root: {\r\n color: theme.palette.text.secondary,\r\n '&:hover > $content': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n '&:focus > $content, &$selected > $content': {\r\n backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,\r\n color: 'var(--tree-view-color)',\r\n },\r\n '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n content: {\r\n color: theme.palette.text.secondary,\r\n borderTopRightRadius: theme.spacing(2),\r\n borderBottomRightRadius: theme.spacing(2),\r\n paddingRight: theme.spacing(1),\r\n fontWeight: theme.typography.fontWeightMedium,\r\n '$expanded > &': {\r\n fontWeight: theme.typography.fontWeightRegular,\r\n },\r\n },\r\n group: {\r\n marginLeft: 0,\r\n '& $content': {\r\n paddingLeft: theme.spacing(2),\r\n },\r\n },\r\n expanded: {},\r\n selected: {},\r\n label: {\r\n fontWeight: 'inherit',\r\n color: 'inherit',\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n },\r\n labelRoot: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(0.5, 0),\r\n },\r\n labelIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n labelText: {\r\n fontWeight: 'inherit',\r\n flexGrow: 1,\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n },\r\n}));\r\n\r\n\r\nfunction StyledTreeItem(props) {\r\n const classes = useTreeItemStyles();\r\n const { labelText, labelIcon: LabelIcon, labelInfo, color, bgColor, nodeType, nodeVal, onTreeClick, ...other } = props;\r\n \r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n setYear(e)}\r\n defaulfAdd={optionYear[0]}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default AccruedLeave;","import React from 'react';\r\nimport { PDFViewer, Page, Text, View, Document, StyleSheet, Font, Svg, Polygon, Line } from 'react-pdf-renderer-v2';\r\n\r\nFont.register({\r\n family: 'thsarabun',\r\n src: 'https://e.trangskin.go.th/thsarabun.ttf'\r\n});\r\n\r\nFont.register({\r\n family: 'thsarabunbold',\r\n src: 'https://e.trangskin.go.th/thsarabunbold.ttf'\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n page: { backgroundColor: 'tomato' },\r\n section: { color: 'white', textAlign: 'center', margin: 30 },\r\n text: { fontFamily: 'thsarabun'}\r\n \r\n });\r\n\r\nconst styles2 = StyleSheet.create({\r\n body: {\r\n paddingTop: 20,\r\n paddingBottom: 20,\r\n paddingHorizontal: 30,\r\n },\r\n title: {\r\n fontSize: 22,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n author: {\r\n fontSize: 16,\r\n textAlign: 'right',\r\n fontFamily: 'thsarabun'\r\n },\r\n subtitle: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabunbold',\r\n },\r\n subtitle2: {\r\n fontSize: 16,\r\n margin: 5,\r\n fontFamily: 'thsarabun',\r\n },\r\n textBold: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabunbold',\r\n },\r\n text: {\r\n marginLeft: 5,\r\n marginTop: 2,\r\n marginBottom: 1,\r\n fontSize: 16,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun',\r\n },\r\n text14: {\r\n fontSize: 14,\r\n textAlign: 'justify',\r\n fontFamily: 'thsarabun'\r\n },\r\n textCenter: {\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n image: {\r\n marginVertical: 15,\r\n marginHorizontal: 100,\r\n },\r\n header: {\r\n fontSize: 12,\r\n marginBottom: 20,\r\n textAlign: 'center',\r\n color: 'grey',\r\n fontFamily: 'thsarabun'\r\n },\r\n pageNumber: {\r\n position: 'absolute',\r\n fontSize: 12,\r\n bottom: 30,\r\n left: 0,\r\n right: 0,\r\n textAlign: 'center',\r\n color: 'grey',\r\n },\r\n\r\n row: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n flexGrow: 1,\r\n marginTop: 10,\r\n },\r\n left: {\r\n // width: '33%',//<- working alternative\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n right: {\r\n // width: '66%', //<- working alternative\r\n flexShrink: 1,\r\n flexGrow: 1,\r\n padding: 5,\r\n flex: 1,\r\n },\r\n table: {\r\n display: \"table\",\r\n width: \"auto\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderRightWidth: 0,\r\n borderBottomWidth: 0\r\n },\r\n tableRow: {\r\n margin: \"auto\",\r\n flexDirection: \"row\"\r\n },\r\n tableCol: {\r\n width: \"25%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableColMerge: {\r\n width: \"100%\",\r\n borderStyle: \"solid\",\r\n borderWidth: 1,\r\n borderLeftWidth: 0,\r\n borderTopWidth: 0,\r\n },\r\n tableCell: {\r\n\r\n marginTop: 5,\r\n fontSize: 16,\r\n textAlign: 'center',\r\n fontFamily: 'thsarabun'\r\n },\r\n checkbox: {\r\n height: 21,\r\n width: 31,\r\n display: 'inline-block',\r\n marginTop: -3,\r\n marginRight: -15\r\n },\r\n box: {\r\n points: \"5,10 15,10 15,20 5,20\",\r\n stroke: \"black\",\r\n strokeWidth: 1,\r\n },\r\n\r\n\r\n\r\n});\r\n\r\n// Create Document Component\r\nconst MyDocument = () => (\r\n วันลาสะสม
\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n )}\r\n | ชื่อ | \r\nลาป่วย | \r\nลากิจ | \r\nลาพักผ่อน | \r\nวันลาสะสม | \r\nปีงบประมาณ | \r\n {/*Position | */}\r\n
|---|---|---|---|---|---|---|
| \r\n | \r\n \r\n {(year > 0) && | \r\n \r\n {(year > 0) && | \r\n \r\n {(year > 0) && | \r\n \r\n {(year > 0) && | \r\n \r\n | \r\n {/* \r\n | */}\r\n
\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst Admin = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(0);\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [modal, setModal] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isShowCalendar, setIsShowCalendar] = useState(true);\r\n\r\n const urgentList = [{ label: \"ปกติ\", value: 0 }, { label: \"ด่วน\", value: 1 }, { label: \"ฉุกเฉิน\", value: 2 }];\r\n const dateTypeList = [{ label: \"ทั้งวัน\", value: 0 }, { label: \"ครึ่งวันเช้า\", value: 1 }, { label: \"ครึ่งวันบ่าย\", value: 2 }];\r\n\r\n const myRef = useRef(null);\r\n\r\n var calendarRef = React.createRef();\r\n\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n \r\n\r\n useEffect(() => {\r\n axios(\"/api/v1/leave/leavetypeall\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"leaveTypeKey\":').join('\"value\":'));\r\n setArrLeave(json)\r\n getMeeting()\r\n }, error => { console.log(error); }\r\n );\r\n }, [])\r\n\r\n useEffect(() => {\r\n setIsLoading(true);\r\n axios.get(\"/api/v1/leave/header/\" + \"?LeaveTypeKey=\" + LeaveTypeKey)\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n }\r\n },\r\n error => { alert(error); }\r\n );\r\n },[LeaveTypeKey]);\r\n\r\n\r\n const getMeeting = () => {\r\n setIsLoading(true);\r\n axios.get('/api/v1/leave/header/')\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"leaveDesc\":').join('\"title\":').split('\"startDate\":').join('\"start\":')\r\n .split('\"endDate\":').join('\"end\":').split('\"leaveRequestID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n setIsLoading(false);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n };\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n };\r\n\r\n const handleEventClickList = e => {\r\n if (e.event._def.publicId != null && e.event._def.publicId != '') {\r\n props.history.push({\r\n pathname: 'id/'+e.event._def.publicId,\r\n })\r\n }\r\n }\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n setLeaveTypeKey(e.value)} />\r\n {/* : <>\r\n } */}\r\n \r\n setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แสดงปฏิทิน : แสดงรายการ }\r\n \r\n \r\n \r\n \r\n {(!isShowCalendar) ?\r\n \r\n \r\n :\r\n \r\n {isLoading && (\r\n <>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการประชุม
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.leaveTypeKey);\r\n // const _room = ArrRoom.find(c => c.value === eventInfo.event.extendedProps.leaveTypeKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n // const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {/* {eventInfo.event.title} {roomTxt}
*/}\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default Admin;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport Hidden from '@material-ui/core/Hidden';\r\n\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport \"./accrued-style.css\";\r\nimport { time } from \"highcharts\";\r\nimport { blackColor } from \"assets/jss/material-dashboard-react\";\r\n\r\n\r\nconst useStyles = makeStyles({\r\n root: {\r\n flexGrow: 1,\r\n //maxWidth: 400,\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin:2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"16px\",\r\n marginTop: \"10px\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n});\r\n\r\nconst LeaveInformation = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [dataList, setDataList] = useState([]);\r\n const [dataListM1, setDataListM1] = useState([]);\r\n const [dataListM2, setDataListM2] = useState([]);\r\n const [dataListM3, setDataListM3] = useState([]);\r\n const [dataListM4, setDataListM4] = useState([]);\r\n const [dataListM5, setDataListM5] = useState([]);\r\n const [dataListM6, setDataListM6] = useState([]);\r\n const [dataListM7, setDataListM7] = useState([]);\r\n const [dataListM8, setDataListM8] = useState([]);\r\n const [dataListM9, setDataListM9] = useState([]);\r\n const [dataListM10, setDataListM10] = useState([]);\r\n const [dataListM11, setDataListM11] = useState([]);\r\n const [dataListM12, setDataListM12] = useState([]);\r\n const [dataListH, setDataListH] = useState([]);\r\n const [dataListH2, setDataListH2] = useState([]);\r\n const [dataListSumYear, setDataListSumYear] = useState([]);\r\n const [optionYear, setOptionYear] = useState([]);\r\n const [year, setYear] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [Attendee, setAttendee] = useState([]);\r\n const [isHR, setIsHR] = useState(false);\r\n\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n\r\n const classes = useStyles();\r\n\r\n const handleAttendee = (_val) => {\r\n setAttendee(_val);\r\n };\r\n\r\n useEffect(() => {\r\n if(Attendee.length != 0){\r\n\r\n setDataListM1([])\r\n setDataListM2([])\r\n setDataListM3([])\r\n setDataListM4([])\r\n setDataListM5([])\r\n setDataListM6([])\r\n setDataListH([])\r\n setDataListM7([])\r\n setDataListM8([])\r\n setDataListM9([])\r\n setDataListM10([])\r\n setDataListM11([])\r\n setDataListM12([])\r\n setDataListH2([])\r\n setDataListSumYear([])\r\n\r\n axios.get(\"/api/LeaveInformationMonth/\" + Attendee[0].userName + \"/\" + year)\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setDataListM1(result.data.test[0])\r\n setDataListM2(result.data.test[1])\r\n setDataListM3(result.data.test[2])\r\n setDataListM4(result.data.test[3])\r\n setDataListM5(result.data.test[4])\r\n setDataListM6(result.data.test[5])\r\n setDataListH(result.data.test[6])\r\n setDataListM7(result.data.test[7])\r\n setDataListM8(result.data.test[8])\r\n setDataListM9(result.data.test[9])\r\n setDataListM10(result.data.test[10])\r\n setDataListM11(result.data.test[11])\r\n setDataListM12(result.data.test[12])\r\n setDataListH2(result.data.test[13])\r\n setDataListSumYear(result.data.test[14])\r\n } else {\r\n \r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n }\r\n }, [Attendee])\r\n\r\n useEffect(() => { \r\n axios.get('/api/LeaveInformation')\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setDataList(result.data.data)\r\n } else {\r\n \r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios.get(\"/api/LeaveInformationMonth/\" + currentUser.userName + \"/\" + year)\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setDataListM1(result.data.test[0])\r\n setDataListM2(result.data.test[1])\r\n setDataListM3(result.data.test[2])\r\n setDataListM4(result.data.test[3])\r\n setDataListM5(result.data.test[4])\r\n setDataListM6(result.data.test[5])\r\n setDataListH(result.data.test[6])\r\n setDataListM7(result.data.test[7])\r\n setDataListM8(result.data.test[8])\r\n setDataListM9(result.data.test[9])\r\n setDataListM10(result.data.test[10])\r\n setDataListM11(result.data.test[11])\r\n setDataListM12(result.data.test[12])\r\n setDataListH2(result.data.test[13])\r\n setDataListSumYear(result.data.test[14])\r\n } else {\r\n \r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios.get(\"/api/v1/year/\")\r\n .then(\r\n result => {\r\n //optionYear.push({ value: 0, label: \"กรุณาระบุปีงบประมาณ\" });\r\n result.data.forEach(e => {\r\n optionYear.push(e);\r\n });\r\n \r\n },\r\n error => { \r\n console.log(error); \r\n }\r\n );\r\n \r\n \r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\"\r\n })\r\n .then(\r\n result => {\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n const _isHR = currentUser.userDepartment.filter(u => u.departmentKey == 105\r\n || u.departmentKey == 108\r\n ).length > 0;\r\n setIsHR(_isHR);\r\n },\r\n error => {console.log(error);}\r\n ); \r\n }, [])\r\n\r\n useEffect(() => {\r\n var user = \"\";\r\n if(Attendee.length == 0){\r\n user = currentUser.userName;\r\n } else {\r\n user = Attendee[0].userName;\r\n }\r\n setDataListM1([])\r\n setDataListM2([])\r\n setDataListM3([])\r\n setDataListM4([])\r\n setDataListM5([])\r\n setDataListM6([])\r\n setDataListH([])\r\n setDataListM7([])\r\n setDataListM8([])\r\n setDataListM9([])\r\n setDataListM10([])\r\n setDataListM11([])\r\n setDataListM12([])\r\n setDataListH2([])\r\n setDataListSumYear([])\r\n\r\n axios.get(\"/api/LeaveInformationMonth/\" + user + \"/\" + year)\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setDataListM1(result.data.test[0])\r\n setDataListM2(result.data.test[1])\r\n setDataListM3(result.data.test[2])\r\n setDataListM4(result.data.test[3])\r\n setDataListM5(result.data.test[4])\r\n setDataListM6(result.data.test[5])\r\n setDataListH(result.data.test[6])\r\n setDataListM7(result.data.test[7])\r\n setDataListM8(result.data.test[8])\r\n setDataListM9(result.data.test[9])\r\n setDataListM10(result.data.test[10])\r\n setDataListM11(result.data.test[11])\r\n setDataListM12(result.data.test[12])\r\n setDataListH2(result.data.test[13])\r\n setDataListSumYear(result.data.test[14])\r\n } else {\r\n \r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n }, [year])\r\n\r\n\r\n return (\r\n \r\n \r\n {(isHR) && (\r\n \r\n \r\n \r\n \r\n \r\n { handleAttendee(e) } } />\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n \r\n setYear(e)}\r\n defaulfAdd={optionYear[0]}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default LeaveInformation;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst Goto = (props) => {\r\n const _refundRequestID = (props.match.params.RefundRequestID !== undefined) ? props.match.params.RefundRequestID : null;\r\n console.log(\"goto\");\r\n console.log(_refundRequestID);\r\n useEffect(() => {\r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\",\r\n headers: { 'referpage': '/refund/request' }\r\n })\r\n .then(\r\n result => {\r\n\r\n if (_refundRequestID != null && _refundRequestID != '') {\r\n props.history.push({\r\n pathname: '/refund/request',\r\n state: {\r\n refundRequestID : _refundRequestID\r\n }\r\n })\r\n }\r\n\r\n },\r\n error => {\r\n props.history.push({\r\n pathname: '/auth/login-page',\r\n state: {\r\n redirect: '/refund/id/' + _refundRequestID\r\n }\r\n })\r\n }\r\n ); \r\n\r\n \r\n\r\n\r\n }, [])\r\n\r\n return (\r\n\r\n เลือกเจ้าหน้าที่
\r\n\r\n\r\n
สถิติการลา
\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n \r\n | \r\n เดือน/วันที | \r\n {dataList.map(({th}) => (\r\n{th} | \r\n ))}\r\n\r\n ป | \r\n\r\n ก | \r\n\r\n พ | \r\n\r\n ข | \r\n\r\n ส | \r\n
|---|---|---|---|---|---|---|
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| \r\n ยอดรวมตั้งแต่เดือนตุลาคม - มีนาคม | \r\n {dataListH.map(({th}) => (\r\n{th} | \r\n ))}\r\n|||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| {th} | \r\n ))}\r\n||||||
| \r\n ยอดรวมตั้งแต่เดือนเมษายน - กันยายน | \r\n {dataListH2.map(({th}) => (\r\n{th} | \r\n ))}\r\n|||||
| \r\n ยอดรวมทั้งปี | \r\n {dataListSumYear.map(({th}) => (\r\n{th} | \r\n ))}\r\n|||||
| \r\n สีเหลือง = วันหยุดประจำสัปดาห์ (เสา - อาทิตย์) | สีฟ้า = วันหยุดนักขัตฤกษ์ (วันหยุดราชการ) |\r\n ป = ลาป่วย | ก = ลากิจ | พ = พักผ่อน | \r\n
\r\n\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Goto;","import React, { useState, useEffect, useRef} from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Assignment, Build, PermContactCalendar, VerifiedUser, Person } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\nimport { DateRange, Bookmarks, ExitToApp, CalendarToday } from \"@material-ui/icons/\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Goto from \"views/Refund/Goto\";\r\n\r\nimport axios from \"axios\";\r\nimport Request from \"views/Refund/Request\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\nlet ps;\r\n\r\n\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Leave({ ...rest }) {\r\n // styles\r\n const classes = useStyles();\r\n // ref to help us initialize PerfectScrollbar on windows devices\r\n const mainPanel = React.createRef();\r\n // states and functions\r\n const [image, setImage] = React.useState(bgImage);\r\n const [color, setColor] = React.useState(\"blue\");\r\n const [fixedClasses, setFixedClasses] = React.useState(\"dropdown show\");\r\n const [mobileOpen, setMobileOpen] = React.useState(false);\r\n const [isHR, setIsHR] = useState(false);\r\n\r\n\r\nconst routes = [\r\n {\r\n name: \"แบบคำขอ\",\r\n icon: Assignment,\r\n component: Request,\r\n layout: \"/refund\",\r\n path: \"/request\",\r\n }\r\n];\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport axios from \"axios\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Input, Label } from \"reactstrap\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport Timeline from '@material-ui/lab/Timeline';\r\n\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\n///object ที่กำหนด styles ต่างๆ\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: \"gray\",\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\n//object ที่กำหนด styles โดยใช้ makeStyles จาก Material-UI\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n largeAvatar: {\r\n width: theme.spacing(7),\r\n height: theme.spacing(7),\r\n },\r\n}));\r\n\r\nconst Request = (props) => {\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'));\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n const _refundRequestID = (location.state != null && (location.state.refundRequestID != null && location.state.refundRequestID != '')) ? location.state.refundRequestID : null;\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n //ประกาศตัวแปร ใช้ useState hook\r\n const [refundRequestID, setRefundRequestID] = useState('');\r\n const [RefundReason, setRefundReason] = useState(\"\");\r\n const [currentDt, setcurrentDt] = useState(\"\");\r\n const [ContactAddress, setAddress] = useState('');\r\n const [Phone, setPhone] = useState('');\r\n const [UserName, setUserName] = useState('');\r\n const [Profile, setProfile] = useState([]);\r\n\r\n //const [isEditing, setIsEditing] = useState(false);\r\n const [ArrGroupworkBoss, setArrGroupworkBoss] = useState([]);\r\n const [ArrMissionBoss, setArrMissionBoss] = useState([]);\r\n const [ArrDepartmentBoss, setArrDepartmentBoss] = useState([]);\r\n const [DepartmentBoss, SetDepartmentBoss] = useState(\"\");\r\n const [GroupworkBoss, SetGroupworkBoss] = useState(\"\");\r\n const [MissionBoss, SetMissionBoss] = useState(\"\");\r\n const [ArrStandin, setArrStandin] = useState([]);\r\n const [Finance, setFinance] = useState([]);;\r\n\r\n const [FlowLevel, setFlowLevel] = useState([]);\r\n\r\n const [modalError, setModalError] = useState(false);\r\n const [modalCancel, setModalCancel] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [isCancel, setIsCancel] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n\r\n const [RefundApprove, setRefundApprove] = useState([]);\r\n\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n if (location.state) {\r\n console.log('Location state:', location.state);\r\n // สามารถเข้าถึง RefundRequestID ได้ที่ location.state.RefundRequestID\r\n const refundRequestID = location.state.RefundRequestID;\r\n console.log('RefundRequestID:', refundRequestID);\r\n } else {\r\n console.log('No location state available');\r\n }\r\n\r\n const isEdit = (_refundRequestID != null);\r\n\r\n useEffect(() => {\r\n\r\n console.log(_refundRequestID);\r\n if (_refundRequestID != null && _refundRequestID != '') {\r\n props.history.push({\r\n pathname: '/refund/request',\r\n state: {\r\n refundRequestID: _refundRequestID\r\n }\r\n })\r\n }\r\n\r\n axios.post(\"/api/v1/currentdate\").then(\r\n (result) => {\r\n setcurrentDt(result.data.currentDatetime);\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n if (currentUser.userID) {\r\n axios.get(`/api/v1/user/${currentUser.userID}`).then(\r\n (result) => {\r\n setPhone(result.data.data.mobilePhone);\r\n setAddress(result.data.data.address);\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n axios.post(\"/api/v1/team\", {RefundRequestID: isEdit ? location.state.refundRequestID: '00000000-0000-0000-0000-000000000000' })\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"firstName\":').join('\"label\":').split('\"userName\":').join('\"value\":')*/);\r\n \r\n const myteam = json.map((o) => ({\r\n ...o,\r\n value: o.userName.toLowerCase(),\r\n label: `${o.userProfile.firstName} ${o.userProfile.lastName}`\r\n }));\r\n \r\n const jsonMy = myteam.filter(e => e.userName.toLowerCase() == result.data.userName.toLowerCase() && e.isDefault)[0];\r\n console.log(jsonMy);\r\n\r\n if(!isEdit){\r\n setPhone(jsonMy.userProfile.mobilePhone);\r\n setAddress(jsonMy.userProfile.address);\r\n }\r\n \r\n const jsonFinance = myteam.filter(e => e.userName != result.data.userName && e.departmentKey == 157)\r\n setFinance(jsonFinance)\r\n \r\n\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios.post(\"/api/v1/myteam\", {RefundRequestID: isEdit ? location.state.refundRequestID: '00000000-0000-0000-0000-000000000000' })\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"firstName\":').join('\"label\":').split('\"userName\":').join('\"value\":')*/);\r\n \r\n const myteam = json.map((o) => ({\r\n ...o,\r\n value: o.userName.toLowerCase(),\r\n label: `${o.userProfile.firstName} ${o.userProfile.lastName}`\r\n }));\r\n\r\n const jsonMy = myteam.filter(e => e.userName.toLowerCase() == result.data.userName.toLowerCase() && e.isDefault)[0];\r\n console.log(jsonMy);\r\n\r\n if(!isEdit){\r\n setPhone(jsonMy.userProfile.mobilePhone);\r\n setAddress(jsonMy.userProfile.address);\r\n }\r\n\r\n const jsonDept = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 1 && jsonMy.userLevelKey < 1 /*e.userLevelKey == jsonMy.userLevelKey*/)\r\n setArrDepartmentBoss(jsonDept)\r\n\r\n const jsonGroup = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 && e.isDefault) && jsonMy.userLevelKey < 2)\r\n setArrGroupworkBoss(jsonGroup)\r\n\r\n const jsonMission = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 || e.userLevelKey == 3) && jsonMy.userLevelKey < 3)\r\n setArrMissionBoss(jsonMission)\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n if (isEdit) {\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/refund/\" + _refundRequestID,\r\n headers: { 'referpage': '/refund/request/' + _refundRequestID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res = resEdit.data.data;\r\n setRefundReason(res.refundDesc);\r\n setRefundApprove(res.refundApprove);\r\n\r\n if(res.refundApprove.find(t => t.approveTypeKey == 4) != null)\r\n SetDepartmentBoss(res.refundApprove.find(t => t.approveTypeKey == 4).approveUserName)\r\n \r\n if(res.refundApprove.find(t => t.approveTypeKey == 3) != null)\r\n SetGroupworkBoss(res.refundApprove.find(t => t.approveTypeKey == 3).approveUserName)\r\n \r\n if (res.refundApprove.find(t => t.approveTypeKey == 2) != null)\r\n SetMissionBoss(res.refundApprove.find(t => t.approveTypeKey == 2).approveUserName)\r\n \r\n\r\n },\r\n error => {\r\n\r\n }\r\n );\r\n }\r\n\r\n }, []);\r\n\r\n\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n var errMsg = [];\r\n //ประกาศตัวแปร\r\n\r\n\r\n\r\n //ถ้าไม่ใส่ข้อความ\r\n if (RefundReason == '') {\r\n cntErr += 1;\r\n //RefundReason เป็นค่าว่าง ฟังก์ชันจะเพิ่มค่า cntErr ขึ้น 1\r\n //นับจำนวนข้อผิดพลาด\r\n errMsg.push('กรุณาระบุเหตุผล');\r\n }\r\n //กรอกข้อความ\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModal(true);\r\n }\r\n };\r\n //ฟังก์ชันนี้ใช้สำหรับการยกเลิกคำร้องการลา\r\n const handleCancel = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n\r\n //ส่งคำร้องไปยัง API เพื่อยกเลิกการลา ส่งค่า refundRequestID ที่ได้มาจาก location.state ผ่าน URL.\r\n axios.put('/api/v1/refund/cancel/' + location.state.refundRequestID, null)\r\n .then(\r\n result => {\r\n \r\n if (result.data.result == 200) {\r\n setIcon(\"far fa-question-circle\");\r\n setModalCancel(false)\r\n setModal2(true)\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModalCancel(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n ); \r\n \r\n };\r\n\r\n //จัดการกับการยืนยัน (refund)\r\n const handleConfirm = evt => {\r\n //ประกาศฟังก์ชันแบบลูกศร (Arrow Function) \r\n //รับพารามิเตอร์หนึ่งตัวคือ evt (ย่อมาจาก event) ใช้สำหรับจัดการกับเหตุการณ์ที่เกิดขึ้น เช่น การคลิกปุ่มส่งข้อมูล\r\n evt.preventDefault();\r\n // เรียกใช้เมธอด preventDefault() เพื่อยกเลิกการทำงานเริ่มต้นของเหตุการณ์นั้นๆ \r\n //เช่น ถ้าเป็นการส่งแบบฟอร์ม การเรียกใช้ preventDefault() จะป้องกันไม่ให้หน้าเว็บรีเฟรช\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n //ไอคอนที่แสดงโชว์\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n console.log(currentUser);\r\n\r\n const _approve = [];\r\n\r\n var isFirst = false;\r\n \r\n \r\n if (ArrDepartmentBoss.length > 0 && DepartmentBoss != '') {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 4, approveUserName: DepartmentBoss, approveStatusKey: 1 })\r\n }\r\n else {\r\n _approve.push({ approveTypeKey: 4, approveUserName: DepartmentBoss })\r\n }\r\n }\r\n \r\n \r\n if (ArrGroupworkBoss.length > 0 && GroupworkBoss != '') {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 3, approveUserName: GroupworkBoss, approveStatusKey: 1 })\r\n }\r\n else {\r\n _approve.push({ approveTypeKey: 3, approveUserName: GroupworkBoss })\r\n }\r\n \r\n }\r\n \r\n \r\n if (ArrMissionBoss.length > 0) {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 2, approveUserName: MissionBoss, approveStatusKey: 1 })\r\n } else {\r\n _approve.push({ approveTypeKey: 2, approveUserName: MissionBoss })\r\n }\r\n \r\n }\r\n\r\n\r\n //สร้าง object\r\n var refund = {\r\n refundDesc: RefundReason,\r\n createDT: currentDt,\r\n userName: currentUser.userName,\r\n contactAddress: ContactAddress,\r\n contactPhone: Phone,\r\n refundApprove: _approve,\r\n\r\n //currentUser มันจะเป็นก้อนข้อมูล .userName จะส่งค่าที่เป็น string\r\n //userName ในหลังบ้านเป็น string\r\n };\r\n\r\n\r\n //แก้ไข\r\n \r\n if(location.state != null && location.state.refundRequestID != null && location.state.refundRequestID != '' && location.state.refundRequestID != undefined) \r\n {\r\n console.log(\"test\");\r\n console.log(location.state);\r\n console.log(location.state.refundRequestID);\r\n // (url,body)\r\n //ใช้ไลบรารี axios เพื่อส่งคำขอ HTTP แบบ PUT ไปยัง API ที่ระบุด้วย URL\r\n axios.put('/api/v1/refund/' + location.state.refundRequestID, refund)\r\n .then(\r\n result => {\r\n\r\n console.log(result)\r\n\r\n if (result.data.result == 200) {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setModal2(true)\r\n //setIsEdit(true);\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n );\r\n }\r\n else {\r\n //ข้อมูลใหม่\r\n\r\n axios.post('/api/v1/refund', refund)\r\n .then(\r\n result => {\r\n if (result.data.result == 200) {\r\n setRefundRequestID(result.data.refundRequestID)\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setModal2(true)\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n );\r\n\r\n }\r\n\r\n };\r\n \r\n // ใช้สำหรับปิด modal และ test ใช้สำหรับเลื่อนหน้าจอไปยังตำแหน่งที่กำหนดโดย ref\r\n const GotoEdit = evt => {\r\n evt.preventDefault();\r\n //ตรวจสอบค่า RefundRequestID\r\n //ถ้ามี RefundRequestID ใน location.state ฟังก์ชันจะนำไปยังหน้าแก้ไขด้วย RefundRequestID ที่กำหนดใน URL\r\n if (location.state != null && location.state.refundRequestID != null && location.state.refundRequestID != '') {\r\n setModal2(false)\r\n props.history.push({ pathname: '/refund/id/' + location.state.refundRequestID })\r\n }\r\n //ถ้าไม่มี RefundRequestID\r\n //ใช้ props.history.push เพื่อเปลี่ยนเส้นทางไปยัง URL ที่ใช้สำหรับการแก้ไขข้อมูลการขอคืนเงิน โดยใช้ RefundRequestID ที่เก็บไว้ในสถานะปัจจุบัน\r\n else {\r\n props.history.push({ pathname: '/refund/id/' + refundRequestID })\r\n }\r\n }\r\n\r\n\r\n const renderFlowLevel = (approve, index) => {\r\n \r\n var flow = FlowLevel.find(t => t.RefundApproveKey == approve.approveTypeKey);\r\n \r\n var hr = RefundApprove.find(t => t.RefundApproveKey == 0);\r\n \r\n var flowTxt = '';\r\n var tmpColor = '';\r\n if(approve.approveStatusKey == null ||approve.approveStatusKey == 0)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName : ''; \r\n }\r\n else if (approve.approveStatusKey == 1)\r\n {\r\n flowTxt = (flow != null) ? 'รอ'+flow.flowName+flow.flowActorName : '';\r\n tmpColor = '#ff9800';\r\n }\r\n else if (approve.approveStatusKey == 2)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName+flow.flowFinishName : '';\r\n tmpColor = '#4caf50';\r\n }\r\n else if (approve.approveStatusKey == -1)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName+flow.flowRejectName : '';\r\n tmpColor = '#f44336';\r\n }\r\n else{\r\n \r\n }\r\n }\r\n\r\n \r\n\r\n\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n SetDepartmentBoss(e != null ? e.value : '')} />\r\n :\r\n <> \r\n }\r\n\r\n {(ArrGroupworkBoss.length > 0) ?\r\n SetGroupworkBoss(e!=null?e.value:'') } />\r\n :\r\n <>\r\n }\r\n\r\n SetMissionBoss(e != null ? e.value : '') } />\r\n :\r\n <>\r\n }\r\n \r\n\r\n \r\n {(location.state != null && location.state !== '' && location.state.refundRequestID != null && location.state.refundRequestID !== '') ?\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n {/* Confirm */}\r\n { setModal(false); setIcon(\"far fa-question-circle\"); }} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n \r\n \r\n \r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการคืนเงิน\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n {/* {\r\n LeaveApprove.map((item, index) => (\r\n (item.approveTypeKey != 0 || true ) ?\r\n renderFlowLevel(item, index)\r\n :\r\n \r\n ))} */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default Request;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport { loadCSS } from 'fg-loadcss';\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport clsx from 'clsx';\r\n\r\nimport Datetime from 'react-datetime';\r\nimport { red } from '@material-ui/core/colors';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport avatar from \"assets/img/faces/marc.jpg\";\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport PhoneIcon from '@material-ui/icons/Phone';\r\nimport FavoriteIcon from '@material-ui/icons/Favorite';\r\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport ShoppingBasket from '@material-ui/icons/ShoppingBasket';\r\nimport ThumbDown from '@material-ui/icons/ThumbDown';\r\nimport ThumbUp from '@material-ui/icons/ThumbUp';\r\nimport Box from '@material-ui/core/Box';\r\nimport AppBar from '@material-ui/core/AppBar';\r\n\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ShareIcon from '@material-ui/icons/Share';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSText from \"components/Forms/TSText\";\r\nimport PropTypes from 'prop-types';\r\nimport Icon from '@material-ui/core/Icon';\r\n\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n Modal, ModalBody \r\n} from \"reactstrap\";\r\n\r\nimport axios from \"axios\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n \r\n}));\r\n\r\nfunction TabPanel(props) {\r\n const { children, value, index, ...other } = props;\r\n\r\n return (\r\n แบบคำขออนุมัติการคืนเงิน
\r\nกรุณาระบุรายละเอียด
\r\n\r\n \r\n setRefundReason(e.target.value)}\r\n >\r\n
\r\n \r\n ยกเลิกการคืนเงิน
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n { setModal(false); setIcon(\"far fa-question-circle\"); }}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
*/}\r\n \r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nติดตามสถานะ การคืนเงิน
\r\n\r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleEmpData(e)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n {emp != null ?\r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n setTitleName(e.target.value)} />\r\n \r\n setFirstName(e.target.value)} />\r\n \r\n setLastName(e.target.value)} />\r\n \r\n setNickName(e.target.value)} />\r\n \r\n setCid(e.target.value)} />\r\n \r\n setGenderKey(e.value) } />\r\n \r\n \r\n \r\n {year + 543}; }}\r\n //isValidDate={isDateValid}\r\n //renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"BirthDT\", placeholder: \"วันเดือนปีเกิด\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => setBirthDT(e.format('YYYY-MM-DD'))} \r\n />\r\n\r\n \r\n \r\n setIsShowBirthdate(!IsShowBirthdate) } /> {(IsShowBirthdate)? แสดงวันเกิด :ไม่แสดงวันเกิด }\r\n \r\n\r\n setMobilePhone(e.target.value)} />\r\n \r\n setEmail(e.target.value)} />\r\n \r\n setGmail(e.target.value)} />\r\n \r\n \r\n setTypeGovKey(e.value) } />\r\n \r\n setPositionName(e.target.value)} />\r\n \r\n setPhoto(e.target.value)} />\r\n \r\n setBadgenumber(e.value)} />\r\n \r\n setLineNotify(e.target.value)} />\r\n \r\n setLineToken(e.target.value)} />\r\n \r\n \r\n setIsActive(!IsActive) } />{(IsActive)? เปิดการใช้งานอยู่ :ปิดการใช้งานไปแล้ว }\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n {(toggleType == 'new') ?\r\n \r\n \r\n setDepartmentTypeKey(e.value)} />\r\n \r\n setDepartmentKey(e.value)} />\r\n \r\n setUserLevelKey(e.value)} />\r\n \r\n setIsDefault(!IsDefault) } />{(IsDefault)? เป็นหน่วยงานหลัก :ไม่ได้เป็นหน่วยงานหลัก }\r\n \r\n \r\n setToggleType('')}\r\n >\r\n \r\n \r\n \r\n :\r\n <>\r\n }\r\n\r\n\r\n\r\n {(toggleType == 'edit')? \r\n \r\n \r\n \r\n setDepartmentTypeKey(e.value) } />\r\n \r\n setDepartmentKey(e.value) } />\r\n \r\n setUserLevelKey(e.value) } />\r\n \r\n setIsDefault(!IsDefault) } />{(IsDefault)? เป็นหน่วยงานหลัก :ไม่ได้เป็นหน่วยงานหลัก }\r\n \r\n \r\n setToggleType('')}\r\n >\r\n \r\n \r\n \r\n : \r\n <>\r\n }\r\n\r\n {(toggleType == '') ?\r\n \r\n
\r\n :\r\n <>\r\n }\r\n\r\n\r\n\r\n \r\n\r\n {/* \r\n \r\n Item Three\r\n \r\n \r\n Item Four\r\n \r\n \r\n Item Five\r\n \r\n \r\n Item Six\r\n \r\n \r\n Item Seven\r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n :\r\n\r\n <>\r\n \r\n } \r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n
\r\n );\r\n}\r\nexport default Employee;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport { loadCSS } from 'fg-loadcss';\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport clsx from 'clsx';\r\n\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\n\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\n\r\nimport Datetime from 'react-datetime';\r\nimport { red } from '@material-ui/core/colors';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport avatar from \"assets/img/faces/marc.jpg\";\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport PhoneIcon from '@material-ui/icons/Phone';\r\nimport FavoriteIcon from '@material-ui/icons/Favorite';\r\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport ShoppingBasket from '@material-ui/icons/ShoppingBasket';\r\nimport ThumbDown from '@material-ui/icons/ThumbDown';\r\nimport ThumbUp from '@material-ui/icons/ThumbUp';\r\nimport Box from '@material-ui/core/Box';\r\nimport AppBar from '@material-ui/core/AppBar';\r\n\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ShareIcon from '@material-ui/icons/Share';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport PropTypes from 'prop-types';\r\nimport Icon from '@material-ui/core/Icon';\r\n\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n Modal, ModalBody \r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\n\r\n\r\nconst useTreeItemStyles = makeStyles((theme) => ({\r\n root: {\r\n color: theme.palette.text.secondary,\r\n '&:hover > $content': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n '&:focus > $content, &$selected > $content': {\r\n backgroundColor: `var(--tree-view-bg-color, ${theme.palette.grey[400]})`,\r\n color: 'var(--tree-view-color)',\r\n },\r\n '&:focus > $content $label, &:hover > $content $label, &$selected > $content $label': {\r\n backgroundColor: 'transparent',\r\n },\r\n },\r\n content: {\r\n color: theme.palette.text.secondary,\r\n borderTopRightRadius: theme.spacing(2),\r\n borderBottomRightRadius: theme.spacing(2),\r\n paddingRight: theme.spacing(1),\r\n fontWeight: theme.typography.fontWeightMedium,\r\n '$expanded > &': {\r\n fontWeight: theme.typography.fontWeightRegular,\r\n },\r\n },\r\n group: {\r\n marginLeft: 0,\r\n '& $content': {\r\n paddingLeft: theme.spacing(2),\r\n },\r\n },\r\n expanded: {},\r\n selected: {},\r\n label: {\r\n fontWeight: 'inherit',\r\n color: 'inherit',\r\n },\r\n labelRoot: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(0.5, 0),\r\n },\r\n labelIcon: {\r\n marginRight: theme.spacing(1),\r\n },\r\n labelText: {\r\n fontWeight: 'inherit',\r\n flexGrow: 1,\r\n },\r\n}));\r\n\r\n\r\nfunction StyledTreeItem(props) {\r\n const classes = useTreeItemStyles();\r\n const { labelText, labelIcon: LabelIcon, labelInfo, txtColor, color, bgColor, nodeType, nodeVal, onTreeClick, ...other } = props;\r\n \r\n\r\n return (\r\n โครงสร้างภารกิจ
\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n \r\n {emp != null ? emp.firstName+' '+emp.lastName:''}
\r\n{UserName}
\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setAddress(e.target.value) }\r\n >\r\n
\r\n \r\n บันทึก
\r\n \r\n\r\n \r\nเพิ่มหน่วยงาน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n \r\n\r\nแก้ไข
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/*\r\n arrUser.map((usr) => (\r\n <>\r\n ))\r\n */}\r\n \r\n \r\n \r\n { (Param == 'Department' || Param == 'GroupWork') ? \r\n handleGroupWork(e.value) } />\r\n : <>\r\n } \r\n\r\n \r\n { (Param == 'Department') ? \r\n setGroupWorkKey(e.value) } />\r\n : <>\r\n } \r\n\r\n\r\n { (Param == 'Department' || Param == 'GroupWork'|| Param == 'Mission') ? \r\n setGroupName(e.target.value)} />\r\n : <>\r\n } \r\n\r\n\r\n { (Param == 'Department' || Param == 'GroupWork') ? \r\n <>\r\n {(isActive)? เปิดการใช้งานอยู่ :ปิดการใช้งานไปแล้ว } setIsActive(!isActive) } />\r\n \r\n : <>\r\n } \r\n\r\n\r\n \r\n \r\n { (Param == '') ? \r\n <>กรุณาเลือกภารกิจ, กลุ่มงาน หรือ หน่วยงานที่จะแก้ไข\r\n : \r\n \r\n setToggleEdit(false)}\r\n >\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n {emp != null ?\r\n \r\n \r\n e.preventDefault()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n setTitleName(e.target.value)} />\r\n \r\n setFirstName(e.target.value)} />\r\n \r\n setLastName(e.target.value)} />\r\n \r\n setNickName(e.target.value)} />\r\n \r\n setCid(e.target.value)} />\r\n \r\n setGenderKey(e.target.value)} />\r\n \r\n setBirthDT(e.target.value)} />\r\n \r\n setMobilePhone(e.target.value)} />\r\n \r\n setEmail(e.target.value)} />\r\n \r\n setGmail(e.target.value)} />\r\n \r\n \r\n setTypeGovKey(e.value) } />\r\n \r\n setLineNotify(e.target.value)} />\r\n \r\n\r\n setLineToken(e.target.value)} />\r\n \r\n setPhoto(e.target.value)} />\r\n \r\n setIsActive(e.target.value)} />\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n {(toggleEdit)? \r\n \r\n \r\n \r\n setDepartmentTypeKey(e.value) } />\r\n \r\n setDepartmentKey(e.value) } />\r\n \r\n setUserLevelKey(e.value) } />\r\n \r\n\r\n \r\n setToggleEdit(false)}\r\n >\r\n \r\n \r\n \r\n\r\n \r\n :\r\n\r\n \r\n
\r\n \r\n }\r\n\r\n\r\n\r\n \r\n\r\n {/* \r\n \r\n Item Three\r\n \r\n \r\n Item Four\r\n \r\n \r\n Item Five\r\n \r\n \r\n Item Six\r\n \r\n \r\n Item Seven\r\n \r\n */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n :\r\n\r\n <>\r\n \r\n } \r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n
\r\n );\r\n}\r\nexport default Department;","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Build, Person } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Employee from \"views/HR/Employee.js\";\r\nimport Department from \"views/HR/Department.js\";\r\nimport Holiday from \"views/HR/Holiday\";\r\nimport UserRequest from \"views/HR/UserRequest.js\";\r\n\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"โครงสร้าง\",\r\n icon: Build,\r\n component: Department,\r\n layout: \"/hr\",\r\n path: \"/department\",\r\n },\r\n {\r\n name: \"ข้อมูลเจ้าหน้าที่\",\r\n icon: Build,\r\n component: Employee,\r\n layout: \"/hr\",\r\n path: \"/index\",\r\n },\r\n {\r\n name: \"จัดการวันหยุด\",\r\n icon: Build,\r\n component: Holiday,\r\n layout: \"/hr\",\r\n path: \"/holiday\",\r\n },\r\n {\r\n name: \"แบบคำขอรหัสเข้าใช้งาน\",\r\n icon: Person,\r\n component: UserRequest,\r\n layout: \"/hr\",\r\n path: \"/user\",\r\n }\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n โครงสร้างภารกิจ
\r\n\r\n \r\n
\r\n {(Param=='')? \"แก้ไขข้อมูลโครงสร้าง\" : \"\"}\r\n {(Param=='Mission')? \"แก้ไขชื่อภารกิจ\" : \"\"}\r\n {(Param=='GroupWork')? \"แก้ไขกลุ่มงาน\" : \"\"}\r\n {(Param=='Department')? \"แก้ไขหน่วยงาน\" : \"\"}\r\n \r\n \r\n
\r\n \r\nยืนยัน
\r\n \r\n \r\nยกเลิก
\r\n \r\n \r\n } \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setModal(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n { setModal2(false);}}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n \r\n {emp != null ? emp.firstName+' '+emp.lastName:''}
\r\n{UserName}
\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setAddress(e.target.value) }\r\n >\r\n
\r\n \r\n บันทึก
\r\n \r\n\r\n \r\nยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\nimport TSText from \"components/Forms/TSText\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\nimport { number } from \"prop-types\";\r\nimport Meeting from \"layouts/HR\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst Holiday = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [HolidayKey, setHolidayKey] = useState(0);\r\n const [Note, setNote] = useState(\"\");\r\n const [ENName, setENName] = useState(\"\");\r\n const [Name, setName] = useState(\"\");\r\n const [HolidayDate, setHolidayDate] = useState(\"\");\r\n const [IsDisabled, setIsDisabled] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n // const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n \r\n\r\n useEffect(() => {\r\n let calendarApi = calendarRef.current.getApi();\r\n getMeeting(calendarApi.getDate())\r\n }, [])\r\n\r\n // useEffect(() => {\r\n // console.log(calendarRef);\r\n // }, [calendarRef])\r\n\r\n const getMeeting = (e) => {\r\n let month = e.getUTCMonth() + 1; //months from 1-12\r\n let year = e.getUTCFullYear();\r\n axios.get('/api/holiday/' + year + \"/\" + month)\r\n .then(\r\n result => {\r\n const temp = [];\r\n var data = result.data.data;\r\n if (data.length >= 0) {\r\n for (let i = 0; i < data.length; i++) {\r\n var newObj = { name : data[i].name\r\n , holidayDate: data[i].holidayDate\r\n , holidayDate2: data[i].holidayDate\r\n , holidayKey: data[i].holidayKey.toString()\r\n , note: data[i].note\r\n , isDisabled :data[i].isDisabled\r\n , enName : data[i].enName\r\n }\r\n temp.push(newObj);\r\n }\r\n }\r\n var json = JSON.parse(JSON.stringify(temp).split('\"name\":').join('\"title\":').split('\"holidayDate\":').join('\"start\":')\r\n .split('\"holidayDate2\":').join('\"end\":').split('\"holidayKey\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n var holiday = {\r\n holidayDate: HolidayDate,\r\n name: Name,\r\n enName: ENName,\r\n note: Note,\r\n isDisabled: IsDisabled,\r\n }\r\n\r\n if(HolidayKey != 0 && HolidayKey != '' && HolidayKey != null)\r\n {\r\n axios.put('/api/holiday/'+ HolidayKey, holiday)\r\n .then(\r\n result => {\r\n \r\n //console.log(result)\r\n \r\n if(result.data.result == 200)\r\n {\r\n setDefaultDate(result.data.data.holidayDate);\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false) \r\n setModal2(true)\r\n const date = new Date(result.data.data.holidayDate);\r\n getMeeting(date);\r\n }\r\n else\r\n {\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false) \r\n setErrMsg(result.data.msg)\r\n setModalError(true) \r\n }\r\n \r\n },\r\n error => {console.log(error);}\r\n ); \r\n } else {\r\n axios.post('/api/holiday', holiday)\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setHolidayKey(result.data.data.holidayKey);\r\n setDefaultDate(result.data.data.holidayDate);\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false);\r\n setModal2(true);\r\n const date = new Date(result.data.data.holidayDate);\r\n getMeeting(date);\r\n } else {\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false);\r\n setErrMsg(result.data.msg);\r\n setModalError(true); \r\n }\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n }\r\n\r\n };\r\n\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n setHolidayDate(args.dateStr)\r\n setHolidayKey(0);\r\n setName(\"\");\r\n setENName(\"\");\r\n setNote(\"\");\r\n setIsDisabled(true);\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n setHolidayDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n setHolidayKey(args.event._def.publicId);\r\n setName(args.event._def.title);\r\n setENName(args.event._def.extendedProps.enName === null ? \" \" : args.event._def.extendedProps.enName);\r\n setNote(args.event._def.extendedProps.note === null ? \" \" : args.event._def.extendedProps.note );\r\n setIsDisabled(args.event._def.extendedProps.isDisabled );\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n \r\n var errMsg = [];\r\n \r\n if(HolidayDate == '')\r\n {\r\n cntErr+=1;\r\n errMsg.push(\r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n setLeaveTypeKey(e.value)} />\r\n */}\r\n \r\n \r\n \r\n \r\n \r\n {isLoading && (\r\n <>\r\n \r\n \r\n \r\n setName(e.target.value)}/>\r\n \r\n setENName(e.target.value)}/>\r\n \r\n setNote(e.target.value)}/>\r\n \r\n setIsDisabled(!IsDisabled) } />\r\n \r\n\r\n {(HolidayKey != 0 && HolidayKey != '' && HolidayKey != null) ? \r\n \r\n \r\n \r\n \r\n {/* \r\n {/* } */}\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === 1);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isDisabled == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isDisabled == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n จัดการวันหยุด
\r\n \r\n {/* \r\n\r\n ',\r\n click: function() {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.next();\r\n getMeeting(calendarApi.getDate());\r\n }\r\n },\r\n }}\r\n locale={'th'}\r\n eventContent={renderEventContent}\r\n displayEventTime={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal2(false)}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Holiday;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useHistory, useLocation } from \"react-router-dom\";\r\nimport axios from \"axios\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport Datetime from 'react-datetime';\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport Timeline from '@material-ui/lab/Timeline';\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n } from \"reactstrap\";\r\n \r\n\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\n///object ที่กำหนด styles ต่างๆ\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: \"gray\",\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\n//object ที่กำหนด styles โดยใช้ makeStyles จาก Material-UI\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n paper: {\r\n padding: '6px 16px',\r\n },\r\n secondaryTail: {\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n largeAvatar: {\r\n width: theme.spacing(7),\r\n height: theme.spacing(7),\r\n },\r\n}));\r\n\r\nconst UserRequest = (props) => {\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'));\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n const _refundRequestID = (location.state != null && (location.state.refundRequestID != null && location.state.refundRequestID != '')) ? location.state.refundRequestID : null;\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n //ประกาศตัวแปร ใช้ useState hook\r\n const [refundRequestID, setRefundRequestID] = useState('');\r\n const [RefundReason, setRefundReason] = useState(\"\");\r\n const [currentDt, setcurrentDt] = useState(\"\");\r\n const [ContactAddress, setAddress] = useState('');\r\n const [Phone, setPhone] = useState('');\r\n const [UserName, setUserName] = useState('');\r\n const [Profile, setProfile] = useState([]);\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [ArrGroupworkBoss, setArrGroupworkBoss] = useState([]);\r\n const [ArrMissionBoss, setArrMissionBoss] = useState([]);\r\n const [ArrDepartmentBoss, setArrDepartmentBoss] = useState([]);\r\n const [DepartmentBoss, SetDepartmentBoss] = useState(\"\");\r\n const [GroupworkBoss, SetGroupworkBoss] = useState(\"\");\r\n const [MissionBoss, SetMissionBoss] = useState(\"\");\r\n const [ArrStandin, setArrStandin] = useState([]);\r\n const [Money, setMoney] = useState([]);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [dateFocus, setDateFocus] = useState(false);\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [FlowLevel, setFlowLevel] = useState([]);\r\n const [ArrLeaveType, setArrLeaveType] = useState([]);\r\n const [LeaveHistory, SetLeaveHistory] = useState(\"\");\r\n const [modalError, setModalError] = useState(false);\r\n const [modalCancel, setModalCancel] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [isCancel, setIsCancel] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [TotalDate, setTotalDate] = useState(1);\r\n const [StartType, setStartType] = useState(0);\r\n const [LeaveTypeKey, setLeaveTypeKey] = useState(null);\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [EndType, setEndType] = useState(0);\r\n const [RefundApprove, setRefundApprove] = useState([]);\r\n const [TotalHistory, setTotalHistory] = useState(0);\r\n const [TotalAll, setTotalAll] = useState(0);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n const [holidays, setHolidays] = useState([]);\r\n const [RequestBefore, setRequestBefore] = useState(0);\r\n const [EnabledUrgent, setEnabledUrgent] = useState(false);\r\n const [title1, setTitle1] = useState([]);\r\n const [title2, setTitle2] = useState([]);\r\n const [gender, setGender] = useState([]);\r\n\r\n const dataGender = [{ label:\"ชาย\", value:0}, { label:\"หญิง\", value:1} ];\r\n const dataTitle = [{ label:\"นาย\", value:0}, { label:\"นาง\", value:1}, { label:\"นางสาย\", value:1} ];\r\n const dataTitle2 = [{ label:\"Mr.\", value:0}, { label:\"Mrs.\", value:1}, { label:\"Mrs.\", value:1} ];\r\n\r\n if (location.state) {\r\n console.log('Location state:', location.state);\r\n // สามารถเข้าถึง RefundRequestID ได้ที่ location.state.RefundRequestID\r\n const refundRequestID = location.state.RefundRequestID;\r\n console.log('RefundRequestID:', refundRequestID);\r\n } else {\r\n console.log('No location state available');\r\n }\r\n\r\n const isEdit = (_refundRequestID != null);\r\n\r\n useEffect(() => {\r\n\r\n console.log(_refundRequestID);\r\n if (_refundRequestID != null && _refundRequestID != '') {\r\n props.history.push({\r\n pathname: '/refund/request',\r\n state: {\r\n refundRequestID: _refundRequestID\r\n }\r\n })\r\n }\r\n\r\n axios.post(\"/api/v1/currentdate\").then(\r\n (result) => {\r\n setcurrentDt(result.data.currentDatetime);\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n if (currentUser.userID) {\r\n axios.get(`/api/v1/user/${currentUser.userID}`).then(\r\n (result) => {\r\n setPhone(result.data.data.mobilePhone);\r\n setAddress(result.data.data.address);\r\n },\r\n (error) => {\r\n console.log(error);\r\n }\r\n );\r\n }\r\n axios.post(\"/api/v1/team\", {RefundRequestID: isEdit ? location.state.refundRequestID: '00000000-0000-0000-0000-000000000000' })\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data)/*.split('\"firstName\":').join('\"label\":').split('\"userName\":').join('\"value\":')*/);\r\n \r\n const myteam = json.map((o) => ({\r\n ...o,\r\n value: o.userName.toLowerCase(),\r\n label: `${o.userProfile.firstName} ${o.userProfile.lastName}`\r\n }));\r\n \r\n\r\n\r\n const jsonMy = myteam.filter(e => e.userName.toLowerCase() == result.data.userName.toLowerCase() && e.isDefault)[0];\r\n \r\n if(!isEdit){\r\n setPhone(jsonMy.userProfile.mobilePhone);\r\n setAddress(jsonMy.userProfile.address);\r\n }\r\n\r\n const jsonStanin = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey < 3)\r\n setArrStandin(jsonStanin)\r\n\r\n const jsonMoney = myteam.filter(e => e.userName != result.data.userName && e.departmentKey == 157)\r\n console.log(result.data);\r\n setMoney(jsonMoney)\r\n\r\n const jsonDept = myteam.filter(e => e.userName != result.data.userName && e.userLevelKey == 1 && jsonMy.userLevelKey < 1 /*e.userLevelKey == jsonMy.userLevelKey*/)\r\n setArrDepartmentBoss(jsonDept)\r\n\r\n const jsonGroup = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 && e.isDefault) && jsonMy.userLevelKey < 2)\r\n setArrGroupworkBoss(jsonGroup)\r\n\r\n const jsonMission = myteam.filter(e => e.userName != result.data.userName && (e.userLevelKey == 2 || e.userLevelKey == 3) && jsonMy.userLevelKey < 3)\r\n setArrMissionBoss(jsonMission)\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n if (isEdit) {\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/refund/\" + _refundRequestID,\r\n headers: { 'referpage': '/refund/request/' + _refundRequestID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res = resEdit.data.data;\r\n setRefundReason(res.refundDesc);\r\n setRefundApprove(res.refundApprove);\r\n\r\n if(res.refundApprove.find(t => t.approveTypeKey == 4) != null)\r\n SetDepartmentBoss(res.refundApprove.find(t => t.approveTypeKey == 4).approveUserName)\r\n \r\n if(res.refundApprove.find(t => t.approveTypeKey == 3) != null)\r\n SetGroupworkBoss(res.refundApprove.find(t => t.approveTypeKey == 3).approveUserName)\r\n \r\n if (res.refundApprove.find(t => t.approveTypeKey == 2) != null)\r\n SetMissionBoss(res.refundApprove.find(t => t.approveTypeKey == 2).approveUserName)\r\n \r\n\r\n },\r\n error => {\r\n\r\n }\r\n );\r\n }\r\n\r\n }, []);\r\n\r\n\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n var errMsg = [];\r\n //ประกาศตัวแปร\r\n\r\n\r\n\r\n //ถ้าไม่ใส่ข้อความ\r\n if (RefundReason == '') {\r\n cntErr += 1;\r\n //RefundReason เป็นค่าว่าง ฟังก์ชันจะเพิ่มค่า cntErr ขึ้น 1\r\n //นับจำนวนข้อผิดพลาด\r\n errMsg.push('กรุณาระบุเหตุผล');\r\n }\r\n //กรอกข้อความ\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModal(true);\r\n }\r\n };\r\n //ฟังก์ชันนี้ใช้สำหรับการยกเลิกคำร้องการลา\r\n const handleCancel = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n\r\n //ส่งคำร้องไปยัง API เพื่อยกเลิกการลา ส่งค่า refundRequestID ที่ได้มาจาก location.state ผ่าน URL.\r\n axios.put('/api/v1/refund/cancel/' + location.state.refundRequestID, null)\r\n .then(\r\n result => {\r\n \r\n if (result.data.result == 200) {\r\n setIcon(\"far fa-question-circle\");\r\n setModalCancel(false)\r\n setModal2(true)\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModalCancel(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n ); \r\n \r\n };\r\n\r\n //จัดการกับการยืนยัน (refund)\r\n const handleConfirm = evt => {\r\n //ประกาศฟังก์ชันแบบลูกศร (Arrow Function) \r\n //รับพารามิเตอร์หนึ่งตัวคือ evt (ย่อมาจาก event) ใช้สำหรับจัดการกับเหตุการณ์ที่เกิดขึ้น เช่น การคลิกปุ่มส่งข้อมูล\r\n evt.preventDefault();\r\n // เรียกใช้เมธอด preventDefault() เพื่อยกเลิกการทำงานเริ่มต้นของเหตุการณ์นั้นๆ \r\n //เช่น ถ้าเป็นการส่งแบบฟอร์ม การเรียกใช้ preventDefault() จะป้องกันไม่ให้หน้าเว็บรีเฟรช\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n //ไอคอนที่แสดงโชว์\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n console.log(currentUser);\r\n\r\n const _approve = [];\r\n\r\n var isFirst = false;\r\n \r\n \r\n if (ArrDepartmentBoss.length > 0 && DepartmentBoss != '') {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 4, approveUserName: DepartmentBoss, approveStatusKey: 1 })\r\n }\r\n else {\r\n _approve.push({ approveTypeKey: 4, approveUserName: DepartmentBoss })\r\n }\r\n }\r\n \r\n \r\n if (ArrGroupworkBoss.length > 0 && GroupworkBoss != '') {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 3, approveUserName: GroupworkBoss, approveStatusKey: 1 })\r\n }\r\n else {\r\n _approve.push({ approveTypeKey: 3, approveUserName: GroupworkBoss })\r\n }\r\n \r\n }\r\n \r\n \r\n if (ArrMissionBoss.length > 0) {\r\n if (!isFirst) {\r\n isFirst = true\r\n _approve.push({ approveTypeKey: 2, approveUserName: MissionBoss, approveStatusKey: 1 })\r\n } else {\r\n _approve.push({ approveTypeKey: 2, approveUserName: MissionBoss })\r\n }\r\n \r\n }\r\n\r\n\r\n //สร้าง object\r\n var refund = {\r\n refundDesc: RefundReason,\r\n createDT: currentDt,\r\n userName: currentUser.userName,\r\n contactAddress: ContactAddress,\r\n contactPhone: Phone,\r\n refundApprove: _approve,\r\n\r\n //currentUser มันจะเป็นก้อนข้อมูล .userName จะส่งค่าที่เป็น string\r\n //userName ในหลังบ้านเป็น string\r\n };\r\n\r\n\r\n //แก้ไข\r\n \r\n if(location.state != null && location.state.refundRequestID != null && location.state.refundRequestID != '' && location.state.refundRequestID != undefined) \r\n {\r\n console.log(\"test\");\r\n console.log(location.state);\r\n console.log(location.state.refundRequestID);\r\n // (url,body)\r\n //ใช้ไลบรารี axios เพื่อส่งคำขอ HTTP แบบ PUT ไปยัง API ที่ระบุด้วย URL\r\n axios.put('/api/v1/refund/' + location.state.refundRequestID, refund)\r\n .then(\r\n result => {\r\n\r\n console.log(result)\r\n\r\n if (result.data.result == 200) {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setModal2(true)\r\n //setIsEdit(true);\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n );\r\n }\r\n else {\r\n //ข้อมูลใหม่\r\n\r\n axios.post('/api/v1/refund', refund)\r\n .then(\r\n result => {\r\n if (result.data.result == 200) {\r\n setRefundRequestID(result.data.refundRequestID)\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setModal2(true)\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false)\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n );\r\n\r\n }\r\n\r\n };\r\n \r\n // ใช้สำหรับปิด modal และ test ใช้สำหรับเลื่อนหน้าจอไปยังตำแหน่งที่กำหนดโดย ref\r\n const GotoEdit = evt => {\r\n evt.preventDefault();\r\n //ตรวจสอบค่า RefundRequestID\r\n //ถ้ามี RefundRequestID ใน location.state ฟังก์ชันจะนำไปยังหน้าแก้ไขด้วย RefundRequestID ที่กำหนดใน URL\r\n if (location.state != null && location.state.refundRequestID != null && location.state.refundRequestID != '') {\r\n setModal2(false)\r\n props.history.push({ pathname: '/refund/id/' + location.state.refundRequestID })\r\n }\r\n //ถ้าไม่มี RefundRequestID\r\n //ใช้ props.history.push เพื่อเปลี่ยนเส้นทางไปยัง URL ที่ใช้สำหรับการแก้ไขข้อมูลการขอคืนเงิน โดยใช้ RefundRequestID ที่เก็บไว้ในสถานะปัจจุบัน\r\n else {\r\n props.history.push({ pathname: '/refund/id/' + refundRequestID })\r\n }\r\n }\r\n\r\n\r\n const renderFlowLevel = (approve, index) => {\r\n \r\n var flow = FlowLevel.find(t => t.RefundApproveKey == approve.approveTypeKey);\r\n \r\n var hr = RefundApprove.find(t => t.RefundApproveKey == 0);\r\n \r\n var flowTxt = '';\r\n var tmpColor = '';\r\n if(approve.approveStatusKey == null ||approve.approveStatusKey == 0)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName : ''; \r\n }\r\n else if (approve.approveStatusKey == 1)\r\n {\r\n flowTxt = (flow != null) ? 'รอ'+flow.flowName+flow.flowActorName : '';\r\n tmpColor = '#ff9800';\r\n }\r\n else if (approve.approveStatusKey == 2)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName+flow.flowFinishName : '';\r\n tmpColor = '#4caf50';\r\n }\r\n else if (approve.approveStatusKey == -1)\r\n {\r\n flowTxt = (flow != null) ? flow.flowName+flow.flowRejectName : '';\r\n tmpColor = '#f44336';\r\n }\r\n else{\r\n \r\n }\r\n }\r\n\r\n function isDateValid(e, selectedDate) {\r\n var holiday = holidays.find(h => moment(h.holidayDate).format(\"YYYYMMDD\") === moment(e).format(\"YYYYMMDD\"))\r\n //return current.day() !== 0 && current.day() !== 6;\r\n if (holiday != null)\r\n return false\r\n else\r\n {\r\n \r\n \r\n var dt = (new Date()).setDate((new Date().getDate() - 2));\r\n \r\n if (LeaveTypeKey == 1 || (LeaveTypeKey == 2 && IsUrgent)) \r\n dt = moment(new Date()).subtract(3, 'months');\r\n else if(LeaveTypeKey == 2 && !IsUrgent)\r\n dt = (new Date()).setDate((new Date().getDate() + (RequestBefore-1)));\r\n else if(LeaveTypeKey == 3)\r\n dt = (new Date()).setDate((new Date().getDate() + (RequestBefore-1)));\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n return (e.day() !== 0 && e.day() !== 6 && e >= dt)\r\n }\r\n }\r\n\r\n function renderDay(props, currentDate, selectedDate) {\r\n var holiday = holidays.find(h => moment(h.holidayDate).format(\"YYYYMMDD\") === moment(currentDate).format(\"YYYYMMDD\"))\r\n var hdt = (holiday != null) ? holiday.name : '';\r\n \r\n // Adds 0 to the days in the days view\r\n \r\n return \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n setTitle1(e)}/>\r\n \r\n \r\n \r\n setTitle2(e)}/>\r\n \r\n \r\n \r\n \r\n \r\n\r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n inputProps={{\r\n name: \"StartDate\", placeholder: \"วันเกิด\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(StartDate).isValid() ? moment(StartDate).format('D MMMM BBBB') : '' \r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDate(e.format('YYYY-MM-DD'))}\r\n minDate={new Date(\"02-01-1994\")}\r\n \r\n />\r\n \r\n \r\n setGender(e)}/>\r\n \r\n \r\n \r\n \r\n {(location.state != null && location.state !== '' && location.state.refundRequestID != null && location.state.refundRequestID !== '') ?\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n {/* Confirm */}\r\n { setModal(false); setIcon(\"far fa-question-circle\"); }} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n \r\n \r\n \r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการคืนเงิน\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n {/* {\r\n LeaveApprove.map((item, index) => (\r\n (item.approveTypeKey != 0 || true ) ?\r\n renderFlowLevel(item, index)\r\n :\r\n \r\n ))} */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default UserRequest;\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { DateRange, Bookmarks, ExitToApp, CalendarToday } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Request from \"views/Meeting/Request.js\";\r\nimport Home from \"views/Meeting/Home\";\r\nimport MyMeeting from \"views/Meeting/MyMeeting\";\r\nimport Accept from \"views/Meeting/Accept\";\r\nimport Goto from \"views/Meeting/Goto\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"ปฏิทินการประชุม\",\r\n icon: DateRange,\r\n component: Home,\r\n layout: \"/meeting\",\r\n path: \"/index\",\r\n },\r\n {\r\n name: \"จองห้องประชุม\",\r\n icon: Bookmarks,\r\n component: Request,\r\n layout: \"/meeting\",\r\n path: \"/request\",\r\n },\r\n {\r\n name: \"ตารางประชุมของฉัน\",\r\n icon: CalendarToday,\r\n component: MyMeeting,\r\n layout: \"/meeting\",\r\n path: \"/me\",\r\n },\r\n {\r\n name: \"ออกจากระบบ\",\r\n icon: ExitToApp,\r\n component: LogoutPage,\r\n layout: \"/auth\",\r\n path: \"/logout\",\r\n },\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n แบบคำขอเข้าใช้งานระบบสารสนเทศโรงพยาบาล
\r\nกรุณาระบุรายละเอียด
\r\nยกเลิกการคืนเงิน
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n { setModal(false); setIcon(\"far fa-question-circle\"); }}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
*/}\r\n \r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nติดตามสถานะ การคืนเงิน
\r\n\r\n\r\n
\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { login, logoff,loadUserFromStorage } from \"_services/oauth\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport Datetime from 'react-datetime';\r\nimport Select from 'react-select';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport Meeting from \"layouts/HR\";\r\nimport { Phone } from \"@material-ui/icons\";\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst Request = (props) => {\r\n\r\n const _meetingID = (props.match.params.MeetingID !== undefined) ? props.match.params.MeetingID : null;\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [MeetingKey, setMeetingKey] = useState(null);\r\n const [MeetingID, setMeetingID] = useState('');\r\n const [MeetingTypeKey, setMeetingTypeKey] = useState(null);\r\n const [DepartmentKey, setDepartmentKey] = useState(null);\r\n const [TeamName, setTeamName] = useState('');\r\n const [MeetingName, setMeetingName] = useState(\"\");\r\n\r\n const [CreatorName, setCreatorName] = useState(\"\");\r\n const [EditerName, setEditerName] = useState(\"\");\r\n const [CancelerName, setCancelerName] = useState(\"\");\r\n\r\n const [MeetingDescription, setMeetingDescription] = useState('');\r\n\r\n const [MeetingStatusKey, setMeetingStatusKey] = useState(null);\r\n const [RoomKey, setRoomKey] = useState(null);\r\n const [RoomOther, setRoomOther] = useState('');\r\n const [RoomStyleKey, setRoomStyleKey] = useState(null);\r\n const [RoomStyleOther, setRoomStyleOther] = useState('');\r\n\r\n const [StartDatetime, setStartDatetime] = useState('');\r\n const [EndDatetime, setEndDatetime] = useState('');\r\n\r\n const [RoomTotalSeat, setRoomTotalSeat] = useState(0);\r\n\r\n \r\n\r\n const [StartTme, setStartTime] = useState('');\r\n const [EndTime, setEndTime] = useState('');\r\n\r\n\r\n\r\n const [CreateDatetime, setCreateDatetime] = useState('');\r\n const [LastEditDatetime, setLastEditDatetime] = useState('');\r\n const [CancelDatetime, setCancelDatetime] = useState('');\r\n\r\n\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n const [AssetKey, setAssetKey] = useState([]);\r\n const [Attendee, setAttendee] = useState([]);\r\n\r\n const [TeamGroupTypeKey, setTeamGroupTypeKey] = useState(null);\r\n const [TeamGroupKey, setTeamGroupKey] = useState(null);\r\n\r\n const [ArrAsset, setArrAsset] = useState([]);\r\n const [ArrRoom, setArrRoom] = useState([]);\r\n const [ArrRoomStyle, setArrRoomStyle] = useState([]);\r\n\r\n const [ArrTeamGroup, setArrTeamGroup] = useState([]);\r\n const [ArrTeamGroupType, setArrTeamGroupType] = useState([]);\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modalCancel, setModalCancel] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const [isEdit, setIsEdit] = useState(false);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label:\"ปกติ\", value:0}, { label:\"ด่วน\", value:1} , { label:\"ฉุกเฉิน\", value:2}];\r\n const arrMeetingType = [{ label:\"จองห้องประชุม\", value:1}, { label:\"จองรถ\", value:2}];\r\n\r\n const arrTime = [\r\n { label:\"7:00 น.\", value:'07:00', isDisabled: false},\r\n { label:\"7:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false}\r\n];\r\n\r\nconst arrTime2 = [\r\n { label:\"07:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false},\r\n { label:\"21:00 น.\", value:'21:00', isDisabled: false}\r\n];\r\n\r\nconst [ArrStartTime, setArrStartTime] = useState(arrTime);\r\nconst [ArrStopTime, setArrStopTime] = useState(arrTime2);\r\n\r\n const dateTypeList = [{ label:\"ทั้งวัน\", value:0}, { label:\"ครึ่งวันเช้า\", value:1} , { label:\"ครึ่งวันบ่าย\", value:2}];\r\n\r\n const myRef = useRef(null);\r\n\r\n\r\n\r\n var token = localStorage.getItem(\"token\");\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (_meetingID != null && _meetingID != '') {\r\n props.history.push({\r\n pathname: '/meeting/request',\r\n state: {\r\n meetingID: _meetingID\r\n }\r\n })\r\n }\r\n\r\n\r\n axios(\"/api/v1/meeting/room\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"roomKey\":').join('\"value\":'));\r\n setArrRoom(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/meeting/style\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"roomStyleKey\":').join('\"value\":'));\r\n setArrRoomStyle(json)\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n axios(\"/api/v1/meeting/asset\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"assetKey\":').join('\"value\":'));\r\n setArrAsset(json)\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n axios(\"/api/v1/teamgrouptype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"teamGroupTypeKey\":').join('\"value\":'));\r\n setArrTeamGroupType(json)\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n\r\n if(location.state != null)\r\n {\r\n if(location.state.meetingID != null && location.state.meetingID != '')\r\n {\r\n setIsEdit(true)\r\n // fetch(\"/api/v1/meeting/\"+location.state.meetingID, {method: \"GET\"})\r\n //.then(response => response.json())\r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/meeting/\" + location.state.meetingID,\r\n headers: { 'referpage': '/meeting/request/'+ location.state.meetingID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res=resEdit.data.data;\r\n //console.log(resEdit)\r\n setMeetingID(res.meetingID)\r\n setMeetingName(res.meetingName)\r\n setStartDatetime(moment(res.startDatetime).format('YYYY-MM-DD').toString())\r\n setEndDatetime(moment(res.endDatetime).format('YYYY-MM-DD').toString())\r\n setStartTime(moment(res.startDatetime).format('HH:mm'))\r\n setEndTime(moment(res.endDatetime).format('HH:mm')) \r\n setRoomKey(res.roomKey)\r\n setRoomStyleKey(res.roomStyleKey)\r\n setRoomTotalSeat(res.roomTotalSeat != null ? res.roomTotalSeat : 0)\r\n setMeetingDescription(res.meetingDescription)\r\n setContactPhone(res.contactPhone)\r\n\r\n setCreatorName(resEdit.data.creatorName);\r\n setEditerName(resEdit.data.editerName);\r\n setCancelerName(resEdit.data.cancelerName);\r\n\r\n setCreateDatetime(res.createDatetime);\r\n setLastEditDatetime(res.lastEditDatetime);\r\n setCancelDatetime(res.cancelDatetime);\r\n\r\n \r\n var _rAsset = [];\r\n res.meetingDataRoomAsset.map((row) => (\r\n\r\n _rAsset.push({value: row.assetKey, label: row.meetingRoomAsset.name})\r\n\r\n ));\r\n setAssetKey(_rAsset)\r\n\r\n /*\r\n var _rAttendee = [];\r\n res.meetingDataAttendee.map((row) => (\r\n _rAttendee.push(row.userView)\r\n ));\r\n */\r\n const _rAttendee = res.meetingDataAttendee.map(row => {\r\n row.userView['attendStatusKey'] = (row.attendStatusKey != null) ? row.attendStatusKey : 0;\r\n return row.userView;\r\n });\r\n setAttendee(_rAttendee)\r\n \r\n },\r\n error => {\r\n\r\n }\r\n ); \r\n\r\n }\r\n else{\r\n setRoomKey(location.state.roomKey)\r\n setMeetingName(location.state.meetingName)\r\n setStartDatetime(moment(location.state.startDatetime).format('YYYY-MM-DD').toString())\r\n setEndDatetime(moment(location.state.stopDatetime).format('YYYY-MM-DD').toString())\r\n setStartTime(moment(location.state.startDatetime).format('HH:mm'))\r\n setEndTime(moment(location.state.stopDatetime).format('HH:mm')) \r\n }\r\n }\r\n else{\r\n \r\n }\r\n\r\n \r\n\r\n }, [/*token*/]);\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if(MeetingName == '')\r\n {\r\n cntErr+=1;\r\n errMsg.push(\r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n setMeetingName(e.target.value)} />\r\n \r\n \r\n \r\n \r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"StartDatetime\", placeholder: \"วันที่ประชุม\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDate(e.format('YYYY-MM-DD'))}\r\n \r\n \r\n />\r\n\r\n \r\n \r\n \r\n\r\n handleStartTime(e.value) } />\r\n \r\n\r\n setEndTime(e.value) } />\r\n \r\n\r\n \r\n \r\n\r\n \r\n {/* \r\n setMeetingTypeKey(e.value) } />\r\n \r\n */} \r\n setRoomKey(e.value) } />\r\n \r\n setRoomStyleKey(e.value) } />\r\n \r\n setRoomTotalSeat(e.target.value)} />\r\n \r\n\r\n /* setAssetKey([...AssetKey, e])*/ setAssetKey(e) } />\r\n {/* \r\n setAssetKey([...AssetKey, e]) } \r\n />\r\n */}\r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n {/* \r\n \r\n handleTeamGroup(e.value) } />\r\n \r\n setTeamGroupKey(e.value) } />\r\n \r\n \r\n */}\r\n\r\n \r\n \r\n setContactPhone(e.target.value)} />\r\n \r\n\r\n {(location.state != null && location.state != '' && location.state.meetingID != null && location.state.meetingID != '') ? \r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการประชุม\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n { handleAttendee(e) } } />\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {(location.state != null && location.state != '' && location.state.meetingID != null && location.state.meetingID != '') ? \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n );\r\n}\r\nexport default Request;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst Home = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [room1, setRoom1] = useState([]);\r\n const [room2, setRoom2] = useState([]);\r\n const [room3, setRoom3] = useState([]);\r\n const [room4, setRoom4] = useState([]);\r\n const [room5, setRoom5] = useState([]);\r\n const [room6, setRoom6] = useState([]);\r\n const [roomAll, setRoomAll] = useState([]);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [RoomKey, setRoomKey] = useState(0);\r\n const [ArrRoom, setArrRoom] = useState([]);\r\n const [MeetingKey, setMeetingKey] = useState(null);\r\n const [MeetingName, setMeetingName] = useState(\"\");\r\n const [MeetingTypeKey, setMeetingTypeKey] = useState(null);\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [StartType, setStartType] = useState(\"\");\r\n\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [EndType, setEndType] = useState(\"\");\r\n const [MeetingDescription, setMeetingDescription] = useState('');\r\n\r\n const [ContactAddress, setContactAddress] = useState('');\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n const [Attendee, setAttendee] = useState([]);\r\n\r\n const [IsCancel, setIsCancel] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isShowCalendar, setIsShowCalendar] = useState(true);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label: \"ปกติ\", value: 0 }, { label: \"ด่วน\", value: 1 }, { label: \"ฉุกเฉิน\", value: 2 }];\r\n const dateTypeList = [{ label: \"ทั้งวัน\", value: 0 }, { label: \"ครึ่งวันเช้า\", value: 1 }, { label: \"ครึ่งวันบ่าย\", value: 2 }];\r\n\r\n const myRef = useRef(null);\r\n\r\n useEffect(() => {\r\n\r\n axios(\"/api/v1/meeting/room0\")\r\n .then(\r\n result => {\r\n\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"roomKey\":').join('\"value\":'));\r\n\r\n setArrRoom(json)\r\n\r\n getMeeting()\r\n }, error => { console.log(error); }\r\n );\r\n\r\n\r\n }, [])\r\n\r\n\r\n const getMeeting = () => {\r\n axios.get('/api/v1/meeting/header/')\r\n .then(\r\n result => {\r\n\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"meetingName\":').join('\"title\":').split('\"startDatetime\":').join('\"start\":')\r\n .split('\"endDatetime\":').join('\"end\":').split('\"meetingID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setRoomAll(json);\r\n const r1 = json.filter(e => e.roomKey == 1);\r\n const r2 = json.filter(e => e.roomKey == 2);\r\n const r3 = json.filter(e => e.roomKey == 3);\r\n const r4 = json.filter(e => e.roomKey == 4);\r\n const r5 = json.filter(e => e.roomKey == 5);\r\n const r6 = json.filter(e => e.roomKey == 6);\r\n setRoom1(r1);\r\n setRoom2(r2);\r\n setRoom3(r3);\r\n setRoom4(r4);\r\n setRoom5(r5);\r\n setRoom6(r6);\r\n setIsLoading(false);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n /*\r\n if (name === null || name === \"\") {\r\n cntErr += 1;\r\n errMsg.push(แบบฟอร์มจองห้องประชุม
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setMeetingDescription(e.target.value) }\r\n >\r\n
\r\n \r\n\r\n\r\n ผู้จอง {CreatorName} {CreateDatetime != \"\" ? moment(CreateDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n \r\n {EditerName != \"\" ?\r\n แก้ไขล่าสุด {EditerName} {LastEditDatetime != \"\" ? moment(LastEditDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n\r\n {CancelerName != \"\" ?\r\n ยกเลิกโดย {CancelerName} {CancelerName != \"\" ? moment(CancelDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n \r\n :\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nผู้เข้าร่วมประชุม
\r\n\r\n\r\n
บันทึกข้อมูล
\r\n\r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n \r\n setRoomKey(e.value)} />\r\n : <>\r\n }\r\n \r\n\r\n setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แสดงปฏิทิน : แสดงรายการ }\r\n \r\n \r\n \r\n \r\n {(!isShowCalendar) ?\r\n \r\n \r\n :\r\n\r\n \r\n\r\n \r\n }\r\n {/*\r\n \r\n { console.log(e) } } />\r\n \r\n \r\n*/}\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.roomKey);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการประชุม
\r\n \r\n \r\n\r\n\r\n\r\n\r\n
\r\n \r\n\r\n {(RoomKey == 0 || RoomKey == 1) ?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.roomKey);\r\n const _room = ArrRoom.find(c => c.value === eventInfo.event.extendedProps.roomKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {eventInfo.event.title} {roomTxt}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Home;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst MyMeeting = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [room1, setRoom1] = useState([]);\r\n const [room2, setRoom2] = useState([]);\r\n const [room3, setRoom3] = useState([]);\r\n const [room4, setRoom4] = useState([]);\r\n const [room5, setRoom5] = useState([]);\r\n const [room6, setRoom6] = useState([]);\r\n const [roomAll, setRoomAll] = useState([]);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [RoomKey, setRoomKey] = useState(0);\r\n const [ArrRoom, setArrRoom] = useState([]);\r\n const [MeetingKey, setMeetingKey] = useState(null);\r\n const [MeetingName, setMeetingName] = useState(\"\");\r\n const [MeetingTypeKey, setMeetingTypeKey] = useState(null);\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [StartType, setStartType] = useState(\"\");\r\n\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [EndType, setEndType] = useState(\"\");\r\n const [MeetingDescription, setMeetingDescription] = useState('');\r\n\r\n const [ContactAddress, setContactAddress] = useState('');\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n const [Attendee, setAttendee] = useState([]);\r\n\r\n const [IsCancel, setIsCancel] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label: \"ปกติ\", value: 0 }, { label: \"ด่วน\", value: 1 }, { label: \"ฉุกเฉิน\", value: 2 }];\r\n const dateTypeList = [{ label: \"ทั้งวัน\", value: 0 }, { label: \"ครึ่งวันเช้า\", value: 1 }, { label: \"ครึ่งวันบ่าย\", value: 2 }];\r\n\r\n const myRef = useRef(null);\r\n\r\n useEffect(() => {\r\n\r\n axios(\"/api/v1/meeting/room0\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"roomKey\":').join('\"value\":'));\r\n setArrRoom(json)\r\n\r\n getMeeting()\r\n }, error => { console.log(error); }\r\n );\r\n\r\n\r\n }, [/*isLoading*/])\r\n\r\n\r\n const getMeeting = () => {\r\n\r\n axios.get('/api/v1/meeting/myheader/')\r\n .then(\r\n result => {\r\n \r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"meetingName\":').join('\"title\":').split('\"startDatetime\":').join('\"start\":')\r\n .split('\"endDatetime\":').join('\"end\":').split('\"meetingID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setRoomAll(json);\r\n const r1 = json.filter(e => e.roomKey == 1);\r\n const r2 = json.filter(e => e.roomKey == 2);\r\n const r3 = json.filter(e => e.roomKey == 3);\r\n const r4 = json.filter(e => e.roomKey == 4);\r\n const r5 = json.filter(e => e.roomKey == 5);\r\n const r6 = json.filter(e => e.roomKey == 6);\r\n setRoom1(r1);\r\n setRoom2(r2);\r\n setRoom3(r3);\r\n setRoom4(r4);\r\n setRoom5(r5);\r\n setRoom5(r6);\r\n setIsLoading(false);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n\r\n /*\r\n fetch(\"/api/v1/mymeetingheader\")\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data).split('\"meetingName\":').join('\"title\":').split('\"startDatetime\":').join('\"start\":')\r\n .split('\"endDatetime\":').join('\"end\":').split('\"meetingID\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setRoomAll(json);\r\n const r1 = json.filter(e => e.roomKey == 1);\r\n const r2 = json.filter(e => e.roomKey == 2);\r\n const r3 = json.filter(e => e.roomKey == 3);\r\n const r4 = json.filter(e => e.roomKey == 4);\r\n const r5 = json.filter(e => e.roomKey == 5);\r\n setRoom1(r1);\r\n setRoom2(r2);\r\n setRoom3(r3);\r\n setRoom4(r4);\r\n setRoom5(r5);\r\n setIsLoading(false);\r\n }\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n */\r\n }\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n /*\r\n if (name === null || name === \"\") {\r\n cntErr += 1;\r\n errMsg.push(\r\n\r\n \r\n\r\n \r\n \r\n \r\n setRoomKey(e.value)} />\r\n : <>\r\n }\r\n \r\n\r\n setIsShowCalendar(!isShowCalendar)} /> {(isShowCalendar) ? แยกห้อง : รายการ }\r\n \r\n \r\n \r\n \r\n {(!isShowCalendar) ?\r\n \r\n \r\n :\r\n\r\n \r\n\r\n \r\n }\r\n {/*\r\n \r\n { console.log(e) } } />\r\n \r\n \r\n*/}\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.roomKey);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n ปฏิทินการประชุมของฉัน
\r\n \r\n\r\n\r\n\r\n\r\n
\r\n \r\n \r\n\r\n\r\n
\r\n \r\n\r\n {(RoomKey == 0 || RoomKey == 1) ?\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n\r\n function renderEventContent2(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === eventInfo.event.extendedProps.roomKey);\r\n const _room = ArrRoom.find(c => c.value === eventInfo.event.extendedProps.roomKey);\r\n\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isCancel == true) ? 'red' : _c.forecolor) : '#000000';\r\n const roomTxt = (_room !== undefined) ? _room.label : '';\r\n const strikeTxt = (eventInfo.event.extendedProps.isCancel == true) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n {eventInfo.event.title} {roomTxt}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default MyMeeting;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\nimport { loadCSS } from 'fg-loadcss';\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport clsx from 'clsx';\r\n\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\n\r\nimport TreeView from '@material-ui/lab/TreeView';\r\nimport TreeItem from '@material-ui/lab/TreeItem';\r\n\r\nimport Datetime from 'react-datetime';\r\nimport { red } from '@material-ui/core/colors';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Toolbar from '@material-ui/core/Toolbar';\r\nimport Typography from '@material-ui/core/Typography';\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport avatar from \"assets/img/faces/marc.jpg\";\r\nimport Tabs from '@material-ui/core/Tabs';\r\nimport Tab from '@material-ui/core/Tab';\r\nimport MailIcon from '@material-ui/icons/Mail';\r\nimport ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';\r\nimport ArrowRightIcon from '@material-ui/icons/ArrowRight';\r\nimport PhoneIcon from '@material-ui/icons/Phone';\r\nimport FavoriteIcon from '@material-ui/icons/Favorite';\r\nimport PersonPinIcon from '@material-ui/icons/PersonPin';\r\nimport HelpIcon from '@material-ui/icons/Help';\r\nimport ShoppingBasket from '@material-ui/icons/ShoppingBasket';\r\nimport ThumbDown from '@material-ui/icons/ThumbDown';\r\nimport ThumbUp from '@material-ui/icons/ThumbUp';\r\nimport Box from '@material-ui/core/Box';\r\nimport AppBar from '@material-ui/core/AppBar';\r\n\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ShareIcon from '@material-ui/icons/Share';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport PropTypes from 'prop-types';\r\nimport Icon from '@material-ui/core/Icon';\r\n\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\nimport Paper from '@material-ui/core/Paper';\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n Modal, ModalBody \r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\n\r\nconst styles = {};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n \r\n }));\r\n \r\n\r\nconst Accept = (props) => {\r\n\r\n const AttendeeID = (props.match.params.AttendeeID !== undefined) ? props.match.params.AttendeeID : null;\r\n\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [room1, setRoom1] = useState([]);\r\n const [room2, setRoom2] = useState([]);\r\n const [room3, setRoom3] = useState([]);\r\n const [room4, setRoom4] = useState([]);\r\n const [room5, setRoom5] = useState([]);\r\n const [roomAll, setRoomAll] = useState([]);\r\n const [isLoading, setIsLoading] = useState(true);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n\r\n const [MeetingKey, setMeetingKey] = useState(null);\r\n const [MeetingID, setMeetingID] = useState('');\r\n const [MeetingName, setMeetingName] = useState(\"\");\r\n const [StartDatetime, setStartDatetime] = useState('');\r\n const [EndDatetime, setEndDatetime] = useState('');\r\n\r\n const [StartTme, setStartTime] = useState('');\r\n const [EndTime, setEndTime] = useState('');\r\n const [RoomKey, setRoomKey] = useState(null);\r\n\r\n const [AttendStatusKey, setAttendStatusKey] = useState(0);\r\n const [AttendStatusName, setAttendStatusName] = useState('');\r\n\r\n\r\n const [IsUrgent, setIsUrgent] = useState(false);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [StartType, setStartType] = useState(\"\");\r\n\r\n const [IsMoreDate, setIsMoreDate] = useState(false);\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [EndType, setEndType] = useState(\"\");\r\n const [MeetingDescription, setMeetingDescription] = useState('');\r\n\r\n const [ContactAddress, setContactAddress] = useState('');\r\n const [ContactPhone, setContactPhone] = useState('');\r\n\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [holidayText, setHolidayText] = useState('');\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidays, setHolidays] = useState([]);\r\n const [Attendee, setAttendee] = useState([]);\r\n const [toggleEdit, setToggleEdit] = useState(false);\r\n\r\n const [IsCancel, setIsCancel] = useState(false);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const [expanded, setExpanded] = React.useState(true);\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const urgentList = [{ label: \"ปกติ\", value: 0 }, { label: \"ด่วน\", value: 1 }, { label: \"ฉุกเฉิน\", value: 2 }];\r\n const attendstatus = [{ label: \"\", value: 0 }, { label: \"เข้าร่วม\", value: 1 }, { label: \"มอบหมายผู้เข้าร่วมแทน\", value: 2 }, { label: \"ไม่เข้าร่วม\", value: 3 }];\r\n const dateTypeList = [{ label: \"ทั้งวัน\", value: 0 }, { label: \"ครึ่งวันเช้า\", value: 1 }, { label: \"ครึ่งวันบ่าย\", value: 2 }];\r\n\r\n const myRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const node = loadCSS(\r\n 'https://use.fontawesome.com/releases/v6.3.0/css/all.css',\r\n document.querySelector('#font-awesome-css'),\r\n );\r\n\r\n axios.get('/api/v1/meeting/attendee/' + AttendeeID, {headers: { 'referpage': '/meeting/accept' }})\r\n .then(\r\n result => {\r\n\r\n if (result.data.result == 200) {\r\n var res = result.data.data;\r\n setMeetingID(res.meetingID)\r\n setMeetingName(res.meetingName)\r\n setStartDatetime(moment(res.startDatetime).format('YYYY-MM-DD').toString())\r\n setEndDatetime(moment(res.endDatetime).format('YYYY-MM-DD').toString())\r\n setStartTime(moment(res.startDatetime).format('HH:mm'))\r\n setEndTime(moment(res.endDatetime).format('HH:mm'))\r\n setRoomKey(res.roomKey)\r\n setMeetingDescription(res.meetingDescription)\r\n setContactPhone(res.contactPhone)\r\n //setIcon(\"far fa-question-circle\");\r\n //setModalCancel(false)\r\n //setModal2(true)\r\n }\r\n else {\r\n alert(result.data.msg)\r\n props.history.push({ pathname: '/meeting/index' })\r\n\r\n }\r\n\r\n },\r\n error => {\r\n\r\n\r\n props.history.push({\r\n pathname: '/auth/login-page',\r\n state: {\r\n redirect: '/meeting/accept/' + AttendeeID\r\n }\r\n })\r\n\r\n }\r\n );\r\n\r\n }, [])\r\n\r\n\r\n const handleSubmit = (e, val) => {\r\n \r\n e.preventDefault();\r\n setAttendStatusKey(val);\r\n var atd = attendstatus.filter(e => e.value == val)[0];\r\n setAttendStatusName(atd.label);\r\n\r\n if(val == 1 || val == 3)\r\n {\r\n var json = {attendStatusKey: val}\r\n handleConfirm(json);\r\n }\r\n\r\n \r\n };\r\n\r\n const handleConfirm = body => {\r\n \r\n axios.put('/api/v1/meeting/attendee/' + AttendeeID, body)\r\n .then(\r\n result => {\r\n\r\n if (result.data.result == 200) {\r\n setModal2(true)\r\n }\r\n else {\r\n setIcon(\"far fa-question-circle\");\r\n setErrMsg(result.data.msg)\r\n setModalError(true)\r\n }\r\n\r\n },\r\n error => { console.log(error); }\r\n ); \r\n\r\n };\r\n\r\n\r\n\r\n\r\n const test = e => {\r\n myRef.current.scrollIntoView()\r\n };\r\n\r\n const handleStartDate = (date) => {\r\n\r\n\r\n }\r\n const handleExpandClick = () => {\r\n console.log(expanded)\r\n setExpanded(!expanded);\r\n };\r\n \r\n const handleEmpData = (_val) => {\r\n //setExpanded(false);\r\n setToggleEdit(false);\r\n var json = {attendStatusKey: AttendStatusKey, standinUserName: _val[0].userName}\r\n\r\n\r\n console.log(json);\r\n handleConfirm(json);\r\n\r\n }\r\n\r\n\r\n\r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n {/* Success */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n {(AttendStatusKey == 2) ? \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleEmpData(e)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n :<>\r\n }\r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default Accept;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst Goto = (props) => {\r\n const _meetingID = (props.match.params.MeetingID !== undefined) ? props.match.params.MeetingID : null;\r\n \r\n useEffect(() => {\r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\",\r\n headers: { 'referpage': '/meeting/request' }\r\n })\r\n .then(\r\n result => {\r\n\r\n if (_meetingID != null && _meetingID != '') {\r\n props.history.push({\r\n pathname: '/meeting/request',\r\n state: {\r\n meetingID: _meetingID\r\n }\r\n })\r\n }\r\n\r\n },\r\n error => {\r\n props.history.push({\r\n pathname: '/auth/login-page',\r\n state: {\r\n redirect: '/meeting/id/' + _meetingID\r\n }\r\n })\r\n }\r\n ); \r\n\r\n \r\n\r\n\r\n }, [])\r\n\r\n return (\r\n\r\n ตอบรับการประชุม
\r\n \r\n\r\n\r\n เรื่อง : {MeetingName}\r\n\r\n\r\n
\r\n \r\n \r\n วันที่ : {StartDatetime} เวลา : {StartTme} - {EndTime}\r\n
\r\n \r\n \r\n สถานะ : {AttendStatusName}\r\n
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n { setModal2(false);}}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nผู้เข้าร่วมประชุมแทน {expanded}
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Goto;","import React, { useState, useEffect, useRef} from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { login, logoff,loadUserFromStorage } from \"_services/oauth\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport Datetime from 'react-datetime';\r\nimport Select from 'react-select';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport Meeting from \"layouts/HR\";\r\nimport { Phone } from \"@material-ui/icons\";\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n cardTitleCustom: {\r\n background: \"linear-gradient(to right, #ff7e5f, #feb47b)\",\r\n margin: \"-20px 15px 15px 15px\"\r\n }\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst Request = (props) => {\r\n\r\n const _vbID = (props.match.params.VBID !== undefined) ? props.match.params.VBID : null;\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidayText, setHolidayText] = useState('');\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n\r\n\r\n const [StartPlace, setStartPlace] = useState(\"โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\"); \r\n const [EndPlace, setEndPlace] = useState(\"\"); \r\n const [VBDescription, setVBDescription] = useState(\"\");\r\n const [VBObjective, setVBObjective] = useState(\"\"); \r\n const [StartDatetime, setStartDatetime] = useState(\"\");\r\n const [StartTime, setStartTime] = useState(\"\");\r\n const [EndDatetime, setEndDatetime] = useState(\"\");\r\n const [EndTime, setEndTime] = useState(\"\"); \r\n const [TotalPassenger, setTotalPassenger] = useState(0);\r\n const [ContactPhone, setContactPhone] = useState(\"\"); \r\n\r\n\r\n\r\n const [VBKey, setVBKey] = useState(null); \r\n const [VBID, setVBID] = useState(null); \r\n const [VBTypeKey, setVBTypeKey] = useState(null); \r\n const [TeamGroupTypeKey, setTeamGroupTypeKey] = useState(null); \r\n const [TeamGroupKey, setTeamGroupKey] = useState(null); \r\n const [DepartmentKey, setDepartmentKey] = useState(null); \r\n const [TeamName, setTeamName] = useState(null); \r\n const [VBName, setVBName] = useState(null); \r\n\r\n const [VBStatusKey, setVBStatusKey] = useState(null); \r\n const [VehicleKey, setVehicleKey] = useState(null); \r\n const [VehicleOther, setVehicleOther] = useState(null); \r\n const [VBStyleKey, setVBStyleKey] = useState(null); \r\n\r\n const [StartLatLong, setStartLatLong] = useState(null); \r\n const [EndLatLong, setEndLatLong] = useState(null); \r\n\r\n const [StartGauge, setStartGauge] = useState(null); \r\n const [EndGauge, setEndGauge] = useState(null); \r\n const [DriverUserName, setDriverUserName] = useState(null); \r\n const [ApproveCode, setApproveCode] = useState(null); \r\n const [ApproveDatetime, setApproveDatetime] = useState(null);\r\n //const [ApproveDatetime_Time, setApproveDatetime_Time] = useState(null); \r\n const [CreatorCode, setCreatorCode] = useState(null); \r\n const [CreateDatetime, setCreateDatetime] = useState(null);\r\n //const [CreateDatetime_Time, setCreateDatetime_Time] = useState(null); \r\n const [LastEditerCode, setLastEditerCode] = useState(null); \r\n const [LastEditDatetime, setLastEditDatetime] = useState(null);\r\n //const [LastEditDatetime_Time, setLastEditDatetime_Time] = useState(null); \r\n const [IsCancel, setIsCancel] = useState(null); \r\n const [CancelCode, setCancelCode] = useState(null); \r\n const [CancelDatetime, setCancelDatetime] = useState(null);\r\n //const [CancelDatetime_Time, setCancelDatetime_Time] = useState(null);\r\n \r\n const [CreatorName, setCreatorName] = useState(\"\");\r\n const [EditerName, setEditerName] = useState(\"\");\r\n const [CancelerName, setCancelerName] = useState(\"\");\r\n\r\n\r\n const [ArrVB, setVB] = useState([]); \r\n const [ArrVBType, setVBType] = useState([]); \r\n const [ArrTeamGroupType, setTeamGroupType] = useState([]); \r\n const [ArrTeamGroup, setTeamGroup] = useState([]); \r\n const [ArrDepartment, setDepartment] = useState([]); \r\n const [ArrVBStatus, setVBStatus] = useState([]); \r\n const [ArrVehicle, setVehicle] = useState([]); \r\n const [ArrVBStyle, setVBStyle] = useState([]); \r\n\r\n const [Attendee, setAttendee] = useState([]);\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modalCancel, setModalCancel] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isEdit, setIsEdit] = useState(false);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const arrTime = [\r\n { label:\"7:00 น.\", value:'07:00', isDisabled: false},\r\n { label:\"7:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false}\r\n];\r\n\r\nconst arrTime2 = [\r\n { label:\"07:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false},\r\n { label:\"21:00 น.\", value:'21:00', isDisabled: false}\r\n];\r\n\r\nconst [ArrStartTime, setArrStartTime] = useState(arrTime);\r\nconst [ArrStopTime, setArrStopTime] = useState(arrTime2);\r\n\r\nconst myRef = useRef(null);\r\n\r\n\r\nvar token = localStorage.getItem(\"token\");\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (_vbID != null && _vbID != '') {\r\n props.history.push({\r\n pathname: '/vehicle/request',\r\n state: {\r\n VBID: _vbID\r\n }\r\n })\r\n }\r\n\r\n axios(\"/api/v1/vehicle/vb\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vbKey\":').join('\"value\":'));\r\n setVB(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vbtype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vbTypeKey\":').join('\"value\":'));\r\n setVBType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/teamgrouptype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"teamGroupTypeKey\":').join('\"value\":'));\r\n setTeamGroupType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/teamgroup\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"teamGroupKey\":').join('\"value\":'));\r\n setTeamGroup(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/department\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"departmentKey\":').join('\"value\":'));\r\n setDepartment(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vbstatus\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vbStatusKey\":').join('\"value\":'));\r\n setVBStatus(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vehicle\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vehicleKey\":').join('\"value\":'));\r\n setVehicle(json)\r\n }, error => { console.log(error); }\r\n );\r\n\r\n axios(\"/api/v1/vehicle/vbstyle\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vbStyleKey\":').join('\"value\":'));\r\n setVBStyle(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n\r\n if(location.state != null)\r\n {\r\n if (location.state.VBID != null && location.state.VBID != '')\r\n {\r\n setIsEdit(true)\r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/vehiclebooking/\" + location.state.VBID,\r\n headers: { 'referpage': '/vehicle/request/'+ location.state.VBID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res=resEdit.data.data;\r\n //console.log(resEdit)\r\n\r\n setVBKey(res.vbKey) \r\n setVBID(res.vbID) \r\n setVBTypeKey(res.vbTypeKey) \r\n setTeamGroupTypeKey(res.teamGroupTypeKey) \r\n setTeamGroupKey(res.teamGroupKey) \r\n setDepartmentKey(res.departmentKey) \r\n setTeamName(res.teamName) \r\n setVBName(res.vbName) \r\n setVBDescription(res.vbDescription) \r\n setVBObjective(res.vbObjective) \r\n setVBStatusKey(res.vbStatusKey) \r\n setVehicleKey(res.vehicleKey) \r\n setVehicleOther(res.vehicleOther) \r\n setVBStyleKey(res.vbStyleKey) \r\n setStartPlace(res.startPlace) \r\n setEndPlace(res.endPlace) \r\n setStartLatLong(res.startLatLong) \r\n setEndLatLong(res.endLatLong) \r\n setTotalPassenger(res.totalPassenger) \r\n setStartDatetime(moment(res.startDatetime).format('YYYY-MM-DD').toString())\r\n setStartTime(moment(res.startDatetime).format('HH:mm'))\r\n\r\n setEndDatetime(moment(res.endDatetime).format('YYYY-MM-DD').toString())\r\n setEndTime(moment(res.endDatetime).format('HH:mm'))\r\n\r\n setStartGauge(res.startGauge) \r\n setEndGauge(res.endGauge) \r\n setContactPhone(res.contactPhone) \r\n setDriverUserName(res.driverUserName) \r\n setApproveCode(res.approveCode) \r\n setApproveDatetime(moment(res.approveDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setCreatorCode(res.creatorCode) \r\n setCreateDatetime(moment(res.createDatetime).format('YYYY-MM-DD').toString())\r\n\r\n setLastEditerCode(res.lastEditerCode) \r\n setLastEditDatetime(moment(res.lastEditDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setIsCancel(res.isCancel) \r\n setCancelCode(res.cancelCode) \r\n setCancelDatetime(moment(res.cancelDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setCreatorName(resEdit.data.creatorName);\r\n setEditerName(resEdit.data.editerName);\r\n setCancelerName(resEdit.data.cancelerName);\r\n\r\n \r\n const _rAttendee = res.vbPassenger.map(row => {\r\n row.userView['attendStatusKey'] = (row.attendStatusKey != null) ? row.attendStatusKey : 0;\r\n return row.userView;\r\n });\r\n setAttendee(_rAttendee)\r\n \r\n \r\n },\r\n error => {\r\n\r\n }\r\n ); \r\n\r\n }\r\n else{\r\n //auto assign จาก parameter จากหน้า list\r\n //setRoomKey(location.state.roomKey)\r\n //setMeetingName(location.state.meetingName)\r\n //setStartDatetime(moment(location.state.startDatetime).format('YYYY-MM-DD').toString())\r\n //setEndDatetime(moment(location.state.stopDatetime).format('YYYY-MM-DD').toString())\r\n //setStartTime(moment(location.state.startDatetime).format('HH:mm'))\r\n //setEndTime(moment(location.state.stopDatetime).format('HH:mm')) \r\n }\r\n }\r\n else{\r\n \r\n }\r\n\r\n \r\n }, [/*token*/]);\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n \r\n if(StartPlace == '')\r\n {\r\n cntErr+=1;\r\n errMsg.push(\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n {/*\r\n setStartPlace(e.target.value)} />\r\n \r\n\r\n setEndPlace(e.target.value)} />\r\n \r\n\r\n \r\n \r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"StartDatetime\", placeholder: \"วันที่เดินทาง\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDatetime(e.format('YYYY-MM-DD'))}\r\n\r\n\r\n />\r\n\r\n\r\n \r\n \r\n\r\n\r\n handleStartTime(e.value)} />\r\n \r\n\r\n \r\n \r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"EndDatetime\", placeholder: \"วันที่กลับ\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleEndDatetime(e.format('YYYY-MM-DD'))}\r\n\r\n\r\n />\r\n\r\n\r\n \r\n \r\n\r\n\r\n setEndTime(e.value)} />\r\n \r\n\r\n\r\n setContactPhone(e.target.value)} />\r\n \r\n setTotalPassenger(e.target.value)} />\r\n \r\n\r\n {/* \r\n setVBKey(e.value) } />\r\n \r\n\r\n setVBID(e.target.value)} />\r\n \r\n\r\n setVBTypeKey(e.value) } />\r\n \r\n\r\n setTeamGroupTypeKey(e.value) } />\r\n \r\n\r\n setTeamGroupKey(e.value) } />\r\n \r\n\r\n setDepartmentKey(e.value) } />\r\n \r\n\r\n setTeamName(e.target.value)} />\r\n \r\n\r\n setVBName(e.target.value)} />\r\n \r\n\r\n setVBStatusKey(e.value) } />\r\n \r\n\r\n setVehicleKey(e.value) } />\r\n \r\n\r\n setVehicleOther(e.target.value)} />\r\n \r\n\r\n setVBStyleKey(e.value) } />\r\n \r\n\r\n setStartLatLong(e.target.value)} />\r\n \r\n\r\n setEndLatLong(e.target.value)} />\r\n \r\n\r\n setStartGauge(e.target.value)} />\r\n \r\n\r\n setEndGauge(e.target.value)} />\r\n \r\n\r\n setDriverUserName(e.target.value)} />\r\n \r\n\r\n setIsCancel(e.target.value)} />\r\n \r\n\r\n setCancelCode(e.target.value)} />\r\n \r\n */}\r\n \r\n\r\n\r\n \r\n \r\n {(location.state != null && location.state != '' && location.state.VBID != null && location.state.VBID != '') ? \r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการประชุม\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n { handleAttendee(e) } } />\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {(location.state != null && location.state != '' && location.state.meetingID != null && location.state.meetingID != '') ? \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n );\r\n}\r\nexport default Request;\r\n\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef} from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { red } from '@material-ui/core/colors';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport axios from \"axios\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n \r\n }));\r\n \r\n\r\nconst TableList = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const [data, setData] = useState([]);\r\n const [VehicleKey, setVehicleKey] = useState(null); \r\n const [AssetID\t, setAssetID\t] = useState(null); \r\n const [VehicleTypeKey\t, setVehicleTypeKey\t] = useState(null); \r\n const [Code, setCode] = useState(null); \r\n const [Name, setName] = useState(null); \r\n const [LicensePlate, setLicensePlate] = useState(null); \r\n const [Capacity, setCapacity] = useState(null); \r\n const [VehicleImage, setVehicleImage] = useState(null); \r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n useEffect(() => {\r\n axios(\"/api/v1/vehicle\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setData(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n }, [modal2]);\r\n\r\n useEffect(() => {\r\n axios(\"/api/v1/vehicle\")\r\n .then(\r\n result => {\r\n var res = result.data;\r\n setData(res.data);\r\n }, error => {console.log(error);}\r\n ); \r\n\r\n }, []);\r\n\r\n\r\n const headers = data.length == 0 ? [] : Object.keys(data[0]);\r\n const rows = data.length == 0 ? [] : data.map(item => Object.values(item));\r\n\r\n const classes = useStyles();\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n \r\n var errMsg = [];\r\n if(VehicleKey == null || VehicleKey =='')\r\n {\r\n cntErr+=1;\r\n errMsg.push(แบบฟอร์มขออนุญาติใช้รถส่วนกลาง
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n setMeetingDescription(e.target.value) }\r\n >\r\n
\r\n \r\n */}\r\n\r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setVBObjective(e.target.value)}\r\n >\r\n
\r\n \r\n\r\n\r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามารถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setVBDescription(e.target.value)}\r\n >\r\n
\r\n \r\n ผู้จอง {CreatorName} {CreateDatetime != \"\" ? moment(CreateDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n \r\n {EditerName != \"\" ?\r\n แก้ไขล่าสุด {EditerName} {LastEditDatetime != \"\" ? moment(LastEditDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n\r\n {CancelerName != \"\" ?\r\n ยกเลิกโดย {CancelerName} {CancelerName != \"\" ? moment(CancelDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n \r\n :\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nผู้โดยสาร
\r\n\r\n\r\n
บันทึกข้อมูล
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n {/* \r\n */}\r\n\r\n \r\n \r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n {/* Success */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default TableList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport {\r\n TextField,\r\n Button,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\";\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps: {\r\n paddingLeft: '40px',\r\n paddingTop: '40px',\r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n}));\r\n\r\nconst VehicleTypeList = (props) => {\r\n const tableText = 'ประเภทของยานพาหนะ';\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('code'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n const [Keyword, setKeyword] = useState('');\r\n const [typeKey, setTypeKey] = useState(''); // ใช้สำหรับการเลือกประเภทจาก TSSelect2\r\n const [arrVehicleType, setArrVehicleType] = useState([]);\r\n\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]);\r\n\r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(`/api/v1/vehicle/vehicletype?name=` + Keyword);\r\n\r\n if (response.data.result === 200) {\r\n setDataList(response.data.data);\r\n } else {\r\n setDataList([]);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n const fetchVehicleTypes = async () => {\r\n try {\r\n const response = await axios.get(`/api/v1/vehicle/vehicletype`);\r\n if (response.data.result === 200) {\r\n // ปรับข้อมูลให้สอดคล้องกับรูปแบบที่ TSSelect2 ต้องการ\r\n const formattedData = response.data.data.map(item => ({\r\n value: item.vehicleTypeKey,\r\n label: item.name\r\n }));\r\n setArrVehicleType(formattedData);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching vehicle types:', error);\r\n }\r\n };\r\n\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const sortedVehicleTypes = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n const handleEdit = (index, _data) => {\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n setSelectedData(_data);\r\n setModalOpen(true);\r\n };\r\n\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n const clearForm = () => {\r\n setSelectedData({\r\n code: '',\r\n name: '',\r\n vehicleTypeKey: ''\r\n });\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n if (isEditing) {\r\n await axios.put('/api/v1/vehicle/vehicletype/' + selectedData.vehicleTypeKey, selectedData);\r\n } else {\r\n await axios.post('/api/v1/vehicle/vehicletype', selectedData);\r\n }\r\n handleCloseModal();\r\n fetchDataList();\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n ตอบรับการประชุม
\r\n \r\n\r\n| {header} | )}\r\n
|---|
| {cell} | )}\r\n
\r\n
| \r\n | )} */}\r\n\r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n \r\n | \r\n
|---|
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal2(false)}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleTypeList;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport {\r\n TextField,\r\n Button,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\";\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps: {\r\n paddingLeft: '40px',\r\n paddingTop: '40px',\r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n}));\r\n\r\nconst VehicleList = (props) => {\r\n const tableText = 'ยานพาหนะ';\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('code'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n const [Keyword, setKeyword] = useState('');\r\n const [VehicleTypeKey, setVehicleTypeKey] = useState(0); // ใช้สำหรับการเลือกประเภทจาก TSSelect2\r\n const [arrVehicleType, setArrVehicleType] = useState([]);\r\n\r\n\r\n useEffect(() => {\r\n fetchVehicleTypes();\r\n },[]);\r\n\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword, VehicleTypeKey]);\r\n\r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get('/api/v1/vehicle/vehicle?name=' + Keyword + '&vehicleTypeKey=' + VehicleTypeKey);\r\n if (response.data.result === 200) {\r\n setDataList(response.data.data);\r\n } else {\r\n setDataList([]);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n const fetchVehicleTypes = async () => {\r\n try {\r\n const response = await axios.get(`/api/v1/vehicle/vehicletype`);\r\n if (response.data.result === 200) {\r\n // ปรับข้อมูลให้สอดคล้องกับรูปแบบที่ TSSelect2 ต้องการ\r\n const formattedData = response.data.data.map(item => ({\r\n value: item.vehicleTypeKey,\r\n label: item.name\r\n }));\r\n setArrVehicleType(formattedData);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching vehicle types:', error);\r\n }\r\n };\r\n\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const sortedVehicles = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n const handleEdit = (index, _data) => {\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n setSelectedData(_data);\r\n setModalOpen(true);\r\n };\r\n\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n const clearForm = () => {\r\n setSelectedData({\r\n code: '',\r\n name: '',\r\n vehicleKey: 0,\r\n vehicleTypeKey: '',\r\n\r\n });\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n if (isEditing) {\r\n console.log(selectedData.vehicleTypeKey)\r\n await axios.put('/api/v1/vehicle/vehicle/' + selectedData.vehicleKey, selectedData);\r\n } else {\r\n await axios.post('/api/v1/vehicle/vehicle', selectedData);\r\n }\r\n handleCloseModal();\r\n fetchDataList();\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n \r\n\r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n\r\n {isEditing ? `แก้ไข ${tableText}` : `เพิ่ม ${tableText}`}\r\n
\r\nบันทึก
\r\nยกเลิก
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n\r\n handleSelectChange('vehicleTypeKey', (e != null ? e.value : '')) } />\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleList;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport {\r\n TextField,\r\n Button,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\";\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps: {\r\n paddingLeft: '40px',\r\n paddingTop: '40px',\r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n}));\r\n\r\nconst VehicleOptionList = (props) => {\r\n const tableText = 'คำขอเพิ่มเติม';\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('code'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n const [Keyword, setKeyword] = useState('');\r\n const [typeKey, setTypeKey] = useState(''); // ใช้สำหรับการเลือกประเภทจาก TSSelect2\r\n const [arrVehicleType, setArrVehicleType] = useState([]);\r\n\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]);\r\n\r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(`/api/v1/vehicle/vehicleoption?name=` + Keyword);\r\n\r\n if (response.data.result === 200) {\r\n setDataList(response.data.data);\r\n } else {\r\n setDataList([]);\r\n }\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n\r\n const sortedVehicleOptions = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n const handleEdit = (index, _data) => {\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n setSelectedData(_data);\r\n setModalOpen(true);\r\n };\r\n\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n const clearForm = () => {\r\n setSelectedData({\r\n code: '',\r\n name: '',\r\n vehicleOptionKey: 0\r\n });\r\n };\r\n\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n if (isEditing) {\r\n await axios.put('/api/v1/vehicle/vehicleoption/' + selectedData.vehicleOptionKey, selectedData);\r\n } else {\r\n await axios.post('/api/v1/vehicle/vehicleoption', selectedData);\r\n }\r\n handleCloseModal();\r\n fetchDataList();\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n setVehicleTypeKey(e != null ? e.value : '') } />\r\n \r\n \r\n\r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n\r\n {isEditing ? `แก้ไข ${tableText}` : `เพิ่ม ${tableText}`}\r\n
\r\nบันทึก
\r\nยกเลิก
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleOptionList;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from \"@material-ui/core/colors\";\r\nimport axios from \"axios\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n TextField,\r\n Button,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper,\r\n TableSortLabel,\r\n TableFooter,\r\n TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem\r\n} from \"@material-ui/core\";\r\n\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport ExpandMoreIcon from \"@material-ui/icons/ExpandMore\";\r\n\r\nimport FirstPageIcon from \"@material-ui/icons/FirstPage\";\r\nimport LastPageIcon from \"@material-ui/icons/LastPage\";\r\nimport KeyboardArrowLeft from \"@material-ui/icons/KeyboardArrowLeft\";\r\nimport KeyboardArrowRight from \"@material-ui/icons/KeyboardArrowRight\";\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from \"@material-ui/icons/Edit\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n FormGroup,\r\n Label,\r\n Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from \"reactstrap\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from \"@material-ui/core/CardActions\";\r\nimport Collapse from \"@material-ui/core/Collapse\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport TSUser from \"components/Forms/TSUser\";\r\nimport Datetime from \"react-datetime\";\r\nimport \"react-datetime/css/react-datetime.css\";\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles(theme => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1\r\n },\r\n cardTitle: {\r\n textAlign: \"center\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1\r\n },\r\n collaps: {\r\n paddingLeft: \"40px\",\r\n paddingTop: \"40px\",\r\n display: \"flex\",\r\n flexDirection: \"column-reverse\"\r\n },\r\n expand: {\r\n transform: \"rotate(0deg)\",\r\n marginLeft: \"auto\",\r\n transition: theme.transitions.create(\"transform\", {\r\n duration: theme.transitions.duration.shortest\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: \"flex-end\",\r\n position: \"absolute\" // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: \"rotate(180deg)\"\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: \"opacity 0.5s ease\"\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: \"opacity 0.5s ease\"\r\n },\r\n avatar: {\r\n backgroundColor: red[500]\r\n },\r\n tableContainer: {\r\n width: \"99.99%\",\r\n overflowX: \"auto\" // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n \"&:nth-of-type(odd)\": {\r\n backgroundColor: theme.palette.action.hover\r\n }\r\n },\r\n tableCell: {\r\n padding: \"2px\"\r\n },\r\n modalFullscreen: {\r\n width: \"100%\",\r\n height: \"100%\",\r\n margin: 0,\r\n maxWidth: \"100%\"\r\n },\r\n modalContent: {\r\n height: \"100%\",\r\n borderRadius: 0\r\n },\r\n modalBody: {\r\n overflowY: \"auto\"\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5)\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: \"center\",\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: \"center\",\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60,\r\n height: 60,\r\n borderRadius: 60 / 2,\r\n objectFit: \"cover\",\r\n objectPosition: \"100% 0\"\r\n },\r\n cardImg2: {\r\n width: 100,\r\n height: 100,\r\n borderRadius: 100 / 2,\r\n objectFit: \"cover\",\r\n objectPosition: \"100% 0\"\r\n }\r\n}));\r\n\r\nconst VehicleQueueManage = props => {\r\n const tableText = \"จัดรถ\";\r\n\r\n const host = \"\"; //'https://e.trangskin.go.th';\r\n var moment = require(\"moment\");\r\n require(\"moment/locale/th\");\r\n const classes = useStyles();\r\n\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidayText, setHolidayText] = useState(\"\");\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedRows, setSelectedRows] = useState([]);\r\n const [arrTurnGo, setArrTurnGo] = useState([]);\r\n const [arrTurnBack, setArrTurnBack] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState(\"desc\");\r\n const [orderBy, setOrderBy] = useState(\"calYear\"); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [IsValid, setIsValid] = React.useState(true);\r\n\r\n const [isNewTurn, setisNewTurn] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n\r\n //const [ArrTMoney, setTMoney] = useState([]);\r\n //const [ArrKMoney, setKMoney] = useState([]);\r\n\r\n const ArrStillTurnType = [\r\n { value: 1, label: \"ไปกลับ\" },\r\n { value: 2, label: \"เฉพาะขาไป\" },\r\n { value: 3, label: \"เฉพาะขากลับ\" }\r\n ];\r\n\r\n const [ArrTurnType, setArrTurnType] = useState([\r\n { value: 1, label: \"ไปกลับ\" },\r\n { value: 2, label: \"เฉพาะขาไป\" },\r\n { value: 3, label: \"เฉพาะขากลับ\" }\r\n ]);\r\n\r\n const [ArrVehicle, setArrVehicle] = useState([]);\r\n\r\n const [ArrVB, setArrVB] = useState([]);\r\n\r\n const [TurnKey, setTurnKey] = useState(0);\r\n const [VehicleKey, setVehicleKey] = useState(0);\r\n const [VBKey, setVBKey] = useState(0);\r\n const [TypeKey, setTypeKey] = useState(0);\r\n\r\n const arrTime = [\r\n { label: \"7:00 น.\", value: \"07:00\", isDisabled: false },\r\n { label: \"7:30 น.\", value: \"07:30\", isDisabled: false },\r\n { label: \"8:00 น.\", value: \"08:00\", isDisabled: false },\r\n { label: \"8:30 น.\", value: \"08:30\", isDisabled: false },\r\n { label: \"9:00 น.\", value: \"09:00\", isDisabled: false },\r\n { label: \"9:30 น.\", value: \"09:30\", isDisabled: false },\r\n { label: \"10:00 น.\", value: \"10:00\", isDisabled: false },\r\n { label: \"10:30 น.\", value: \"10:30\", isDisabled: false },\r\n { label: \"11:00 น.\", value: \"11:00\", isDisabled: false },\r\n { label: \"11:30 น.\", value: \"11:30\", isDisabled: false },\r\n { label: \"12:00 น.\", value: \"12:00\", isDisabled: false },\r\n { label: \"12:30 น.\", value: \"12:30\", isDisabled: false },\r\n { label: \"13:00 น.\", value: \"13:00\", isDisabled: false },\r\n { label: \"13:30 น.\", value: \"13:30\", isDisabled: false },\r\n { label: \"14:00 น.\", value: \"14:00\", isDisabled: false },\r\n { label: \"14:30 น.\", value: \"14:30\", isDisabled: false },\r\n { label: \"15:00 น.\", value: \"15:00\", isDisabled: false },\r\n { label: \"15:30 น.\", value: \"15:30\", isDisabled: false },\r\n { label: \"16:00 น.\", value: \"16:00\", isDisabled: false },\r\n { label: \"16:30 น.\", value: \"16:30\", isDisabled: false },\r\n { label: \"17:00 น.\", value: \"17:00\", isDisabled: false },\r\n { label: \"17:30 น.\", value: \"17:30\", isDisabled: false },\r\n { label: \"18:00 น.\", value: \"18:00\", isDisabled: false },\r\n { label: \"18:30 น.\", value: \"18:30\", isDisabled: false },\r\n { label: \"19:00 น.\", value: \"19:00\", isDisabled: false },\r\n { label: \"19:30 น.\", value: \"19:30\", isDisabled: false },\r\n { label: \"20:00 น.\", value: \"20:00\", isDisabled: false },\r\n { label: \"20:30 น.\", value: \"20:30\", isDisabled: false }\r\n ];\r\n\r\n const arrTime2 = [\r\n { label: \"07:30 น.\", value: \"07:30\", isDisabled: false },\r\n { label: \"8:00 น.\", value: \"08:00\", isDisabled: false },\r\n { label: \"8:30 น.\", value: \"08:30\", isDisabled: false },\r\n { label: \"9:00 น.\", value: \"09:00\", isDisabled: false },\r\n { label: \"9:30 น.\", value: \"09:30\", isDisabled: false },\r\n { label: \"10:00 น.\", value: \"10:00\", isDisabled: false },\r\n { label: \"10:30 น.\", value: \"10:30\", isDisabled: false },\r\n { label: \"11:00 น.\", value: \"11:00\", isDisabled: false },\r\n { label: \"11:30 น.\", value: \"11:30\", isDisabled: false },\r\n { label: \"12:00 น.\", value: \"12:00\", isDisabled: false },\r\n { label: \"12:30 น.\", value: \"12:30\", isDisabled: false },\r\n { label: \"13:00 น.\", value: \"13:00\", isDisabled: false },\r\n { label: \"13:30 น.\", value: \"13:30\", isDisabled: false },\r\n { label: \"14:00 น.\", value: \"14:00\", isDisabled: false },\r\n { label: \"14:30 น.\", value: \"14:30\", isDisabled: false },\r\n { label: \"15:00 น.\", value: \"15:00\", isDisabled: false },\r\n { label: \"15:30 น.\", value: \"15:30\", isDisabled: false },\r\n { label: \"16:00 น.\", value: \"16:00\", isDisabled: false },\r\n { label: \"16:30 น.\", value: \"16:30\", isDisabled: false },\r\n { label: \"17:00 น.\", value: \"17:00\", isDisabled: false },\r\n { label: \"17:30 น.\", value: \"17:30\", isDisabled: false },\r\n { label: \"18:00 น.\", value: \"18:00\", isDisabled: false },\r\n { label: \"18:30 น.\", value: \"18:30\", isDisabled: false },\r\n { label: \"19:00 น.\", value: \"19:00\", isDisabled: false },\r\n { label: \"19:30 น.\", value: \"19:30\", isDisabled: false },\r\n { label: \"20:00 น.\", value: \"20:00\", isDisabled: false },\r\n { label: \"20:30 น.\", value: \"20:30\", isDisabled: false },\r\n { label: \"21:00 น.\", value: \"21:00\", isDisabled: false }\r\n ];\r\n\r\n const [ArrStartTime, setArrStartTime] = useState(arrTime);\r\n const [ArrEndTime, setArrEndTime] = useState(arrTime2);\r\n\r\n const [StartTime, setStartTime] = useState(\"\");\r\n const [EndTime, setEndTime] = useState(\"\");\r\n\r\n const [vehicleAssignments, setVehicleAssignments] = useState([\r\n {\r\n startDatetime: null,\r\n startTime: null,\r\n endDatetime: null,\r\n endTime: null,\r\n turnKey: null,\r\n vehicleKey: null,\r\n vbKeyGo: [],\r\n vbKeyBack: [],\r\n arrStartTime: [],\r\n arrEndTime: []\r\n }\r\n ]);\r\n const [vehicleAssignments2, setVehicleAssignments2] = useState([\r\n {\r\n startDatetime: null,\r\n startTime: null,\r\n endDatetime: null,\r\n endTime: null,\r\n turnKey: null,\r\n vehicleKey: null,\r\n vbKeyGo: [],\r\n vbKeyBack: [],\r\n arrStartTime: [],\r\n arrEndTime: []\r\n }\r\n ]);\r\n\r\n //const [TMoneyKey, setTMoneyKey] = useState(0);\r\n //const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState(\"\");\r\n const [StartDatetime, setStartDatetime] = useState(\"\");\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n /*\r\n useEffect(() => {\r\n \r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n \r\n }, []);\r\n */\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n //if(StartDatetime != null && StartDatetime != \"\")\r\n fetchDataList();\r\n }, [StartDatetime]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n\r\n // Use useEffect to run validateTurn when vehicleAssignments is updated\r\n useEffect(() => {\r\n //setIsValid(); // Now this runs with the updated vehicleAssignments\r\n validateTurn(vehicleAssignments);\r\n }, [vehicleAssignments.length]); // This will trigger every time vehicleAssignments changes\r\n\r\n useEffect(() => {\r\n axios(\"/api/v1/vehicle/vehicle\").then(\r\n result => {\r\n var json = JSON.parse(\r\n JSON.stringify(result.data.data)\r\n .split('\"name\":')\r\n .join('\"label\":')\r\n .split('\"vehicleKey\":')\r\n .join('\"value\":')\r\n );\r\n setArrVehicle(json);\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n }, []); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(\r\n host + \"/api/v1/vehiclebooking?startDatetime=\" + StartDatetime\r\n );\r\n if (response.data.result == 200) {\r\n setDataList(response.data.data);\r\n } else setDataList([]);\r\n } catch (error) {\r\n console.error(\"Error fetching dataList:\", error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n // Toggle row selection\r\n\r\n const handleSelectRow = id => {\r\n setSelectedRows(prevSelected =>\r\n prevSelected.includes(id)\r\n ? prevSelected.filter(item => item !== id)\r\n : [...prevSelected, id]\r\n );\r\n };\r\n\r\n const handleGenerateJSON = () => {\r\n const selectedData = dataList\r\n .filter(data => selectedRows.includes(data.vbid))\r\n .map(item => ({\r\n value: item.vbid,\r\n label: item.endPlace,\r\n vbid: item.vbid,\r\n vbObjective: item.vbObjective,\r\n totalPassenger: item.totalPassenger,\r\n startDatetime: item.startDatetime,\r\n endDatetime: item.endDatetime\r\n //...item\r\n }));\r\n\r\n setSelectedRows(selectedData);\r\n setArrTurnGo(selectedData);\r\n setArrTurnBack(selectedData);\r\n console.log(selectedData); // You can show this in an alert or a modal if needed\r\n };\r\n\r\n // Add new vehicle assignment entry\r\n const handleAddAssignment = () => {\r\n //มีปัญหา ลบแล้วยังจำ ค่าเดิม\r\n\r\n if (checkTurnOver(vehicleAssignments)) { //เช็คว่าเที่ยวที่ขอใช้ ลงรถครบหรือยัง ถ้ายัง ให้เพิ่ม popup ลงเพิ่ม\r\n setVehicleAssignments([\r\n ...vehicleAssignments,\r\n {\r\n startDatetime: null,\r\n startTime: null,\r\n endDatetime: null,\r\n endTime: null,\r\n turnKey: null,\r\n vehicleKey: null,\r\n vbKeyGo: [],\r\n vbKeyBack: [],\r\n arrStartTime: [],\r\n arrEndTime: []\r\n }\r\n ]);\r\n\r\n setisNewTurn(true);\r\n }\r\n else {\r\n alert('คุณจัดเที่ยวรถครบแล้ว')\r\n }\r\n };\r\n\r\n\r\n\r\n // Remove an assignment entry by index\r\n const handleRemoveAssignment = index => {\r\n setVehicleAssignments(prevAssignments => {\r\n // Filter out the assignment by index\r\n const updatedAssignments = prevAssignments.filter((_, i) => i !== index);\r\n\r\n // Check if there are remaining assignments and modify the last one\r\n if (updatedAssignments.length > 0) {\r\n const lastIndex = updatedAssignments.length - 1;\r\n\r\n // Clear vbKeyGo and vbKeyBack for the last assignment\r\n updatedAssignments[lastIndex] = {\r\n ...updatedAssignments[lastIndex],\r\n vbKeyGo: null,\r\n vbKeyBack: null,\r\n turnKey: null\r\n };\r\n }\r\n\r\n return updatedAssignments; // Set the modified assignments\r\n });\r\n\r\n setisNewTurn(false); // Reset the new turn state\r\n };\r\n\r\n const handleRemoveAssignment2 = index => {\r\n setVehicleAssignments(vehicleAssignments.filter((_, i) => i !== index));\r\n setisNewTurn(false);\r\n //validateTurn(vehicleAssignments); //มีปัญหา ลบแล้วยังจำ ค่าเดิม\r\n };\r\n\r\n // Update the value for a specific field in the list\r\n const handleAssignmentChange = (index, field, value) => {\r\n const updatedAssignments = [...vehicleAssignments];\r\n\r\n // Update the specific field\r\n updatedAssignments[index][field] = value;\r\n\r\n if (field === \"turnKey\") {\r\n updatedAssignments[index][\"vbKeyGo\"] = null;\r\n updatedAssignments[index][\"vbKeyBack\"] = null;\r\n updatedAssignments[index][\"startDatetime\"] = null;\r\n updatedAssignments[index][\"startTime\"] = null;\r\n updatedAssignments[index][\"endDatetime\"] = null;\r\n updatedAssignments[index][\"endTime\"] = null;\r\n updatedAssignments[index][\"arrStartTime\"] = [];\r\n updatedAssignments[index][\"arrEndTime\"] = [];\r\n }\r\n\r\n // If the turnKey is 1, automatically set vbKeyBack to vbKeyGo\r\n if (field === \"vbKeyGo\" && updatedAssignments[index].turnKey === 1) {\r\n updatedAssignments[index][\"vbKeyBack\"] = value;//ถ้าไปกลับ เลือกขาไปแล้ว ใส่ค่าให้ขากลับไปพร้อมกัน\r\n }\r\n\r\n if (field === \"vbKeyGo\" || field === \"vbKeyBack\") {\r\n\r\n if (\r\n updatedAssignments[index][\"vbKeyGo\"] != null &&\r\n updatedAssignments[index][\"vbKeyGo\"].length > 0\r\n ) {\r\n const startDatetimeArray = updatedAssignments[index][\"vbKeyGo\"]\r\n .map(item => new Date(item.startDatetime)) // Convert each startDatetime to a Date object\r\n .sort((a, b) => a - b); // Sort the Date objects in ascending order\r\n\r\n updatedAssignments[index][\"arrStartTime\"] = arrTime.filter(\r\n item =>\r\n moment(\r\n moment(startDatetimeArray[0]).format(\"YYYY-MM-DD\") +\r\n \" \" +\r\n item.value\r\n ) <= moment(startDatetimeArray[0])\r\n );\r\n\r\n updatedAssignments[index][\"startDatetime\"] = moment(startDatetimeArray[0]).format(\"YYYY-MM-DD\");\r\n\r\n if (updatedAssignments[index].turnKey === 2)\r\n updatedAssignments[index][\"endDatetime\"] = moment(startDatetimeArray[0]).format(\"YYYY-MM-DD\");\r\n\r\n\r\n } else {\r\n\r\n updatedAssignments[index][\"arrStartTime\"] = [];\r\n updatedAssignments[index][\"startDatetime\"] = null;\r\n\r\n }\r\n\r\n\r\n\r\n if (\r\n updatedAssignments[index][\"vbKeyBack\"] != null &&\r\n updatedAssignments[index][\"vbKeyBack\"].length > 0\r\n ) {\r\n const endDatetimeArray = updatedAssignments[index][\"vbKeyBack\"]\r\n .map(item => new Date(item.endDatetime)) // Convert each startDatetime to a Date object\r\n .sort((a, b) => b - a); // Sort the Date objects in ascending order\r\n\r\n updatedAssignments[index][\"arrEndTime\"] = arrTime.filter(\r\n item =>\r\n moment(moment(endDatetimeArray[0]).format(\"YYYY-MM-DD\") + \" \" + item.value) >= moment(endDatetimeArray[0])\r\n );\r\n\r\n updatedAssignments[index][\"endDatetime\"] = moment(endDatetimeArray[0]).format(\"YYYY-MM-DD\");\r\n\r\n if (updatedAssignments[index].turnKey === 3)\r\n updatedAssignments[index][\"startDatetime\"] = moment(endDatetimeArray[0]).format(\"YYYY-MM-DD\");\r\n\r\n } else {\r\n if (updatedAssignments[index].turnKey === 2) {\r\n\r\n }\r\n else {\r\n updatedAssignments[index][\"endDatetime\"] = null;\r\n updatedAssignments[index][\"arrEndTime\"] = [];\r\n }\r\n\r\n }\r\n }\r\n\r\n\r\n\r\n if (field === \"startTime\" && updatedAssignments[index].turnKey === 2) {\r\n updatedAssignments[index][\"arrEndTime\"] = arrTime.filter(\r\n item =>\r\n moment(moment(updatedAssignments[index][\"endDatetime\"]).format(\"YYYY-MM-DD\") + \" \" + item.value) > moment(moment(updatedAssignments[index][\"endDatetime\"]).format(\"YYYY-MM-DD\") + \" \" + updatedAssignments[index][\"startTime\"])\r\n );\r\n\r\n updatedAssignments[index][\"vbKeyBack\"] = [];\r\n }\r\n\r\n if (field === \"endTime\" && updatedAssignments[index].turnKey === 3) {\r\n updatedAssignments[index][\"arrStartTime\"] = arrTime.filter(\r\n item =>\r\n moment(moment(updatedAssignments[index][\"startDatetime\"]).format(\"YYYY-MM-DD\") + \" \" + item.value) < moment(moment(updatedAssignments[index][\"startDatetime\"]).format(\"YYYY-MM-DD\") + \" \" + updatedAssignments[index][\"endTime\"])\r\n );\r\n updatedAssignments[index][\"vbKeyGo\"] = [];\r\n }\r\n\r\n setVehicleAssignments(updatedAssignments);\r\n };\r\n\r\n const handleGenerateJSON2 = () => {\r\n const jsonString = JSON.stringify(vehicleAssignments.map(({ arrStartTime, arrEndTime, ...rest }) => rest), null, 2);\r\n console.log(jsonString); // You can display this in a modal or download as a file\r\n validateNoOverlap(vehicleAssignments.map(({ arrStartTime, arrEndTime, ...rest }) => rest))\r\n //checkTurn(vehicleAssignments)\r\n //validateTurn(vehicleAssignments);\r\n };\r\n\r\n // Helper function to convert date and time to a Date object\r\n const combineDateTime = (date, time) => new Date(`${date}T${time}:00`);\r\n\r\n // Function to check for time overlap for the same vehicleKey\r\n const validateNoOverlap = (assignments) => {\r\n for (let i = 0; i < assignments.length; i++) {\r\n const currentAssignment = assignments[i];\r\n const currentStart = combineDateTime(currentAssignment.startDatetime, currentAssignment.startTime);\r\n const currentEnd = combineDateTime(currentAssignment.endDatetime, currentAssignment.endTime);\r\n\r\n for (let j = i + 1; j < assignments.length; j++) {\r\n const nextAssignment = assignments[j];\r\n\r\n // Only compare if the vehicleKey is the same\r\n if (currentAssignment.vehicleKey === nextAssignment.vehicleKey) {\r\n const nextStart = combineDateTime(nextAssignment.startDatetime, nextAssignment.startTime);\r\n const nextEnd = combineDateTime(nextAssignment.endDatetime, nextAssignment.endTime);\r\n\r\n // Check for overlap\r\n if ((currentStart < nextEnd && currentEnd > nextStart)) {\r\n console.log(`Overlap found between assignment ${i} and ${j}`);\r\n return false; // If overlap found, return false\r\n }\r\n }\r\n }\r\n }\r\n return true; // No overlap\r\n };\r\n\r\n\r\n const getTurn = (vehicleAssignments) => {\r\n // Extract vbKeyGo and vbKeyBack counts separately\r\n const counts = vehicleAssignments.reduce((acc, assignment) => {\r\n // Handle vbKeyGo counts\r\n if (assignment.vbKeyGo != null) {\r\n assignment.vbKeyGo.forEach(item => {\r\n const key = `${item.vbid}_${item.label}`;\r\n if (!acc[key]) {\r\n acc[key] = { vbid: item.vbid, label: item.label, countGo: 0, countBack: 0 };\r\n }\r\n acc[key].countGo += 1; // Increment countGo\r\n });\r\n }\r\n\r\n // Handle vbKeyBack counts\r\n if (assignment.vbKeyBack != null) {\r\n\r\n assignment.vbKeyBack.forEach(item => {\r\n const key = `${item.vbid}_${item.label}`;\r\n if (!acc[key]) {\r\n acc[key] = { vbid: item.vbid, label: item.label, countGo: 0, countBack: 0 };\r\n }\r\n acc[key].countBack += 1; // Increment countBack\r\n });\r\n }\r\n\r\n\r\n return acc;\r\n }, {});\r\n\r\n // Convert the result object to an array for easier viewing\r\n const result = Object.values(counts);\r\n\r\n return result;\r\n };\r\n\r\n const checkTurn = (vehicleAssignments) => {\r\n\r\n var result = getTurn(vehicleAssignments);\r\n\r\n var errMsg = \"\";\r\n var errCnt = 0;\r\n\r\n\r\n\r\n result.forEach(i => {\r\n if (i.countGo < 1) {\r\n errMsg += i.label + \" ยังไม่ได้เลือกขาไป\\r\\n\";\r\n errCnt += 1;\r\n }\r\n if (i.countBack < 1) {\r\n errMsg += i.label + \" ยังไม่ได้เลือกขากลับ\\r\\n\";\r\n errCnt += 1;\r\n }\r\n if (i.countGo > 1) {\r\n errMsg += i.label + \" เลือกขาไปเกิน 1 เที่ยว\\r\\n\";\r\n errCnt += 1;\r\n }\r\n if (i.countBack > 1) {\r\n errMsg += i.label + \" เลือกขากลับเกิน 1 เที่ยว\\r\\n\";\r\n errCnt += 1;\r\n }\r\n });\r\n\r\n\r\n\r\n\r\n console.log(errMsg);\r\n };\r\n\r\n const checkTurnOver = (vehicleAssignments) => {\r\n var result = getTurn(vehicleAssignments);\r\n\r\n let updatedRowsGo = [...selectedRows]; // Start with the current selectedRows\r\n let updatedRowsBack = [...selectedRows]; // Start with the current selectedRows\r\n\r\n result.forEach((i, index) => {\r\n //if (i.countGo == 1 && i.countBack == 1) {\r\n // updatedRows = updatedRows.filter(row => row.vbid !== i.vbid);\r\n //}\r\n if (i.countGo == 1)\r\n updatedRowsGo = updatedRowsGo.filter(row => row.vbid !== i.vbid);\r\n\r\n if (i.countBack == 1)\r\n updatedRowsBack = updatedRowsBack.filter(row => row.vbid !== i.vbid);\r\n });\r\n return updatedRowsGo.length > 0 || updatedRowsBack.length;\r\n };\r\n\r\n const validateTurn = (vehicleAssignments) => {\r\n var result = getTurn(vehicleAssignments);\r\n\r\n var TotalGo = 0;\r\n var TotalBack = 0;\r\n\r\n let updatedRowsGo = [...selectedRows]; // Start with the current selectedRows\r\n let updatedRowsBack = [...selectedRows]; // Start with the current selectedRows\r\n let updatedTurnType = [...ArrStillTurnType]; // Start with the current selectedRows\r\n\r\n //console.log(isNewTurn + \" to \" + vehicleAssignments.length+\" record\");\r\n\r\n\r\n result.forEach((i, index) => {\r\n\r\n TotalGo += i.countGo;\r\n TotalBack += i.countBack;\r\n\r\n //if (i.countGo == 1 && i.countBack == 1) {\r\n // updatedRows = updatedRows.filter(row => row.vbid !== i.vbid);\r\n //}\r\n if (i.countGo == 1)\r\n updatedRowsGo = updatedRowsGo.filter(row => row.vbid !== i.vbid);\r\n\r\n if (i.countBack == 1)\r\n updatedRowsBack = updatedRowsBack.filter(row => row.vbid !== i.vbid);\r\n\r\n\r\n });\r\n\r\n if (updatedRowsGo.length > 0)\r\n setArrTurnGo(updatedRowsGo);\r\n\r\n if (updatedRowsBack.length > 0)\r\n setArrTurnBack(updatedRowsBack);\r\n\r\n //console.log(\"Go=\" + TotalGo + \" Back=\" + TotalBack + \" row =\" + selectedRows.length);\r\n\r\n if (TotalGo == selectedRows.length) {\r\n updatedTurnType = updatedTurnType.filter(row => (row.value !== 1 && row.value !== 2));\r\n }\r\n\r\n if (TotalBack == selectedRows.length) {\r\n updatedTurnType = updatedTurnType.filter(row => (row.value !== 1 && row.value !== 3));\r\n }\r\n\r\n console.log(updatedTurnType);\r\n\r\n if (updatedTurnType.length > 0) {\r\n setArrTurnType(updatedTurnType);\r\n }\r\n else { setArrTurnType([]); }\r\n \r\n };\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = property => {\r\n const isAsc = orderBy === property && orderDirection === \"asc\";\r\n setOrderDirection(isAsc ? \"desc\" : \"asc\");\r\n setOrderBy(property);\r\n };\r\n\r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === \"asc\") {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n\r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n\r\n const handleChangeRowsPerPage = event => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n \r\n setModalOpen(true);\r\n \r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null\r\n };\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = e => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n \r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n \r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n \r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log(\"/api/v1/asset/assettype/\" + selectedData.typeKey);\r\n\r\n console.log(selectedData);\r\n if (isEditing) {\r\n await axios.put(\r\n host + \"/api/v1/asset/assettype/\" + selectedData.typeKey,\r\n selectedData\r\n );\r\n } else {\r\n await axios.post(host + \"/api/v1/asset/assettype/\", selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(\r\n host + \"/api/v1/asset/assettype?name=\" + Keyword\r\n );\r\n setDataList(response.data.data);\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n const handleHoliday = txt => {\r\n setHolidayText(txt);\r\n setModalHoliday(true);\r\n };\r\n\r\n function isDateValid(e, selectedDate) {\r\n return e > new Date().setDate(new Date().getDate() - 1);\r\n }\r\n\r\n return (\r\n รายการ{tableText}
\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n \r\n\r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n\r\n {isEditing ? `แก้ไข ${tableText}` : `เพิ่ม ${tableText}`}\r\n
\r\nบันทึก
\r\nยกเลิก
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {isEditing ? (\r\n \r\n \r\n ) : (\r\n \r\n \r\n )}\r\n \r\n \r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n handleRemoveAssignment(index)}>\r\n \r\n : <>\r\n }\r\n \r\n\r\n {/* Disable CardBody contents if it's not the last item */}\r\n \r\n \r\n \r\n \r\n {isLast ?\r\n \r\n : <>\r\n }\r\n \r\n \r\n );\r\n })}\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default VehicleQueueManage;\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { DateRange, Bookmarks, ExitToApp, CalendarToday } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Request from \"views/Vehicle/Request.js\";\r\nimport TableList from \"views/Vehicle/TableList\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\nimport { Assignment, Commute } from \"@material-ui/icons/\";\r\nimport VehicleTypeList from \"../views/Vehicle/VehicleTypeList\";\r\nimport VehicleList from \"../views/Vehicle/VehicleList\";\r\nimport VehicleOptionList from \"../views/Vehicle/VehicleOptionList\";\r\nimport VehicleQueueManage from \"../views/Vehicle/VehicleQueueManage\";\r\nimport Goto from \"views/Vehicle/Goto\";\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"ปฏิทินรถส่วนกลาง\",\r\n icon: DateRange,\r\n component: TableList,\r\n layout: \"/vehicle\",\r\n path: \"/index\",\r\n },\r\n {\r\n name: \"จัดรถ\",\r\n icon: Commute,\r\n component: VehicleQueueManage,\r\n layout: \"/vehicle\",\r\n path: \"/queuemanage\",\r\n },\r\n {\r\n name: \"แบบจองรถ\",\r\n icon: Commute,\r\n component: Request,\r\n layout: \"/vehicle\",\r\n path: \"/request\",\r\n },\r\n {\r\n name: \"ข้อมูลรถ\",\r\n icon: Assignment,\r\n component: VehicleList,\r\n layout: \"/vehicle\",\r\n path: \"/vehiclelist\",\r\n },\r\n {\r\n name: \"ข้อมูลประเภทรถ\",\r\n icon: Assignment,\r\n component: VehicleTypeList,\r\n layout: \"/vehicle\",\r\n path: \"/vehicletypelist\",\r\n },\r\n {\r\n name: \"คำขอเพิ่มเติม\",\r\n icon: Assignment,\r\n component: VehicleOptionList,\r\n layout: \"/vehicle\",\r\n path: \"/vehicleoptionlist\",\r\n },\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n รายการ{tableText}
\r\n \r\n\r\n \r\n \r\n \r\n {year + 543};\r\n }}\r\n isValidDate={isDateValid}\r\n inputProps={{\r\n name: \"StartDatetime\",\r\n placeholder: \"วันที่เดินทาง\",\r\n readOnly: \"readonly\",\r\n style: {\r\n fontSize: \"1.2em\",\r\n borderRadius: 0,\r\n paddingLeft: \"50px\",\r\n cursor: \"pointer\",\r\n background: \"#ffffff\",\r\n color: \"#000000\"\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\"\r\n timeFormat={false}\r\n onChange={e => setStartDatetime(e.format(\"YYYY-MM-DD\"))}\r\n />\r\n \r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n \r\n\r\n {/* Add more fields as necessary for other properties */}\r\n \r\n Generate JSON\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n เพิ่ม{tableText}\r\n
\r\n\r\n {selectedData.name}\r\n
\r\n\r\n {selectedData.docNo}\r\n
\r\n\r\n เพิ่ม{tableText}\r\n
\r\n \r\n\r\n {/*\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n */}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n setIcon(\"far fa-question-circle\");\r\n setModal(false);\r\n }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\nรายการ{tableText}
\r\n {index != 0 ?\r\n\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst Goto = (props) => {\r\n const _VBID = (props.match.params.VBID !== undefined) ? props.match.params.VBID : null;\r\n console.log(_VBID)\r\n useEffect(() => {\r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\",\r\n headers: { 'referpage': '/vehicle/request' }\r\n })\r\n .then(\r\n result => {\r\n\r\n if (_VBID != null && _VBID != '') {\r\n props.history.push({\r\n pathname: '/vehicle/request',\r\n state: {\r\n VBID: _VBID\r\n }\r\n })\r\n }\r\n\r\n },\r\n error => {\r\n props.history.push({\r\n pathname: '/auth/login-page',\r\n state: {\r\n redirect: '/vehicle/id/' + _VBID\r\n }\r\n })\r\n }\r\n ); \r\n\r\n \r\n\r\n\r\n }, [])\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Goto;","import React, { useState, useEffect, useRef} from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { login, logoff,loadUserFromStorage } from \"_services/oauth\";\r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport store from \"store\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\n\r\nimport Datetime from 'react-datetime';\r\nimport Select from 'react-select';\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSSelectMultiple from \"components/Forms/TSSelectMultiple\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport Meeting from \"layouts/HR\";\r\nimport { Phone } from \"@material-ui/icons\";\r\n\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n};\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst Request = (props) => {\r\n\r\n const _vBID = (props.match.params.VBID !== undefined) ? props.match.params.VBID : null;\r\n\r\n const { location, ...other } = props;\r\n const user = useSelector((state) => state.auth.user);\r\n const history = useHistory();\r\n\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const [currentDate, setcurrentDate] = useState(moment());\r\n const [holidayText, setHolidayText] = useState('');\r\n const [holidays, setHolidays] = useState([]);\r\n\r\n\r\n const [VBKey, setVBKey] = useState(null); \r\n const [VBID, setVBID] = useState(null); \r\n const [VBTypeKey, setVBTypeKey] = useState(null); \r\n const [TeamGroupTypeKey, setTeamGroupTypeKey] = useState(null); \r\n const [TeamGroupKey, setTeamGroupKey] = useState(null); \r\n const [DepartmentKey, setDepartmentKey] = useState(null); \r\n const [TeamName, setTeamName] = useState(null); \r\n const [VBName, setVBName] = useState(null); \r\n const [VBDescription, setVBDescription] = useState(null); \r\n const [VBStatusKey, setVBStatusKey] = useState(null); \r\n const [VehicleKey, setVehicleKey] = useState(null); \r\n const [VehicleOther, setVehicleOther] = useState(null); \r\n const [VBStyleKey, setVBStyleKey] = useState(null); \r\n const [StartPlace, setStartPlace] = useState(null); \r\n const [EndPlace, setEndPlace] = useState(null); \r\n const [StartLatLong, setStartLatLong] = useState(null); \r\n const [EndLatLong, setEndLatLong] = useState(null); \r\n const [TotalPassenger, setTotalPassenger] = useState(null); \r\n const [StartDatetime, setStartDatetime] = useState(null);\r\n const [StartTime, setStartTime] = useState(null); \r\n const [EndDatetime, setEndDatetime] = useState(null);\r\n const [EndTime, setEndTime] = useState(null); \r\n const [StartGauge, setStartGauge] = useState(null); \r\n const [EndGauge, setEndGauge] = useState(null); \r\n const [ContactPhone, setContactPhone] = useState(null); \r\n const [DriverUserName, setDriverUserName] = useState(null); \r\n const [ApproveCode, setApproveCode] = useState(null); \r\n const [ApproveDatetime, setApproveDatetime] = useState(null);\r\n //const [ApproveDatetime_Time, setApproveDatetime_Time] = useState(null); \r\n const [CreatorCode, setCreatorCode] = useState(null); \r\n const [CreateDatetime, setCreateDatetime] = useState(null);\r\n //const [CreateDatetime_Time, setCreateDatetime_Time] = useState(null); \r\n const [LastEditerCode, setLastEditerCode] = useState(null); \r\n const [LastEditDatetime, setLastEditDatetime] = useState(null);\r\n //const [LastEditDatetime_Time, setLastEditDatetime_Time] = useState(null); \r\n const [IsCancel, setIsCancel] = useState(null); \r\n const [CancelCode, setCancelCode] = useState(null); \r\n const [CancelDatetime, setCancelDatetime] = useState(null);\r\n //const [CancelDatetime_Time, setCancelDatetime_Time] = useState(null);\r\n \r\n const [CreatorName, setCreatorName] = useState(\"\");\r\n const [EditerName, setEditerName] = useState(\"\");\r\n const [CancelerName, setCancelerName] = useState(\"\");\r\n\r\n\r\n const [ArrVB, setVB] = useState([]); \r\n const [ArrVBType, setVBType] = useState([]); \r\n const [ArrTeamGroupType, setTeamGroupType] = useState([]); \r\n const [ArrTeamGroup, setTeamGroup] = useState([]); \r\n const [ArrDepartment, setDepartment] = useState([]); \r\n const [ArrVBStatus, setVBStatus] = useState([]); \r\n const [ArrVehicle, setVehicle] = useState([]); \r\n const [ArrVBStyle, setVBStyle] = useState([]); \r\n\r\n const [Attendee, setAttendee] = useState([]);\r\n\r\n const [modalHoliday, setModalHoliday] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modalCancel, setModalCancel] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isEdit, setIsEdit] = useState(false);\r\n\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n const arrTime = [\r\n { label:\"7:00 น.\", value:'07:00', isDisabled: false},\r\n { label:\"7:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false}\r\n];\r\n\r\nconst arrTime2 = [\r\n { label:\"07:30 น.\", value:'07:30', isDisabled: false},\r\n { label:\"8:00 น.\", value:'08:00', isDisabled: false},\r\n { label:\"8:30 น.\", value:'08:30', isDisabled: false},\r\n { label:\"9:00 น.\", value:'09:00', isDisabled: false},\r\n { label:\"9:30 น.\", value:'09:30', isDisabled: false},\r\n { label:\"10:00 น.\", value:'10:00', isDisabled: false},\r\n { label:\"10:30 น.\", value:'10:30', isDisabled: false},\r\n { label:\"11:00 น.\", value:'11:00', isDisabled: false},\r\n { label:\"11:30 น.\", value:'11:30', isDisabled: false},\r\n { label:\"12:00 น.\", value:'12:00', isDisabled: false},\r\n { label:\"12:30 น.\", value:'12:30', isDisabled: false},\r\n { label:\"13:00 น.\", value:'13:00', isDisabled: false},\r\n { label:\"13:30 น.\", value:'13:30', isDisabled: false},\r\n { label:\"14:00 น.\", value:'14:00', isDisabled: false},\r\n { label:\"14:30 น.\", value:'14:30', isDisabled: false},\r\n { label:\"15:00 น.\", value:'15:00', isDisabled: false},\r\n { label:\"15:30 น.\", value:'15:30', isDisabled: false},\r\n { label:\"16:00 น.\", value:'16:00', isDisabled: false},\r\n { label:\"16:30 น.\", value:'16:30', isDisabled: false},\r\n { label:\"17:00 น.\", value:'17:00', isDisabled: false},\r\n { label:\"17:30 น.\", value:'17:30', isDisabled: false},\r\n { label:\"18:00 น.\", value:'18:00', isDisabled: false},\r\n { label:\"18:30 น.\", value:'18:30', isDisabled: false},\r\n { label:\"19:00 น.\", value:'19:00', isDisabled: false},\r\n { label:\"19:30 น.\", value:'19:30', isDisabled: false},\r\n { label:\"20:00 น.\", value:'20:00', isDisabled: false},\r\n { label:\"20:30 น.\", value:'20:30', isDisabled: false},\r\n { label:\"21:00 น.\", value:'21:00', isDisabled: false}\r\n];\r\n\r\nconst [ArrStartTime, setArrStartTime] = useState(arrTime);\r\nconst [ArrStopTime, setArrStopTime] = useState(arrTime2);\r\n\r\nconst myRef = useRef(null);\r\n\r\n\r\nvar token = localStorage.getItem(\"token\");\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (_vBID != null && _vBID != '') {\r\n props.history.push({\r\n pathname: '/vehicle/request',\r\n state: {\r\n vBID: _vBID\r\n }\r\n })\r\n }\r\n\r\n\r\n axios(\"/api/v1/vehicle/vb\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vBKey\":').join('\"value\":'));\r\n setVB(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vbtype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vBTypeKey\":').join('\"value\":'));\r\n setVBType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/teamgrouptype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"teamGroupTypeKey\":').join('\"value\":'));\r\n setTeamGroupType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/teamgroup\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"teamGroupKey\":').join('\"value\":'));\r\n setTeamGroup(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/department\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"departmentKey\":').join('\"value\":'));\r\n setDepartment(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vbstatus\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vBStatusKey\":').join('\"value\":'));\r\n setVBStatus(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vehicle\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vehicleKey\":').join('\"value\":'));\r\n setVehicle(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(\"/api/v1/vehicle/vbstyle\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"vBStyleKey\":').join('\"value\":'));\r\n setVBStyle(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n\r\n if(location.state != null)\r\n {\r\n if(location.state.vBID != null && location.state.vBID != '')\r\n {\r\n setIsEdit(true)\r\n\r\n axios({\r\n method: 'get',\r\n url: \"/api/v1/vehicle/\" + location.state.vBID,\r\n headers: { 'referpage': '/vehicle/request/'+ location.state.vBID }\r\n })\r\n .then(\r\n resEdit => {\r\n var res=resEdit.data.data;\r\n //console.log(resEdit)\r\n\r\n setVBKey(res.vBKey) \r\n setVBID(res.vBID) \r\n setVBTypeKey(res.vBTypeKey) \r\n setTeamGroupTypeKey(res.teamGroupTypeKey) \r\n setTeamGroupKey(res.teamGroupKey) \r\n setDepartmentKey(res.departmentKey) \r\n setTeamName(res.teamName) \r\n setVBName(res.vBName) \r\n setVBDescription(res.vBDescription) \r\n setVBStatusKey(res.vBStatusKey) \r\n setVehicleKey(res.vehicleKey) \r\n setVehicleOther(res.vehicleOther) \r\n setVBStyleKey(res.vBStyleKey) \r\n setStartPlace(res.startPlace) \r\n setEndPlace(res.endPlace) \r\n setStartLatLong(res.startLatLong) \r\n setEndLatLong(res.endLatLong) \r\n setTotalPassenger(res.totalPassenger) \r\n setStartDatetime(moment(res.startDatetime).format('YYYY-MM-DD').toString())\r\n setStartTime(moment(res.startDatetime).format('HH:mm'))\r\n\r\n setEndDatetime(moment(res.endDatetime).format('YYYY-MM-DD').toString())\r\n setEndTime(moment(res.endDatetime).format('HH:mm'))\r\n\r\n setStartGauge(res.startGauge) \r\n setEndGauge(res.endGauge) \r\n setContactPhone(res.contactPhone) \r\n setDriverUserName(res.driverUserName) \r\n setApproveCode(res.approveCode) \r\n setApproveDatetime(moment(res.approveDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setCreatorCode(res.creatorCode) \r\n setCreateDatetime(moment(res.createDatetime).format('YYYY-MM-DD').toString())\r\n\r\n setLastEditerCode(res.lastEditerCode) \r\n setLastEditDatetime(moment(res.lastEditDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setIsCancel(res.isCancel) \r\n setCancelCode(res.cancelCode) \r\n setCancelDatetime(moment(res.cancelDatetime).format('YYYY-MM-DD').toString())\r\n\r\n\r\n setCreatorName(resEdit.data.creatorName);\r\n setEditerName(resEdit.data.editerName);\r\n setCancelerName(resEdit.data.cancelerName);\r\n\r\n /*\r\n const _rAttendee = res.meetingDataAttendee.map(row => {\r\n row.userView['attendStatusKey'] = (row.attendStatusKey != null) ? row.attendStatusKey : 0;\r\n return row.userView;\r\n });\r\n setAttendee(_rAttendee)\r\n */\r\n \r\n },\r\n error => {\r\n\r\n }\r\n ); \r\n\r\n }\r\n else{\r\n //auto assign จาก parameter จากหน้า list\r\n //setRoomKey(location.state.roomKey)\r\n //setMeetingName(location.state.meetingName)\r\n //setStartDatetime(moment(location.state.startDatetime).format('YYYY-MM-DD').toString())\r\n //setEndDatetime(moment(location.state.stopDatetime).format('YYYY-MM-DD').toString())\r\n //setStartTime(moment(location.state.startDatetime).format('HH:mm'))\r\n //setEndTime(moment(location.state.stopDatetime).format('HH:mm')) \r\n }\r\n }\r\n else{\r\n \r\n }\r\n\r\n \r\n }, [/*token*/]);\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n\r\n \r\n if(VBKey == null || VBKey =='')\r\n {\r\n cntErr+=1;\r\n errMsg.push(\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n {/*\r\n setVBKey(e.value) } />\r\n \r\n\r\n setVBID(e.target.value)} />\r\n \r\n\r\n setVBTypeKey(e.value) } />\r\n \r\n\r\n setTeamGroupTypeKey(e.value) } />\r\n \r\n\r\n setTeamGroupKey(e.value) } />\r\n \r\n\r\n setDepartmentKey(e.value) } />\r\n \r\n\r\n setTeamName(e.target.value)} />\r\n \r\n\r\n setVBName(e.target.value)} />\r\n \r\n\r\n setVBDescription(e.target.value)} />\r\n \r\n\r\n setVBStatusKey(e.value) } />\r\n \r\n\r\n setVehicleKey(e.value) } />\r\n \r\n\r\n setVehicleOther(e.target.value)} />\r\n \r\n\r\n setVBStyleKey(e.value) } />\r\n \r\n\r\n setStartPlace(e.target.value)} />\r\n \r\n\r\n setEndPlace(e.target.value)} />\r\n \r\n\r\n setStartLatLong(e.target.value)} />\r\n \r\n\r\n setEndLatLong(e.target.value)} />\r\n \r\n\r\n setTotalPassenger(e.target.value)} />\r\n \r\n\r\n \r\n \r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"StartDatetime\", placeholder: \"StartDatetime\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleStartDatetime(e.format('YYYY-MM-DD'))}\r\n \r\n \r\n />\r\n\r\n \r\n \r\n \r\n\r\n\r\n handleStartTime(e.value) } />\r\n \r\n\r\n \r\n \r\n {year + 543}; }}\r\n isValidDate={isDateValid}\r\n renderDay={renderDay}\r\n //onBeforeNavigate={(a, b, c) => handleNavigate(a, b, c)}\r\n //onNavigateForward={(dayAmt, unit) => handleCurrentDate(dayAmt, unit)}\r\n //onNavigateBack={(dayAmt, unit) => handleCurrentDate((-1 * dayAmt), unit)}\r\n inputProps={{\r\n name: \"EndDatetime\", placeholder: \"EndDatetime\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n }\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n //dateFormat=\"D MMMM BBBB\" timeFormat=\"เวลา HH:mm น.\"\r\n //timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleEndDatetime(e.format('YYYY-MM-DD'))}\r\n \r\n \r\n />\r\n\r\n \r\n \r\n \r\n\r\n\r\n handleEndDatetime(e.value) } />\r\n \r\n\r\n setStartGauge(e.target.value)} />\r\n \r\n\r\n setEndGauge(e.target.value)} />\r\n \r\n\r\n setContactPhone(e.target.value)} />\r\n \r\n\r\n setDriverUserName(e.target.value)} />\r\n \r\n\r\n\r\n\r\n\r\n setIsCancel(e.target.value)} />\r\n \r\n\r\n setCancelCode(e.target.value)} />\r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n {(location.state != null && location.state != '' && location.state.vBID != null && location.state.vBID != '') ? \r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n {/* Cancel */}\r\n setModalCancel(false)} isOpen={modalCancel}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันยกเลิกการประชุม\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n \r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n { handleAttendee(e) } } />\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n {(location.state != null && location.state != '' && location.state.meetingID != null && location.state.meetingID != '') ? \r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n );\r\n}\r\nexport default Request;\r\n\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport Datetime from 'react-datetime';\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst AssetList = (props) => {\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [assets, setAssets] = useState([]);\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n const [selectedAsset, setSelectedAsset] = useState(null);\r\n\r\n const [ArrDocno, setArrDocno] = useState([\"\"]);\r\n const [ArrAssetType, setAssetType] = useState([]); \r\n const [ArrCategory, setCategory] = useState([]);\r\n const [ArrBrand, setBrand] = useState([]);\r\n const [ArrPlace, setPlace] = useState([]); \r\n const [ArrCompany, setCompany] = useState([]); \r\n const [ArrTMoney, setTMoney] = useState([]); \r\n const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const ArrAssetStatus = [\r\n { value: 1, label: 'ใช้งานปกติ', color:'black' },\r\n { value: 2, label: 'อยู่ในระหว่างการซ่อม', color:'orange' },\r\n { value: 3, label: 'ชำรุด', color:'red' },\r\n { value: 4, label: 'จำหน่าย', color:'red' },\r\n { value: 5, label: 'อยู่ในระหว่างรอจำหน่าย', color:'orange' },\r\n { value: 6, label: 'หาไม่เจอ', color:'red' },\r\n ];\r\n\r\n const ArrPeriod = [\r\n { value: 'd', label: 'วัน' },\r\n { value: 'm', label: 'เดือน' },\r\n { value: 'y', label: 'ปี' },\r\n ];\r\n\r\n const [TypeKey, setTypeKey] = useState(4);\r\n const [CategoryKey, setCategoryKey] = useState(0);\r\n const [BrandKey, setBrandKey] = useState(0);\r\n const [CompanyKey, setCompanyKey] = useState(0);\r\n const [TMoneyKey, setTMoneyKey] = useState(0);\r\n const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [ArrCategory2, setCategory2] = useState([]); \r\n\r\n const [Attendee, setAttendee] = useState([]);\r\n const [toggleEdit, setToggleEdit] = useState(false);\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [dateFocus, setDateFocus] = useState(false);\r\n\r\n useEffect(() => {\r\n\r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(host+\"/api/v1/asset/brand\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"brandKey\":').join('\"value\":'));\r\n setBrand(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(host + \"/api/v1/asset/place\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"placeKey\":').join('\"value\":'));\r\n setPlace(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(host+\"/api/v1/asset/company\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"companyKey\":').join('\"value\":'));\r\n setCompany(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(host+\"/api/v1/asset/tmoney\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"tmoneyKey\":').join('\"value\":'));\r\n setTMoney(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n axios(host+\"/api/v1/asset/kmoney\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"kmoneyKey\":').join('\"value\":'));\r\n setKMoney(json)\r\n }, error => { console.log(error); }\r\n ); \r\n\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);\r\n\r\n useEffect(() => {\r\n fetchAssets();\r\n }, [TypeKey, CategoryKey, Keyword]);\r\n\r\n const fetchCatgory = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/category?typeKey='+TypeKey);\r\n var json = JSON.parse(JSON.stringify(response.data.data).split('\"name\":').join('\"label\":').split('\"categoryKey\":').join('\"value\":'));\r\n \r\n if(response.data.result == 200)\r\n setCategory(json)\r\n else\r\n setCategory([]);\r\n \r\n } catch (error) {\r\n console.error('Error fetching assets:', error);\r\n setCategory([]);\r\n }\r\n };\r\n\r\n const fetchCatgory2 = async (type2) => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/category?typeKey='+type2);\r\n var json = JSON.parse(JSON.stringify(response.data.data).split('\"name\":').join('\"label\":').split('\"categoryKey\":').join('\"value\":'));\r\n \r\n if(response.data.result == 200)\r\n setCategory2(json)\r\n else\r\n setCategory2([]);\r\n \r\n } catch (error) {\r\n console.error('Error fetching assets:', error);\r\n setCategory2([]);\r\n }\r\n };\r\n\r\n const fetchAssets = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset?name='+Keyword+'&typeKey='+TypeKey+'&categoryKey='+CategoryKey);\r\n if (response.data.result == 200) { \r\n setAssets(response.data.data);\r\n } \r\n else\r\n setAssets([]);\r\n } catch (error) {\r\n console.error('Error fetching assets:', error);\r\n setAssets([]);\r\n }\r\n };\r\n\r\n\r\n //set ค่าใน textbox DocNo\r\n const handleDocnoChange = (e, index) => {\r\n const newArrDocno = [...ArrDocno];\r\n newArrDocno[index] = e.target.value; // Update the input value\r\n setArrDocno(newArrDocno);\r\n };\r\n\r\n //เพิ่ม textbox แบบ list\r\n const addDocnoInput = () => {\r\n setArrDocno([...ArrDocno, \"\"]); // Add an empty string for the new input\r\n };\r\n\r\n //Remove textbox \r\n const removeDocnoInput = (index) => {\r\n const newArrDocno = ArrDocno.filter((_, i) => i !== index); // Filter out the input at the given index\r\n setArrDocno(newArrDocno);\r\n };\r\n\r\n \r\n\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedAsset(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n const handleExpand = () => {\r\n console.log(expanded)\r\n setExpanded(!expanded)\r\n }\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return assets.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _asset) => {\r\n //const assetToEdit = assets[index];\r\n const assetToEdit = _asset;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedAsset(assetToEdit);\r\n fetchCatgory2(assetToEdit.typeKey);\r\n\r\n var _rAttendee = [];\r\n setAttendee(_rAttendee);\r\n //assetToEdit.userView['attendStatusKey'] = 0;\r\n\r\n\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rAttendee.push(assetToEdit.userView);\r\n setAttendee(_rAttendee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n //assetKey: null,\r\n docNo: null,\r\n groupId: null,\r\n name: null,\r\n assetMode: null,\r\n serialNo: null,\r\n typeKey: null,\r\n typeCode: null,\r\n categoryKey: null,\r\n categoryCode: null,\r\n brandKey: null,\r\n modelName: null,\r\n placeKey: null,\r\n placeCode: null,\r\n placeCode2: null,\r\n calYear: null,\r\n receiveDate: null,\r\n receiveDocNo: null,\r\n period: null,\r\n periodUnit: null,\r\n periodYear: null,\r\n expiredDate: null,\r\n kmoneyKey: null,\r\n kmoneyCode: null,\r\n tmoneyKey: null,\r\n tmoneyCode: null,\r\n price: null,\r\n deprec: null,\r\n deprecYear: null,\r\n description: null,\r\n companyKey: null,\r\n departmentKey: null,\r\n userCode: null,\r\n dpsDocNo: null,\r\n dpsDocDate: null,\r\n dpsApproveDate: null,\r\n assetStatusKey: null,\r\n pmStatus: null,\r\n calStatus: null,\r\n riskStatus: null,\r\n warrantyStartDate: null,\r\n warantyPeriodUnit: null,\r\n warantyPeriodYear: null,\r\n warantyExpiredDate: null,\r\n checkerCode: null,\r\n checkerDatetime: null,\r\n imageFile: null,\r\n imageName: null,\r\n imageType: null,\r\n imageSize: null,\r\n image: null,\r\n creatorCode: null,\r\n createDatetime: null,\r\n lastEditerCode: null,\r\n lastEditDatetime: null,\r\n assetType: null,\r\n category: null,\r\n userView: null\r\n }\r\n\r\n setSelectedAsset(nullData);\r\n\r\n setArrDocno([\"\"]);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedAsset({ ...selectedAsset, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n if (name == 'typeKey')\r\n fetchCatgory2(value);\r\n\r\n setSelectedAsset({ ...selectedAsset, [name]: value });\r\n };\r\n //เมื่อเลือกเจ้าหน้าที่\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setAttendee(_val)\r\n\r\n setSelectedAsset({ ...selectedAsset, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/' + selectedAsset.assetKey)\r\n\r\n console.log(selectedAsset)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/' + selectedAsset.assetKey, selectedAsset);\r\n }\r\n else {\r\n selectedAsset.docNo = JSON.stringify(ArrDocno);\r\n await axios.post(host + '/api/v1/asset/', selectedAsset);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset?name=' + Keyword + '&typeKey=' + TypeKey + '&categoryKey=' + CategoryKey);\r\n setAssets(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating asset:\", error);\r\n }\r\n };\r\n\r\n return (\r\n แบบฟอร์มจองห้องประชุม
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n setMeetingDescription(e.target.value) }\r\n >\r\n
\r\n \r\n */}\r\n \r\n ผู้จอง {CreatorName} {CreateDatetime != \"\" ? moment(CreateDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n \r\n {EditerName != \"\" ?\r\n แก้ไขล่าสุด {EditerName} {LastEditDatetime != \"\" ? moment(LastEditDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n\r\n {CancelerName != \"\" ?\r\n ยกเลิกโดย {CancelerName} {CancelerName != \"\" ? moment(CancelDatetime).format('DD MMM BB HH:mm').toString():\"\"}
\r\n : <>\r\n }\r\n \r\n :\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModalCancel(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nปฏิเสธ
\r\n \r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n ตกลง
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\nผู้โดยสาร
\r\n\r\n\r\n
บันทึกข้อมูล
\r\n\r\n\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedAsset && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n {(isEditing) ?\r\n <>\r\n handleInputChange(e)} />\r\n \r\n \r\n :\r\n <>\r\n handleInputChange(e)}\r\n />\r\n \r\n\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n handleSelectChange('categoryKey', (e != null ? e.value : '')) } />\r\n \r\n\r\n handleSelectChange('brandKey', (e != null ? e.value : '')) } />\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n\r\n \r\n \r\n\r\n {year + 543}; }}\r\n \r\n inputProps={{\r\n name: \"receiveDate\", placeholder: \"วันที่รับ\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(selectedAsset.receiveDate).isValid() ? moment(selectedAsset.receiveDate).format('D MMMM BBBB') : ''\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleSelectChange('receiveDate', (e != null ? e.format('YYYY-MM-DD') : ''))}\r\n\r\n />\r\n \r\n \r\n handleInputChange(e)} />\r\n \r\n handleSelectChange('periodUnit', (e != null ? e.value : '')) } /> \r\n \r\n \r\n \r\n\r\n {year + 543}; }}\r\n \r\n inputProps={{\r\n name: \"expiredDate\", placeholder: \"วันครบอายุ\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(selectedAsset.expiredDate).isValid() ? moment(selectedAsset.expiredDate).format('D MMMM BBBB') : ''\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleSelectChange('expiredDate', (e != null ? e.format('YYYY-MM-DD') : ''))}\r\n\r\n />\r\n \r\n \r\n\r\n \r\n \r\n\r\n {year + 543}; }}\r\n\r\n inputProps={{\r\n name: \"warrantyStartDate\", placeholder: \"วันที่ประกัน\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(selectedAsset.warrantyStartDate).isValid() ? moment(selectedAsset.warrantyStartDate).format('D MMMM BBBB') : ''\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleSelectChange('warrantyStartDate', (e != null ? e.format('YYYY-MM-DD') : ''))}\r\n\r\n />\r\n \r\n \r\n handleInputChange(e)} />\r\n \r\n handleSelectChange('warantyPeriodUnit', (e != null ? e.value : '')) } />\r\n \r\n \r\n \r\n\r\n {year + 543}; }}\r\n\r\n inputProps={{\r\n name: \"warantyExpiredDate\", placeholder: \"วันที่หมดประกัน\", readOnly: 'readonly'\r\n , style: {\r\n fontSize: '1.2em', borderRadius: 0, paddingLeft: '50px', cursor: 'pointer', background: '#ffffff', color: '#000000'\r\n },\r\n value: moment(selectedAsset.warantyExpiredDate).isValid() ? moment(selectedAsset.warantyExpiredDate).format('D MMMM BBBB') : ''\r\n }}\r\n closeOnSelect={true}\r\n closeOnTab={true}\r\n dateFormat=\"D MMMM BBBB\" timeFormat={false}\r\n onFocus={() => setDateFocus(true)}\r\n onBlur={() => setDateFocus(false)}\r\n onChange={e => handleSelectChange('warantyExpiredDate', (e != null ? e.format('YYYY-MM-DD') : ''))}\r\n\r\n />\r\n \r\n \r\n\r\n handleSelectChange('companyKey', (e != null ? e.value : '')) } />\r\n \r\n handleSelectChange('kmoneyKey', (e != null ? e.value : '')) } />\r\n \r\n handleSelectChange('tmoneyKey', (e != null ? e.value : '')) } />\r\n \r\n\r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n handleSelectChange('placeKey', (e != null ? e.value : ''))} /> \r\n \r\n handleSelectChange('assetStatusKey', (e != null ? e.value : '')) } /> \r\n \r\n\r\n \r\n \r\n\r\n handleExpand()}>\r\n \r\n handleExpand()}\r\n aria-expanded={expanded}\r\n aria-label=\"show more\"\r\n >\r\n \r\n\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n handleEmployeeChange(e)} />\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default AssetList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst BrandList = (props) => {\r\n\r\n const tableText = 'ยี่ห้อ';\r\n\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n \r\n\r\n const [ArrDocno, setArrDocno] = useState([\"\"]);\r\n const [ArrAssetType, setAssetType] = useState([]); \r\n const [ArrCategory, setCategory] = useState([]);\r\n const [ArrBrand, setBrand] = useState([]);\r\n const [ArrPlace, setPlace] = useState([]); \r\n const [ArrCompany, setCompany] = useState([]); \r\n const [ArrTMoney, setTMoney] = useState([]); \r\n const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const ArrAssetStatus = [\r\n { value: 1, label: 'ใช้งานปกติ', color:'black' },\r\n { value: 2, label: 'อยู่ในระหว่างการซ่อม', color:'orange' },\r\n { value: 3, label: 'ชำรุด', color:'red' },\r\n { value: 4, label: 'จำหน่าย', color:'red' },\r\n { value: 5, label: 'อยู่ในระหว่างรอจำหน่าย', color:'orange' },\r\n { value: 6, label: 'หาไม่เจอ', color:'red' },\r\n ];\r\n\r\n const ArrPeriod = [\r\n { value: 'd', label: 'วัน' },\r\n { value: 'm', label: 'เดือน' },\r\n { value: 'y', label: 'ปี' },\r\n ];\r\n\r\n const [TypeKey, setTypeKey] = useState(0);\r\n const [CategoryKey, setCategoryKey] = useState(0);\r\n const [BrandKey, setBrandKey] = useState(0);\r\n const [CompanyKey, setCompanyKey] = useState(0);\r\n const [TMoneyKey, setTMoneyKey] = useState(0);\r\n const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [ArrCategory2, setCategory2] = useState([]); \r\n\r\n const [Employee, setEmployee] = useState([]);\r\n const [toggleEdit, setToggleEdit] = useState(false);\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n/*\r\n useEffect(() => {\r\n\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n\r\n }, []);\r\n*/\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n \r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/brand?name='+Keyword);\r\n if (response.data.result == 200) { \r\n setDataList(response.data.data);\r\n } \r\n else\r\n setDataList([]);\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null, \r\n }\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n\r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/brand/' + selectedData.brandKey)\r\n\r\n console.log(selectedData)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/brand/' + selectedData.brandKey, selectedData);\r\n }\r\n else {\r\n await axios.post(host + '/api/v1/asset/brand/', selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset/brand?name=' + Keyword);\r\n setDataList(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการครุภัณฑ์
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n setCategoryKey(e != null ? e.value : '') } />\r\n \r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่มครุภัณฑ์
\r\n \r\n\r\n \r\n{selectedAsset.name}
\r\n{selectedAsset.docNo}
\r\n\r\nเพิ่มครุภัณฑ์
\r\n \r\nเลขครุภัณฑ์
\r\n \r\n \r\n\r\n \r\n {index > 0 ?\r\n \r\n \r\n removeDocnoInput(index)} > \r\n \r\n \r\n :\r\n <>\r\n }\r\n handleDocnoChange(e, index)}\r\n /> \r\n {index == ArrDocno.length-1 ?\r\n \r\n \r\n \r\n \r\n \r\n :\r\n <>\r\n }\r\n \r\n
\r\n \r\n ))}\r\n \r\n }\r\n \r\n ผู้รับผิดชอบ
\r\n {(Attendee != null && Attendee.length > 0) ?\r\n <>\r\n{Attendee[0].firstName} {Attendee[0].lastName}
\r\n\r\n \r\n : <>\r\n }\r\n \r\n\r\n {(Attendee != null && Attendee.length > 0) ?\r\n
\r\n \r\n :\r\n \r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n {/* //Input Combobox\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default BrandList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst CompanyList = (props) => {\r\n\r\n const tableText = 'ผู้ขาย';\r\n\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n //const [ArrTMoney, setTMoney] = useState([]); \r\n //const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const [CompanyKey, setCompanyKey] = useState(0);\r\n\r\n //const [TMoneyKey, setTMoneyKey] = useState(0);\r\n //const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n/*\r\n useEffect(() => {\r\n\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n\r\n }, []);\r\n*/\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n \r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/company?name='+Keyword);\r\n if (response.data.result == 200) { \r\n setDataList(response.data.data);\r\n } \r\n else\r\n setDataList([]);\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null, \r\n }\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n\r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/company/' + selectedData.companyKey)\r\n\r\n console.log(selectedData)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/company/' + selectedData.companyKey, selectedData);\r\n }\r\n else {\r\n await axios.post(host + '/api/v1/asset/company/', selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset/company?name=' + Keyword);\r\n setDataList(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n{selectedData.name}
\r\n{selectedData.docNo}
\r\n\r\nเพิ่ม{tableText}
\r\n \r\n\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n {/* //Input Combobox\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default CompanyList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst AssetTypeList = (props) => {\r\n\r\n const tableText = 'ประเภทครุภัณฑ์';\r\n\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n //const [ArrTMoney, setTMoney] = useState([]); \r\n //const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const [TypeKey, setTypeKey] = useState(0);\r\n\r\n //const [TMoneyKey, setTMoneyKey] = useState(0);\r\n //const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n/*\r\n useEffect(() => {\r\n\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n\r\n }, []);\r\n*/\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n \r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(host +'/api/v1/asset/assettype?name='+Keyword);\r\n if (response.data.result == 200) { \r\n setDataList(response.data.data);\r\n } \r\n else\r\n setDataList([]);\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null, \r\n }\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n\r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/assettype/' + selectedData.typeKey)\r\n\r\n console.log(selectedData)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/assettype/' + selectedData.typeKey, selectedData);\r\n }\r\n else {\r\n await axios.post(host + '/api/v1/asset/assettype/', selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset/assettype?name=' + Keyword);\r\n setDataList(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n{selectedData.name}
\r\n{selectedData.docNo}
\r\n\r\nเพิ่ม{tableText}
\r\n \r\n\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n {/* //Input Combobox\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default AssetTypeList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst CategoryList = (props) => {\r\n\r\n const tableText = 'หมวดครุภัณฑ์';\r\n\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n //const [ArrTMoney, setTMoney] = useState([]); \r\n //const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const [CategoryKey, setCategoryKey] = useState(0);\r\n\r\n //const [TMoneyKey, setTMoneyKey] = useState(0);\r\n //const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n/*\r\n useEffect(() => {\r\n\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n\r\n }, []);\r\n*/\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n \r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/category?name='+Keyword);\r\n if (response.data.result == 200) { \r\n setDataList(response.data.data);\r\n } \r\n else\r\n setDataList([]);\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null, \r\n }\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n\r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/category/' + selectedData.categoryKey)\r\n\r\n console.log(selectedData)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/category/' + selectedData.categoryKey, selectedData);\r\n }\r\n else {\r\n await axios.post(host + '/api/v1/asset/category/', selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset/category?name=' + Keyword);\r\n setDataList(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n{selectedData.name}
\r\n{selectedData.docNo}
\r\n\r\nเพิ่ม{tableText}
\r\n \r\n\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n {/* //Input Combobox\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default CategoryList;","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\n// @material-ui/core components\r\nimport { red } from '@material-ui/core/colors';\r\nimport axios from 'axios';\r\nimport clsx from 'clsx';\r\nimport {\r\n TextField,\r\n Button,\r\n\r\n Table,\r\n TableBody,\r\n TableCell,\r\n TableContainer,\r\n TableHead,\r\n TableRow,\r\n Paper, TableSortLabel, TableFooter, TablePagination,\r\n FormControl,\r\n InputLabel,\r\n Select,\r\n MenuItem,\r\n} from '@material-ui/core';\r\n\r\nimport IconButton from '@material-ui/core/IconButton';\r\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r\n\r\nimport FirstPageIcon from '@material-ui/icons/FirstPage';\r\nimport LastPageIcon from '@material-ui/icons/LastPage';\r\nimport KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';\r\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\r\n\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport EditIcon from '@material-ui/icons/Edit';\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nimport {\r\n Modal, ModalHeader, ModalBody, ModalFooter,\r\n FormGroup, Label, Input,\r\n Row,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup\r\n} from 'reactstrap';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\n\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardContent from \"@material-ui/core/CardContent\";\r\nimport CardActions from '@material-ui/core/CardActions';\r\nimport Collapse from '@material-ui/core/Collapse';\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport Button2 from \"components/CustomButtons/Button.js\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\nimport { color } from \"highcharts\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardPlaceWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n flexGrow: 1,\r\n },\r\n cardTitle: {\r\n textAlign: 'center'\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n flexGrow: 1,\r\n },\r\n collaps:{\r\n paddingLeft:'40px', \r\n paddingTop:'40px', \r\n display: 'flex',\r\n flexDirection: 'column-reverse',\r\n },\r\n expand: {\r\n transform: 'rotate(0deg)',\r\n marginLeft: 'auto',\r\n transition: theme.transitions.create('transform', {\r\n duration: theme.transitions.duration.shortest,\r\n }),\r\n ...StyleSheet.absoluteFillObject,\r\n alignSelf: 'flex-end',\r\n position: 'absolute', // add if dont work with above\r\n },\r\n expandOpen: {\r\n transform: 'rotate(180deg)',\r\n },\r\n visible: {\r\n opacity: 1,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n hidden: {\r\n opacity: 0,\r\n transition: 'opacity 0.5s ease'\r\n },\r\n avatar: {\r\n backgroundColor: red[500],\r\n },\r\n tableContainer: {\r\n width: '99.99%',\r\n overflowX: 'auto', // ทำให้ตารางสามารถเลื่อนในแนวนอนเมื่อกว้างเกินไป\r\n },\r\n tableRow: {\r\n '&:nth-of-type(odd)': {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n tableCell: {\r\n padding: '2px',\r\n },\r\n modalFullscreen: {\r\n width: '100%',\r\n height: '100%',\r\n margin: 0,\r\n maxWidth: '100%',\r\n },\r\n modalContent: {\r\n height: '100%',\r\n borderRadius: 0,\r\n },\r\n modalBody: {\r\n overflowY: 'auto',\r\n },\r\n pagination: {\r\n flexShrink: 0,\r\n marginLeft: theme.spacing(2.5),\r\n },\r\n cardXs: {\r\n width: 75,\r\n height: 110,\r\n paddingTop: 10,\r\n margin: 2,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardSm: {\r\n width: 180,\r\n height: 140,\r\n textAlign: 'center',\r\n margin: \"3px\",\r\n transition: \"0.3s\",\r\n display: \"inline-block\",\r\n boxShadow: \"0 8px 40px -12px rgba(0,0,0,0.3)\",\r\n \"&:hover\": {\r\n boxShadow: \"0 16px 70px -12.125px rgba(0,0,0,0.3)\"\r\n }\r\n },\r\n cardImg1: {\r\n width: 60, height: 60, borderRadius: 60 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n cardImg2: {\r\n width: 100, height: 100, borderRadius: 100 / 2, objectFit: 'cover', objectPosition: '100% 0'\r\n },\r\n }));\r\n\r\n\r\nconst PlaceList = (props) => {\r\n\r\n const tableText = 'สถานที่';\r\n\r\n const host = '';//'https://e.trangskin.go.th'; \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const classes = useStyles();\r\n\r\n const [dataList, setDataList] = useState([]);\r\n const [selectedData, setSelectedData] = useState(null);\r\n\r\n\r\n //page & order\r\n const [orderDirection, setOrderDirection] = useState('desc');\r\n const [orderBy, setOrderBy] = useState('calYear'); // default column to sort\r\n const [page, setPage] = useState(0);\r\n const [rowsPerPage, setRowsPerPage] = useState(25);\r\n\r\n const [expanded, setExpanded] = React.useState(false);\r\n\r\n const [isEditing, setIsEditing] = useState(false);\r\n const [editIndex, setEditIndex] = useState(null);\r\n\r\n //const [ArrTMoney, setTMoney] = useState([]); \r\n //const [ArrKMoney, setKMoney] = useState([]); \r\n\r\n const [PlaceKey, setPlaceKey] = useState(0);\r\n\r\n //const [TMoneyKey, setTMoneyKey] = useState(0);\r\n //const [KMoneyKey, setKMoneyKey] = useState(0);\r\n const [Keyword, setKeyword] = useState('');\r\n\r\n const [modalOpen, setModalOpen] = useState(false);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n/*\r\n useEffect(() => {\r\n\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox\r\n \r\n axios(host+\"/api/v1/asset/assettype\")\r\n .then(\r\n result => {\r\n var json = JSON.parse(JSON.stringify(result.data.data).split('\"name\":').join('\"label\":').split('\"typeKey\":').join('\"value\":'));\r\n setAssetType(json)\r\n }, error => { console.log(error); }\r\n ); \r\n \r\n\r\n }, []);\r\n*/\r\n //ใช้สำหรับ Bind ข้อมูลใส่ Arr Combobox Level 2\r\n /*\r\n useEffect(() => {\r\n fetchCatgory(TypeKey);\r\n }, [TypeKey]);//เมื่อ Combobox Level 1 มีการเปลี่ยนค่า\r\n */\r\n\r\n\r\n //Bind Data หลักของ Table\r\n useEffect(() => {\r\n fetchDataList();\r\n }, [Keyword]); //Bind ใหม่เมื่อ Keyword หรือ ค่าอื่นๆ มีการเปลี่ยน เช่น [Keyword, TypeKey]\r\n\r\n \r\n const fetchDataList = async () => {\r\n try {\r\n const response = await axios.get(host+'/api/v1/asset/place?name='+Keyword);\r\n if (response.data.result == 200) { \r\n setDataList(response.data.data);\r\n } \r\n else\r\n setDataList([]);\r\n } catch (error) {\r\n console.error('Error fetching dataList:', error);\r\n setDataList([]);\r\n }\r\n };\r\n\r\n\r\n //----------------table function----------------\r\n //page order\r\n const handleRequestSort = (property) => {\r\n const isAsc = orderBy === property && orderDirection === 'asc';\r\n setOrderDirection(isAsc ? 'desc' : 'asc');\r\n setOrderBy(property);\r\n };\r\n \r\n const sortedAssets = () => {\r\n return dataList.sort((a, b) => {\r\n if (orderDirection === 'asc') {\r\n return a[orderBy] < b[orderBy] ? -1 : 1;\r\n }\r\n return a[orderBy] > b[orderBy] ? -1 : 1;\r\n });\r\n };\r\n \r\n const handleChangePage = (event, newPage) => {\r\n setPage(newPage);\r\n };\r\n \r\n const handleChangeRowsPerPage = (event) => {\r\n setRowsPerPage(parseInt(event.target.value, 10));\r\n setPage(0);\r\n };\r\n //----------------table function----------------\r\n\r\n //เมื่อปิด Modal\r\n const handleCloseModal = () => {\r\n setModalOpen(false);\r\n setSelectedData(null);\r\n\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n };\r\n\r\n\r\n\r\n //กดเพื่อแก้ไขข้อมูลเดิม Edit Asset Click\r\n const handleEdit = (index, _data) => {\r\n console.log(_data);\r\n const dataToEdit = _data;\r\n setEditIndex(index);\r\n setIsEditing(true);\r\n\r\n setSelectedData(dataToEdit);\r\n\r\n setModalOpen(true);\r\n\r\n\r\n //fetchCatgory2(dataToEdit.typeKey); //active combobox level2 ใน modal\r\n\r\n //ใช้สำหรับ TSUser\r\n /*\r\n var _rEmployee = [];\r\n setEmployee(_rEmployee);\r\n\r\n setModalOpen(true);\r\n\r\n if (assetToEdit.userView !== null) {\r\n _rEmployee.push(assetToEdit.userView);\r\n setEmployee(_rEmployee)\r\n setExpanded(false)\r\n }\r\n else {\r\n setExpanded(true)\r\n }\r\n */\r\n };\r\n\r\n //กดเพื่อเพิ่มข้อมูลใหม่ Insert Asset Button Click\r\n const handleAdd = () => {\r\n clearForm();\r\n setModalOpen(true);\r\n };\r\n\r\n //Clear form input\r\n const clearForm = () => {\r\n var nullData = {\r\n code: null,\r\n name: null, \r\n }\r\n\r\n setSelectedData(nullData);\r\n };\r\n\r\n //on value change\r\n const handleInputChange = (e) => {\r\n const { name, value } = e.target;\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n //on selected change\r\n const handleSelectChange = (name, value) => {\r\n setSelectedData({ ...selectedData, [name]: value });\r\n };\r\n\r\n //เมื่อเลือกเจ้าหน้าที่\r\n /*\r\n const handleEmployeeChange = (_val) => {\r\n\r\n setToggleEdit(false);\r\n setEmployee(_val)\r\n\r\n setSelectedData({ ...selectedData, [\"userCode\"]: _val[0].userName });\r\n\r\n setExpanded(false);\r\n }\r\n */\r\n\r\n const handleSaveChanges = async () => {\r\n try {\r\n console.log('/api/v1/asset/place/' + selectedData.placeKey)\r\n\r\n console.log(selectedData)\r\n if (isEditing) {\r\n await axios.put(host + '/api/v1/asset/place/' + selectedData.placeKey, selectedData);\r\n }\r\n else {\r\n await axios.post(host + '/api/v1/asset/place/', selectedData);\r\n }\r\n\r\n handleCloseModal();\r\n setIsEditing(false);\r\n setEditIndex(null);\r\n\r\n // Refresh the asset list after updating\r\n const response = await axios.get(host + '/api/v1/asset/place?name=' + Keyword);\r\n setDataList(response.data.data);\r\n\r\n } catch (error) {\r\n console.error(\"Error updating data:\", error);\r\n }\r\n };\r\n\r\n return (\r\n รายการ{tableText}
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n{selectedData.name}
\r\n{selectedData.docNo}
\r\n\r\nเพิ่ม{tableText}
\r\n \r\n\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedData && (\r\n \r\n {(isEditing) ?\r\n \r\n\r\n \r\n : \r\n \r\n \r\n }\r\n \r\n \r\n\r\n \r\n handleInputChange(e)} />\r\n \r\n handleInputChange(e)} />\r\n \r\n \r\n {/* //Input Combobox\r\n handleSelectChange('typeKey', (e != null ? e.value : '')) } />\r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n )}\r\n \r\n \r\n\r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default PlaceList;","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { DateRange, Bookmarks, ExitToApp, CalendarToday } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Info from \"views/Asset/Info.js\";\r\nimport AssetList from \"views/Asset/AssetList\";\r\nimport BrandList from \"views/Asset/BrandList\";\r\nimport CompanyList from \"views/Asset/CompanyList\";\r\nimport AssetTypeList from \"views/Asset/AssetTypeList\";\r\nimport CategoryList from \"views/Asset/CategoryList\";\r\nimport PlaceList from \"views/Asset/PlaceList\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\nimport { Assignment } from \"@material-ui/icons/\";\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"รายการครุภัณฑ์\",\r\n icon: DateRange,\r\n component: AssetList,\r\n layout: \"/asset\",\r\n path: \"/index\",\r\n },\r\n {\r\n name: \"ประเภทครุภัณฑ์\",\r\n icon: Bookmarks,\r\n component: AssetTypeList,\r\n layout: \"/asset\",\r\n path: \"/assettype\",\r\n },\r\n {\r\n name: \"หมวดครุภัณฑ์\",\r\n icon: Bookmarks,\r\n component: CategoryList,\r\n layout: \"/asset\",\r\n path: \"/category\",\r\n },\r\n {\r\n name: \"ยี่ห้อ\",\r\n icon: Bookmarks,\r\n component: BrandList,\r\n layout: \"/asset\",\r\n path: \"/brand\",\r\n },\r\n {\r\n name: \"ผู้ขาย\",\r\n icon: Bookmarks,\r\n component: CompanyList,\r\n layout: \"/asset\",\r\n path: \"/company\",\r\n },\r\n {\r\n name: \"สถานที่\",\r\n icon: Bookmarks,\r\n component: PlaceList,\r\n layout: \"/asset\",\r\n path: \"/place\",\r\n },\r\n];\r\n\r\nconst switchRoutes = (\r\n รายการ{tableText}
\r\n \r\n\r\n\r\n \r\n setKeyword(e.target.value)} />\r\n \r\n {/* //Combobox Filter\r\n setTypeKey(e != null ? e.value : '') } />\r\n \r\n */}\r\n\r\n \r\n \r\n {/* Add more fields as necessary for other properties */}\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n เพิ่ม{tableText}
\r\n \r\n\r\n \r\n{selectedData.name}
\r\n{selectedData.docNo}
\r\n\r\nเพิ่ม{tableText}
\r\n \r\n\r\n \r\n \r\n
\r\n บันทึก
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setIcon(\"far fa-question-circle\"); setModal(false); }}\r\n >\r\n \r\n
\r\n ยืนยัน
\r\n \r\n\r\nยกเลิก
\r\n \r\n\r\n\r\n\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\nimport { number } from \"prop-types\";\r\nimport Meeting from \"layouts/HR\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst DisabledDay = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [ArrLeave, setArrLeave] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [DisableKey, setDisableKey] = useState(0);\r\n const [Note, setNote] = useState(\"\");\r\n // const [ENName, setENName] = useState(\"\");\r\n const [Name, setName] = useState(\"\");\r\n const [DisabledDatetime, setDisabledDatetime] = useState(\"\");\r\n const [IsDisabled, setIsDisabled] = useState(false);\r\n const [bookingType, setBookingType] = useState(0);\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n // const [isShowCalendar, setIsShowCalendar] = useState(false);\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n const arrBookingType = [\r\n { value: 0, label: \"booking\" },\r\n { value: 1, label: \"smc\" },\r\n { value: 2, label: \"tele\" }\r\n ];\r\n\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n \r\n\r\n useEffect(() => {\r\n let calendarApi = calendarRef.current.getApi();\r\n getMeeting(calendarApi.getDate())\r\n }, [])\r\n\r\n useEffect(() => {\r\n let calendarApi = calendarRef.current.getApi();\r\n getMeeting(calendarApi.getDate())\r\n },[bookingType]);\r\n\r\n // useEffect(() => {\r\n // console.log(calendarRef);\r\n // }, [calendarRef])\r\n\r\n const getMeeting = (e) => {\r\n let month = e.getUTCMonth() + 1; //months from 1-12\r\n let year = e.getUTCFullYear();\r\n let type;\r\n if(bookingType === 0){\r\n type = \"booking\"\r\n } else if (bookingType === 1){\r\n type = \"smc\"\r\n } else {\r\n type = \"tele\"\r\n }\r\n axios.get('/api/disabledday/' + year + \"/\" + month + \"/\" + type)\r\n .then(\r\n result => {\r\n const temp = [];\r\n var data = result.data.data;\r\n if (data.length >= 0) {\r\n for (let i = 0; i < data.length; i++) {\r\n var newObj = { name : data[i].name\r\n , disabledDatetime: data[i].disabledDatetime\r\n , disabledDatetime2: data[i].disabledDatetime\r\n , disableKey: data[i].disableKey.toString()\r\n , note: data[i].note\r\n , isDisabled :data[i].isDisabled\r\n , disableType : data[i].disableType\r\n }\r\n temp.push(newObj);\r\n }\r\n }\r\n var json = JSON.parse(JSON.stringify(temp).split('\"name\":').join('\"title\":').split('\"disabledDatetime\":').join('\"start\":')\r\n .split('\"disabledDatetime2\":').join('\"end\":').split('\"disableKey\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll(json);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleConfirm = evt => {\r\n evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n var type;\r\n if(bookingType === 0){\r\n type = \"booking\"\r\n } else if (bookingType === 1){\r\n type = \"smc\"\r\n } else {\r\n type = \"tele\"\r\n }\r\n\r\n var DisabledDay = {\r\n disabledDatetime: DisabledDatetime,\r\n name: Name,\r\n disableType: type,\r\n note: Note,\r\n isDisabled: IsDisabled,\r\n }\r\n\r\n if(DisableKey != 0 && DisableKey != '' && DisableKey != null)\r\n {\r\n axios.put('/api/disabledday/'+ DisableKey, DisabledDay)\r\n .then(\r\n result => {\r\n \r\n //console.log(result)\r\n \r\n if(result.data.result == 200)\r\n {\r\n setDefaultDate(result.data.data.disabledDatetime);\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false) \r\n setModal2(true)\r\n const date = new Date(result.data.data.disabledDatetime);\r\n getMeeting(date);\r\n }\r\n else\r\n {\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false) \r\n setErrMsg(result.data.msg)\r\n setModalError(true) \r\n }\r\n \r\n },\r\n error => {console.log(error);}\r\n ); \r\n } else {\r\n axios.post('/api/disabledday', DisabledDay)\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setDisableKey(result.data.data.disableKey);\r\n setDefaultDate(result.data.data.disabledDatetime);\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false);\r\n setModal2(true);\r\n const date = new Date(result.data.data.disabledDatetime);\r\n getMeeting(date);\r\n } else {\r\n setIcon(\"far fa-question-circle\"); \r\n setModal(false);\r\n setErrMsg(result.data.msg);\r\n setModalError(true); \r\n }\r\n\r\n }, error => { console.log(error); }\r\n ); \r\n }\r\n\r\n };\r\n\r\n\r\n const handleDateClick = (args) => {\r\n setDefaultDate(args.dateStr);\r\n setDisabledDatetime(args.dateStr)\r\n setDisableKey(0);\r\n setName(\"\");\r\n //setENName(\"\");\r\n setNote(\"\");\r\n setIsDisabled(true);\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n setDisabledDatetime(moment(args.event.start).format('YYYY-MM-DD'))\r\n setDisableKey(args.event._def.publicId);\r\n setName(args.event._def.title);\r\n //setENName(args.event._def.extendedProps.enName === null ? \" \" : args.event._def.extendedProps.enName);\r\n setNote(args.event._def.extendedProps.note === null ? \" \" : args.event._def.extendedProps.note );\r\n setIsDisabled(args.event._def.extendedProps.isDisabled );\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n \r\n var errMsg = [];\r\n \r\n if(DisabledDatetime == '')\r\n {\r\n cntErr+=1;\r\n errMsg.push(\r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n setBookingType(e.value)} />\r\n {/* : <>\r\n } */}\r\n \r\n \r\n \r\n \r\n \r\n {isLoading && (\r\n <>\r\n \r\n \r\n \r\n setName(e.target.value)}/>\r\n \r\n {/* setENName(e.target.value)}/>\r\n */}\r\n setNote(e.target.value)}/>\r\n \r\n setIsDisabled(!IsDisabled) } />\r\n \r\n\r\n {(DisableKey != 0 && DisableKey != '' && DisableKey != null) ? \r\n \r\n \r\n \r\n \r\n {/* \r\n {/* } */}\r\n\r\n \r\n \r\n \r\n\r\n \r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n\r\n {/* Success */}\r\n setModal2(false)} isOpen={modal2}>\r\n \r\n \r\n บันทึกข้อมูลสำเร็จ\r\n \r\n \r\n \r\n\r\n {/* Error */}\r\n setModalError(false)} isOpen={modalError}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === 1);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isDisabled == false) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isDisabled == false) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n จัดการวันปิดบริการ
\r\n \r\n\r\n ',\r\n click: function() {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.next();\r\n getMeeting(calendarApi.getDate());\r\n }\r\n },\r\n }}\r\n locale={'th'}\r\n eventContent={renderEventContent}\r\n displayEventTime={false}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal2(false)}\r\n >\r\n \r\n
\r\n ตกลง
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default DisabledDay;","/* eslint-disable no-unused-vars */\r\n/* eslint-disable react/prop-types */\r\nimport PropTypes from \"prop-types\";\r\nimport React, { useState, useEffect } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/tableStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const classes = useStyles();\r\n const { tableHead, tableData, tableHeaderColor } = props;\r\n const [modal, setModal] = useState(false);\r\n const [icon, setIcon] = useState(\"fas fa-calendar-day\");\r\n const [qr, setqr] = useState(\"\");\r\n\r\n const handleCellClickModal = e => {\r\n setModal(true);\r\n //console.log('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=ttps://liff.line.me/1654063801-QEM4xzPE?hn={' + e[0] + '}');\r\n setqr('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=ttps://liff.line.me/1654063801-QEM4xzPE?hn={' + e[0] + '}');\r\n };\r\n\r\n\r\n const handleOpen = (e, name, id) => {\r\n onOpen(name, id);\r\n };\r\n\r\n function onOpen(name, id) {\r\n props.isOpen(true);\r\n props.name(name);\r\n props.reportId(id);\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\"\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n tableData: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n // tableSelect: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\nimport Calendar from \"components/Calendar/Calendar.js\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport Fullcalendar from \"@fullcalendar/react\";\r\nimport dayGridPlugin from \"@fullcalendar/daygrid\";\r\nimport timeGridPlugin from \"@fullcalendar/timegrid\";\r\nimport interactionPlugin from \"@fullcalendar/interaction\";\r\nimport listPlugin from '@fullcalendar/list';\r\nimport Datetime from 'react-datetime';\r\nimport Table from \"components/Table/TableAppoint\";\r\nimport Pagination from \"react-responsive-pagination\";\r\nimport { CardFooter } from \"reactstrap\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n//import CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSCheckBox from \"components/Forms/TSCheckBox\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport loading from \"assets/img/loading-load.gif\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\n\r\nimport TSUser from \"components/Forms/TSUser\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\nimport { number } from \"prop-types\";\r\nimport Meeting from \"layouts/HR\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{ id: 1, forecolor: '#3788d8' }, { id: 2, forecolor: '#0E6251' }, { id: 3, forecolor: '#9A7D0A' }, { id: 4, forecolor: '#8E44AD' }, { id: 5, forecolor: '#E67E22' }, { id: 6, forecolor: '#6D4C41' }]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\n\r\nconst Appointment = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const [leaveAll, setLeaveAll] = useState([]);\r\n const [DefaultDate, setDefaultDate] = useState(moment().format(\"YYYY-MM-DD\"));\r\n const [arrAppoint, setArrAppoint] = useState([]);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [DisableKey, setDisableKey] = useState(0);\r\n const [Note, setNote] = useState(\"\");\r\n const [Name, setName] = useState(\"\");\r\n const [DisabledDatetime, setDisabledDatetime] = useState(\"\");\r\n const [IsDisabled, setIsDisabled] = useState(false);\r\n const [bookingType, setBookingType] = useState(0);\r\n const [serviceUnitKey, setServiceUnitKey] = useState(0);\r\n const [ServiceUnitName, setServiceUnitName] = useState(\"\");\r\n const [tableHead, setTableHead] = useState([]);\r\n const [pageSize] = useState(100);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const windowWidth = useWindowWidth();\r\n\r\n \r\n useEffect(() => {}, [currentPage])\r\n\r\n function useWindowWidth() {\r\n const [windowWidth, setWindowWidth] = useState(window.innerWidth - 400);\r\n\r\n useEffect(() => {\r\n const resizeHandler = () => {\r\n setWindowWidth(window.innerWidth - 400);\r\n };\r\n\r\n window.addEventListener(\"resize\", resizeHandler);\r\n return () => {\r\n window.removeEventListener(\"resize\", resizeHandler);\r\n };\r\n }, []);\r\n return windowWidth;\r\n }\r\n\r\n const myRef = useRef(null);\r\n var calendarRef = React.createRef();\r\n\r\n const arrBookingType = [\r\n { value: 0, label: \"booking\" },\r\n { value: 1, label: \"smc\" },\r\n { value: 2, label: \"tele\" }\r\n ];\r\n\r\n useEffect(() => {\r\n if (DefaultDate != null && DefaultDate != '')\r\n {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.gotoDate(DefaultDate);\r\n }\r\n },[DefaultDate]);\r\n\r\n useEffect(() => {\r\n tableHead.push(\"HN\", \"ชื่อ - สกุล\", \"สถานะ\");\r\n let calendarApi = calendarRef.current.getApi();\r\n getMeeting(calendarApi.getDate())\r\n }, [])\r\n\r\n // useEffect(() => {\r\n // let calendarApi = calendarRef.current.getApi();\r\n // getMeeting(calendarApi.getDate())\r\n // },[bookingType]);\r\n\r\n useEffect(() => {\r\n if(serviceUnitKey != 0){\r\n axios.post('/api/v1/opd/appointbydate', {appointDate: DisabledDatetime, serviceUnitKey: serviceUnitKey})\r\n .then(\r\n result => {\r\n // setArrAppoint(result.data.data);\r\n // console.log(result.data.data);\r\n\r\n var tableList = [];\r\n if (result.data.data.length > 0) {\r\n result.data.data.forEach(e => {\r\n tableList.push([e.HN, e.FullName, e.Appoint]);\r\n });\r\n }\r\n \r\n setArrAppoint(tableList);\r\n var total = result.total / pageSize;\r\n if (!Number.isInteger(total)) {\r\n setTotalPages((total | 0) + 1);\r\n } else if (total === 0) {\r\n setTotalPages(1);\r\n } else {\r\n setTotalPages(total);\r\n }\r\n }\r\n )\r\n }\r\n },[serviceUnitKey]);\r\n\r\n\r\n const getMeeting = (e, data) => {\r\n var month = e.getUTCMonth() + 1;\r\n if(data == 2){\r\n month = e.getUTCMonth() + 2;\r\n }\r\n if(data == 3){\r\n month = e.getUTCMonth() + 2;\r\n }\r\n let year = e.getUTCFullYear();\r\n\r\n // let type;\r\n // if(bookingType === 0){\r\n // type = \"booking\"\r\n // } else if (bookingType === 1){\r\n // type = \"smc\"\r\n // } else {\r\n // type = \"tele\"\r\n // }\r\n \r\n axios.post('/api/v1/opd/appoint', {year: year, month: month})\r\n .then(\r\n result => {\r\n const temp = [];\r\n var data = result.data.data;\r\n if (data.length >= 0) {\r\n for (let i = 0; i < data.length; i++) {\r\n var newObj = { name : data[i].ServiceUnitName + \" \" + data[i].PatientCount\r\n , fromDT: data[i].AppointDate\r\n , toDT: data[i].AppointDate\r\n , serviceUnitKey: data[i].ServiceUnitKey\r\n // , isDisabled :data[i].isDisabled\r\n // , disableType : data[i].disableType\r\n }\r\n temp.push(newObj);\r\n }\r\n }\r\n var json = JSON.parse(JSON.stringify(temp).split('\"name\":').join('\"title\":').split('\"fromDT\":').join('\"start\":')\r\n .split('\"toDT\":').join('\"end\":').split('\"serviceUnitKey\":').join('\"id\":'));\r\n if (json.length >= 0) {\r\n setLeaveAll([]);\r\n setLeaveAll(json);\r\n }\r\n\r\n },\r\n error => { alert(error); }\r\n );\r\n }\r\n\r\n const handleDateClick = (args) => {\r\n\r\n };\r\n\r\n const handleEventClick = (args) => {\r\n setDefaultDate(moment(args.event.start).format('YYYY-MM-DD'))\r\n setDisabledDatetime(moment(args.event.start).format('YYYY-MM-DD'))\r\n setServiceUnitKey(args.event._def.publicId);\r\n var name = args.event._def.title;\r\n const words = name.split(\" \");\r\n setServiceUnitName(words[0]);\r\n };\r\n \r\n \r\n const classes = useStyles();\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n setBookingType(e.value)} /> */}\r\n {/* : <>\r\n } */}\r\n \r\n \r\n \r\n \r\n \r\n {isLoading && (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n\r\n function renderEventContent(eventInfo) {\r\n\r\n const _c = _color.find(c => c.id === 1);\r\n const colorTxt = (_c !== undefined) ? ((eventInfo.event.extendedProps.isDisabled == false) ? 'red' : _c.forecolor) : '#000000';\r\n\r\n const strikeTxt = (eventInfo.event.extendedProps.isDisabled == false) ? 'line-through' : '';\r\n\r\n return (\r\n <>\r\n จัดการวันปิดบริการ
\r\n \r\n\r\n ',\r\n click: function() {\r\n let calendarApi = calendarRef.current.getApi();\r\n calendarApi.next();\r\n getMeeting(calendarApi.getDate(), 3);\r\n }\r\n },\r\n }}\r\n locale={'th'}\r\n eventContent={renderEventContent}\r\n displayEventTime={false}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
*/}\r\n \r\n | HN | \r\nชื่อ - นามสกุล | \r\nสถานะ | \r\n
|---|---|---|
| \r\n {item.HN}\r\n | \r\n\r\n {item.FullName}\r\n | \r\n\r\n {(item.isApprove == 1) ? : <>}\r\n {(item.approveStatusKey == 1) ? : <>}\r\n {(item.approveStatusKey == -1) ? : <>}\r\n | \r\n
รายชื่อผู้ป่วยนัด {ServiceUnitName} ในวันที่ {DisabledDatetime}
\r\n\r\n
\r\n {eventInfo.timeText}
\r\n {eventInfo.event.title}
\r\n \r\n )\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\nexport default Appointment;","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { DateRange, Bookmarks, ExitToApp, CalendarToday } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Request from \"views/Meeting/Request.js\";\r\nimport Home from \"views/Meeting/Home\";\r\nimport DisabledDay from \"views/ServiceSystem/DisabledDay\";\r\nimport Appointment from \"views/ServiceSystem/Appointment\";\r\nimport Accept from \"views/Meeting/Accept\";\r\nimport Goto from \"views/Meeting/Goto\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"จัดการวันบริการ\",\r\n icon: CalendarToday,\r\n component: DisabledDay,\r\n layout: \"/servicesystem\",\r\n path: \"/disabledday\",\r\n },\r\n {\r\n name: \"นัด Softcon\",\r\n icon: CalendarToday,\r\n component: Appointment,\r\n layout: \"/servicesystem\",\r\n path: \"/appointment\",\r\n },\r\n {\r\n name: \"ออกจากระบบ\",\r\n icon: ExitToApp,\r\n component: LogoutPage,\r\n layout: \"/auth\",\r\n path: \"/logout\",\r\n },\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Home, AccountBox,ExitToApp } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport HomeView from \"views/Home/Home\";\r\nimport UserProfile from \"views/UserProfile/UserProfile\";\r\nimport LogoutPage from \"views/UserProfile/LogoutPage.js\";\r\n\r\n\r\nlet ps;\r\n\r\nconst routes = [\r\n {\r\n name: \"หน้าหลัก\",\r\n icon: Home,\r\n component: HomeView,\r\n layout: \"/home\",\r\n path: \"/index\",\r\n },\r\n {\r\n name: \"จัดการข้อมูลส่วนตัว2\",\r\n icon: AccountBox,\r\n component: UserProfile,\r\n layout: \"/home\",\r\n path: \"/profile/:code\",\r\n hidden: true\r\n }, \r\n {\r\n name: \"จัดการข้อมูลส่วนตัว\",\r\n icon: AccountBox,\r\n component: UserProfile,\r\n layout: \"/home\",\r\n path: \"/profile\",\r\n }, \r\n {\r\n name: \"ออกจากระบบ\",\r\n icon: ExitToApp,\r\n component: LogoutPage,\r\n layout: \"/auth\",\r\n path: \"/logout\",\r\n },\r\n /*\r\n,\r\n {\r\n name: \"Test2\",\r\n icon: Build,\r\n component: Request,\r\n layout: \"/meeting\",\r\n path: \"/request\",\r\n },\r\n */\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo} from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport TSUser from \"components/Forms/TSUser\"; \r\nimport axios from \"axios\";\r\nimport { authHeader, handleResponse } from \"_helpers\";\r\n\r\n\r\nimport {\r\n Input,\r\n Label,\r\n FormGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n InputGroup,\r\n} from \"reactstrap\";\r\n\r\nimport \"react-datetime/css/react-datetime.css\"\r\nimport \"./custom-style.css\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst _color = [{id: 1, forecolor:'#3788d8'},{id: 2, forecolor:'#0E6251'},{id: 3, forecolor:'#9A7D0A'},{id: 4, forecolor:'#8E44AD'},{id: 5, forecolor:'#E67E22'} ]\r\n\r\nconst primaryColor = \"#af2cc5\";\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nconst Home = (props) => {\r\n const [isHR, setIsHR] = useState(false);\r\n const [isAdmin, setIsAdmin] = useState(false);\r\n\r\n \r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n \r\n\r\n useEffect(() => {\r\n \r\n axios({\r\n method: 'post',\r\n url: \"/api/v1/currentdate\"\r\n })\r\n .then(\r\n result => {\r\n var currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n const _isHR = currentUser.userDepartment.filter(u => u.departmentKey == 105 || u.departmentKey == 108).length > 0;\r\n const _isAdmin = currentUser.userDepartment.filter(u => u.departmentKey == 108).length > 0;\r\n setIsHR(_isHR);\r\n setIsAdmin(_isAdmin);\r\n },\r\n error => {console.log(error);}\r\n ); \r\n },[]);\r\n\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n {[\r\n {icon: \"fas fa-chart-bar\", title: \"ระบบ Datacenter\", color: \"info\", url: \"/datacenter\"},\r\n { icon: \"fas fa-hand-paper\", title: \"ระบบจองห้องประชุม\", color: \"primary\", url: \"/meeting\" },\r\n { icon: \"fas fa-users\", title: \"ระบบลา\", color: \"warning\", url: \"/leave\" },\r\n { icon: \"fas fa-warehouse\", title: \"ระบบครุภัณฑ์\", color: \"success\", url: \"/asset\", isVisible: isAdmin },\r\n {icon: \"fas fa-users-cog\", title: \"ระบบทรัพยากรบุคคล\", color: \"warning\", url: \"/hr\", isVisible: isHR},\r\n {icon: \"fas fa-cogs\", title: \"ระบบบริการ\", color: \"#c41cc9\", url: \"/servicesystem\"},\r\n {icon: \"fas fa-info-circle\", title: \"ระบบ Intranet\", color: \"#5e87b0\", url: \"http://intranet.trangskin.go.th\"},\r\n {icon: \"fas fa-qrcode\", title: \"สร้าง QRCode\", color: \"#000000\", url: \"https://ops-service.moph.go.th\"},\r\n {icon: \"fas fa-file-signature\", title: \"ลงนามคำรับรอง ฯ รองผู้อำนวยการ\", color: \"#4529ff\", url: \"/signature\"},\r\n {icon: \"fas fa-signature\", title: \"ลงนามคำรับรอง ฯ หัวหน้ากลุ่มงาน\", color: \"#b85f5f\", url: \"/subsignature\"},\r\n //{icon: \"fas fa-signature\", title: \"ระบบจองรถ\", color: \"#b85f5f\", url: \"/vehicle\"},\r\n {icon: \"fas fa-money-bill-wave\" ,title: \"ระบบการเงิน\", color:\"#009900\" ,url: \"/refund\"},\r\n\r\n ].map((card, key) => {\r\n if(card.isVisible==undefined || card.isVisible)\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n );\r\n else \r\n return (<>); \r\n })} \r\n \r\n
\r\n );\r\n}\r\n\r\n\r\n\r\nexport default Home;","/*eslint-disable*/\r\nimport React, { useState, useEffect, useRef } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\nimport { NavLink } from \"react-router-dom\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Drawer from \"@material-ui/core/Drawer\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// core components\r\nimport AdminNavbarLinks from \"components/Navbars/AdminNavbarLinks.js\";\r\nimport RTLNavbarLinks from \"components/Navbars/RTLNavbarLinks.js\";\r\n\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\n\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport TSSelect from \"components/Forms/TSSelect\";\r\nimport TSSelect2 from \"components/Forms/TSSelect2\";\r\nimport TSText from \"components/Forms/TSText\";\r\nimport TSRadio from \"components/Forms/TSRadio\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n\r\n//import styles from \"assets/jss/material-dashboard-react/components/sidebarStyle.js\";\r\n\r\nconst styles = {\r\n background: {\r\n position: \"absolute\",\r\n zIndex: \"1\",\r\n height: \"100%\",\r\n width: \"100%\",\r\n display: \"block\",\r\n top: \"0\",\r\n left: \"0\",\r\n backgroundSize: \"cover\",\r\n backgroundPosition: \"center center\",\r\n },\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n grid: {\r\n display: \"flex\",\r\n height: \"100%\",\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function LoginCom(props) {\r\n const classes = useStyles();\r\n // verifies if routeName is the one active (in browser input)\r\n function activeRoute(routeName) {\r\n return window.location.href.indexOf(routeName) > -1 ? true : false;\r\n }\r\n const { color, logo, image, logoText, routes } = props;\r\n var links = (\r\n \r\n {card.title}\r\n
\r\n- \r\n {routes.map((prop, key) => {\r\n var activePro = \" \";\r\n var listItemClasses;\r\n if (prop.path === \"/upgrade-to-pro\") {\r\n activePro = classes.activePro + \" \";\r\n listItemClasses = classNames({\r\n [\" \" + classes[color]]: true\r\n });\r\n } else {\r\n listItemClasses = classNames({\r\n [\" \" + classes[color]]: activeRoute(prop.layout + prop.path)\r\n });\r\n }\r\n const whiteFontClasses = classNames({\r\n [\" \" + classes.whiteFont]: activeRoute(prop.layout + prop.path)\r\n });\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [UserName, setUserName] = useState('');\r\n const [Password, setPassword] = useState('');\r\n\r\n const [modal, setModal] = useState(false);\r\n const [modal2, setModal2] = useState(false);\r\n const [modal3, setModal3] = useState(false);\r\n const [modal4, setModal4] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [icon2, setIcon2] = useState(\"far fa-question-circle\");\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n /*\r\n if (name === null || name === \"\") {\r\n cntErr += 1;\r\n errMsg.push(\r\n \r\n
\r\n \r\n {logoText}\r\n
\r\n แบบฟอร์มขอแจ้งซ่อม
\r\nกรุณาระบุรายละเอียด
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Popup from \"reactjs-popup\";\r\nimport SignaturePad from \"react-signature-canvas\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport { Collapse, Modal, ModalBody, Input, Label, } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport garuda from \"assets/img/garuda2.jpg\";\r\nimport \"./custom-style.css\";\r\nimport ReactFullScreenElement from \"react-fullscreen-element\";\r\nimport KeyboardEventHandler from \"react-keyboard-event-handler\";\r\nimport logoDMS from \"assets/img/1_logoDMS.jpg\";\r\nimport logo from \"assets/img/skin.png\";\r\n\r\n\r\n\r\n\r\nvar currentUser = \"\";\r\nif(JSON.parse(localStorage.getItem('currentUser')) !== null){\r\n currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n}\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst styles2 = {\r\n signatureCanvas: {\r\n border: \"1px solid black\",\r\n width: \"100%\",\r\n minHeight: \"350px\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nconst Edit = props => {\r\n const [imageURL, setImageURL] = useState(null);\r\n const [imageURL2, setImageURL2] = useState(null);\r\n // const [modalPolicy, setModalPolicy] = useState(true);\r\n const [modal, setModal] = useState(false);\r\n const [modalSig, setModalSig] = useState(false);\r\n const [modalSig2, setModalSig2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const sigCanvas = useRef({});\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [fullScreen, setFullScreen] = useState(false);\r\n const [fullScreen2, setFullScreen2] = useState(false);\r\n const [configId, setConfigId] = useState(false);\r\n const [PDF, setPDF] = useState(null);\r\n const [configPolicy, setConfigPolicy] = useState(false);\r\n const [modalPolicy, setModalPolicy] = useState(false);\r\n const [modalPolicy2, setModalPolicy2] = useState(true);\r\n const [MedicalCertificate, setMedicalCertificate] = useState('');\r\n const [Academicmission, setAcademicmission] = useState('');\r\n const [SkinDiseaseHospital, setSkinDiseaseHospital] = useState('');\r\n const [Name, setName] = useState('');\r\n const [Directorposition, setDirectorposition] = useState('');\r\n const [Name1, setName1] = useState('');\r\n const [Testimonial, setTestimonial] = useState('');\r\n const [Testimonial1, setTestimonial1] = useState('');\r\n const [DeputyDirector, setDeputyDirector] = useState('');\r\n const [Name2, setName2] = useState('');\r\n const [Acting, setActing] = useState('');\r\n const [Date, setDate] = useState('');\r\n const [Name3, setName3] = useState('');\r\n const [DeputyMedicalDirector, setDeputyMedicalDirector] = useState('');\r\n const [Date1, setDate1] = useState('');\r\n const [indicators, setIndicators] = useState([]);\r\n const [inputs, setInputs] = useState([]);\r\n\r\n const handleAddInput = () => {\r\n setInputs([...inputs, { id: window.Date.now(), value: \"\" }]);\r\n };\r\n\r\n const handleInputChange = (id, newValue) => {\r\n setInputs((prevInputs) =>\r\n prevInputs.map((input) =>\r\n input.id === id ? { ...input, value: newValue } : input\r\n )\r\n );\r\n };\r\n\r\n const handleRemoveInput = (id) => {\r\n setInputs((prevInputs) => prevInputs.filter((input) => input.id !== id));\r\n };\r\n\r\n\r\n function setFullScreenKey(e) {\r\n if (\r\n e === \"esc\"\r\n )\r\n {\r\n setFullScreen(false);\r\n }\r\n }\r\n\r\n\r\n const handleResize = () => {\r\n if (window.innerWidth < 720) {\r\n setIsMobile(true);\r\n } else {\r\n setIsMobile(false);\r\n }\r\n };\r\n\r\n\r\n const setBoth = () => {\r\n const newIndicator = ` ${indicators.length + 1}`;\r\n setIndicators([...indicators, newIndicator]);\r\n\r\n handleAddInput();\r\n }\r\n\r\n \r\n\r\n // create an event listener\r\n useEffect(() => {\r\n window.addEventListener(\"resize\", handleResize);\r\n });\r\n\r\n const clear = () => sigCanvas.current.clear();\r\n\r\n const save = () =>\r\n setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n\r\n const save2 = () =>\r\n setImageURL2(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModalSig(true);\r\n }\r\n };\r\n\r\n function DataURIToBlob(dataURI) {\r\n const splitDataURI = dataURI.split(\",\");\r\n const byteString =\r\n splitDataURI[0].indexOf(\"base64\") >= 0\r\n ? atob(splitDataURI[1])\r\n : decodeURI(splitDataURI[1]);\r\n const mimeString = splitDataURI[0].split(\":\")[1].split(\";\")[0];\r\n\r\n const ia = new Uint8Array(byteString.length);\r\n for (let i = 0; i < byteString.length; i++)\r\n ia[i] = byteString.charCodeAt(i);\r\n\r\n return new Blob([ia], { type: mimeString });\r\n }\r\n\r\n function handleConfirm() {\r\n setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n const fileField = DataURIToBlob(\r\n sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\")\r\n );\r\n const file = new File([fileField], \"File name\", { type: \"image/png\" });\r\n const formData = new FormData();\r\n formData.append(\"files\", file);\r\n axios.post(\"/api/v1/data/signature/\" + 1,\r\n formData,\r\n {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }\r\n )\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setModalSig(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n }, error => { console.log(error); }\r\n );\r\n }\r\n\r\n function handleConfirm2() {\r\n setImageURL2(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n const fileField = DataURIToBlob(\r\n sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\")\r\n );\r\n const file = new File([fileField], \"File name\", { type: \"image/png\" });\r\n const formData = new FormData();\r\n formData.append(\"files\", file);\r\n axios.post(\"/api/v1/data/signature/\" + 2,\r\n formData,\r\n {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }\r\n )\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setModalSig2(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n }, error => { console.log(error); }\r\n );\r\n }\r\n\r\n const handleSubmit2 = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModalSig2(true);\r\n }\r\n };\r\n\r\n const handleSubmitPolicy = evt => {\r\n setConfigPolicy(false);\r\n // setModalPolicy(true);\r\n handleSubmitPDF2();\r\n }\r\n\r\n const handleSubmitPDF = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n fetch(\"/api/v1/download/pdf/\" + 1, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setPDF(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setFullScreen(true);\r\n }\r\n };\r\n\r\n const handleSubmitPDF2 = evt => {\r\n\r\n var cntErr = 0;\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n fetch(\"/api/v1/download/pdf/\" + 5, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setPDF(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setFullScreen2(true);\r\n }\r\n };\r\n\r\n const setFullScreenButton = evt => {\r\n if(currentUser.userName == \"voraphol\"){\r\n setFullScreen(false);\r\n var edit = {\r\n Value: \"0\"\r\n };\r\n\r\n axios.put(\"/api/v1/configSignature/\" + 2, edit)\r\n .then(\r\n result => {\r\n if(result.status == 200)\r\n {\r\n setConfigId(false);\r\n }\r\n },\r\n error => {console.log(error); }\r\n );\r\n } else {\r\n setFullScreen(false);\r\n }\r\n };\r\n\r\n const setFullScreenButton2 = evt => {\r\n setFullScreen2(false);\r\n };\r\n\r\n useEffect(() => {\r\n axios.get(\"/api/v1/configSignature/\" + 2)\r\n .then(\r\n result => {\r\n if(result.status == 200)\r\n {\r\n if(result.data.data.value === \"1\") {\r\n setConfigId(true)\r\n }\r\n }\r\n },\r\n error => {console.log(error); }\r\n );\r\n\r\n axios.get(\"/api/v1/configSignature/\" + 1)\r\n .then(\r\n result => {\r\n if(result.status == 200)\r\n {\r\n if(result.data.data.value === \"1\") {\r\n setConfigPolicy(true)\r\n }\r\n }\r\n },\r\n error => {console.log(error); }\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/download/signature/\" + 1, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setImageURL(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n fetch(\"/api/v1/download/signature/\" + 2, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setImageURL2(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n \r\n {inputs.map((input, index) => {\r\n const offset = 2;\r\n const thaiNumerals = indicators[index].replace(/\\d/g, (digit) =>{\r\n const Digit = (parseInt(digit) + offset) % 10\r\n return \"๐๑๒๓๔๕๖๗๘๙\"[Digit ]});\r\n return (\r\n \r\n \r\n {thaiNumerals}\r\n \r\n \r\n handleInputChange(input.id, e.target.value)}\r\n />\r\n {/* ปุ่มลบ */}\r\n handleRemoveInput(input.id)} // เพิ่มฟังก์ชันลบตามต้องการ\r\n style={{\r\n position: \"absolute\",\r\n right: \"5px\", // ชิดขอบขวาของช่อง\r\n top: \"50%\", // จัดกึ่งกลางแนวตั้ง\r\n transform: \"translateY(-50%)\",\r\n backgroundColor: \"red\",\r\n color: \"white\",\r\n border: \"none\",\r\n borderRadius: \"4px\",\r\n padding: \"5px 10px\",\r\n fontSize: \"0.9em\",\r\n cursor: \"pointer\",\r\n }}\r\n >\r\n ลบ\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ ภารกิจด้านวิชาการและการแพทย์ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๗{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๗\r\n \r\n
\r\n \r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setMedicalCertificate(e.target.value) }\r\n >\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setAcademicmission(e.target.value) }\r\n >\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setSkinDiseaseHospital(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setDirectorposition(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setDeputyDirector(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setTestimonial(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setName2(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setActing(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setDate(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setName3(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setDeputyMedicalDirector(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n \r\n {/*(อ้างอิงจากที่อยู่ตอนลงทะเบียน, สามาแรถแก้ไขที่อยู่จัดส่งได้)*/}\r\n setDate1(e.target.value) }\r\n >\r\n
\r\n \r\n \r\n
\r\n {imageURL2 ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗\r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการแพทย์\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗ ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘ ของภารกิจด้านวิชาการและการแพทย์ ตัวชี้วัดผลการปฏิบัติราชการ\r\n น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่ปรากฏอยู่ในเอกสารประกอบท้ายคำรับรองนี้\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ ตำแหน่ง รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ในฐานะผู้บังคับบัญชาของ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์ ได้พิจารณาและเห็นชอบกับแผนการปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และรายละเอียดอื่น ๆ ตามที่กำหนดในเอกสารประกอบท้ายคำรับรองนี้\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ และตรวจสอบผลการปฏิบัติราชการของ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์ ได้ทำความเข้าใจคำรับรองตาม ๓ แล้ว\r\n ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด เพื่อให้เกิดประโยชน์สุขแก่ประชาชนตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรอง ได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้ว จึงได้ลงลายมือชื่อไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n { configId && (\r\n คำรับรองการปฏิบัติราชการ ภารกิจด้านวิชาการและการแพทย์ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n ภารกิจด้านวิชาการและการแพทย์\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗\r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\nกำลังโหลดไฟล์ PDF...
\r\n )}\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านอำนวยการ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗ ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนการปฏิบัติราชการประจำปี ๒๕๖๘ ของภารกิจด้านอำนวยการ ตัวชี้วัดผลการปฏิบัติราชการ \r\n น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่ปรากฏอยู่ในเอกสารประกอบท้ายคำรับรองนี้\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ ตำแหน่ง รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ \r\n จังหวัดตรัง ในฐานะผู้บังคับบัญชาของ นางสาววรรณวิสา แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ ได้พิจารณาและเห็นชอบกับแผนการปฏิบัติราชการ \r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และรายละเอียดอื่น ๆ ตามที่กำหนดในเอกสารประกอบท้ายคำรับรองนี้ \r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ และตรวจสอบผลการปฏิบัติราชการของ นางสาววรรณวิสา แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ \r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาววรรณวิสา แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ ได้ทำความเข้าใจคำรับรองตาม ๓ แล้ว \r\n ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง \r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด เพื่อให้เกิดประโยชน์สุขแก่ประชาชนตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรอง ได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้ว จึงได้ลงลายมือชื่อไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n { configId && (\r\n คำรับรองการปฏิบัติราชการ ภารกิจด้านอำนวยการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n ภารกิจด้านอำนวยการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalPDF(false)}\r\n >\r\n
\r\n ปิด
\r\n \r\nกำลังโหลดไฟล์ PDF...
\r\n )}\r\n \r\n {/* C:\\DatacenterReact\\MaterialDashboardReact\\public\\PDF\\รอง ผ.อ. ด้านอำนวยการ.pdf */}\r\n {/* */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพยาบาล\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗ ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนการปฏิบัติราชการประจำปี ๒๕๖๘ ของภารกิจด้านการพยาบาล ตัวชี้วัดผลการปฏิบัติราชการ \r\n น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และรายละเอียดอื่น ๆ ตามที่ปรากฏอยู่ในเอกสารประกอบท้ายคำรับรองนี้\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ ตำแหน่ง รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง \r\n ในฐานะผู้บังคับบัญชาของ นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล ได้พิจารณาและเห็นชอบกับ แผนการปฏิบัติราชการ \r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และรายละเอียดอื่น ๆ ตามที่กำหนดในเอกสารประกอบท้ายคำรับรองนี้ \r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ และตรวจสอบผลการปฏิบัติราชการของ นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล \r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล ได้ทำความเข้าใจคำรับรองตาม ๓ แล้ว \r\n ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง \r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด เพื่อให้เกิดประโยชน์สุขแก่ประชาชนตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรอง ได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้ว จึงได้ลงลายมือชื่อไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n { configId && (\r\n คำรับรองการปฏิบัติราชการ ภารกิจด้านการพยาบาล โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n ภารกิจด้านการพยาบาล\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\nกำลังโหลดไฟล์ PDF...
\r\n )\r\n }\r\n \r\n {/* C:\\DatacenterReact\\MaterialDashboardReact\\public\\PDF\\รอง ผ.อ. ด้านอำนวยการ.pdf */}\r\n {/* */}\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านพัฒนาระบบสุขภาพ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗ ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนการปฏิบัติราชการประจำปี ๒๕๖๘ ของภารกิจด้านการพัฒนาระบบสุขภาพ ตัวชี้วัดผลการปฏิบัติราชการ \r\n น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่ปรากฏอยู่ในเอกสารประกอบท้ายคำรับรองนี้\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ ตำแหน่ง รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง \r\n ในฐานะผู้บังคับบัญชาของ นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ ได้พิจารณาและเห็นชอบกับแผนการปฏิบัติราชการ \r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และรายละเอียดอื่น ๆ ตามที่กำหนดในเอกสารประกอบท้ายคำรับรองนี้ \r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ และตรวจสอบผลการปฏิบัติราชการของ นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ \r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ ได้ทำความเข้าใจคำรับรองตาม ๓ แล้ว \r\n ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ รักษาการในตำแหน่งผู้อำนวยการโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง \r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด เพื่อให้เกิดประโยชน์สุขแก่ประชาชนตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรอง ได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้ว จึงได้ลงลายมือชื่อไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n { configId && (\r\n คำรับรองการปฏิบัติราชการ ภารกิจด้านการพัฒนาระบบสุขภาพ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n ภารกิจด้านการพัฒนาระบบสุขภาพ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 ? (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig3(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\nกำลังโหลดไฟล์ PDF...
\r\n )\r\n }\r\n \r\n {/* C:\\DatacenterReact\\MaterialDashboardReact\\public\\PDF\\รอง ผ.อ. ด้านอำนวยการ.pdf */}\r\n {/* */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n setYear(e); \r\n }}\r\n default={optionYear[0]}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n","/* eslint-disable no-unused-vars */\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Edit } from \"@material-ui/icons/\";\r\nimport DesktopWindows from \"@material-ui/icons/DesktopWindows\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\nimport Edit1 from \"views/Signature/Edit.js\";\r\nimport Medical from \"views/Signature/Medical2568.js\";\r\nimport Administrative from \"views/Signature/Administrative2568\";\r\nimport Nurse from \"views/Signature/Nurse2568.js\";\r\nimport HealthDev from \"views/Signature/HealthDev2568.js\";\r\nimport Year from \"views/Signature/Year.js\";\r\nimport axios from \"axios\";\r\nimport React, { useState, useEffect} from \"react\";\r\n\r\nlet ps;\r\n\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Signature({ ...rest }) {\r\n // styles\r\n const classes = useStyles();\r\n // ref to help us initialize PerfectScrollbar on windows devices\r\n const mainPanel = React.createRef();\r\n // states and functions\r\n const [image, setImage] = React.useState(bgImage);\r\n const [color, setColor] = React.useState(\"blue\");\r\n const [fixedClasses, setFixedClasses] = React.useState(\"dropdown show\");\r\n const [mobileOpen, setMobileOpen] = React.useState(false);\r\n const [listTitle, setListTitle] = useState([]);\r\n const [selectedYear, setSelectedYear] = useState(\"\");\r\n const [routes2, setRoutes2] = useState([]);\r\n\r\n // useEffect(() => {\r\n // axios.get(\"/api/v1/signature/title\")\r\n // .then( \r\n // result => {\r\n // listTitle.push(result.data.data);\r\n // result.data.data.forEach(e => {\r\n // listTitle.push(e);\r\n // });\r\n\r\n // setRoutes2(test);\r\n // console.log(routes2);\r\n // },\r\n // error => { \r\n // console.log(error); \r\n // }\r\n // ); \r\n // }, [])\r\n\r\n //const shouldShowRoutes = selectedYear !== \"\" && selectedYear !== null ? true : false;\r\n\r\n const routes = [\r\n // {\r\n // name: \"เลือกปี\",\r\n // icon: DesktopWindows,\r\n // component: Year,\r\n // layout: \"/signature\",\r\n // path: \"/year\"\r\n // },\r\n {\r\n name: \"เลือกปี\",\r\n icon: DesktopWindows,\r\n component: (props) => กรุณาเลือก
\r\n\r\n ปีงบประมาณ \r\n
\r\n{item.titleName}
, \r\n component: componentMap[item.titleId],\r\n layout: \"/signature\",\r\n path: `/title/${item.titleId}`, \r\n }));\r\n \r\n setListTitle(filteredData);\r\n setRoutes2(routes); \r\n })\r\n .catch((error) => {\r\n console.error(\"Error fetching titles:\", error);\r\n });\r\n }, []);\r\n \r\n const filteredRoutes = React.useMemo(() => {\r\n if (!selectedYear || routes2.length === 0) {\r\n // แสดงเฉพาะเมนูสำหรับเลือกปี หากยังไม่ได้เลือกปีหรือยังโหลด routes2 ไม่เสร็จ\r\n return routes;\r\n }\r\n // รวม routes พื้นฐานกับ routes2 เฉพาะเมื่อเลือกปีแล้ว\r\n return routes.concat(routes2);\r\n }, [selectedYear, routes2]);\r\n\r\n \r\n\r\n // const test = [\r\n // {\r\n // name: \"รองผู้อำนวยการด้านการแพทย์\",\r\n // icon: Edit,\r\n // component: (props) => \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport axios from \"axios\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Popup from \"reactjs-popup\";\r\nimport SignaturePad from \"react-signature-canvas\";\r\n\r\n// core components\r\nimport Grid from \"components/Grid/GridContainer\";\r\nimport Col from \"components/Grid/GridItem\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n// import CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\n// import avatar from \"assets/img/faces/marc.jpg\";\r\nimport garuda from \"assets/img/garuda2.jpg\";\r\nimport \"./custom-style.css\";\r\nimport logoDMS from \"assets/img/1_logoDMS.jpg\"; \r\nimport logo from \"assets/img/skin.png\"; \r\nimport ReactFullScreenElement from \"react-fullscreen-element\";\r\nimport KeyboardEventHandler from \"react-keyboard-event-handler\";\r\nvar currentUser = \"\";\r\nif(JSON.parse(localStorage.getItem('currentUser')) !== null){\r\n currentUser = JSON.parse(localStorage.getItem('currentUser'))\r\n}\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n // fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n }\r\n};\r\n\r\nconst styles2 = {\r\n signatureCanvas: {\r\n border: \"1px solid black\",\r\n width: \"100%\",\r\n minHeight: \"350px\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nconst Parcel2567 = props => {\r\n const [imageURL, setImageURL] = useState(null);\r\n const [imageURL2, setImageURL2] = useState(null);\r\n // const [modalPolicy, setModalPolicy] = useState(true);\r\n const [modal, setModal] = useState(false);\r\n const [modalSig, setModalSig] = useState(false);\r\n const [modalSig2, setModalSig2] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const sigCanvas = useRef({});\r\n const [isMobile, setIsMobile] = useState(false);\r\n const [configPolicy, setConfigPolicy] = useState(false);\r\n const [modalPolicy, setModalPolicy] = useState(false);\r\n const [modalPolicy2, setModalPolicy2] = useState(true);\r\n const [PDF, setPDF] = useState(null);\r\n const [fullScreen, setFullScreen] = useState(false);\r\n\r\n const customData = 2568;\r\n\r\n function setFullScreenKey(e) {\r\n if (\r\n e === \"esc\"\r\n )\r\n {\r\n setFullScreen(false);\r\n }\r\n }\r\n\r\n const handleResize = () => {\r\n if (window.innerWidth < 720) {\r\n setIsMobile(true);\r\n } else {\r\n setIsMobile(false);\r\n }\r\n };\r\n\r\n // create an event listener\r\n useEffect(() => {\r\n window.addEventListener(\"resize\", handleResize);\r\n });\r\n\r\n const clear = () => sigCanvas.current.clear();\r\n\r\n const save = () =>\r\n setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n\r\n const save2 = () =>\r\n setImageURL2(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModalSig(true);\r\n }\r\n };\r\n\r\n function DataURIToBlob(dataURI) {\r\n const splitDataURI = dataURI.split(\",\");\r\n const byteString =\r\n splitDataURI[0].indexOf(\"base64\") >= 0\r\n ? atob(splitDataURI[1])\r\n : decodeURI(splitDataURI[1]);\r\n const mimeString = splitDataURI[0].split(\":\")[1].split(\";\")[0];\r\n\r\n const ia = new Uint8Array(byteString.length);\r\n for (let i = 0; i < byteString.length; i++)\r\n ia[i] = byteString.charCodeAt(i);\r\n\r\n return new Blob([ia], { type: mimeString });\r\n }\r\n\r\n function handleConfirm() {\r\n setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n const fileField = DataURIToBlob(\r\n sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\")\r\n );\r\n const file = new File([fileField], \"File name\", { type: \"image/png\" });\r\n const formData = new FormData();\r\n formData.append(\"files\", file);\r\n axios.post(\"/api/v1/data/signature/\" + 11,\r\n formData,\r\n {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }\r\n )\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setModalSig(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n }\r\n\r\n function handleConfirm2() {\r\n setImageURL2(sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\"));\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n const fileField = DataURIToBlob(\r\n sigCanvas.current.getTrimmedCanvas().toDataURL(\"image/png\")\r\n );\r\n const file = new File([fileField], \"File name\", { type: \"image/png\" });\r\n const formData = new FormData();\r\n formData.append(\"files\", file);\r\n axios.post(\"/api/v1/data/signature/\" + 12,\r\n formData,\r\n {\r\n headers: {\r\n 'Content-Type': 'multipart/form-data'\r\n }\r\n }\r\n )\r\n .then(\r\n result => {\r\n if(result.data.result == 200)\r\n {\r\n setModalSig2(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n }, error => { console.log(error); }\r\n ); \r\n }\r\n\r\n const handleSubmit2 = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n setModalSig2(true);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n axios.get(\"/api/v1/configSignature/\" + 1)\r\n .then(\r\n result => {\r\n if(result.status == 200)\r\n {\r\n if(result.data.data.value === \"1\") {\r\n setConfigPolicy(true)\r\n }\r\n }\r\n },\r\n error => {console.log(error); }\r\n ); \r\n }, []);\r\n\r\n const handleSubmitPolicy = evt => {\r\n setConfigPolicy(false);\r\n //setModalPolicy(true);\r\n handleSubmitPDF2();\r\n }\r\n\r\n const handleSubmitPDF2 = evt => {\r\n\r\n var cntErr = 0;\r\n var errMsg = [];\r\n\r\n if (cntErr > 0) {\r\n setErrMsg(errMsg);\r\n setModalError(true);\r\n } else {\r\n fetch(\"/api/v1/download/pdf/\" + 5 + \"/\" + customData, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setPDF(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n setFullScreen(true);\r\n }\r\n };\r\n\r\n const setFullScreenButton = evt => {\r\n setFullScreen(false);\r\n };\r\n\r\n useEffect(() => {\r\n fetch(\"/api/v1/download/signature/\" + 11 + \"/\" + customData, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setImageURL(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n\r\n fetch(\"/api/v1/download/signature/\" + 12 + \"/\" + customData, {\r\n method: \"POST\"\r\n })\r\n .then(response => (response.ok ? response.blob() : false))\r\n .then(\r\n blob => {\r\n if (!blob) {\r\n console.log(\"ไม่พบไฟล์\");\r\n } else {\r\n var reader = new FileReader();\r\n reader.readAsDataURL(blob);\r\n reader.onloadend = function() {\r\n var base64data = reader.result;\r\n setImageURL2(base64data);\r\n };\r\n }\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n });\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านอำนวยการ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานการเงิน บัญชีและพัสดุ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๗\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก\r\n ข้อมูลพื้นฐาน เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาววรรณวิสา แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ\r\n ในฐานะผู้บังคับบัญชาของ นางประภัสสร\r\n บุญเจริญ หัวหน้ากลุ่มงานการเงิน\r\n บัญชีและพัสดุได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับและตรวจสอบผลการปฏิบัติราชการของ นางประภัสสร บุญเจริญ \r\n หัวหน้ากลุ่มงานการเงิน\r\n บัญชีและพัสดุให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางประภัสสร บุญเจริญ หัวหน้ากลุ่มงานการเงิน\r\n บัญชีและพัสดุได้ทำความเข้าใจคำรับรองตามข้อ ๓ แล้ว\r\n ขอให้คำรับรองกับ นางสาววรรณวิสา แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ \r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"wanwisa\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"prapatsorn\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านอำนวยการ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานบริหารทั่วไป\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๗\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อน ภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาววรรณวิสา แสงนพรัตน์ \r\n รองผู้อำนวยการด้านอำนวยการ ในฐานะผู้บังคับบัญชาของ \r\n นางสาววรรณวิสา\r\n แสงนพรัตน์ หัวหน้ากลุ่มงานบริหารทั่วไปได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับและตรวจสอบผลการปฏิบัติราชการของ นางสาววรรณวิสา แสงนพรัตน์ \r\n หัวหน้ากลุ่มงานบริหารทั่วไป\r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาววรรณวิสา\r\n แสงนพรัตน์ หัวหน้ากลุ่มงานบริหารทั่วไปได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำรับรองกับ นางสาววรรณวิสา\r\n แสงนพรัตน์ รองผู้อำนวยการด้านอำนวยการ\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"wanwisa\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"wanwisa\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการแพทย์\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานเภสัชกรรม\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ในฐานะผู้บังคับบัญชาของ นางสาวกัตติมาส ชื่นปิติกุล\r\n หัวหน้ากลุ่มงานเภสัชกรรม\r\n ได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ \r\n กำกับและตรวจสอบผลการปฏิบัติราชการของ นางสาวกัตติมาส ชื่นปิติกุล\r\n หัวหน้ากลุ่มงานเภสัชกรรมให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวกัตติมาส ชื่นปิติกุล หัวหน้ากลุ่มงานเภสัชกรรมได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำรับรองกับ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"supattra\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"kuttimat\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการแพทย์\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานพยาธิวิทยาคลินิกและเทคนิคการแพทย์\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ในฐานะผู้บังคับบัญชาของ นายสมโชค\r\n จันทร์สถาพร หัวหน้ากลุ่มงานพยาธิวิทยาคลินิกและเทคนิคการแพทย์ได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ \r\n กำกับและตรวจสอบผลการปฏิบัติราชการของ นายสมโชค\r\n จันทร์สถาพร หัวหน้ากลุ่มงานพยาธิวิทยาคลินิกและเทคนิคการแพทย์ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นายสมโชค\r\n จันทร์สถาพร หัวหน้ากลุ่มงานพยาธิวิทยาคลินิกและเทคนิคการแพทย์\r\n ได้ทำความเข้าใจคำรับรองตามข้อ ๓ แล้ว\r\n ขอให้คำรับรองกับ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"supattra\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"somchoke\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพยาบาล\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานวิชาการพยาบาล\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล\r\n ในฐานะผู้บังคับบัญชาของ นางสาวภคมน\r\n ดำรงคณภัทร์ หัวหน้ากลุ่มงานวิชาการพยาบาลได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ กำกับและตรวจสอบผลการปฏิบัติราชการของ นางสาวภคมน ดำรงคณภัทร์ \r\n หัวหน้ากลุ่มงานวิชาการพยาบาล\r\n ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวภคมน\r\n ดำรงคณภัทร์ หัวหน้ากลุ่มงานวิชาการพยาบาลได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำ รับรองกับนางนิฤมล ศรีโยธา \r\n รองผู้อำนวยการด้านการพยาบาล\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิด\r\n ผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำ รับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"nirumon\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"yindee\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพยาบาล\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานการพยาบาลผู้ป่วยนอก\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล\r\n ในฐานะผู้บังคับบัญชาของ นางนิฤมล ศรีโยธา หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยนอกได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับและตรวจสอบผลการปฏิบัติราชการของ นางนิฤมล ศรีโยธา \r\n หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยนอกให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางนิฤมล ศรีโยธา \r\n หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยนอกได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำรับรองกับ นางนิฤมล ศรีโยธา\r\n รองผู้อำนวยการด้านการพยาบาล\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"nirumon\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"nirumon\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพยาบาล\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานการพยาบาลผู้ป่วยใน\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางนิฤมล ศรีโยธา รองผู้อำนวยการด้านการพยาบาล\r\n ในฐานะผู้บังคับบัญชาของ นางศิริขวัญ แซ่ลิ่ม \r\n หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยในได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับและตรวจสอบผลการปฏิบัติราชการของ นางศิริขวัญ แซ่ลิ่ม หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยในให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางศิริขวัญ แซ่ลิ่ม หัวหน้ากลุ่มงานกลุ่มงานการพยาบาลผู้ป่วยในได้ทำความเข้าใจคำรับรองตาม\r\n ข้อ ๓ แล้ว ขอให้คำรับรองกับนางนิฤมล ศรีโยธา\r\n รองผู้อำนวยการด้านการพยาบาล\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"nirumon\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"sirikwan\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานวิจัย ถ่ายทอด และสนับสนุนวิชาการ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อน ภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ในฐานะผู้บังคับบัญชาของ นางสาวอณัฐชา ลั่นออ \r\n หัวหน้ากลุ่มงานวิจัย ถ่ายทอด และสนับสนุนวิชาการได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ\r\n และตรวจสอบผลการปฏิบัติราชการของ นางสาวอณัฐชา ลั่นออ \r\n หัวหน้ากลุ่มงานวิจัย ถ่ายทอด และสนับสนุนวิชาการให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวอณัฐชา ลั่นออ \r\n หัวหน้ากลุ่มงานวิจัย ถ่ายทอด และสนับสนุนวิชาการได้ทำความเข้าใจคำรับรองตาม\r\n ข้อ ๓ แล้ว ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"anatcha\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานดิจิทัลการแพทย์\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อน ภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ในฐานะผู้บังคับบัญชาของ นายนิธิ \r\n ปานดำ หัวหน้ากลุ่มงานดิจิทัลการแพทย์ได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ\r\n และตรวจสอบผลการปฏิบัติราชการของ นายนิธิ\r\n ปานดำ หัวหน้ากลุ่มงานดิจิทัลการแพทย์ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นายนิธิ\r\n ปานดำ หัวหน้ากลุ่มงานดิจิทัลการแพทย์ได้ทำความเข้าใจคำรับรองตาม\r\n ข้อ ๓ แล้ว ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"ton900\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานประกันสุขภาพ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อน ภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ในฐานะผู้บังคับบัญชาของ นางสาวศิริพร \r\n แสงหิรัญ หัวหน้ากลุ่มงานประกันสุขภาพได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ\r\n และตรวจสอบผลการปฏิบัติราชการของ นางสาวศิริพร\r\n แสงหิรัญ หัวหน้ากลุ่มงานประกันสุขภาพให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวศิริพร\r\n แสงหิรัญ หัวหน้ากลุ่มงานประกันสุขภาพได้ทำความเข้าใจคำรับรองตาม\r\n ข้อ ๓ แล้ว ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"siriporn\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานพัฒนาคุณภาพ\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อน ภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ในฐานะผู้บังคับบัญชาของ นางสาวปรียานุช เรืองงาม หัวหน้ากลุ่มงานพัฒนาคุณภาพได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน\r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ\r\n ตามที่กำหนดและข้าพเจ้ายินดีจะให้คำแนะนำ กำกับ\r\n และตรวจสอบผลการปฏิบัติราชการของ นางสาวปรียานุช เรืองงาม หัวหน้ากลุ่มงานพัฒนาคุณภาพให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวปรียานุช เรืองงาม หัวหน้ากลุ่มงานพัฒนาคุณภาพได้ทำความเข้าใจคำรับรองตาม\r\n ข้อ ๓ แล้ว ขอให้คำรับรองกับ นายวรพล เวชชาภินันท์ \r\n รองผู้อำนวยการด้านการพัฒนาระบบสุขภาพ\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"preeyanut\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการแพทย์\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานผื่นแพ้สัมผัสและอาชีวเวชศาสตร์\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ในฐานะผู้บังคับบัญชาของ นางสาวจุฑารัตน์ ปิ่นเขียน\r\n หัวหน้ากลุ่มงานผื่นแพ้สัมผัสและอาชีวเวชศาสตร์\r\n ได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ \r\n กำกับและตรวจสอบผลการปฏิบัติราชการของ นางสาวจุฑารัตน์ ปิ่นเขียน\r\n หัวหน้ากลุ่มงานผื่นแพ้สัมผัสและอาชีวเวชศาสตร์ให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวจุฑารัตน์ ปิ่นเขียน หัวหน้ากลุ่มงานผื่นแพ้สัมผัสและอาชีวเวชศาสตร์ได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำรับรองกับ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"supattra\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"chutarat\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ๑.\r\n \r\n \r\n \r\n คำรับรองระหว่าง\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n รองผู้อำนวยการด้านการแพทย์\r\n \r\n \r\n \r\n ผู้รับคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n และ\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n หัวหน้ากลุ่มงานศัลยศาสตร์และเลเซอร์ผิวหนัง\r\n \r\n \r\n \r\n ผู้ทำคำรับรอง
\r\n \r\n \r\n \r\n \r\n \r\n ๒.\r\n \r\n \r\n \r\n คำรับรองนี้เป็นคำรับรองฝ่ายเดียว มิใช่สัญญา\r\n และใช้สำหรับระยะเวลา ๑ ปี เริ่มตั้งแต่วันที่ ๑ ตุลาคม ๒๕๖๗\r\n ถึงวันที่ ๓๐ กันยายน ๒๕๖๘\r\n \r\n \r\n \r\n \r\n \r\n ๓.\r\n \r\n \r\n \r\n รายละเอียดของคำรับรอง ได้แก่ แผนปฏิบัติราชการประจำปี ๒๕๖๘\r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนน และ รายละเอียดอื่น ๆ\r\n ตามที่ได้ประชุมตกลงกันในภารกิจ\r\n \r\n \r\n \r\n \r\n \r\n ๔.\r\n \r\n \r\n \r\n ข้าพเจ้า นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ในฐานะผู้บังคับบัญชาของ นายวรพล เวชชาภินันท์\r\n หัวหน้ากลุ่มงานศัลยศาสตร์และเลเซอร์ผิวหนัง\r\n ได้พิจารณาและเห็นชอบกับแผนปฏิบัติราชการ\r\n ตัวชี้วัดผลการปฏิบัติราชการ น้ำหนัก ข้อมูลพื้นฐาน \r\n เป้าหมาย/เกณฑ์การให้คะแนนและรายละเอียดอื่น ๆ ตามที่กำหนด\r\n และข้าพเจ้ายินดีจะให้คำแนะนำ \r\n กำกับและตรวจสอบผลการปฏิบัติราชการของ นายวรพล เวชชาภินันท์\r\n หัวหน้ากลุ่มงานศัลยศาสตร์และเลเซอร์ผิวหนังให้เป็นไปตามคำรับรองที่จัดทำขึ้นนี้\r\n \r\n \r\n \r\n \r\n \r\n ๕.\r\n \r\n \r\n \r\n ข้าพเจ้า นายวรพล เวชชาภินันท์ หัวหน้ากลุ่มงานศัลยศาสตร์และเลเซอร์ผิวหนังได้ทำความเข้าใจคำรับรองตามข้อ\r\n ๓ แล้ว ขอให้คำรับรองกับ นางสาวสุพัตรา ชาติลีฬหา รองผู้อำนวยการด้านการแพทย์\r\n ว่าจะมุ่งมั่นปฏิบัติราชการให้เกิดผลงานที่ดีตามเป้าหมายของตัวชี้วัดแต่ละตัวในระดับสูงสุด\r\n เพื่อให้เกิดประโยชน์สุขแก่ประชาชน ตามที่ให้คำรับรองไว้\r\n \r\n \r\n \r\n \r\n \r\n ๖.\r\n \r\n \r\n \r\n ผู้รับคำรับรองและผู้ทำคำรับรองได้เข้าใจคำรับรองการปฏิบัติราชการและเห็นพ้องกันแล้วจึงได้ลงลายมือชื่อ\r\n ไว้เป็นสำคัญ\r\n \r\n \r\n \r\n \r\n \r\n {imageURL ? (\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n \r\n คำรับรองการปฏิบัติราชการ โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้\r\n จังหวัดตรัง\r\n
\r\n\r\n {\" \"}\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘{\" \"}\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n คำรับรองการปฏิบัติราชการ\r\n \r\n
\r\n\r\n โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง\r\n \r\n
\r\n\r\n ประจำปีงบประมาณ พ.ศ. ๒๕๖๘\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {imageURL && (currentUser.userName == \"madarakung\" || currentUser.userName == \"supattra\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n
\r\n
\r\n {imageURL2 && (currentUser.userName == \"madarakung\" || currentUser.userName == \"voraphol\") ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n ไม่สามารถบันทึกข้อมูลได้
\r\n{errMsg}
\r\n \r\n setModalError(false)}\r\n >\r\n
\r\n ตกลง
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n setModalSig2(false)}\r\n >\r\n \r\n
\r\n ปิด
\r\n \r\n\r\n \r\n\r\nบันทึก
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ของโรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง พ.ศ. ๒๕๖๗ \r\n \r\n \r\n
\r\n setModalPolicy()}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n เรื่อง แนวปฏิบัติการคุ้มครองข้อมูลส่วนบุคคล\r\n
\r\n ________________________
\r\n \r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ หมายถึง หน่วยงานในสังกัดกรมการแพทย์ทุกหน่วยงาน มีผลบังคับใช้\r\n กับข้าราชการ พนักงาน ผู้ปฏิบัติงาน รวมถึงบุคคลภายนอกผู้ซึ่งปฏิบัติงานให้หน่วยงานของกรมการแพทย์ ได้แก่\r\n \r\n
\r\n (๒) กองบริหารการคลัง
\r\n (๓) สถาบันวิจัยและประเมินเทคโนโลยีทางการแพทย์
\r\n (๔) กองบริหารทรัพยากรบุคคล
\r\n (๕) กองยุทธศาสตร์และแผนงาน
\r\n (๖) กองวิชาการแพทย์
\r\n (๗) สำนักนิเทศระบบการแพทย์
\r\n (๘) กลุ่มตรวจสอบภายใน
\r\n (๙) กลุ่มพัฒนาระบบบริหาร
\r\n (๑๐) สำนักดิจิทัลการแพทย์
\r\n (๑๑) กองกฎหมายและคุ้มครองจริยธรรม
\r\n (๑๒)โรงพยาบาลนพรัตนราชธานี
\r\n (๑๓) สถาบันอาชีวเวชศาสตร์และเวชศาสตร์สิ่งแวดล้อม
\r\n (๑๔) โรงพยาบาลเมตตาประชารักษ์ (วัดไร่ขิง)
\r\n (๑๕) โรงพยาบาลราชวิถี
\r\n (๑๖) โรงพยาบาลเลิดสิน
\r\n (๑๗) โรงพยาบาลสงฆ์
\r\n (๑๘) สถาบันสิรินธรเพื่อการฟื้นฟูสมรรถภาพทางการแพทย์แห่งชาติ
\r\n (๑๙) สถาบันทันตกรรม
\r\n (๒๐) สถาบันประสาทวิทยา
\r\n (๒๑) สถาบันพยาธิวิทยา
\r\n (๒๒) สถาบันมะเร็งแห่งชาติ
\r\n (๒๓) สถาบันบำบัดรักษาและฟื้นฟูผู้ติดยาเสพติดแห่งชาติบรมราชชนนี
\r\n (๒๔) สถาบันโรคทรวงอก
\r\n (๒๕) สถาบันโรคผิวหนัง
\r\n (๒๖) สถาบันเวชศาสตร์สมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ/ศูนยันวัตกรรมสุขภาพผู้สูงอายุ
\r\n (๒๗) สถาบันสุขภาพเด็กแห่งชาติมหาราชินี
\r\n (๒๘) สถานพยาบาลกระทรวงสาธารณสุข
\r\n (๒๙) สถาบันร่วมผลิตแพทย์ กรมการแพทย์ (มหาวิทยาลัยรังสิต)
\r\n (๓๐) สถาบันเวชศาสตร์การออกกำลังกายและการกีฬา
\r\n (๓๑) โรงพยาบาลประสาทเชียงใหม่
\r\n (๓๒) โรงพยาบาลมะเร็งชลบุรี
\r\n (๓๓) โรงพยาบาลมะเร็งลพบุรี
\r\n (๓๔) โรงพยาบาลมะเร็งลำปาง
\r\n (๓๕) โรงพยาบาลมะเร็งอุบลราชธานี
\r\n (๓๖) โรงพยาบาลมะเร็งอุดรธานี
\r\n (๓๗) โรงพยาบาลมะเร็งสุราษฎร์ธานี
\r\n (๓๘) โรงพยาบาลมหาวชิราลงกรณธัญบุรี
\r\n (๓๘) โรงพยาบาลธัญญารักษ์เชียงใหม่
\r\n (๔๐) โรงพยาบาลธัญญารักษ์สงขลา
\r\n (๔๑) โรงพยาบาลธัญญารักษ์ขอนแก่น
\r\n (๔๒) โรงพยาบาลธัญญารักษ์ปัตตานี
\r\n (๔๓) โรงพยาบาลธัญญารักษ์แม่ฮ่องสอน
\r\n (๔๔) โรงพยาบาลธัญญารักษ์อุดรธานี
\r\n (๔๕) โรงพยาบาลโรคผิวหนังเขตร้อนภาคใต้ จังหวัดตรัง
\r\n (๔๖) โรงพยาบาลสมเด็จพระสังฆราชญาณสังวรเพื่อผู้สูงอายุ จังหวัดชลบุรี
\r\n (๔๗) โรงพยาบาลเวชชารักษ์ลำปาง\r\n \r\n
\r\n \r\n ๒.๑ ข้อมูลส่วนบุคคลของบุคลากรหน่วยงานของกรมการแพทย์ เป็นข้อมูลส่วนบุคคล ของข้าราชการ\r\n พนักงานราชการ หนักงานกระทรวงสาธารณสุข ลูกจ้างประจำ ลูกจ้างชั่วคราวของหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๒ ข้อมูลส่วนบุคคลของผู้มาติดต่องาน เป็นข้อมูลส่วนบุคลคลของผู้มาติดต่องาน สมัครงาน\r\n การทำธุรกรรม เช่น การขอใบอนุญาตต่างๆ การส่งตรวจสิ่งส่งตรวจทางห้องปฏิบัติการ เป็นต้น การทำนิติกรรม\r\n เช่น การทำสัญญาว่าจ้างสัญญาซื้อขาย รวมถึงข้อมูลส่วนบุคคลของพนักงาน หรือลูกจ้างของหน่วยงาน\r\n ที่ทำสัญญา หรือทำงานให้กับหน่วยงานของกรมการแพทย์
\r\n \r\n ๒.๓ ข้อมูลส่วนบุคคลของผู้รับบริการเป็นข้อมูลส่วนบุคคลของผู้มาติดต่อเพื่อรับบริการ\r\n ทางการแพทย์และสาธารณสุขของหน่วยบริการสุขภาพ รวมถึงข้อมูลส่วนบุคคลของผู้รับบริการกรณีที่บุคลากร\r\n ของหน่วยบริการสุขภาพของหน่วยงานออกไปให้บริการนอกหน่วยบริการในพื้นที่ที่รับผิดชอบ\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะเก็บรวบรวมข้อมูลส่วนบุคคล \"เท่าที่จำเป็น\" สำหรับการให้บริการ\r\n ตามวัตถุประสงค์ในการดำเนินงานของกรมการแพทย์อย่างเคร่งครัดและจะขอความยินยอมจากเจ้าของข้อมูล\r\n ส่วนบุคคลก่อนหรือขณะที่เก็บรวบรวมข้อมูลส่วนบุคคล เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับยกเว้น\r\n ไม่ต้องขอความยินยอมตามที่กฎหมายกำหนดและจะรักษาข้อมูลเหล่านั้นไว้เป็นความลับตามเกณฑ์มาตรฐาน\r\n การกำหนดชั้นความลับของข้อมูลของกรมการแพทย์\r\n \r\n
\r\n \r\n ๔.๑ หน่วยงานของกรมการแพทย์จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของเจ้าของ\r\n ข้อมูลส่วนบุคคลเพื่อการดำเนินงานในพันธกิจต่าง ๆ ของกรมการแพทย์ รวมทั้งเพื่อการศึกษาวิจัยหรือ\r\n การจัดทำสถิติที่เป็นไปตามวัตถุประสงค์การดำเนินงานของกรมการแพทย์ หรือตามที่กฎหมายกำหนด
\r\n \r\n ๔.๒ หน่วยงานกรมการแพทย์จะบันทึกวัตถุประสงค์ของการเก็บรวบรวมข้อมูลส่วนบุคคลในขณะ\r\n ที่มีการรวบรวมและจัดเก็บ รวมถึงการนำข้อมูลนั้นไปใช้ในภายหลังและแจ้งให้เจ้าของข้อมูลทราบหากมี\r\n การเปลี่ยนแปลงวัตถุประสงค์ของการเก็บรวบรวมข้อมูล\r\n \r\n
\r\n \r\n ๕.๑ หน่วยงานของกรมการแพทย์จะกำกับดูแลมิให้ผู้ที่ไม่มีหน้าที่ หรือไม่ได้รับมอบหมาย\r\n เก็บรวบรวมข้อมูลส่วนบุคคลนำไปใช้ประโยชน์ เปิดเผย แสดง หรือทำให้ปรากฎในลักษณะอื่นใดแก่บุคคลอื่น\r\n นอกเหนือจากวัตถุประสงค์ที่ได้ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคล เว้นแต่การใช้ข้อมูลส่วนบุคคล\r\n ที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด
\r\n \r\n ๕.๒ หน่วยงานของกรมการแพทย์จะไม่เปิดเผยข้อมูลส่วนบุคคลของเจ้าของโดยไม่มีฐาน\r\n การประมวลผลข้อมูลโดยชอบด้วยกฎหมายแต่อาจเปิดเผยข้อมูลส่วนบุคคลของเจ้าของข้อมูล\r\n ภายใต้หลักเกณฑ์ที่กฎหมายกำหนด เช่น การเปิดเผยต่อหน่วยงานราชการ หน่วยงานภาครัฐ หน่วยงานที่กำกับ\r\n ดูแล รวมถึงในกรณีที่มีการร้องขอ ให้เปิดเผยข้อมูลโดยอาศัยอำนาจตามกฎหมาย\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์จะทำการเปิดเผยข้อมูลส่วนบุคคลต่อผู้รับข้อมูลในต่างประเทศเฉพาะ\r\n กรณีที่กฎหมายคุ้มครองข้อมูลส่วนบุคคลกำหนดให้ทำได้เท่านั้น ทั้งนี้หน่วยงานของกรมการแพทย์อาจปฏิบัติ\r\n ตามหลักเกณฑ์การโอนข้อมูลระหว่างประเทศ โดยเข้าทำข้อสัญญามาตรฐาน หรือใช้กลไกอื่นที่พึงมีตามกฎหมาย\r\n ว่าด้วยการคุ้มครองข้อมูลที่ใช้บังคับ และหน่วยงานของกรมการแพทย์อาจอาศัยสัญญาการโอน ข้อมูล หรือกลไกอื่น\r\n ที่ได้รับการอนุมัติเพื่อการโอนข้อมูลส่วนบุคคลไปยังต่างประเทศ\r\n \r\n
\r\n \r\n ๗.๑ หน่วยงานกรมการแพทย์จะกำหนดมาตรการในการรักษาความมั่นคงปลอดภัยของข้อมูล\r\n ส่วนบุคคลอย่างเหมาะสมเป็นไปตามมาตรฐานและข้อกำหนดที่เกี่ยวข้องเพื่อป้องกันการสูญหาย การเข้าถึง\r\n ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยผู้ที่ไม่มีสิทธิ หรือโดยไม่ชอบด้วยกฎหมาย
\r\n \r\n ๗.๒ หน่วยงานของกรมการแพทย์จะดำเนินการลบ หรือทำลายข้อมูลส่วนบุคคลเมื่อพันกำหนด\r\n ระยะเวลาการเก็บ หรือหมดความจำเป็นตามวัตถุประสงค์ในการเก็บรวบรวมข้อมูลส่วนบุคคล\r\n หรือเมื่อเจ้าของข้อมูลส่วนบุคคลร้องขอ หรือเจ้าของข้อมูลส่วนบุคคลได้เพิกถอนความยินยอม เว้นแต่\r\n การเก็บรักษาข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n หน่วยงานของกรมการแพทย์ จะเก็บรวบรวมข้อมูลส่วนบุคคลจากเจ้าของข้อมูลส่วนบุคคล\r\n โดยตรงเท่านั้นและต้อง \"ขอความยินยอมจากเจ้าของข้อมูลส่วนบุคคลก่อน หรือระหว่างการเก็บรวบรวมข้อมูล\r\n ส่วนบุคคล\" เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคลที่ได้รับการยกเว้นไม่ต้องขอความยินยอม\r\n ตามที่กฎหมายกำหนด และหากหน่วยงานของกรมการแพทย์จำเป็นต้อง \"เก็บรวบรวมข้อมูลส่วนบุคคล\r\n จากแหล่งอื่น\"ที่ไม่ใช่การเก็บข้อมูล จากเจ้าของข้อมูลส่วนบุคคลโดยตรง หน่วยงานกรมการแพทย์\r\n จะแจ้งเหตุผลความจำเป็นนั้น ให้เจ้าของข้อมูลส่วนบุคคลทราบ เว้นแต่การเก็บรวบรวมข้อมูลส่วนบุคคล\r\n ที่ได้รับยกเว้นไม่ต้องขอความยินยอมตามที่กฎหมายกำหนด\r\n \r\n
\r\n \r\n เจ้าของข้อมูลส่วนบุคคลมีสิทธิในการดำเนินการ ดังต่อไปนี้
\r\n \r\n ๙.๑ สิทธิในการขอรับข้อมูลส่วนบุคคลของตนเอง โดยอาจขอให้หน่วยงานของกรมการแพทย์\r\n ทำสำเนาข้อมูลส่วนบุคคลดังกล่าวให้แก่ตนเอง รวมถึงการขอให้เปิดเผยการได้มาซึ่งข้อมูลส่วนบุคคล\r\n ที่เจ้าของข้อมูลส่วนบุคคลไม่ได้ให้ความยินยอมได้
\r\n \r\n ๙.๒ สิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของตนเองด้วยเหตุบางประการตามที่กฎหมายกำหนด
\r\n \r\n ๙.๓ สิทธิขอให้ลบหรือทำลายข้อมูล โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการลบ หรือทำลาย\r\n หรือที่ให้ข้อมูลส่วนบุคคลเป็นข้อมูลที่ไม่สามารถระบุตัวบุคคลที่เป็นเจ้าของข้อมูลส่วนบุคคลได้ด้วยเหตุ\r\n บางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๔ สิทธิขอให้ระงับการใช้โดยขอให้หน่วยงานของกรมการแพทย์ระงับการใช้ข้อมูลส่วนบุคคล\r\n ของตนเองด้วยเหตุบางประการได้ตามที่กฎหมายกำหนด
\r\n \r\n ๙.๕ สิทธิขอให้แก้ไข เปลี่ยนแปลง โดยขอให้หน่วยงานของกรมการแพทย์ดำเนินการให้ข้อมูล\r\n ส่วนบุคคลนั้น มีความถูกต้องเป็นปัจจุบัน สมบูรณ์ และไม่ก่อให้เกิดความเข้าใจผิด
\r\n \r\n
\r\n \r\n กรมการแพทย์มีการดำเนินการตามนโยบายการคุ้มครองข้อมูลส่วนบุคคลของกรมการแพทย์\r\n โดยจะเผยแพร่ผ่านทางเว็บไซต์ https://dms.go.th และเว็บไซต์ของหน่วยงาน รวมทั้งหากมีการปรับปรุง\r\n แก้ไขนโยบายการคุ้มครองข้อมูลส่วนบุคคล ก็จะดำเนินการเผยแพร่ผ่านช่องทางดังกล่าว รวมทั้งผ่าน\r\n การสื่อสารตามช่องทางที่กรมการแพทย์ใช้เพื่อการประชาสัมพันธ์ตามความเหมาะสมด้วย\r\n \r\n \r\n
\r\n handleSubmitPolicy(false)}\r\n >\r\n
\r\n ยืนยัน
\r\n \r\n{item.titleName}
, \r\n component: componentMap[item.titleId],\r\n layout: \"/subsignature\",\r\n path: `/title/${item.titleId}`, \r\n }));\r\n \r\n setListTitle(filteredData);\r\n setRoutes2(routes); \r\n })\r\n .catch((error) => {\r\n console.error(\"Error fetching titles:\", error);\r\n });\r\n }, []);\r\n \r\n const filteredRoutes = React.useMemo(() => {\r\n if (routes2.length === 0) {\r\n // Return empty array or loading state while waiting for routes2 to be updated\r\n return [];\r\n }\r\n return routes2;\r\n }, [routes2]);\r\n\r\n\r\nconst routes = [\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานการเงิน บัญชีและพัสดุ\",\r\n // icon: Edit,\r\n // component: Parcel,\r\n // layout: \"/subsignature\",\r\n // path: \"/parcel\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานบริหารทั่วไป\",\r\n // icon: Edit,\r\n // component: GeneralAdministration,\r\n // layout: \"/subsignature\",\r\n // path: \"/generaladministration\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานเภสัชกรรม\",\r\n // icon: Edit,\r\n // component: Pharmacy,\r\n // layout: \"/subsignature\",\r\n // path: \"/pharmacy\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานพยาธิวิทยาคลินิกและเทคนิคการแพทย์\",\r\n // icon: Edit,\r\n // component: Pathology,\r\n // layout: \"/subsignature\",\r\n // path: \"/pathology\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานผื่นแพ้สัมผัสและอาชีวเวชศาสตร์\",\r\n // icon: Edit,\r\n // component: CDOM,\r\n // layout: \"/subsignature\",\r\n // path: \"/cdom\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานศัลยศาสตร์และเลเซอร์ผิวหนัง\",\r\n // icon: Edit,\r\n // component: DSL,\r\n // layout: \"/subsignature\",\r\n // path: \"/dsl\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานวิชาการพยาบาล\",\r\n // icon: Edit,\r\n // component: NursingScience,\r\n // layout: \"/subsignature\",\r\n // path: \"/nursingscience\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานการพยาบาลผู้ป่วยนอก\",\r\n // icon: Edit,\r\n // component: OPD,\r\n // layout: \"/subsignature\",\r\n // path: \"/opd\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานการพยาบาลผู้ป่วยใน\",\r\n // icon: Edit,\r\n // component: IPD,\r\n // layout: \"/subsignature\",\r\n // path: \"/ipd\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานวิจัย ถ่ายทอด และสนับสนุนวิชาการ\",\r\n // icon: Edit,\r\n // component: Research,\r\n // layout: \"/subsignature\",\r\n // path: \"/research\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานดิจิทัลการแพทย์\",\r\n // icon: Edit,\r\n // component: Digital,\r\n // layout: \"/subsignature\",\r\n // path: \"/digital\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานประกันสุขภาพ\",\r\n // icon: Edit,\r\n // component: HealthInsurance,\r\n // layout: \"/subsignature\",\r\n // path: \"/healthinsurance\"\r\n // },\r\n // {\r\n // name: \"หัวหน้ากลุ่มงานพัฒนาคุณภาพ\",\r\n // icon: Edit,\r\n // component: Quality,\r\n // layout: \"/subsignature\",\r\n // path: \"/quality\"\r\n // },\r\n // {\r\n // name: \"การลงนามคำรับรอง ฯ รองผู้อำนวยการ\",\r\n // icon: DesktopWindows,\r\n // layout: \"/signature\",\r\n // path: \"\"\r\n // }\r\n];\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n );\r\n}\r\n\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport KeyboardIcon from '@material-ui/icons/Keyboard';\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Search from \"@material-ui/icons/Search\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport TSSelect from \"components/Forms/TSSelect2\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport { width } from \"@material-ui/system\";\r\nimport { Save } from \"@material-ui/icons\";\r\nimport { Checkbox } from \"@material-ui/core\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n iconFile: {\r\n width: \"32px\",\r\n maxWidth: \"100%\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function VaccineStudent(props) {\r\n const VaccineEventKey = (props.match.params.VaccineEventKey !== undefined) ? props.match.params.VaccineEventKey : null;\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [Search1, setSearch1] = useState([]);\r\n const [SerialNo, setSerialNo] = useState(\"\");\r\n const [LotNo, setLotNo] = useState(\"\");\r\n const [ExpiredDate, setExpiredDate] = useState(\"\");\r\n const [name, setName] = useState(\"\");\r\n const [lastName, setLastName] = useState(\"\");\r\n const [EmployeeID, setEmployeeID] = useState(\"\");\r\n const [SBP, setSBP] = useState(1);\r\n const [VaccineID, setVaccineID] = useState(null);\r\n const [DBP, setDBP] = useState(1);\r\n const [Temp, setTemp] = useState(null);\r\n const [PR, setPR] = useState(1);\r\n const [RR, setRR] = useState(null);\r\n const [Height, setHeight] = useState(null);\r\n const [Weight, setWeight] = useState(null);\r\n const [CheckColor, setCheckColor] = useState('white');\r\n\r\n const [lOption, setLOption] = useState([]);\r\n const [RiskOption, setRiskOption] = useState([]);\r\n //const [option, setOption] = useState(null)\r\n const [RiskGroup, setRiskGroup] = useState(null);\r\n const [Injector, setInjector] = useState(null);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [isCheckPerson, setIsCheckPerson] = useState(false);\r\n const [isAutoSave, setIsAutosave] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const [FullName, setFullName] = useState(\"\");\r\n\r\n \r\n\r\n useEffect(() => {\r\n const requestOptions = {\r\n method: \"GET\",\r\n };\r\n\r\n\r\n fetch(\"/api/trs/injector\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setLOption(result);\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n\r\n\r\n fetch(\"/api/vaccine/riskgroup\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setRiskOption(result);\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (EmployeeID != null && EmployeeID != '' && SerialNo != null && SerialNo != '') {\r\n\r\n if (Temp == null || Temp == '')\r\n document.getElementById(\"Temp\").focus();\r\n else if (Weight == null || Weight == '')\r\n document.getElementById(\"Weight\").focus();\r\n else {\r\n if (isAutoSave && isCheckPerson)\r\n document.getElementById(\"btnSubmit\").focus(); \r\n else\r\n document.getElementById(\"Height\").focus(); \r\n }\r\n \r\n }\r\n \r\n \r\n \r\n\r\n }, [SerialNo]);\r\n\r\n\r\n const SendTab = (event, id) => {\r\n if (event.key === 'Enter') {\r\n if (id != \"btnSubmit\")\r\n document.getElementById(id).focus(); \r\n else if (id == \"btnSubmit\" && isCheckPerson)\r\n document.getElementById(id).focus(); \r\n }\r\n }\r\n\r\n const handleKeyDown = (event) => {\r\n if (event.key === 'Enter') {\r\n //setCheckColor('white');\r\n\r\n var isCall = false;\r\n\r\n \r\n\r\n if (Search1.length == 5 || Search1.length == 13) {\r\n // 5 หรือ 13 หลัก ให้ค้นชื่อ\r\n isCall = true;\r\n\r\n }\r\n else if (Search1.length == 15) {\r\n setSerialNo(Search1);\r\n\r\n isCall = (EmployeeID == null || EmployeeID == '');\r\n\r\n setSearch1('');\r\n }\r\n else if (Search1.length == 0) {\r\n isCall = false;\r\n document.getElementById(\"btnSubmit\").focus(); \r\n\r\n }\r\n\r\n if (isCall) {\r\n\r\n const requestOptions = {\r\n method: \"GET\"\r\n };\r\n\r\n fetch(\"/api/trs/student/\" + VaccineEventKey + \"/\" + Search1, requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n\r\n setFullName(result.titleName + ' ' + result.firstName + ' ' + result.lastName);\r\n setEmployeeID(result.employeeID);\r\n /*\r\n if (result.employeeID == '3929800028214')\r\n {\r\n setCheckColor('blue');\r\n alert('blue')\r\n }\r\n else {\r\n setCheckColor('green');\r\n }\r\n */\r\n\r\n if (result.trsVaccineID == null || result.trsVaccineID == '' || result.trsVaccineID == '00000000-0000-0000-0000-000000000000') {\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n }\r\n else {\r\n setVaccineID(result.trsVaccineID);\r\n }\r\n\r\n if (result.serialNo != null && result.serialNo != '') {\r\n setSerialNo('');\r\n setSerialNo(result.serialNo);\r\n }\r\n else {\r\n setSerialNo('');\r\n }\r\n\r\n setTemp(result.temp);\r\n setHeight(result.height);\r\n setWeight(result.weight);\r\n\r\n (result.temp == null || result.temp == '') ? setTemp('') : setTemp(result.temp);\r\n (result.height == null || result.height == '') ? setHeight('') : setHeight(result.height);\r\n (result.weight == null || result.weight == '') ? setWeight('') : setWeight(result.weight);\r\n\r\n (result.systolicBP == null || result.systolicBP == '') ? setSBP(1) : setSBP(result.systolicBP);\r\n (result.diastolicBP == null || result.diastolicBP == '') ? setDBP(1) : setDBP(result.diastolicBP);\r\n (result.PR == null || result.PR == '') ? setPR(1) : setPR(result.PR);\r\n\r\n\r\n if (!isCheckPerson) {\r\n setRiskGroup(result.riskGroupKey);\r\n setInjector(result.injectorKey);\r\n }\r\n\r\n setSearch1('');\r\n\r\n\r\n },\r\n error => {\r\n //setCheckColor('orange');\r\n //setIsAutoSave(true);\r\n //alert(\"ไม่มีข้อมูลผู้ฉีดวัคซีน\");\r\n setFullName('');\r\n setEmployeeID('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n //setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setRiskGroup(0);\r\n setInjector(0);\r\n }\r\n \r\n setSearch1('');\r\n\r\n }\r\n );\r\n }\r\n \r\n }\r\n }\r\n\r\n const handleSearch = (e) => {\r\n console.log(e);\r\n\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var txtErr = 'กรุณา\\r\\n';\r\n //if (isAutoSave) {\r\n\r\n if (SerialNo == null || SerialNo == '') {\r\n txtErr += 'ระบุ Serial No.\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (EmployeeID == null || EmployeeID == '') {\r\n txtErr += 'ค้นหาบุคคล\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Injector == null || Injector == '' || Injector == 0) {\r\n txtErr += 'ระบุผู้ฉีด\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Temp == null || Temp == '') {\r\n txtErr += 'ระบุอุณหภูมิ\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (SBP == null || SBP == '') {\r\n txtErr += 'ระบุความดัน SBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (DBP == null || DBP == '') {\r\n txtErr += 'ระบุความดัน DBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (PR == null || PR == '') {\r\n txtErr += 'ระบุ PR\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Weight == null || Weight == '') {\r\n txtErr += 'ระบุน้ำหนัก\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Height == null || Height == '') {\r\n txtErr += 'ระบุส่วนสูง\\r\\n';\r\n cntErr += 1;\r\n }\r\n\r\n if (cntErr > 0) {\r\n alert(txtErr);\r\n } else {\r\n //setModal(true);\r\n handleConfirm();\r\n }\r\n };\r\n const handleClear = evt => {\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n };\r\n const isCheck = () => {\r\n \r\n };\r\n\r\n const handleConfirm = (/*evt*/) => {\r\n //evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json-patch+json\"\r\n },\r\n body: JSON.stringify({\r\n trsVaccineID: (VaccineID != null) ? VaccineID : '00000000-0000-0000-0000-000000000000',\r\n employeeID: EmployeeID,\r\n vaccineEventKey: VaccineEventKey,\r\n serialNo: SerialNo,\r\n lotNo: LotNo,\r\n expiredDate: ExpiredDate,\r\n height: Height,\r\n weight: Weight,\r\n temp: Temp,\r\n pr: PR,\r\n systolicBP: SBP,\r\n diastolicBP: DBP,\r\n rr: RR,\r\n injectorKey: Injector,\r\n riskGroupKey: RiskGroup,\r\n lastEditDT: moment().format(\"YYYY-MM-DD hh:mm:ss\")\r\n })\r\n };\r\n\r\n fetch(\"/api/trs/vaccine/\" , requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n alert(JSON.stringify(result));\r\n //window.location.href = '/admin/vaccine';\r\n \r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n \r\n\r\n document.getElementById(\"txtSearch\").focus(); \r\n },\r\n error => {\r\n alert('ไม่สามารถบันทึกได้')\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n \r\n alert(error);\r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n );\r\n };\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n{/*\r\n \r\n setName(e)}\r\n value={name}\r\n />\r\n \r\n \r\n setLastName(e)}\r\n value={lastName}\r\n />\r\n \r\n*/} \r\n \r\n \r\n\r\n \r\n Lot No.\r\n setLotNo(e)}\r\n value={LotNo}\r\n />\r\n \r\n \r\n Expired\r\n setExpiredDate(e)}\r\n value={ExpiredDate}\r\n />\r\n \r\n \r\n \r\n SBP\r\n setSBP(e)}\r\n value={SBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"DBP\")}\r\n />\r\n \r\n \r\n DBP\r\n setDBP(e)}\r\n value={DBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"PR\")}\r\n />\r\n \r\n \r\n PR\r\n setPR(e)}\r\n value={PR}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"Weight\")}\r\n />\r\n \r\n\r\n \r\n RR\r\n setRR(e)}\r\n value={RR}\r\n integerNumber={true}\r\n />\r\n \r\n\r\n \r\n Temp\r\n setTemp(e)}\r\n value={Temp}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Weight\")}\r\n />\r\n \r\n \r\n Weight\r\n setWeight(e)}\r\n value={Weight}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Height\")}\r\n />\r\n \r\n \r\n Height\r\n setHeight(e)}\r\n value={Height}\r\n numberOnly={true}\r\n onKeyDown={e => SendTab(e, \"btnSubmit\")}\r\n />\r\n \r\n \r\n\r\n \r\n setRiskGroup(e.value)} />\r\n \r\n\r\n\r\n\r\n\r\n \r\n setInjector(e.value)} /> \r\n \r\n \r\n \r\n setIsCheckPerson(!isCheckPerson)}\r\n /> ไม่เปลี่ยนผู้ฉีด {Injector}\r\n\r\n\r\n setIsAutosave(!isAutoSave)}\r\n /> บันทึกหลัง Scan\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport KeyboardIcon from '@material-ui/icons/Keyboard';\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Search from \"@material-ui/icons/Search\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport TSSelect from \"components/Forms/TSSelect2\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport { width } from \"@material-ui/system\";\r\nimport { Save } from \"@material-ui/icons\";\r\nimport { Checkbox } from \"@material-ui/core\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n iconFile: {\r\n width: \"32px\",\r\n maxWidth: \"100%\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function VaccineMahidol(props) {\r\n const VaccineEventKey = (props.match.params.VaccineEventKey !== undefined) ? props.match.params.VaccineEventKey : null;\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [Search1, setSearch1] = useState([]);\r\n const [SerialNo, setSerialNo] = useState(\"\");\r\n const [LotNo, setLotNo] = useState(\"\");\r\n const [ExpiredDate, setExpiredDate] = useState(\"\");\r\n const [name, setName] = useState(\"\");\r\n const [lastName, setLastName] = useState(\"\");\r\n const [EmployeeID, setEmployeeID] = useState(\"\");\r\n const [SBP, setSBP] = useState(1);\r\n const [VaccineID, setVaccineID] = useState(null);\r\n const [DBP, setDBP] = useState(1);\r\n const [Temp, setTemp] = useState(null);\r\n const [PR, setPR] = useState(1);\r\n const [RR, setRR] = useState(null);\r\n const [Height, setHeight] = useState(null);\r\n const [Weight, setWeight] = useState(null);\r\n const [CheckColor, setCheckColor] = useState('white');\r\n\r\n const [lOption, setLOption] = useState([]);\r\n const [RiskOption, setRiskOption] = useState([]);\r\n //const [option, setOption] = useState(null)\r\n const [RiskGroup, setRiskGroup] = useState(null);\r\n const [Injector, setInjector] = useState(null);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [isCheckPerson, setIsCheckPerson] = useState(false);\r\n const [isAutoSave, setIsAutosave] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const [FullName, setFullName] = useState(\"\");\r\n\r\n \r\n\r\n useEffect(() => {\r\n const requestOptions = {\r\n method: \"GET\",\r\n };\r\n\r\n\r\n fetch(\"/api/trs/injector\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setLOption(result);\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n\r\n\r\n fetch(\"/api/vaccine/riskgroup\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setRiskOption(result);\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n\r\n\r\n if (EmployeeID != null && EmployeeID != '' && SerialNo != null && SerialNo != '') {\r\n\r\n if (Temp == null || Temp == '')\r\n document.getElementById(\"Temp\").focus();\r\n else if (Weight == null || Weight == '')\r\n document.getElementById(\"Weight\").focus();\r\n else {\r\n if (isAutoSave && isCheckPerson)\r\n document.getElementById(\"btnSubmit\").focus(); \r\n else\r\n document.getElementById(\"Height\").focus(); \r\n }\r\n \r\n }\r\n \r\n \r\n \r\n\r\n }, [SerialNo]);\r\n\r\n\r\n const SendTab = (event, id) => {\r\n if (event.key === 'Enter') {\r\n if (id != \"btnSubmit\")\r\n document.getElementById(id).focus(); \r\n else if (id == \"btnSubmit\" && isCheckPerson)\r\n document.getElementById(id).focus(); \r\n }\r\n }\r\n\r\n const handleKeyDown = (event) => {\r\n if (event.key === 'Enter') {\r\n //setCheckColor('white');\r\n\r\n var isCall = false;\r\n\r\n \r\n\r\n if (Search1.length == 5 || Search1.length == 13) {\r\n // 5 หรือ 13 หลัก ให้ค้นชื่อ\r\n isCall = true;\r\n\r\n }\r\n else if (Search1.length == 20) {\r\n setSerialNo(Search1);\r\n\r\n isCall = (EmployeeID == null || EmployeeID == '');\r\n\r\n setSearch1('');\r\n }\r\n else if (Search1.length == 0) {\r\n isCall = false;\r\n document.getElementById(\"btnSubmit\").focus(); \r\n\r\n }\r\n\r\n if (isCall) {\r\n\r\n const requestOptions = {\r\n method: \"GET\"\r\n };\r\n\r\n fetch(\"/api/trs/mahidol/\" + VaccineEventKey + \"/\" + Search1, requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n\r\n setFullName(result.titleName + ' ' + result.firstName + ' ' + result.lastName);\r\n setEmployeeID(result.employeeID);\r\n /*\r\n if (result.employeeID == '3929800028214')\r\n {\r\n setCheckColor('blue');\r\n alert('blue')\r\n }\r\n else {\r\n setCheckColor('green');\r\n }\r\n */\r\n\r\n if (result.trsVaccineID == null || result.trsVaccineID == '' || result.trsVaccineID == '00000000-0000-0000-0000-000000000000') {\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n }\r\n else {\r\n setVaccineID(result.trsVaccineID);\r\n }\r\n\r\n if (result.serialNo != null && result.serialNo != '') {\r\n setSerialNo('');\r\n setSerialNo(result.serialNo);\r\n }\r\n else {\r\n setSerialNo('');\r\n }\r\n\r\n setTemp(result.temp);\r\n setHeight(result.height);\r\n setWeight(result.weight);\r\n\r\n (result.temp == null || result.temp == '') ? setTemp('') : setTemp(result.temp);\r\n (result.height == null || result.height == '') ? setHeight('') : setHeight(result.height);\r\n (result.weight == null || result.weight == '') ? setWeight('') : setWeight(result.weight);\r\n\r\n (result.systolicBP == null || result.systolicBP == '') ? setSBP(1) : setSBP(result.systolicBP);\r\n (result.diastolicBP == null || result.diastolicBP == '') ? setDBP(1) : setDBP(result.diastolicBP);\r\n (result.PR == null || result.PR == '') ? setPR(1) : setPR(result.PR);\r\n\r\n\r\n if (!isCheckPerson) {\r\n setRiskGroup(result.riskGroupKey);\r\n setInjector(result.injectorKey);\r\n }\r\n\r\n setSearch1('');\r\n\r\n\r\n },\r\n error => {\r\n //setCheckColor('orange');\r\n //setIsAutoSave(true);\r\n //alert(\"ไม่มีข้อมูลผู้ฉีดวัคซีน\");\r\n setFullName('');\r\n setEmployeeID('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n //setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setRiskGroup(0);\r\n setInjector(0);\r\n }\r\n \r\n setSearch1('');\r\n\r\n }\r\n );\r\n }\r\n \r\n }\r\n }\r\n\r\n const handleSearch = (e) => {\r\n console.log(e);\r\n\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var txtErr = 'กรุณา\\r\\n';\r\n //if (isAutoSave) {\r\n\r\n if (SerialNo == null || SerialNo == '') {\r\n txtErr += 'ระบุ Serial No.\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (EmployeeID == null || EmployeeID == '') {\r\n txtErr += 'ค้นหาบุคคล\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Injector == null || Injector == '' || Injector == 0) {\r\n txtErr += 'ระบุผู้ฉีด\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Temp == null || Temp == '') {\r\n txtErr += 'ระบุอุณหภูมิ\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (SBP == null || SBP == '') {\r\n txtErr += 'ระบุความดัน SBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (DBP == null || DBP == '') {\r\n txtErr += 'ระบุความดัน DBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (PR == null || PR == '') {\r\n txtErr += 'ระบุ PR\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Weight == null || Weight == '') {\r\n txtErr += 'ระบุน้ำหนัก\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Height == null || Height == '') {\r\n txtErr += 'ระบุส่วนสูง\\r\\n';\r\n cntErr += 1;\r\n }\r\n\r\n if (cntErr > 0) {\r\n alert(txtErr);\r\n } else {\r\n //setModal(true);\r\n handleConfirm();\r\n }\r\n };\r\n const handleClear = evt => {\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n };\r\n const isCheck = () => {\r\n \r\n };\r\n\r\n const handleConfirm = (/*evt*/) => {\r\n //evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json-patch+json\"\r\n },\r\n body: JSON.stringify({\r\n trsVaccineID: (VaccineID != null) ? VaccineID : '00000000-0000-0000-0000-000000000000',\r\n employeeID: EmployeeID,\r\n vaccineEventKey: VaccineEventKey,\r\n serialNo: SerialNo,\r\n lotNo: LotNo,\r\n expiredDate: ExpiredDate,\r\n height: Height,\r\n weight: Weight,\r\n temp: Temp,\r\n pr: PR,\r\n systolicBP: SBP,\r\n diastolicBP: DBP,\r\n rr: RR,\r\n injectorKey: Injector,\r\n riskGroupKey: RiskGroup,\r\n lastEditDT: moment().format(\"YYYY-MM-DD hh:mm:ss\")\r\n })\r\n };\r\n\r\n fetch(\"/api/trs/vaccine/\" , requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n alert(JSON.stringify(result));\r\n //window.location.href = '/admin/vaccine';\r\n \r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n \r\n\r\n document.getElementById(\"txtSearch\").focus(); \r\n },\r\n error => {\r\n alert('ไม่สามารถบันทึกได้')\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson) {\r\n setInjector(0);\r\n setRiskGroup(0);\r\n }\r\n \r\n alert(error);\r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n );\r\n };\r\n\r\n\r\n return (\r\n Scan Serial Number, หรือ Scan QRCode ใบนำทางก่อนก็ได้ (หรือ Key เลขบัตร 13 หลัก, ลำดับ 5 หลัก)
\r\n\r\n setSearch1(e)}\r\n value={Search1}\r\n onKeyDown={handleKeyDown}\r\n />\r\n handleSearch()}\r\n >\r\n
\r\n \r\n ชื่อ : {EmployeeID} {FullName}\r\n
\r\n\r\n Serial No : {SerialNo}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n{/*\r\n \r\n setName(e)}\r\n value={name}\r\n />\r\n \r\n \r\n setLastName(e)}\r\n value={lastName}\r\n />\r\n \r\n*/} \r\n \r\n \r\n\r\n \r\n Lot No.\r\n setLotNo(e)}\r\n value={LotNo}\r\n />\r\n \r\n \r\n Expired\r\n setExpiredDate(e)}\r\n value={ExpiredDate}\r\n />\r\n \r\n \r\n \r\n SBP\r\n setSBP(e)}\r\n value={SBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"DBP\")}\r\n />\r\n \r\n \r\n DBP\r\n setDBP(e)}\r\n value={DBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"PR\")}\r\n />\r\n \r\n \r\n PR\r\n setPR(e)}\r\n value={PR}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"Weight\")}\r\n />\r\n \r\n\r\n \r\n RR\r\n setRR(e)}\r\n value={RR}\r\n integerNumber={true}\r\n />\r\n \r\n\r\n \r\n Temp\r\n setTemp(e)}\r\n value={Temp}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Weight\")}\r\n />\r\n \r\n \r\n Weight\r\n setWeight(e)}\r\n value={Weight}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Height\")}\r\n />\r\n \r\n \r\n Height\r\n setHeight(e)}\r\n value={Height}\r\n numberOnly={true}\r\n onKeyDown={e => SendTab(e, \"btnSubmit\")}\r\n />\r\n \r\n \r\n\r\n \r\n setRiskGroup(e.value)} />\r\n \r\n\r\n\r\n\r\n\r\n \r\n setInjector(e.value)} /> \r\n \r\n \r\n \r\n setIsCheckPerson(!isCheckPerson)}\r\n /> ไม่เปลี่ยนผู้ฉีด {Injector}\r\n\r\n\r\n setIsAutosave(!isAutoSave)}\r\n /> บันทึกหลัง Scan\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport KeyboardIcon from '@material-ui/icons/Keyboard';\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Search from \"@material-ui/icons/Search\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport TSSelect from \"components/Forms/TSSelect2\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport { width } from \"@material-ui/system\";\r\nimport { Save } from \"@material-ui/icons\";\r\nimport { Checkbox } from \"@material-ui/core\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n iconFile: {\r\n width: \"32px\",\r\n maxWidth: \"100%\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function Vaccine2(props) {\r\n const VaccineEventKey = (props.match.params.VaccineEventKey !== undefined) ? props.match.params.VaccineEventKey : null;\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n const classes = useStyles();\r\n const classes2 = useStyles2();\r\n const [Search1, setSearch1] = useState([]);\r\n const [SerialNo, setSerialNo] = useState(\"\");\r\n const [LotNo, setLotNo] = useState(\"\");\r\n const [ExpiredDate, setExpiredDate] = useState(\"\");\r\n const [name, setName] = useState(\"\");\r\n const [lastName, setLastName] = useState(\"\");\r\n const [EmployeeID, setEmployeeID] = useState(\"\");\r\n const [SBP, setSBP] = useState(1);\r\n const [VaccineID, setVaccineID] = useState(null);\r\n const [DBP, setDBP] = useState(1);\r\n const [Temp, setTemp] = useState(null);\r\n const [PR, setPR] = useState(1);\r\n const [RR, setRR] = useState(null);\r\n const [Height, setHeight] = useState(null);\r\n const [Weight, setWeight] = useState(null);\r\n const [CheckColor, setCheckColor] = useState('white');\r\n\r\n const [lOption, setLOption] = useState([]);\r\n //const [option, setOption] = useState(null)\r\n const [Injector, setInjector] = useState(null);\r\n\r\n const [modal, setModal] = useState(false);\r\n const [isCheckPerson, setIsCheckPerson] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [errMsg, setErrMsg] = useState([]);\r\n const [modalError, setModalError] = useState(false);\r\n const [icon, setIcon] = useState(\"far fa-question-circle\");\r\n\r\n const [FullName, setFullName] = useState(\"\");\r\n\r\n //const urgentList = [{ label: \"ปกติ\", value: 0 }, { label: \"ด่วน\", value: 1 }, { label: \"ฉุกเฉิน\", value: 2 }];\r\n //const urgentList = [{ label: \"1. สุภาวดี\", value: 2 }, { label: \"2. เปรมใจ\", value: 7 }, { label: \"3. อภิรักษ์\", value: 5 }, { label: \"4. จตุพร\", value: 4 }, { label: \"5. จิรวรรณ\", value: 20 }, { label: \"6. สลักจิตร\", value: 21 }, { label: \"7. อลิษา\", value: 6 }, { label: \"8. ยุภารัตน์\", value: 22 }, { label: \"9. พ.ญ.นริศรา\", value: 9 }, { label: \"10. สิริมา\", value: 8 }, { label: \"11. กาญจนา\", value: 3 }, { label: \"12. นฤมล\", value: 18 }, { label: \"13. พญ. กนกกร\", value: 11 }, { label: \"14. นพ.สุตศรัญ\", value: 23 }, { label: \"15. พญ.ชนกนันท์\", value: 24 }];\r\n const urgentList = [\r\n {\r\n label: \"1. สุภาวดี\",\r\n value: 2\r\n },\r\n {\r\n label: \"2. เปรมใจ\",\r\n value: 7\r\n },\r\n {\r\n label: \"3. อภิรักษ์\",\r\n value: 5\r\n },\r\n {\r\n label: \"4. จตุพร\",\r\n value: 4\r\n },\r\n {\r\n label: \"5. จิรวรรณ\",\r\n value: 20\r\n },\r\n {\r\n label: \"6. สลักจิตร\",\r\n value: 21\r\n },\r\n {\r\n label: \"7. อลิษา\",\r\n value: 6\r\n },\r\n {\r\n label: \"8. ยุภารัตน์\",\r\n value: 22\r\n },\r\n {\r\n label: \"9. พญ. นริศรา\",\r\n value: 9\r\n },\r\n {\r\n label: \"10. สิริมา\",\r\n value: 8\r\n },\r\n {\r\n label: \"11. กาญจนา\",\r\n value: 3\r\n },\r\n {\r\n label: \"12. นฤมล\",\r\n value: 18\r\n },\r\n {\r\n label: \"13. พญ. กนกกร\",\r\n value: 11\r\n },\r\n {\r\n label: \"14. นพ.สุตศรัญ\",\r\n value: 23\r\n },\r\n {\r\n label: \"15. พญ. ชนกนันท์\",\r\n value: 24\r\n },\r\n {\r\n label: \"16. กรรณิการ์\",\r\n value: 1\r\n },\r\n {\r\n label: \"17. เยาวภา\",\r\n value: 25\r\n },\r\n {\r\n label: \"18. จันทร์ทราทิพย์(สสจ.)\",\r\n value: 28\r\n },\r\n {\r\n label: \"19. ศศิฤดี(รพ.ตรัง)\",\r\n value: 29\r\n },\r\n {\r\n label: \"20. รักศิริ(รพ.ตรัง)\",\r\n value: 30\r\n },\r\n {\r\n label: \"21. ณภาภัช(รพ.ตรัง)\",\r\n value: 31\r\n },\r\n {\r\n label: \"22. วลัยรัตน์(สสจ.)\",\r\n value: 32\r\n },\r\n {\r\n label: \"23. นันทนาถ(สสจ.)\",\r\n value: 33\r\n },\r\n {\r\n label: \"24. อ.มุขรินทร์ (วพบ.)\",\r\n value: 34\r\n },\r\n {\r\n label: \"25. อ.นัสมา(วพบ.)\",\r\n value: 35\r\n },\r\n {\r\n label: \"26. ศิริขวัญ\",\r\n value: 15\r\n },\r\n {\r\n label: \"27. อำภา\",\r\n value: 16\r\n },\r\n {\r\n label: \"28. นิฤมล\",\r\n value: 17\r\n },\r\n {\r\n label: \"29. ปุณญิกา\",\r\n value: 19\r\n },\r\n {\r\n label: \"30. นุชนภางค์ เกิดรักษ์\",\r\n value: 36\r\n },\r\n {\r\n label: \"31. มนทิพย์ หนูเอียด\",\r\n value: 37\r\n },\r\n {\r\n label: \"32. พรทิพย์ รัตน์หิรัญ\",\r\n value: 38\r\n },\r\n {\r\n label: \"33. ยวนจิตร ข่ายม่าน\",\r\n value: 39\r\n },\r\n {\r\n label: \"34. ลักขณา จิตราวุธ\",\r\n value: 40\r\n },\r\n {\r\n label: \"35. มยุรี นาเลื่อน\",\r\n value: 41\r\n },\r\n {\r\n label: \"36. พรรณี คุณาธรรม\",\r\n value: 42\r\n },\r\n {\r\n label: \"37. นงลักษณ์ บินสตีระ\",\r\n value: 43\r\n },\r\n {\r\n label: \"38. ยินดี หุ้นย่อง\",\r\n value: 44\r\n },\r\n {\r\n label: \"39. ชยากร โสะหาบ\",\r\n value: 45\r\n },\r\n {\r\n label: \"40. วิไลกรณ์\",\r\n value: 46\r\n },\r\n {\r\n label: \"41. สุมลรัตน์(สสอ)\",\r\n value: 47\r\n },\r\n {\r\n label: \"42. วิภาวี(สสอ)\",\r\n value: 48\r\n },\r\n {\r\n label: \"43. อมรรัตน์(สสอ)\",\r\n value: 49\r\n } \r\n ,\r\n {\r\n label: \"44. อรอนงค์ ชูหวยทอง\",\r\n value: 50\r\n }\r\n ,\r\n {\r\n label: \"51. สุภาพร อนุพงศ์เมธี\",\r\n value: 51\r\n }\r\n ,\r\n {\r\n label: \"52. แขไข สุทธิจัน\",\r\n value: 52\r\n }\r\n ,\r\n {\r\n label: \"53. กรกช เพทาย\",\r\n value: 53\r\n }\r\n ,\r\n {\r\n label: \"54. จริต อัศวชาญชัยสกุล\",\r\n value: 54\r\n }\r\n ,\r\n {\r\n label: \"55. ชุติมา สุพิทักษ์\",\r\n value: 55\r\n },\r\n {\r\n label: \"56. วราตรี พลอินทร์\",\r\n value: 56\r\n },\r\n {\r\n label: \"57. ผจงวรรณ จริงจิตร\",\r\n value: 57\r\n },\r\n {\r\n label: \"หมอตุล\",\r\n value: 14\r\n }\r\n\r\n\r\n\r\n\r\n\r\n ];\r\n\r\n useEffect(() => {\r\n\r\n\r\n const requestOptions = {\r\n method: \"GET\",\r\n };\r\n\r\n /*\r\n fetch(\"/api/trs/injector\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n setLOption(result);\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n*/\r\n\r\n\r\n\r\n }, []);\r\n\r\n\r\n const SendTab = (event, id) => {\r\n if (event.key === 'Enter') {\r\n if (id != \"btnSubmit\")\r\n document.getElementById(id).focus(); \r\n else if (id == \"btnSubmit\" && isCheckPerson)\r\n document.getElementById(id).focus(); \r\n }\r\n }\r\n\r\n const handleKeyDown = (event) => {\r\n\r\n if (event.key === 'Enter') {\r\n setCheckColor('white');\r\n\r\n var isCall = false;\r\n\r\n if (Search1.length == 5 || Search1.length == 13) {\r\n // 5 หรือ 13 หลัก ให้ค้นชื่อ\r\n isCall = true;\r\n\r\n }\r\n else if (Search1.length == 20) {\r\n setSerialNo(Search1);\r\n \r\n isCall = (EmployeeID == null || EmployeeID == '');\r\n\r\n setSearch1('');\r\n }\r\n\r\n if (isCall) {\r\n\r\n const requestOptions = {\r\n method: \"GET\"\r\n };\r\n\r\n fetch(\"/api/trs/employee2/\" + VaccineEventKey + \"/\" + Search1, requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n\r\n setFullName(result.titleName + ' ' + result.firstName + ' ' + result.lastName);\r\n setEmployeeID(result.employeeID);\r\n /*\r\n if (result.employeeID == '3929800028214')\r\n {\r\n setCheckColor('blue');\r\n alert('blue')\r\n }\r\n else {\r\n setCheckColor('green');\r\n }\r\n */\r\n if (result.trsVaccine.length > 0) {\r\n var vc = result.trsVaccine[0];\r\n\r\n\r\n if (vc.trsVaccineID == '00000000-0000-0000-0000-000000000000') {\r\n //setIsAutoSave(true);\r\n }\r\n else {\r\n if (vc.serialNo != null) {\r\n setSerialNo('');\r\n setSerialNo(vc.serialNo);\r\n }\r\n }\r\n\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n\r\n setVaccineID(vc.trsVaccineID);\r\n setLotNo(vc.lotNo);\r\n //setExpiredDate(moment(vc.expiredDate).format('YYYY-MM-DD'));\r\n setHeight(vc.height);\r\n setWeight(vc.weight);\r\n setTemp(vc.temp);\r\n\r\n (vc.systolicBP == null || vc.systolicBP == '') ? setSBP(1) : setSBP(vc.systolicBP);\r\n (vc.diastolicBP == null || vc.diastolicBP == '') ? setDBP(1) : setDBP(vc.diastolicBP);\r\n (vc.setPR == null || vc.setPR == '') ? setPR(1) : setPR(vc.setPR);\r\n\r\n setRR(vc.rr);\r\n\r\n if (!isCheckPerson)\r\n setInjector(vc.injectorKey);\r\n\r\n setSearch1('');\r\n }\r\n else {\r\n //setCheckColor('red');\r\n //setIsAutoSave(true);\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n\r\n //setSerialNo('');\r\n\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson)\r\n setInjector(0);\r\n\r\n\r\n setSearch1('');\r\n }\r\n\r\n //setModal(false);\r\n //setIcon(\"far fa-question-circle\");\r\n },\r\n error => {\r\n //setCheckColor('orange');\r\n //setIsAutoSave(true);\r\n //alert(\"ไม่มีข้อมูลผู้ฉีดวัคซีน\");\r\n setFullName('');\r\n setEmployeeID('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n //setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson)\r\n setInjector(0);\r\n setSearch1('');\r\n\r\n }\r\n );\r\n }\r\n \r\n }\r\n }\r\n\r\n const handleSearch = (e) => {\r\n console.log(e);\r\n\r\n };\r\n\r\n const handleSubmit = evt => {\r\n evt.preventDefault();\r\n var cntErr = 0;\r\n\r\n var txtErr = 'กรุณา\\r\\n';\r\n //if (isAutoSave) {\r\n\r\n if (SerialNo == null || SerialNo == '') {\r\n txtErr += 'ระบุ Serial No.\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (EmployeeID == null || EmployeeID == '') {\r\n txtErr += 'ค้นหาบุคคล\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Injector == null || Injector == '' || Injector == 0) {\r\n txtErr += 'ระบุผู้ฉีด\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Temp == null || Temp == '') {\r\n txtErr += 'ระบุอุณหภูมิ\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (SBP == null || SBP == '') {\r\n txtErr += 'ระบุความดัน SBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (DBP == null || DBP == '') {\r\n txtErr += 'ระบุความดัน DBP\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (PR == null || PR == '') {\r\n txtErr += 'ระบุ PR\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Weight == null || Weight == '') {\r\n txtErr += 'ระบุน้ำหนัก\\r\\n';\r\n cntErr += 1;\r\n }\r\n if (Height == null || Height == '') {\r\n txtErr += 'ระบุส่วนสูง\\r\\n';\r\n cntErr += 1;\r\n }\r\n\r\n if (cntErr > 0) {\r\n alert(txtErr);\r\n } else {\r\n //setModal(true);\r\n handleConfirm();\r\n }\r\n };\r\n const handleClear = evt => {\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson)\r\n setInjector(0);\r\n\r\n };\r\n const isCheck = () => {\r\n \r\n };\r\n\r\n const handleConfirm = (/*evt*/) => {\r\n //evt.preventDefault();\r\n setIcon(\"fa fa-spinner fa-w-16 fa-spin fa-lg\");\r\n\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json-patch+json\"\r\n },\r\n body: JSON.stringify({\r\n trsVaccineID: (VaccineID != null) ? VaccineID : '00000000-0000-0000-0000-000000000000',\r\n employeeID: EmployeeID,\r\n vaccineEventKey: VaccineEventKey,\r\n serialNo: SerialNo,\r\n lotNo: LotNo,\r\n expiredDate: ExpiredDate,\r\n height: Height,\r\n weight: Weight,\r\n temp: Temp,\r\n pr: PR,\r\n systolicBP: SBP,\r\n diastolicBP: DBP,\r\n rr: RR,\r\n injectorKey: Injector\r\n })\r\n };\r\n\r\n fetch(\"/api/trs/vaccine/\" , requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n alert(JSON.stringify(result));\r\n //window.location.href = '/admin/vaccine';\r\n \r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson)\r\n setInjector(0);\r\n\r\n document.getElementById(\"txtSearch\").focus(); \r\n },\r\n error => {\r\n alert('ไม่สามารถบันทึกได้')\r\n setFullName('');\r\n setEmployeeID('');\r\n setSearch1('');\r\n setVaccineID('00000000-0000-0000-0000-000000000000');\r\n setSerialNo('');\r\n setLotNo('');\r\n setExpiredDate('')\r\n setHeight('');\r\n setWeight('');\r\n setTemp('');\r\n setSBP(1);\r\n setDBP(1);\r\n setPR(1);\r\n setRR('');\r\n if (!isCheckPerson)\r\n setInjector(0);\r\n alert(error);\r\n setModal(false);\r\n setIcon(\"far fa-question-circle\");\r\n }\r\n );\r\n };\r\n\r\n\r\n return (\r\n Scan Serial Number, หรือ Scan QRCode ใบนำทางก่อนก็ได้ (หรือ Key เลขบัตร 13 หลัก, ลำดับ 5 หลัก)
\r\n\r\n setSearch1(e)}\r\n value={Search1}\r\n onKeyDown={handleKeyDown}\r\n />\r\n handleSearch()}\r\n >\r\n
\r\n \r\n ชื่อ : {EmployeeID} {FullName}\r\n
\r\n\r\n Serial No : {SerialNo}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n{/*\r\n \r\n setName(e)}\r\n value={name}\r\n />\r\n \r\n \r\n setLastName(e)}\r\n value={lastName}\r\n />\r\n \r\n*/} \r\n \r\n \r\n\r\n \r\n Lot No.\r\n setLotNo(e)}\r\n value={LotNo}\r\n />\r\n \r\n \r\n Expired\r\n setExpiredDate(e)}\r\n value={ExpiredDate}\r\n />\r\n \r\n \r\n \r\n Temp \r\n setTemp(e)}\r\n value={Temp}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Weight\") }\r\n />\r\n \r\n \r\n SBP\r\n setSBP(e)}\r\n value={SBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"DBP\")}\r\n />\r\n \r\n \r\n DBP\r\n setDBP(e)}\r\n value={DBP}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"PR\")}\r\n />\r\n \r\n\r\n \r\n PR\r\n setPR(e)}\r\n value={PR}\r\n integerNumber={true}\r\n onKeyDown={e => SendTab(e, \"Weight\")}\r\n />\r\n \r\n \r\n RR\r\n setRR(e)}\r\n value={RR}\r\n integerNumber={true}\r\n />\r\n \r\n\r\n \r\n Weight\r\n setWeight(e)}\r\n value={Weight}\r\n numericInput={true}\r\n onKeyDown={e => SendTab(e, \"Height\")}\r\n />\r\n \r\n \r\n Height\r\n setHeight(e)}\r\n value={Height}\r\n numberOnly={true}\r\n onKeyDown={e => SendTab(e, \"btnSubmit\")}\r\n />\r\n \r\n \r\n \r\n \r\n setInjector(e.value)} />\r\n \r\n setIsCheckPerson(!isCheckPerson)}\r\n /> ไม่เปลี่ยนผู้ฉีด {Injector}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {/* Confirm */}\r\n setModal(false)} isOpen={modal}>\r\n \r\n \r\n {icon !== \"fa fa-spinner fa-w-16 fa-spin fa-lg\"\r\n ? \"ยืนยันการบันทึกข้อมูล\"\r\n : \"กำลังตรวจสอบข้อมูล\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Collapse, Modal, ModalBody } from \"reactstrap\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\nimport KeyboardIcon from '@material-ui/icons/Keyboard';\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Search from \"@material-ui/icons/Search\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport TSSelect from \"components/Forms/TSSelect2\";\r\nimport styles2 from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport { width } from \"@material-ui/system\";\r\nimport { Save } from \"@material-ui/icons\";\r\nimport { Checkbox } from \"@material-ui/core\";\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: '\"Sarabun\", sans-serif',\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\"\r\n },\r\n iconFile: {\r\n width: \"32px\",\r\n maxWidth: \"100%\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\nconst useStyles2 = makeStyles(styles2);\r\n\r\nexport default function VaccineEventList() {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n\r\n useEffect(() => {\r\n\r\n\r\n \r\n\r\n }, []);\r\n\r\n\r\n return (\r\n Scan Serial Number, หรือ Scan QRCode ใบนำทางก่อนก็ได้ (หรือ Key เลขบัตร 13 หลัก, ลำดับ 5 หลัก)
\r\n\r\n setSearch1(e)}\r\n value={Search1}\r\n onKeyDown={handleKeyDown}\r\n />\r\n handleSearch()}\r\n >\r\n
\r\n \r\n ชื่อ : {EmployeeID} {FullName}\r\n
\r\n\r\n Serial No : {SerialNo}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n setModal(false)}\r\n >\r\n \r\n
\r\n ยกเลิก
\r\n \r\n\r\nยืนยัน
\r\n \r\nรายการวัคซีน
\r\n{title}
: null}\r\n {prop.tabContent}
;\r\n }\r\n return null;\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\n// react plugin for creating charts\r\nimport ChartistGraph from \"react-chartist\";\r\n// @material-ui/core\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n// @material-ui/icons\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Table from \"components/Table/Table.js\";\r\nimport Tasks from \"components/Tasks/Tasks.js\";\r\nimport CustomTabs from \"components/CustomTabs/CustomTabs.js\";\r\nimport Danger from \"components/Typography/Danger.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/views/dashboardStyle.js\";\r\nimport SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';\r\nimport AddToQueueIcon from '@material-ui/icons/AddToQueue';\r\nimport HealingIcon from '@material-ui/icons/Healing';\r\nimport HourglassEmptyIcon from '@material-ui/icons/HourglassEmpty';\r\nimport logo from 'logo.png';\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function DBVaccine2(props) {\r\n const VaccineEventKey = (props.match.params.VaccineEventKey !== undefined) ? props.match.params.VaccineEventKey : null;\r\n\r\n const [VaccineTotal, setVaccineTotal] = useState(0);\r\n const [VaccineDone, setVaccineDone] = useState(0);\r\n const [VaccineWait, setVaccineWait] = useState(0);\r\n const [VaccineWait2, setVaccineWait2] = useState(0);\r\n const [VaccineScan, setVaccineScan] = useState(0);\r\n const [VaccineModerna, setVaccineModerna] = useState(0);\r\n\r\n useEffect(() => {\r\n\r\n retriveDashboard();\r\n\r\n setInterval(() => {\r\n retriveDashboard();\r\n }, 10000);\r\n\r\n }, []);\r\n\r\n\r\n const retriveDashboard = () => {\r\n\r\n const requestOptions = {\r\n method: \"GET\",\r\n };\r\n\r\n\r\n fetch(\"/api/dashboard/\", requestOptions)\r\n .then(response => response.json())\r\n .then(\r\n result => {\r\n\r\n let az = result.find(e => e.vaccine === \"AstraZeneca\");\r\n let sp = result.find(e => e.vaccine === \"Sinopharm\");\r\n let pz = result.find(e => e.vaccine === \"Pfizer\");\r\n let md = result.find(e => e.vaccine === \"Moderna\");\r\n let pc = result.find(e => e.vaccine === \"Pfizer-ส้ม\");\r\n var total = 0;\r\n \r\n if (az != null) { \r\n setVaccineDone(az.cnt);\r\n total = total + az.cnt;\r\n }\r\n if (pz != null) {\r\n setVaccineWait(pz.cnt);\r\n total = total + pz.cnt;\r\n }\r\n if (pc != null) {\r\n setVaccineWait2(pc.cnt);\r\n total = total + pc.cnt;\r\n }\r\n if (sp != null) {\r\n setVaccineScan(sp.cnt);\r\n total = total + sp.cnt;\r\n }\r\n if (md != null) {\r\n setVaccineModerna(md.cnt);\r\n total = total + md.cnt;\r\n }\r\n setVaccineTotal(total);\r\n\r\n },\r\n error => {\r\n alert(error);\r\n }\r\n );\r\n };\r\n\r\n\r\n const classes = useStyles();\r\n return (\r\n กลุ่มเป้าหมายทั้งหมด
\r\n\r\n {VaccineTotal} คน\r\n
\r\n\r\n \r\n \r\n e.preventDefault()}>\r\n Get more space\r\n \r\n
*/}\r\n ลงทะเบียนแล้ว
\r\n\r\n {VaccineDone} คน\r\n
\r\n\r\n
*/}\r\n บันทึก Serial
\r\n\r\n {VaccineScan} คน\r\n
\r\n\r\n
*/}\r\n รอฉีด
\r\n\r\n {VaccineWait} คน\r\n
\r\n\r\n
*/}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { Build } from \"@material-ui/icons/\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/adminStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/logo1.png\";\r\n\r\n//sinopharm, sinovac\r\n//import Vaccine from \"views/Vaccine/Vaccine3.js\";\r\n\r\n//นักเรียน\r\nimport VaccineStudent from \"views/Vaccine/VaccineStudent.js\";\r\n\r\nimport Vaccine from \"views/Vaccine/VaccineMahidol\";\r\n//import Vaccine from \"views/Vaccine/Vaccine3.js\";\r\nimport Vaccine2 from \"views/Vaccine/Vaccine2.js\";\r\nimport VaccineEventList from \"views/Vaccine/VaccineEventList.js\";\r\nimport DashboardVaccine from \"views/DashboardVaccine/DBVaccine.js\";\r\nimport DashboardVaccine2 from \"views/DashboardVaccine/DBVaccine2.js\";\r\nlet ps;\r\n\r\nconst routes = [\r\n \r\n {\r\n name: \"บันทึกวัคซีน\",\r\n icon: Build,\r\n component: VaccineEventList,\r\n layout: \"/vaccine\",\r\n path: \"/index\",\r\n },\r\n \r\n];\r\n\r\nconst switchRoutes = (\r\n ยอดลงทะเบียน
\r\n\r\n {VaccineTotal} คน\r\n
\r\n\r\n \r\n \r\n e.preventDefault()}>\r\n Get more space\r\n \r\n
*/}\r\n AstraZeneca
\r\n\r\n {VaccineDone} คน\r\n
\r\n\r\n
*/}\r\n Sinopharm
\r\n\r\n {VaccineScan} คน\r\n
\r\n\r\n
*/}\r\n Pfizer
\r\n\r\n {VaccineWait} คน\r\n
\r\n\r\n
*/}\r\n Pfizer ฝาส้ม
\r\n\r\n {VaccineWait2} คน\r\n
\r\n\r\n
*/}\r\n Moderna
\r\n\r\n {VaccineModerna} คน\r\n
\r\n\r\n
*/}\r\n \r\n
\r\n );\r\n}\r\n","import {\r\n drawerWidth,\r\n transition,\r\n container\r\n} from \"assets/jss/material-dashboard-react.js\";\r\n\r\nconst appStyle = theme => ({\r\n wrapper: {\r\n position: \"relative\",\r\n top: \"0\",\r\n height: \"100vh\",\r\n direction: \"rtl\"\r\n },\r\n mainPanel: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerWidth}px)`\r\n },\r\n overflow: \"auto\",\r\n position: \"relative\",\r\n float: \"left\",\r\n ...transition,\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n overflowScrolling: \"touch\"\r\n },\r\n content: {\r\n marginTop: \"70px\",\r\n padding: \"30px 15px\",\r\n minHeight: \"calc(100vh - 123px)\"\r\n },\r\n container,\r\n map: {\r\n marginTop: \"70px\"\r\n }\r\n});\r\n\r\nexport default appStyle;\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport Navbar from \"components/Navbars/Navbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\n\r\nimport routes from \"routes.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-react/layouts/rtlStyle.js\";\r\n\r\nimport bgImage from \"assets/img/sidebar-2.jpg\";\r\nimport logo from \"assets/img/reactlogo.png\";\r\n\r\nlet ps;\r\n\r\nconst switchRoutes = (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Success(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nSuccess.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React, { useState } from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\nimport Close from \"@material-ui/icons/Close\";\r\nimport Check from \"@material-ui/icons/Check\";\r\n// core components\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport Danger from \"components/Typography/Danger.js\";\r\nimport Success from \"components/Typography/Success.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport { useDropzone } from 'react-dropzone'\r\nimport Resizer from 'react-image-file-resizer';\r\n\r\nconst thumbsContainer = {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n marginTop: 16\r\n};\r\n\r\nconst thumb = {\r\n display: 'inline-flex',\r\n borderRadius: 2,\r\n border: '1px solid #eaeaea',\r\n marginBottom: 8,\r\n marginRight: 8,\r\n width: 100,\r\n height: 100,\r\n padding: 4,\r\n boxSizing: 'border-box'\r\n};\r\n\r\nconst thumbInner = {\r\n display: 'flex',\r\n minWidth: 0,\r\n overflow: 'hidden'\r\n};\r\n\r\nconst img = {\r\n display: 'block',\r\n width: 'auto',\r\n height: '100%'\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst styles = {\r\n cardCategoryWhite: {\r\n \"&,& a,& a:hover,& a:focus\": {\r\n color: \"rgba(255,255,255,.62)\",\r\n margin: \"0\",\r\n fontSize: \"14px\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\"\r\n },\r\n \"& a,& a:hover,& a:focus\": {\r\n color: \"#FFFFFF\"\r\n }\r\n },\r\n cardTitleWhite: {\r\n color: \"#FFFFFF\",\r\n marginTop: \"0px\",\r\n minHeight: \"auto\",\r\n fontWeight: \"300\",\r\n fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\r\n marginBottom: \"3px\",\r\n textDecoration: \"none\",\r\n \"& small\": {\r\n color: \"#777\",\r\n fontSize: \"65%\",\r\n fontWeight: \"400\",\r\n lineHeight: \"1\"\r\n }\r\n },\r\n tableUpgradeWrapper: {\r\n display: \"block\",\r\n width: \"100%\",\r\n overflowX: \"auto\",\r\n WebkitOverflowScrolling: \"touch\",\r\n MsOverflowStyle: \"-ms-autohiding-scrollbar\"\r\n },\r\n table: {\r\n width: \"100%\",\r\n maxWidth: \"100%\",\r\n marginBottom: \"1rem\",\r\n backgroundColor: \"transparent\",\r\n borderCollapse: \"collapse\",\r\n display: \"table\",\r\n borderSpacing: \"2px\",\r\n borderColor: \"grey\",\r\n \"& thdead tr th\": {\r\n fontSize: \"1.063rem\",\r\n padding: \"12px 8px\",\r\n verticalAlign: \"middle\",\r\n fontWeight: \"300\",\r\n borderTopWidth: \"0\",\r\n borderBottom: \"1px solid rgba(0, 0, 0, 0.06)\",\r\n textAlign: \"inherit\"\r\n },\r\n \"& tbody tr td\": {\r\n padding: \"12px 8px\",\r\n verticalAlign: \"middle\",\r\n borderTop: \"1px solid rgba(0, 0, 0, 0.06)\"\r\n },\r\n \"& td, & th\": {\r\n display: \"table-cell\"\r\n }\r\n },\r\n center: {\r\n textAlign: \"center\"\r\n }\r\n};\r\n\r\n\r\nconst UpgradeToPro = (props) => {\r\n const classes = useStyles();\r\n const [files, setFiles] = useState([]);\r\n\r\n \r\nconst { getRootProps, getInputProps } = useDropzone({\r\n accept: 'image/*',\r\n onDrop: acceptedFiles => {\r\n acceptedFiles.map(file =>\r\n setFiles(f => [...f, Object.assign(file, { preview: URL.createObjectURL(file) })])\r\n ) \r\n },\r\n});\r\n\r\nconst thumbs = files.map(file => (\r\n \r\n
\r\n));\r\n\r\nasync function uploadWithJSON(file) {\r\n \r\n\r\n const toBase64 = file => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = error => reject(error);\r\n });\r\n\r\n const toBase64Resize = (file2) => new Promise(resolve => {\r\n var compressType;\r\n\r\n if (file2.type == 'image/jpeg')\r\n compressType = 'JPEG';\r\n else if (file2.type == 'image/png')\r\n compressType = 'PNG';\r\n else if (file2.type == 'image/webp')\r\n compressType = 'WEBP';\r\n\r\n Resizer.imageFileResizer(file2, 1000, 1000, compressType, 100, 0,\r\n uri => {\r\n resolve(uri);\r\n },\r\n 'base64'\r\n );\r\n });\r\n //console.log(file)\r\n\r\n const data = {\r\n fileName: file.name,\r\n fileSize: file.size,\r\n fileType: file.type,\r\n fileBase64: await toBase64Resize(file),\r\n //fileBase64: await toBase64(file),\r\n }\r\n\r\n return await data;\r\n}\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n Material Dashboard PRO React\r\n
\r\n\r\n Are you looking for more components? Please check our Premium\r\n Version of Material Dashboard Angular.\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n \r\n\r\n
\r\n | \r\n | Free | \r\nPRO | \r\n
|---|---|---|
| Components | \r\n30 | \r\n200 | \r\n
| Plugins | \r\n2 | \r\n10 | \r\n
| Example Pages | \r\n7 | \r\n28 | \r\n
| Login, Register, Pricing, Lock Pages | \r\n\r\n | \r\n \r\n | \r\n
| \r\n ReactTables, ReactVectorMap, ReactSweetAlert, Wizard,\r\n Validation, ReactBigCalendar etc...\r\n | \r\n\r\n | \r\n \r\n | \r\n
| Mini Sidebar | \r\n\r\n | \r\n \r\n | \r\n
| Premium Support | \r\n\r\n | \r\n \r\n | \r\n
| \r\n | Free | \r\nJust $59 | \r\n
| \r\n | \r\n \r\n | \r\n\r\n | \r\n
\r\n \r\n
\r\n \r\n แนบไฟล์รูปภาพรอยโรค
\r\nรูปยาที่ต้องการรับยาต่อเนื่อง (Android เลือกทีละรูป)
\r\n\"พบแพทย์ต้องแนบรูปอาการอย่างน้อย 4 รูป\"
\r\n\r\n\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n\r\n\r\nexport default function Meeting({ ...rest }) {\r\n \r\n // initialize and destroy the PerfectScrollbar plugin\r\n React.useEffect(() => {\r\n \r\n window.location.href='https://1drv.ms/x/s!Al6qkcqJXp87xSIvCZi4JXzAliQx?e=vI8Axe';\r\n\r\n }, []);\r\n return (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n {switchRoutes}
\r\n {switchRoutes}
\r\n )}\r\n {getRoute() ? : null}\r\n {/* \r\n
\r\n );\r\n}\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\n\r\n// reactstrap components\r\nimport { Container } from \"reactstrap\";\r\n\r\n// core components\r\n\r\nfunction DefaultFooter() {\r\n return (\r\n <>\r\n \r\n \r\n );\r\n}\r\n\r\nexport default DefaultFooter;\r\n","import React, { useEffect, useState, Fragment } from \"react\";\r\nimport { Route, Redirect } from 'react-router-dom';\r\nimport { authenticationService } from '_services';\r\nimport { handleResponse, authHeader } from '_helpers';\r\nimport Async, { useAsync } from 'react-select/async';\r\n\r\n// reactstrap components\r\nimport {\r\n Button,\r\n NavItem,\r\n NavLink,\r\n Nav,\r\n TabContent,\r\n TabPane,\r\n Container,\r\n Row,\r\n Col,\r\n Input,\r\n Label\r\n} from \"reactstrap\";\r\n\r\n\r\n// core components\r\nimport DefaultFooter from \"components/Footers/DefaultFooter.js\";\r\n\r\nconst ICD10 = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const serviceUnitKey = (props.match.params.serviceUnitKey !== undefined) ? props.match.params.serviceUnitKey : null;\r\n const startDate = (props.match.params.startDate !== undefined) ? props.match.params.startDate : null;\r\n const endDate = (props.match.params.endDate !== undefined) ? props.match.params.endDate : null;\r\n //const json = (props.match.params.json !== undefined) ? props.match.params.json : null;\r\n\r\n\r\n const length = 12;\r\n const [Data, SetData] = useState([]);\r\n const [clinicVisitKey, SetClinicVisitKey] = useState(\"\");\r\n const [state, setState] = useState(0);\r\n const [ServiceUnitKey, setServiceUnitKey] = useState(0);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [CCNote, setCCNote] = useState([]);\r\n const [icd10Option, setICD10Option] = useState([]);\r\n const [icd10, setICD10] = useState([[]]);\r\n //const [isJSON, setisJSON] = useState(\"\");\r\n //const [CCNote, setCCNote] = useState(Array.from({ length }, () => 12));\r\n\r\n\r\n const handleInput = (inputEv, index, clinicVisitKey) => {\r\n var value = [];\r\n var values = []\r\n if(inputEv.length > 0){\r\n inputEv.forEach(a => {\r\n value.push(a)\r\n values.push(a.value)\r\n });\r\n }\r\n //console.log(value);\r\n setICD10((state) => state.map((val, i) => (i !== index ? val : value)));\r\n\r\n\r\n const requestOptions = {\r\n method: 'PUT',\r\n headers: {\r\n 'Content-Type': 'application/json-patch+json',\r\n 'Authorization': 'Bearer ' + authenticationService.currentUserValue.token,\r\n },\r\n body: JSON.stringify({\r\n \"labels\": values,\r\n })\r\n };\r\n fetch('/api/v1/icd10/'+ clinicVisitKey, requestOptions)\r\n .then(handleResponse)\r\n .then(\r\n (result) => {\r\n //console.log(\"Test\");\r\n //console.log(result);\r\n },\r\n (error) => {\r\n alert('update error' + error);\r\n }\r\n )\r\n };\r\n\r\n \r\n const handleList = (data) => {\r\n data.forEach(function (value) {\r\n CCNote.push(value.CCNote == null ? \"\" : value.CCNote)\r\n //console.log(CCNote)\r\n }); \r\n };\r\n\r\n useEffect(() => {\r\n // fetch('/api/v1/checknote/' + serviceUnitKey + '/' + startDate + '/' + endDate + '/' + json, {\r\n fetch('/api/v1/icd10/' + serviceUnitKey + '/' + startDate + '/' + endDate, {\r\n method: 'GET',\r\n headers: authHeader()\r\n })\r\n .then(handleResponse)\r\n .then(\r\n (result) => {\r\n SetData(result.data);\r\n handleList(result.data)\r\n },\r\n (error) => {\r\n //alert(error);\r\n }\r\n );\r\n \r\n if (serviceUnitKey != null) {\r\n setServiceUnitKey(serviceUnitKey);\r\n } \r\n if (startDate != null) {\r\n setStartDate(startDate);\r\n } \r\n if (endDate != null) {\r\n setEndDate(endDate);\r\n } \r\n // if (json != null) {\r\n // setisJSON(json);\r\n // } \r\n \r\n }, []);\r\n\r\n useEffect(() => {\r\n // console.log(icd10);\r\n // console.log(clinicVisitKey);\r\n }, [icd10]);\r\n\r\n \r\n useEffect(() => {\r\n // fetch('/api/v1/checknote/' + ServiceUnitKey + '/' + StartDate + '/' + EndDate + '/' + isJSON, {\r\n fetch('/api/v1/icd10/' + ServiceUnitKey + '/' + StartDate + '/' + EndDate, {\r\n method: 'GET',\r\n headers: authHeader()\r\n })\r\n .then(handleResponse)\r\n .then(\r\n (result) => {\r\n SetData(result.data);\r\n },\r\n (error) => {\r\n //alert(error);\r\n }\r\n );\r\n \r\n }, [ServiceUnitKey]);\r\n\r\n function handleClick(row) {\r\n //SetClinicVisitKey(row);\r\n }\r\n\r\n const loadOptions = (inputValue, callback) => {\r\n if(inputValue !== ''){\r\n fetch(\"/api/v1/icd10?Keyword=\" + inputValue)\r\n .then(response => response.json())\r\n .then(data => {\r\n const options = data.data;\r\n callback(options)}, (error) => { console.log(error) })\r\n } else {\r\n const options = [];\r\n callback(options)\r\n }\r\n };\r\n\r\n const handleClick2 = (index) => {\r\n const updatedState = Data[index];\r\n \r\n if (updatedState.other) {\r\n delete updatedState.other;\r\n setState((pre) => {\r\n\r\n return pre + 1;\r\n });\r\n } else {\r\n updatedState.other = {\r\n description: \" \" //or data from api\r\n };\r\n setState((pre) => {\r\n return pre + 1;\r\n });\r\n }\r\n };\r\n\r\n const currentUser = authenticationService.currentUserValue;\r\n if (!currentUser) {\r\n return React - Display a list of items
\r\n //| วันที่ | \r\n //
|---|
| {data.docDT} | \r\n //
\r\n \r\n \r\n
\r\n \r\n )} */}\r\n \r\n {Data && Data.map((row, index) => (\r\n \r\n \r\n handleClick2(index)}>\r\n
\r\n \r\n {row.other ? (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n setICD10(e)} value={icd10}\r\n onChange={(e) => handleInput(e, index, row.ClinicVisitKey)} value={icd10[index]}\r\n />\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n ))}\r\n
\r\n );\r\n}\r\n\r\nexport default ICD10;\r\n","import React, { useEffect, useState, Fragment } from \"react\";\r\nimport { Route, Redirect } from 'react-router-dom';\r\nimport { authenticationService } from '_services';\r\nimport { handleResponse, authHeader } from '_helpers';\r\n\r\n// reactstrap components\r\nimport {\r\n Button,\r\n NavItem,\r\n NavLink,\r\n Nav,\r\n TabContent,\r\n TabPane,\r\n Container,\r\n Row,\r\n Col,\r\n Input,\r\n Label\r\n} from \"reactstrap\";\r\n\r\nimport DefaultFooter from \"components/Footers/DefaultFooter.js\";\r\n\r\nconst CCNote = (props) => {\r\n var moment = require('moment');\r\n require('moment/locale/th');\r\n const serviceUnitKey = (props.match.params.serviceUnitKey !== undefined) ? props.match.params.serviceUnitKey : null;\r\n const startDate = (props.match.params.startDate !== undefined) ? props.match.params.startDate : null;\r\n const endDate = (props.match.params.endDate !== undefined) ? props.match.params.endDate : null;\r\n //const json = (props.match.params.json !== undefined) ? props.match.params.json : null;\r\n\r\n\r\n const length = 12;\r\n const [Data, SetData] = useState([]);\r\n const [ClinicVisitKey, SetClinicVisitKey] = useState(\"\");\r\n const [state, setState] = useState(0);\r\n const [ServiceUnitKey, setServiceUnitKey] = useState(0);\r\n const [StartDate, setStartDate] = useState(\"\");\r\n const [EndDate, setEndDate] = useState(\"\");\r\n const [CCNote, setCCNote] = useState([]);\r\n //const [isJSON, setisJSON] = useState(\"\");\r\n //const [CCNote, setCCNote] = useState(Array.from({ length }, () => 12));\r\n\r\n\r\n const handleInput = (inputEv, index, clinicVisitKey) => {\r\n const value = inputEv.target.value;\r\n setCCNote((state) => state.map((val, i) => (i !== index ? val : value)));\r\n // console.log(index);\r\n // console.log(CCNote);\r\n // console.log(clinicVisitKey);\r\n\r\n const requestOptions = {\r\n method: 'PUT',\r\n headers: {\r\n 'Content-Type': 'application/json-patch+json',\r\n 'Authorization': 'Bearer ' + authenticationService.currentUserValue.token,\r\n },\r\n body: JSON.stringify({\r\n \"CCNote\": value,\r\n })\r\n };\r\n fetch('/api/v1/checknote/'+ clinicVisitKey, requestOptions)\r\n .then(handleResponse)\r\n .then(\r\n (result) => {},\r\n (error) => {\r\n alert('update error' + error);\r\n }\r\n )\r\n };\r\n\r\n \r\n const handleList = (data) => {\r\n data.forEach(function (value) {\r\n CCNote.push(value.CCNote == null ? \"\" : value.CCNote)\r\n console.log(CCNote)\r\n }); \r\n };\r\n\r\n useEffect(() => {\r\n // fetch('/api/v1/checknote/' + serviceUnitKey + '/' + startDate + '/' + endDate + '/' + json, {\r\n fetch('/api/v1/checknote/' + serviceUnitKey + '/' + startDate + '/' + endDate, {\r\n method: 'GET',\r\n headers: authHeader()\r\n })\r\n .then(handleResponse)\r\n .then(\r\n (result) => {\r\n SetData(result.data);\r\n handleList(result.data)\r\n },\r\n (error) => {\r\n //alert(error);\r\n }\r\n );\r\n \r\n if (serviceUnitKey != null) {\r\n setServiceUnitKey(serviceUnitKey);\r\n } \r\n if (startDate != null) {\r\n setStartDate(startDate);\r\n } \r\n if (endDate != null) {\r\n setEndDate(endDate);\r\n } \r\n // if (json != null) {\r\n // setisJSON(json);\r\n // } \r\n \r\n }, []);\r\n\r\n \r\n useEffect(() => {\r\n // fetch('/api/v1/checknote/' + ServiceUnitKey + '/' + StartDate + '/' + EndDate + '/' + isJSON, {\r\n fetch('/api/v1/checknote/' + ServiceUnitKey + '/' + StartDate + '/' + EndDate, {\r\n method: 'GET',\r\n headers: authHeader()\r\n })\r\n .then(handleResponse)\r\n .then(\r\n (result) => {\r\n SetData(result.data);\r\n },\r\n (error) => {\r\n //alert(error);\r\n }\r\n );\r\n \r\n }, [ServiceUnitKey]);\r\n\r\n function handleClick(row) {\r\n SetClinicVisitKey(row);\r\n }\r\n\r\n const handleClick2 = (index) => {\r\n const updatedState = Data[index];\r\n \r\n if (updatedState.other) {\r\n delete updatedState.other;\r\n setState((pre) => {\r\n\r\n return pre + 1;\r\n });\r\n } else {\r\n updatedState.other = {\r\n description: \" \" //or data from api\r\n };\r\n setState((pre) => {\r\n return pre + 1;\r\n });\r\n }\r\n };\r\n\r\n const currentUser = authenticationService.currentUserValue;\r\n if (!currentUser) {\r\n return \r\n \r\n \r\n
\r\n\r\n {/* {Data && Data.map(data =>\r\n ICD10
\r\n \r\nReact - Display a list of items
\r\n //| วันที่ | \r\n //
|---|
| {data.docDT} | \r\n //
\r\n \r\n \r\n
\r\n \r\n )} */}\r\n \r\n {Data && Data.map((row, index) => (\r\n \r\n \r\n handleClick2(index)}>\r\n
\r\n \r\n {row.other ? (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n ))}\r\n
\r\n );\r\n}\r\n\r\nexport default CCNote;\r\n","import React, { useEffect } from \"react\";\r\nimport {\r\n BrowserRouter as Router,\r\n Route,\r\n Switch,\r\n Redirect,\r\n} from \"react-router-dom\";\r\nimport LoginPage from \"./views/UserProfile/LoginPage\";\r\nimport { Provider } from \"react-redux\";\r\nimport store from \"./store\";\r\nimport AuthProvider from \"./utils/authProvider\";\r\nimport oauth, { loadUserFromStorage } from \"./_services/oauth\";\r\nimport PrivateRoute from \"./utils/protectedRoute\";\r\n\r\n// core components\r\nimport AuthLayout from \"layouts/Auth.js\";\r\n\r\n\r\nimport Datacenter from \"layouts/Datacenter\";\r\nimport Repair from \"layouts/Repair.js\";\r\nimport Leave from \"layouts/Leave.js\";\r\nimport Finance from \"layouts/Finance.js\";\r\nimport Meeting from \"layouts/Meeting.js\";\r\nimport Vehicle from \"layouts/Vehicle.js\";\r\nimport Asset from \"layouts/Asset.js\";\r\nimport ServiceSystem from \"layouts/ServiceSystem.js\";\r\nimport Home from \"layouts/Home.js\";\r\nimport HR from \"layouts/HR.js\";\r\nimport Login from \"layouts/Login.js\";\r\nimport Signature from \"layouts/Signature\";\r\nimport SubSignature from \"layouts/SubSignature\";\r\nimport VaccineLayout from \"layouts/VaccineLayout\";\r\nimport Auth from \"layouts/Auth\";\r\nimport RTL from \"layouts/RTL.js\";\r\nimport Admin from \"layouts/Admin.js\";\r\nimport Cyber from \"layouts/Cyber.js\";\r\nimport ReportAccess from \"views/Report/ReportAccess\";\r\nimport ICD10 from \"views/ICD10/ICD10.js\";\r\nimport CCNote from \"views/ICD10/CCNote.js\";\r\n\r\nfunction App() {\r\n useEffect(() => {\r\n // fetch current user\r\n //loadUserFromStorage(store);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n\r\n {/* {Data && Data.map(data =>\r\n Note
\r\n \r\n\r\n \r\n
\r\n \r\n\r\n