Compare commits
53 Commits
| Author | SHA1 | Date |
|---|---|---|
 liang.cheng
|
170dfe720a | |
|
Chengliang
|
8e8569110e | |
|
Chengliang
|
dce9480ee9 | |
|
liang.cheng
|
2b8751d7dd | |
|
Chengliang
|
c9005b9a08 | |
|
liang.cheng
|
0bc78d717f | |
|
Chengliang
|
8a59de812a | |
|
Chengliang
|
6bf43c8150 | |
|
liang.cheng
|
0513ad1345 | |
|
Chengliang
|
d2e0da7297 | |
|
Chengliang
|
483c34fc05 | |
|
Chengliang
|
55dbade138 | |
|
Chengliang
|
69dc2b3815 | |
|
Chengliang
|
a99d911db1 | |
|
liang.cheng
|
f825a33bb8 | |
|
Chengliang
|
b2757dfa11 | |
|
liang.cheng
|
68402ffb6e | |
|
Chengliang
|
0d702fe1a3 | |
|
liang.cheng
|
67cfb21f72 | |
|
Chengliang
|
a884e58203 | |
|
liang.cheng
|
2a5628765e | |
|
Chengliang
|
1a676ab4a8 | |
|
Chengliang
|
9f661db803 | |
|
Chengliang
|
e0c1b1c3b5 | |
|
Chengliang
|
c01a806c88 | |
|
liang.cheng
|
32e1b51632 | |
|
Chengliang
|
dd703a05d4 | |
|
Chengliang
|
c018b71f13 | |
|
Chengliang
|
ce6591b351 | |
|
Chengliang
|
662057515c | |
|
Chengliang
|
17e0626e70 | |
|
Chengliang
|
08217b0a69 | |
|
Chengliang
|
5b9788cfc8 | |
|
liang.cheng
|
747a625c1c | |
|
Chengliang
|
12482afb8f | |
|
Chengliang
|
303e8e5e50 | |
|
Chengliang
|
ea3c4a4fee | |
|
liang.cheng
|
038c6fef3c | |
|
Chengliang
|
7747f91160 | |
|
liang.cheng
|
68e26fa992 | |
|
Chengliang
|
63d0f86805 | |
|
Chengliang
|
622ebcbcd7 | |
|
Chengliang
|
5ee9c3c67c | |
|
Chengliang
|
a0d095eec8 | |
|
Chengliang
|
1512a8ba9f | |
|
Chengliang
|
f699fe05cd | |
|
Chengliang
|
dc2e54528a | |
|
Chengliang
|
337a2101cd | |
|
Chengliang
|
065acfb002 | |
|
Chengliang
|
7f706f49a2 | |
|
Chengliang
|
40ca0f4220 | |
|
Chengliang
|
9e89357815 | |
|
Chengliang
|
29ccb98307 |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="Encoding" native2AsciiForPropertiesFiles="true" defaultCharsetForPropertiesFiles="UTF-8" />
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="JavaDoc" enabled="true" level="WARNING" enabled_by_default="true">
|
||||||
|
<option name="TOP_LEVEL_CLASS_OPTIONS">
|
||||||
|
<value>
|
||||||
|
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||||
|
<option name="REQUIRED_TAGS" value="" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="INNER_CLASS_OPTIONS">
|
||||||
|
<value>
|
||||||
|
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||||
|
<option name="REQUIRED_TAGS" value="" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="METHOD_OPTIONS">
|
||||||
|
<value>
|
||||||
|
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||||
|
<option name="REQUIRED_TAGS" value="@return@param@throws or @exception" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="FIELD_OPTIONS">
|
||||||
|
<value>
|
||||||
|
<option name="ACCESS_JAVADOC_REQUIRED_FOR" value="none" />
|
||||||
|
<option name="REQUIRED_TAGS" value="" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="IGNORE_DEPRECATED" value="false" />
|
||||||
|
<option name="IGNORE_JAVADOC_PERIOD" value="true" />
|
||||||
|
<option name="IGNORE_DUPLICATED_THROWS" value="false" />
|
||||||
|
<option name="IGNORE_POINT_TO_ITSELF" value="false" />
|
||||||
|
<option name="myAdditionalJavadocTags" value="date" />
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="JavaScriptSettings">
|
||||||
|
<option name="languageLevel" value="JSX" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectRootManager" version="2" languageLevel="JDK_11" project-jdk-name="10" project-jdk-type="JavaSDK" />
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/org-chart-frant.iml" filepath="$PROJECT_DIR$/.idea/org-chart-frant.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,593 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="449daba1-1dd3-4ffd-906d-6ef641fb81de" name="Default Changelist" comment="">
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/d3-org-chart.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/d3-org-chart.js" afterDir="false" />
|
||||||
|
<change beforePath="$PROJECT_DIR$/src/pages/dragTree.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/dragTree.jsx" afterDir="false" />
|
||||||
|
</list>
|
||||||
|
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="FileEditorManager">
|
||||||
|
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||||
|
<file pinned="false" current-in-tab="true">
|
||||||
|
<entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-146">
|
||||||
|
<folding>
|
||||||
|
<element signature="e#0#49#0" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</file>
|
||||||
|
</leaf>
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||||
|
</component>
|
||||||
|
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
|
||||||
|
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
|
||||||
|
<component name="JsGulpfileManager">
|
||||||
|
<detection-done>true</detection-done>
|
||||||
|
<sorting>DEFINITION_ORDER</sorting>
|
||||||
|
</component>
|
||||||
|
<component name="NodeModulesDirectoryManager">
|
||||||
|
<handled-path value="$PROJECT_DIR$/node_modules" />
|
||||||
|
</component>
|
||||||
|
<component name="NodePackageJsonFileManager">
|
||||||
|
<packageJsonPaths>
|
||||||
|
<path value="$PROJECT_DIR$/package.json" />
|
||||||
|
</packageJsonPaths>
|
||||||
|
</component>
|
||||||
|
<component name="ProjectFrameBounds" fullScreen="true">
|
||||||
|
<option name="x" value="1440" />
|
||||||
|
<option name="width" value="1920" />
|
||||||
|
<option name="height" value="1080" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectInspectionProfilesVisibleTreeState">
|
||||||
|
<entry key="Project Default">
|
||||||
|
<profile-state>
|
||||||
|
<expanded-state>
|
||||||
|
<State />
|
||||||
|
<State>
|
||||||
|
<id>ActionScript specificJavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Android</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Ant</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Batch Applications</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>CFML</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>CSS</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Class structureJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Code quality toolsCSS</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Code quality toolsJavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Code style issuesJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>CoffeeScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>CorrectnessLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Cucumber</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Error handlingJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Faces Model</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Flow type checkerJavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>FreeMarker</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>General</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>GeneralCoffeeScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>GeneralJavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Google Web Toolkit</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>GrailsGroovy</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Groovy</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>HTML</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Hibernate</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>IconsUsabilityLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>ImportsJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Inheritance issuesJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Internationalization</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>InternationalizationJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>InternationalizationLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Invalid elementsCSS</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>J2ME issuesJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>JSON and JSON5</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>JSP</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Java</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Java 8Java language level migration aidsJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Java interop issuesKotlin</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Java language level migration aidsJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>JavaFX</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>JavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>JavadocJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Kotlin</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>LintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>LintLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Manifest</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Markdown</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>MessagesCorrectnessLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Node.jsJavaScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>OSGi</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>OtherGroovy</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Pages Navigation Model</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Plugin DevKit</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>PortabilityJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Potentially confusing code constructsGroovy</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Probable bugsJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Properties Files</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Properties FilesJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>RELAX NG</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>RESTful Web Service</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Resource managementJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>SQL</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Sass/SCSS</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>SecurityLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>SetupSpring CoreSpring</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Spring</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Spring BootSpring</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Spring CoreSpring</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Struts</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Struts 1Struts</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Struts 2Struts</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Style issuesKotlin</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>TestNGJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Threading issuesJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>TypeScript</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>UI Form</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>UsabilityLintAndroid</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Validity issuesGroovy</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Velocity</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Verbose or redundant code constructsJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>VisibilityJava</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Vue</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>Web Services</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>XML</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>XMLSpring CoreSpring</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>XPath</id>
|
||||||
|
</State>
|
||||||
|
<State>
|
||||||
|
<id>YAML</id>
|
||||||
|
</State>
|
||||||
|
</expanded-state>
|
||||||
|
</profile-state>
|
||||||
|
</entry>
|
||||||
|
</component>
|
||||||
|
<component name="ProjectView">
|
||||||
|
<navigator proportions="" version="1">
|
||||||
|
<foldersAlwaysOnTop value="true" />
|
||||||
|
</navigator>
|
||||||
|
<panes>
|
||||||
|
<pane id="ProjectPane">
|
||||||
|
<subPane>
|
||||||
|
<expand>
|
||||||
|
<path>
|
||||||
|
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||||
|
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||||
|
</path>
|
||||||
|
<path>
|
||||||
|
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||||
|
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||||
|
</path>
|
||||||
|
<path>
|
||||||
|
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||||
|
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="components" type="462c0819:PsiDirectoryNode" />
|
||||||
|
</path>
|
||||||
|
<path>
|
||||||
|
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||||
|
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="components" type="462c0819:PsiDirectoryNode" />
|
||||||
|
<item name="dialog" type="462c0819:PsiDirectoryNode" />
|
||||||
|
</path>
|
||||||
|
</expand>
|
||||||
|
<select />
|
||||||
|
</subPane>
|
||||||
|
</pane>
|
||||||
|
<pane id="PackagesPane" />
|
||||||
|
<pane id="Scope" />
|
||||||
|
<pane id="CatdeaLogs" />
|
||||||
|
</panes>
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent">
|
||||||
|
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||||
|
<property name="aspect.path.notification.shown" value="true" />
|
||||||
|
<property name="com.android.tools.idea.instantapp.provision.ProvisionBeforeRunTaskProvider.myTimeStamp" value="1690446615685" />
|
||||||
|
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
|
||||||
|
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
|
||||||
|
<property name="project.structure.last.edited" value="Project" />
|
||||||
|
<property name="project.structure.proportion" value="0.0" />
|
||||||
|
<property name="project.structure.side.proportion" value="0.0" />
|
||||||
|
<property name="settings.editor.selected.configurable" value="preferences.externalDependencies" />
|
||||||
|
</component>
|
||||||
|
<component name="RebelAgentSelection">
|
||||||
|
<selection>jr</selection>
|
||||||
|
</component>
|
||||||
|
<component name="RunDashboard">
|
||||||
|
<option name="ruleStates">
|
||||||
|
<list>
|
||||||
|
<RuleState>
|
||||||
|
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
|
||||||
|
</RuleState>
|
||||||
|
<RuleState>
|
||||||
|
<option name="name" value="StatusDashboardGroupingRule" />
|
||||||
|
</RuleState>
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
<component name="SvnConfiguration">
|
||||||
|
<configuration />
|
||||||
|
</component>
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="449daba1-1dd3-4ffd-906d-6ef641fb81de" name="Default Changelist" comment="" />
|
||||||
|
<created>1689842546961</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1689842546961</updated>
|
||||||
|
<workItem from="1689842557088" duration="205000" />
|
||||||
|
<workItem from="1690192167781" duration="39000" />
|
||||||
|
<workItem from="1690341272941" duration="164000" />
|
||||||
|
<workItem from="1690446551998" duration="218000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TimeTrackingManager">
|
||||||
|
<option name="totallyTimeSpent" value="626000" />
|
||||||
|
</component>
|
||||||
|
<component name="ToolWindowManager">
|
||||||
|
<frame x="1440" y="0" width="1920" height="1080" extended-state="0" />
|
||||||
|
<layout>
|
||||||
|
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.19382322" />
|
||||||
|
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
|
||||||
|
<window_info id="JRebel" order="2" side_tool="true" />
|
||||||
|
<window_info id="Image Layers" order="3" />
|
||||||
|
<window_info id="Capture Tool" order="4" />
|
||||||
|
<window_info id="UI Designer" order="5" />
|
||||||
|
<window_info id="Favorites" order="6" side_tool="true" />
|
||||||
|
<window_info id="Designer" order="7" />
|
||||||
|
<window_info anchor="bottom" id="Message" order="0" />
|
||||||
|
<window_info anchor="bottom" id="Find" order="1" />
|
||||||
|
<window_info anchor="bottom" id="Run" order="2" />
|
||||||
|
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
|
||||||
|
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
|
||||||
|
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
|
||||||
|
<window_info anchor="bottom" id="TODO" order="6" />
|
||||||
|
<window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
|
||||||
|
<window_info anchor="bottom" id="Terminal" order="8" />
|
||||||
|
<window_info anchor="bottom" id="Docker" order="9" show_stripe_button="false" />
|
||||||
|
<window_info anchor="bottom" id="Messages" order="10" />
|
||||||
|
<window_info anchor="bottom" id="Database Changes" order="11" show_stripe_button="false" />
|
||||||
|
<window_info active="true" anchor="bottom" id="Version Control" order="12" visible="true" weight="0.26039603" />
|
||||||
|
<window_info anchor="bottom" id="JRebel Console" order="13" side_tool="true" />
|
||||||
|
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
|
||||||
|
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
|
||||||
|
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
|
||||||
|
<window_info anchor="right" id="Palette" order="3" />
|
||||||
|
<window_info anchor="right" id="Capture Analysis" order="4" />
|
||||||
|
<window_info anchor="right" id="Maven Projects" order="5" />
|
||||||
|
<window_info anchor="right" id="aiXcoder" order="6" />
|
||||||
|
<window_info anchor="right" id="Database" order="7" />
|
||||||
|
<window_info anchor="right" id="Palette	" order="8" />
|
||||||
|
<window_info anchor="right" id="Theme Preview" order="9" />
|
||||||
|
</layout>
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="1" />
|
||||||
|
</component>
|
||||||
|
<component name="Vcs.Log.History.Properties">
|
||||||
|
<option name="COLUMN_ORDER">
|
||||||
|
<list>
|
||||||
|
<option value="0" />
|
||||||
|
<option value="2" />
|
||||||
|
<option value="3" />
|
||||||
|
<option value="1" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
<component name="VcsContentAnnotationSettings">
|
||||||
|
<option name="myLimit" value="2678400000" />
|
||||||
|
</component>
|
||||||
|
<component name="editorHistoryManager">
|
||||||
|
<entry file="file://$PROJECT_DIR$/src/components/dialog/index.jsx">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state>
|
||||||
|
<folding>
|
||||||
|
<element signature="e#0#26#0" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-146">
|
||||||
|
<folding>
|
||||||
|
<element signature="e#0#49#0" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</component>
|
||||||
|
<component name="ideajad">
|
||||||
|
<property name="annotate" value="false" />
|
||||||
|
<property name="annotateFully" value="false" />
|
||||||
|
<property name="braces" value="false" />
|
||||||
|
<property name="clear" value="false" />
|
||||||
|
<property name="confirmNavigationTriggeredDecompile" value="true" />
|
||||||
|
<property name="dead" value="true" />
|
||||||
|
<property name="defaultInitializers" value="false" />
|
||||||
|
<property name="dissassemblerOnly" value="false" />
|
||||||
|
<property name="fieldsFirst" value="true" />
|
||||||
|
<property name="fileExtension" value="java" />
|
||||||
|
<property name="fullyQualifiedNames" value="false" />
|
||||||
|
<property name="indentation" value="4" />
|
||||||
|
<property name="intRadix" value="10" />
|
||||||
|
<property name="lineNumbersAsComments" value="true" />
|
||||||
|
<property name="longRadix" value="10" />
|
||||||
|
<property name="maxStringLength" value="64" />
|
||||||
|
<property name="nocast" value="false" />
|
||||||
|
<property name="noclass" value="false" />
|
||||||
|
<property name="nocode" value="false" />
|
||||||
|
<property name="noconv" value="false" />
|
||||||
|
<property name="noctor" value="false" />
|
||||||
|
<property name="nodos" value="false" />
|
||||||
|
<property name="nofd" value="false" />
|
||||||
|
<property name="noinner" value="false" />
|
||||||
|
<property name="nolvt" value="false" />
|
||||||
|
<property name="nonlb" value="false" />
|
||||||
|
<property name="outputDirectory" value="" />
|
||||||
|
<property name="packFields" value="3" />
|
||||||
|
<property name="packImports" value="7" />
|
||||||
|
<property name="prefixNumericalClasses" value="_cls" />
|
||||||
|
<property name="prefixNumericalFields" value="_fld" />
|
||||||
|
<property name="prefixNumericalLocals" value="_lcl" />
|
||||||
|
<property name="prefixNumericalMethods" value="_mth" />
|
||||||
|
<property name="prefixNumericalParameters" value="_prm" />
|
||||||
|
<property name="prefixUnusedExceptions" value="_ex" />
|
||||||
|
<property name="readonly" value="false" />
|
||||||
|
<property name="safe" value="false" />
|
||||||
|
<property name="sort" value="false" />
|
||||||
|
<property name="spaceAfterKeyword" value="false" />
|
||||||
|
<property name="splitStringsAtNewline" value="false" />
|
||||||
|
<property name="useTabs" value="false" />
|
||||||
|
</component>
|
||||||
|
<component name="masterDetails">
|
||||||
|
<states>
|
||||||
|
<state key="GlobalLibrariesConfigurable.UI">
|
||||||
|
<settings>
|
||||||
|
<last-edited>fastdfs-client-java-1.27-RELEASE</last-edited>
|
||||||
|
<splitter-proportions>
|
||||||
|
<option name="proportions">
|
||||||
|
<list>
|
||||||
|
<option value="0.2" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</splitter-proportions>
|
||||||
|
</settings>
|
||||||
|
</state>
|
||||||
|
<state key="JdkListConfigurable.UI">
|
||||||
|
<settings>
|
||||||
|
<last-edited>10</last-edited>
|
||||||
|
<splitter-proportions>
|
||||||
|
<option name="proportions">
|
||||||
|
<list>
|
||||||
|
<option value="0.2" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</splitter-proportions>
|
||||||
|
</settings>
|
||||||
|
</state>
|
||||||
|
<state key="ProjectJDKs.UI">
|
||||||
|
<settings>
|
||||||
|
<last-edited>1.8</last-edited>
|
||||||
|
<splitter-proportions>
|
||||||
|
<option name="proportions">
|
||||||
|
<list>
|
||||||
|
<option value="0.2" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</splitter-proportions>
|
||||||
|
</settings>
|
||||||
|
</state>
|
||||||
|
<state key="ProjectLibrariesConfigurable.UI">
|
||||||
|
<settings>
|
||||||
|
<splitter-proportions>
|
||||||
|
<option name="proportions">
|
||||||
|
<list>
|
||||||
|
<option value="0.2" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</splitter-proportions>
|
||||||
|
</settings>
|
||||||
|
</state>
|
||||||
|
</states>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
13
.umirc.ts
13
.umirc.ts
|
|
@ -1,11 +1,3 @@
|
||||||
/*
|
|
||||||
* @Author: Chengliang 1546584672@qq.com
|
|
||||||
* @Date: 2022-08-04 10:22:55
|
|
||||||
* @LastEditors: Chengliang 1546584672@qq.com
|
|
||||||
* @LastEditTime: 2022-12-16 11:24:29
|
|
||||||
* @FilePath: /org-chart-frant/.umirc.ts
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
*/
|
|
||||||
import { defineConfig } from 'umi';
|
import { defineConfig } from 'umi';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
|
@ -20,13 +12,16 @@ export default defineConfig({
|
||||||
routes: [
|
routes: [
|
||||||
{ path: '/user', component: '@/pages/user' },
|
{ path: '/user', component: '@/pages/user' },
|
||||||
{ path: '/company', component: '@/pages/company' },
|
{ path: '/company', component: '@/pages/company' },
|
||||||
|
{ path: '/dragtree', component: '@/pages/dragTree' },
|
||||||
|
{ path: '/statistics', component: '@/pages/statisticsTable' },
|
||||||
],
|
],
|
||||||
fastRefresh: {},
|
fastRefresh: {},
|
||||||
antd: {},
|
antd: {},
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
// 标识需要进行转换的请求的url
|
// 标识需要进行转换的请求的url
|
||||||
target: 'http://localhost:8686/api', // 服务端域名 / http://localhost:8686
|
target: 'http://127.0.0.1:8686/api', // 服务端域名
|
||||||
|
//target: 'http://221.226.25.34:11080/api',
|
||||||
changeOrigin: true, // 允许域名进行转换
|
changeOrigin: true, // 允许域名进行转换
|
||||||
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
|
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@
|
||||||
"@types/d3": "^7.4.0",
|
"@types/d3": "^7.4.0",
|
||||||
"d3": "7.4.4",
|
"d3": "7.4.4",
|
||||||
"d3-org-chart": "2.6.0",
|
"d3-org-chart": "2.6.0",
|
||||||
|
"js-export-excel": "^1.1.4",
|
||||||
"jspdf": "^2.5.1",
|
"jspdf": "^2.5.1",
|
||||||
"moment": "^2.29.3",
|
"moment": "^2.29.3",
|
||||||
"qs": "^6.11.0",
|
"qs": "^6.11.0",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -0,0 +1,115 @@
|
||||||
|
import { Form, Input, Modal, TreeSelect, message, Checkbox } from 'antd';
|
||||||
|
import React, {
|
||||||
|
useState,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
forwardRef,
|
||||||
|
useImperativeHandle,
|
||||||
|
} from 'react';
|
||||||
|
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, 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 = <HomeOutlined />;
|
||||||
|
});
|
||||||
|
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 = <HomeOutlined />;
|
||||||
|
});
|
||||||
|
let arr = [...treeData, ...data.companyTree];
|
||||||
|
setData(arr);
|
||||||
|
});
|
||||||
|
resolve(undefined);
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
title={getLabel(547505, labelData)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
onCancel={onCancel}
|
||||||
|
onOk={() => {
|
||||||
|
form
|
||||||
|
.validateFields()
|
||||||
|
.then((values) => {
|
||||||
|
onCreate(values);
|
||||||
|
})
|
||||||
|
.catch((info) => {
|
||||||
|
console.log('Validate Failed:', info);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form ref={formRef} {...layout} form={form} name="form_in_modal">
|
||||||
|
<Form.Item
|
||||||
|
name="company"
|
||||||
|
label={getLabel(547506, labelData)}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `${getLabel(547507, labelData)}`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<TreeSelect
|
||||||
|
className="custom-tree-select"
|
||||||
|
treeDataSimpleMode
|
||||||
|
allowClear
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||||
|
loadData={onRootLoadData}
|
||||||
|
treeData={treeData}
|
||||||
|
treeIcon
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="copySubDept"
|
||||||
|
valuePropName="checked"
|
||||||
|
label={getLabel(547262, labelData)}
|
||||||
|
>
|
||||||
|
<Checkbox />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
export default CopyDialog;
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { TreeSelect, Modal, message } from 'antd';
|
||||||
|
|
||||||
|
export default class OperateDialog extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
treeData: [],
|
||||||
|
open: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
title: '',
|
||||||
|
operateType: '',
|
||||||
|
root: '',
|
||||||
|
type: 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
handleOk = () => {
|
||||||
|
const { type } = this.state;
|
||||||
|
if (type === 1) {
|
||||||
|
this.props.addFolderNode();
|
||||||
|
} else {
|
||||||
|
this.props.deleteNode();
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ open: false });
|
||||||
|
message.success('操作成功');
|
||||||
|
}, 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根节点树数据
|
||||||
|
* @param {} parentId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
getNodeTreeNode = (parentId) => {
|
||||||
|
this.setState({ confirmLoading: true });
|
||||||
|
fetch(`/api/bs/hrmorganization/orgchart/getSubCompanyTree`)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (data.api_status) {
|
||||||
|
let arr = [];
|
||||||
|
arr = [...this.state.treeData, ...data.companyTree];
|
||||||
|
this.setState({
|
||||||
|
treeData: arr,
|
||||||
|
confirmLoading: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根节点树异步加载
|
||||||
|
* @param {} parentId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
onRootLoadData = (treeNode) =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
const { id } = treeNode.props;
|
||||||
|
setTimeout(() => {
|
||||||
|
let api = `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`;
|
||||||
|
this.getNodeTreeNode(api);
|
||||||
|
resolve(undefined);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
showOperate = (id, title, type) => {
|
||||||
|
this.setState({
|
||||||
|
open: true,
|
||||||
|
confirmLoading: true,
|
||||||
|
title: title,
|
||||||
|
type: type,
|
||||||
|
});
|
||||||
|
this.getNodeTreeNode(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
onRootChange = (value) => {
|
||||||
|
this.setState({ root: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { treeData, open, confirmLoading, title } = this.state;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
title={title}
|
||||||
|
cancelText="取消"
|
||||||
|
okText="确定"
|
||||||
|
open={open}
|
||||||
|
onOk={this.handleOk}
|
||||||
|
confirmLoading={confirmLoading}
|
||||||
|
onCancel={() => this.setState({ open: false })}
|
||||||
|
>
|
||||||
|
<TreeSelect
|
||||||
|
treeDataSimpleMode
|
||||||
|
allowClear
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
value={this.state.root}
|
||||||
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||||
|
placeholder="请选择要删除的节点"
|
||||||
|
onChange={this.onRootChange}
|
||||||
|
loadData={this.onRootLoadData}
|
||||||
|
treeData={treeData}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.ant-select-tree
|
||||||
|
.ant-select-tree-treenode-disabled
|
||||||
|
.ant-select-tree-node-content-wrapper {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
import { Form, Input, Modal, TreeSelect, message } from 'antd';
|
||||||
|
import React, {
|
||||||
|
useState,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
forwardRef,
|
||||||
|
useImperativeHandle,
|
||||||
|
} from 'react';
|
||||||
|
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, labelData }, ref) => {
|
||||||
|
const [treeData, setData] = useState([]);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const formRef = useRef(null);
|
||||||
|
|
||||||
|
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 = <HomeOutlined />;
|
||||||
|
});
|
||||||
|
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 = <FolderOutlined />;
|
||||||
|
} else {
|
||||||
|
item.icon = <HomeOutlined />;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let arr = [...treeData, ...data.departmentTree];
|
||||||
|
setData(arr);
|
||||||
|
});
|
||||||
|
resolve(undefined);
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
title={getLabel(547508, labelData)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
onCancel={onCancel}
|
||||||
|
onOk={() => {
|
||||||
|
form
|
||||||
|
.validateFields()
|
||||||
|
.then((values) => {
|
||||||
|
onCreate(values);
|
||||||
|
})
|
||||||
|
.catch((info) => {
|
||||||
|
console.log('Validate Failed:', info);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form ref={formRef} {...layout} form={form} name="form_in_modal">
|
||||||
|
<Form.Item
|
||||||
|
name="department"
|
||||||
|
label={getLabel(547264, labelData)}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `${getLabel(547509, labelData)}`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<TreeSelect
|
||||||
|
className="custom-tree-select"
|
||||||
|
treeDataSimpleMode
|
||||||
|
allowClear
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||||
|
loadData={onRootLoadData}
|
||||||
|
treeData={treeData}
|
||||||
|
treeIcon
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item
|
||||||
|
name="mergeName"
|
||||||
|
label={getLabel(547265, labelData)}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `${getLabel(547510, labelData)}`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
export default MergeDialog;
|
||||||
|
|
@ -0,0 +1,558 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
Space,
|
||||||
|
Button,
|
||||||
|
Dropdown,
|
||||||
|
Menu,
|
||||||
|
Table,
|
||||||
|
Spin,
|
||||||
|
Checkbox,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
} from 'antd';
|
||||||
|
import { OrgChartComponent } from '@/components/orgChart';
|
||||||
|
import * as d3 from 'd3';
|
||||||
|
import qs from 'qs';
|
||||||
|
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;
|
||||||
|
let active = 'top';
|
||||||
|
export default class DrawerComponents extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
open: false,
|
||||||
|
data: [],
|
||||||
|
detailType: 'chart',
|
||||||
|
params: {},
|
||||||
|
dataSource: [],
|
||||||
|
columns: [],
|
||||||
|
spinning: true,
|
||||||
|
showJob: false,
|
||||||
|
defaultTypeValue: ['isBelongTo'],
|
||||||
|
defaultStatusValue: [0, 1, 2, 3],
|
||||||
|
disabled: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
// 点击节点
|
||||||
|
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) {
|
||||||
|
let idsList = [];
|
||||||
|
d.children.forEach((item) => {
|
||||||
|
if (item.data.hasChildren && !item._children) {
|
||||||
|
idsList.push(item.data.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (idsList.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取部门图片
|
||||||
|
getDepartmentImage(fisvitual) {
|
||||||
|
return fisvitual == '0'
|
||||||
|
? `./img/user-card/user-card.png`
|
||||||
|
: `./img/user-card/user-card-blue.png`;
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
getDeatilDatas(params, type = 'chart', showJob = '1') {
|
||||||
|
this.setState({ spinning: true, data: [], dataSource: [] });
|
||||||
|
d3.json(
|
||||||
|
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
|
||||||
|
qs.stringify({ detauleType: type, ...params, showJob }),
|
||||||
|
).then((data) => {
|
||||||
|
//
|
||||||
|
if (type == 'chart') {
|
||||||
|
this.setState({ data: data.data, spinning: false });
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
dataSource: data.dataSource,
|
||||||
|
columns: data.columns,
|
||||||
|
spinning: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ButtonContent渲染
|
||||||
|
buttonContentRender = ({ node, state }) => {
|
||||||
|
return `
|
||||||
|
<div style="margin-left: 16px; margin-top: 10px;">
|
||||||
|
<img src="./img/button_content.png" />
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 节点宽度渲染
|
||||||
|
nodeWidthRender = (d) => {
|
||||||
|
return 280;
|
||||||
|
};
|
||||||
|
|
||||||
|
nodeHeightRender = (d) => {
|
||||||
|
return 160;
|
||||||
|
};
|
||||||
|
|
||||||
|
// tool bar start
|
||||||
|
handleTopLayoutClick = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart &&
|
||||||
|
orgChart
|
||||||
|
.setCentered(orgChart.getChartState().root.id)
|
||||||
|
.layout('top')
|
||||||
|
.render();
|
||||||
|
active = 'top';
|
||||||
|
};
|
||||||
|
|
||||||
|
handleLeftLayoutClick = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart &&
|
||||||
|
orgChart
|
||||||
|
.layout('left')
|
||||||
|
.setCentered(orgChart.getChartState().root.id)
|
||||||
|
.render();
|
||||||
|
active = 'left';
|
||||||
|
};
|
||||||
|
|
||||||
|
handleZoomIn = (progressBtn) => {
|
||||||
|
if (progressBtn) {
|
||||||
|
let top = parseInt(progressBtn.current.style.top) - 10;
|
||||||
|
if (top >= 0) {
|
||||||
|
progressBtn.current.style.top = top + 'px';
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
orgChart && orgChart.zoomIn();
|
||||||
|
};
|
||||||
|
|
||||||
|
handleZoomOut = (progressBtn) => {
|
||||||
|
if (progressBtn) {
|
||||||
|
let top = parseInt(progressBtn.current.style.top) + 10;
|
||||||
|
if (top <= 100) {
|
||||||
|
progressBtn.current.style.top = top + 'px';
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
orgChart && orgChart.zoomOut();
|
||||||
|
};
|
||||||
|
|
||||||
|
downloadPdf = (chart) => {
|
||||||
|
chart.exportImg({
|
||||||
|
save: false,
|
||||||
|
full: true,
|
||||||
|
onLoad: (base64) => {
|
||||||
|
var pdf = new jsPDF();
|
||||||
|
var img = new Image();
|
||||||
|
img.src = base64;
|
||||||
|
img.onload = function () {
|
||||||
|
pdf.addImage(
|
||||||
|
img,
|
||||||
|
'JPEG',
|
||||||
|
5,
|
||||||
|
5,
|
||||||
|
595 / 3,
|
||||||
|
((img.height / img.width) * 595) / 3,
|
||||||
|
);
|
||||||
|
pdf.save('chart.pdf');
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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 });
|
||||||
|
} else if (type == 'pdf') {
|
||||||
|
orgChart && this.downloadPdf(orgChart);
|
||||||
|
} else {
|
||||||
|
let { dataSource } = this.state;
|
||||||
|
var option = {};
|
||||||
|
let dataTable = [];
|
||||||
|
if (dataSource) {
|
||||||
|
for (let i in dataSource) {
|
||||||
|
if (dataSource) {
|
||||||
|
let obj = {
|
||||||
|
序号: dataSource[i].id,
|
||||||
|
工号: dataSource[i].workCode,
|
||||||
|
姓名: dataSource[i].lastName,
|
||||||
|
性别: dataSource[i].sex,
|
||||||
|
部门: dataSource[i].departmentName,
|
||||||
|
分部: dataSource[i].subcompanyName,
|
||||||
|
岗位: dataSource[i].jobTitle,
|
||||||
|
手机号: dataSource[i].mobile,
|
||||||
|
};
|
||||||
|
dataTable.push(obj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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)}`,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var toExcel = new ExportJsonExcel(option);
|
||||||
|
toExcel.saveExcel();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 节点渲染
|
||||||
|
*/
|
||||||
|
nodeContentRender = (d, i, arr, state) => {
|
||||||
|
const { labelData } = this.props;
|
||||||
|
|
||||||
|
if (d.data.ftype == 2) {
|
||||||
|
return `<div style="position: relative;">
|
||||||
|
<div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
|
||||||
|
<div style='position:absolute;z-index:-1;top:0'>
|
||||||
|
<img style='width: 295px;height: 163px;' src="${this.getDepartmentImage(
|
||||||
|
d.data.fisvitual,
|
||||||
|
)}">
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
|
||||||
|
<img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
|
||||||
|
<img src="./img/department.png" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; margin-left: 6px;width: 55%">
|
||||||
|
<div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||||
|
${d.data.fname}
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
|
||||||
|
${getLabel(547190, labelData)}:${d.data.fleader}
|
||||||
|
</div>
|
||||||
|
<div style="display:flex" >
|
||||||
|
<div style="height: 25px; line-height: 25px; min-width: 80px;">
|
||||||
|
${getLabel(547323, labelData)}: ${
|
||||||
|
d.data.fonjob
|
||||||
|
} ${getLabel(547525, labelData)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
} else if (d.data.ftype == 3) {
|
||||||
|
return `<div style="position: relative;">
|
||||||
|
<div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
|
||||||
|
<div style='position:absolute;z-index:-1;top:0'>
|
||||||
|
<img style='width: 295px;height: 163px;' src='./img/user-card/user-card-orange.png'>
|
||||||
|
</div>
|
||||||
|
<img src="./img/user-card/jobicon-orange.png" style="margin-left: 20px; vertical-align: top;"/>
|
||||||
|
<div style="display: inline-block; margin-left: 15px;">
|
||||||
|
<div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${
|
||||||
|
d.data.fname
|
||||||
|
}</div>
|
||||||
|
<div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
|
||||||
|
<span>${getLabel(547323, labelData)}: ${
|
||||||
|
d.data.fonjob
|
||||||
|
} ${getLabel(547525, labelData)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
} else if (d.data.ftype == 4) {
|
||||||
|
return `<div style="position: relative;" >
|
||||||
|
<div style="height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
|
||||||
|
<div style='position:absolute;z-index:-1;top:0px'>
|
||||||
|
<img style='width: 295px;height: 163px;' src='./img/user-card/user-card-green.png'>
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block; background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
|
||||||
|
<img src='./img/user-card/avatar-outer-green.png' style='position:absolute;width:90px;height:90px;left:11px;z-index:-1'/>
|
||||||
|
<img src="${
|
||||||
|
d.data.fleaderimg
|
||||||
|
? d.data.fleaderimg
|
||||||
|
: './img/default_avator.png'
|
||||||
|
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
|
||||||
|
</div>
|
||||||
|
<div style="display: inline-block;width: 55%;height:100%">
|
||||||
|
<div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:2px'>
|
||||||
|
<div style="font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
|
||||||
|
${d.data.fname}
|
||||||
|
<span style='color: red;'>(${d.data.accountType})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 13px;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
|
||||||
|
<span>${getLabel(547324, labelData)}: ${
|
||||||
|
d.data.companyWorkYear
|
||||||
|
} ${getLabel(547526, labelData)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
showDrawer = (params) => {
|
||||||
|
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: false,
|
||||||
|
defaultStatusValue: [0, 1, 2, 3],
|
||||||
|
defaultTypeValue: ['isBelongTo'],
|
||||||
|
disabled: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
changeDetail = () => {
|
||||||
|
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(newParam, type, showJob);
|
||||||
|
};
|
||||||
|
|
||||||
|
onStatusChange = (checkedValues) => {
|
||||||
|
const { labelData } = this.props;
|
||||||
|
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) => {
|
||||||
|
const { labelData } = this.props;
|
||||||
|
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() {
|
||||||
|
const {
|
||||||
|
params,
|
||||||
|
open,
|
||||||
|
data,
|
||||||
|
detailType,
|
||||||
|
dataSource,
|
||||||
|
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: `${getLabel(547315, labelData)}`, key: '1' });
|
||||||
|
//arr.push({ label: '导出PDF', key: '2' });
|
||||||
|
} else {
|
||||||
|
arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
title={getLabel(547321, labelData)}
|
||||||
|
width={1200}
|
||||||
|
onClose={this.onClose}
|
||||||
|
open={open}
|
||||||
|
bodyStyle={{
|
||||||
|
paddingBottom: 80,
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Space>
|
||||||
|
{detailType == 'chart' && params && params.fclass == '0' && (
|
||||||
|
<Checkbox
|
||||||
|
style={{ marginTop: '5px', marginLeft: 100 }}
|
||||||
|
checked={showJob}
|
||||||
|
disabled={disabled}
|
||||||
|
onChange={(e) => {
|
||||||
|
this.setState({
|
||||||
|
showJob: e.target.checked,
|
||||||
|
});
|
||||||
|
const newParam = {
|
||||||
|
...params,
|
||||||
|
statusValue: defaultStatusValue.join(','),
|
||||||
|
typeValue: defaultTypeValue.join(','),
|
||||||
|
};
|
||||||
|
this.getDeatilDatas(
|
||||||
|
newParam,
|
||||||
|
detailType,
|
||||||
|
e.target.checked ? '1' : '0',
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getLabel(547447, labelData)}
|
||||||
|
</Checkbox>
|
||||||
|
)}
|
||||||
|
<Dropdown overlay={menu}>
|
||||||
|
<Button type="primary">{getLabel(547314, labelData)}</Button>
|
||||||
|
</Dropdown>
|
||||||
|
<Button type="primary" onClick={this.changeDetail}>
|
||||||
|
{getLabel(547326, labelData)}
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
{detailType == 'chart' && (
|
||||||
|
<Row style={{ margin: '20px 20px 0px 20px' }}>
|
||||||
|
<Col span={2}>{getLabel(547714, labelData)}：</Col>
|
||||||
|
<Col span={22}>
|
||||||
|
<Checkbox.Group
|
||||||
|
options={optionsType}
|
||||||
|
value={defaultTypeValue}
|
||||||
|
onChange={this.onTypeChange}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
|
<Row style={{ margin: '10px 20px 10px 20px' }}>
|
||||||
|
<Col span={2}>{getLabel(547717, labelData)}：</Col>
|
||||||
|
<Col span={22}>
|
||||||
|
<Checkbox.Group
|
||||||
|
options={optionsStatus}
|
||||||
|
value={defaultStatusValue}
|
||||||
|
onChange={this.onStatusChange}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{detailType == 'chart' ? (
|
||||||
|
<div className="svg-container">
|
||||||
|
<Spin
|
||||||
|
size="large"
|
||||||
|
spinning={spinning}
|
||||||
|
tip={getLabel(547320, labelData)}
|
||||||
|
className="loading-center"
|
||||||
|
/>
|
||||||
|
{data.length > 0 && (
|
||||||
|
<OrgChartComponent
|
||||||
|
setChart={(chart) => (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}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ padding: '0 20px' }}>
|
||||||
|
<Table
|
||||||
|
dataSource={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
loading={spinning}
|
||||||
|
pagination={{
|
||||||
|
showSizeChanger: false,
|
||||||
|
showTotal: (total) =>
|
||||||
|
`${getLabel(547523, labelData)} ${
|
||||||
|
dataSource.length
|
||||||
|
} ${getLabel(547524, labelData)}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
.dept-box:hover {
|
||||||
|
width: 500px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 50vh;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -8px;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,144 @@
|
||||||
|
/*
|
||||||
|
* @Author: Chengliang 1546584672@qq.com
|
||||||
|
* @Date: 2023-06-25 16:33:21
|
||||||
|
* @LastEditors: Chengliang 1546584672@qq.com
|
||||||
|
* @LastEditTime: 2023-09-14 17:48:39
|
||||||
|
* @FilePath: /org-chart-frant/src/components/timeline/index.jsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
import { Timeline, Drawer, Popconfirm, message } from 'antd';
|
||||||
|
import styles from './index.less';
|
||||||
|
import leftTreeShow from './img/leftTree-show.png';
|
||||||
|
import leftHide from './img/leftTree-hide.png';
|
||||||
|
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||||
|
import { getLabel } from '../../util/i18n.js';
|
||||||
|
|
||||||
|
export default class TimeLine extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
timelineList: [],
|
||||||
|
open: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleLineClick(data) {
|
||||||
|
let newList = this.state.timelineList.map((item) => {
|
||||||
|
item.color = 'grey';
|
||||||
|
if (item.key == data.key) {
|
||||||
|
item.color = 'blue';
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
timelineList: newList,
|
||||||
|
});
|
||||||
|
this.props.onClick(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDelete(key) {
|
||||||
|
const { labelData } = this.props;
|
||||||
|
let api = `/api/bs/hrmorganization/orgchart/versionDelete?versionId=${key}`;
|
||||||
|
fetch(api)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (data.api_status) {
|
||||||
|
message.success(`${getLabel(547484, labelData)}`, 2, 3);
|
||||||
|
window.location.reload(true);
|
||||||
|
} else {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`, 2, 3);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.searchTimeLines(this.props.url);
|
||||||
|
}
|
||||||
|
|
||||||
|
searchTimeLines(url) {
|
||||||
|
fetch(url)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
this.setState({
|
||||||
|
timelineList: data.timelineList,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen = () => {
|
||||||
|
this.setState({
|
||||||
|
open: !this.state.open,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { labelData } = this.props;
|
||||||
|
|
||||||
|
let showStyle = {};
|
||||||
|
let positionStyle = {};
|
||||||
|
if (this.state.open) {
|
||||||
|
showStyle = {
|
||||||
|
display: 'block',
|
||||||
|
};
|
||||||
|
positionStyle = {
|
||||||
|
left: '219px',
|
||||||
|
background: `url(${leftTreeShow}) no-repeat -2px 0`,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
showStyle = {
|
||||||
|
display: 'none',
|
||||||
|
};
|
||||||
|
positionStyle = {
|
||||||
|
left: '0',
|
||||||
|
background: `url(${leftHide}) no-repeat -2px 0`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={styles.leftRightLayoutBtn}
|
||||||
|
style={positionStyle}
|
||||||
|
onClick={this.setOpen}
|
||||||
|
></div>
|
||||||
|
<div className={styles.lineWrapper} style={showStyle}>
|
||||||
|
<Timeline>
|
||||||
|
{this.state.timelineList.map((item) => {
|
||||||
|
return (
|
||||||
|
<Timeline.Item
|
||||||
|
key={item.key}
|
||||||
|
className={styles.timeline}
|
||||||
|
color={item.color}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={styles.title}
|
||||||
|
style={{
|
||||||
|
color: item.color == 'blue' ? '#1890ff' : 'dimgray',
|
||||||
|
}}
|
||||||
|
onClick={this.handleLineClick.bind(this, item)}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</div>
|
||||||
|
{item.key != 0 && (
|
||||||
|
<Popconfirm
|
||||||
|
title={`${getLabel(547491, labelData)}[${item.title}]?`}
|
||||||
|
onConfirm={this.handleDelete.bind(this, item.key)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
>
|
||||||
|
<div className={styles.delete}>
|
||||||
|
<CloseCircleOutlined />
|
||||||
|
</div>
|
||||||
|
</Popconfirm>
|
||||||
|
)}
|
||||||
|
<div className={styles.time}>{item.time}</div>
|
||||||
|
</Timeline.Item>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Timeline>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
.lineWrapper {
|
||||||
|
width: 208px;
|
||||||
|
height: calc(~'100% - 200px');
|
||||||
|
overflow-y: scroll;
|
||||||
|
position: fixed;
|
||||||
|
left: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .timeline .title:hover {
|
||||||
|
// color: #1890ff;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: dimgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete :hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftRightLayoutBtn {
|
||||||
|
width: 18px;
|
||||||
|
height: 60px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
// margin-top: -30px;
|
||||||
|
z-index: 101;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftRightLayoutBtn :hover {
|
||||||
|
background-image: url(./img/leftTree-show-hover.png) no-repeat -2px 0 !important;
|
||||||
|
background-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineWrapper::-webkit-scrollbar {
|
||||||
|
/*滚动条整体样式*/
|
||||||
|
width: 10px;
|
||||||
|
/*高宽分别对应横竖滚动条的尺寸*/
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineWrapper::-webkit-scrollbar-thumb {
|
||||||
|
/*滚动条里面小方块*/
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: skyblue;
|
||||||
|
background-image: -webkit-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
rgba(255, 255, 255, 0.2) 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(255, 255, 255, 0.2) 50%,
|
||||||
|
rgba(255, 255, 255, 0.2) 75%,
|
||||||
|
transparent 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lineWrapper::-webkit-scrollbar-track {
|
||||||
|
/*滚动条里面轨道*/
|
||||||
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
background: #ededed;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 210 B |
Binary file not shown.
|
After Width: | Height: | Size: 414 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
Binary file not shown.
|
After Width: | Height: | Size: 452 B |
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
|
|
@ -6,6 +6,12 @@ import top from './img/top.png';
|
||||||
import left from './img/left.png';
|
import left from './img/left.png';
|
||||||
import topActive from './img/top_active.png';
|
import topActive from './img/top_active.png';
|
||||||
import leftActive from './img/left_active.png';
|
import leftActive from './img/left_active.png';
|
||||||
|
import fullscreen from './img/fullscreen.png';
|
||||||
|
import fit from './img/fit.png';
|
||||||
|
import compact from './img/compact.png';
|
||||||
|
import expandAll from './img/expandAll.png';
|
||||||
|
import deleteNode from './img/folder-remove.png';
|
||||||
|
import folderAdd from './img/folder-add.png';
|
||||||
|
|
||||||
export default class ToolBar extends React.Component {
|
export default class ToolBar extends React.Component {
|
||||||
progressBtn = React.createRef();
|
progressBtn = React.createRef();
|
||||||
|
|
@ -97,6 +103,48 @@ export default class ToolBar extends React.Component {
|
||||||
this.props.onLeftLayoutClick(this.progressBtn);
|
this.props.onLeftLayoutClick(this.progressBtn);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
{/* <img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={folderAdd}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onFolderAddNode(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={deleteNode}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onDeleteNode(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/> */}
|
||||||
|
<img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={fullscreen}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onFullscreen(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={fit}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onFit(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={compact}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onCompact(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className={styles.toolBarItem}
|
||||||
|
src={expandAll}
|
||||||
|
onClick={() => {
|
||||||
|
this.props.onExpandAll(this.progressBtn);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,39 @@
|
||||||
.toolbarWrapper {
|
.toolbarWrapper {
|
||||||
width: 68px;
|
width: 68px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.progressWrapper {
|
.progressWrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
.progressLine {
|
.progressLine {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
border-left: 2px solid #C9C9C9;
|
border-left: 2px solid #c9c9c9;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
|
||||||
.progressBtn {
|
|
||||||
width: 16px;
|
|
||||||
height: 9px;
|
|
||||||
background-color: #C9C9C9;
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.toolBarItem {
|
.progressBtn {
|
||||||
display: block;
|
width: 16px;
|
||||||
margin-top: 20px;
|
height: 9px;
|
||||||
margin-bottom: 20px;
|
background-color: #c9c9c9;
|
||||||
margin-left: 20px;
|
position: absolute;
|
||||||
cursor: pointer;
|
left: 5px;
|
||||||
|
top: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.toolBarItem {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 26px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||||
import style from './index.less';
|
import style from './index.less';
|
||||||
import {
|
import {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
|
|
@ -9,38 +10,107 @@ import {
|
||||||
Col,
|
Col,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Menu,
|
Menu,
|
||||||
|
TreeSelect,
|
||||||
|
Tooltip,
|
||||||
|
Modal,
|
||||||
|
Input,
|
||||||
|
message,
|
||||||
|
notification,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
|
const { TextArea } = Input;
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import 'moment/locale/zh-cn';
|
import 'moment/locale/zh-cn';
|
||||||
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
||||||
|
import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
|
||||||
moment.locale('zh-cn');
|
moment.locale('zh-cn');
|
||||||
|
import { getLabel } from '../../util/i18n.js';
|
||||||
|
import { SmileOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
export class TopBar extends React.Component {
|
export class TopBar extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
fclasslist: [],
|
fclasslist: [],
|
||||||
companylist: [],
|
rootTreeData: [], //根节点异步树
|
||||||
|
treeLoadedKeys: [],
|
||||||
|
treeExpandedKeys: [],
|
||||||
requestData: {
|
requestData: {
|
||||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
|
||||||
fclass: '0',
|
fclass: '0',
|
||||||
root: '0',
|
root: undefined,
|
||||||
level: '3',
|
level: '2',
|
||||||
fisvitual: '0',
|
fisvitual: '0',
|
||||||
|
hidedept: '0',
|
||||||
},
|
},
|
||||||
|
open: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
description: '',
|
||||||
|
timelineId: '0',
|
||||||
|
treeKey: 1,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单值改变
|
||||||
|
* @param {*} payload
|
||||||
|
*/
|
||||||
handleFormChange(payload) {
|
handleFormChange(payload) {
|
||||||
let requestData = { ...this.state.requestData, ...payload };
|
let requestData = { ...this.state.requestData, ...payload };
|
||||||
this.setState({ requestData });
|
this.setState({ requestData });
|
||||||
}
|
}
|
||||||
//日期可选择未来
|
|
||||||
// disabledDate (current) {
|
handleTreeData(treeData = [], timelineId) {
|
||||||
// // return current && current >moment().subtract(1, "days");
|
this.setState({
|
||||||
// return current && current > moment().endOf("day");
|
rootTreeData: treeData,
|
||||||
// }
|
timelineId: timelineId,
|
||||||
|
treeKey: this.state.treeKey + 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (e) => {
|
||||||
|
this.setState({ description: e.target.value });
|
||||||
|
};
|
||||||
|
|
||||||
|
generateKey = (
|
||||||
|
length = 5,
|
||||||
|
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||||
|
) => {
|
||||||
|
let result = '';
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹窗确认
|
||||||
|
*/
|
||||||
|
handleOk = () => {
|
||||||
|
const { description, requestData } = this.state;
|
||||||
|
const { labelData } = this.props;
|
||||||
|
if (description.length == 0) {
|
||||||
|
return message.error(`${getLabel(547512, labelData)}`);
|
||||||
|
}
|
||||||
|
this.setState({ confirmLoading: true });
|
||||||
|
let api =
|
||||||
|
'/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
|
||||||
|
requestData.fclass +
|
||||||
|
'&description=' +
|
||||||
|
description;
|
||||||
|
fetch(api)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
if (data.api_status) {
|
||||||
|
this.setState({
|
||||||
|
open: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
});
|
||||||
|
message.success(`${getLabel(547513, labelData)}`, 2, 3);
|
||||||
|
} else {
|
||||||
|
message.error(`${getLabel(547514, labelData)}`, 2, 3);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
handleExportMenuClick(e) {
|
handleExportMenuClick(e) {
|
||||||
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
|
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
|
||||||
|
|
@ -50,104 +120,194 @@ export class TopBar extends React.Component {
|
||||||
this.props.onExport('png');
|
this.props.onExport('png');
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
/**
|
||||||
fetch(this.props.url)
|
* 根节点树数据
|
||||||
|
* @param {} parentId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
getNodeTreeNode = (url, merge = true) => {
|
||||||
|
fetch(url)
|
||||||
.then((res) => res.json())
|
.then((res) => res.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
|
if (data.api_status) {
|
||||||
|
let arr = [];
|
||||||
|
if (merge) {
|
||||||
|
arr = [...this.state.rootTreeData, ...data.companyTree];
|
||||||
|
} else {
|
||||||
|
arr = [...data.companyTree];
|
||||||
|
}
|
||||||
|
arr.map((item, index) => {
|
||||||
|
item.icon = <HomeOutlined />;
|
||||||
|
if (item.type == 2) {
|
||||||
|
item.icon = <FolderOutlined />;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.setState({
|
||||||
|
rootTreeData: arr,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根节点树异步加载
|
||||||
|
* @param {} parentId
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
onRootLoadData = (treeNode) =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
const { id } = treeNode;
|
||||||
|
setTimeout(() => {
|
||||||
|
const { fclass } = this.state.requestData;
|
||||||
|
const { timelineId } = this.state;
|
||||||
|
let api =
|
||||||
|
'/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
|
||||||
|
id +
|
||||||
|
'&fclass=' +
|
||||||
|
fclass +
|
||||||
|
'&id=' +
|
||||||
|
timelineId;
|
||||||
|
this.getNodeTreeNode(api);
|
||||||
|
resolve(undefined);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
onRootChange = (value) => {
|
||||||
|
let requestData = { ...this.state.requestData, root: value };
|
||||||
|
this.setState({ requestData });
|
||||||
|
};
|
||||||
|
|
||||||
|
onTreeExpand = (expandedKeys) => {
|
||||||
|
this.setState({
|
||||||
|
treeExpandedKeys: expandedKeys,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.getSeatchCondition(this.props.url);
|
||||||
|
}
|
||||||
|
|
||||||
|
getSeatchCondition = (url) => {
|
||||||
|
fetch(url)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
data.companyTree.map((item, index) => {
|
||||||
|
item.icon = <HomeOutlined />;
|
||||||
|
});
|
||||||
this.setState({
|
this.setState({
|
||||||
fclasslist: data.fclasslist,
|
fclasslist: data.fclasslist,
|
||||||
companylist: data.companylist,
|
rootTreeData: data.companyTree,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
menu = (
|
menu = (
|
||||||
<Menu
|
<Menu
|
||||||
onClick={this.handleExportMenuClick.bind(this)}
|
onClick={this.handleExportMenuClick.bind(this)}
|
||||||
items={[
|
items={[
|
||||||
{
|
{
|
||||||
label: '导出图片',
|
label: `${getLabel(547315, this.props.labelData)}`,
|
||||||
key: '1',
|
key: '1',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
label: '导出PDF',
|
// label: '导出PDF',
|
||||||
key: '2',
|
// key: '2',
|
||||||
},
|
// },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { disabled } = this.props;
|
const { disabled, type, labelData } = this.props;
|
||||||
|
const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
|
||||||
|
this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={style.topbarWrapper}>
|
<div className={style.topbarWrapper}>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={6}>
|
<Col span={6}>
|
||||||
数据日期：
|
{getLabel(547293, labelData)}：
|
||||||
<DatePicker
|
|
||||||
placeholder="请选择日期"
|
|
||||||
style={{ width: 130 }}
|
|
||||||
locale={locale}
|
|
||||||
allowClear={false}
|
|
||||||
// disabledDate={this.disabledDate}
|
|
||||||
defaultValue={moment(new Date())}
|
|
||||||
value={
|
|
||||||
this.state.requestData.date && this.state.requestData.date != ''
|
|
||||||
? moment(this.state.requestData.date)
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
onChange={(value) =>
|
|
||||||
this.handleFormChange({
|
|
||||||
date: value && value != '' ? value.format('YYYY-MM-DD') : '',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col span={6}>
|
|
||||||
维度：
|
|
||||||
<Select
|
<Select
|
||||||
defaultValue="0"
|
defaultValue="0"
|
||||||
style={{ width: 120 }}
|
style={{ width: 140 }}
|
||||||
value={this.state.requestData.fclass}
|
value={this.state.requestData.fclass}
|
||||||
onChange={(value) => this.handleFormChange({ fclass: value })}
|
onChange={(value) => {
|
||||||
|
const requestData = {
|
||||||
|
fclass: value,
|
||||||
|
root: undefined,
|
||||||
|
level: '2',
|
||||||
|
fisvitual: '0',
|
||||||
|
hidedept: '0',
|
||||||
|
};
|
||||||
|
this.handleFormChange(requestData);
|
||||||
|
this.setState({
|
||||||
|
rootTreeData: [],
|
||||||
|
});
|
||||||
|
this.getNodeTreeNode(
|
||||||
|
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
this.props.changeFclass(requestData);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{this.state.fclasslist.map((item) => (
|
{this.state.fclasslist.map((item) => (
|
||||||
<Option value={item.id}>{item.companyname}</Option>
|
<Option key={item.key} value={item.id}>
|
||||||
|
{item.companyname}
|
||||||
|
</Option>
|
||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
<Col span={6}>
|
<Col span={8}>
|
||||||
根节点：
|
{getLabel(547294, labelData)}：
|
||||||
<Select
|
<TreeSelect
|
||||||
showSearch
|
key={treeKey}
|
||||||
filterOption={(input, option) =>
|
treeDataSimpleMode
|
||||||
(option?.children).includes(input)
|
allowClear
|
||||||
}
|
style={{ width: '65%' }}
|
||||||
defaultValue="0"
|
|
||||||
style={{ width: 120 }}
|
|
||||||
value={this.state.requestData.root}
|
value={this.state.requestData.root}
|
||||||
onChange={(value) => this.handleFormChange({ root: value })}
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||||
>
|
placeholder={getLabel(547298, labelData)}
|
||||||
{this.state.companylist.map((item) => (
|
onChange={this.onRootChange}
|
||||||
<Option value={item.id}>{item.fname}</Option>
|
loadData={this.onRootLoadData}
|
||||||
))}
|
treeData={rootTreeData}
|
||||||
</Select>
|
treeIcon
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
|
<Col span={5}>
|
||||||
<Col span={6}>
|
<Checkbox
|
||||||
显示层级：
|
style={{ marginTop: '5px', marginLeft: 100 }}
|
||||||
|
checked={this.state.requestData.hidedept == '1'}
|
||||||
|
onChange={(e) =>
|
||||||
|
this.handleFormChange({
|
||||||
|
hidedept: e.target.checked ? '1' : '0',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{getLabel(547296, labelData)}
|
||||||
|
</Checkbox>
|
||||||
|
<Tooltip
|
||||||
|
title={getLabel(547303, labelData)}
|
||||||
|
color="#0082fb"
|
||||||
|
placement="rightTop"
|
||||||
|
>
|
||||||
|
<QuestionCircleOutlined
|
||||||
|
style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</Col>
|
||||||
|
<Col span={5}>
|
||||||
|
{getLabel(547299, labelData)}：
|
||||||
<Select
|
<Select
|
||||||
defaultValue="3"
|
defaultValue="3"
|
||||||
style={{ width: 120 }}
|
style={{ width: 140 }}
|
||||||
value={this.state.requestData.level}
|
value={this.state.requestData.level}
|
||||||
onChange={(value) => this.handleFormChange({ level: value })}
|
onChange={(value) => this.handleFormChange({ level: value })}
|
||||||
>
|
>
|
||||||
<Option value="1">一级</Option>
|
<Option value="1">{getLabel(547301, labelData)}</Option>
|
||||||
<Option value="2">二级</Option>
|
<Option value="2">{getLabel(547463, labelData)}</Option>
|
||||||
<Option value="3">三级</Option>
|
<Option value="3">{getLabel(547464, labelData)}</Option>
|
||||||
|
<Option value="4">{getLabel(547465, labelData)}</Option>
|
||||||
</Select>
|
</Select>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
@ -155,26 +315,60 @@ export class TopBar extends React.Component {
|
||||||
<Col span={6}>
|
<Col span={6}>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
style={{ marginTop: '5px' }}
|
style={{ marginTop: '5px' }}
|
||||||
|
checked={this.state.requestData.fisvitual == '1'}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
this.handleFormChange({
|
this.handleFormChange({
|
||||||
fisvitual: e.target.checked ? '1' : '0',
|
fisvitual: e.target.checked ? '1' : '0',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
显示虚拟组织
|
{getLabel(547302, labelData)}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</Col>
|
<Tooltip
|
||||||
<Col span={6}>
|
title={getLabel(547304, labelData)}
|
||||||
<Button
|
color="#0082fb"
|
||||||
type="primary"
|
placement="rightTop"
|
||||||
style={{ marginRight: '10px' }}
|
|
||||||
disabled={disabled}
|
|
||||||
onClick={() => {
|
|
||||||
this.props.onSynchronous(this.state.requestData);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
同步数据
|
<QuestionCircleOutlined
|
||||||
</Button>
|
style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={10}>
|
||||||
|
{this.state.requestData.fclass == '0' && (
|
||||||
|
<span>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginRight: '10px' }}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ open: true });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getLabel(547305, labelData)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginRight: '10px' }}
|
||||||
|
onClick={() => {
|
||||||
|
window.open('#/dragtree', 'blank');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getLabel(547310, labelData)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
style={{ marginRight: '10px' }}
|
||||||
|
onClick={() => {
|
||||||
|
window.open('#/statistics', 'blank');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getLabel(547313, labelData)}
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
style={{ marginRight: '10px' }}
|
style={{ marginRight: '10px' }}
|
||||||
|
|
@ -182,13 +376,33 @@ export class TopBar extends React.Component {
|
||||||
this.props.onSearch(this.state.requestData);
|
this.props.onSearch(this.state.requestData);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
查询
|
{getLabel(547307, labelData)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Dropdown overlay={this.menu}>
|
<Dropdown overlay={this.menu}>
|
||||||
<Button>导出</Button>
|
<Button type="primary">{getLabel(547314, labelData)}</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
<Modal
|
||||||
|
title={getLabel(547305, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
open={open}
|
||||||
|
onOk={this.handleOk}
|
||||||
|
confirmLoading={confirmLoading}
|
||||||
|
onCancel={() => this.setState({ open: false })}
|
||||||
|
>
|
||||||
|
<p style={{ color: 'red' }}>{getLabel(547316, labelData)}</p>
|
||||||
|
<p>{getLabel(547317, labelData)}:</p>
|
||||||
|
<TextArea
|
||||||
|
showCount
|
||||||
|
maxLength={20}
|
||||||
|
style={{ height: 120, resize: 'none' }}
|
||||||
|
onChange={this.onChange}
|
||||||
|
placeholder="please enter"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -231,7 +231,7 @@ export class OrgChart {
|
||||||
nodeLeftX: (node) => -node.width / 2,
|
nodeLeftX: (node) => -node.width / 2,
|
||||||
nodeRightX: (node) => node.width / 2,
|
nodeRightX: (node) => node.width / 2,
|
||||||
nodeTopY: (node) => 0,
|
nodeTopY: (node) => 0,
|
||||||
// "nodeTopY": node => node.height/0.4,
|
//nodeTopY: (node) => node.height / 0.3,
|
||||||
nodeBottomY: (node) => node.height,
|
nodeBottomY: (node) => node.height,
|
||||||
nodeJoinX: (node) => node.x - node.width / 2,
|
nodeJoinX: (node) => node.x - node.width / 2,
|
||||||
nodeJoinY: (node) => node.y + node.height,
|
nodeJoinY: (node) => node.y + node.height,
|
||||||
|
|
@ -480,7 +480,6 @@ export class OrgChart {
|
||||||
//InnerFunctions which will update visuals
|
//InnerFunctions which will update visuals
|
||||||
const attrs = this.getChartState();
|
const attrs = this.getChartState();
|
||||||
if (!attrs.data || attrs.data.length == 0) {
|
if (!attrs.data || attrs.data.length == 0) {
|
||||||
console.log('ORG CHART - Data is empty');
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -510,7 +509,9 @@ export class OrgChart {
|
||||||
// Get zooming function
|
// Get zooming function
|
||||||
behaviors.zoom = d3
|
behaviors.zoom = d3
|
||||||
.zoom()
|
.zoom()
|
||||||
.on('zoom', (event, d) => this.zoomed(event, d))
|
.on('zoom', (event, d) => {
|
||||||
|
this.zoomed(event, d);
|
||||||
|
})
|
||||||
.scaleExtent(attrs.scaleExtent);
|
.scaleExtent(attrs.scaleExtent);
|
||||||
attrs.zoomBehavior = behaviors.zoom;
|
attrs.zoomBehavior = behaviors.zoom;
|
||||||
}
|
}
|
||||||
|
|
@ -637,19 +638,9 @@ export class OrgChart {
|
||||||
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
||||||
)[0];
|
)[0];
|
||||||
if (nodeFound) {
|
if (nodeFound) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - ADD - Node with id "${attrs.nodeId(
|
|
||||||
obj,
|
|
||||||
)}" already exists in tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
if (!parentFound) {
|
if (!parentFound) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
|
|
||||||
obj,
|
|
||||||
)}" not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
if (obj._centered && !obj._expanded) obj._expanded = true;
|
if (obj._centered && !obj._expanded) obj._expanded = true;
|
||||||
|
|
@ -670,19 +661,9 @@ export class OrgChart {
|
||||||
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
({ data }) => attrs.nodeId(data) === attrs.parentNodeId(obj),
|
||||||
)[0];
|
)[0];
|
||||||
if (nodeFound) {
|
if (nodeFound) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - ADD - Node with id "${attrs.nodeId(
|
|
||||||
obj,
|
|
||||||
)}" already exists in tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
if (!parentFound) {
|
if (!parentFound) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - ADD - Parent node with id "${attrs.parentNodeId(
|
|
||||||
obj,
|
|
||||||
)}" not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
obj._expanded = true;
|
obj._expanded = true;
|
||||||
|
|
@ -701,9 +682,6 @@ export class OrgChart {
|
||||||
({ data }) => attrs.nodeId(data) == nodeId,
|
({ data }) => attrs.nodeId(data) == nodeId,
|
||||||
)[0];
|
)[0];
|
||||||
if (!node) {
|
if (!node) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - REMOVE - Node with id "${nodeId}" not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1100,7 +1078,8 @@ export class OrgChart {
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
attrs.onNodeClick(attrs.nodeId(data));
|
//attrs.onNodeClick(attrs.nodeId(data));
|
||||||
|
attrs.onNodeClick(data);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add background rectangle for the nodes
|
// Add background rectangle for the nodes
|
||||||
|
|
@ -1298,7 +1277,6 @@ export class OrgChart {
|
||||||
// } else {
|
// } else {
|
||||||
// this.fit();
|
// this.fit();
|
||||||
// }
|
// }
|
||||||
console.log(44444, centeredNodes);
|
|
||||||
this.fit({
|
this.fit({
|
||||||
animate: true,
|
animate: true,
|
||||||
scale: false,
|
scale: false,
|
||||||
|
|
@ -1622,7 +1600,6 @@ export class OrgChart {
|
||||||
const attrs = this.getChartState();
|
const attrs = this.getChartState();
|
||||||
const { root } = attrs;
|
const { root } = attrs;
|
||||||
let descendants = nodes ? nodes : root.descendants();
|
let descendants = nodes ? nodes : root.descendants();
|
||||||
console.log(11111111111, nodes, descendants, scale);
|
|
||||||
const minX = d3.min(
|
const minX = d3.min(
|
||||||
descendants,
|
descendants,
|
||||||
(d) => d.x + attrs.layoutBindings[attrs.layout].nodeLeftX(d),
|
(d) => d.x + attrs.layoutBindings[attrs.layout].nodeLeftX(d),
|
||||||
|
|
@ -1639,7 +1616,6 @@ export class OrgChart {
|
||||||
descendants,
|
descendants,
|
||||||
(d) => d.y + attrs.layoutBindings[attrs.layout].nodeBottomY(d),
|
(d) => d.y + attrs.layoutBindings[attrs.layout].nodeBottomY(d),
|
||||||
);
|
);
|
||||||
console.log('333,minY', minX, maxX, minY, maxY);
|
|
||||||
this.zoomTreeBounds({
|
this.zoomTreeBounds({
|
||||||
params: { animate: animate, scale },
|
params: { animate: animate, scale },
|
||||||
x0: transform == 'export' ? minX - 700 : minX - 50,
|
x0: transform == 'export' ? minX - 700 : minX - 50,
|
||||||
|
|
@ -1659,11 +1635,6 @@ export class OrgChart {
|
||||||
)[0];
|
)[0];
|
||||||
|
|
||||||
if (!node) {
|
if (!node) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - ${
|
|
||||||
expandedFlag ? 'EXPAND' : 'COLLAPSE'
|
|
||||||
} - Node with id (${id}) not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
node.data._expanded = expandedFlag;
|
node.data._expanded = expandedFlag;
|
||||||
|
|
@ -1677,9 +1648,6 @@ export class OrgChart {
|
||||||
(d) => attrs.nodeId(d.data) === nodeId,
|
(d) => attrs.nodeId(d.data) === nodeId,
|
||||||
)[0];
|
)[0];
|
||||||
if (!node) {
|
if (!node) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - CENTER - Node with id (${nodeId}) not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
node.data._centered = true;
|
node.data._centered = true;
|
||||||
|
|
@ -1693,9 +1661,6 @@ export class OrgChart {
|
||||||
(d) => attrs.nodeId(d.data) === nodeId,
|
(d) => attrs.nodeId(d.data) === nodeId,
|
||||||
)[0];
|
)[0];
|
||||||
if (!node) {
|
if (!node) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - HIGHLIGHT - Node with id (${nodeId}) not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
node.data._highlighted = true;
|
node.data._highlighted = true;
|
||||||
|
|
@ -1710,9 +1675,6 @@ export class OrgChart {
|
||||||
(d) => attrs.nodeId(d.data) === nodeId,
|
(d) => attrs.nodeId(d.data) === nodeId,
|
||||||
)[0];
|
)[0];
|
||||||
if (!node) {
|
if (!node) {
|
||||||
console.log(
|
|
||||||
`ORG CHART - HIGHLIGHTROOT - Node with id (${nodeId}) not found in the tree`,
|
|
||||||
);
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
node.data._upToTheRootHighlighted = true;
|
node.data._upToTheRootHighlighted = true;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return <div>Hello</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +1,61 @@
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
import { OrgChartComponent } from '@/components/orgChart';
|
import { OrgChartComponent } from '@/components/orgChart';
|
||||||
import * as d3 from 'd3';
|
import * as d3 from 'd3';
|
||||||
import { TopBar } from '../components/topBar';
|
import { TopBar } from '../components/topBar';
|
||||||
import ToolBar from '../components/toolBar';
|
import ToolBar from '../components/toolBar';
|
||||||
|
import TimeLine from '../components/timeline';
|
||||||
|
import DrawerComponents from '../components/drawer';
|
||||||
|
import OperateDialog from '../components/dialog';
|
||||||
import jsPDF from 'jspdf';
|
import jsPDF from 'jspdf';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
import { message } from 'antd';
|
import { message, Spin, notification } from 'antd';
|
||||||
|
import { SmileOutlined } from '@ant-design/icons';
|
||||||
|
import { getLabel } from '../util/i18n.js';
|
||||||
|
|
||||||
let active = 'top';
|
let active = 'top';
|
||||||
|
let drawerCom = null;
|
||||||
|
let operateCom = null;
|
||||||
|
let timeLine = null;
|
||||||
|
let orgChart = null;
|
||||||
|
let topbar = null;
|
||||||
|
|
||||||
export default function companyPage() {
|
export default function companyPage() {
|
||||||
const [data, setData] = useState(null);
|
const [data, setData] = useState(null);
|
||||||
|
let compact = 0;
|
||||||
|
let expandAll = 0;
|
||||||
|
|
||||||
const [sliderProgress, setSliderProgress] = useState(50);
|
const [sliderProgress, setSliderProgress] = useState(50);
|
||||||
let addNodeChildFunc = null;
|
let addNodeChildFunc = null;
|
||||||
let orgChart = null;
|
|
||||||
|
|
||||||
let topBarSearchRequest = null;
|
let topBarSearchRequest = null;
|
||||||
const [hasRight, setHasRight] = useState('');
|
const [hasRight, setHasRight] = useState('');
|
||||||
const [disabled, setDisabled] = useState(false);
|
const [timelineId, setTimelineId] = useState(0);
|
||||||
|
const infoRef = useRef();
|
||||||
|
|
||||||
|
const [labelData, setLabelData] = useState({});
|
||||||
|
const [lebelCompleted, setLabelCompleted] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
infoRef.current = timelineId;
|
||||||
|
}, [timelineId]);
|
||||||
|
|
||||||
|
const [spinning, setSpinning] = useState(false);
|
||||||
|
|
||||||
// 点击节点
|
// 点击节点
|
||||||
function onNodeClick(nodeId) {
|
const onNodeClick = (node) => {
|
||||||
// alert('clicked ' + nodeId);
|
if (node.ftype == '2') {
|
||||||
}
|
const params = {
|
||||||
|
rootId: node.id,
|
||||||
|
fclass: topbar.state.requestData.fclass,
|
||||||
|
id: infoRef.current,
|
||||||
|
};
|
||||||
|
drawerCom.showDrawer(params);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 扩展按钮点击
|
// 扩展按钮点击
|
||||||
function onButtonClick(event, d) {
|
const onButtonClick = (event, d) => {
|
||||||
if (d.children) {
|
if (d.children) {
|
||||||
let idsList = [];
|
let idsList = [];
|
||||||
d.children.forEach((item) => {
|
d.children.forEach((item) => {
|
||||||
|
|
@ -40,9 +69,6 @@ export default function companyPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
let idsStr = idsList.join(',');
|
let idsStr = idsList.join(',');
|
||||||
|
|
||||||
console.log('idsStr', idsStr);
|
|
||||||
|
|
||||||
let api = '';
|
let api = '';
|
||||||
if (topBarSearchRequest) {
|
if (topBarSearchRequest) {
|
||||||
let request = { ...topBarSearchRequest, ids: idsStr };
|
let request = { ...topBarSearchRequest, ids: idsStr };
|
||||||
|
|
@ -50,50 +76,58 @@ export default function companyPage() {
|
||||||
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
|
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
|
||||||
qs.stringify(request, { addQueryPrefix: true });
|
qs.stringify(request, { addQueryPrefix: true });
|
||||||
} else {
|
} else {
|
||||||
|
let request = { ...topbar.state.requestData, ids: idsStr };
|
||||||
api =
|
api =
|
||||||
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&root=0&date=' +
|
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
|
||||||
moment(new Date()).format('YYYY-MM-DD') +
|
qs.stringify(request, { addQueryPrefix: true });
|
||||||
'&ids=' +
|
|
||||||
idsStr;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fetch(api)
|
fetch(api)
|
||||||
.then((res) => res.json())
|
.then((res) => res.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.data) {
|
if (data.data) {
|
||||||
data.data.forEach((item) => {
|
data.data.forEach((item) => {
|
||||||
window.chart.addNode(item);
|
// window.chart.addNode(item);
|
||||||
|
orgChart.addNode(item);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 获取部门图片
|
// 获取部门图片
|
||||||
function getDepartmentImage() {
|
function getDepartmentImage(fisvitual) {
|
||||||
let index = Math.floor(Math.random() * 8) + 1;
|
return fisvitual == '0' ? `./img/back/level4.png` : `./img/back/level8.png`;
|
||||||
// return `./img/department/${index}.png`;
|
|
||||||
return `./img/department/1.png`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取部门图片
|
// 获取分部图片
|
||||||
function getSubcompanyImage() {
|
function getSubcompanyImage(fisvitual) {
|
||||||
let index = Math.floor(Math.random() * 3) + 1;
|
return fisvitual == '0' ? `./img/back/level1.png` : `./img/back/level5.png`;
|
||||||
// return `./img/subcompany/${index}.png`;
|
|
||||||
return `./img/subcompany/2.png`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 多语言获取
|
||||||
|
useEffect(() => {
|
||||||
|
d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
|
||||||
|
setLabelData(res.data);
|
||||||
|
setLabelCompleted(true);
|
||||||
|
notification.open({
|
||||||
|
message: `${getLabel(547283, res.data)}`,
|
||||||
|
description: `${getLabel(547292, res.data)}`,
|
||||||
|
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
// 获取数据
|
// 获取数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
d3.json(
|
if (lebelCompleted) {
|
||||||
// "/company/data"
|
d3.json(
|
||||||
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
|
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=2&id=0',
|
||||||
moment(new Date()).format('YYYY-MM-DD'),
|
).then((data) => {
|
||||||
).then((data) => {
|
setData(data.data);
|
||||||
setData(data.data);
|
setHasRight(data?.hasRight);
|
||||||
setHasRight(data?.hasRight);
|
});
|
||||||
});
|
}
|
||||||
}, [true]);
|
}, [lebelCompleted]);
|
||||||
|
|
||||||
// ButtonContent渲染
|
// ButtonContent渲染
|
||||||
const buttonContentRender = ({ node, state }) => {
|
const buttonContentRender = ({ node, state }) => {
|
||||||
|
|
@ -107,9 +141,9 @@ export default function companyPage() {
|
||||||
// 节点宽度渲染
|
// 节点宽度渲染
|
||||||
const nodeWidthRender = (d) => {
|
const nodeWidthRender = (d) => {
|
||||||
if (d.data.ftype == 0) {
|
if (d.data.ftype == 0) {
|
||||||
return 1000;
|
return 220;
|
||||||
} else if (d.data.ftype == 1) {
|
} else if (d.data.ftype == 1) {
|
||||||
return 160;
|
return 144;
|
||||||
} else if (d.data.ftype == 2) {
|
} else if (d.data.ftype == 2) {
|
||||||
return 144;
|
return 144;
|
||||||
}
|
}
|
||||||
|
|
@ -120,28 +154,19 @@ export default function companyPage() {
|
||||||
if (d.data.ftype == 0) {
|
if (d.data.ftype == 0) {
|
||||||
return 100;
|
return 100;
|
||||||
} else if (d.data.ftype == 1) {
|
} else if (d.data.ftype == 1) {
|
||||||
return 160;
|
return 106;
|
||||||
} else if (d.data.ftype == 2) {
|
} else if (d.data.ftype == 2) {
|
||||||
return 56;
|
return 106;
|
||||||
}
|
}
|
||||||
return 120;
|
return 120;
|
||||||
};
|
};
|
||||||
|
|
||||||
const nodeContentRender = (d, i, arr, state) => {
|
const nodeContentRender = (d, i, arr, state) => {
|
||||||
// 集团地址
|
let fclass = topbar.state.requestData.fclass;
|
||||||
let companyUrl =
|
let statisticsStyle = fclass == 0 ? 'block' : 'none';
|
||||||
'/spa/organization/static/index.html#/main/organization/group';
|
|
||||||
// 分部地址
|
|
||||||
let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`;
|
|
||||||
// 部门地址
|
|
||||||
let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`;
|
|
||||||
|
|
||||||
if (d.data.ftype == 0) {
|
if (d.data.ftype == 0) {
|
||||||
return `<div onclick="if(${d.data.fisvitual}==1) return;window.open('${companyUrl}', '_blank')" style="text-align:center">
|
return `<div style="text-align: center;">
|
||||||
<div style="display: inline-block; vertical-align: top;">
|
<div style="display: inline-block; margin-left: 5px;">
|
||||||
<img src="./img/company.png" />
|
|
||||||
</div>
|
|
||||||
<div style="display: inline-block; text-align: center; margin-left: 5px;">
|
|
||||||
<div style="
|
<div style="
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||||||
|
|
@ -154,39 +179,44 @@ export default function companyPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
} else if (d.data.ftype == 1) {
|
} else if (d.data.ftype == 1) {
|
||||||
return `<div onclick="if(${
|
return `<div style='position:absolute;height:100%'>
|
||||||
d.data.fisvitual
|
<img style='width:144px;height:106px' src="${getSubcompanyImage(
|
||||||
}==1) return;window.open('${subcompanyUrl}', '_blank')">
|
d.data.fisvitual,
|
||||||
<div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;display:flex;justify-content:center;align-items:center">
|
)}"/>
|
||||||
<img src="${getSubcompanyImage()}" />
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
|
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
|
||||||
font-size: 14px;
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
|
||||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
<div class="tooltip">
|
||||||
font-weight: 400;
|
<div class="tooltitle"> ${d.data.fname} </div>
|
||||||
color: #333333;
|
<div class="tooltiptext">${d.data.fname}</div>
|
||||||
line-height: 18px;
|
</div>
|
||||||
padding: 15px 10px;
|
|
||||||
">
|
<div style="display: ${statisticsStyle}">
|
||||||
${d.data.fname}
|
<span style="color:red">${d.data.staffNum}</span> /
|
||||||
|
<span style="color:green">${d.data.onJobNum}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>
|
||||||
|
`;
|
||||||
} else if (d.data.ftype == 2) {
|
} else if (d.data.ftype == 2) {
|
||||||
return `
|
return `
|
||||||
<div style="width: 100%; height: 100%; background-size: 100% 100%;" onclick="if(${
|
<div style="width: 100%; height: 100%; background-size: 100% 100%;">
|
||||||
d.data.fisvitual
|
<div style='position:absolute;height:100%'>
|
||||||
}==1) return;window.open('${departmentUrl}')">
|
<img style='width:144px;height:106px' src="${getDepartmentImage(
|
||||||
<div style='position:absolute'>
|
d.data.fisvitual,
|
||||||
<img src='./img/company_job_label.png'/></div>
|
)}"/>
|
||||||
<div style="padding-left: 8px; padding-top: 23px;display:flex;align-items:center">
|
</div>
|
||||||
<img src="${getDepartmentImage()}"/>
|
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
|
||||||
<span style="
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
|
||||||
margin-left: 3px;
|
<div class="tooltip">
|
||||||
font-size: 12px;
|
<div class="tooltitle"> ${d.data.fname} </div>
|
||||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
<div class="tooltiptext">${d.data.fname}</div>
|
||||||
font-weight: 400;
|
</div>
|
||||||
color: #333333;
|
|
||||||
">${d.data.fname}</span>
|
<div style="display: ${statisticsStyle}">
|
||||||
|
<span style="color:red">${d.data.staffNum}</span> /
|
||||||
|
<span style="color:green">${d.data.onJobNum}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
@ -194,7 +224,6 @@ export default function companyPage() {
|
||||||
return `<div>${d.data.fname}</div>`;
|
return `<div>${d.data.fname}</div>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// tool bar start
|
|
||||||
const handleTopLayoutClick = (progressBtn) => {
|
const handleTopLayoutClick = (progressBtn) => {
|
||||||
progressBtn.current.style.top = 50 + 'px';
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
orgChart &&
|
orgChart &&
|
||||||
|
|
@ -215,6 +244,56 @@ export default function companyPage() {
|
||||||
active = 'left';
|
active = 'left';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleFullscreen = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart && orgChart.fullscreen('body');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFit = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart && orgChart.fit();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFolderAddNode = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
operateCom &&
|
||||||
|
operateCom.showOperate(topbar.state.requestData.root, '新增节点', 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addFolderNode = (id) => {
|
||||||
|
orgChart &&
|
||||||
|
orgChart.addNode({
|
||||||
|
id: 'd_10091',
|
||||||
|
fname: '测试增加节点',
|
||||||
|
parentId: 's_10',
|
||||||
|
ftype: '2',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteNode = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
operateCom &&
|
||||||
|
operateCom.showOperate(topbar.state.requestData.root, '删除节点', 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteNode = (id) => {
|
||||||
|
orgChart && orgChart.removeNode('d_10091');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCompact = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart &&
|
||||||
|
orgChart
|
||||||
|
.compact(!!(compact++ % 2))
|
||||||
|
.render()
|
||||||
|
.fit();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExpandAll = (progressBtn) => {
|
||||||
|
progressBtn.current.style.top = 50 + 'px';
|
||||||
|
orgChart && expandAll++ % 2 ? orgChart.collapseAll() : orgChart.expandAll();
|
||||||
|
};
|
||||||
|
|
||||||
const handleZoomIn = (progressBtn) => {
|
const handleZoomIn = (progressBtn) => {
|
||||||
if (progressBtn) {
|
if (progressBtn) {
|
||||||
let top = parseInt(progressBtn.current.style.top) - 10;
|
let top = parseInt(progressBtn.current.style.top) - 10;
|
||||||
|
|
@ -243,10 +322,6 @@ export default function companyPage() {
|
||||||
orgChart && orgChart.zoomBehavior(value - 50);
|
orgChart && orgChart.zoomBehavior(value - 50);
|
||||||
};
|
};
|
||||||
|
|
||||||
// tool bar end
|
|
||||||
|
|
||||||
// top bar start
|
|
||||||
|
|
||||||
function downloadPdf(chart) {
|
function downloadPdf(chart) {
|
||||||
chart.exportImg({
|
chart.exportImg({
|
||||||
save: false,
|
save: false,
|
||||||
|
|
@ -270,15 +345,55 @@ export default function companyPage() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出
|
||||||
|
* @param {*} type
|
||||||
|
*/
|
||||||
const handleExport = (type) => {
|
const handleExport = (type) => {
|
||||||
if (type == 'png') {
|
if (type == 'png') {
|
||||||
|
const hiddenElements = document.querySelectorAll('.tooltitle');
|
||||||
|
const hiddenElementsArray = Array.from(hiddenElements);
|
||||||
|
// 从 DOM 中移除隐藏内容
|
||||||
|
hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
|
||||||
orgChart && orgChart.exportImg({ full: true });
|
orgChart && orgChart.exportImg({ full: true });
|
||||||
} else {
|
} else {
|
||||||
orgChart && downloadPdf(orgChart);
|
orgChart && downloadPdf(orgChart);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearch = (requestData) => {
|
/**
|
||||||
|
* 时间轴点击
|
||||||
|
* @param {*} timeline
|
||||||
|
*/
|
||||||
|
const timeLineSearch = (timeline) => {
|
||||||
|
setTimelineId(timeline.id);
|
||||||
|
const fclass = topbar.state.requestData.fclass;
|
||||||
|
const resetParams = {
|
||||||
|
root: undefined,
|
||||||
|
level: '2',
|
||||||
|
fisvitual: '0',
|
||||||
|
hidedept: '0',
|
||||||
|
};
|
||||||
|
topbar.handleFormChange({ ...resetParams });
|
||||||
|
//根节点初始化
|
||||||
|
topbar.handleTreeData([], timeline.id);
|
||||||
|
topbar.getNodeTreeNode(
|
||||||
|
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
let requestData = { fclass: fclass, id: timeline.id, ...resetParams };
|
||||||
|
handleSearch(requestData, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询
|
||||||
|
* @param {*} requestData
|
||||||
|
*/
|
||||||
|
const handleSearch = (requestData, cache = true) => {
|
||||||
|
setSpinning(true);
|
||||||
|
if (cache) {
|
||||||
|
requestData = { ...requestData, id: infoRef.current };
|
||||||
|
}
|
||||||
topBarSearchRequest = requestData;
|
topBarSearchRequest = requestData;
|
||||||
let api =
|
let api =
|
||||||
'/api/bs/hrmorganization/orgchart/companyData' +
|
'/api/bs/hrmorganization/orgchart/companyData' +
|
||||||
|
|
@ -289,32 +404,31 @@ export default function companyPage() {
|
||||||
if (data.data) {
|
if (data.data) {
|
||||||
if (!data.data.length) {
|
if (!data.data.length) {
|
||||||
setData([{}]);
|
setData([{}]);
|
||||||
message.warning('暂无数据');
|
message.warning(`${getLabel(547516, labelData)}`);
|
||||||
} else {
|
} else {
|
||||||
setData(data?.data);
|
setData(data?.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
setSpinning(false);
|
||||||
|
}, 200);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSynchronous = (requestData) => {
|
/**
|
||||||
setDisabled(true);
|
* 切换维度
|
||||||
let api = '/api/bs/hrmorganization/orgchart/synchronousData';
|
* @param {*} requestData
|
||||||
fetch(api)
|
*/
|
||||||
.then((res) => res.json())
|
const handleChange = (requestData) => {
|
||||||
.then((data) => {
|
setTimelineId(0);
|
||||||
if (data.code == 200) {
|
timeLine.searchTimeLines(
|
||||||
message.success('同步成功,请重新查询');
|
`/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
|
||||||
} else {
|
);
|
||||||
message.error('数据同步失败');
|
requestData = { ...requestData, id: 0 };
|
||||||
}
|
handleSearch(requestData, false);
|
||||||
setDisabled(false);
|
|
||||||
//this.handleSearch(requestData);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('data', data);
|
|
||||||
if (active == 'left') {
|
if (active == 'left') {
|
||||||
orgChart &&
|
orgChart &&
|
||||||
orgChart
|
orgChart
|
||||||
|
|
@ -329,56 +443,80 @@ export default function companyPage() {
|
||||||
.render();
|
.render();
|
||||||
}
|
}
|
||||||
}, [data]);
|
}, [data]);
|
||||||
// top bar end
|
|
||||||
if (hasRight === false) {
|
if (hasRight === false) {
|
||||||
//return message.error("对不起，您暂时没有权限", 2);
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
|
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
|
||||||
<img
|
<img
|
||||||
style={{ display: 'block', margin: '0 auto' }}
|
style={{ display: 'block', margin: '0 auto' }}
|
||||||
src="./img/permission.png"
|
src="./img/permission.png"
|
||||||
/>
|
/>
|
||||||
<p style={{ textAlign: 'center' }}>对不起，您暂时没有权限!</p>
|
<p style={{ textAlign: 'center' }}>{getLabel(547515, labelData)}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
hasRight && (
|
hasRight &&
|
||||||
|
Object.keys(labelData).length != 0 && (
|
||||||
<div className={styles.contentWrapper}>
|
<div className={styles.contentWrapper}>
|
||||||
<TopBar
|
<TopBar
|
||||||
|
ref={(r) => (topbar = r)}
|
||||||
onExport={(type) => {
|
onExport={(type) => {
|
||||||
handleExport(type);
|
handleExport(type);
|
||||||
}}
|
}}
|
||||||
onSearch={(requestData) => {
|
onSearch={(requestData) => {
|
||||||
handleSearch(requestData);
|
handleSearch(requestData);
|
||||||
}}
|
}}
|
||||||
onSynchronous={(requestData) => {
|
changeFclass={(requestData) => {
|
||||||
handleSynchronous(requestData);
|
handleChange(requestData);
|
||||||
}}
|
}}
|
||||||
disabled={disabled}
|
|
||||||
type="company"
|
type="company"
|
||||||
url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
|
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company&id=0"
|
||||||
|
labelData={labelData}
|
||||||
/>
|
/>
|
||||||
<ToolBar
|
<ToolBar
|
||||||
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
||||||
onLeftLayoutClick={(progressBtn) =>
|
onLeftLayoutClick={(progressBtn) =>
|
||||||
handleLeftLayoutClick(progressBtn)
|
handleLeftLayoutClick(progressBtn)
|
||||||
}
|
}
|
||||||
|
onFullscreen={(progressBtn) => handleFullscreen(progressBtn)}
|
||||||
|
onFit={(progressBtn) => handleFit(progressBtn)}
|
||||||
|
onFolderAddNode={(progressBtn) => handleFolderAddNode(progressBtn)}
|
||||||
|
onDeleteNode={(progressBtn) => handleDeleteNode(progressBtn)}
|
||||||
|
onCompact={(progressBtn) => handleCompact(progressBtn)}
|
||||||
|
onExpandAll={(progressBtn) => handleExpandAll(progressBtn)}
|
||||||
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
|
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
|
||||||
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
|
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
|
||||||
onZoomBehavior={(value) => handleZoomBehavior(value)}
|
onZoomBehavior={(value) => handleZoomBehavior(value)}
|
||||||
/>
|
/>
|
||||||
<OrgChartComponent
|
<TimeLine
|
||||||
setChart={(chart) => (orgChart = chart)}
|
ref={(r) => (timeLine = r)}
|
||||||
setClick={(click) => (addNodeChildFunc = click)}
|
onClick={(timeline) => {
|
||||||
onNodeClick={onNodeClick}
|
timeLineSearch(timeline);
|
||||||
data={data}
|
}}
|
||||||
onButtonClick={onButtonClick}
|
url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
|
||||||
buttonContent={buttonContentRender}
|
labelData={labelData}
|
||||||
nodeWidth={nodeWidthRender}
|
/>
|
||||||
nodeHeight={nodeHeightRender}
|
<Spin size="large" spinning={spinning}>
|
||||||
nodeContent={nodeContentRender}
|
<OrgChartComponent
|
||||||
|
setChart={(chart) => (orgChart = chart)}
|
||||||
|
setClick={(click) => (addNodeChildFunc = click)}
|
||||||
|
onNodeClick={onNodeClick}
|
||||||
|
data={data}
|
||||||
|
onButtonClick={onButtonClick}
|
||||||
|
buttonContent={buttonContentRender}
|
||||||
|
nodeWidth={nodeWidthRender}
|
||||||
|
nodeHeight={nodeHeightRender}
|
||||||
|
nodeContent={nodeContentRender}
|
||||||
|
/>
|
||||||
|
</Spin>
|
||||||
|
<DrawerComponents ref={(r) => (drawerCom = r)} labelData={labelData} />
|
||||||
|
<OperateDialog
|
||||||
|
ref={(r) => (operateCom = r)}
|
||||||
|
addFolderNode={addFolderNode}
|
||||||
|
deleteNode={deleteNode}
|
||||||
|
labelData={labelData}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,496 @@
|
||||||
|
import { Tree, message, Modal, Popconfirm, Spin, Layout, Drawer } from 'antd';
|
||||||
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
|
import * as d3 from 'd3';
|
||||||
|
import qs from 'qs';
|
||||||
|
import MergeDialog from '../components/dialog/mergeDialog';
|
||||||
|
import CopyDialog from '../components/dialog/copyDialog';
|
||||||
|
import inset from '../../public/img/back/inset.png';
|
||||||
|
import { getLabel } from '../util/i18n.js';
|
||||||
|
|
||||||
|
import {
|
||||||
|
HomeOutlined,
|
||||||
|
FolderOutlined,
|
||||||
|
ClusterOutlined,
|
||||||
|
ApartmentOutlined,
|
||||||
|
QuestionCircleOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
const { Header, Footer, Sider, Content } = Layout;
|
||||||
|
import './index.less';
|
||||||
|
|
||||||
|
const DragTree = () => {
|
||||||
|
const [gData, setGData] = useState([]);
|
||||||
|
const [expandedKeys, setExpandedKeys] = useState([undefined]);
|
||||||
|
const childRef = useRef(null);
|
||||||
|
const copyChildRef = useRef(null);
|
||||||
|
const [tip, setTip] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showCanceled, setShowCanceled] = useState(0);
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
|
const [iframe, setIframe] = useState('');
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [mergeId, setMergeId] = useState(null);
|
||||||
|
const [copyopen, setCopyOpen] = useState(false);
|
||||||
|
const [copyId, setCopyId] = useState(null);
|
||||||
|
const [labelData, setLabelData] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
|
||||||
|
setLabelData(res.data);
|
||||||
|
setTip(`${getLabel(547473, res.data)}`);
|
||||||
|
});
|
||||||
|
getMoveTree(0);
|
||||||
|
}, [true]);
|
||||||
|
|
||||||
|
const getMoveTree = (showCanceled, expandedKeys = '') => {
|
||||||
|
setLoading(true);
|
||||||
|
d3.json(
|
||||||
|
`/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}&expandedKeys=${expandedKeys}`,
|
||||||
|
).then((data) => {
|
||||||
|
setGData(data.movingTree);
|
||||||
|
setExpandedKeys(data.expandedKeys);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragEnter = (info) => {
|
||||||
|
//console.log(info);
|
||||||
|
// expandedKeys 需要受控时设置
|
||||||
|
// setExpandedKeys(info.expandedKeys)
|
||||||
|
};
|
||||||
|
|
||||||
|
const loop = (data, key, callback) => {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
if (data[i].key === key) {
|
||||||
|
return callback(data[i], i, data);
|
||||||
|
}
|
||||||
|
if (data[i].children) {
|
||||||
|
loop(data[i].children, key, callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDrop = (info) => {
|
||||||
|
const dropKey = info.node.key;
|
||||||
|
const dragKey = info.dragNode.key;
|
||||||
|
const dropPos = info.node.pos.split('-');
|
||||||
|
const dropPosition =
|
||||||
|
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||||
|
|
||||||
|
if (dropPosition == -1) {
|
||||||
|
return message.error(`${getLabel(547475, labelData)}`, 2);
|
||||||
|
}
|
||||||
|
let pos =
|
||||||
|
dropPosition == 0
|
||||||
|
? `${getLabel(547476, labelData)}`
|
||||||
|
: `${getLabel(547477, labelData)}`;
|
||||||
|
|
||||||
|
let title = `${getLabel(547478, labelData)}【${
|
||||||
|
info.dragNode.title
|
||||||
|
} ${getLabel(547479, labelData)} 【${info.node.title}】${pos}`;
|
||||||
|
Modal.confirm({
|
||||||
|
title: `${getLabel(547480, labelData)}`,
|
||||||
|
content: title,
|
||||||
|
okText: `${getLabel(547319, labelData)}`,
|
||||||
|
cancelText: `${getLabel(547318, labelData)}`,
|
||||||
|
onOk() {
|
||||||
|
setLoading(true);
|
||||||
|
setTip(`${getLabel(547481, labelData)}`);
|
||||||
|
|
||||||
|
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
sourcekey: dragKey,
|
||||||
|
targetkey: dropKey,
|
||||||
|
dropPosition: dropPosition,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
const data = [...gData];
|
||||||
|
// Find dragObject
|
||||||
|
let dragObj;
|
||||||
|
loop(data, dragKey, (item, index, arr) => {
|
||||||
|
arr.splice(index, 1);
|
||||||
|
dragObj = item;
|
||||||
|
});
|
||||||
|
if (!info.dropToGap) {
|
||||||
|
// Drop on the content
|
||||||
|
loop(data, dropKey, (item) => {
|
||||||
|
item.children = item.children || [];
|
||||||
|
// where to insert 示例添加到头部，可以是随意位置
|
||||||
|
item.children.unshift(dragObj);
|
||||||
|
});
|
||||||
|
} else if (
|
||||||
|
(info.node.props.children || []).length > 0 &&
|
||||||
|
// Has children
|
||||||
|
info.node.props.expanded &&
|
||||||
|
// Is expanded
|
||||||
|
dropPosition === 1 // On the bottom gap
|
||||||
|
) {
|
||||||
|
loop(data, dropKey, (item) => {
|
||||||
|
item.children = item.children || [];
|
||||||
|
// where to insert 示例添加到头部，可以是随意位置
|
||||||
|
item.children.unshift(dragObj);
|
||||||
|
// in previous version, we use item.children.push(dragObj) to insert the
|
||||||
|
// item to the tail of the children
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
let ar = [];
|
||||||
|
let i;
|
||||||
|
loop(data, dropKey, (_item, index, arr) => {
|
||||||
|
ar = arr;
|
||||||
|
i = index;
|
||||||
|
});
|
||||||
|
if (dropPosition === -1) {
|
||||||
|
ar.splice(i, 0, dragObj);
|
||||||
|
} else {
|
||||||
|
ar.splice(i + 1, 0, dragObj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setGData(data);
|
||||||
|
message.success(`${getLabel(547482, labelData)}`, 2);
|
||||||
|
} else {
|
||||||
|
message.warning(res.msg, 2);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除
|
||||||
|
* @param {*} nodeData
|
||||||
|
*/
|
||||||
|
const onDelete = (nodeData) => {
|
||||||
|
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
||||||
|
fetch(`/api/bs/hrmorganization/${extend}/deleteByIds`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ids: nodeData.id.substring(1) }),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
if (res.data.status == '1') {
|
||||||
|
const data = [...gData];
|
||||||
|
loop(data, nodeData.key, (item, index, arr) => {
|
||||||
|
arr.splice(index, 1);
|
||||||
|
});
|
||||||
|
setGData(data);
|
||||||
|
message.success(`${getLabel(547484, labelData)}`, 2);
|
||||||
|
} else {
|
||||||
|
message.warning(res.data.message, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封存
|
||||||
|
* @param {*} nodeData
|
||||||
|
*/
|
||||||
|
const onCancel = (nodeData) => {
|
||||||
|
setShowCanceled(0);
|
||||||
|
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
||||||
|
fetch(`/api/bs/hrmorganization/${extend}/updateForbiddenTagById`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: nodeData.id.substring(1),
|
||||||
|
canceled: nodeData.canceled != '0',
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
const data = [...gData];
|
||||||
|
if (nodeData.canceled != '0') {
|
||||||
|
message.success(`${getLabel(547485, labelData)}`, 2);
|
||||||
|
loop(data, nodeData.key, (item, index, arr) => {
|
||||||
|
arr[index].canceled = '0';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
loop(data, nodeData.key, (item, index, arr) => {
|
||||||
|
arr.splice(index, 1);
|
||||||
|
});
|
||||||
|
message.success(`${getLabel(547486, labelData)}`, 2);
|
||||||
|
}
|
||||||
|
setGData(data);
|
||||||
|
} else {
|
||||||
|
message.warning(res.msg, 2);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 合并
|
||||||
|
* @param {*} nodeData
|
||||||
|
*/
|
||||||
|
const onMerge = (nodeData) => {
|
||||||
|
if (childRef.current) {
|
||||||
|
childRef.current.getTreeData();
|
||||||
|
}
|
||||||
|
setMergeId(nodeData.id);
|
||||||
|
setOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMergeCreate = (values) => {
|
||||||
|
let params = {
|
||||||
|
department: values.department.substring(1),
|
||||||
|
mergeName: values.mergeName,
|
||||||
|
id: mergeId.substring(1),
|
||||||
|
};
|
||||||
|
fetch('/api/bs/hrmorganization/dept/mergeDepartment', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(params),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
getMoveTree(0, values.department);
|
||||||
|
message.success(`${getLabel(547487, labelData)}`, 2);
|
||||||
|
} else {
|
||||||
|
message.warning(res.msg, 2);
|
||||||
|
}
|
||||||
|
setOpen(false);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 复制
|
||||||
|
* @param {*} nodeData
|
||||||
|
*/
|
||||||
|
const onCopy = (nodeData) => {
|
||||||
|
if (copyChildRef.current) {
|
||||||
|
copyChildRef.current.getTreeData();
|
||||||
|
}
|
||||||
|
setCopyOpen(true);
|
||||||
|
setCopyId(nodeData.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCopyCreate = (values) => {
|
||||||
|
let params = {
|
||||||
|
company: values.company,
|
||||||
|
copySubDept: values.copySubDept ? '1' : '0',
|
||||||
|
ids: copyId.substring(1),
|
||||||
|
};
|
||||||
|
fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(params),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
setCopyOpen(false);
|
||||||
|
getMoveTree(0, values.company);
|
||||||
|
message.success(`${getLabel(547488, labelData)}`, 2);
|
||||||
|
} else {
|
||||||
|
message.warning(res.msg, 2);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
message.error(`${getLabel(547483, labelData)}`);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onTitleRender = (nodeData) => {
|
||||||
|
let extend = nodeData.type == '1' ? 'companyExtend' : 'departmentExtend';
|
||||||
|
let attr =
|
||||||
|
nodeData.type == '1' || nodeData.canceled == '1'
|
||||||
|
? 'none'
|
||||||
|
: 'inline-block';
|
||||||
|
let icon = nodeData.type == '1' ? <HomeOutlined /> : <FolderOutlined />;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{nodeData.type == 0 ? (
|
||||||
|
<span>
|
||||||
|
<ClusterOutlined />
|
||||||
|
<span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span>
|
||||||
|
{icon}
|
||||||
|
<span style={{ marginLeft: '5px' }}>
|
||||||
|
{nodeData.title}
|
||||||
|
{nodeData.canceled == '1' ? (
|
||||||
|
<span style={{ color: 'red', marginLeft: '5px' }}>
|
||||||
|
({getLabel(547489, labelData)})
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div id="drag-button-ops">
|
||||||
|
<span
|
||||||
|
className="drag-button"
|
||||||
|
onClick={() => {
|
||||||
|
setDrawerOpen(true);
|
||||||
|
setIframe(
|
||||||
|
`/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
|
||||||
|
1,
|
||||||
|
)}`,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getLabel(547490, labelData)}
|
||||||
|
</span>
|
||||||
|
<Popconfirm
|
||||||
|
title={`${getLabel(547491, labelData)}[${nodeData.title}]?`}
|
||||||
|
onConfirm={() => onDelete(nodeData)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
>
|
||||||
|
<span className="drag-button">
|
||||||
|
{getLabel(547492, labelData)}
|
||||||
|
</span>
|
||||||
|
</Popconfirm>
|
||||||
|
<Popconfirm
|
||||||
|
title={`${getLabel(547493, labelData)} [${nodeData.title}]?`}
|
||||||
|
onConfirm={() => onCancel(nodeData)}
|
||||||
|
okText={getLabel(547319, labelData)}
|
||||||
|
cancelText={getLabel(547318, labelData)}
|
||||||
|
>
|
||||||
|
<span className="drag-button">
|
||||||
|
{nodeData.canceled == '0'
|
||||||
|
? `${getLabel(547494, labelData)}`
|
||||||
|
: `${getLabel(547495, labelData)}`}
|
||||||
|
</span>
|
||||||
|
</Popconfirm>
|
||||||
|
<span
|
||||||
|
style={{ display: attr }}
|
||||||
|
className="drag-button"
|
||||||
|
onClick={() => onMerge(nodeData)}
|
||||||
|
>
|
||||||
|
{getLabel(547194, labelData)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{ display: attr }}
|
||||||
|
className="drag-button"
|
||||||
|
onClick={() => onCopy(nodeData)}
|
||||||
|
>
|
||||||
|
{getLabel(547196, labelData)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onExpand = (info) => {
|
||||||
|
setExpandedKeys(info);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
Object.keys(labelData).length != 0 && (
|
||||||
|
<div className="drag-wrapper">
|
||||||
|
<Spin tip={tip} spinning={loading}>
|
||||||
|
<div className="drag-layout">
|
||||||
|
<div className="drag-header">
|
||||||
|
<img src={inset} />
|
||||||
|
<div>{getLabel(547282, labelData)}</div>
|
||||||
|
</div>
|
||||||
|
<div className="drag-content">
|
||||||
|
<ApartmentOutlined
|
||||||
|
className="drag-showcanceled"
|
||||||
|
style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
|
||||||
|
onClick={() => {
|
||||||
|
const value = showCanceled == 0 ? 1 : 0;
|
||||||
|
setTip(`${getLabel(547473, labelData)}`);
|
||||||
|
setShowCanceled(value);
|
||||||
|
getMoveTree(value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Tree
|
||||||
|
className="draggable-tree"
|
||||||
|
//defaultExpandedKeys={expandedKeys}
|
||||||
|
expandedKeys={expandedKeys}
|
||||||
|
onExpand={onExpand}
|
||||||
|
draggable
|
||||||
|
icon={false}
|
||||||
|
blockNode
|
||||||
|
onDragEnter={onDragEnter}
|
||||||
|
onDrop={onDrop}
|
||||||
|
treeData={gData}
|
||||||
|
titleRender={onTitleRender}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Drawer
|
||||||
|
width="60%"
|
||||||
|
placement="right"
|
||||||
|
closable={false}
|
||||||
|
onClose={() => setDrawerOpen(false)}
|
||||||
|
open={drawerOpen}
|
||||||
|
>
|
||||||
|
<iframe src={iframe} width="100%" height="100%" />
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
<div className="drag-footer">
|
||||||
|
<p>
|
||||||
|
<QuestionCircleOutlined />
|
||||||
|
{getLabel(547283, labelData)}
|
||||||
|
</p>
|
||||||
|
<div className="tips">
|
||||||
|
<div>1.{getLabel(547284, labelData)}</div>
|
||||||
|
<div>2.{getLabel(547285, labelData)}</div>
|
||||||
|
<div>3.{getLabel(547286, labelData)}</div>
|
||||||
|
<div>4.{getLabel(547287, labelData)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
|
||||||
|
<MergeDialog
|
||||||
|
ref={childRef}
|
||||||
|
open={open}
|
||||||
|
onCreate={onMergeCreate}
|
||||||
|
onCancel={() => {
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
labelData={labelData}
|
||||||
|
/>
|
||||||
|
<CopyDialog
|
||||||
|
ref={copyChildRef}
|
||||||
|
open={copyopen}
|
||||||
|
onCreate={onCopyCreate}
|
||||||
|
onCancel={() => {
|
||||||
|
setCopyOpen(false);
|
||||||
|
}}
|
||||||
|
labelData={labelData}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default DragTree;
|
||||||
|
|
@ -1,11 +1,157 @@
|
||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
background: rgb(121, 242, 157);
|
background: rgb(121, 242, 157);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background: #F7F9FD;
|
background: #f7f9fd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentWrapper {
|
.contentWrapper {
|
||||||
background-color: #F7F9FD;
|
background-color: #f7f9fd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-tree .ant-tree-node-content-wrapper:hover {
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tree .ant-tree-node-content-wrapper:hover #drag-button-ops {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
|
||||||
|
color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
#drag-button-ops {
|
||||||
|
display: none;
|
||||||
|
height: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-left: 100px;
|
||||||
|
|
||||||
|
.drag-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-button:hover {
|
||||||
|
color: #22c8fb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-wrapper {
|
||||||
|
min-height: inherit;
|
||||||
|
background-image: url('../../public/img/back/background.png') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-layout {
|
||||||
|
min-height: inherit;
|
||||||
|
padding: 25px;
|
||||||
|
|
||||||
|
.drag-header {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-content {
|
||||||
|
width: auto;
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1px solid rgba(218, 237, 255, 1);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.drag-showcanceled {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-footer {
|
||||||
|
margin-top: 15px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1px solid rgba(218, 237, 255, 1);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 22px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
span {
|
||||||
|
color: #178eff;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #596378;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #596378;
|
||||||
|
line-height: 21px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tree {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-drawer-body {
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 110px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 18px;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltitle {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 144px;
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: 125%;
|
||||||
|
left: 39%;
|
||||||
|
margin-left: -60px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
/*
|
||||||
|
* @Author: Chengliang 1546584672@qq.com
|
||||||
|
* @Date: 2023-09-11 15:33:27
|
||||||
|
* @LastEditors: Chengliang 1546584672@qq.com
|
||||||
|
* @LastEditTime: 2023-09-15 11:39:05
|
||||||
|
* @FilePath: /org-chart-frant/src/pages/statisticsTable.jsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import React, { useEffect, useState, useRef } from 'react';
|
||||||
|
import * as d3 from 'd3';
|
||||||
|
import qs from 'qs';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import { getLabel } from '../util/i18n.js';
|
||||||
|
|
||||||
|
const StatisticsTable = () => {
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [dataSource, setDataSource] = useState([]);
|
||||||
|
const [columns, setColumns] = useState([]);
|
||||||
|
const [labelData, setLabelData] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
|
||||||
|
setLabelData(res.data);
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: `${getLabel(547327, res.data)}`,
|
||||||
|
dataIndex: 'key',
|
||||||
|
key: 'key',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547517, res.data)}`,
|
||||||
|
dataIndex: 'dataIdName',
|
||||||
|
key: 'dataIdName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547518, res.data)}`,
|
||||||
|
dataIndex: 'superIdName',
|
||||||
|
key: 'superIdName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547519, res.data)}`,
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
render(value, row, index) {
|
||||||
|
if (value == 1) {
|
||||||
|
return `${getLabel(547332, res.data)}`;
|
||||||
|
} else {
|
||||||
|
return `${getLabel(547331, res.data)}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547346, res.data)}`,
|
||||||
|
dataIndex: 'onJobNum',
|
||||||
|
key: 'onJobNum',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547345, res.data)}`,
|
||||||
|
dataIndex: 'staffNum',
|
||||||
|
key: 'staffNum',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547520, res.data)}`,
|
||||||
|
dataIndex: 'creator',
|
||||||
|
key: 'creator',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547521, res.data)}`,
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
key: 'createTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: `${getLabel(547522, res.data)}`,
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
key: 'updateTime',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
setColumns(columns);
|
||||||
|
selectData();
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const selectData = () => {
|
||||||
|
d3.json(`/api/bs/hrmorganization/orgchart/selectStatistics`).then((res) => {
|
||||||
|
setDataSource(res.data.result);
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{ padding: '50px' }}>
|
||||||
|
<Table
|
||||||
|
dataSource={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
loading={loading}
|
||||||
|
pagination={{
|
||||||
|
showTotal: (total) =>
|
||||||
|
`${getLabel(547523, labelData)} ${dataSource.length} ${getLabel(
|
||||||
|
547524,
|
||||||
|
labelData,
|
||||||
|
)}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
;
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default StatisticsTable;
|
||||||
|
|
@ -4,6 +4,7 @@ import { OrgChartComponent } from '@/components/orgChart';
|
||||||
import * as d3 from 'd3';
|
import * as d3 from 'd3';
|
||||||
import { TopBar } from '../components/topBar';
|
import { TopBar } from '../components/topBar';
|
||||||
import ToolBar from '../components/toolBar';
|
import ToolBar from '../components/toolBar';
|
||||||
|
import TimeLine from '../components/timeline';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import qs from 'qs';
|
import qs from 'qs';
|
||||||
import { message } from 'antd';
|
import { message } from 'antd';
|
||||||
|
|
@ -11,6 +12,8 @@ import jsPDF from 'jspdf';
|
||||||
let active = 'top';
|
let active = 'top';
|
||||||
export default function userPage() {
|
export default function userPage() {
|
||||||
const [data, setData] = useState(null);
|
const [data, setData] = useState(null);
|
||||||
|
let topbar = null;
|
||||||
|
let timeLine = null;
|
||||||
const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
|
const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
|
||||||
const [requestRes, setRequestRes] = useState({
|
const [requestRes, setRequestRes] = useState({
|
||||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||||
|
|
@ -25,7 +28,7 @@ export default function userPage() {
|
||||||
let progressBtnRef = null;
|
let progressBtnRef = null;
|
||||||
|
|
||||||
const [hasRight, setHasRight] = useState('');
|
const [hasRight, setHasRight] = useState('');
|
||||||
const [disabled, setDisabled] = useState(false);
|
const [id, setId] = useState(0);
|
||||||
// 点击节点
|
// 点击节点
|
||||||
function onNodeClick(nodeId) {
|
function onNodeClick(nodeId) {
|
||||||
// alert('clicked ' + nodeId);
|
// alert('clicked ' + nodeId);
|
||||||
|
|
@ -54,8 +57,7 @@ export default function userPage() {
|
||||||
qs.stringify(request, { addQueryPrefix: true });
|
qs.stringify(request, { addQueryPrefix: true });
|
||||||
} else {
|
} else {
|
||||||
api =
|
api =
|
||||||
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
|
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&fisvitual=0&root=0&level=3&id=0' +
|
||||||
moment(new Date()).format('YYYY-MM-DD') +
|
|
||||||
'&ids=' +
|
'&ids=' +
|
||||||
idsStr;
|
idsStr;
|
||||||
}
|
}
|
||||||
|
|
@ -72,13 +74,23 @@ export default function userPage() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 时间轴点击
|
||||||
|
* @param {*} timeline
|
||||||
|
*/
|
||||||
|
const timeLineSearch = (timeline) => {
|
||||||
|
setId(timeline.id);
|
||||||
|
let requestData = { ...topbar.state.requestData, id: timeline.id };
|
||||||
|
handleSearch(requestData, false);
|
||||||
|
};
|
||||||
|
|
||||||
// 获取部门图片
|
// 获取部门图片
|
||||||
function getDepartmentImage() {
|
function getDepartmentImage() {
|
||||||
let index = Math.floor(Math.random() * 8) + 1;
|
let index = Math.floor(Math.random() * 8) + 1;
|
||||||
return `./img/department/${index}.png`;
|
return `./img/department/${index}.png`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取部门图片
|
// 获取分部图片
|
||||||
function getSubcompanyImage() {
|
function getSubcompanyImage() {
|
||||||
let index = Math.floor(Math.random() * 3) + 1;
|
let index = Math.floor(Math.random() * 3) + 1;
|
||||||
return `./img/subcompany/${index}.png`;
|
return `./img/subcompany/${index}.png`;
|
||||||
|
|
@ -87,11 +99,9 @@ export default function userPage() {
|
||||||
// 获取数据
|
// 获取数据
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.cookie =
|
document.cookie =
|
||||||
'Webstorm-3d4d3ad4=b8ca5bef-a131-4c2b-81da-6f8595481dc2; ecology_JSessionid=aaad2HRSW843U9BJFcUuy; JSESSIONID=aaad2HRSW843U9BJFcUuy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=47f1e1cc-51de-48b3-af04-3875b717805f';
|
'ecology_JSessionid=aaaLiDqzA0rZHgPBdxGez; JSESSIONID=aaaLiDqzA0rZHgPBdxGez; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7b9b3b9b-a780-4d6a-b8d5-22d0f8aaf11a';
|
||||||
d3.json(
|
d3.json(
|
||||||
// "/user/data"
|
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
|
||||||
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
|
|
||||||
moment(new Date()).format('YYYY-MM-DD'),
|
|
||||||
).then((data) => {
|
).then((data) => {
|
||||||
setData(data.data);
|
setData(data.data);
|
||||||
setHasRight(data?.hasRight);
|
setHasRight(data?.hasRight);
|
||||||
|
|
@ -161,10 +171,6 @@ export default function userPage() {
|
||||||
orgChart && orgChart.zoomOut();
|
orgChart && orgChart.zoomOut();
|
||||||
};
|
};
|
||||||
|
|
||||||
// tool bar end
|
|
||||||
|
|
||||||
// top bar start
|
|
||||||
|
|
||||||
function downloadPdf(chart) {
|
function downloadPdf(chart) {
|
||||||
chart.exportImg({
|
chart.exportImg({
|
||||||
save: false,
|
save: false,
|
||||||
|
|
@ -196,7 +202,10 @@ export default function userPage() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearch = (requestData) => {
|
const handleSearch = (requestData, cache = true) => {
|
||||||
|
if (cache) {
|
||||||
|
requestData = { ...requestData, id: id };
|
||||||
|
}
|
||||||
setTpBarSearchRequest(requestData);
|
setTpBarSearchRequest(requestData);
|
||||||
let api =
|
let api =
|
||||||
'/api/bs/hrmorganization/orgchart/userData' +
|
'/api/bs/hrmorganization/orgchart/userData' +
|
||||||
|
|
@ -215,20 +224,15 @@ export default function userPage() {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSynchronous = (requestData) => {
|
/**
|
||||||
setDisabled(true);
|
* 切换维度
|
||||||
let api = '/api/bs/hrmorganization/orgchart/synchronousData';
|
* @param {*} requestData
|
||||||
fetch(api)
|
*/
|
||||||
.then((res) => res.json())
|
const handleChange = (requestData) => {
|
||||||
.then((data) => {
|
timeLine.searchTimeLines(
|
||||||
if (data.code == 200) {
|
`/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
|
||||||
message.success('同步成功,请重新查询');
|
);
|
||||||
} else {
|
handleSearch(requestData);
|
||||||
message.error('数据同步失败');
|
|
||||||
}
|
|
||||||
setDisabled(false);
|
|
||||||
//this.handleSearch(requestData);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -309,7 +313,7 @@ export default function userPage() {
|
||||||
? d.data.fleaderimg
|
? d.data.fleaderimg
|
||||||
: d.data.ftype == 0 || d.data.ftype == 1
|
: d.data.ftype == 0 || d.data.ftype == 1
|
||||||
? './img/company.png'
|
? './img/company.png'
|
||||||
: './img/default_avator.png'
|
: './img/department.png'
|
||||||
}" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
|
}" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: inline-block; margin-left: 6px;width: 55%" >
|
<div style="display: inline-block; margin-left: 6px;width: 55%" >
|
||||||
|
|
@ -506,6 +510,7 @@ export default function userPage() {
|
||||||
hasRight && (
|
hasRight && (
|
||||||
<div className={styles.contentWrapper}>
|
<div className={styles.contentWrapper}>
|
||||||
<TopBar
|
<TopBar
|
||||||
|
ref={(r) => (topbar = r)}
|
||||||
onExport={(type) => {
|
onExport={(type) => {
|
||||||
handleExport(type);
|
handleExport(type);
|
||||||
}}
|
}}
|
||||||
|
|
@ -513,12 +518,11 @@ export default function userPage() {
|
||||||
setRequestRes(requestData);
|
setRequestRes(requestData);
|
||||||
handleSearch(requestData);
|
handleSearch(requestData);
|
||||||
}}
|
}}
|
||||||
onSynchronous={(requestData) => {
|
changeFclass={(requestData) => {
|
||||||
handleSynchronous(requestData);
|
handleChange(requestData);
|
||||||
}}
|
}}
|
||||||
disabled={disabled}
|
|
||||||
type="user"
|
type="user"
|
||||||
url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
|
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=user"
|
||||||
/>
|
/>
|
||||||
<ToolBar
|
<ToolBar
|
||||||
onTopLayoutClick={handleTopLayoutClick}
|
onTopLayoutClick={handleTopLayoutClick}
|
||||||
|
|
@ -526,6 +530,13 @@ export default function userPage() {
|
||||||
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
|
onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
|
||||||
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
|
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
|
||||||
/>
|
/>
|
||||||
|
<TimeLine
|
||||||
|
ref={(r) => (timeLine = r)}
|
||||||
|
onClick={(timeline) => {
|
||||||
|
timeLineSearch(timeline);
|
||||||
|
}}
|
||||||
|
url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
|
||||||
|
/>
|
||||||
<OrgChartComponent
|
<OrgChartComponent
|
||||||
setChart={(chart) => (orgChart = chart)}
|
setChart={(chart) => (orgChart = chart)}
|
||||||
setClick={(click) => (addNodeChildFunc = click)}
|
setClick={(click) => (addNodeChildFunc = click)}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
let languageIdWeaver = document.cookie
|
||||||
|
.split('; ')
|
||||||
|
.find((row) => row.startsWith('languageidweaver='))
|
||||||
|
?.split('=')[1];
|
||||||
|
if (languageIdWeaver == undefined) {
|
||||||
|
languageIdWeaver = 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getLabel = (key, labelData) => {
|
||||||
|
if (labelData[key]) {
|
||||||
|
return labelData[key].labelName;
|
||||||
|
} else {
|
||||||
|
return languageIdWeaver == 7 ? '标签不存在' : 'Label does not exist';
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue