diff --git a/pc4mobx/organization/apis/officeManage.js b/pc4mobx/organization/apis/officeManage.js new file mode 100644 index 0000000..526549b --- /dev/null +++ b/pc4mobx/organization/apis/officeManage.js @@ -0,0 +1,25 @@ +import { WeaTools } from "ecCom"; + +export const getHasRight = (params) => { + return WeaTools.callApi( + "/api/bs/hrmorganization/postinfo/getHasRight", + "GET", + params + ); +}; + +export const getSearchCondition = (params) => { + return WeaTools.callApi( + "/api/bs/hrmorganization/postinfo/getSearchCondition", + "GET", + params + ); +}; + +export const getPostInfoForm = (params) => { + return WeaTools.callApi( + "/api/bs/hrmorganization/postinfo/getPostInfoForm", + "GET", + params + ); +}; diff --git a/pc4mobx/organization/components/company/companyManage.js b/pc4mobx/organization/components/company/companyManage.js new file mode 100644 index 0000000..1ec93e7 --- /dev/null +++ b/pc4mobx/organization/components/company/companyManage.js @@ -0,0 +1,9 @@ +import React, { Component } from 'react' + +export default class CompanyManage extends Component { + render() { + return ( +
C
+ ) + } +} diff --git a/pc4mobx/organization/components/office/components/Untitled-1.js b/pc4mobx/organization/components/office/components/Untitled-1.js new file mode 100644 index 0000000..0e369d8 --- /dev/null +++ b/pc4mobx/organization/components/office/components/Untitled-1.js @@ -0,0 +1,259 @@ +import React, { Component } from "react"; +import { Tree, Menu } from "antd"; +import { WeaInputSearch } from "ecCom"; +import "../index.less"; + +const TreeNode = Tree.TreeNode; +const treeData = [ + { + title: "0-0", + key: "0-0", + children: [ + { + title: "0-0-0", + key: "0-0-0", + children: [ + { title: "0-0-0-0-88", key: "0-0-0-0" }, + { title: "0-0-0-1", key: "0-0-0-1" }, + { title: "0-0-0-2", key: "0-0-0-2" }, + ], + }, + { + title: "0-0-1", + key: "0-0-1", + children: [ + { title: "0-0-1-0", key: "0-0-1-0" }, + { title: "0-0-1-1", key: "0-0-1-1" }, + { title: "0-0-1-2", key: "0-0-1-2" }, + ], + }, + { + title: "0-0-2", + key: "0-0-2", + }, + ], + }, + { + title: "99", + key: "0-1", + children: [ + { title: "0-1-0-0", key: "0-1-0-0" }, + { title: "9988", key: "0-1-0-1" }, + { title: "0-1-0-2-99988", key: "0-1-0-2" }, + ], + }, + { + title: "0-2", + key: "0-2", + }, +]; + +export default class LeftTree extends Component { + constructor(props) { + super(props); + this.state = { + expandedKeys: [], + treeData: [], + copyTree: [], + copyExpandedKeys: [], + searchValue: "", + rightClickNodeTreeItem: null, + }; + } + componentDidMount() { + let a = this.expandedKeysFun(treeData); //展开key + let cp = JSON.stringify(treeData); //这个是最简单的 深拷贝 + this.setState({ + treeData: treeData, + expandedKeys: a, + copyTree: cp, + copyExpandedKeys: a, + }); + document.addEventListener("click", this.handleClick); + } + componentWillUnmount() { + document.removeEventListener("click", this.handleClick); + } + + handleClick = () => { + this.setState({ rightClickNodeTreeItem: null }); + }; + + onSelect = (node) => { + this.setState({ rightClickNodeTreeItem: null }); + }; + + treeNodeonRightClick = (e) => { + this.setState({ + rightClickNodeTreeItem: { + pageX: e.event.pageX, + pageY: e.event.pageY, + id: e.node.props["data-key"], + categoryName: e.node.props["data-title"], + }, + }); + }; + + arrayTreeFilter = (data, predicate, filterText) => { + const nodes = data; + if (!(nodes && nodes.length)) { + return; + } + const newChildren = []; + for (const node of nodes) { + if (predicate(node, filterText)) { + newChildren.push(node); + node.children = this.arrayTreeFilter( + node.children, + predicate, + filterText + ); + } else { + const subs = this.arrayTreeFilter(node.children, predicate, filterText); + if ((subs && subs.length) || predicate(node, filterText)) { + node.children = subs; + newChildren.push(node); + } + } + } + return newChildren; + }; + + filterFn = (data, filterText) => { + if (!filterText) { + return true; + } + return new RegExp(filterText, "i").test(data.title); + }; + flatTreeFun = (treeData) => { + let arr = []; + const flatTree = (treeData) => { + treeData.map((item, index) => { + arr.push(item); + if (item.children && item.children.length > 0) { + flatTree(item.children); + item.children = []; + } + }); + }; + flatTree(treeData); + return arr; + }; + expandedKeysFun = (treeData) => { + if (treeData && treeData.length == 0) { + return []; + } + let arr = []; + const expandedKeysFn = (treeData) => { + treeData.map((item, index) => { + arr.push(item.key); + if (item.children && item.children.length > 0) { + expandedKeysFn(item.children); + } + }); + }; + expandedKeysFn(treeData); + return arr; + }; + onChange = (value) => { + if (value == "") { + let { copyTree, copyExpandedKeys } = this.state; + this.setState({ + treeData: JSON.parse(copyTree), + expandedKeys: copyExpandedKeys, + }); + } else { + let { copyTree, copyExpandedKeys } = this.state; + let res = this.arrayTreeFilter( + JSON.parse(copyTree), + this.filterFn, + value + ); + let expkey = this.expandedKeysFun(res); + this.setState({ + treeData: res, + expandedKeys: expkey, + }); + } + }; + + onExpand = (expandedKeys) => { + this.setState({ + expandedKeys, + }); + }; + + getNodeTreeRightClickMenu = () => { + const { pageX, pageY } = { ...this.state.rightClickNodeTreeItem }; + const tmpStyle = { + position: "absolute", + left: `${pageX}px`, + top: `${pageY}px`, + }; + const menu = ( + + 新增 + 删除 + + ); + return this.state.rightClickNodeTreeItem == null ? "" : menu; + }; + + renderTreeNode = (data) => { + if (data.length == 0) { + return; + } + let { expandedKeys, searchValue } = this.state; + return data.map((item) => { + const index = item.title.indexOf(searchValue); + const beforeStr = item.title.substr(0, index); + const afterStr = item.title.substr(index + searchValue.length); + const title = + index > -1 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : ( + {item.title} + ); + if (item.children && item.children.length > 0) { + return ( + + {this.renderTreeNode(item.children)} + + ); + } + return ( + + ); + }); + }; + render() { + const { searchValue, expandedKeys } = this.state; + return ( +
+ + + {this.renderTreeNode(treeData)} + + {/* {this.getNodeTreeRightClickMenu()} */} +
+ ); + } +} + diff --git a/pc4mobx/organization/components/office/components/leftTree.js b/pc4mobx/organization/components/office/components/leftTree.js new file mode 100644 index 0000000..a94d491 --- /dev/null +++ b/pc4mobx/organization/components/office/components/leftTree.js @@ -0,0 +1,263 @@ +import React, { Component } from "react"; +import { Input, Tree, Menu } from "antd"; +import { WeaInputSearch } from "ecCom"; +import _ from "lodash"; +import "../index.less"; + +const TreeNode = Tree.TreeNode; +const treeData = [ + { + title: "0-0", + key: "0-0", + children: [ + { + title: "0-0-0", + key: "0-0-0", + children: [ + { title: "0-0-0-0-88", key: "0-0-0-0" }, + { title: "0-0-0-1", key: "0-0-0-1" }, + { title: "0-0-0-2", key: "0-0-0-2" }, + ], + }, + { + title: "0-0-1", + key: "0-0-1", + children: [ + { title: "0-0-1-0", key: "0-0-1-0" }, + { title: "0-0-1-1", key: "0-0-1-1" }, + { title: "0-0-1-2", key: "0-0-1-2" }, + ], + }, + { + title: "0-0-2", + key: "0-0-2", + }, + ], + }, + { + title: "99", + key: "0-1", + children: [ + { title: "0-1-0-0", key: "0-1-0-0" }, + { title: "9988", key: "0-1-0-1" }, + { title: "0-1-0-2-99988", key: "0-1-0-2" }, + ], + }, + { + title: "0-2", + key: "0-2", + }, +]; +class LeftTree extends Component { + constructor(props) { + super(props); + this.state = { + expandedKeys: [], + treeData: [], + copyTree: [], + copyExpandedKeys: [], + searchValue: "", + rightClickNodeTreeItem: null, + }; + } + componentDidMount() { + let cp = JSON.stringify(treeData); + this.setState({ + treeData, + expandedKeys: [], + copyTree: cp, + copyExpandedKeys: [], + }); + document.addEventListener("click", this.handleClick); + } + componentWillUnmount() { + document.removeEventListener("click", this.handleClick); + } + + handleClick = () => { + this.setState({ rightClickNodeTreeItem: null }); + }; + onSelect = (node) => { + this.setState({ + rightClickNodeTreeItem: null, + }); + }; + + treeNodeonRightClick = (e) => { + this.setState({ + rightClickNodeTreeItem: { + pageX: e.event.pageX, + pageY: e.event.pageY, + id: e.node.props["data-key"], + categoryName: e.node.props["data-title"], + }, + }); + }; + + arrayTreeFilter = (data, predicate, filterText) => { + const nodes = data; + if (!(nodes && nodes.length)) { + return; + } + const newChildren = []; + for (const node of nodes) { + if (predicate(node, filterText)) { + newChildren.push(node); + node.children = this.arrayTreeFilter( + node.children, + predicate, + filterText + ); + } else { + const subs = this.arrayTreeFilter(node.children, predicate, filterText); + if ((subs && subs.length) || predicate(node, filterText)) { + node.children = subs; + newChildren.push(node); + } + } + } + return newChildren; + }; + + filterFn = (data, filterText) => { + if (!filterText) { + return true; + } + return new RegExp(filterText, "i").test(data.title); + }; + flatTreeFun = (treeData) => { + let arr = []; + const flatTree = (treeData) => { + treeData.map((item, index) => { + arr.push(item); + if (item.children && item.children.length > 0) { + flatTree(item.children); + item.children = []; + } + }); + }; + flatTree(treeData); + return arr; + }; + expandedKeysFun = (treeData) => { + if (treeData && treeData.length == 0) { + return []; + } + let arr = []; + const expandedKeysFn = (treeData) => { + treeData.map((item, index) => { + arr.push(item.key); + if (item.children && item.children.length > 0) { + expandedKeysFn(item.children); + } + }); + }; + expandedKeysFn(treeData); + return arr; + }; + onChange = (value) => { + if (value == "") { + let { copyTree, copyExpandedKeys } = this.state; + this.setState({ + treeData: JSON.parse(copyTree), + expandedKeys: copyExpandedKeys, + searchValue: value, + }); + } else { + let { copyTree, copyExpandedKeys } = this.state; + let res = this.arrayTreeFilter( + JSON.parse(copyTree), + this.filterFn, + value + ); + let expkey = this.expandedKeysFun(res); + this.setState({ + treeData: res, + expandedKeys: expkey, + searchValue: value, + }); + } + }; + + getNodeTreeRightClickMenu = () => { + const { pageX, pageY } = { ...this.state.rightClickNodeTreeItem }; + const tmpStyle = { + position: "absolute", + left: `${pageX}px`, + top: `${pageY}px`, + }; + const menu = ( + + 新增 + 删除 + + ); + return this.state.rightClickNodeTreeItem == null ? "" : menu; + }; + + renderTreeNode = (data) => { + //生成树结构函数 + if (data.length == 0) { + return; + } + let { expandedKeys, searchValue } = this.state; + return data.map((item) => { + const index = item.title.indexOf(searchValue); + const beforeStr = item.title.substr(0, index); + const afterStr = item.title.substr(index + searchValue.length); + const title = + index > -1 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : ( + {item.title} + ); + if (item.children && item.children.length > 0) { + return ( + + {this.renderTreeNode(item.children)} + + ); + } + return ( + + ); + }); + }; + + onExpand = (expandedKeys) => { + this.setState({ + expandedKeys, + }); + }; + render() { + let { expandedKeys, treeData, searchValue } = this.state; + return ( +
+
+ +
+ + {this.renderTreeNode(treeData)} + + {this.getNodeTreeRightClickMenu()} +
+ ); + } +} +export default LeftTree; diff --git a/pc4mobx/organization/components/office/index.less b/pc4mobx/organization/components/office/index.less new file mode 100644 index 0000000..d39a49d --- /dev/null +++ b/pc4mobx/organization/components/office/index.less @@ -0,0 +1,20 @@ +// office-wapper +.office-wapper { + height: 100%; + + .rightmenu { + border-right: none; + box-shadow: 0 2px 8px rgb(0, 0, 0 /15%); + + .ant-menu-item { + padding: 0 40px; + } + } + + .tree-node { + .ant-tree-node-content-wrapper { + width: 100%; + } + } + +} \ No newline at end of file diff --git a/pc4mobx/organization/components/office/officeManage.js b/pc4mobx/organization/components/office/officeManage.js new file mode 100644 index 0000000..7fccae3 --- /dev/null +++ b/pc4mobx/organization/components/office/officeManage.js @@ -0,0 +1,283 @@ +import React, { Component } from "react"; +import { toJS } from "mobx"; +import { inject, observer } from "mobx-react"; +import { i18n } from "../../public/i18n"; +import LeftTree from "./components/leftTree"; +import NewAndEditDialog from "../NewAndEditDialog"; +import { + WeaTop, + WeaTab, + WeaFormItem, + WeaRightMenu, + WeaLeftRightLayout, +} from "ecCom"; +import { Row, Col, Spin, Modal, Button, message, Switch } from "antd"; +import { WeaSwitch, WeaTableNew } from "comsMobx"; +import "./index.less"; + +@inject("officeManageStore") +@observer +export default class OfficeManage extends Component { + componentDidMount() { + const { officeManageStore } = this.props; + officeManageStore.getHasRight && officeManageStore.getHasRight(); + } + getDropMenuDatas = () => { + const { officeManageStore } = this.props; + const { rightMenu } = officeManageStore; + let menus = []; + toJS(rightMenu).map((item, index) => { + let obj = { + key: item.menuFun, + icon: , + content: item.menuName, + }; + if ( + item.menuFun == "collection" || + item.menuFun == "help" || + item.menuFun == "pageAddress" + ) { + obj.disabled = true; + } + menus.push(obj); + }); + return menus; + }; + + handleMenuClick = (key) => {}; + + getTopMenuBtns = () => { + const { officeManageStore } = this.props; + const { topMenu, tableStore, getPostInfoForm } = officeManageStore; + let btns = []; + topMenu.map((item, i) => { + if (item.menuFun !== "batchDelete") { + btns.push( + + ); + } else { + btns.push( + + ); + } + }); + + return btns; + }; + getPanelComponents = () => { + const { officeManageStore } = this.props; + const { searchCondition, form2, searchConditionLoading } = + officeManageStore; + let arr = []; + let formParams = form2.getFormParams(); + const { isFormInit } = form2; + isFormInit && + searchCondition.map((c) => { + c.items.map((field, index) => { + arr.push( + +
+ + { + + } + +
+ + ); + }); + }); + + if (searchConditionLoading) { + return ( +
+ +
+ ); + } else { + return ( + { + // if (e.keyCode == 13 && e.target.tagName === "INPUT") { + // officeManageStore.getTableInfo(); + // officeManageStore.setPanelStatus(false); + // } + // }} + > + {arr} + + ); + } + }; + getTabBtn = () => { + const { officeManageStore } = this.props; + const { form2, setPanelStatus } = officeManageStore; + + const btn = [ + , + , + , + ]; + + return btn; + }; + onSearchChange = (val) => { + const { officeManageStore } = this.props; + const { form2 } = officeManageStore; + + officeManageStore.setSchemeName(val); + !_.isEmpty(form2.getFormParams()) && officeManageStore.updateFields(val); + }; + + render() { + const { officeManageStore } = this.props; + const { + isPanelShow, + form2, + schemeName, + conditionNum, + tableStore, + nEdialogTitle, + visible, + condition, + form, + dialogLoading, + } = officeManageStore; + return ( +
+ } + onCollapse={(showLeft) => console.log("showLeft:", showLeft)}> + this.handleMenuClick(key)}> + } + iconBgcolor="#217346" + loading={true} + buttons={this.getTopMenuBtns()} + showDropIcon={true} + dropMenuDatas={this.getDropMenuDatas()} + onDropMenuClick={(e) => this.handleMenuClick(e)}> + + officeManageStore.setPanelStatus(bool) + } + hideSearchAd={() => officeManageStore.setPanelStatus(false)} + searchsAd={ + isPanelShow ? this.getPanelComponents() :
+ } + advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20} + hasMask={false} + buttonsAd={this.getTabBtn()} + // onSearch={() => officeManageStore.getSearchCondition()} + onSearchChange={(val) => this.onSearchChange(val)} + /> + {/* this.reRenderColumns(c)} + onOperatesClick={(record, index, operate) => + this.onOperatesClick(record, index, operate) + } + /> */} + + this.handleSave()} + // onCancel={() => rankScheme.setVisible(false)} + /> + + +
+ ); + } +} diff --git a/pc4mobx/organization/stores/companyManage.js b/pc4mobx/organization/stores/companyManage.js new file mode 100644 index 0000000..39b39b6 --- /dev/null +++ b/pc4mobx/organization/stores/companyManage.js @@ -0,0 +1,90 @@ +import { observable, action, toJS } from "mobx"; +import { WeaForm } from "comsMobx"; +import { WeaTableNew } from "comsMobx"; +import { Modal, message } from "antd"; +import { i18n } from "../public/i18n"; + +const { TableStore } = WeaTableNew; + +export class RankSchemeStore { + @observable tableStore = new TableStore(); + @observable topMenu = []; + @observable rightMenu = []; + @observable condition = []; + @observable searchCondition = []; + @observable isEdit = true; + @observable isNew = true; + @observable isPanelShow = false; //高级搜索面板 + @observable form2 = new WeaForm(); + @observable form = new WeaForm(); + @observable form1 = new WeaForm(); + @observable schemeName = ""; + @observable conditionNum = 2; + @observable ids = ""; //选择行id + @observable searchConditionLoading = true; + @observable nEdialogTitle = ""; + @observable visible = false; + @observable dialogLoading = true; + @observable schemeId = ""; + @observable date = ""; + + @action + getHasRight() { + this.topMenu = [ + { + isBatch: "1", + isTop: "1", + menuFun: "new", + menuIcon: "icon-coms-New-Flow", + menuName: "新建", + type: "BTN_Addnew", + }, + { + isBatch: "1", + isTop: "1", + menuFun: "batchDelete", + menuIcon: "icon-coms-Batch-delete", + menuName: "批量删除", + type: "BTN_BatchDelete", + }, + ]; + this.rightMenu = [ + { + isBatch: "0", + isTop: "1", + menuFun: "new", + menuIcon: "icon-coms-New-Flow", + menuName: "新建", + type: "BTN_Addnew", + }, + { + isBatch: "0", + isTop: "0", + menuFun: "log", + menuIcon: "icon-coms-Print-log", + menuName: "日志", + type: "BTN_log", + }, + { + isBatch: "0", + isTop: "0", + menuFun: "custom", + menuIcon: "icon-coms-task-list", + menuName: "显示列定制", + type: "BTN_COLUMN", + }, + ]; + } + + updateFields(val) { + this.form2.updateFields({ + schemeName: { + value: val, + }, + }); + } + + formReset() { + this.form = new WeaForm(); + } +} diff --git a/pc4mobx/organization/stores/index.js b/pc4mobx/organization/stores/index.js index d77503f..001ab0a 100644 --- a/pc4mobx/organization/stores/index.js +++ b/pc4mobx/organization/stores/index.js @@ -1,9 +1,9 @@ - -import { SimpleOrgStore } from './tree/simple_org'; -import {StandardOrgStore} from './tree/standard_org' -import {RankSchemeStore} from './rankscheme'; -import {JobLevelStore} from './joblevel'; -import {JobGradeStore} from './jobgrade' +import { SimpleOrgStore } from "./tree/simple_org"; +import { StandardOrgStore } from "./tree/standard_org"; +import { RankSchemeStore } from "./rankscheme"; +import { JobLevelStore } from "./joblevel"; +import { JobGradeStore } from "./jobgrade"; +import { OfficeManageStore } from "./officeManage"; module.exports = { simpleOrgStore: new SimpleOrgStore(), @@ -11,4 +11,5 @@ module.exports = { rankScheme: new RankSchemeStore(), jobLevel: new JobLevelStore(), jobGrade: new JobGradeStore(), + officeManageStore: new OfficeManageStore(), }; diff --git a/pc4mobx/organization/stores/officeManage.js b/pc4mobx/organization/stores/officeManage.js new file mode 100644 index 0000000..84b5226 --- /dev/null +++ b/pc4mobx/organization/stores/officeManage.js @@ -0,0 +1,119 @@ +import { observable, action, toJS } from "mobx"; +import { WeaForm } from "comsMobx"; +import { WeaTableNew } from "comsMobx"; +import { Modal, message } from "antd"; +import { i18n } from "../public/i18n"; +import * as API from "../apis/officeManage"; +import _ from "lodash"; + +const { TableStore } = WeaTableNew; + +export class OfficeManageStore { + @observable tableStore = new TableStore(); + @observable topMenu = []; //顶部菜单 + @observable rightMenu = []; //右侧更多菜单 + @observable condition = []; + @observable searchCondition = []; + @observable isEdit = true; + @observable isNew = true; + @observable isPanelShow = false; //高级搜索面板 + @observable form2 = new WeaForm(); + @observable form = new WeaForm(); //新增编辑渲染的表单 + @observable form1 = new WeaForm(); + @observable schemeName = ""; + @observable conditionNum = 2; + @observable ids = ""; //选择行id + @observable searchConditionLoading = false; + @observable nEdialogTitle = ""; + @observable visible = false; + @observable dialogLoading = false; + @observable schemeId = ""; + @observable date = ""; + + @action + getHasRight() { + API.getHasRight().then((res) => { + const { code, data, msg } = res; + if (code === 200) { + const { rightMenu, topMenu } = data; + this.topMenu = topMenu; + this.rightMenu = rightMenu; + } else { + message.error(msg); + } + }); + } + + @action("高级搜索表单渲染") + getSearchCondition() { + this.setScLoadingStatus(true); + API.getSearchCondition().then((res) => { + this.setScLoadingStatus(false); + const { code, data, msg } = res; + if (code === 200) { + res.data.conditions && this.setSearchCondition(res.data.conditions); + res.data.conditions && this.form2.initFormFields(res.data.conditions); + } else { + message.error(res.msg); + } + }); + } + + @action("获取新增/编辑表单") + getPostInfoForm(id) { + // this.setDialogLoadingStatus(true); + API.getPostInfoForm({ id }).then((res) => { + // this.setDialogLoadingStatus(false); + const { code, data, msg } = res; + if (code === 200) { + data.condition && this.setCondition(data.condition); + data.condition && this.form.initFormFields(data.condition); + } else { + message.error(res.msg); + } + }); + } + + @action("展开关闭搜索面板") + setPanelStatus(bool) { + this.isPanelShow = bool; + bool && this.getSearchCondition(); + if (!bool) { + this.searchConditionLoading = false; + } + } + + setScLoadingStatus(bool) { + this.searchConditionLoading = bool; + } + + setSearchCondition(condition) { + this.searchCondition = condition; + } + + setVisible(bool) { + this.visible = bool; + this.formReset(); + if (!bool) this.setDialogLoadingStatus(false); + } + + setDialogLoadingStatus(bool) { + this.dialogLoading = bool; + } + + setCondition(condition) { + this.condition = condition; + } + + updateFields(val) { + this.form2.updateFields({ + schemeName: { + value: val, + }, + }); + } + + formReset() { + this.form = new WeaForm(); + } +}