Compare commits

..

19 Commits

@ -1,4 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" native2AsciiForPropertiesFiles="true" defaultCharsetForPropertiesFiles="UTF-8" />
</project>

@ -1,36 +0,0 @@
<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>

@ -1,7 +0,0 @@
<?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>

@ -1,8 +0,0 @@
<?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>

@ -1,9 +0,0 @@
<?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>

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

@ -1,593 +0,0 @@
<?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&#9;" 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>

@ -1,9 +1,17 @@
/*
* @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2023-06-08 13:50:33
* @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({
hash: true, hash: true,
history: { type: 'hash' }, history: { type: 'hash' },
base: '/spa/orgChart/', base: '/spa/aischart/',
// exportStatic: {}, // exportStatic: {},
publicPath: './', publicPath: './',
nodeModulesTransform: { nodeModulesTransform: {
@ -12,16 +20,14 @@ 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: '/chart', component: '@/pages/chart' },
{ path: '/statistics', component: '@/pages/statisticsTable' },
], ],
fastRefresh: {}, fastRefresh: {},
antd: {}, antd: {},
proxy: { proxy: {
'/api': { '/api': {
// 标识需要进行转换的请求的url // 标识需要进行转换的请求的url
target: 'http://127.0.0.1:8686/api', // 服务端域名 target: 'http://10.21.121.82:8080/api', // 服务端域名 / http://localhost:8686
//target: 'http://221.226.25.34:11080/api',
changeOrigin: true, // 允许域名进行转换 changeOrigin: true, // 允许域名进行转换
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉 pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
}, },

Binary file not shown.

@ -20,17 +20,20 @@
] ]
}, },
"dependencies": { "dependencies": {
"@ant-design/pro-layout": "^6.5.0", "@ant-design/pro-layout": "^7.14.3",
"@types/d3": "^7.4.0", "@types/d3": "^7.4.0",
"antd": "^4.5.2",
"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", "es": "^0.8.0",
"jspdf": "^2.5.1", "jspdf": "^2.5.1",
"moment": "^2.29.3", "moment": "^2.29.3",
"qs": "^6.11.0", "qs": "^6.11.0",
"react": "17.x", "react": "17.x",
"react-dom": "17.x", "react-dom": "17.x",
"umi": "^3.5.26" "umi": "^3.5.26",
"watermark-component-for-react": "^1.0.0",
"watermark-dom": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^17.0.0", "@types/react": "^17.0.0",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

@ -1,115 +0,0 @@
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;

@ -1,111 +0,0 @@
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>
</>
);
}
}

@ -1,5 +0,0 @@
.ant-select-tree
.ant-select-tree-treenode-disabled
.ant-select-tree-node-content-wrapper {
color: rgba(0, 0, 0, 0.85);
}

@ -1,126 +0,0 @@
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;

@ -1,558 +0,0 @@
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>
);
}
}

@ -1,12 +0,0 @@
.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.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

@ -1,144 +0,0 @@
/*
* @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>
</>
);
}
}

@ -1,74 +0,0 @@
.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.

Before

Width:  |  Height:  |  Size: 210 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 414 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 362 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 452 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 474 B

@ -6,12 +6,6 @@ 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();
@ -103,48 +97,6 @@ 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>
); );
} }

@ -32,8 +32,7 @@
display: block; display: block;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 26px; margin-left: 20px;
cursor: pointer; // cursor: pointer;
width: 20px;
} }
} }

@ -1,182 +1,91 @@
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,
Select, Select,
Button, Button,
Checkbox,
Row, Row,
Col, Col,
Dropdown, Dropdown,
Menu, Menu,
TreeSelect, 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: [], deptartmentTreeData: [], //
rootTreeData: [], //
treeLoadedKeys: [],
treeExpandedKeys: [], treeExpandedKeys: [],
levelOptions: [], //hrm
butvisable: true,
requestData: { requestData: {
fclass: '0', date: moment(new Date()).format('YYYY-MM-DD'), //
root: undefined, department: undefined,
level: '2', level: '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 });
} }
handleTreeData(treeData = [], timelineId) {
this.setState({
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');
} }
handleExportButtonClick() {
this.props.onExport('png');
}
/** /**
* 根节点树数据 * 部门树数据
* @param {} parentId * @param {} parentId
* @returns * @returns
*/ */
getNodeTreeNode = (url, merge = true) => { getDepartmentTreeNode = (parentId) => {
fetch(url) let api = '/api/ais/orgChart/getDepartmentTree?department=' + parentId;
fetch(api)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
if (data.api_status) { if (data.status) {
let arr = []; let arr = [...this.state.deptartmentTreeData, ...data.data.deptTree];
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({ this.setState({
rootTreeData: arr, deptartmentTreeData: arr,
}); });
} }
}); });
}; };
/** /**
* 根节点树异步加载 * 部门树异步加载
* @param {} parentId * @param {} parentId
* @returns * @returns
*/ */
onRootLoadData = (treeNode) => onDepartmentLoadData = (treeNode) =>
new Promise((resolve) => { new Promise((resolve) => {
const { id } = treeNode; const { id } = treeNode.props;
setTimeout(() => { setTimeout(() => {
const { fclass } = this.state.requestData; this.getDepartmentTreeNode(id);
const { timelineId } = this.state;
let api =
'/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
id +
'&fclass=' +
fclass +
'&id=' +
timelineId;
this.getNodeTreeNode(api);
resolve(undefined); resolve(undefined);
}, 500); }, 1000);
}); });
onRootChange = (value) => { onDepartmentChange = (value) => {
let requestData = { ...this.state.requestData, root: value }; let requestData = { ...this.state.requestData, department: value };
this.setState({ requestData }); this.setState({ requestData });
}; };
paramsUtil = (param) => {
let arr = param.map(function (obj, index) {
return obj.value;
});
return arr.join(',');
};
onTreeExpand = (expandedKeys) => { onTreeExpand = (expandedKeys) => {
this.setState({ this.setState({
treeExpandedKeys: expandedKeys, treeExpandedKeys: expandedKeys,
@ -184,191 +93,87 @@ export class TopBar extends React.Component {
}; };
componentDidMount() { componentDidMount() {
this.getSeatchCondition(this.props.url); fetch(this.props.url)
}
getSeatchCondition = (url) => {
fetch(url)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
data.companyTree.map((item, index) => { if (data.status) {
item.icon = <HomeOutlined />; this.setState({
}); levelOptions: data.data.deptLevel,
this.setState({ deptartmentTreeData: data.data.deptTree,
fclasslist: data.fclasslist, butvisable: data.data.hasRight,
rootTreeData: data.companyTree, });
}); }
}); });
}; }
/**
* 导出多选 */
menu = ( menu = (
<Menu <Menu
onClick={this.handleExportMenuClick.bind(this)} onClick={this.handleExportMenuClick.bind(this)}
items={[ items={[
{ {
label: `${getLabel(547315, this.props.labelData)}`, label: '导出图片',
key: '1', key: '1',
}, },
// { {
// label: 'PDF', label: '导出PDF',
// key: '2', key: '2',
// }, },
]} ]}
/> />
); );
render() { render() {
const { disabled, type, labelData } = this.props; const { deptartmentTreeData } = this.state;
const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
this.state;
return ( return (
<div className={style.topbarWrapper}> <div className={style.topbarWrapper}>
<Row> <Row gutter={[16, 16]}>
<Col span={6}> <Col span={6}>
{getLabel(547293, labelData)} 日期追溯
<Select <DatePicker
defaultValue="0" placeholder="日期选择"
style={{ width: 140 }} style={{ width: 150 }}
value={this.state.requestData.fclass} locale={locale}
onChange={(value) => { allowClear={false}
const requestData = { //disabledDate={this.disabledDate}
fclass: value, defaultValue={moment(new Date())}
root: undefined, value={
level: '2', this.state.requestData.date && this.state.requestData.date != ''
fisvitual: '0', ? moment(this.state.requestData.date)
hidedept: '0', : ''
}; }
this.handleFormChange(requestData); onChange={(value) =>
this.setState({ this.handleFormChange({
rootTreeData: [], date: value && value != '' ? value.format('YYYY-MM-DD') : '',
}); })
this.getNodeTreeNode( }
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`, />
false,
);
this.props.changeFclass(requestData);
}}
>
{this.state.fclasslist.map((item) => (
<Option key={item.key} value={item.id}>
{item.companyname}
</Option>
))}
</Select>
</Col> </Col>
<Col span={6}>
<Col span={8}> 部门
{getLabel(547294, labelData)}
<TreeSelect <TreeSelect
key={treeKey}
treeDataSimpleMode treeDataSimpleMode
allowClear allowClear
style={{ width: '65%' }} style={{ width: '80%' }}
value={this.state.requestData.root} value={this.state.requestData.department}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder={getLabel(547298, labelData)} placeholder="请选择部门节点"
onChange={this.onRootChange} onChange={this.onDepartmentChange}
loadData={this.onRootLoadData} loadData={this.onDepartmentLoadData}
treeData={rootTreeData} treeData={deptartmentTreeData}
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" style={{ width: 130 }}
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 })}
> options={this.state.levelOptions}
<Option value="1">{getLabel(547301, labelData)}</Option> />
<Option value="2">{getLabel(547463, labelData)}</Option> </Col> */}
<Option value="3">{getLabel(547464, labelData)}</Option>
<Option value="4">{getLabel(547465, labelData)}</Option>
</Select>
</Col>
</Row>
<Row style={{ marginTop: '15px' }}>
<Col span={6}> <Col span={6}>
<Checkbox
style={{ marginTop: '5px' }}
checked={this.state.requestData.fisvitual == '1'}
onChange={(e) =>
this.handleFormChange({
fisvitual: e.target.checked ? '1' : '0',
})
}
>
{getLabel(547302, labelData)}
</Checkbox>
<Tooltip
title={getLabel(547304, labelData)}
color="#0082fb"
placement="rightTop"
>
<QuestionCircleOutlined
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' }}
@ -376,33 +181,24 @@ export class TopBar extends React.Component {
this.props.onSearch(this.state.requestData); this.props.onSearch(this.state.requestData);
}} }}
> >
{getLabel(547307, labelData)} 查询
</Button> </Button>
<Button
<Dropdown overlay={this.menu}> type="primary"
<Button type="primary">{getLabel(547314, labelData)}</Button> style={{ marginRight: '10px' }}
</Dropdown> onClick={() => {
window.open('#/chart', '_blank');
}}
>
任命架构图
</Button>
{this.state.butvisable && (
<Dropdown overlay={this.menu}>
<Button type="primary">导出</Button>
</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.3, // "nodeTopY": node => node.height/0.4,
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,
@ -509,9 +509,7 @@ export class OrgChart {
// Get zooming function // Get zooming function
behaviors.zoom = d3 behaviors.zoom = d3
.zoom() .zoom()
.on('zoom', (event, d) => { .on('zoom', (event, d) => this.zoomed(event, d))
this.zoomed(event, d);
})
.scaleExtent(attrs.scaleExtent); .scaleExtent(attrs.scaleExtent);
attrs.zoomBehavior = behaviors.zoom; attrs.zoomBehavior = behaviors.zoom;
} }
@ -844,8 +842,6 @@ export class OrgChart {
const nodes = treeData.descendants(); const nodes = treeData.descendants();
// console.table(nodes.map(d => ({ x: d.x, y: d.y, width: d.width, height: d.height, flexCompactDim: d.flexCompactDim + "" })))
// Get all links // Get all links
const links = treeData.descendants().slice(1); const links = treeData.descendants().slice(1);
nodes.forEach(attrs.layoutBindings[attrs.layout].swap); nodes.forEach(attrs.layoutBindings[attrs.layout].swap);
@ -1078,8 +1074,7 @@ 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
@ -1748,7 +1743,7 @@ export class OrgChart {
xhr.send(); xhr.send();
} }
exportImg({ full = false, scale = 12, onLoad = (d) => d, save = true } = {}) { exportImg({ full = false, scale = 6, onLoad = (d) => d, save = true } = {}) {
const that = this; const that = this;
const attrs = this.getChartState(); const attrs = this.getChartState();
const { svg: svgImg, root } = attrs; const { svg: svgImg, root } = attrs;

@ -0,0 +1,38 @@
import React, { useEffect, useState } from 'react';
import * as d3 from 'd3';
import styles from './index.less';
import { Image } from 'antd';
import WaterMark from 'watermark-component-for-react';
export default function chartPage() {
const [url, setUrl] = useState();
const [hasRight, setHasRight] = useState('true');
const [watermark, setWatermark] = useState();
//
useEffect(() => {
d3.json('/api/ais/orgChart/chartData').then((res) => {
setWatermark(res.data.watermark);
setUrl(res.data.url);
setHasRight('true');
});
}, []);
return (
hasRight && (
<>
<WaterMark content={watermark} font="20px Microsoft Yahei">
<div className={styles.chartContainer}>
<Image
src={url}
preview={false}
//src={page}
height={'100vh'}
/>
</div>
</WaterMark>
</>
)
);
}

@ -4,58 +4,29 @@ 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, Spin, notification } from 'antd'; import { message, Spin } from 'antd';
import { SmileOutlined } from '@ant-design/icons'; import WaterMark from 'watermark-component-for-react';
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 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);
let addNodeChildFunc = null; let addNodeChildFunc = null;
let topBarSearchRequest = null; let orgChart = null;
let topBarSearchRequest = useRef({});
const [hasRight, setHasRight] = useState(''); const [hasRight, setHasRight] = useState('');
const [timelineId, setTimelineId] = useState(0); const [watermark, setWatermark] = useState('');
const infoRef = useRef(); const [loading, setLoading] = useState('');
const [labelData, setLabelData] = useState({});
const [lebelCompleted, setLabelCompleted] = useState(false);
useEffect(() => {
infoRef.current = timelineId;
}, [timelineId]);
const [spinning, setSpinning] = useState(false);
// //
const onNodeClick = (node) => { function onNodeClick(nodeId) {}
if (node.ftype == '2') {
const params = {
rootId: node.id,
fclass: topbar.state.requestData.fclass,
id: infoRef.current,
};
drawerCom.showDrawer(params);
}
};
// //
const onButtonClick = (event, d) => { function onButtonClick(event, d) {
if (d.children) { if (d.children) {
let idsList = []; let idsList = [];
d.children.forEach((item) => { d.children.forEach((item) => {
@ -63,76 +34,68 @@ export default function companyPage() {
idsList.push(item.data.id); idsList.push(item.data.id);
} }
}); });
if (idsList.length == 0) { if (idsList.length == 0) {
return; return;
} }
let idsStr = idsList.join(','); let idsStr = idsList.join(',');
let api = ''; let request = { ...topBarSearchRequest.current, ids: idsStr };
if (topBarSearchRequest) { let api =
let request = { ...topBarSearchRequest, ids: idsStr }; '/api/ais/orgChart/asyncCompanyData' +
api = qs.stringify(request, { addQueryPrefix: true });
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true });
} else {
let request = { ...topbar.state.requestData, ids: idsStr };
api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true });
}
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((resp) => {
if (data.data) { if (resp.data.data) {
data.data.forEach((item) => { resp.data.data.forEach((item) => {
// window.chart.addNode(item); window.chart.addNode(item);
orgChart.addNode(item);
}); });
} }
}); });
} }
};
//
function getDepartmentImage(fisvitual) {
return fisvitual == '0' ? `./img/back/level4.png` : `./img/back/level8.png`;
} }
// //
function getSubcompanyImage(fisvitual) { function getLevelImage(deptLevel, isVirtual) {
return fisvitual == '0' ? `./img/back/level1.png` : `./img/back/level5.png`; switch (deptLevel) {
case '0':
return isVirtual == 0
? `./img/company/level1.png`
: `./img/company/level5.png`;
case '1':
return isVirtual == 0
? `./img/company/level2.png`
: `./img/company/level6.png`;
case '2':
return isVirtual == 0
? `./img/company/level3.png`
: `./img/company/level7.png`;
case '3':
return isVirtual == 0
? `./img/company/level4.png`
: `./img/company/level8.png`;
default:
return isVirtual == 0
? `./img/company/level4.png`
: `./img/company/level8.png`;
}
} }
// //
useEffect(() => { useEffect(() => {
d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => { d3.json(
setLabelData(res.data); '/api/ais/orgChart/companyData?level=0&date=' +
setLabelCompleted(true); moment(new Date()).format('YYYY-MM-DD'),
notification.open({ ).then((resp) => {
message: `${getLabel(547283, res.data)}`, setData(resp.data.data);
description: `${getLabel(547292, res.data)}`, setWatermark(resp.data.watermark);
icon: <SmileOutlined style={{ color: '#108ee9' }} />, setHasRight('true');
});
}); });
}, []); }, []);
//
useEffect(() => {
if (lebelCompleted) {
d3.json(
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=2&id=0',
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
});
}
}, [lebelCompleted]);
// ButtonContent // ButtonContent
const buttonContentRender = ({ node, state }) => { const buttonContentRender = ({ node, state }) => {
if (node.children) { if (node.children) {
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`; return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;">ˆ</div> </div>`;
} else { } else {
return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;transform:rotate(180deg)">ˆ</div> </div>`; return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.35;height:11px;font-size:25px; color: #fff;transform:rotate(180deg)">ˆ</div> </div>`;
} }
@ -141,9 +104,9 @@ export default function companyPage() {
// //
const nodeWidthRender = (d) => { const nodeWidthRender = (d) => {
if (d.data.ftype == 0) { if (d.data.ftype == 0) {
return 220; return 1000;
} else if (d.data.ftype == 1) { } else if (d.data.ftype == 1) {
return 144; return 160;
} else if (d.data.ftype == 2) { } else if (d.data.ftype == 2) {
return 144; return 144;
} }
@ -154,7 +117,7 @@ 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 106; return 80;
} else if (d.data.ftype == 2) { } else if (d.data.ftype == 2) {
return 106; return 106;
} }
@ -162,11 +125,12 @@ export default function companyPage() {
}; };
const nodeContentRender = (d, i, arr, state) => { const nodeContentRender = (d, i, arr, state) => {
let fclass = topbar.state.requestData.fclass;
let statisticsStyle = fclass == 0 ? 'block' : 'none';
if (d.data.ftype == 0) { if (d.data.ftype == 0) {
return `<div style="text-align: center;"> return `<div style="text-align:center">
<div style="display: inline-block; margin-left: 5px;"> <div style="display: inline-block; vertical-align: top;">
<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;
@ -179,51 +143,51 @@ export default function companyPage() {
</div> </div>
</div>`; </div>`;
} else if (d.data.ftype == 1) { } else if (d.data.ftype == 1) {
return `<div style='position:absolute;height:100%'> return `<div onclick="window.open('${d.data.url}', '_blank')">
<img style='width:144px;height:106px' src="${getSubcompanyImage( <div style="width: 136px; border: 1px solid #66BAF5; margin: 10px auto 0px; border-radius: 23px; text-align: center;
d.data.fisvitual, font-size: 14px;
)}"/> font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 18px;
padding: 15px 10px;
">
${d.data.fname}
</div> </div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px; </div>`;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div class="tooltip">
<div class="tooltitle"> ${d.data.fname} </div>
<div class="tooltiptext">${d.data.fname}</div>
</div>
<div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span>
</div>
</div>
</div>
`;
} else if (d.data.ftype == 2) { } else if (d.data.ftype == 2) {
let one = d.data.leader == '' ? 'none' : 'inline';
let three = d.data.deputyLeader == '' ? 'none' : 'inline';
let two = d.data.header == '' ? 'none' : 'inline-block';
return ` return `
<div style="width: 100%; height: 100%; background-size: 100% 100%;"> <div style="width: 100%; height: 100%; background-size: 100% 100%;" >
<div style='position:absolute;height:100%'> <div style='position:absolute;height:100%'>
<img style='width:144px;height:106px' src="${getDepartmentImage( <img style='width:144px;height:106px' src="${getLevelImage(
d.data.fisvitual, d.data.deptLevel,
)}"/> d.data.isVirtual,
</div> )}"/></div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px; <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div class="tooltip">
<div class="tooltitle"> ${d.data.fname} </div> <div title=${
<div class="tooltiptext">${d.data.fname}</div> d.data.fname
</div> } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
<div style="display: ${statisticsStyle}"> <div style="width: 130px;margin: 0 auto;line-height: 18px;display:${two}">分管领导${
<span style="color:red">${d.data.staffNum}</span> / d.data.header
<span style="color:green">${d.data.onJobNum}</span> } </div>
</div> <div style="width: 120px;margin: 0 auto;line-height: 18px;">
</div> <p style="display:${one}">${d.data.leader}</p>
<p style="display:${three}"> &nbsp;|| ${d.data.deputyLeader}</p>
</div>
</div>
</div> </div>
`; `;
} }
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 &&
@ -244,56 +208,6 @@ 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;
@ -345,89 +259,37 @@ export default function companyPage() {
}); });
} }
/**
* 导出
* @param {*} type
*/
const handleExport = (type) => { const handleExport = (type) => {
if (type == 'png') { if (type == 'png') {
const hiddenElements = document.querySelectorAll('.tooltitle'); orgChart && orgChart.exportImg({ full: true, scale: 12 });
const hiddenElementsArray = Array.from(hiddenElements);
// DOM
hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
orgChart && orgChart.exportImg({ full: true });
} else { } else {
orgChart && downloadPdf(orgChart); orgChart && downloadPdf(orgChart);
} }
}; };
/** const handleSearch = (requestData) => {
* 时间轴点击 setLoading(true);
* @param {*} timeline topBarSearchRequest.current = requestData;
*/
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;
let api = let api =
'/api/bs/hrmorganization/orgchart/companyData' + '/api/ais/orgChart/companyData' +
qs.stringify(requestData, { addQueryPrefix: true }); qs.stringify(requestData, { addQueryPrefix: true });
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((resp) => {
if (data.data) { if (resp.status) {
if (!data.data.length) { if (!resp.data.data.length) {
setData([{}]); setData([{}]);
message.warning(`${getLabel(547516, labelData)}`); message.warning('暂无数据');
} else { } else {
setData(data?.data); setData(resp.data.data);
setTimeout(function () {
setLoading(false);
}, 1000);
} }
} }
setTimeout(function () {
setSpinning(false);
}, 200);
}); });
}; };
/**
* 切换维度
* @param {*} requestData
*/
const handleChange = (requestData) => {
setTimelineId(0);
timeLine.searchTimeLines(
`/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
);
requestData = { ...requestData, id: 0 };
handleSearch(requestData, false);
};
useEffect(() => { useEffect(() => {
if (active == 'left') { if (active == 'left') {
orgChart && orgChart &&
@ -451,74 +313,53 @@ export default function companyPage() {
style={{ display: 'block', margin: '0 auto' }} style={{ display: 'block', margin: '0 auto' }}
src="./img/permission.png" src="./img/permission.png"
/> />
<p style={{ textAlign: 'center' }}>{getLabel(547515, labelData)}</p> <p style={{ textAlign: 'center' }}>对不起您暂时没有权限!</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); }}
}} type="company"
changeFclass={(requestData) => { url="/api/ais/orgChart/getSearchCondition"
handleChange(requestData);
}}
type="company"
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company&id=0"
labelData={labelData}
/>
<ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
onLeftLayoutClick={(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)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
onZoomBehavior={(value) => handleZoomBehavior(value)}
/>
<TimeLine
ref={(r) => (timeLine = r)}
onClick={(timeline) => {
timeLineSearch(timeline);
}}
url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
labelData={labelData}
/>
<Spin size="large" spinning={spinning}>
<OrgChartComponent
setChart={(chart) => (orgChart = chart)}
setClick={(click) => (addNodeChildFunc = click)}
onNodeClick={onNodeClick}
data={data}
onButtonClick={onButtonClick}
buttonContent={buttonContentRender}
nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender}
/> />
</Spin> <WaterMark content={watermark} font="20px Microsoft Yahei">
<DrawerComponents ref={(r) => (drawerCom = r)} labelData={labelData} /> <ToolBar
<OperateDialog onTopLayoutClick={(progressBtn) =>
ref={(r) => (operateCom = r)} handleTopLayoutClick(progressBtn)
addFolderNode={addFolderNode} }
deleteNode={deleteNode} onLeftLayoutClick={(progressBtn) =>
labelData={labelData} handleLeftLayoutClick(progressBtn)
/> }
</div> onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
onZoomBehavior={(value) => handleZoomBehavior(value)}
/>
<Spin spinning={loading} tip="页面加载中 请稍候">
<OrgChartComponent
setChart={(chart) => (orgChart = chart)}
setClick={(click) => (addNodeChildFunc = click)}
onNodeClick={onNodeClick}
data={data}
onButtonClick={onButtonClick}
buttonContent={buttonContentRender}
nodeWidth={nodeWidthRender}
nodeHeight={nodeHeightRender}
nodeContent={nodeContentRender}
/>
</Spin>
</WaterMark>
</div>
</>
) )
); );
} }

@ -1,496 +0,0 @@
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,7 +1,11 @@
#root { /*
min-height: 100vh; * @Author: Chengliang 1546584672@qq.com
} * @Date: 2023-08-08 17:38:47
* @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2023-08-09 14:38:52
* @FilePath: /org-chart-frant/src/pages/index.less
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEmax
*/
.title { .title {
background: rgb(121, 242, 157); background: rgb(121, 242, 157);
} }
@ -14,144 +18,6 @@
background-color: #f7f9fd; background-color: #f7f9fd;
} }
.ant-tree .ant-tree-node-content-wrapper:hover { .chartContainer {
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; 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;
} }

@ -1,110 +0,0 @@
/*
* @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,7 +4,6 @@ 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';
@ -12,8 +11,6 @@ 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'),
@ -28,7 +25,7 @@ export default function userPage() {
let progressBtnRef = null; let progressBtnRef = null;
const [hasRight, setHasRight] = useState(''); const [hasRight, setHasRight] = useState('');
const [id, setId] = useState(0);
// //
function onNodeClick(nodeId) { function onNodeClick(nodeId) {
// alert('clicked ' + nodeId); // alert('clicked ' + nodeId);
@ -53,11 +50,12 @@ export default function userPage() {
if (topBarSearchRequest) { if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr }; let request = { ...topBarSearchRequest, ids: idsStr };
api = api =
'/api/bs/hrmorganization/orgchart/asyncUserData' + '/api/bs/hrmorganization/jclorgchart/asyncUserData' +
qs.stringify(request, { addQueryPrefix: true }); qs.stringify(request, { addQueryPrefix: true });
} else { } else {
api = api =
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&fisvitual=0&root=0&level=3&id=0' + '/api/bs/hrmorganization/jclorgchart/asyncUserData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') +
'&ids=' + '&ids=' +
idsStr; idsStr;
} }
@ -74,16 +72,6 @@ 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;
@ -99,12 +87,14 @@ export default function userPage() {
// //
useEffect(() => { useEffect(() => {
document.cookie = document.cookie =
'ecology_JSessionid=aaaLiDqzA0rZHgPBdxGez; JSESSIONID=aaaLiDqzA0rZHgPBdxGez; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7b9b3b9b-a780-4d6a-b8d5-22d0f8aaf11a'; '33_ecology_JSessionid=aaaa-IcPBu61A7ZrtCyLy; JSESSIONID=aaaa-IcPBu61A7ZrtCyLy; ecology_JSessionid=aaaa-IcPBu61A7ZrtCyLy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; CASTGC=TGT-1-H9KSLsgcxVxv1DacS9ONFSR2Ajb3nkZDho15XOOnoAtQN4ypIb-c01';
d3.json( d3.json(
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0', // "/user/data"
'/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('true');
}); });
}, [true]); }, [true]);
@ -171,6 +161,10 @@ 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,19 +190,16 @@ export default function userPage() {
const handleExport = (type) => { const handleExport = (type) => {
if (type == 'png') { if (type == 'png') {
orgChart && orgChart.exportImg({ full: true }); orgChart && orgChart.exportImg({ full: true, scale: 12 });
} else { } else {
orgChart && downloadPdf(orgChart); orgChart && downloadPdf(orgChart);
} }
}; };
const handleSearch = (requestData, cache = true) => { const handleSearch = (requestData) => {
if (cache) {
requestData = { ...requestData, id: id };
}
setTpBarSearchRequest(requestData); setTpBarSearchRequest(requestData);
let api = let api =
'/api/bs/hrmorganization/orgchart/userData' + '/api/bs/hrmorganization/jclorgchart/userData' +
qs.stringify(requestData, { addQueryPrefix: true }); qs.stringify(requestData, { addQueryPrefix: true });
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
@ -223,18 +214,6 @@ export default function userPage() {
} }
}); });
}; };
/**
* 切换维度
* @param {*} requestData
*/
const handleChange = (requestData) => {
timeLine.searchTimeLines(
`/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
);
handleSearch(requestData);
};
useEffect(() => { useEffect(() => {
if (active == 'left') { if (active == 'left') {
orgChart && orgChart &&
@ -257,15 +236,15 @@ export default function userPage() {
let companyUrl = let companyUrl =
'/spa/organization/static/index.html#/main/organization/group'; '/spa/organization/static/index.html#/main/organization/group';
// //
let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`; let subcompanyUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=subcompany&id=${d.data.fobjid}`;
// //
let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`; let departmentUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=department&id=${d.data.fobjid}`;
// //
let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`; let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`;
// //
let userUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fleader}`; let userUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fleader}`;
// //
let postUserUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fobjid}`; let postUserUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fobjid}`;
// //
let addressBookGroupUrl = `/spa/organization/static/index.html#/main/organization/resource/?virtualtype=0`; let addressBookGroupUrl = `/spa/organization/static/index.html#/main/organization/resource/?virtualtype=0`;
// //
@ -290,7 +269,9 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
" onclick="if(${d.data.fisvitual}==1) return;window.open('${ " onclick="if(${d.data.fisvitual}==1||${
d.data.ftype
}==0) return;window.open('${
d.data.ftype == 0 d.data.ftype == 0
? companyUrl ? companyUrl
: d.data.ftype == 1 : d.data.ftype == 1
@ -311,9 +292,9 @@ export default function userPage() {
<img src="${ <img src="${
d.data.fleaderimg d.data.fleaderimg
? d.data.fleaderimg ? d.data.fleaderimg
: d.data.ftype == 0 || d.data.ftype == 1 : d.data.ftype == 0
? './img/company.png' ? './img/company.png'
: './img/department.png' : './img/default_avator.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%" >
@ -348,17 +329,9 @@ export default function userPage() {
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${ <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${
d.data.fplan d.data.fplan
}</div> }</div>
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;" onclick="if(${ <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;">在岗: ${
d.data.fisvitual d.data.fonjob
}==1) return;event.stopPropagation();window.open('${ }</div>
d.data.ftype == 0
? addressBookGroupUrl
: d.data.ftype == 1
? addressBookUrl
: d.data.ftype == 2
? addressBookDepartmentUrl
: ''
}', '_blank')">在岗: ${d.data.fonjob}</div>
</div> </div>
</div> </div>
</div> </div>
@ -379,9 +352,7 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
" onclick="if(${ " onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
d.data.fname d.data.fname
}</span> }</span>
<span style="margin-left: 70px;"> <span style="margin-left: 70px;">
@ -400,9 +371,7 @@ export default function userPage() {
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 23px; margin-bottom: 23px;
" onclick="if(${ " onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
d.data.fname d.data.fname
}</div> }</div>
<div style=" <div style="
@ -413,11 +382,7 @@ export default function userPage() {
display: ${d.data.fisvitual == 0 ? 'flex' : 'none'}; display: ${d.data.fisvitual == 0 ? 'flex' : 'none'};
"> ">
<span>编制${d.data.fplan}</span> <span>编制${d.data.fplan}</span>
<span style="margin-left: 10px;" onclick="if(${ <span style="margin-left: 10px;">在岗${d.data.fonjob}</span>
d.data.fisvitual
}==1) return;window.open('${addressBookPostUrl}', '_blank')">在岗${
d.data.fonjob
}</span>
</div> </div>
</div> </div>
</div> </div>
@ -510,7 +475,6 @@ 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);
}} }}
@ -518,11 +482,8 @@ export default function userPage() {
setRequestRes(requestData); setRequestRes(requestData);
handleSearch(requestData); handleSearch(requestData);
}} }}
changeFclass={(requestData) => {
handleChange(requestData);
}}
type="user" type="user"
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=user" url="/api/bs/hrmorganization/jclorgchart/getCondition?type=user"
/> />
<ToolBar <ToolBar
onTopLayoutClick={handleTopLayoutClick} onTopLayoutClick={handleTopLayoutClick}
@ -530,13 +491,6 @@ 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)}

@ -1,15 +0,0 @@
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…
Cancel
Save