(企業員工團體健檢必選或需提供勞工體檢表給公司)
' +\n // '不需勞檢表，請選不需要
(不需要提供勞檢表給公司)
' +\n // '公司員工眷屬或個人健檢需要勞檢表，填寫完請告知櫃台人員
'+\n\n '1.企業合作方案，請務必選擇需要，診所將統一提供給企業承辦。
2.個人健檢、企業合作員工方案眷屬，需提供勞檢表給公司請選擇需要。
無申請勞檢表需求可填不需要，即可減少填寫時間。'\n\n ,\n\n icon: 'info',\n showCancelButton: true,\n confirmButtonText: '需要',//相反\n cancelButtonText: '不需要',\n reverseButtons: true,\n allowOutsideClick: false,\n\n }).then((result) => {\n if (result.isConfirmed) {\n const confirmed = (true)\n dispatch(actions.Confirme(confirmed));\n history.push(`${process.env.PUBLIC_URL}/Admin`);\n\n } else if (result.dismiss === Swal.DismissReason.cancel) {\n const confirmed = (false)\n dispatch(actions.Confirme(confirmed));\n history.push(`${process.env.PUBLIC_URL}/Admin`);\n\n }\n });\n setUser({\n UserName: null, birthDate: null, personalId: null, BarCodeStr: '',\n });\n }\n })\n }\n\n }\n const validator = () => {\n const form = formRef.current; //參數1\n\n if (form.checkValidity()) {\n console.log(\"全部通過\");\n for (let i = 0; i < form.elements.length; i++) {\n const element = form.elements[i];\n if (Object.keys(settingObj).includes(element.name)) {\n setObj(prevState => ({\n ...prevState,\n [element.name]: omit(prevState[element.name], [\"error\"])\n }))\n }\n }\n return true;\n } else {\n for (let i = 0; i < form.elements.length; i++) {\n const element = form.elements[i];\n if (element.tagName !== 'button' && element.willValidate && !element.validity.valid) { //提交按鈕不用驗證\n if (Object.keys(settingObj).includes(element.name)) {\n setObj(prevState => ({\n ...prevState,\n [element.name]: { ...prevState[element.name], error: true, helperText: intl.formatMessage({ id: element.validationMessage }) }\n }))\n }\n // console.log(element.validationMessage)\n\n } else {//驗證通過，自訂訊息\n //有在settingObj的\n if (Object.keys(settingObj).includes(element.name)) {\n setObj(prevState => ({\n ...prevState,\n [element.name]: omit(prevState[element.name], [\"error\"])\n }))\n }\n\n }\n }\n return false;\n }\n }\n const ArrayDoor = [photo01, photo06, photo03, photo08]\n const [door, setDoor] = React.useState(0);\n\n\n return (\n
\n \n\n \n {/* \n Next\n {theme.direction === 'rtl' ?
\n );\n}\n\nexport default injectIntl(Login);","import React from 'react';\nimport { Route, Redirect } from 'react-router-dom'\n\n// import _, { omit, pick, round, slice } from 'lodash';\nimport { useDispatch, useSelector } from \"react-redux\";\n\n\n\n\n\nconst PrivateRoute = ({ component: Component, ...rest }) => {\n const { UserInfo } = useSelector(state => ({\n UserInfo: state.app.UserInfo,\n }));\n return (\n \n
\n )\n : null\n } */}\n\n \n
\n \n \n
\n \n {imageURL ? : null}\n
*/}\n \n//
\n// )\n// })\n\n// const Example = () => {\n// const componentRef = useRef();\n// const handlePrint = useReactToPrint({\n// content: () => componentRef.current,\n// });\n\n// return (\n// \n//
\n// );\n// };\n\n\n// export default Example;\n","import React, { useRef, forwardRef } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport './Record.css'\nimport { useReactToPrint } from 'react-to-print';\nimport { FormControl, FormLabel, FormHelperText, Paper, useForkRef } from '@material-ui/core';\nimport ReactHTMLTableToExcel from 'react-html-table-to-excel';\n// import 'paper-css'\n\nconst useStyles = makeStyles({\n table: {\n border: \"1px double\",\n borderCollapse: \"collapse\",\n borderSpacing: 0,\n padding: \"20px\",\n margin: \"20px\",\n },\n column: {\n },\n td: {\n border: \"1px double\",\n\n }\n});\n\n\nconst Results = forwardRef((props, ref) => {\n const classes = useStyles();\n\n\n return (\n \n \n
\n
\n )\n})\n\n// export default Results;\n\n\nconst MultipleComponet = React.forwardRef((props, ref) => {\n\n\n return (\n | 專案名稱 | \n2021寵愛－特１ | \n姓名 | \n陳宜琳 | \n檢查年月日 | \n2021/06/06 | \n
|---|---|---|---|---|---|
| 廠別 | \n\n | 生日 | \n１９９６／１０／１３ | \n受雇年月日 | \n\n |
| 部門 | \n\n | 工號 | \n\n | 電話 | \n\n |
| 性別 | \n女 | \n地址 | \n\n | 身分證號 | \nN１２３１２３１２３ | \n
| 現在從事ＸＸＸＸ | \n\n | 檢查時期 | \n\n | ||
| 檢 查 項 目 | \n 作業經歷 | \n\n | |||
| 既往病史 | \n\n | ||||
| 各 系 統 | \n 頭頸部 | \n\n | |||
| 呼吸 | \n\n | ||||
| 心臟 | \n\n | ||||
| 消化 | \n\n | ||||
| 神經 | \n\n | ||||
| 肌肉骨骼 | \n\n | ||||
| 皮膚 | \n\n | ||||
| 醫師問診 | \n\n | ||||
| 身高 | \n\n | 體重 | \n\n | ||
| 腰圍 | \n\n | 視力 | \n\n | ||
| 辨色力 | \n\n | 聽力 | \n\n | ||
| 血壓 | \n\n | ||||
| 尿蛋白 | \n\n | 尿淺血 | \n\n | ||
| 血色素 | \n\n | 白血球 | \n\n | ||
| 血糖 | \n\n | ||||
| 血清 | \n\n | ||||
| 肌酸酐 | \n\n | ||||
| 膽固醇 | \n\n | ||||
| 三酸甘油酯 | \n\n | ||||
| 高密度 | \n\n | 低密度 | \n\n | ||
| 胸部Ｘ | \n無明顯異常 | \n||||
| 應注意及 處理事項 | \n \n | ||||
| 檢查機構 | \n\n | 健檢醫師 | \n\n |
\n
\n )\n})\n\nconst Example = () => {\n const componentRef = useRef();\n const handlePrint = useReactToPrint({\n content: () => componentRef.current,\n });\n\n return (\n \n
\n );\n};\n\n\nexport default Example;\n","import { DragSource, DropTarget } from 'react-dnd'\n\n/**\n * Specifies which props to inject into your component.\n */\nfunction rowSourceCollect(connect, _monitor) {\n return {\n // Call this function inside render()\n // to let React DnD handle the drag events:\n connectDragSource: connect.dragSource(),\n connectDragPreview: connect.dragPreview(),\n isDragging: _monitor.isDragging()\n\n //id: _monitor.getItem()\n }\n}\n\n/**\n * Specifies the drag source contract.\n * Only `beginDrag` function is required.\n */\nconst rowSourceSpec = {\n beginDrag(props) {\n console.log('beginDrag', props.rowIndex, props)\n return {\n rowIndex: props.rowIndex\n }\n }\n}\n\nfunction rowTargetCollect(connect, monitor) {\n return {\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver() && monitor.canDrop()\n }\n}\n//目標\nconst rowTargetSpec = {\n //判斷是否可以拖拉的目的\n canDrop(props, monitor) {\n const item = monitor.getItem()\n return props.rowIndex !== item.rowIndex //要不等於本來那一個rowIndex才可以\n },\n\n drop(props, monitor, component) {\n if (monitor.didDrop()) {\n return\n }\n // Obtain the dragged item\n const { rowIndex: fromIndex } = monitor.getItem()\n const { rowIndex: toIndex, onRowDrop } = props;\n onRowDrop(fromIndex, toIndex);\n }\n}\n\nfunction colSourceCollect(connect, _monitor) {\n return {\n // Call this function inside render()\n // to let React DnD handle the drag events:\n connectDragSource: connect.dragSource()\n }\n}\n\nconst colSourceSpec = {\n beginDrag(props) {\n return {\n columnIndex: props.columnIndex\n }\n }\n}\n\nfunction colTargetCollect(connect, monitor) {\n return {\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver({ shallow: true }) && monitor.canDrop()\n }\n}\n\nconst colTargetSpec = {\n canDrop(props, monitor) {\n const item = monitor.getItem()\n // return item.row !== props.row\n return props.columnIndex !== item.columnIndex\n },\n\n drop(props, monitor, component) {\n if (monitor.didDrop()) {\n return\n }\n\n // Obtain the dragged item\n const { columnIndex: fromIndex } = monitor.getItem()\n const { columnIndex: toIndex, onColumnDrop } = props\n onColumnDrop(fromIndex, toIndex)\n }\n}\n\nexport const colDragSource = DragSource('col', colSourceSpec, colSourceCollect)\nexport const colDropTarget = DropTarget('col', colTargetSpec, colTargetCollect)\nexport const rowDragSource = DragSource('row', rowSourceSpec, rowSourceCollect)\nexport const rowDropTarget = DropTarget('row', rowTargetSpec, rowTargetCollect)","import { DragDropContext } from 'react-dnd';\nimport HTML5Backend from 'react-dnd-html5-backend';\n\nexport default DragDropContext(HTML5Backend);","export default __webpack_public_path__ + \"static/media/clickdown.4efde20a.wav\";","import React, { memo, useMemo, useCallback } from \"react\";\nimport _, { isEqual } from 'lodash';\nimport { FormattedMessage, useIntl } from \"react-intl\";\nimport Pagination from '@material-ui/lab/Pagination';\nimport BallotOutlinedIcon from '@material-ui/icons/BallotOutlined';\n// import memoizeOne from 'memoize-one';\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport { FixedSizeList as List, areEqual } from \"react-window\";\nimport ReactDataSheet from \"../../react-datasheet/lib/index\";\n// import Cell from \"./Cell\";\nimport DataCell from \"../../react-datasheet/lib/DataCell\";\nimport '../../react-datasheet/lib/react-datasheet.css';\n// import '../index.css';\nimport {\n colDragSource, colDropTarget,\n rowDragSource, rowDropTarget\n} from './drag-drop.js'\nimport CommonHTML5Backend from \"./CommonHTML5Backend\";\nimport { Button, TextField, Checkbox, ClickAwayListener, Popper, Paper, Grow, InputAdornment, FormGroup, FormLabel, FormControlLabel, Switch } from '@material-ui/core';\nimport { props } from \"ramda\";\nimport PF from '../../_Services/publicFunction';\nimport useSound from 'use-sound';\nimport clickdown from '../sounds/clickdown.wav';\nimport clickup from '../sounds/clickdown.wav';\n\nconst Header = React.memo(colDropTarget(colDragSource((props) => {\n const { col, connectDragSource, connectDropTarget, isOver, onClick, dataKey, handleMouseMove, columns, columnIndex, FrozenColumn, enableCheck } = props\n const className = isOver ? 'drop-target shadow' : 'shadow'\n let accWidth = 0;\n // console.log(props);\n let styles = {};\n if (columnIndex + 1 <= FrozenColumn) {\n accWidth = columns.slice(0, columnIndex).reduce((a, b) => a + b.width, 0)\n styles = {\n left: enableCheck ? 85 + accWidth : 30 + accWidth,\n position: \"sticky\",\n zIndex: \"100\",\n // width:\"500px\",\n // background: \"rgb(255,255,125)\",\n border: \"1px solid #a2a2a2\",\n }\n }\n return connectDropTarget(\n connectDragSource(\n \n \n
\n\n
\n );\n }\n\n renderRow = ({ index: rowIndex, style }) => {\n const { onRowClick, onRowDrop, checkSelections, columns, OriginalRows, selected, FrozenColumn, enableCheck, RowStyleFunc, handleDoubleClick } = this.props;\n const { start, end } = selected\n let startI = _.get(start, \"i\"), endI = _.get(end, \"i\")\n let startJ = _.get(start, \"j\"), endJ = _.get(end, \"j\")\n const sheetwidth = columns.reduce((a, b) => a + b.width, 0)\n const isisSelectRow = rowIndex >= startI && rowIndex <= endI || rowIndex <= startI && rowIndex >= endI\n return | \n | ) : null}\n
| \n Count: {labelCount.count.toLocaleString(undefined, {\n minimumFractionDigits: 0\n })} \n {(labelCount.count2 === 0) ? null :\n \n Sum: {labelCount.sum.toLocaleString(undefined, {\n minimumFractionDigits: 2\n })}\n \n \n Average: {labelCount.avg.toLocaleString(undefined, {\n minimumFractionDigits: 2\n })}\n \n \n }\n | \n\n
\n onRowClick(rowIndex), [])} rowIndex={rowIndex} onRowDrop={onRowDrop} />\n {enableCheck ? (\n \n [],[])}\n />\n \n ) : null}\n selected, [diffJ])}\n />\n\n
\n );\n})\n\nconst RowToCell = props => {\n\n const { row, grid, rowIndex, columns, isSelectJ } = props;\n // console.log(grid)\n const {\n attributesRenderer,\n cellRenderer,\n valueRenderer,\n dataRenderer,\n valueViewer,\n dataEditor,\n data,\n forceEdit,\n selected,\n handleDoubleClick\n } = grid.props;\n // console.log(isSelectJ)\n return (\n row.map((cell, colIndex) => {\n const isEditing = grid.isEditing(rowIndex, colIndex);\n // console.log(cell);\n return (\n \n\n
\n );\n}","import React, { useState } from 'react';\nimport { FormControl, FormLabel, FormHelperText, Paper, useForkRef, Typography, TextField, Button, CircularProgress, Fade, Backdrop } from '@material-ui/core';\nimport Signature from './Signature';\nimport _, { omit, pick, round, slice } from 'lodash';\nimport PF from \"./_Services/publicFunction\";\nimport Qs from \"qs\";\nimport { DarkModeSwitch } from 'react-toggle-dark-mode';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { actions } from \"./reducers/app\";\nimport useSound from 'use-sound';\nimport switchlight from './sounds/switchlight.wav';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport { MuiPickersUtilsProvider, KeyboardDatePicker, DatePicker, KeyboardDateTimePicker, KeyboardTimePicker } from \"@material-ui/pickers\";\nimport TodayIcon from \"@material-ui/icons/UpdateOutlined\";\nimport MomentUtils from \"@date-io/moment\";\nimport moment from \"moment\";\nimport { useSnackbar } from \"notistack\";\n// import Example from \"./components/LHTable/Example\"\nimport InteriorTable from \"../src/components/LHTable/DataSheet_Virtual\"\nimport Example from '../src/components/LHTable/Example';\nimport { Dialog, DialogContent, DialogActions, DialogTitle, IconButton, Divider, Grid } from '@material-ui/core';\nimport CloseIcon from '@material-ui/icons/Close';\nimport ImgList from \"../src/components/ImgList/ImgList\"\nimport { indigo, green, red } from '@material-ui/core/colors';\nimport AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';\n\nconst domToImage = require('dom-to-image');\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n\n half_background: {\n background: \"linear-gradient(to top, yellow 50%, transparent 50%)\"\n },\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: '#fff',\n },\n closeButton: {\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n color: theme.palette.grey[500],\n },\n chip: {\n margin: theme.spacing(0.5),\n },\n}));\n\nconst Match = props => {\n const { enqueueSnackbar } = useSnackbar();\n const [file, setFile] = useState({});\n const [rows, setRows] = useState([]);\n\n const dispatch = useDispatch();\n const classes = useStyles();\n const initialRender = React.useRef(true);\n\n const { dark } = useSelector(state => ({\n dark: state.app.dark,\n }));\n const [imageURL, setImage] = React.useState(null); //提交=>簽名檔img\n const [timestamp, setTime] = React.useState(null);\n const [open, setOpen] = React.useState(false);\n const [openDialog, setOpenDialog] = React.useState(false);\n const [user, setUser] = React.useState({\n email: null,\n personalId: null,\n UserName: null,\n })\n const [settingObj, setObj] = React.useState({\n UserName: { label: \"姓名\", name: \"UserName\", type: \"text\", required: true, helperText: \"required\", xs: 12, sm: 12, md: 12, lg: 12, minLength: 2, maxLength: 30, pattern: \"^[^0-9]+$\" },\n email: { label: \"出生日期\", name: \"email\", type: \"email\", required: true, helperText: \"required\", xs: 12, sm: 12, md: 12, lg: 12 },\n personalId: { label: \"身分證字號\", name: \"personalId\", type: \"text\", required: true, helperText: \"required\", xs: 12, sm: 12, md: 12, lg: 12, minLength: 10, maxLength: 10 }\n })\n const [playActive] = useSound(\n switchlight,\n { volume: 0.5 }\n );\n //選中的範圍\n const [selected, setSelected] = React.useState({ start: null, end: null })\n //用於表的快速移動至某行\n const listRef = React.createRef();\n //勾選\n const [checkSelections, setCheckSelections] = React.useState(new Map());\n //允許多個勾選\n const [enableCheck, setEnableCheck] = React.useState(true);\n //允許多個勾選\n const [multiChk, setMultiChk] = React.useState(false);\n //總頁數\n const [pageCount, setPageCount] = React.useState(1)\n //第幾頁\n const [pageNo, setPageNo] = React.useState(6)\n const [columns, setColumns] = React.useState({\n qc_id: { label: \"ID\", name: \"qc_id\", width: 120, type: \"text\", required: false, noShowSelect: true, noshowTable: true, noshowTableForever: true, orderSeq: 1 },\n UserName: { label: \"姓名\", name: \"UserName\", width: 120, type: \"text\", required: true, xs: 6, sm: 6, md: 3, orderSeq: 9 },\n barcode: { label: \"barcode\", width: 120, name: \"barcode\", type: \"text\", required: true, xs: 6, sm: 6, md: 3, noShowSelect: true, orderSeq: 3 },\n PersonalId: { label: \"PersonalId\", name: \"PersonalId\", width: 120, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, orderSeq: 4 },\n checkdate: { label: \"checkdate\", name: \"checkdate\", width: 120, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, orderSeq: 5 },\n UpdateCount: { label: \"UpdateCount\", name: \"UpdateCount\", width: 120, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, orderSeq: 6 },\n })\n React.useEffect(() => {\n let noshowTable = [];\n Object.values(columns).map(item => {\n if (item.noshowTable === true) {\n // console.log(item.name)\n noshowTable.push(item.name)\n }\n })\n let showColumns = _.omit(columns, noshowTable) //轉換\n setOrderRows(prev => PF.dataSheetGridFormat(rows, Object.keys(showColumns)))\n }, [columns])\n //轉換\n let noshowTable = [];\n Object.values(columns).map(item => {\n if (item.noshowTable === true) {\n // console.log(item.name)\n noshowTable.push(item.name)\n }\n })\n let showColumns = _.omit(columns, noshowTable)\n // const [showColumns, setShowColumn] = React.useState(_.omit(columns, noshowTable))\n //let z22 = _.orderBy(z2, ['orderSeq']); //排序\n //let z3 = z2.map(item=>(item.name));//只取標頭\n // console.log(z22); //依照column順序排序\n const [orderRows, setOrderRows] = React.useState(PF.dataSheetGridFormat(rows, Object.keys(showColumns)))\n //雙擊\n const handleDoubleClick = (i, j, e) => {\n // console.log(rows[i]);\n // setDialogObj(rows[i])\n getBarcode(rows[i][\"qc_id\"]);\n getBarcodeGaugeItem(rows[i][\"barcode\"])\n }\n const handleSubmit = e => {\n e.preventDefault();\n }\n const [DialogObj, setDialogObj] = React.useState({});\n React.useEffect(() => {\n GetItem();\n }, [])\n\n\n const getBarcode = (qc_id) => {\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/QueryBarcode\",\n data: Qs.stringify({ parameter: { qc_id } })\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n if (TotalRecord > 0) {\n // console.log(rows);\n //解析圖片為JSON物件\n let PicJson = JSON.parse(rows[0][\"pic\"]);\n // console.log(PicJson);\n\n Object.keys(PicJson || {}).map(pic => {\n // console.log(pic)\n setPicObj(prev => ({\n ...prev,\n [pic]: PicJson[pic]?.split(',') || []\n }))\n });\n\n setDialogObj(prev => rows[0]);\n // setDialogObj(rows[i][\"qc_id\"]);\n setOpenDialog(true);\n\n }\n else {\n }\n })\n }\n const PicCategoryArray = [\"超音波檢查\", \"數位斷層合成掃描\",\n , \"一般X光\"\n , \"三連片\"\n , \"內視鏡\"\n , \"身體組成分析\"\n , \"心電圖\"\n , \"自律神經檢查\"\n , \"眼底攝影\"]\n const [GaugeItem, setGaugeItem] = React.useState({\n\n })\n const getBarcodeGaugeItem = (BarCodeStr) => {\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/GetGaugeData\",\n data: Qs.stringify({ parameter: { BarCodeStr } })\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n if (TotalRecord > 0) {\n // console.log(rows);\n let ContentJson = JSON.parse(rows[0][\"content\"]);\n // console.log(ContentJson);\n\n let ItemArray = PF.multiFilter(ContentJson, { CheckCategory: PicCategoryArray });\n // console.log(ItemArray);\n let object = _.keyBy(ItemArray, 'CheckCategory');\n // console.log(object);\n let y = {}\n Object.keys(object).map(CheckCategory => {\n y[CheckCategory] = PF.multiFilter(ContentJson, { CheckCategory: CheckCategory })\n })\n console.log(y);\n setGaugeItem(y)\n }\n else {\n }\n })\n }\n\n\n\n\n\n // const handleTxtChange = e => {\n // const { name, value } = e.target;\n // setUser(prevstate => ({\n // ...prevstate,\n // [name]: value.trim()\n // }));\n\n // }\n const formRef = React.createRef();\n const specialFormat = string => {\n return encodeURI(string.replaceAll(\"\\\\\", \"/\").replace(\"//192.168.25.20\", \"/Content/Upload\"))\n }\n // let user_id = \"F127150943\";\n // React.useEffect(() => {\n // if (initialRender.current) {\n // initialRender.current = false;\n // } else {\n // const map1 = new Map(\n // [...checkSelections]\n // .filter(([k, v]) => v === true)\n // );\n // setUser(prev => ({\n // ...prev,\n // personalId: rows[[...map1.keys()][0]][\"personalId\"]\n // }))\n\n // }\n\n\n // }, [checkSelections])\n\n const handleTest = e => {\n e.preventDefault();\n let one;\n const map1 = new Map(\n [...checkSelections]\n .filter(([k, v]) => v === true)\n );\n // let index = [...checkSelections][0][0];\n if (!_.isEmpty(rows[[...map1.keys()][0]])) {\n one = rows[[...map1.keys()][0]]\n } else {\n alert(\"請選擇一筆\")\n }\n // console.log(personalId)\n // console.log(one)\n const personalId = one?.PersonalId;\n\n if (!_.isEmpty(MornJoy.CheckDate.value) && !_.isEmpty(personalId)) {\n\n let person = file[personalId];\n let one = rows.find(item => item.PersonalId === personalId)\n\n\n let bigperson = {}\n let bigpersonCount = {}\n\n if (!_.isEmpty(person)) {\n\n let pic_7010 = person.filter(function (person) { return person.FullPath.includes(\"\\\\腹部超音波Abdominal echo\\\\\"); });\n if (!_.isEmpty(pic_7010)) {\n console.log(pic_7010)\n bigperson.pic_7010 = pic_7010;\n bigpersonCount.pic_7010_alt = \"§\".repeat(pic_7010.length - 1);\n }\n\n let pic_7011 = person.filter(function (person) { return person.FullPath.includes(\"\\\\攝護腺超音波Prostate echo\\\\\"); });\n if (!_.isEmpty(pic_7011)) {\n bigperson.pic_7011 = pic_7011;\n bigpersonCount.pic_7011_alt = \"§\".repeat(pic_7011.length - 1);\n }\n\n let pic_7012 = person.filter(function (person) { return person.FullPath.includes(\"\\\\乳房超音波Breast Ultrasound\\\\\"); });\n if (!_.isEmpty(pic_7012)) {\n bigperson.pic_7012 = pic_7012;\n bigpersonCount.pic_7012_alt = \"§\".repeat(pic_7012.length - 1);\n }\n\n let pic_7013 = person.filter(function (person) { return person.FullPath.includes(\"\\\\骨盆腔婦科超音波Gynecology Ultrasound\\\\\"); });\n if (!_.isEmpty(pic_7013)) {\n bigperson.pic_7013 = pic_7013;\n bigpersonCount.pic_7013_alt = \"§\".repeat(pic_7013.length - 1);\n }\n\n\n\n let pic_7015 = person.filter(function (person) { return person.FullPath.includes(\"\\\\頸動脈超音波Carotid Duplex Ultrasound\\\\\"); });\n if (!_.isEmpty(pic_7015)) {\n bigperson.pic_7015 = pic_7015;\n bigpersonCount.pic_7015_alt = \"§\".repeat(pic_7015.length - 1);\n }\n\n let pic_7014 = person.filter(function (person) { return person.FullPath.includes(\"\\\\甲狀腺超音波Thyroid echo\\\\\"); });\n if (!_.isEmpty(pic_7014)) {\n bigperson.pic_7014 = pic_7014;\n bigpersonCount.pic_7014_alt = \"§\".repeat(pic_7014.length - 1);\n }\n\n let pic_7016 = person.filter(function (person) { return person.FullPath.includes(\"\\\\心臟超音波Cardiac echo\\\\\"); });\n if (!_.isEmpty(pic_7016)) {\n bigperson.pic_7016 = pic_7016;\n bigpersonCount.pic_7016_alt = \"§\".repeat(pic_7016.length - 1);\n }\n\n let pic_7049 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸部數位雙能量減影\\\\\"); });\n if (!_.isEmpty(pic_7049)) {\n bigperson.pic_7049 = pic_7049;\n bigpersonCount.pic_7049_alt = \"§\".repeat(pic_7049.length - 1);\n }\n\n let pic_7033 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸部CXR\\\\\"); });\n if (!_.isEmpty(pic_7033)) {\n bigperson.pic_7033 = pic_7033;\n bigpersonCount.pic_7033_alt = \"§\".repeat(pic_7033.length - 1);\n }\n let pic_7093 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸部CXR-側面\\\\\"); });\n if (!_.isEmpty(pic_7093)) {\n bigperson.pic_7093 = pic_7093;\n bigpersonCount.pic_7093_alt = \"§\".repeat(pic_7093.length - 1);\n }\n\n let pic_7034 = person.filter(function (person) { return person.FullPath.includes(\"\\\\腹部KUB\\\\\"); });\n if (!_.isEmpty(pic_7034)) {\n bigperson.pic_7034 = pic_7034;\n bigpersonCount.pic_7034_alt = \"§\".repeat(pic_7034.length - 1);\n }\n\n let pic_7035 = person.filter(function (person) { return person.FullPath.includes(\"\\\\頸椎X光-正面\\\\\"); });\n if (!_.isEmpty(pic_7035)) {\n bigperson.pic_7035 = pic_7035;\n bigpersonCount.pic_7035_alt = \"§\".repeat(pic_7035.length - 1);\n }\n\n let pic_7036 = person.filter(function (person) { return person.FullPath.includes(\"\\\\頸椎X光-側面\\\\\"); });\n if (!_.isEmpty(pic_7036)) {\n bigperson.pic_7036 = pic_7036;\n bigpersonCount.pic_7036_alt = \"§\".repeat(pic_7036.length - 1);\n }\n\n let pic_7037 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸椎X光-側面\\\\\"); });\n if (!_.isEmpty(pic_7037)) {\n bigperson.pic_7037 = pic_7037;\n bigpersonCount.pic_7037_alt = \"§\".repeat(pic_7037.length - 1);\n }\n\n let pic_7038 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸椎X光-正面\\\\\"); });\n if (!_.isEmpty(pic_7038)) {\n bigperson.pic_7038 = pic_7038;\n bigpersonCount.pic_7038_alt = \"§\".repeat(pic_7038.length - 1);\n }\n\n let pic_7039 = person.filter(function (person) { return person.FullPath.includes(\"\\\\腰椎X光-正面(L-spine AP)\\\\\"); });\n if (!_.isEmpty(pic_7039)) {\n bigperson.pic_7039 = pic_7039;\n bigpersonCount.pic_7039_alt = \"§\".repeat(pic_7039.length - 1);\n }\n\n let pic_7040 = person.filter(function (person) { return person.FullPath.includes(\"\\\\腰椎X光-側面(L-spine Lat)\\\\\"); });\n if (!_.isEmpty(pic_7040)) {\n bigperson.pic_7040 = pic_7040;\n bigpersonCount.pic_7040_alt = \"§\".repeat(pic_7040.length - 1);\n }\n\n let pic_7061 = person.filter(function (person) { return person.FullPath.includes(\"\\\\左手X光\\\\\"); });\n if (!_.isEmpty(pic_7061)) {\n bigperson.pic_7061 = pic_7061;\n bigpersonCount.pic_7061_alt = \"§\".repeat(pic_7061.length - 1);\n }\n let pic_7050 = person.filter(function (person) { return person.FullPath.includes(\"\\\\頭部數位斷層合成攝影\\\\\"); });\n if (!_.isEmpty(pic_7050)) {\n bigperson.pic_7050 = pic_7050;\n bigpersonCount.pic_7050_alt = \"§\".repeat(pic_7050.length - 1);\n\n } let pic_7051 = person.filter(function (person) { return person.FullPath.includes(\"\\\\頸部數位斷層合成攝影\\\\\"); });\n if (!_.isEmpty(pic_7051)) {\n bigperson.pic_7051 = pic_7051;\n bigpersonCount.pic_7051_alt = \"§\".repeat(pic_7051.length - 1);\n }\n\n let pic_7052 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胸部數位斷層合成攝影\\\\\"); });\n if (!_.isEmpty(pic_7052)) {\n bigperson.pic_7052 = pic_7052;\n bigpersonCount.pic_7052_alt = \"§\".repeat(pic_7052.length - 1);\n }\n let pic_7053 = person.filter(function (person) { return person.FullPath.includes(\"\\\\腹部數位斷層合成攝影\\\\\"); });\n if (!_.isEmpty(pic_7053)) {\n bigperson.pic_7053 = pic_7053;\n bigpersonCount.pic_7053_alt = \"§\".repeat(pic_7053.length - 1);\n }\n\n let pic_7062 = person.filter(function (person) { return person.FullPath.includes(\"\\\\右手X光\\\\\"); });\n if (!_.isEmpty(pic_7062)) {\n bigperson.pic_7062 = pic_7062;\n bigpersonCount.pic_7062_alt = \"§\".repeat(pic_7062.length - 1);\n }\n\n let pic_8009 = person.filter(function (person) { return person.FullPath.includes(\"\\\\小腿X光(正面)\\\\\"); });\n if (!_.isEmpty(pic_8009)) {\n bigperson.pic_8009 = pic_8009;\n bigpersonCount.pic_8009_alt = \"§\".repeat(pic_8009.length - 1);\n }\n\n let pic_8010 = person.filter(function (person) { return person.FullPath.includes(\"\\\\小腿X光(左腳)\\\\\"); });\n if (!_.isEmpty(pic_8010)) {\n bigperson.pic_8010 = pic_8010;\n bigpersonCount.pic_8010_alt = \"§\".repeat(pic_8010.length - 1);\n }\n\n let pic_8011 = person.filter(function (person) { return person.FullPath.includes(\"\\\\小腿X光(右腳)\\\\\"); });\n if (!_.isEmpty(pic_8011)) {\n bigperson.pic_8011 = pic_8011;\n bigpersonCount.pic_8011_alt = \"§\".repeat(pic_8011.length - 1);\n }\n\n let pic_8012 = person.filter(function (person) { return person.FullPath.includes(\"\\\\膝蓋X光-正面\\\\\"); });\n if (!_.isEmpty(pic_8012)) {\n bigperson.pic_8012 = pic_8012;\n bigpersonCount.pic_8012_alt = \"§\".repeat(pic_8012.length - 1);\n }\n\n let pic_8013 = person.filter(function (person) { return person.FullPath.includes(\"\\\\膝蓋X光-側面(左)\\\\\"); });\n if (!_.isEmpty(pic_8013)) {\n bigperson.pic_8013 = pic_8013;\n bigpersonCount.pic_8013_alt = \"§\".repeat(pic_8013.length - 1);\n }\n\n let pic_8014 = person.filter(function (person) { return person.FullPath.includes(\"\\\\膝蓋X光-側面(右)\\\\\"); });\n if (!_.isEmpty(pic_8014)) {\n bigperson.pic_8014 = pic_8014;\n bigpersonCount.pic_8014_alt = \"§\".repeat(pic_8014.length - 1);\n }\n\n let pic_7054 = person.filter(function (person) { return person.FullPath.includes(\"\\\\全脊椎數位X光攝影\\\\\"); });\n if (!_.isEmpty(pic_7054)) {\n bigperson.pic_7054 = pic_7054;\n bigpersonCount.pic_7054_alt = \"§\".repeat(pic_7054.length - 1);\n }\n\n let pic_7055 = person.filter(function (person) { return person.FullPath.includes(\"\\\\下肢數位X光攝影\\\\\"); });\n if (!_.isEmpty(pic_7055)) {\n bigperson.pic_7055 = pic_7055;\n bigpersonCount.pic_7055_alt = \"§\".repeat(pic_7055.length - 1);\n }\n\n let pic_7045 = person.filter(function (person) { return person.FullPath.includes(\"\\\\上消化道內視鏡\\\\\"); });\n if (!_.isEmpty(pic_7045)) {\n bigperson.pic_7045 = pic_7045;\n bigpersonCount.pic_7045_alt = \"§\".repeat(pic_7045.length - 1);\n }\n\n let pic_7046 = person.filter(function (person) { return person.FullPath.includes(\"\\\\下消化道內視鏡\\\\\"); });\n if (!_.isEmpty(pic_7046)) {\n bigperson.pic_7046 = pic_7046;\n bigpersonCount.pic_7046_alt = \"§\".repeat(pic_7046.length - 1);\n }\n\n let pic_7029 = person.filter(function (person) { return person.FullPath.includes(\"\\\\無痛大腸鏡檢查\\\\\"); });\n if (!_.isEmpty(pic_7029)) {\n bigperson.pic_7029 = pic_7029;\n bigpersonCount.pic_7029_alt = \"§\".repeat(pic_7029.length - 1);\n }\n\n let pic_7030 = person.filter(function (person) { return person.FullPath.includes(\"\\\\無痛胃鏡檢查\\\\\"); });\n if (!_.isEmpty(pic_7030)) {\n bigperson.pic_7030 = pic_7030;\n bigpersonCount.pic_7030_alt = \"§\".repeat(pic_7030.length - 1);\n }\n\n let pic_7031 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胃鏡檢查\\\\\"); });\n if (!_.isEmpty(pic_7031)) {\n bigperson.pic_7031 = pic_7031;\n bigpersonCount.pic_7031_alt = \"§\".repeat(pic_7031.length - 1);\n }\n\n let pic_7070 = person.filter(function (person) { return person.FullPath.includes(\"\\\\胃鏡病理報告\\\\\"); });\n if (!_.isEmpty(pic_7070)) {\n bigperson.pic_7070 = pic_7070;\n bigpersonCount.pic_7070_alt = \"§\".repeat(pic_7070.length - 1);\n }\n\n let pic_7032 = person.filter(function (person) { return person.FullPath.includes(\"\\\\大腸鏡檢查\\\\\"); });\n if (!_.isEmpty(pic_7032)) {\n bigperson.pic_7032 = pic_7032;\n bigpersonCount.pic_7032_alt = \"§\".repeat(pic_7032.length - 1);\n }\n\n let pic_7063 = person.filter(function (person) { return person.FullPath.includes(\"\\\\乙狀結腸\\\\\"); });\n if (!_.isEmpty(pic_7063)) {\n bigperson.pic_7063 = pic_7063;\n bigpersonCount.pic_7063_alt = \"§\".repeat(pic_7063.length - 1);\n }\n\n // let pic_7076 = person.filter(function (person) { return person.FullPath.includes(\"\\\\雙能量X光骨質吸收儀(DXA)-髖關節\\\\\"); });\n // if (!_.isEmpty(pic_7076)) {\n // bigperson.pic_7076 = pic_7076;\n // bigpersonCount.pic_7076_alt = \"§\".repeat(pic_7076.length - 1);\n // }\n\n let pic_7021 = person.filter(function (person) { return person.FullPath.includes(\"\\\\DXA 檢查\\\\\") || person.FullPath.includes(\"\\\\雙能量X光骨質吸收儀(DXA)\\\\\");; });\n if (!_.isEmpty(pic_7021)) {\n bigperson.pic_7021 = pic_7021;\n bigpersonCount.pic_7021_alt = \"§\".repeat(pic_7021.length - 1);\n }\n\n let pic_7075 = person.filter(function (person) { return person.FullPath.includes(\"\\\\DXA 左側股骨\\\\\") || person.FullPath.includes(\"\\\\DXA DualFemur\\\\\") || person.FullPath.includes(\"\\\\雙能量X光骨質吸收儀(DXA)-髖關節\\\\\"); });\n if (!_.isEmpty(pic_7075)) {\n bigperson.pic_7075 = pic_7075;\n bigpersonCount.pic_7075_alt = \"§\".repeat(pic_7075.length - 1);\n }\n\n let pic_7091 = person.filter(function (person) { return person.FullPath.includes(\"\\\\DXA 正面脊椎\\\\\") || person.FullPath.includes(\"\\\\雙能量X光骨質吸收儀(DXA)-腰椎\\\\\"); });\n if (!_.isEmpty(pic_7091)) {\n bigperson.pic_7091 = pic_7091;\n bigpersonCount.pic_7091_alt = \"§\".repeat(pic_7091.length - 1);\n }\n let pic_7092 = person.filter(function (person) { return person.FullPath.includes(\"\\\\全自動乳房掃描\\\\\") });\n if (!_.isEmpty(pic_7092)) {\n bigperson.pic_7092 = pic_7092;\n bigpersonCount.pic_7092_alt = \"§\".repeat(pic_7092.length - 1);\n }\n\n let pic_7020 = person.filter(function (person) { return person.FullPath.includes(\"\\\\DXA 全身\\\\\"); });\n if (!_.isEmpty(pic_7020)) {\n bigperson.pic_7020 = pic_7020;\n bigpersonCount.pic_7020_alt = \"§\".repeat(pic_7020.length - 1);\n }\n //2023/06/12改新報的夾圖\n // let pic_7060 = person.filter(function (person) { return person.FullPath.includes(one.UserName.replaceAll(\"?\", \"\") + \".jpg\"); });\n // if (!_.isEmpty(pic_7060)) {\n // bigperson.pic_7060 = pic_7060;\n // bigpersonCount.pic_7060_alt = \"§\".repeat(pic_7060.length - 1);\n // }\n\n let pic_7060 = person.filter(function (person) { return person.FullPath.includes(\"\\\\InBody體脂肪機\\\\\"); });\n if (!_.isEmpty(pic_7060)) {\n bigperson.pic_7060 = pic_7060;\n bigpersonCount.pic_7060_alt = \"§\".repeat(pic_7060.length - 1);\n }\n\n let pic_7008 = person.filter(function (person) { return person.FullPath.includes(\"\\\\靜式心電圖EKG\\\\\"); });\n if (!_.isEmpty(pic_7008)) {\n bigperson.pic_7008 = pic_7008;\n bigpersonCount.pic_7008_alt = \"§\".repeat(pic_7008.length - 1);\n }\n\n let pic_7007 = person.filter(function (person) { return person.FullPath.includes(\"\\\\運動心電圖EKG\\\\\"); });\n if (!_.isEmpty(pic_7007)) {\n bigperson.pic_7007 = pic_7007;\n bigpersonCount.pic_7007_alt = \"§\".repeat(pic_7007.length - 1);\n }\n\n let pic_7042 = person.filter(function (person) { return person.FullPath.includes(\"page-1.jpg\") || person.FullPath.includes(\"page-2.jpg\"); });\n if (!_.isEmpty(pic_7042)) {\n bigperson.pic_7042 = pic_7042;\n bigpersonCount.pic_7042_alt = \"§\".repeat(pic_7042.length - 1);\n }\n\n let pic_7041 = person.filter(function (person) { return person.FullPath.includes(\"page-3.jpg\") || person.FullPath.includes(\"page-4.jpg\"); });\n if (!_.isEmpty(pic_7041)) {\n bigperson.pic_7041 = pic_7041;\n bigpersonCount.pic_7041_alt = \"§\".repeat(pic_7041.length - 1);\n }\n\n let pic_7023 = person.filter(function (person) { return person.FullPath.includes(\"\\\\眼底攝影\\\\\"); });\n if (!_.isEmpty(pic_7023)) {\n bigperson.pic_7023 = pic_7023;\n bigpersonCount.pic_7023_alt = \"§\".repeat(pic_7023.length - 1);\n }\n\n\n // bigperson.cpic = \"\";\n // bigpersonCount.cpic_alt = \"\";\n\n // console.log(bigperson);\n // console.log(bigpersonCount);\n\n\n //格式轉換\n Object.keys(bigperson).map(item => {\n bigperson[item] = !_.isEmpty(bigperson[item]) ? bigperson[item].map(i => specialFormat(i.FullPath)).join(\",\") : null;\n })\n //變更資料源\n setRows(prevstate => (prevstate.map(item => {\n if (item.PersonalId === personalId) {\n return {\n ...item,\n pic: JSON.stringify(bigperson),\n pic_alt: JSON.stringify(bigpersonCount)\n }\n } else return item\n })\n ));\n enqueueSnackbar(\"匹配成功\", { variant: \"Success\", style: { whiteSpace: 'pre-line' } });\n one.pic = JSON.stringify(bigperson);\n one.pic_alt = JSON.stringify(bigpersonCount);\n // console.log(one)\n\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/UPDATE\",\n data: Qs.stringify({ parameter: one })\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n if (TotalRecord > 0) {\n enqueueSnackbar(\"圖檔更新成功\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n }\n else {\n enqueueSnackbar(\"圖檔更新失敗\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n }\n GetData();\n })\n\n\n\n\n\n } else {\n enqueueSnackbar(\"匹配失敗\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n }\n\n } else {\n alert(\"請輸入日期與身分ID\")\n }\n\n\n\n\n }\n\n\n const handleTest2 = e => {\n e.preventDefault();\n let one;\n // const { personalId } = user;\n // const map1 = new Map(\n // [...checkSelections]\n // .filter(([k, v]) => v === true)\n // );\n // // let index = [...checkSelections][0][0];\n // if (!_.isEmpty(rows[[...map1.keys()][0]])) {\n // one = rows[[...map1.keys()][0]];\n // let personalId = one.PersonalId;\n\n\n // } else {\n // alert(\"請選擇一筆\")\n // }\n\n // console.log(checkSelections);\n // console.log(checkSelections)\n // if (!_.isEmpty(personalId)) {\n // PF.instance({\n // method: \"post\",\n // url: PF.url + \"/Match/UPDATE\",\n // data: Qs.stringify({ parameter: rows.find(item => item.PersonalId === personalId) })\n // // headers: { token: sessionStorage.token }\n // })\n // .then(function (response) {\n // // alert(\"完成\")\n // const { TotalRecord, rows } = response.data;\n // if (TotalRecord > 0) {\n // enqueueSnackbar(\"圖檔更新成功\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n // }\n // else {\n // enqueueSnackbar(\"圖檔更新失敗\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n // }\n // })\n // }\n }\n\n\n const handleDateChange = (name, e, v) => {\n if (_.isNil(imageURL)) { //已提交不得修改\n setMornJoy(prevState => ({\n ...prevState,\n [name]: {\n ...prevState[name],\n value: v\n }\n }));\n }\n }\n const [loading, setLoading] = React.useState(false);\n\n const GetData = () => {\n let date = new Date(MornJoy.CheckDate.value);\n // setLoading(true);\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/MatchQueryTable\",\n data: Qs.stringify({ parameter: { CheckDate: MornJoy.CheckDate.value, yyyym: date.getFullYear() - 1911 + \".\" + moment(date).format(\"M\"), mmdd: moment(date).format(\"MMDD\") } }),\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n console.log(rows);\n // console.log(file);\n if (_.isEmpty(rows)) {\n enqueueSnackbar(\"查無報告書資料\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n } else {\n enqueueSnackbar(\"報告書資料：\" + TotalRecord + \"筆\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n }\n // setFile(file);\n setRows(prev => rows);\n setOrderRows(prev => [...PF.dataSheetGridFormat(rows, Object.keys(showColumns))])\n })\n\n }\n const [ItemName, setItemName] = React.useState();\n const GetItem = () => {\n // setLoading(true);\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/GetItem\",\n data: Qs.stringify({ parameter: null }),\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n setItemName(_.chain(rows)\n .keyBy('item_no')\n .mapValues('title')\n .value());\n // console.log(ItemName);\n\n })\n\n }\n\n const GetFile = () => {\n setLoading(true);\n let date = new Date(MornJoy.CheckDate.value);\n\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/MatchQueryFile\",\n data: Qs.stringify({ parameter: { CheckDate: MornJoy.CheckDate.value, yyyym: date.getFullYear() - 1911 + \".\" + moment(date).format(\"M\"), mmdd: moment(date).format(\"MMDD\") } }),\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, file } = response.data;\n // console.log(rows);\n // console.log(file);\n\n if (_.isEmpty(file)) {\n enqueueSnackbar(\"查無圖檔資料\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n } else {\n enqueueSnackbar(\"圖檔資料：\" + TotalRecord + \"筆\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n }\n setLoading(false);\n setFile(file);\n })\n\n\n }\n\n const handleQuery = e => {\n // let date = new Date(MornJoy.CheckDate.value);\n\n if (!_.isEmpty(MornJoy.CheckDate.value)) {\n setLoading(true);\n GetData();\n GetFile();\n // setLoading(false);\n\n } else {\n alert(\"請輸入日期\")\n }\n\n }\n const [MornJoy, setMornJoy] = React.useState({\n CheckDate: { name: \"CheckDate\", label: \"健檢日期\", format: \"date\", required: true, value: null },\n personalId: { name: \"personalId\", label: \"身分ID\", required: true },\n })\n const handleTest3 = e => {\n e.preventDefault();\n let one;\n // const { personalId } = user;\n const map1 = new Map(\n [...checkSelections]\n .filter(([k, v]) => v === true)\n );\n // let index = [...checkSelections][0][0];\n if (!_.isEmpty(rows[[...map1.keys()][0]])) {\n one = rows[[...map1.keys()][0]];\n let personalId = one.PersonalId;\n console.log(personalId)\n\n } else {\n alert(\"請選擇一筆\")\n }\n GetData();\n\n }\n const handleCloseDialog = (value) => {\n setOpenDialog(false);\n setDialogObj(null);\n setPicObj({});\n };\n const [PicObj, setPicObj] = React.useState({})\n React.useEffect(() => {\n console.log(PicObj)\n }, [PicObj])\n const handleSaveDialog = (value) => {\n let one = {};\n one.qc_id = DialogObj?.qc_id;\n // console.log(DialogObj.qc_id)\n\n\n // bigperson.pic_7023 = pic_7023;\n // bigpersonCount.pic_7023_alt = \"§\".repeat(pic_7023.length - 1);\n let TempPic = {}\n Object.keys(PicObj).map(item => {\n TempPic[item] = !_.isEmpty(PicObj[item]) ? PicObj[item].join(\",\") : null;\n })\n one.pic = JSON.stringify(TempPic);\n // console.log(TempPic)\n let TempPicAlt = {}\n let pic_alt = {}\n Object.keys(PicObj).map(item => {\n\n TempPicAlt[item + \"_alt\"] = !_.isEmpty(PicObj[item]) ? \"§\".repeat(PicObj[item].length - 1) : null;\n\n })\n // console.log(TempPicAlt)\n one.pic_alt = JSON.stringify(TempPicAlt);\n // one.pic_alt = JSON.stringify(bigpersonCount);\n // console.log(one)\n\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Match/UPDATE\",\n data: Qs.stringify({ parameter: one })\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n if (TotalRecord > 0) {\n enqueueSnackbar(\"圖檔更新成功\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n }\n else {\n enqueueSnackbar(\"圖檔更新失敗\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n }\n GetData();\n setOpenDialog(false); //關閉彈窗\n setDialogObj(null); //刪除Dialog\n setPicObj({}); //刪除Dialog_照片\n\n })\n\n };\n\n return <>\n \n {/* 
ShowPic(e, MedirepURL + item)} />\n by: {item.author}}\n actionIcon={\n handleDeleteImg(e, \"pic_\" + ItemNo, item)}>\n \n }\n />\n )\n }) : null\n }\n \n
\n\n\n \n\n \n {ItemName[ItemNo]} \n
*/}\n < ImageList rowHeight={180} cols={5} className={classes.imageList} >\n {\n\n DataSource[\"pic_\" + ItemNo]?.length > 0 ? (DataSource[\"pic_\" + ItemNo]).map((item, index) => {\n return (\n < ImageListItem key={index} >\n \n {Object.values(MornJoy).slice(1, 2).map((item, key) => {\n if (item.format === \"date\") {\n return (
\n//
\n// );\n// };\n\nclass App extends Component {\n constructor(props) {\n super(props);\n this.state = {\n isOpen: false,\n dataLoaded: false,\n isFormInvalid: false,\n rows: null,\n cols: null\n }\n this.fileHandler = this.fileHandler.bind(this);\n this.toggle = this.toggle.bind(this);\n this.openFileBrowser = this.openFileBrowser.bind(this);\n this.renderFile = this.renderFile.bind(this);\n this.openNewPage = this.openNewPage.bind(this);\n this.fileInput = React.createRef();\n }\n\n renderFile = (fileObj) => {\n //just pass the fileObj as parameter\n ExcelRenderer(fileObj, (err, resp) => {\n if (err) {\n console.log(err);\n }\n else {\n this.setState({\n dataLoaded: true,\n cols: resp.cols,\n rows: resp.rows\n });\n }\n });\n }\n\n fileHandler = (event) => {\n if (event.target.files.length) {\n let fileObj = event.target.files[0];\n let fileName = fileObj.name;\n\n\n //check for file extension and pass only if it is .xlsx and display error message otherwise\n if (fileName.slice(fileName.lastIndexOf('.') + 1) === \"xlsx\") {\n this.setState({\n uploadedFileName: fileName,\n isFormInvalid: false\n });\n this.renderFile(fileObj)\n }\n else {\n this.setState({\n isFormInvalid: true,\n uploadedFileName: \"\"\n })\n }\n }\n }\n\n toggle() {\n this.setState({\n isOpen: !this.state.isOpen\n });\n }\n\n openFileBrowser = () => {\n this.fileInput.current.click();\n }\n\n openNewPage = (chosenItem) => {\n const url = chosenItem === \"github\" ? \"https://github.com/ashishd751/react-excel-renderer\" : \"https://medium.com/@ashishd751/render-and-display-excel-sheets-on-webpage-using-react-js-af785a5db6a7\";\n window.open(url, '_blank');\n }\n\n render() {\n return (\n \n \n \n\n {this.state.dataLoaded &&\n \n
\n );\n }\n}\n\n\n// const Example = () => {\n// const componentRef = useRef();\n\n// return (\n// \n \n\n \n
}\n \n// }\n// content={() => componentRef.current}\n// />\n//
\n// );\n// };\n//連動\nconst useStyles = makeStyles((theme) => ({\n margin: {\n margin: theme.spacing(1),\n },\n}));\n\nconst theme = createTheme({\n palette: {\n primary: green,\n },\n});\nclass ExportPdfComponent extends React.Component {\n\n render() {\n return (\n \n\n (this.componentRef = response)} />\n\n this.componentRef}\n trigger={() => }\n />\n
\n );\n }\n}\nconst LINE = props => {\n const classes = useStyles();\n const [user, SetUser] = useState({\n token: \"\",\n messages: \"\"\n })\n const handleSend = e => {\n\n // let data = {\n // 'grant_type': 'authorization_code',\n // 'code': \"1GoJVEp1ePgeRevkS72zrQ\",\n // 'redirect_uri': \"https://localhost:44311/home/test\",\n // 'client_id': \"cD6fcMXzLV8GL76u2hL5xB\",\n // 'client_secret': \"XqDonAsQMnFDWXnRvez7JJSoewe2AC1ytWTKF1b6l17\"\n // }\n console.log(user)\n\n PF.instance({\n method: \"post\",\n url: PF.url + \"/HOME/Contact\",\n data: Qs.stringify(user),\n })\n .then(function (response) {\n // alert(\"完成\")\n console.log(response.data)\n })\n }\n const handleChange = e => {\n const { name, value } = e.target;\n SetUser(prev => ({\n ...prev,\n [name]: value\n }))\n }\n return (\n <>\n Export HTMl Table in PDF File
\n\n- \n
\n \n \n \n \n \n
\n );\n}\nexport default PDF;","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport ListItem from '@material-ui/core/ListItem';\nimport List from '@material-ui/core/List';\nimport Divider from '@material-ui/core/Divider';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Typography from '@material-ui/core/Typography';\nimport CloseIcon from '@material-ui/icons/Close';\nimport Slide from '@material-ui/core/Slide';\nimport DialogActions from \"@material-ui/core/DialogActions\";\nimport DialogContent from \"@material-ui/core/DialogContent\";\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\nimport GridContainer from \"../Grid/GridContainer\";\nimport GridItem from \"../Grid/GridItem\";\nimport { TextField, Menu, MenuItem, FormControl, InputLabel, Select, FormHelperText } from '@material-ui/core';\nimport AccountCircle from '@material-ui/icons/AccountCircle';\nimport { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardDateTimePicker, KeyboardTimePicker, DatePicker } from \"@material-ui/pickers\";\nimport MomentUtils from \"@date-io/moment\";\nimport TodayIcon from \"@material-ui/icons/UpdateOutlined\";\nimport \"moment/locale/zh-tw\"// import { es, ru } from \"@date-io/locale\";\nimport moment from \"moment\";\nimport Grid from '@material-ui/core/Grid';\nimport CakeIcon from '@material-ui/icons/Cake';\nimport CakeOutlinedIcon from '@material-ui/icons/CakeOutlined';\nimport CreditCardIcon from '@material-ui/icons/CreditCard';\nimport Brightness2Icon from \"@material-ui/icons/Brightness2\";\nimport Brightness7Icon from \"@material-ui/icons/Brightness7\";\nimport useSound from 'use-sound';\nimport switchlight from '../../sounds/switchlight.wav';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { actions } from \"../../reducers/app\";\nimport { indigo, teal, deepPurple } from '@material-ui/core/colors'\nimport { DarkModeSwitch } from 'react-toggle-dark-mode';\nimport _ from \"lodash\";\nimport { GTranslate } from '@material-ui/icons';\nimport { FormattedMessage } from \"react-intl\";\nimport { injectIntl, intlShape, useIntl } from 'react-intl';\nimport { useGmailListItemStyles } from '@mui-treasury/styles/listItem/gmail';\n\n//設定語系\n// moment.locale(\"e\");\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n padding: 0,\n '&:first-child ': {\n padding: 0,\n }\n },\n appBar: {\n position: 'relative',\n backgroundColor: indigo[500],\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n textAlign: \"center\"\n },\n button: {\n borderRight: \"3px solid transparent\",\n \"&:hover\": {\n borderRightColor: \"blue\",\n borderRight: \"3px solid\",\n },\n \"&:focus\": {\n borderRightColor: \"blue\",\n borderRight: \"3px solid\",\n }\n }\n}));\n\nconst Transition = React.forwardRef(function Transition(props, ref) {\n return {title}
\n \n\n \n \n\n \n\n \n \n {/* 置中顯示日期格式 */}\n {props.label}\n \n \n {viewsList.indexOf(\"month\") >= 0 ? () : null}\n {viewsList.indexOf(\"week\") >= 0 ? () : null}\n {viewsList.indexOf(\"day\") >= 0 ? () : null}\n {viewsList.indexOf(\"agenda\") >= 0 ? () : null}\n \n \n
\n );\n };\n\n return <>{getCustomToolbar()};\n}","import React, { useState } from 'react';\nimport { FormControl, FormLabel, FormHelperText, Paper, useForkRef, Typography, TextField, Button, CircularProgress, Fade, Backdrop } from '@material-ui/core';\n// import Signature from './Signature';\nimport _, { omit, pick, round, slice } from 'lodash';\nimport PF from \"../_Services/publicFunction\";\nimport Qs from \"qs\";\nimport { DarkModeSwitch } from 'react-toggle-dark-mode';\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { actions } from \"../reducers/app\";\nimport useSound from 'use-sound';\nimport switchlight from '../sounds/switchlight.wav';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport { MuiPickersUtilsProvider, KeyboardDatePicker, DatePicker, KeyboardDateTimePicker, KeyboardTimePicker } from \"@material-ui/pickers\";\nimport TodayIcon from \"@material-ui/icons/UpdateOutlined\";\nimport MomentUtils from \"@date-io/moment\";\nimport moment from \"moment\";\nimport { useSnackbar } from \"notistack\";\n// import Example from \"./components/LHTable/Example\"\nimport InteriorTable from \"../components/LHTable/DataSheet_Virtual\"\nimport Example from '../components/LHTable/Example';\nimport { indigo, teal, deepPurple } from '@material-ui/core/colors'\n\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n\n half_background: {\n background: \"linear-gradient(to top, yellow 50%, transparent 50%)\"\n },\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: '#fff',\n },\n \"data-grid\": {\n width: \"100%\"\n }\n}));\nconst WeeklyBooking = props => {\n const { enqueueSnackbar } = useSnackbar();\n const dispatch = useDispatch();\n const classes = useStyles();\n const initialRender = React.useRef(true);\n const { dark } = useSelector(state => ({\n dark: state.app.dark,\n }));\n const formRef = React.createRef();\n const [playActive] = useSound(\n switchlight,\n { volume: 0.5 }\n );\n const [loading, setLoading] = React.useState(false);\n\n //查詢條件\n const [MornJoy, setMornJoy] = React.useState({\n // CheckDate: { name: \"CheckDate\", label: \"預約日期\", format: \"date\", required: true, value: null },\n startDate: { name: \"startDate\", label: \"預約日期(起)\", format: \"date\", required: true, value: null },\n endDate: { name: \"endDate\", label: \"預約日期(迄)\", format: \"date\", required: true, value: null },\n personalId: { name: \"personalId\", label: \"身分ID\", required: true },\n })\n const [rows, setRows] = useState([]);\n //選中的範圍\n const [selected, setSelected] = React.useState({ start: null, end: null })\n //用於表的快速移動至某行\n const listRef = React.createRef();\n //勾選\n const [checkSelections, setCheckSelections] = React.useState(new Map());\n //允許多個勾選\n const [enableCheck, setEnableCheck] = React.useState(false);\n //允許多個勾選\n const [multiChk, setMultiChk] = React.useState(false);\n //總頁數\n const [pageCount, setPageCount] = React.useState(1)\n //第幾頁\n const [pageNo, setPageNo] = React.useState(6)\n const [columns, setColumns] = React.useState({\n SOMEDAY: { label: \"SOMEDAY\", name: \"SOMEDAY\", width: 100, type: \"text\", required: false, noShowSelect: true, orderSeq: 1 },\n RANGETIME: { label: \"RANGETIME\", name: \"RANGETIME\", width: 60, type: \"text\", required: true, xs: 6, sm: 6, md: 3, orderSeq: 2 },\n Limit: { label: \"Limit\", width: 60, name: \"Limit\", type: \"text\", required: true, xs: 6, sm: 6, md: 3, noShowSelect: true, tableFormat: \"number\", orderSeq: 3 },\n DY: { label: \"DY\", name: \"DY\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 4 },\n CW: { label: \"CW\", name: \"CW\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 5 },\n AMQC: { label: \"AMQC\", name: \"AMQC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 6 },\n PMQC: { label: \"PMQC\", name: \"PMQC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 7 },\n AMGC: { label: \"AMGC\", name: \"AMGC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 8 },\n PMGC: { label: \"PMGC\", name: \"PMGC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 9 },\n AMBC: { label: \"AMBC\", name: \"AMBC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 10 },\n PMBC: { label: \"PMBC\", name: \"PMBC\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 11 },\n FL: { label: \"FL\", name: \"FL\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 12 },\n Hear: { label: \"Hear\", name: \"Hear\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 13 },\n Ultra: { label: \"Ultra\", name: \"Ultra\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 14 },\n Lung: { label: \"Lung\", name: \"Lung\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 15 },\n DXA: { label: \"DXA\", name: \"DXA\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 16 },\n Auto: { label: \"Auto\", name: \"Auto\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 17 },\n MP: { label: \"MP\", name: \"MP\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 18 },\n VIP: { label: \"VIP\", name: \"VIP\", width: 60, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 19 },\n VIPRest: { label: \"VIPRest\", name: \"VIPRest\", width: 70, type: \"text\", required: true, noShowSelect: true, xs: 6, sm: 6, md: 3, tableFormat: \"number\", orderSeq: 20 },\n })\n React.useEffect(() => {\n let noshowTable = [];\n Object.values(columns).map(item => {\n if (item.noshowTable === true) {\n // console.log(item.name)\n noshowTable.push(item.name)\n }\n })\n let showColumns = _.omit(columns, noshowTable); //轉換\n setOrderRows(prev => PF.dataSheetGridFormat(rows, Object.keys(showColumns)))\n }, [columns])\n //轉換\n let noshowTable = [];\n Object.values(columns).map(item => {\n if (item.noshowTable === true) {\n // console.log(item.name)\n noshowTable.push(item.name)\n }\n })\n let showColumns = _.omit(columns, noshowTable)\n // const [showColumns, setShowColumn] = React.useState(_.omit(columns, noshowTable))\n //let z22 = _.orderBy(z2, ['orderSeq']); //排序\n //let z3 = z2.map(item=>(item.name));//只取標頭\n // console.log(z22); //依照column順序排序\n const [orderRows, setOrderRows] = React.useState(PF.dataSheetGridFormat(rows, Object.keys(showColumns)))\n //雙擊\n const handleDoubleClick = (i, j, e) => {\n console.log(rows[i]);\n }\n const RowStyleFunc = (rows, index) => {\n\n return new Date(rows[index][\"SOMEDAY\"]).getDate() % 2 != 0 ? dark ? indigo[900] : indigo[50] : \"\";\n }\n\n const handleQuery = prop => {\n if (!_.isEmpty(MornJoy.startDate.value) && !_.isEmpty(MornJoy.endDate.value)) {\n } else {\n alert(\"請輸入日期\")\n return\n }\n\n setLoading(true);\n PF.instance({\n method: \"post\",\n url: PF.url + \"/Reservation/GetWeeklyData\",\n data: Qs.stringify({ parameter: { startDate: MornJoy.startDate.value, endDate: MornJoy.endDate.value } }),\n // headers: { token: sessionStorage.token }\n })\n .then(function (response) {\n // alert(\"完成\")\n const { TotalRecord, rows } = response.data;\n console.log(rows)\n if (TotalRecord > 0) {\n enqueueSnackbar(\"查詢成功\", { variant: \"success\", style: { whiteSpace: 'pre-line' } });\n setRows(prev => rows);\n setOrderRows(prev => [...PF.dataSheetGridFormat(rows, Object.keys(showColumns))]);\n\n }\n else {\n enqueueSnackbar(\"查無資料\", { variant: \"warning\", style: { whiteSpace: 'pre-line' } });\n }\n setLoading(false);\n })\n\n };\n const handleDateChange = (name, e, v) => {\n setMornJoy(prevState => ({\n ...prevState,\n [name]: {\n ...prevState[name],\n value: v\n }\n }));\n }\n\n\n return (\n <>\n \n
\n