diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..656f68c Binary files /dev/null and b/dist.zip differ diff --git a/src/components/dialog/copyDialog.jsx b/src/components/dialog/copyDialog.jsx index ac89253..de9f8c7 100644 --- a/src/components/dialog/copyDialog.jsx +++ b/src/components/dialog/copyDialog.jsx @@ -10,103 +10,106 @@ import * as d3 from 'd3'; import './index.less'; import { HomeOutlined } from '@ant-design/icons'; import './index.less'; +import { getLabel } from '../../util/i18n.js'; const layout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; -const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => { - const [treeData, setData] = useState([]); - const [form] = Form.useForm(); - const formRef = useRef(null); +const CopyDialog = forwardRef( + ({ open, onCreate, onCancel, labelData }, ref) => { + const [treeData, setData] = useState([]); + const [form] = Form.useForm(); + const formRef = useRef(null); - useImperativeHandle(ref, () => ({ - getTreeData() { - form.resetFields(); - d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then( - (data) => { - data.companyTree.map((item, index) => { - item.icon = ; - }); - setData(data.companyTree); - }, - ); - }, - })); + useImperativeHandle(ref, () => ({ + getTreeData() { + form.resetFields(); + d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then( + (data) => { + data.companyTree.map((item, index) => { + item.icon = ; + }); + setData(data.companyTree); + }, + ); + }, + })); - /** - * 根节点树异步加载 - * @param {} parentId - * @returns - */ - const onRootLoadData = (treeNode) => - new Promise((resolve) => { - const { id } = treeNode.props; - setTimeout(() => { - d3.json( - `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`, - ).then((data) => { - data.companyTree.map((item, index) => { - item.icon = ; + /** + * 根节点树异步加载 + * @param {} parentId + * @returns + */ + const onRootLoadData = (treeNode) => + new Promise((resolve) => { + const { id } = treeNode.props; + setTimeout(() => { + d3.json( + `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`, + ).then((data) => { + data.companyTree.map((item, index) => { + item.icon = ; + }); + let arr = [...treeData, ...data.companyTree]; + setData(arr); }); - let arr = [...treeData, ...data.companyTree]; - setData(arr); - }); - resolve(undefined); - }, 200); - }); + resolve(undefined); + }, 200); + }); - return ( - { - form - .validateFields() - .then((values) => { - onCreate(values); - }) - .catch((info) => { - console.log('Validate Failed:', info); - }); - }} - > -
- - - + return ( + { + form + .validateFields() + .then((values) => { + onCreate(values); + }) + .catch((info) => { + console.log('Validate Failed:', info); + }); + }} + > + + + + - - - - -
- ); -}); + + + + + + ); + }, +); export default CopyDialog; diff --git a/src/components/dialog/mergeDialog.jsx b/src/components/dialog/mergeDialog.jsx index 1cb38e3..438a0b4 100644 --- a/src/components/dialog/mergeDialog.jsx +++ b/src/components/dialog/mergeDialog.jsx @@ -10,114 +10,117 @@ import * as d3 from 'd3'; import './index.less'; import { HomeOutlined, FolderOutlined } from '@ant-design/icons'; import './index.less'; +import { getLabel } from '../../util/i18n.js'; const layout = { labelCol: { span: 6 }, wrapperCol: { span: 14 }, }; -const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => { - const [treeData, setData] = useState([]); - const [form] = Form.useForm(); - const formRef = useRef(null); +const MergeDialog = forwardRef( + ({ open, onCreate, onCancel, labelData }, ref) => { + const [treeData, setData] = useState([]); + const [form] = Form.useForm(); + const formRef = useRef(null); - const [treeLine, setTreeLine] = useState(true); + const [treeLine, setTreeLine] = useState(true); - useImperativeHandle(ref, () => ({ - getTreeData() { - form.resetFields(); - d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then( - (data) => { - data.departmentTree.map((item, index) => { - item.icon = ; - }); - setData(data.departmentTree); - }, - ); - }, - })); - - /** - * 根节点树异步加载 - * @param {} parentId - * @returns - */ - const onRootLoadData = (treeNode) => - new Promise((resolve) => { - const { id } = treeNode.props; - setTimeout(() => { - d3.json( - `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`, - ).then((data) => { - data.departmentTree.map((item, index) => { - if (item.key.indexOf('d') > -1) { - item.icon = ; - } else { + useImperativeHandle(ref, () => ({ + getTreeData() { + form.resetFields(); + d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then( + (data) => { + data.departmentTree.map((item, index) => { item.icon = ; - } - }); - let arr = [...treeData, ...data.departmentTree]; - setData(arr); - }); - resolve(undefined); - }, 200); - }); + }); + setData(data.departmentTree); + }, + ); + }, + })); - return ( - { - form - .validateFields() - .then((values) => { - onCreate(values); - }) - .catch((info) => { - console.log('Validate Failed:', info); + /** + * 根节点树异步加载 + * @param {} parentId + * @returns + */ + const onRootLoadData = (treeNode) => + new Promise((resolve) => { + const { id } = treeNode.props; + setTimeout(() => { + d3.json( + `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`, + ).then((data) => { + data.departmentTree.map((item, index) => { + if (item.key.indexOf('d') > -1) { + item.icon = ; + } else { + item.icon = ; + } + }); + let arr = [...treeData, ...data.departmentTree]; + setData(arr); }); - }} - > -
- - - + resolve(undefined); + }, 200); + }); + + return ( + { + form + .validateFields() + .then((values) => { + onCreate(values); + }) + .catch((info) => { + console.log('Validate Failed:', info); + }); + }} + > + + + + - - - - -
- ); -}); + + + + + + ); + }, +); export default MergeDialog; diff --git a/src/components/drawer/index.jsx b/src/components/drawer/index.jsx index bea0e32..fe287ce 100644 --- a/src/components/drawer/index.jsx +++ b/src/components/drawer/index.jsx @@ -8,6 +8,8 @@ import { Table, Spin, Checkbox, + Row, + Col, } from 'antd'; import { OrgChartComponent } from '@/components/orgChart'; import * as d3 from 'd3'; @@ -16,6 +18,7 @@ import { message } from 'antd'; import jsPDF from 'jspdf'; import ExportJsonExcel from 'js-export-excel'; import './index.less'; +import { getLabel } from '../../util/i18n.js'; let addNodeChildFunc = null; let orgChart = null; @@ -31,14 +34,24 @@ export default class DrawerComponents extends React.Component { dataSource: [], columns: [], spinning: true, - showJob: true, + showJob: false, + defaultTypeValue: ['isBelongTo'], + defaultStatusValue: [0, 1, 2, 3], + disabled: false, }; } componentDidMount() {} // 点击节点 - onNodeClick(node) {} + onNodeClick(node) { + if (node.ftype == '4') { + window.open( + `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${node.id}`, + '_blank', + ); + } + } onButtonClick(event, d) { if (d.children) { @@ -63,7 +76,7 @@ export default class DrawerComponents extends React.Component { //获取数据 getDeatilDatas(params, type = 'chart', showJob = '1') { - this.setState({ spinning: true }); + this.setState({ spinning: true, data: [], dataSource: [] }); d3.json( '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' + qs.stringify({ detauleType: type, ...params, showJob }), @@ -72,7 +85,11 @@ export default class DrawerComponents extends React.Component { if (type == 'chart') { this.setState({ data: data.data, spinning: false }); } else { - this.setState({ dataSource: data.dataSource, columns: data.columns }); + this.setState({ + dataSource: data.dataSource, + columns: data.columns, + spinning: false, + }); } }); } @@ -164,6 +181,7 @@ export default class DrawerComponents extends React.Component { }; handleExport = (e) => { + const { labelData } = this.props; let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel'; if (type == 'png') { orgChart && orgChart.exportImg({ full: true }); @@ -190,30 +208,30 @@ export default class DrawerComponents extends React.Component { } } } - option.fileName = '组织信息'; + option.fileName = `${getLabel(547468, labelData)}`; option.datas = [ { sheetData: dataTable, sheetName: 'sheet', sheetFilter: [ - '序号', - '工号', - '姓名', - '性别', - '部门', - '分部', - '岗位', - '手机号', + `${getLabel(547327, labelData)}`, + `${getLabel(547328, labelData)}`, + `${getLabel(547329, labelData)}`, + `${getLabel(547330, labelData)}`, + `${getLabel(547331, labelData)}`, + `${getLabel(547332, labelData)}`, + `${getLabel(547333, labelData)}`, + `${getLabel(547334, labelData)}`, ], sheetHeader: [ - '序号', - '工号', - '姓名', - '性别', - '部门', - '分部', - '岗位', - '手机号', + `${getLabel(547327, labelData)}`, + `${getLabel(547328, labelData)}`, + `${getLabel(547329, labelData)}`, + `${getLabel(547330, labelData)}`, + `${getLabel(547331, labelData)}`, + `${getLabel(547332, labelData)}`, + `${getLabel(547333, labelData)}`, + `${getLabel(547334, labelData)}`, ], }, ]; @@ -226,6 +244,8 @@ export default class DrawerComponents extends React.Component { * 节点渲染 */ nodeContentRender = (d, i, arr, state) => { + const { labelData } = this.props; + if (d.data.ftype == 2) { return `
@@ -242,12 +262,14 @@ export default class DrawerComponents extends React.Component {
${d.data.fname}
-
- 负责人:${d.data.fleader} +
+ ${getLabel(547190, labelData)}:${d.data.fleader}
- 在岗: ${d.data.fonjob} 人 + ${getLabel(547323, labelData)}: ${ + d.data.fonjob + } ${getLabel(547525, labelData)}
@@ -262,9 +284,13 @@ export default class DrawerComponents extends React.Component {
-
${d.data.fname}
+
${ + d.data.fname + }
- 在岗: ${d.data.fonjob} 人 + ${getLabel(547323, labelData)}: ${ + d.data.fonjob + } ${getLabel(547525, labelData)}
@@ -283,15 +309,19 @@ export default class DrawerComponents extends React.Component { : './img/default_avator.png' }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" /> -
-
-
${ - d.data.fname - }
+
+
+
+ ${d.data.fname} + (${d.data.accountType}) +
-
- 司龄: ${d.data.companyWorkYear} 年 +
+ ${getLabel(547324, labelData)}: ${ + d.data.companyWorkYear + } ${getLabel(547526, labelData)}
+
`; @@ -299,23 +329,76 @@ export default class DrawerComponents extends React.Component { }; showDrawer = (params) => { - const showJob = params.fclass == '0' ? '1' : '0'; - this.getDeatilDatas(params, 'chart', showJob); + const { defaultStatusValue, defaultTypeValue } = this.state; + params = { + ...params, + typeValue: defaultTypeValue.join(','), + statusValue: defaultStatusValue.join(','), + }; + this.getDeatilDatas(params, 'chart', '0'); this.setState({ open: true, params: params }); }; onClose = () => { - this.setState({ open: false, detailType: 'chart', showJob: true }); + this.setState({ + open: false, + detailType: 'chart', + showJob: false, + defaultStatusValue: [0, 1, 2, 3], + defaultTypeValue: ['isBelongTo'], + disabled: false, + }); }; changeDetail = () => { - const { detailType, params } = this.state; + const { detailType, params, defaultTypeValue, defaultStatusValue } = + this.state; + const newParam = { + ...params, + typeValue: defaultTypeValue.join(','), + statusValue: defaultStatusValue.join(','), + }; let type = detailType == 'chart' ? 'table' : 'chart'; const showJob = this.state.showJob ? '1' : '0'; this.setState({ detailType: type, }); - this.getDeatilDatas(params, type, showJob); + this.getDeatilDatas(newParam, type, showJob); + }; + + onStatusChange = (checkedValues) => { + if (checkedValues.length === 0) { + return message.error(`${getLabel(547728, labelData)}`, 2); + } + this.setState({ + defaultStatusValue: checkedValues, + }); + const { defaultTypeValue, params, detailType } = this.state; + const showJob = this.state.showJob ? '1' : '0'; + const nParam = { + ...params, + statusValue: checkedValues.join(','), + typeValue: defaultTypeValue.join(','), + }; + this.getDeatilDatas(nParam, detailType, showJob); + }; + + onTypeChange = (checkedValues) => { + if (this.state.showJob) { + return message.error(`${getLabel(547729, labelData)}`, 2); + } + this.setState({ + defaultTypeValue: checkedValues, + disabled: checkedValues.includes('isManager') ? true : false, + }); + const { defaultStatusValue, params, detailType } = this.state; + const showJob = this.state.showJob ? '1' : '0'; + const nParam = { + ...params, + statusValue: defaultStatusValue.join(','), + typeValue: checkedValues.join(','), + }; + this.getDeatilDatas(nParam, detailType, showJob); }; render() { @@ -328,21 +411,43 @@ export default class DrawerComponents extends React.Component { columns, spinning, showJob, + defaultStatusValue, + defaultTypeValue, + disabled, } = this.state; let arr = []; + + const { labelData } = this.props; + + const optionsType = [ + { label: `${getLabel(547715, labelData)}`, value: 'isManager' }, + { label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' }, + ]; + + const optionsStatus = [ + { label: `${getLabel(547718, labelData)}`, value: 0 }, + { label: `${getLabel(547719, labelData)}`, value: 1 }, + { label: `${getLabel(547720, labelData)}`, value: 2 }, + { label: `${getLabel(547721, labelData)}`, value: 3 }, + { label: `${getLabel(547722, labelData)}`, value: 4 }, + { label: `${getLabel(547723, labelData)}`, value: 5 }, + { label: `${getLabel(547724, labelData)}`, value: 6 }, + { label: `${getLabel(547725, labelData)}`, value: 7 }, + ]; + if (detailType == 'chart') { - arr.push({ label: '导出图片', key: '1' }); + arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' }); //arr.push({ label: '导出PDF', key: '2' }); } else { - arr.push({ label: '导出表格', key: '3' }); + arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' }); } const menu = ; return ( { this.setState({ showJob: e.target.checked, }); - + const newParam = { + ...params, + statusValue: defaultStatusValue.join(','), + typeValue: defaultTypeValue.join(','), + }; this.getDeatilDatas( - params, + newParam, detailType, e.target.checked ? '1' : '0', ); }} > - 是否显示岗位 + {getLabel(547447, labelData)} )} - + - + } > - {detailType == 'chart' ? ( - data.length > 0 && ( - - (orgChart = chart)} - setClick={(click) => (addNodeChildFunc = click)} - onNodeClick={this.onNodeClick} - onButtonClick={this.onButtonClick} - data={data} - buttonContent={this.buttonContentRender} - nodeWidth={this.nodeWidthRender} - nodeHeight={this.nodeHeightRender} - nodeContent={this.nodeContentRender} + <> + {detailType == 'chart' && ( + + {getLabel(547714, labelData)}： + + + + + )} + + {getLabel(547717, labelData)}： + + + + + {detailType == 'chart' ? ( +
+ - - ) - ) : ( -
- `共 ${dataSource.length} 条`, - }} - /> - - )} + {data.length > 0 && ( + (orgChart = chart)} + setClick={(click) => (addNodeChildFunc = click)} + onNodeClick={this.onNodeClick} + onButtonClick={this.onButtonClick} + data={data} + buttonContent={this.buttonContentRender} + nodeWidth={this.nodeWidthRender} + nodeHeight={this.nodeHeightRender} + nodeContent={this.nodeContentRender} + /> + )} + + ) : ( +
+
+ `${getLabel(547523, labelData)} ${ + dataSource.length + } ${getLabel(547524, labelData)}`, + }} + /> + + )} + ); } diff --git a/src/components/drawer/index.less b/src/components/drawer/index.less index e2403ec..e27a063 100644 --- a/src/components/drawer/index.less +++ b/src/components/drawer/index.less @@ -2,3 +2,11 @@ width: 500px; text-align: left; } + +.loading-center { + position: absolute; + top: 50vh; + left: 50%; + margin-left: -8px; + margin-top: -8px; +} diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx index fa3b8d7..586772a 100644 --- a/src/components/topBar/index.jsx +++ b/src/components/topBar/index.jsx @@ -15,6 +15,7 @@ import { Modal, Input, message, + notification, } from 'antd'; const { Option } = Select; const { TextArea } = Input; @@ -23,6 +24,8 @@ import 'moment/locale/zh-cn'; import locale from 'antd/lib/date-picker/locale/zh_CN'; import { HomeOutlined } from '@ant-design/icons'; moment.locale('zh-cn'); +import { getLabel } from '../../util/i18n.js'; +import { SmileOutlined } from '@ant-design/icons'; export class TopBar extends React.Component { constructor(props) { @@ -63,8 +66,9 @@ export class TopBar extends React.Component { */ handleOk = () => { const { description, requestData } = this.state; + const { labelData } = this.props; if (description.length == 0) { - return message.error('请填写描述信息'); + return message.error(`${getLabel(547512, labelData)}`); } this.setState({ confirmLoading: true }); let api = @@ -80,9 +84,9 @@ export class TopBar extends React.Component { open: false, confirmLoading: false, }); - message.success('版本记录成功,请重新刷新页面', 2, 3); + message.success(`${getLabel(547513, labelData)}`, 2, 3); } else { - message.error('版本记录失败,请联系相关人员处理数据', 2, 3); + message.error(`${getLabel(547514, labelData)}`, 2, 3); } }); }; @@ -175,7 +179,7 @@ export class TopBar extends React.Component { onClick={this.handleExportMenuClick.bind(this)} items={[ { - label: '导出图片', + label: `${getLabel(547315, this.props.labelData)}`, key: '1', }, // { @@ -187,14 +191,14 @@ export class TopBar extends React.Component { ); render() { - const { disabled, type } = this.props; + const { disabled, type, labelData } = this.props; const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state; return (
- 维度： + {getLabel(547293, labelData)}： this.handleFormChange({ level: value })} > - - - - + + + + @@ -288,10 +292,10 @@ export class TopBar extends React.Component { }) } > - 显示虚拟组织 + {getLabel(547302, labelData)} @@ -301,16 +305,38 @@ export class TopBar extends React.Component { - + {this.state.requestData.fclass == '0' && ( + + + + {' '} + + )} - - + - + this.setState({ open: false })} > -

- 提示:版本记录耗时较长，请谨慎操作（仅记录当前维度的数据版本） -

-

主题:

+

{getLabel(547316, labelData)}

+

{getLabel(547317, labelData)}: