diff --git a/.umirc.ts b/.umirc.ts index 15e5799..a997f8a 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -2,7 +2,7 @@ * @Author: Chengliang 1546584672@qq.com * @Date: 2022-08-04 10:22:55 * @LastEditors: Chengliang 1546584672@qq.com - * @LastEditTime: 2022-12-01 11:53:26 + * @LastEditTime: 2022-12-02 11:42:11 * @FilePath: /org-chart-frant/.umirc.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -26,7 +26,7 @@ export default defineConfig({ proxy: { '/api': { // 标识需要进行转换的请求的url - target: 'http://192.168.1.67:9002', // 服务端域名 / http://localhost:8686 + target: 'http://192.168.0.152:8093/api', // 服务端域名 / http://localhost:8686 changeOrigin: true, // 允许域名进行转换 pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉 }, diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..4844ee6 Binary files /dev/null and b/dist.zip differ diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx index 0df8a85..433eada 100644 --- a/src/components/topBar/index.jsx +++ b/src/components/topBar/index.jsx @@ -9,6 +9,7 @@ import { Col, Dropdown, Menu, + TreeSelect, } from 'antd'; const { Option } = Select; import moment from 'moment'; @@ -21,20 +22,24 @@ export class TopBar extends React.Component { super(props); this.state = { fclasslist: [], - companylist: [], - deptartmentList: [], + companylist: [], //下拉框跟节点 + companyData: [], + departmentData: [], + companyTreeData: [], + deptartmentTreeData: [], requestData: { date: moment(new Date()).format('YYYY-MM-DD'), fclass: '0', root: '0', level: '3', fisvitual: '0', + company: undefined, + department: undefined, }, }; } handleFormChange(payload) { - debugger; let requestData = { ...this.state.requestData, ...payload }; this.setState({ requestData }); } @@ -52,6 +57,119 @@ export class TopBar extends React.Component { this.props.onExport('png'); } + /** + * 分部 + * @param {*} parentId + */ + getCompanyTreeNode = (parentId) => { + let api = + '/api/bs/hrmorganization/jclorgchart/getCompanyTree?company=' + parentId; + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.code == 200) { + let arr = [...this.state.companyTreeData, ...data.data]; + this.setState({ + companyTreeData: arr, + }); + } + }); + }; + + /** + * 部门 + * @param {} parentId + * @returns + */ + getDepartmentTreeNode = (parentId) => { + let api = + '/api/bs/hrmorganization/jclorgchart/getDepartmentTree?department=' + + parentId; + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.code == 200) { + let arr = [...this.state.deptartmentTreeData, ...data.data]; + this.setState({ + deptartmentTreeData: arr, + }); + } + }); + }; + + onCompanyLoadData = (treeNode) => + new Promise((resolve) => { + const { id } = treeNode.props; + setTimeout(() => { + this.getCompanyTreeNode(id); + resolve(); + }, 300); + }); + + onDepartmentLoadData = (treeNode) => + new Promise((resolve) => { + const { id } = treeNode.props; + setTimeout(() => { + this.getDepartmentTreeNode(id); + resolve(); + }, 300); + }); + + onCompanyChange = (value, label, extra) => { + let company = value.length > 0 ? this.paramsUtil(value) : undefined; + let requestData = { + ...this.state.requestData, + company: company, + department: undefined, + }; + this.setState({ + companyData: value, + requestData, + departmentData: [], + deptartmentTreeData: [], + }); + this.getDepartmentTreeList(company); + }; + + onDepartmentChange = (value) => { + let department = value.length > 0 ? this.paramsUtil(value) : undefined; + let requestData = { ...this.state.requestData, department: department }; + this.setState({ departmentData: value, requestData }); + }; + + getCompanyTreeList = () => { + let api = '/api/bs/hrmorganization/jclorgchart/getCompanyTree'; + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.code == 200) { + this.setState({ + companyTreeData: data.data, + }); + } + }); + }; + + getDepartmentTreeList = (company) => { + let api = `/api/bs/hrmorganization/jclorgchart/getDepartmentTree?company=${company}`; + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.code == 200) { + this.setState({ + deptartmentTreeData: data.data, + }); + } + }); + }; + + paramsUtil = (param) => { + let arr = param.map(function (obj, index) { + return obj.value; + }); + return arr.join(','); + }; + componentDidMount() { fetch(this.props.url) .then((res) => res.json()) @@ -61,6 +179,7 @@ export class TopBar extends React.Component { companylist: data.companylist, }); }); + this.getCompanyTreeList(); } menu = ( @@ -80,10 +199,12 @@ export class TopBar extends React.Component { ); render() { + const { companyTreeData, deptartmentTreeData } = this.state; + return (
- + 数据日期： - + 维度： + 分部： + - (option?.children).includes(input) - } - defaultValue="0" - style={{ width: 120 }} - value={this.state.requestData.root} - onChange={(value) => this.handleFormChange({ root: value })} - > - {this.state.companylist.map((item) => ( - - ))} - + allowClear + treeDataSimpleMode + treeCheckable + treeCheckStrictly + style={{ width: '80%' }} + value={this.state.companyData} + dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} + placeholder="请选择分部节点" + onChange={this.onCompanyChange} + loadData={this.onCompanyLoadData} + treeData={companyTreeData} + /> - + + 部门： + + + + + 显示层级：