(toolFilter.current = ref),\r\n }}\r\n placeholder={Config.lang('Noi_dung_can_tim_kiem')}\r\n showHeader={false}\r\n openOnFieldClick={true}\r\n onOpenLoaded={onLoadCboFilter}\r\n renderFilter={() => {\r\n return (\r\n <>\r\n \r\n {\r\n const { data } = e;\r\n if (!data) return null;\r\n return data.EmployeeID + ' - ' + data.EmployeeName;\r\n }}\r\n showClearButton={true}\r\n onValueChanged={(e) => filterChange('CreateUserID', e.value)}\r\n onInputChanged={(e) => {\r\n paramFilterCboCreateUsers.search = e.target.value;\r\n paramFilterCboCreateUsers.skip = 0;\r\n loadCboCreateUsers(true);\r\n }}\r\n onLoadMore={(e) => {\r\n paramFilterCboCreateUsers.skip = e.skip;\r\n paramFilterCboCreateUsers.limit = e.limit;\r\n loadCboCreateUsers();\r\n }}\r\n />\r\n
\r\n \r\n filterChange('ApprovalStatus', e)}\r\n showClearButton={true}\r\n value={String(filter.current?.ApprovalStatus ?? '')}\r\n />\r\n
\r\n \r\n \r\n {Config.lang('Ngay_tao')}\r\n \r\n setDateFrom(e.value)}\r\n showClearButton={true}\r\n placeholder={'DD/MM/YYYY'}\r\n value={DateFrom ?? ''}\r\n />\r\n setDateTo(e.value)}\r\n showClearButton={true}\r\n placeholder={'DD/MM/YYYY'}\r\n value={DateTo ?? ''}\r\n />\r\n
\r\n \r\n
\r\n {Config.lang('Chi_tiet')}\r\n \r\n
\r\n setDisabledCboEmployee(e?.value ?? false)}\r\n />\r\n
\r\n
\r\n {\r\n const { data } = e;\r\n if (!data) return null;\r\n return data.EmployeeID + ' - ' + data.EmployeeName;\r\n }}\r\n showClearButton={true}\r\n onValueChanged={(e) => filterChange('EmployeeID', e.value)}\r\n onInputChanged={(e) => {\r\n paramFilterCboEmployees.search = e.target.value;\r\n paramFilterCboEmployees.skip = 0;\r\n loadCboEmployees(true);\r\n }}\r\n onLoadMore={(e) => {\r\n paramFilterCboEmployees.skip = e.skip;\r\n paramFilterCboEmployees.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n />\r\n
\r\n
\r\n filterChange('GoalPlanID', e.value)}\r\n showClearButton={true}\r\n value={filter.current.GoalPlanID}\r\n placeholder={Config.lang('Chon')}\r\n />\r\n
\r\n
\r\n \r\n {Config.lang('Giai_doan')}\r\n \r\n setDateFrom2(e.value)}\r\n showClearButton={true}\r\n placeholder={'DD/MM/YYYY'}\r\n value={DateFrom2 ?? ''}\r\n />\r\n setDateTo2(e.value)}\r\n showClearButton={true}\r\n placeholder={'DD/MM/YYYY'}\r\n value={DateTo2 ?? ''}\r\n />\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 onChangeDataFilter = () => {\r\n toolFilter.current.instance.close();\r\n setDataFilter({\r\n ...dataFilter,\r\n ApprovalStatus: filter.current?.ApprovalStatus ?? null,\r\n EmployeeID: filterEmployee?.EmployeeID ?? '',\r\n CreateUserID: filter.current?.CreateUserID ?? '',\r\n GoalPlanID: filter.current?.GoalPlanID ?? '',\r\n DateFrom: DateFrom ?? null,\r\n DateTo: DateTo ?? null,\r\n DateFrom2: DateFrom2 ?? null,\r\n DateTo2: DateTo2 ?? null,\r\n });\r\n };\r\n\r\n const renderFormInfo = (data) => {\r\n return (\r\n \r\n {data?.length > 0 &&\r\n data.map((i, idx) => {\r\n return ;\r\n })}\r\n {\r\n const params = objectToParams(goalData.current ?? {}) ?? '';\r\n window.open(Config.getRootPath() + `W39F3010?${params}`);\r\n }}\r\n style={{ marginTop: 10 }}\r\n >\r\n {Config.lang('Xem_chi_tiet_cac_dot_review')}\r\n \r\n
\r\n );\r\n };\r\n\r\n const loadFormInfo = (transID, type) => {\r\n const params = {\r\n DivisionID: Config.getDivisionID() ?? '',\r\n FormID: 'W39F3030',\r\n UserID: Config?.profile?.UserID ?? '',\r\n Language: Config?.language ?? '84',\r\n VoucherID: transID ?? '',\r\n Type: 0,\r\n Mode: 0,\r\n TransType: type ?? '',\r\n };\r\n\r\n dispatch(\r\n W39F3030Actions.getDetailData(params, (err, dt) => {\r\n if (err) {\r\n const msg = err?.message ?? Config.lang('Loi_chua_xac_dinh');\r\n return Config.popup2.show('ERROR', msg);\r\n }\r\n if (dt?.data) {\r\n setDataForm(dt?.data);\r\n }\r\n })\r\n );\r\n };\r\n\r\n const onSelectionChanged = (e) => {\r\n if (!e) return false;\r\n goalData.current.TransID = e?.D39T2046_TransID ?? '';\r\n goalData.current.IsEdit = 0;\r\n loadFormInfo(e.VoucherID, e.Type);\r\n };\r\n\r\n const objectToParams = (obj = {}) => {\r\n const arr = [];\r\n Object.keys(obj).forEach((key) => {\r\n arr.push(`${key}=${obj?.[key] ?? ''}`);\r\n });\r\n return arr.join('&');\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\nW39F3030.propTypes = {};\r\n\r\nexport default W39F3030;\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 6/5/2021\r\n * @Example\r\n */\r\n\r\nimport { makeStyles } from '@material-ui/core/styles';\r\n\r\nexport const useStyle = makeStyles((theme) => ({\r\n flex: {\r\n display: 'flex',\r\n },\r\n gap50: {\r\n gap: 50,\r\n },\r\n alignCenter: {\r\n alignItems: 'center',\r\n },\r\n wSnoWrap: {\r\n whiteSpace: 'nowrap',\r\n },\r\n divDetailCont: {\r\n marginTop: 8,\r\n borderTop: '1px solid',\r\n borderColor: theme.palette.text.subtext,\r\n position: 'relative',\r\n },\r\n typoDetail: {\r\n position: 'absolute',\r\n top: -10,\r\n paddingRight: 5,\r\n backgroundColor: 'white',\r\n },\r\n subColor: {\r\n color: theme.palette.text.subtext + ' !important',\r\n },\r\n justifyCenter: {\r\n justifyContent: 'center',\r\n },\r\n underlinedText: {\r\n textDecoration: 'underline',\r\n },\r\n pointerCursor: {\r\n cursor: 'pointer',\r\n },\r\n flexWrap: {\r\n flexWrap: 'wrap',\r\n },\r\n divGroupGoalName: {\r\n padding: '5px 0',\r\n borderBottom: '2px solid',\r\n },\r\n iconExpandTransition: {\r\n display: 'inline-flex',\r\n transition: 'all 0.2s ease-in-out',\r\n },\r\n autoOverflow: {\r\n overflow: 'auto',\r\n },\r\n hiddenOverflow: {\r\n overflow: 'hidden',\r\n },\r\n gap20: {\r\n gap: 20,\r\n },\r\n gap10: {\r\n gap: 10,\r\n },\r\n gap5: {\r\n gap: 5,\r\n },\r\n gridGoal: {\r\n display: 'grid',\r\n gridTemplateColumns: 'minmax(300px, 9fr) repeat(4, minmax(150px, 1fr))',\r\n width: 'fit-content',\r\n padding: '5px 0',\r\n alignItems: 'center',\r\n },\r\n gridTR: {\r\n display: 'grid',\r\n gridTemplateColumns: 'minmax(240px, 9fr) repeat(4, minmax(150px, 1fr))',\r\n width: 'fit-content',\r\n padding: '5px 0',\r\n alignItems: 'center',\r\n },\r\n divGoal: {\r\n borderTop: '1px solid #D4D5D9',\r\n },\r\n listTR: {\r\n width: 'calc(100% - 60px)',\r\n marginLeft: 60,\r\n },\r\n flexColumn: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n },\r\n flexRow: {\r\n display: 'flex',\r\n flexDirection: 'row',\r\n },\r\n textOverflow: {\r\n whiteSpace: 'nowrap',\r\n textOverflow: 'ellipsis',\r\n overflow: 'hidden',\r\n },\r\n}));\r\n","/**\r\n * @Copyright 2021 @DigiNet\r\n * @Author XUANLOC\r\n * @Create 7/5/2021\r\n * @Example\r\n */\r\n\r\nimport { ArrowUp } from 'diginet-core-ui/icons';\r\nimport PropTypes from 'prop-types';\r\nimport React, { useRef, useState } from 'react';\r\nimport { Collapse, Typography } from 'diginet-core-ui/components';\r\nimport Config from '../../../../../config';\r\nimport W39F3030Goal from './W39F3030Goal';\r\n\r\nconst W39F3030GroupGoal = (props) => {\r\n const { data, classes, colorStatusArr } = props;\r\n\r\n const [expand, setExpand] = useState(true);\r\n\r\n const toogleExpand = () => {\r\n setExpand((expand) => !expand);\r\n };\r\n\r\n const listGoalRef = useRef(null);\r\n\r\n let position = {\r\n left: 0,\r\n x: 0,\r\n };\r\n\r\n const totalResult = data?.GroupGoal.reduce((total, current) => total + (current.Result * current.Proportion) / 100, 0).toFixed(2);\r\n const totalProportion = data?.GroupGoal.reduce((total, current) => total + current.Proportion, 0);\r\n\r\n const onMouseDown = (e) => {\r\n position = {\r\n left: listGoalRef.current.scrollLeft,\r\n x: e.clientX,\r\n };\r\n\r\n if (listGoalRef.current.scrollWidth > listGoalRef.current.clientWidth) {\r\n listGoalRef.current.addEventListener('mousemove', onMouseMove);\r\n listGoalRef.current.addEventListener('mouseup', onMouseUp);\r\n }\r\n };\r\n\r\n const onMouseMove = (e) => {\r\n const dx = e.clientX - position.x;\r\n\r\n if (listGoalRef.current) {\r\n listGoalRef.current.style.cursor = 'grabbing';\r\n listGoalRef.current.style.userSelect = 'none';\r\n listGoalRef.current.scrollLeft = position.left - dx;\r\n }\r\n };\r\n\r\n const onMouseUp = () => {\r\n listGoalRef.current.style.cursor = null;\r\n listGoalRef.current.style.removeProperty('user-select');\r\n listGoalRef.current.removeEventListener('mousemove', onMouseMove);\r\n listGoalRef.current.removeEventListener('mouseup', onMouseUp);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {`${data?.GroupGoalName ?? ''} (${data?.GroupGoal?.length ?? 0})`}\r\n \r\n \r\n {data?.GroupGoal?.length > 0 && (\r\n
\r\n
\r\n {Config.lang('Ten_muc_tieu')}\r\n \r\n
\r\n \r\n {Config.lang('Ket_qua')}\r\n \r\n \r\n ({totalResult})\r\n \r\n
\r\n
\r\n {Config.lang('Trong_so')}\r\n ({totalProportion})\r\n
\r\n
{Config.lang('Han_hoan_thanh')}\r\n
{Config.lang('Thuc_hien1')}\r\n
\r\n )}\r\n {data.GroupGoal.map((i, idx) => (\r\n
\r\n ))}\r\n \r\n
\r\n {data?.Type === 'Object' && (\r\n
\r\n \r\n \r\n )}\r\n \r\n
\r\n {data.GoalName}\r\n \r\n
\r\n {data?.Type === 'Object' && (\r\n
\r\n \r\n \r\n {data?.NumberOfKey ?? ''}\r\n \r\n
\r\n )}\r\n
\r\n \r\n \r\n {data?.NumComment ?? 0}\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n {data?.ComputeMethod === 'Target' && (\r\n \r\n {data?.Value ?? 0}/{data?.Target ?? 0}\r\n \r\n )}\r\n
\r\n
{data?.Proportion ?? 0}%\r\n
{validDateTo?.format('DD/MM/YYYY') ?? ''}\r\n
\r\n
\r\n
{user?.EmployeeName ?? ''}\r\n
\r\n
\r\n
onOpenTargetGroup(false)}\r\n onChoosed={e => {\r\n const { selectedRowsData } = e || {};\r\n if (selectedRowsData?.length) setMasterLoading(true);\r\n let _dataSourceGoals = [...dataSourceGoals];\r\n for (let sd of selectedRowsData) {\r\n const isExist = dataSourceGoals.find(d => d.GroupGoalID === sd.GroupGoalID);\r\n if (!isExist) {\r\n _dataSourceGoals.push({\r\n GroupGoalID: sd.GroupGoalID,\r\n Object: []\r\n });\r\n }\r\n }\r\n setDataSourceGoals([..._dataSourceGoals]);\r\n setDataTargetGroups([...selectedRowsData]);\r\n }}\r\n >\r\n \r\n \r\n \r\n closeAttachments()}\r\n onAdd={onAddAttachments}\r\n />\r\n changeTargetGroup(e)}\r\n onClose={() =>\r\n setDataChangeGroup({\r\n open: false,\r\n data: null,\r\n })\r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {/*{renderFilters()}
*/}\r\n \r\n \r\n \r\n handleChange(\"GoalMode\", e)}\r\n />\r\n \r\n \r\n handleChange(\"GoalMode\", e)}\r\n />\r\n \r\n {formData?.GoalMode === 1 && (\r\n \r\n handleChange(\"OrgChartID\", data)}\r\n value={formData?.OrgChartID || \"\"}\r\n loading={loading?.getOrgCharts}\r\n style={{ margin: 0 }}\r\n placeholder={Config.lang(\"Co_cau_to_chuc\")}\r\n >\r\n handleChange(\"OrgChartID\", e)}\r\n />\r\n \r\n \r\n )}\r\n \r\n {\r\n filterCboEmployees.current.strSearch = e.target.value;\r\n filterCboEmployees.current.skip = 0;\r\n loadCboEmployees(true);\r\n }}\r\n onLoadMore={e => {\r\n filterCboEmployees.current.skip = e.skip;\r\n filterCboEmployees.current.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n onChange={e => handleChange(\"Employee\", e)}\r\n />\r\n \r\n \r\n handleChange(\"GoalPlanID\", e)}\r\n />\r\n \r\n \r\n {\r\n setSelectFromCat(e.value);\r\n }}\r\n />\r\n handleChange(\"StatusID\", e)}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {Config.lang(\"Danh_sach_muc_tieu_ket_qua_then_chot\")}\r\n \r\n
onOpenTargetGroup(true)}\r\n />\r\n {\r\n setDataHideColumns(data);\r\n }}\r\n />\r\n \r\n
{renderContents}\r\n
\r\n \r\n 0)}\r\n onClick={() => onView(data)}\r\n style={{ cursor: 'pointer' }} />\r\n \r\n \r\n 2)}\r\n onClick={() => onEdit(data)}\r\n style={{ cursor: 'pointer' }} />\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n const filterChange = (filterName = \"\", e) => {\r\n if (!e || _.isEmpty(filterName)) return;\r\n switch (filterName) {\r\n case \"DateFrom\":\r\n case \"DateTo\":\r\n setDataFilter({\r\n ...dataFilter,\r\n [filterName]: _.get(e, \"value\", \"\")\r\n });\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const renderFilter = () => {\r\n return (\r\n {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n filterChange(\"DateFrom\", e)}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n filterChange(\"DateTo\", 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 const renderCustomTagColumn = (e) => {\r\n if (!e) return;\r\n if (e.value === 1) { // === 1 thì hiển thị\r\n return (\r\n }\r\n />\r\n )\r\n } else {\r\n return;\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {renderFilter()}
\r\n \r\n \r\n \r\n {\r\n onView(e);\r\n }}\r\n filterRow={{\r\n visible: true,\r\n showOperationChooser: 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\nexport default compose(\r\n connect(state => ({\r\n dataGrid: state.W39F3035.dataGrid\r\n }), dispatch => ({\r\n generalActions: bindActionCreators(generalActions, dispatch),\r\n w39f3035Actions: bindActionCreators(W39F3035Actions, dispatch)\r\n })))(W39F3035);\r\n","/**\r\n * @copyright 2019 @ DigiNet\r\n * @author TRIHAO\r\n * @create 10/23/2019\r\n * @Example\r\n */\r\n\r\nimport React, { useEffect, useRef, useState, memo, useMemo } from 'react';\r\nimport ActionToolbar from '../../../common/toolbar/action-toolbar';\r\nimport { connect } from 'react-redux';\r\nimport { bindActionCreators } from 'redux';\r\nimport * as mainActions from '../../../../redux/main/main_actions';\r\nimport * as w39F3040Actions from '../../../../redux/W3X/W39F3040/W39F3040_actions';\r\nimport * as generalActions from '../../../../redux/general/general_actions';\r\nimport { FormGroup, Row, Col } from 'react-bootstrap';\r\nimport html2canvas from 'html2canvas';\r\nimport Config from '../../../../config';\r\nimport {Line} from 'react-chartjs-2';\r\nimport {\r\n Typography,\r\n Avatar,\r\n Dropdown,\r\n Button,\r\n TreeView,\r\n ButtonIcon,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n} from 'diginet-core-ui/components';\r\nimport GridContainer from '../../../grid-container/grid-container';\r\nimport { Column } from 'devextreme-react/data-grid';\r\nimport Icons from 'diginet-core-ui/icons';\r\nimport Filter from '../../../filter/filter';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport { useTheme, makeStyles } from 'diginet-core-ui/theme';\r\nimport W39F3002 from '../W39F3002/W39F3002';\r\nimport W39F1011 from '../W39F1011/W39F1011';\r\nimport W39F3000 from '../W39F3000/W39F3000';\r\nimport W39F3036 from '../W39F3036/W39F3036';\r\n\r\nconst { colors, spacing } = useTheme();\r\nconst {\r\n white,\r\n fill: { extrabutton },\r\n system: { dark },\r\n text: { sub },\r\n disabled: disabledCL,\r\n line: { category, system },\r\n warning\r\n} = colors;\r\n\r\nconst useStyle = makeStyles(themes => ({\r\n W39F3040: {\r\n minWidth: 960,\r\n '& .grid-container': {\r\n minHeight: 'calc(100vh - 195px)',\r\n height: 'calc(100vh - 195px)',\r\n },\r\n '& .paging': {\r\n minWidth: 'auto',\r\n },\r\n },\r\n TreeViewItem: {\r\n '& .View': {\r\n display: 'none',\r\n },\r\n '&:hover': {\r\n '& .View': {\r\n display: 'flex',\r\n },\r\n },\r\n },\r\n dot: {\r\n display: 'block',\r\n width: spacing(2),\r\n height: spacing(2),\r\n backgroundColor: dark,\r\n borderRadius: 100,\r\n marginRight: spacing(2),\r\n },\r\n treeView: {\r\n maxHeight: 'calc(100% - 160px)',\r\n overflow: 'auto',\r\n },\r\n line:{\r\n borderBottom: `1px solid ${category}`,\r\n marginTop: 0\r\n }\r\n}));\r\n\r\nconst initData = {\r\n rows: [],\r\n total: 0,\r\n};\r\n\r\nconst FormID = 'W39F3040';\r\n\r\nconst W39F3040 = props => {\r\n const {getCboPosition} = props;\r\n\r\n const [dataGrid, setDataGrid] = useState(initData);\r\n const [dataCboEmployees, setDataCboEmployees] = useState(initData);\r\n const [loadEmployees, setLoadEmployees] = useState(false);\r\n const [userSelected, setUserSelected] = useState(null);\r\n const [dataOrgChart, setDataOrgChart] = useState(null);\r\n const [cboEmployeeLoading, setCboEmployeeLoading] = useState(null);\r\n const [groupDuty, setGroupDuty] = useState(null);\r\n const [treeList, setTreeList] = useState(null);\r\n const [popupDetail, setPopupDetail] = useState(null);\r\n const [permission, setPermission] = useState(null);\r\n const [dataChart, setDataChart] = useState(null);\r\n const [dataDDFilter, setDataDDFilter] = useState({});\r\n const [stateNumYear, setStateNumYear] = useState(3);\r\n const [isExportPDF, setIsExportPDF] = useState(false);\r\n const [sizeChart, setSizeChart] = useState(null);\r\n const viewExportPDF = useRef(null);\r\n const classes = useStyle();\r\n let isESS = useRef(!_.toNumber(Config.getLocalStorage('MENUTYPEDHR') || 0));\r\n isESS = +isESS?.current;\r\n\r\n let getEmployeeID = '';\r\n if (isESS) getEmployeeID = Config.getHREmployeeID();\r\n const [filterSearch, setFilterSearch] = useState({\r\n NumYear: 3,\r\n EmployeeID: getEmployeeID,\r\n OrgChartID: '',\r\n DutyGroupID: '',\r\n DutyID: '',\r\n });\r\n\r\n const filterSearchRef = useRef({\r\n skip: 0,\r\n limit: 20,\r\n });\r\n\r\n const filterCboEmployees = useRef({\r\n Type: 'EmployeeID',\r\n FormID,\r\n skip: 0,\r\n limit: 50,\r\n });\r\n\r\n useEffect(() => {\r\n loadPermission();\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (permission > 0) loadForm();\r\n // eslint-disable-next-line\r\n }, [permission]);\r\n\r\n useEffect(()=>{\r\n if(userSelected?.EmployeeID) loadTreeList();\r\n // eslint-disable-next-line\r\n },[userSelected?.EmployeeID]);\r\n\r\n useEffect( ()=>{\r\n if(!!isExportPDF){\r\n const input = document.getElementById('view-export-pdf');\r\n html2canvas(input, {useCORS: true, allowTaint: true, scale: 2})\r\n .then((canvas) => {\r\n const imgData = canvas.toDataURL('image/png');\r\n if (canvas && imgData) {\r\n try {\r\n const myWindow = window.open('', Config.lang('Bang_muc_tieu'));\r\n myWindow.document.write(\r\n '![\"\"](\"')
'\r\n );\r\n myWindow.document.close();\r\n myWindow.focus();\r\n } catch (err) {\r\n Config.popup.show('ERROR', err);\r\n }\r\n }\r\n setIsExportPDF(false);\r\n })\r\n ;\r\n }\r\n },[isExportPDF, stateNumYear, userSelected]);\r\n\r\n const loadCboPosition = () => {\r\n props.generalActions.getCboDuty2(error => {\r\n if (error) {\r\n Config.popup.show(\"ERROR\", error);\r\n return false;\r\n }\r\n })\r\n };\r\n\r\n const loadPermission = () => {\r\n props.generalActions.getPermission(FormID, isPer => {\r\n setPermission(isPer || 0);\r\n });\r\n };\r\n\r\n const onLoadDataFilter = () => {\r\n if (!isESS) loadCboEmployees();\r\n loadDataOrgChart();\r\n loadGroupDuty();\r\n loadCboPosition();\r\n };\r\n\r\n const loadForm = () => {\r\n const {\r\n NumYear = 0,\r\n EmployeeID = '',\r\n OrgChartID = [],\r\n DutyGroupID = '',\r\n DutyID = '',\r\n IsExportExcel = 0,\r\n } = filterSearch;\r\n let param = {\r\n FormID,\r\n skip: filterSearchRef.current.skip,\r\n limit: filterSearchRef.current.limit,\r\n NumYear,\r\n EmployeeID,\r\n DutyGroupID,\r\n DutyID,\r\n IsExportExcel,\r\n IsESS: isESS,\r\n };\r\n\r\n if (OrgChartID.length) param.OrgChartID = OrgChartID;\r\n\r\n setLoadEmployees(true);\r\n props.w39F3040Actions.getFormData(param, (error, data) => {\r\n setLoadEmployees(false);\r\n if (error) {\r\n let message = error.message || Config.lang('DHR_Loi_chua_xac_dinh');\r\n Config.popup.show('INFO', message);\r\n setDataGrid(initData);\r\n return false;\r\n }\r\n if (data) {\r\n setDataGrid(data);\r\n if(!userSelected) onRowClick({data: data?.rows[0]});\r\n }\r\n });\r\n };\r\n\r\n const onChangePage = page => {\r\n filterSearchRef.current.skip = page * filterSearchRef.current.limit;\r\n loadForm();\r\n };\r\n\r\n const onChangePerPage = perPage => {\r\n filterSearchRef.current.skip = 0;\r\n filterSearchRef.current.limit= perPage;\r\n loadForm();\r\n };\r\n\r\n const loadGroupDuty = () => {\r\n const param = {\r\n Language: Config.language || '84',\r\n };\r\n\r\n props.w39F3040Actions.getCbGroupDuty(param, (error, data) => {\r\n setLoadEmployees(false);\r\n if (error) {\r\n Config.popup.show('INFO', error);\r\n setGroupDuty([]);\r\n return false;\r\n }\r\n if (data) {\r\n setGroupDuty(data);\r\n }\r\n });\r\n };\r\n\r\n const loadTreeList = () => {\r\n const { NumYear } = filterSearch;\r\n const param = {\r\n FormID,\r\n EmployeeID: userSelected?.EmployeeID,\r\n NumYear,\r\n };\r\n\r\n props.w39F3040Actions.loadTreeList(param, (error, data) => {\r\n if (error) {\r\n Config.popup.show('INFO', error);\r\n setTreeList(null);\r\n return false;\r\n }\r\n if (data) {\r\n const dataSource = _generateTreeList(data);\r\n const first = dataSource.find(i=>i.Level === 1);\r\n if(first) onFilter(first);\r\n setTreeList(dataSource);\r\n }\r\n });\r\n };\r\n\r\n const onView = data => {\r\n const { Level, SummaryDocID, Type, AppraisalDocID, ParentID, ObjectiveID } = data;\r\n\r\n let dataPopup = null;\r\n if (Level === 1) {\r\n dataPopup = {\r\n ...data,\r\n FormID: 'W39F3035',\r\n GoalPlanID: SummaryDocID,\r\n OrgChartID: '',\r\n EmployeeID: userSelected.EmployeeID,\r\n };\r\n } else if (Level === 2) {\r\n if (Type === 'KPI') {\r\n dataPopup = {\r\n ...data,\r\n FormID: 'W39F1011',\r\n IsSave: 0,\r\n Mode: 1,\r\n ApproveLevel: 1,\r\n EmployeeID: userSelected.EmployeeID,\r\n FormPermission: 'W39F1010',\r\n };\r\n }\r\n if (Type === 'Goal') {\r\n dataPopup = {\r\n ...data,\r\n FormID: 'W39F3000',\r\n GoalPlanID: AppraisalDocID,\r\n EmployeeID: userSelected.EmployeeID,\r\n isESS: isESS,\r\n };\r\n }\r\n } else if (Level >= 3) {\r\n if (Level === 3 && Type === 'KPI') {\r\n // find parent of item\r\n const parent = treeList?.find(item => item.ID === ParentID);\r\n dataPopup = {\r\n ...data,\r\n FormID: 'W39F1011',\r\n IsSave: 0,\r\n TransID: parent.TransID,\r\n EvaluationVoucherID: parent.EvaluationVoucherID,\r\n Mode: 1,\r\n ApproveLevel: 1,\r\n EmployeeID: userSelected.EmployeeID,\r\n FormPermission: 'W39F1010',\r\n };\r\n }\r\n if ((Level === 3 && Type === 'Goal') || Level === 4) {\r\n dataPopup = {\r\n ...data,\r\n FormID: 'W39F3002',\r\n GoalID: ObjectiveID,\r\n Mode: 0,\r\n Type,\r\n };\r\n }\r\n }\r\n\r\n dataPopup.FromPath = FormID;\r\n setPopupDetail(dataPopup);\r\n };\r\n\r\n const onFilter = item => {\r\n const { NumYear } = filterSearch;\r\n const { Level = 1, Type = '', LibraryGoalID = '' } = item || {};\r\n const param = {\r\n FormID,\r\n EmployeeID: userSelected?.EmployeeID,\r\n NumYear,\r\n Level,\r\n Type,\r\n LibraryGoalID,\r\n };\r\n\r\n props.w39F3040Actions.loadFilter(param, (error, data) => {\r\n let dataFilter = {};\r\n if (error) {\r\n Config.popup.show('ERROR', error);\r\n setDataChart(null);\r\n return false;\r\n } else if (data) {\r\n const dataDD = _.groupBy(data[1], 'Year');\r\n\r\n const arrYear = {};\r\n let next = 0;\r\n\r\n // Click vào từng node của Treelist đánh giá, gọi đổ nguồn lại Filter thuộc tính thể hiện chart:\r\n // @Level = 1 default ObjectID = @SummaryDocID của node click, nếu không có thì default dòng đầu tiên\r\n // @Level = 2 default ObjectID = @AppraisalDocID của node click, nếu không có thì default dòng đầu tiên\r\n // @Level IN (3, 4) default ObjectID = @ObjectiveID của node click, nếu không có thì default dòng đầu tiên\r\n const conditionObjectID = new Map([\r\n [1, 'SummaryDocID'],\r\n [2, 'AppraisalDocID'],\r\n [3, 'ObjectiveID'],\r\n [4, 'ObjectiveID'],\r\n ]);\r\n\r\n do {\r\n const year = moment().subtract(next, 'year').format('YYYY');\r\n const vl = dataDD[year]?.find(i=> i.ObjectID === item[conditionObjectID.get(Level)]) || null;\r\n\r\n if(vl){\r\n dataFilter[year] = vl.ObjectID;\r\n }\r\n else if (dataDD[year]?.[0]) {\r\n dataFilter[year] = dataDD[year]?.[0].ObjectID;\r\n }\r\n\r\n arrYear[year] = dataDD?.[year];\r\n next++;\r\n } while (next < NumYear);\r\n\r\n setDataChart({ name: data[0]?.[0]?.ChartName || '', data: arrYear });\r\n }\r\n setDataDDFilter(dataFilter);\r\n });\r\n };\r\n\r\n const loadDataOrgChart = () => {\r\n props.generalActions.getOrgCharts({}, (error, data) => {\r\n if (error) {\r\n Config.popup.show('ERROR', error);\r\n return false;\r\n }\r\n if (data) {\r\n const dataSource = _generateDataOrg(data, 'OrgChartID', 'OrgChartParentID');\r\n setDataOrgChart(dataSource);\r\n }\r\n });\r\n };\r\n\r\n const _generateDataOrg = (dataSource = [], valueExpr, parentIdExpr) => {\r\n return dataSource.map(e => {\r\n if (e[valueExpr] && e[parentIdExpr] && e[valueExpr] === e[parentIdExpr]) {\r\n delete e[parentIdExpr];\r\n e.expanded = true;\r\n } else if (!e[parentIdExpr]) {\r\n e.expanded = true;\r\n }\r\n return e;\r\n });\r\n };\r\n\r\n const _generateTreeList = dataSource => {\r\n let data = dataSource[1].map(item => ({\r\n ...item,\r\n ID: item.SummaryDocID,\r\n ParentID: null,\r\n })) || [];\r\n dataSource[2].forEach((item, idx) => {\r\n data.push({\r\n ...item,\r\n ID: item.AppraisalDocID,\r\n ParentID: item.SummaryDocID,\r\n expand: idx === 0,\r\n });\r\n });\r\n dataSource[3].forEach((item, idx) => {\r\n if (item.Level === 3) {\r\n data.push({\r\n ...item,\r\n ParentID: item.AppraisalDocID,\r\n ID: item.ObjectiveID,\r\n expand: idx === 0,\r\n });\r\n } else if (item.Level === 4) {\r\n data.push({\r\n ...item,\r\n ParentID: item.GoalParentID,\r\n ID: item.ObjectiveID,\r\n expand: idx === 0,\r\n });\r\n }\r\n });\r\n return data;\r\n };\r\n\r\n const loadCboEmployees = isReset => {\r\n const { HostID, Type, skip, limit, strSearch: search } = filterCboEmployees.current;\r\n const param = {\r\n HostID,\r\n Type,\r\n FormID,\r\n skip,\r\n limit,\r\n search,\r\n };\r\n setCboEmployeeLoading(true);\r\n props.generalActions.getCboEmployees(param, (error, data) => {\r\n setCboEmployeeLoading(false);\r\n if (error) {\r\n Config.popup.show('ERROR', error);\r\n setDataCboEmployees(initData);\r\n return false;\r\n } else if (data) {\r\n const rows = data && data.rows ? data.rows : dataCboEmployees.rows;\r\n const total = data && data.total ? data.total : data.length;\r\n setDataCboEmployees({\r\n rows: isReset ? rows : dataCboEmployees.rows.concat(rows),\r\n total: total,\r\n });\r\n }\r\n });\r\n };\r\n\r\n const filterChange = (filterName = '', e) => {\r\n if (!e) return;\r\n let value = _.get(e, 'value', _.get(e, 'target.value', ''));\r\n if (filterName === 'NumYear') setStateNumYear(value);\r\n setFilterSearch({...filterSearch, [filterName]: value});\r\n };\r\n\r\n const renderFilters = () => {\r\n return (\r\n {\r\n // const { DirectManagers, OrgChartID, ProjectID, EmployeeID } = filter;\r\n return (\r\n <>\r\n \r\n \r\n \r\n filterChange('NumYear', e)}\r\n />\r\n \r\n \r\n filterChange('EmployeeID', e)}\r\n onInput={e => {\r\n filterCboEmployees.current.strSearch = e.target.value;\r\n filterCboEmployees.current.skip = 0;\r\n loadCboEmployees(true);\r\n }}\r\n onLoadMore={e => {\r\n filterCboEmployees.current.skip = e.skip;\r\n filterCboEmployees.current.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n />\r\n \r\n
\r\n \r\n \r\n filterChange('OrgChartID', e)}\r\n value={filterSearch?.OrgChartID || []}\r\n clearAble\r\n viewType={'outlined'}\r\n placeholder={Config.lang('Chon')}\r\n className={'mg0'}\r\n >\r\n {\r\n filterChange('OrgChartID', e);\r\n }}\r\n parentID={'OrgChartParentID'}\r\n value={filterSearch?.OrgChartID || []}\r\n valueExpr={'OrgChartID'}\r\n />\r\n \r\n \r\n
\r\n \r\n \r\n filterChange('DutyGroupID', e)}\r\n />\r\n \r\n
\r\n \r\n \r\n filterChange(\"DutyID\", 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 const onRowClick = e => {\r\n setDataChart(null);\r\n setDataDDFilter({});\r\n\r\n let user = e.data;\r\n const cacheUser = Config.getUser({\r\n EmployeeID: user.EmployeeID,\r\n });\r\n\r\n // get info cache of the user selected\r\n if (cacheUser && cacheUser.UserPictureURL) user.UserPictureURL = cacheUser.UserPictureURL;\r\n setUserSelected(user);\r\n };\r\n\r\n const dataLineChart = useMemo(() => {\r\n const dataT = [];\r\n if (!dataChart?.data) return dataT;\r\n let label = [];\r\n let data = [];\r\n let dataEvaluationTypeName = [];\r\n Array(stateNumYear)\r\n .fill()\r\n .forEach((item, idx) => {\r\n const key = moment().subtract(idx, 'year').format('YYYY');\r\n const value = dataChart.data[key]?.find(item => item.ObjectID === dataDDFilter[key]);\r\n label.push(key);\r\n data.push(value?.Value || 0);\r\n dataEvaluationTypeName.push(value?.EvaluationTypeName || '');\r\n });\r\n return {label, data, dataEvaluationTypeName};\r\n }, [dataChart, dataDDFilter, stateNumYear]);\r\n\r\n const dataDD = useMemo(() => {\r\n const arrYear = [];\r\n let next = 0;\r\n do {\r\n const year = moment().subtract(next, 'year').format('YYYY');\r\n arrYear.push(year);\r\n next++;\r\n } while (next < stateNumYear);\r\n return arrYear;\r\n }, [stateNumYear]);\r\n\r\n const disabled = useMemo(()=>{\r\n return !dataChart || !userSelected;\r\n }, [userSelected, dataChart]);\r\n\r\n const exportPDF = async () => {\r\n setIsExportPDF(true);\r\n };\r\n\r\n const exportExcel = () => {\r\n const {\r\n NumYear = 0,\r\n OrgChartID = [],\r\n DutyGroupID = '',\r\n DutyID = '',\r\n EmployeeID = '',\r\n } = filterSearch;\r\n let param = {\r\n FormID,\r\n NumYear,\r\n EmployeeID,\r\n OrgChartID: OrgChartID || [],\r\n DutyGroupID,\r\n DutyID,\r\n IsESS: isESS,\r\n Stage: `${moment()\r\n .subtract(stateNumYear - 1, 'year')\r\n .format('YYYY')}-${moment().format('YYYY')}`\r\n };\r\n\r\n props.w39F3040Actions.exportExcel(param, (error, data)=>{\r\n if (error) {\r\n Config.popup2.show('ERROR', error);\r\n return false;\r\n }\r\n if(data) {\r\n const a = document.createElement('a');\r\n a.style.display = 'none';\r\n a.href = data.URL;\r\n a.download = data.fileName ? decodeURI(data.fileName) : \"\";\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n }\r\n })\r\n };\r\n\r\n const renderGrid = useMemo(()=>{\r\n return(\r\n \r\n \r\n \r\n }\r\n label={Config.lang('Xuat_excel')}\r\n className={'mgr5'}\r\n disabled={disabled}\r\n viewType={'outlined'}\r\n onClick={exportExcel}\r\n />\r\n \r\n }\r\n label={Config.lang('Xuat_pdf')}\r\n disabled={disabled}\r\n viewType={'outlined'}\r\n loading={!!isExportPDF}\r\n onClick={exportPDF}\r\n />\r\n
\r\n \r\n {renderFilters()}
\r\n \r\n \r\n {renderGrid}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {`${Config.lang('Giai_doan')} ${moment()\r\n .subtract(stateNumYear - 1, 'year')\r\n .format('YYYY')} - ${moment().format('YYYY')}`}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {userSelected?.EmployeeName || '---'}\r\n \r\n \r\n {userSelected?.DutyName || '---'}\r\n \r\n
\r\n
\r\n \r\n onFilter(e?.data)}\r\n expandIcon={}\r\n collapseIcon={}\r\n renderItem={e => }\r\n parentID={'ParentID'}\r\n className={classes.treeView}\r\n valueExpr={'ID'}\r\n />\r\n
\r\n \r\n \r\n \r\n {dataDD?.map(key => {\r\n return (\r\n {\r\n setDataDDFilter({ ...dataDDFilter, [key]: e.value });\r\n }}\r\n />\r\n );\r\n })}\r\n
\r\n\r\n \r\n \r\n {Config.lang('Ket_qua_tong_hop_hang_nam')}\r\n
\r\n {\r\n if (!el || !dataLineChart?.label?.length || sizeChart?.height) return;\r\n detectHeight(el);\r\n }}\r\n >\r\n {renderChart}\r\n \r\n \r\n \r\n \r\n \r\n {popupDetail?.FormID === 'W39F3002' && (\r\n setPopupDetail(null)}>\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {popupDetail?.FormID === 'W39F1011' && (\r\n setPopupDetail(null)}>\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {popupDetail?.FormID === 'W39F3000' && (\r\n setPopupDetail(null)}>\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {popupDetail?.FormID === 'W39F3035' && (\r\n setPopupDetail(null)}>\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nconst TreeViewItem = memo(props => {\r\n const { data, onView, isExportPDF } = props;\r\n let value = '';\r\n let icon = null;\r\n let color = '';\r\n switch (data.Level) {\r\n case 1:\r\n value = data.SummaryDocName;\r\n icon = 'Folder';\r\n color = 'info';\r\n break;\r\n case 2:\r\n value = data.AppraisalDocName;\r\n icon = 'Locate';\r\n color = 'danger';\r\n break;\r\n case 3:\r\n value = data.ObjectiveName;\r\n icon = 'Star';\r\n color = 'warning';\r\n break;\r\n default:\r\n value = data.ObjectiveName;\r\n icon = 'StarOutline';\r\n color = 'success';\r\n }\r\n\r\n const classes = useStyle();\r\n return (\r\n \r\n
\r\n \r\n \r\n {value}\r\n \r\n
\r\n
onView(data)} />\r\n \r\n
filterChange(\"OrgChartID\", e)}\r\n >\r\n filterChange(\"OrgChartID\", e)}\r\n />\r\n \r\n setDisabledCboEmployee(e?.value ?? false)}\r\n style={{ marginBottom: 20 }}\r\n />\r\n filterChange(\"EmployeeID\", e)}\r\n onInput={(e) => {\r\n filterCboEmployees.current.strSearch = e.target.value;\r\n filterCboEmployees.current.skip = 0;\r\n loadCboEmployees(true);\r\n }}\r\n onLoadMore={(e) => {\r\n filterCboEmployees.current.skip = e.skip;\r\n filterCboEmployees.current.limit = e.limit;\r\n loadCboEmployees();\r\n }}\r\n />\r\n \r\n filterChange(\"ResultFrom\", e)}\r\n style={{ width: '100%', marginRight: 10 }}\r\n />\r\n filterChange(\"ResultTo\", e)}\r\n style={{ width: '100%' }}\r\n />\r\n \r\n \r\n getGridData(true)}\r\n />\r\n
\r\n \r\n
\r\n
{EmployeeID}
\r\n
\r\n
\r\n
{renderFilterData()}
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n {\r\n setIsUpdated(true);\r\n }}\r\n elementAttr={{\r\n class: classes.statisticGrid\r\n }}\r\n\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {renderColumn()}\r\n \r\n
\r\n
\r\n
\r\n \r\n {renderColumnStatistic()}\r\n \r\n \r\n