1231

Author: DesignHhuang

README.md

@@ -1,6 +1,8 @@
 # flowchart-angular6
 一个基于jsplumb的使用angular6写的一个可拖拽的流程图实例(目前已更新到Angular 7版本)
 
+### 更新：解决ng-zorro版本更新带来的图标加载问题
+
 * 网上找了很久都没有找到用angular实现的可拖拽式的流程图组件，于是就基于jsplumb自己写了一个，实现了一些基本的功能，后续可能会再添加点。
 
 ### demo演示

src/app/core/startup/startup.service.ts

@@ -6,10 +6,14 @@ import { MenuService, SettingsService, TitleService, ALAIN_I18N_TOKEN } from '@d
 import { ACLService } from '@delon/acl';
 import { TranslateService } from '@ngx-translate/core';
 import { I18NService } from '@core/i18n/i18n.service';
+import { NzIconService } from 'ng-zorro-antd';
+import { ICONS_AUTO } from '../../../style-icons-auto';
+import { ICONS } from '../../../style-icons';
 
 @Injectable()
 export class StartupService {
     constructor(
+        iconSrv: NzIconService,
         private menuService: MenuService,
         private translate: TranslateService,
         @Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
@@ -18,7 +22,7 @@ export class StartupService {
         private titleService: TitleService,
         private httpClient: HttpClient,
         private injector: Injector,
-    ) { }
+    ) { iconSrv.addIcon(...ICONS_AUTO, ...ICONS); }
 
     load(): Promise<any> {
         return new Promise((resolve, reject) => {

src/app/routes/default/default.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, } from '@angular/core';
+import { Component, OnInit, Renderer2 } from '@angular/core';
 import $ from 'jquery';
 import * as d3 from 'd3';
 declare const jsPlumb: any;
@@ -28,7 +28,7 @@ export class LayoutDefaultComponent implements OnInit {
     currentNodeData;
     instance;
 
-    constructor(private http: _HttpClient, private msg: NzMessageService, private modalService: NzModalService) {
+    constructor(private http: _HttpClient, private msg: NzMessageService, private modalService: NzModalService, private renderer: Renderer2) {
 
     }
 
@@ -115,8 +115,8 @@ export class LayoutDefaultComponent implements OnInit {
 
         /* <div id='" + nodeId + "-selectfile' title='详情'><i class='anticon anticon-profile'></i></div> */
 
-        $('#' + nodeId).append("<div class='huangcard'><div class='zuo'><div class='title'><strong>" + data.name + "</strong></div><div class='card-content'><i class='anticon anticon-user'></i><span class='mes'>" + data.id + "黄小民</span></div><div class='card-content'><i class='anticon anticon-message'></i><span class='mes'>低质量数据过滤</span></div><div class='card-content'><i class='anticon anticon-clock-circle-o'></i><span class='mes'>执行时间：20min20s</span></div></div><div class='you'><div id='" + nodeId + "-setting' title='参数设置'><i class='anticon anticon-setting'></i></div><div id='" + nodeId + "-inputFile' title='上传文件'><i class='anticon anticon-file-add'></i></div><div id='" + nodeId + "-delete' title='删除'><i class='anticon anticon-delete'></i></div></div></div>")
-        data.inputFile ? $('#' + nodeId + '-setting').hide() : $('#' + nodeId + '-inputFile').hide();
+        $('#' + nodeId).append($("<div class='huangcard'><div class='zuo'><div class='title'><strong>" + data.name + "</strong></div><div class='card-content'><i class='anticon anticon-user'></i><span class='mes'>" + data.id + "黄小民</span></div><div class='card-content'><i class='anticon anticon-message'></i><span class='mes'>低质量数据过滤</span></div><div class='card-content'><i class='anticon anticon-clock-circle-o'></i><span class='mes'>执行时间：20min20s</span></div></div><div class='you'><div id='" + nodeId + "-setting' title='参数设置'><i class='anticon anticon-setting'></i></div><div id='" + nodeId + "-inputFile' title='上传文件'><i class='anticon anticon-file-add'></i></div><div id='" + nodeId + "-delete' title='删除'><i class='anticon anticon-delete'></i></div></div></div>"));
+        /* data.inputFile ? $('#' + nodeId + '-setting').hide() : $('#' + nodeId + '-inputFile').hide(); */
         $('#' + nodeId + '-delete').click(function () {
             instance.detachAllConnections(nodeId);
             instance.deleteEndpoint(nodeId + "-Top");
@@ -135,6 +135,7 @@ export class LayoutDefaultComponent implements OnInit {
     }
 
     selectInputfileModal(nodeId, toolId) {
+        console.log("输入文件选择" + nodeId + 'tool' + toolId)
         this.modalService.create({
             nzTitle: '输入文件选择',
             nzContent: NodeSelectfileComponent,

src/app/routes/node-selectfile/index.ts

@@ -29,6 +29,7 @@ export class NodeSelectfileComponent implements OnInit {
     ];
 
     ngOnInit() {
+        console.log('select start')
         this.getData();
     }
 
@@ -39,10 +40,10 @@ export class NodeSelectfileComponent implements OnInit {
         });
     }
 
-    checkboxChange(e, list: any[]) {
+    checkboxChange(e) {
+        console.log(e)
         if (e.type == "checkbox") {
-            console.log('checkboxChange', list);
-            this.filelist = list;
+            this.filelist = e.checkbox;
         }
     }
 

src/style-icons-auto.ts

@@ -0,0 +1,23 @@
+import {
+    /*   UserOutline,
+      SelectOutline,
+      DeleteOutline,
+      ProfileOutline,
+      MessageOutline,
+      ClockCircleOutline,
+      SettingOutline,
+      FileAddOutline,
+      UploadOutline, */
+} from '@ant-design/icons-angular/icons';
+
+export const ICONS_AUTO = [
+    /*  UserOutline,
+     SelectOutline,
+     DeleteOutline,
+     ProfileOutline,
+     MessageOutline,
+     ClockCircleOutline,
+     SettingOutline,
+     FileAddOutline,
+     UploadOutline, */
+];

src/style-icons.ts

@@ -0,0 +1,9 @@
+import {
+    InfoOutline,
+    BulbOutline,
+    ProfileOutline,
+    ExceptionOutline,
+    LinkOutline,
+} from '@ant-design/icons-angular/icons';
+
+export const ICONS = [InfoOutline, BulbOutline, ProfileOutline, ExceptionOutline, LinkOutline];