VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/wwwroot/js/workflowHelper.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined'
        ? factory(exports)
        : typeof define === 'function' && define.amd
            ? define(['exports'], factory)
            : (global = global || self, factory(global.vber = { a: "1" }));
    // ReSharper disable once ThisInGlobalContext
}(this, (function (exports) {
    'use strict';
    let abp = window.abp || {};

    let VbWorkflow = function ($) {
        let NAME = 'VbWorkflow';
        let DATA_KEY = 'vb.workflow';
        let EVENT_KEY = "." + DATA_KEY;

        let ClassName = {
            CONTAINER: "wf-container",
            STEP_TAB: "step-tab",
            STEP_TAB_ITEM: "step-tab-item",
            STEP_CONTENT: "step-content",
            STEP_CONTENT_ITEM: "step-content-item",
            STEP_TOOL: "step-tool",
            STEP_TOOL_BTN_PREV: "prev",
            STEP_TOOL_BTN_NEXT: "next",
            STEP_TOOL_BTN_COMPLETE: "complete",
            DESIGN_CONTAINER: "design-container",
            DESIGN_LEFT: "design-left",
            DESIGN_MID: "design-mid",
            DESIGN_RIGHT: "design-right",
            DESIGN_MOVE_COL: "design-move-col",
            DRAG_SELECT: "drag-select",
            FORM_DESIGN_CONTAINER: "from-design-container",
            FORM_COMPONENT: "form-component",
            FORM_COMPONENT_ITEM: "form-component-item",
            DY_FORM_CONTAINER: "dy-form-container",
            DY_FORM_DRAG_BOX: "dy-form-drag-box",
            DY_FORM_INPUT_BOX: "dy-form-input-box",
            DY_FORM_INPUT_PARAMS: "dy-form-input-params",
            FORM_DESIGN: "form-design",
            FORM_DESIGN_BTN_GROUP_ADD: "form-design-btn-group-add",
            FLOW_DESIGN_CONTAINER: "flow-design-container",
            FLOW_DESIGN_NODE_SOURCE: "node-source",
            FLOW_DESIGN: "flow-design",
            FLOW_DESIGN_NODE: "flow-design-node",
            FLOW_DESIGN_DETAIL: "flow-design-detail",
            FLOW_DESIGN_DETAIL_BOX: "flow-design-detail-box",
            CONDITION: "condition",
            HOVER: "hover",
            ADD: "add",
            DELETE: "delete",
            ITEM: "item",
            TITLE: "title",
            SHOW: "show",
            HIDE: "hide",
            FINISH: "finished",
            ACTIVE: "active"
        }
        let IdName = {
            BASE_FORM: "base-form",
            FLOW_DESIGN: "flow-design",
            FLOW_DETAIL_TAB_NODE: "flow-detail-tab-node",
            FLOW_DETAIL_TAB_CONTENT_NODE: "flow-detail-tab-content-node",
            FLOW_DETAIL_TAB_LINE: "flow-detail-tab-line",
            FLOW_DETAIL_TAB_CONTENT_LINE: "flow-detail-tab-content-line",
        }
        let Selector = {
            CONTAINER: `.${ClassName.CONTAINER}`,
            STEP_TAB: `.${ClassName.CONTAINER} .${ClassName.STEP_TAB}`,
            STEP_TAB_ITEM: `.${ClassName.CONTAINER} .${ClassName.STEP_TAB_ITEM}`,
            STEP_CONTENT: `.${ClassName.CONTAINER} .${ClassName.STEP_CONTENT}`,
            STEP_CONTENT_ITEM: `.${ClassName.CONTAINER} .${ClassName.STEP_CONTENT_ITEM}`,
            STEP_CONTENT_ITEM_SHOW: `.${ClassName.CONTAINER} .${ClassName.STEP_CONTENT_ITEM}.${ClassName.SHOW}`,
            STEP_TOOL: `.${ClassName.CONTAINER} .${ClassName.STEP_TOOL}`,
            STEP_TOOL_BTN_PREV: `.${ClassName.CONTAINER} .${ClassName.STEP_TOOL} .${ClassName.STEP_TOOL_BTN_PREV}`,
            STEP_TOOL_BTN_NEXT: `.${ClassName.CONTAINER} .${ClassName.STEP_TOOL} .${ClassName.STEP_TOOL_BTN_NEXT}`,
            STEP_TOOL_BTN_COMPLETE: `.${ClassName.CONTAINER} .${ClassName.STEP_TOOL} .${ClassName.STEP_TOOL_BTN_COMPLETE}`,
            STEP_TOOL_BTN_SHOW: `.${ClassName.CONTAINER} .${ClassName.STEP_TOOL} .${ClassName.SHOW}`,
            STEP_TAB_ITEM_ACTIVE: `.${ClassName.CONTAINER} .${ClassName.STEP_TAB_ITEM}.${ClassName.ACTIVE}`,
            STEP_TAB_ITEM_FINISH: `.${ClassName.CONTAINER} .${ClassName.STEP_TAB_ITEM}.${ClassName.FINISH}`,
            BASE_FORM: `.${ClassName.CONTAINER} #${IdName.BASE_FORM}`,
            DESIGN_CONTAINER: `.${ClassName.CONTAINER} .${ClassName.DESIGN_CONTAINER}`,
            DESIGN_LEFT: `.${ClassName.DESIGN_LEFT}`,
            DESIGN_MID: `.${ClassName.DESIGN_MID}`,
            DESIGN_RIGHT: `.${ClassName.DESIGN_RIGHT}`,
            DESIGN_MOVE_COL: `.${ClassName.DESIGN_MOVE_COL}`,
            FORM_DESIGN_CONTAINER: `.${ClassName.CONTAINER}  .${ClassName.FORM_DESIGN_CONTAINER} `,
            FORM_COMPONENT: `.${ClassName.CONTAINER} .${ClassName.FORM_COMPONENT}`,
            FORM_COMPONENT_ITEM: `.${ClassName.CONTAINER} .${ClassName.FORM_COMPONENT} .${ClassName.FORM_COMPONENT_ITEM}`,
            FORM_DESIGN: `#${IdName.FORM_DESIGN}`,
            DY_FORM_CONTAINER: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER}`,
            DY_FORM_DRAG_BOX: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER} .${ClassName.DY_FORM_DRAG_BOX}`,
            DY_FORM_DRAG_BOX_DELETE: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER} .${ClassName.DY_FORM_DRAG_BOX}>.${ClassName.DELETE}`,
            DY_FORM_DRAG_ITEM: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER} .${ClassName.DY_FORM_DRAG_BOX}>.${ClassName.ITEM}`,
            DY_FORM_INPUT_BOX: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER} .${ClassName.DY_FORM_DRAG_BOX}>.${ClassName.ITEM} .${ClassName.DY_FORM_INPUT_BOX} `,
            DY_FORM_INPUT_BOX_DELETE: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.DY_FORM_CONTAINER} .${ClassName.DY_FORM_DRAG_BOX}>.${ClassName.ITEM} .${ClassName.DY_FORM_INPUT_BOX} >.${ClassName.DELETE}`,
            FORM_DESIGN_RIGHT: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN_CONTAINER} .${ClassName.DESIGN_RIGHT}`,
            DY_FORM_INPUT_PARAMS: `.${ClassName.CONTAINER} .${ClassName.DESIGN_CONTAINER} .${ClassName.DESIGN_RIGHT} .${ClassName.DY_FORM_INPUT_PARAMS}`,
            FORM_DESIGN_BTN_ROW_ADD: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.ADD}`,
            FORM_DESIGN_BTN_GROUP_ADD: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.FORM_DESIGN_BTN_GROUP_ADD}`,
            FORM_DESIGN_BTN_GROUP_ADD_BTN: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.FORM_DESIGN_BTN_GROUP_ADD} button`,
            FLOW_DESIGN_CONTAINER: `.${ClassName.CONTAINER} .${ClassName.FLOW_DESIGN_CONTAINER}`,
            FLOW_DESIGN_NODE_SOURCE: `.${ClassName.CONTAINER} .${ClassName.FORM_DESIGN} .${ClassName.FLOW_DESIGN_NODE_SOURCE}`,
            FLOW_DESIGN_NODE_SOURCE_ITEM: `.${ClassName.FLOW_DESIGN_NODE_SOURCE} .${ClassName.ITEM}`,
            FLOW_DESIGN: `.${ClassName.CONTAINER} .${ClassName.FLOW_DESIGN}`,
            FLOW_DESIGN_NODE: `.${ClassName.CONTAINER} .${ClassName.FLOW_DESIGN} .${ClassName.FLOW_DESIGN_NODE}`,
            FLOW_DESIGN_PATH: `.${ClassName.FLOW_DESIGN} .jtk-connector,.${ClassName.FLOW_DESIGN} .jtk-overlay`,
            FLOW_DESIGN_PATH_HOVER: `.${ClassName.FLOW_DESIGN} .jtk-connector.jtk-hover,.${ClassName.FLOW_DESIGN} .jtk-overlay.jtk-hover`,
            FLOW_DESIGN_PATH_ACTIVE: `.${ClassName.FLOW_DESIGN} .jtk-connector.active,.${ClassName.FLOW_DESIGN} .jtk-overlay.active`,
            FLOW_DETAIL_TAB_NODE: `#${IdName.FLOW_DETAIL_TAB_NODE}`,
            FLOW_DETAIL_TAB_CONTENT_NODE: `#${IdName.FLOW_DETAIL_TAB_CONTENT_NODE}`,
            FLOW_DETAIL_TAB_LINE: `#${IdName.FLOW_DETAIL_TAB_LINE}`,
            FLOW_DETAIL_TAB_CONTENT_LINE: `#${IdName.FLOW_DETAIL_TAB_CONTENT_LINE}`,
            FLOW_DESIGN_DETAIL: `.${ClassName.CONTAINER}  .${ClassName.FLOW_DESIGN_DETAIL}`,
            FLOW_DESIGN_DETAIL_TITLE: `.${ClassName.CONTAINER} .${ClassName.FLOW_DESIGN_DETAIL}>.${ClassName.TITLE}`,
            FLOW_DESIGN_DETAIL_BOX: `.${ClassName.CONTAINER}  .${ClassName.FLOW_DESIGN_DETAIL_BOX}`,
            CONDITION: `.${ClassName.CONDITION}`,
            ADD_ITEM: `.${ClassName.ADD}-${ClassName.ITEM}`,
        }
        let JQUERY_NO_CONFLICT = $.fn[NAME];
        let Default = {
            formComponents: [
                {
                    name: "",
                    label: "单行文本",
                    type: "text",
                    styles: [],
                }, {
                    name: "",
                    label: "多行文本",
                    type: "textarea",
                    styles: []
                }, {
                    name: "",
                    label: "复选框",
                    type: "checkbox",
                    items: [
                        { label: "item1", value: "item1" },
                        { label: "item2", value: "item2" }
                    ],
                    styles: []
                }, {
                    name: "",
                    label: "单选框",
                    type: "radio",
                    items: [
                        { label: "item1", value: "item1" },
                        { label: "item2", value: "item2" }
                    ],
                    styles: []
                    //}, {
                    //    name: "",
                    //    label: "文字",
                    //    type: "paragraph",
                    //    styles: []
                }, {
                    name: "",
                    label: "下拉选择框",
                    type: "select",
                    items: [
                        { label: "item1", value: "item1" },
                        { label: "item2", value: "item2" }
                    ],
                    styles: []
                }, {
                    name: "",
                    label: "日期选择器",
                    type: "date",
                    styles: [{ name: 'width', value: "100%" }]
                }, {
                    name: "",
                    label: "日期段选择器",
                    type: "date-range",
                    styles: [{ name: 'width', value: "100%" }]
                    //}, {
                    //    name: "",
                    //    label: "评分器",
                    //    type: "rate",
                    //    styles: []
                    //}, {
                    //    name: "",
                    //    label: "开关选择器",
                    //    type: "switch",
                    //    styles: []
                    //}, {
                    //    name: "",
                    //    label: "人民币输入框",
                    //    type: "money",
                    //    styles: [{ name: 'width', value: "100%" }]
                }, {
                    name: "",
                    label: "数字输入框",
                    type: "number",
                    styles: [{ name: 'width', value: "100%" }]
                }, {
                    name: "",
                    label: "图片上传",
                    type: "uploadImages",
                    styles: []
                }, {
                    name: "",
                    label: "文件上传",
                    type: "uploadFiles",
                    styles: []
                }],
            rules: [{
                name: "required",
                label: "必填",
                value: { required: true, message: "此项必填" }
            }, {
                name: "number",
                label: "整数",
                value: { type: "string", message: "请输入数字", pattern: /^-?\d+$/ }
            }, {
                name: "email",
                label: "邮箱",
                value: { type: 'email', message: "请输入正确的邮箱" }
            }, {
                name: "phonenumber",
                label: "手机号",
                value: { type: "string", message: "请输入正确的手机号", pattern: /^1[3|4|5|7|8]d{9}$/ }
            }],
            sourceNodes: [{
                key: "start",
                title: "流程开始",
                icon: "fa fa-play",
                type: "success",
                group: "1",
                endpointOptions: [{
                    anchor: "Bottom",
                    maxConnections: -1
                }],
                position: [20, 20],
                stepBody: {},
                parentNodes: [],
                nextNodes: []
            },
            {
                key: "end",
                title: "流程结束",
                icon: "fa fa-square",
                type: "danger",
                group: "1",
                endpointOptions: [{
                    anchor: "Top",
                    maxConnections: -1
                }],
                position: [20, 20],
                stepBody: {},
                parentNodes: [],
                nextNodes: []
            },
            {
                key: "step",
                title: "任务节点",
                icon: "fa fa-cog",
                type: "primary",
                group: "2",
                endpointOptions: [{
                    anchor: "Top",
                    maxConnections: -1
                }, {
                    anchor: "Bottom",
                    maxConnections: -1
                }],
                position: [20, 20],
                stepBody: {},
                parentNodes: [],
                nextNodes: []
            }
            ],
            endpointOptions: {
                isSource: true,
                isTarget: true,
                connector: "Flowchart",
                maxConnections: 1,
                paintStyle: {
                    fill: "#FFDA59",
                    strokeWidth: 1
                }
            },
            jsPlumbOptions: {
                DragOptions: { cursor: "crosshair" },
                Endpoint: [
                    "Dot",
                    {
                        radius: 8,
                        cssClass: "point",
                        hoverClass: "hover",
                    }

                ],
                PaintStyle: {
                    stroke: "#FFE177",
                    strokeWidth: 3
                },
                HoverPaintStyle: {
                    stroke: "#FFDA59",
                    strokeWidth: 4
                },
                //Container: "jsPlumb-container",
                Connector: [
                    "Flowchart",
                    { gap: 5, cornerRadius: 5, alwaysRespectStubs: true }
                ],
                ConnectionOverlays: [
                    [
                        "Arrow",
                        {
                            width: 12,
                            length: 15,
                            location: 0.9
                        }
                    ], [
                        "Arrow",
                        {
                            width: 12,
                            length: 15,
                            location: "30px"
                        }
                    ],
                    [
                        "Label",
                        {
                            label: "",
                            cssClass: "",
                            id: "label",
                            labelStyle: {
                                color: "#009ef7",
                                fontSize: "15px",
                                fontWeight: "600"
                            },
                            //events: {
                            //    click: function (labelOverlay, originalEvent) {
                            //        console.log(labelOverlay, originalEvent);
                            //    }
                            //}
                        }
                    ]
                ]
            },
            stepBodies: [],
            submit: undefined,
            data: undefined
        }
        const ALLOW_METHOD = [
            'init',
            'getStepBodies',
            'setStepBodies',
        ];
        const ALLOW_METHOD_2 = [
            'useDyForm',
            'getDyFormData',
        ];

        let Workflow = function () {
            function Workflow(element, config) {
                this._element = element;
                this._config = config;
                return this;
            }

            let instance, maxStep = 3, curStep = 0, curNode = {}, curConnection = {}, conditionNode = { label: "", conditions: [] }, templates = [`<span class="drag-info">请将组件拖至此处</span><div></div>`];
            const guid = function () {
                return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            }

            // Public
            let _proto = Workflow.prototype;

            _proto.init = function () {
                let _this = this, _config = _this._config;
                $.metPageJs("/libs-ext/jsplumb/dist/js/jsplumb.min.js", "dy-js-plumb");
                $.metPageCss("/css/workflow.min.css", "dy-css-plumb");
                _config.data = _config.data || {
                    id: "",
                    version: "",
                    title: "",
                    group: "",
                    icon: "",
                    color: "",
                    description: "",
                    inputs: [],
                    nodes: []
                }
                _this.createContainer();
                instance = jsPlumb.getInstance(_this.getJsPlumbOptions());
                instance.setContainer($(Selector.FORM_DESIGN)[0]);
                _this.bindEvent();
            };
            _proto.getJsPlumbOptions = function () {
                let _this = this, _config = _this._config;
                return _config.jsPlumbOptions;
            }
            _proto.getNode = function (key) {
                let _this = this, _config = _this._config;
                return _config.data.nodes.find(v => v.key == key);
            }
            _proto.createContainer = function () {
                let _this = this, _config = _this._config, data = _config.data;
                //data = {
                //    id: "TEST",
                //    title: "测试工作流",
                //    group: "GR1 ",
                //}
                let str = `<div class="${ClassName.CONTAINER}">
                             <div class="${ClassName.STEP_TAB}">
                               <div class="${ClassName.STEP_TAB_ITEM} ${ClassName.STEP_TAB_ITEM}_0 ${ClassName.ACTIVE}" data-index="0"><i class="fas fa-file-alt"></i>基本信息</div>
                               <div class="${ClassName.STEP_TAB_ITEM} ${ClassName.STEP_TAB_ITEM}_1" data-index="1"><i class="fas fa-table"></i>表单设计</div>
                               <div class="${ClassName.STEP_TAB_ITEM} ${ClassName.STEP_TAB_ITEM}_2" data-index="2"><i class="fas fa-sitemap"></i>流程设计</div>
                             </div>
                             <div class="${ClassName.STEP_CONTENT}">
                               <div class="${ClassName.STEP_CONTENT_ITEM} ${ClassName.STEP_CONTENT_ITEM}_0 ${ClassName.SHOW}" data-index="0">${createBaseInfo()}</div>
                               <div class="${ClassName.STEP_CONTENT_ITEM} ${ClassName.STEP_CONTENT_ITEM}_1" data-index="1">${createFormDesign()}</div>
                               <div class="${ClassName.STEP_CONTENT_ITEM} ${ClassName.STEP_CONTENT_ITEM}_2" data-index="2">${createFlowDesign()}</div>
                             </div>
                             <div class="${ClassName.STEP_TOOL}">
                                <button type="button" class="btn btn-primary ${ClassName.STEP_TOOL_BTN_PREV}">上一步</button>
                                <button type="button" class="btn btn-primary ${ClassName.STEP_TOOL_BTN_NEXT}  ${ClassName.SHOW}">下一步</button>
                                <button type="button" class="btn btn-success ${ClassName.STEP_TOOL_BTN_COMPLETE}">完成</button>
                             </div>
                           </div>`;

                $(_this._element).html(str);
                _this.renderForm(data.inputs, true)
                function createBaseInfo() {
                    let str = `<form id="${IdName.BASE_FORM}">
                                 <input type="hidden" name="version" value="${data.version || "1"}">
                                 <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder required mb-1">流程编号</label>
                                   <input type="text" class="form-control form-control-sm form-control-solid required" name="id" value="${data.id || ""}" placeholder="请输入流程编号...">
                                   <div class="invalid-feedback"></div>
                                 </div>
                                 <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder required mb-1">流程名称</label>
                                   <input type="text" class="form-control form-control-sm form-control-solid required" name="title" value="${data.title || ""}" placeholder="请输入流程名称...">
                                   <div class="invalid-feedback"></div>
                                 </div>

                                 <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder mb-1">流程图标</label>
                                   <input type="text" class="form-control form-control-sm form-control-solid" name="icon" value="${data.icon || ""}" placeholder="请输入流程图标...">
                                   <div class="invalid-feedback"></div>
                                 </div>
                                 <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder mb-1">流程描述</label>
                                   <textarea type="text" class="form-control form-control-sm form-control-solid" name="description" value="${data.description || ""}" placeholder="请输入流程描述..."style="height: 200px;"></textarea>
                                   <div class="invalid-feedback"></div>
                                 </div>
                               </form>`;
                    `      <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder required mb-1">流程分组</label>
                                   <input type="text" class="form-control form-control-sm form-control-solid required" name="group" value="${data.group || ""}" placeholder="请输入流程分组...">
                                   <div class="invalid-feedback"></div>
                                 </div>
                                 <div class="d-flex flex-column">
                                   <label class="fs-6 fw-bolder mb-1">流程颜色</label>
                                   <input type="text" class="form-control form-control-sm form-control-solid" name="color" value="${data.color || ""}" placeholder="请输入流程颜色...">
                                   <div class="invalid-feedback"></div>
                                 </div>`
                    return str;
                }
                function createFormDesign() {
                    let str = `<div class="${ClassName.DESIGN_CONTAINER} ${ClassName.FORM_DESIGN_CONTAINER}">
                                 <div class="${ClassName.DESIGN_LEFT}">${left()}</div>
                                 ${moveCol()}
                                 <div class="${ClassName.DESIGN_MID}">${mid()}</div>
                                 ${moveCol()}
                                 <div class="${ClassName.DESIGN_RIGHT}">${right()}</div>
                               </div>`;

                    function left() {
                        let str1 = `<div class="${ClassName.FORM_COMPONENT}">`;
                        str1 += `<div class="title">表单组件</div>`;
                        _config.formComponents.forEach(v => { str1 += `<button type="button" class="${ClassName.FORM_COMPONENT_ITEM}"  draggable="true" data-type="${v.type}" >${v.label}</button>`; });
                        str1 += `</div>`;
                        return str1;
                    }
                    function mid() {
                        let str2 = `<div class="${ClassName.FORM_DESIGN}">`;
                        str2 += `<div class="${ClassName.DY_FORM_CONTAINER}">`;

                        str2 += `</div>`;
                        str2 += `<button type="button" class="${ClassName.ADD}" onclick="$('${Selector.FORM_DESIGN_BTN_GROUP_ADD}').toggleClass('${ClassName.SHOW}')"><i class="fa fa-plus-circle"></i>添加行</button>`;
                        str2 += `<div class="${ClassName.FORM_DESIGN_BTN_GROUP_ADD}">
                                   <div class="arrow"></div>
                                   <button type="button" data-col="1">一行一列</button>
                                   <button type="button" data-col="2">一行二列</button>
                                   <button type="button" data-col="3">一行三列</button>
                                   <button type="button" data-col="4">一行四列</button>
                                 </div>`;
                        str2 += `</div>`;
                        return str2;
                    }
                    function right() {
                        let str3 = ``;
                        return str3;
                    }
                    return str;
                }
                function createFlowDesign() {
                    let str = `<div class="${ClassName.DESIGN_CONTAINER} ${ClassName.FLOW_DESIGN_CONTAINER}">
                                  <div class="${ClassName.DESIGN_LEFT}">${left()}</div>
                                 ${moveCol()}
                                 <div class="${ClassName.DESIGN_MID}"><div class="${ClassName.FLOW_DESIGN}" id="${IdName.FLOW_DESIGN}"></div></div>
                                 ${moveCol()}
                                 <div class="${ClassName.DESIGN_RIGHT}">${right()}</div>
                               </div>`;

                    function left() {
                        let str = `<div class="${ClassName.FLOW_DESIGN_NODE_SOURCE}">`;
                        str += `<div class="title">活动节点</div>`;
                        if (_config.sourceNodes && _config.sourceNodes.length) {
                            _config.sourceNodes.forEach(v => { str += `<button type="button" class="${ClassName.ITEM} btn btn-${v.type}" data-key="${v.key}" data-type="${v.type}"><i class="${v.icon}"></i>${v.title}</button>`; });
                        }
                        str += `</div>`;
                        return str;
                    }

                    function right() {
                        //let str = `<ul class="nav nav-tabs nav-line-tabs tab-auto">
                        //             <li class="nav-item"><button type="button" class="nav-link active" id="${IdName.FLOW_DETAIL_TAB_NODE}" disabled data-bs-toggle="tab" data-bs-target="#${IdName
                        //        .FLOW_DETAIL_TAB_CONTENT_NODE}">节点</button></li>
                        //             <li class="nav-item"><button type="button" class="nav-link" id="${IdName.FLOW_DETAIL_TAB_LINE}" disabled data-bs-toggle="tab" data-bs-target="#${IdName
                        //        .FLOW_DETAIL_TAB_CONTENT_LINE}">连线</button></li>
                        //           </ul>
                        //           <div class="tab-content" id="">
                        //             <div class="tab-pane fade show active" id="${IdName.FLOW_DETAIL_TAB_CONTENT_NODE}">1</div>
                        //             <div class="tab-pane fade" id="${IdName.FLOW_DETAIL_TAB_CONTENT_LINE}">2</div>
                        //           </div>`;
                        let str = `<div class="${ClassName.FLOW_DESIGN_DETAIL}">`;
                        //str += `<div class="${ClassName.TITLE}">节点详情</div>`;
                        //str += `<div class="${ClassName.FLOW_DESIGN_DETAIL_BOX}"></div>`;
                        str += `</div>`;
                        return str;
                    }
                    return str;
                }
                function moveCol() {
                    return `<div class="${ClassName.DESIGN_MOVE_COL}"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>`
                }
            }
            _proto.createFlow = function () {
                let _this = this, _config = _this._config;
                if ($(Selector.FLOW_DESIGN).data('inti')) {
                    return;
                }
                $(Selector.FLOW_DESIGN).data('inti', true);
                if (_config.data.nodes) {
                    var newData = [];
                    _config.data.nodes.forEach(v => {
                        let node = $.extend(true, {}, _this.createNode(v.type, v.key), v);
                        _this.renderNode(node);
                        newData.push(node);
                    })
                    _config.data.nodes = newData;
                    _config.data.nodes.forEach(v => { _this.createConnect(v); })
                }
            }
            _proto.createConnect = function (node) {
                let _this = this, _config = _this._config;
                const nodeEndpoints = node.endpointOptions;
                node.nextNodes.forEach((v) => {
                    let endpoints = _this.getNode(v.nodeId).endpointOptions;
                    instance.connect({
                        uuids: [nodeEndpoints[nodeEndpoints.length - 1].uuid, endpoints[0].uuid],
                        endpoint: _config.endpointOptions,
                    });
                });
            }
            _proto.createNode = function (type, key) {
                let _this = this, _config = _this._config;
                if (!key && type == "success" && _config.data.nodes.filter((i) => i.type == type).length > 0) {
                    abp.message.warn("只能有一个开始节点");
                    return undefined;
                }
                let node = JSON.parse(JSON.stringify(_config.sourceNodes.find(v => { return v.type == type; })));
                node.key = key ? key : node.key + "_" + guid();
                if (node.endpointOptions) {
                    node.endpointOptions.forEach((option) => {
                        option.uuid = node.key + "_" + option.anchor;
                    });
                }
                return node;
            }
            _proto.renderNode = function (node, isUpdate) {
                let _this = this, _config = _this._config;
                let str = `<button type="button"  class="btn btn-${node.type} ${ClassName.FLOW_DESIGN_NODE}" id="${node.key}" data-key="${node.key}"><i class="${node.icon}"></i><span>${node.title}</span></button>`;
                if (isUpdate) {
                    $(`#${node.key} span`).html(node.title);
                    instance.revalidate(node.key);
                } else {
                    $(Selector.FLOW_DESIGN).append(str);
                    $('#' + node.key).css({ left: node.position[0], top: node.position[1] });
                    //console.log($('#' + node.key));
                    instance.draggable(node.key, {
                        containment: IdName.FLOW_DESIGN,
                        grid: [10, 10],
                        drag: (params) => {
                            curNode.position = params.pos;
                            //console.log("drag====>", params, curNode);
                        }
                    });
                    if (node.endpointOptions && node.endpointOptions.length) {
                        node.endpointOptions.forEach(v => { instance.addEndpoint(node.key, v, _config.endpointOptions); });
                    }
                    //else {
                    //    node.endpointOptions = [];
                    //    const sourceNode = JSON.parse(JSON.stringify(_config.sourceNodes.find(v => { return v.type == node.type; })));
                    //    sourceNode.endpointOptions.forEach(v => {
                    //        let endPoint= instance.addEndpoint(node.key, v, _config.endpointOptions)
                    //        endPoint.uuid = node.key + "_" + v.anchor;
                    //        node.endpointOptions.push(endPoint);
                    //    })
                    //}

                    _this.renderFLowNodeDetail(node);
                    $(Selector.FLOW_DESIGN_NODE).off('mousedown' + EVENT_KEY).on('mousedown' + EVENT_KEY,
                        function () {
                            const key = $(this).data('key');
                            curNode = _this.getNode(key);
                            //console.log("mousedown======>", curNode);
                            _this.renderFLowNodeDetail(curNode);
                        });
                }
            }
            _proto.deleteNode = function (data) {
                let _this = this, _config = _this._config;
                abp.message.confirm(`确定删除节点[${data.title}]吗?`, "删除节点", function (isConfirmed) {
                    if (isConfirmed) {
                        _config.data.nodes.forEach(v => {
                            v.nextNodes = v.nextNodes.filter(u => u.nodeId != data.key);
                            v.parentNodes = v.parentNodes.filter(u => u.nodeId != data.key);
                        });
                        const index = _config.data.nodes.findIndex(v => v.key == data.key);
                        instance.remove(data.key);
                        _config.data.nodes.splice(index, 1);
                        $(Selector.FLOW_DESIGN_DETAIL).html('');
                    }
                });
            }
            _proto.addConnection = function (data) {
                let _this = this, _config = _this._config;
                let source = _this.getNode(data.sourceId);
                let target = _this.getNode(data.targetId);
                if (target.parentNodes.filter(v => v == source.key).length <= 0) {
                    target.parentNodes.push(source.key);
                }
                conditionNode = source.nextNodes.find(v => v.nodeId == target.key);
                if (!conditionNode) {
                    conditionNode = {
                        nodeId: target.key,
                        label: "连线",
                        conditions: []
                    }
                    source.nextNodes.push(conditionNode);
                }
                curConnection = data.connection;
                _this.revalidateConnection(conditionNode);
                _this.renderFLowConnectionDetail(conditionNode);

                //console.log("==?>>>>>", data, _config.data.nodes);
            }
            _proto.revalidateConnection = function (data) {
                if (data != null) {
                    const label = curConnection.getOverlay("label")
                    label.setLabel(data.label);
                    //console.log("==?>>>>>", label)
                    $(label.canvas).removeClass(ClassName.HIDE)
                    if (!data.label) {
                        $(label.canvas).addClass(ClassName.HIDE)
                    }
                }
            }
            _proto.deleteConnection = function (label) {
                let _this = this, _config = _this._config;
                abp.message.confirm(`确定删除连接[${label}]吗?`, "删除连接",
                    function (isConfirmed) {
                        if (isConfirmed) {
                            let source = _this.getNode(curConnection.sourceId);
                            let target = _this.getNode(curConnection.targetId);
                            source.nextNodes = source.nextNodes.filter(
                                (u) => u.nodeId != curConnection.targetId
                            );
                            target.parentNodes = source.parentNodes.filter(
                                (u) => u != curConnection.sourceId
                            );
                            instance.deleteConnection(curConnection);
                        }
                    });
            }
            _proto.renderForm = function (inputs, bindEvent, container) {
                let _this = this;
                if (inputs && inputs.length) {
                    inputs.forEach(v => {
                        _this.renderFormComponent(v.length, v, bindEvent, container);
                        v.forEach(vv => {
                            _this.renderInputDom(vv, bindEvent);
                        })
                    });
                }
            }
            _proto.renderInputDom = function (data, bindEvent, container) {
                let _this = this, _config = _this._config;
                let str = `<div class="${ClassName.DY_FORM_INPUT_BOX}">
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder  mb-1">${data.label}</label>
                               ${getInputDomStr(data.type)}
                               <div class="invalid-feedback"></div>
                             </div>
                             ${bindEvent ? `<i class="fa fa-trash-alt ${ClassName.DELETE}"></i>` : ""}
                           </div>`;
                const $container = container ? $(container) : $('#i_' + data.id);
                $container.html(str);
                if (bindEvent) {
                    _this.bindDyItemInputEvent();
                }
                function getInputDomStr(type) {
                    let str1 = '';
                    let styleStr = '';
                    if (data.styles && data.styles.length) {
                        data.styles.forEach(v => { styleStr += `${v.name}:${v.value};`; });
                    }
                    switch (type) {
                        case 'text':
                        case 'number':
                            str1 =
                                `<input type="${type}" class="form-control form-control-sm form-control-solid" style="${styleStr}" disabled name="${data.name}" placeholder="请输入${data.label}...">`;
                            break;
                        case 'textarea':
                            str1 =
                                `<textarea type="text" class="form-control form-control-sm form-control-solid" style="${styleStr}" disabled name="${data.name}" placeholder="请输入${data.label}..."></textarea>`;
                            break;
                        case 'checkbox':
                        case 'radio':
                            str1 = `<div class="d-flex align-items-center">`;
                            if (data.items && data.items.length) {
                                data.items.forEach(v => {
                                    str1 +=
                                        `<label class="form-check form-check-custom form-check-solid form-check-sm me-5" style="height: 34px;">
                                            <input class=" form-check-input" name="${data.name}" type="${type}" value="${v.value}">
                                            <span class="form-check-label">${v.label}</span>
                                         </label>`;
                                });
                            }
                            str1 += `</div>`;
                            break;
                        case 'select':
                            str1 =
                                `<select class="form-control form-control-sm form-control-solid" style="${styleStr}" disabled name="${data.name}" placeholder="请选择${data.label}...">`;
                            data.items.forEach(v => { str1 += `<option value="${v.value}">${v.label}</option>`; });
                            str1 += `</select>`;
                            break;
                        case 'date':
                        case 'date-range':
                            str1 =
                                `<div class="position-relative d-flex align-items-center" >
                                    <div class="symbol symbol-20px me-4 position-absolute ms-4" data-toggle>
						                <span class="symbol-label bg-secondary">
							                <!--Svg Icon | path: icons/duotone/Layout/Layout-grid.svg-->
							                <span class="svg-icon">
								                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
									                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
										                <rect x="0" y="0" width="24" height="24"></rect>
										                <rect fill="#000000" opacity="0.3" x="4" y="4" width="4" height="4" rx="1"></rect>
										                <path d="M5,10 L7,10 C7.55228475,10 8,10.4477153 8,11 L8,13 C8,13.5522847 7.55228475,14 7,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,7 C14,7.55228475 13.5522847,8 13,8 L11,8 C10.4477153,8 10,7.55228475 10,7 L10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,10 L13,10 C13.5522847,10 14,10.4477153 14,11 L14,13 C14,13.5522847 13.5522847,14 13,14 L11,14 C10.4477153,14 10,13.5522847 10,13 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M17,4 L19,4 C19.5522847,4 20,4.44771525 20,5 L20,7 C20,7.55228475 19.5522847,8 19,8 L17,8 C16.4477153,8 16,7.55228475 16,7 L16,5 C16,4.44771525 16.4477153,4 17,4 Z M17,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 L17,14 C16.4477153,14 16,13.5522847 16,13 L16,11 C16,10.4477153 16.4477153,10 17,10 Z M5,16 L7,16 C7.55228475,16 8,16.4477153 8,17 L8,19 C8,19.5522847 7.55228475,20 7,20 L5,20 C4.44771525,20 4,19.5522847 4,19 L4,17 C4,16.4477153 4.44771525,16 5,16 Z M11,16 L13,16 C13.5522847,16 14,16.4477153 14,17 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,17 C10,16.4477153 10.4477153,16 11,16 Z M17,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,19 C20,19.5522847 19.5522847,20 19,20 L17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,16.4477153 16.4477153,16 17,16 Z" fill="#000000"></path>
									                </g>
								                </svg>
							                </span>
						                </span>
					                </div>
                                    <input type="text" class="form-control form-control-sm form-control-solid  ps-12 flatpickr-input vb-${type}" data-vb-date="${type == 'date' ? 'date' : 'r_date'}" name="${data.name}"  placeholder="请选择日期..."/>
                                </div>`;
                            break;
                        case 'uploadFiles':
                        case 'uploadImages':
                            str1 =
                                `<div class="position-relative d-flex align-items-center" data-vb-file-box="" data-vb-file="upload">
                    <input type="hidden" name="${data.name}" value="" />
                    <input type="hidden" name="name_${data.name}" value="" />
                    <input type="hidden" name="ext_${data.name}" value="" />
                    <input type="file" class="form-control form-control-sm form-control-solid" data-vb-file-target-info="${data.name}" data-vb-file-target-ext="ext_${data.name}" data-vb-file-target-name="name_${data.name}" data-vb-file-image="${type == 'uploadImages' ? "1" : "0"}" data-vb-file-max-size="5"/>
                    <div class="position-absolute translate-middle-y top-50 end-0">
                        <button type="button" data-vb-file-btn="clean" class="btn btn-icon btn-active-color-primary " data-bs-toggle="tooltip" title="@(L("Clean"))" style="cursor: pointer;">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path opacity="0.25" d="M6.54184 2.36899C4.34504 2.65912 2.65912 4.34504 2.36899 6.54184C2.16953 8.05208 2 9.94127 2 12C2 14.0587 2.16953 15.9479 2.36899 17.4582C2.65912 19.655 4.34504 21.3409 6.54184 21.631C8.05208 21.8305 9.94127 22 12 22C14.0587 22 15.9479 21.8305 17.4582 21.631C19.655 21.3409 21.3409 19.655 21.631 17.4582C21.8305 15.9479 22 14.0587 22 12C22 9.94127 21.8305 8.05208 21.631 6.54184C21.3409 4.34504 19.655 2.65912 17.4582 2.36899C15.9479 2.16953 14.0587 2 12 2C9.94127 2 8.05208 2.16953 6.54184 2.36899Z" fill="#12131A"></path>
                                    <path d="M8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8Z" fill="#12131A"></path>
                                </svg>
                            </span>
                        </button>
                    </div>
                </div>`;
                            break;
                    }
                    return str1;
                }
                return str;
            }
            _proto.renderFormComponent = function (colCount, data, bindEvent, container) {
                let _this = this, _config = _this._config;
                let newData = data || generateInputData(colCount);
                let str = `<div class="row g-3 mb-3 ${bindEvent ? ClassName.DY_FORM_DRAG_BOX : ""}">`;
                let col = 12 / colCount;
                for (var i = 0; i < colCount; i++) {
                    str += `<div class="col-${col} item"  id="i_${newData[i].id}">${bindEvent ? templates[0] : ""}</div>`;
                }
                if (bindEvent) {
                    str += `<i class="fa fa-trash-alt ${ClassName.DELETE}"></i></div>`;
                }
                const $container = container ? $(container) : $(Selector.DY_FORM_CONTAINER);
                $container.append($(str));
                if (!data) {
                    _config.data.inputs = _config.data.inputs || [];
                    _config.data.inputs.push(newData);
                }
                if (bindEvent) {
                    $(Selector.DY_FORM_DRAG_BOX).off("mouseover" + EVENT_KEY).on("mouseover" + EVENT_KEY, function () { $(this).addClass(ClassName.HOVER); });
                    $(Selector.DY_FORM_DRAG_BOX).off("mouseout" + EVENT_KEY).on("mouseout", function () { $(this).removeClass(ClassName.HOVER); });
                    $(Selector.DY_FORM_DRAG_BOX_DELETE).off("click" + EVENT_KEY).on('click' + EVENT_KEY, function (e) {
                        e.preventDefault();
                        let index = $(Selector.DY_FORM_DRAG_BOX).index($(this).parent());
                        _config.data.inputs.splice(index, 1);
                        $(this).parent().remove();
                    });
                    _this.bindDyItemDragEvent();
                }
                //console.log(_config.data.inputs);

                function generateInputData(count) {
                    const data = [];
                    for (var i = 0; i < count; i++) {
                        data.push({
                            id: guid(),
                            name: "",
                            label: "",
                            items: [],
                            styles: [],
                            rules: []
                        });
                    }
                    return data;
                }
            }
            _proto.renderInputParamsDetail = function (data) {
                let _this = this, _config = _this._config;
                if (!data.id) {
                    return;
                }
                //data.id = data.id ||  guid();
                let str = `<form class="${ClassName.DY_FORM_INPUT_PARAMS}">
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder mb-1">编号</label>
                               <input type="text" class="form-control form-control-sm form-control-solid" disabled name="id" value="${data.id || ""}" placeholder="请输入编号...">
                               <div class="invalid-feedback"></div>
                             </div>
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder mb-1">标签</label>
                               <input type="text" class="form-control form-control-sm form-control-solid" name="label" value="${data.label || ""}" placeholder="请输入标签...">
                               <div class="invalid-feedback"></div>
                             </div>
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder mb-1">字段名</label>
                               <input type="text" class="form-control form-control-sm form-control-solid" name="name" value="${data.name || ""}" placeholder="请输入字段名...">
                               <div class="invalid-feedback"></div>
                             </div>
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder mb-1">长度</label>
                               <div class="input-group input-group-sm">
                                 <input type="number" class="form-control form-control-sm form-control-solid " name="minLength" value="${data.minLength || ""}" placeholder="最小长度...">
                                 <span class="input-group-text"> - </span>
                                 <input type="number" class="form-control form-control-sm form-control-solid " name="maxLength" value="${data.maxLength || ""}" placeholder="最大长度...">
                               </div>
                               <div class="invalid-feedback"></div>
                             </div>
                             ${itemStr(data.items)}
                             <div class="d-flex flex-column params">
                               <div class="label"><label class="fs-6 fw-bolder">样式</label><span class="fa fa-plus ${ClassName.ADD}-${ClassName.ITEM}" title="添加样式" data-name="style"></span></div>
                               ${styleStr(data.styles)}
                               <div class="invalid-feedback"></div>
                             </div>
                             <div class="d-flex flex-column">
                               <label class="fs-6 fw-bolder mb-1">数据验证</label>
                               <div class="d-flex align-items-center">${ruleStr(data.rules)}</div>
                               <div class="invalid-feedback"></div>
                             </div>
                           </form>`;
                $(Selector.FORM_DESIGN_RIGHT).html(str);
                bindChangeEvent();

                $(Selector.FORM_DESIGN_RIGHT).find(Selector.ADD_ITEM).off("click" + EVENT_KEY).on("click" + EVENT_KEY, function () {
                    let name = $(this).data('name');
                    $(this).parent().after(
                        `<div class="input-group input-group-sm" ><input type="text" class="form-control form-control-sm form-control-solid" name="${name}_name"  >
                    <span class="input-group-text"> : </span><input type="text" class="form-control form-control-sm form-control-solid" name="${name
                        }_value" ><button class="btn btn-danger btn-sm" type="button" onclick=""><i class="fas fa-minus-square"></i></button>
                    </div>`);
                    bindChangeEvent();
                });

                function itemStr(items) {
                    let str3 = "";
                    if (items && items.length) {
                        str3 += `<div class="d-flex flex-column params">
                                   <div class="label"><label class="fs-6 fw-bolder">选项</label><span class="fa fa-plus ${ClassName.ADD}-${ClassName.ITEM}" title="添加选项" data-name="item"></span></div>`;
                        items.forEach(v => {
                            str3 += `<div class="input-group input-group-sm">
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="item_name" value="${v.label || ""}">
                                      <span class="input-group-text"> : </span>
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="item_value" value="${v.value || ""}">
                                      <button class="btn btn-danger btn-sm" type="button"><i class="fas fa-minus-square"></i></button>
                                    </div>`;
                        });
                        str3 += `<div class="invalid-feedback"></div>
                             </div>`;
                    }
                    return str3;
                }
                function styleStr(styles) {
                    let str1 = ``;
                    if (styles && styles.length) {
                        styles.forEach(v => {
                            str1 += `<div class="input-group input-group-sm">
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="style_name" value="${v.name || ""}">
                                      <span class="input-group-text"> : </span>
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="style_value" value="${v.value || ""}">
                                      <button class="btn btn-danger btn-sm" type="button"><i class="fas fa-minus-square"></i></button>
                                    </div>`;
                        });
                    } else {
                        str1 = `<div class="input-group input-group-sm">
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="style_name">
                                      <span class="input-group-text"> : </span>
                                      <input type="text" class="form-control form-control-sm form-control-solid" name="style_value">
                                      <button class="btn btn-danger btn-sm" type="button" onclick=""><i class="fas fa-minus-square"></i></button>
                                    </div>`;
                    }
                    return str1;
                }

                function ruleStr(rules) {
                    let str2 = ``;
                    rules = rules || [];
                    if (_config.rules && _config.rules.length) {
                        _config.rules.forEach(v => {
                            let checked = rules.length && (rules.fieldIndex(function (vv) { return vv.name == v.name }) >= 0)
                            str2 +=
                                `<label class="form-check form-check-custom form-check-solid form-check-sm me-5" style="height: 34px;">
                            <input class=" form-check-input" name="rules" type="checkbox" value="${v.name
                                }" ${checked ? 'checked="checked"' : ''} >
                            <span class="form-check-label">${v.label}</span>
                        </label>`;
                        });
                    }

                    return str2;
                }

                function bindChangeEvent() {
                    $(Selector.FORM_DESIGN_RIGHT).find('input').off('change' + EVENT_KEY).on('change' + EVENT_KEY, function () { saveData($(this).attr('name')); });
                    $(Selector.FORM_DESIGN_RIGHT).find('.params button').off('click' + EVENT_KEY).on(
                        'click' + EVENT_KEY,
                        function () {
                            let name = $(this).prev().attr('name');
                            $(this).parent().remove();
                            saveData(name);
                        });
                }

                function saveData(name) {
                    let newData = "";
                    if (name.indexOf("item") == 0) {
                        name = 'items';
                        newData = [];
                        var items = $(Selector.DY_FORM_INPUT_PARAMS).find(`[name="item_name"]`);
                        items.each(function () {
                            let itemLabel = $(this).val(), itemValue = $(this).parent().find(`[name="item_value"]`).val();
                            if (itemLabel && itemValue) {
                                newData.push({
                                    label: itemLabel,
                                    value: itemValue
                                });
                            }
                        });
                    } else if (name.indexOf("style") == 0) {
                        name = 'styles';
                        newData = [];
                        var styles = $(Selector.DY_FORM_INPUT_PARAMS).find(`[name="style_name"]`);
                        styles.each(function () {
                            let styleName = $(this).val(), styleValue = $(this).parent().find(`[name="style_value"]`).val();
                            if (styleName && styleValue) {
                                newData.push({
                                    name: styleName,
                                    value: styleValue
                                });
                            }
                        });
                    } else if (name == "rules") {
                        newData = [];
                        $(Selector.DY_FORM_INPUT_PARAMS).find(`[name="rules"]:checked`).each(function () {
                            newData.push($(this).val());
                        });
                    } else {
                        newData = $(Selector.DY_FORM_INPUT_PARAMS).find(`[name="${name}"]`).val();
                    }

                    data[name] = newData;
                    //console.log("newData", newData, _config.data.inputs);
                    if (
                        //name == "name" ||
                        name == "minLength" ||
                        name == "minLength" ||
                        name == "maxLength" ||
                        name == "rules") {
                        return;
                    }
                    _this.renderInputDom(data, true);
                }
            }
            _proto.renderFLowNodeDetail = function (data) {
                let _this = this, _config = _this._config;
                curNode = data;
                let str = '';
                str += `<div class="${ClassName.TITLE}">节点详情</div>`;
                str += `<form class="${ClassName.FLOW_DESIGN_DETAIL_BOX}" id="form_${data.key}">
                          <div class="d-flex flex-column">
                            <label class="fs-6 fw-bolder mb-1">节点编号</label>
                            <input type="text" class="form-control form-control-sm form-control-solid" disabled name="key" value="${data.key || ""}" placeholder="请输入编号...">
                            <div class="invalid-feedback"></div>
                          </div>
                          <div class="d-flex flex-column">
                            <label class="fs-6 fw-bolder mb-1">节点标题</label>
                            <input type="text" class="form-control form-control-sm form-control-solid" name="title" value="${data.title || ""}" placeholder="请输入标题...">
                            <div class="invalid-feedback"></div>
                          </div>
                          <div class="d-flex flex-column">
                            <label class="fs-6 fw-bolder mb-1">执行操作</label>
                            <select class="form-control form-control-sm form-control-solid" name="stepBody" placeholder="请选择操作...">${stepBodySelectStr()}</select>
                            <div class="invalid-feedback"></div>
                          </div>
                          <div class="d-flex flex-column">
                            <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-danger btn-active-light-danger ${ClassName.DELETE}"><i class="far fa-trash-alt text-danger"></i>删除节点</button>
                          </div>
                        </form>`;
                $(Selector.FLOW_DESIGN_NODE).removeClass(ClassName.ACTIVE);
                $(Selector.FLOW_DESIGN_PATH).removeClass(ClassName.ACTIVE);
                $('#' + data.key).addClass(ClassName.ACTIVE);

                $(Selector.FLOW_DESIGN_DETAIL).html(str);
                //$(Selector.FLOW_DESIGN_DETAIL_BOX).find('select').select2();
                $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.form-control').off('change' + EVENT_KEY).on('change' + EVENT_KEY,
                    function () {
                        const name = $(this).attr("name"), val = $(this).val();
                        if (name == "stepBody") {
                            let stepBody = _config.stepBodies.find(v => { return v.name == val });
                            stepBody = $.extend(true, {}, stepBody, data.stepBody && data.stepBody.name && data.stepBody.name == val ? data.stepBody : {});
                            data.stepBody = stepBody;
                            //console.log("stepBody=========>", stepBody)
                            if (stepBody) {
                                $(Selector.FLOW_DESIGN_DETAIL_BOX + ' .stepBody').remove();
                                if (stepBody.inputs) {
                                    let str = ``;
                                    if (stepBody.inputs) {
                                        for (let k in stepBody.inputs) {
                                            if (Object.prototype.hasOwnProperty.call(stepBody.inputs, k)) {
                                                const v = stepBody.inputs[k];
                                                str += `<div class="d-flex flex-column stepBody">
                                                          <label class="fs-6 fw-bolder mb-1">${v.displayName}</label>
                                                          ${getDyInput(v.inputType)}
                                                          <div class="invalid-feedback"></div>
                                                        </div>`;
                                                function getDyInput() {
                                                    let str1 = "";
                                                    switch (v.inputType.name) {
                                                        case "Select":
                                                            str1 += `<select class="form-control form-control-sm form-control-solid" name="${v.name}" data-key="${k}">`;
                                                            str1 += `<option value="" disabled>请选择</option>`
                                                            if (v.inputType.attributes.selectOptions) {
                                                                for (let kk in v.inputType.attributes.selectOptions) {
                                                                    const vv = v.inputType.attributes.selectOptions[kk];
                                                                    str1 += `<option value="${kk}" ${kk == v.value ? "selected" : ""}>${vv}</option>`
                                                                }
                                                            }
                                                            str1 += `</select>`;
                                                            break;
                                                        case "AjaxSelect":
                                                            str1 = '<div class="dy-select">';
                                                            str1 += `<input type="hidden" class="form-control" name="${v.name}" value="${v.value || ""}" data-key="${k}"/>`;
                                                            str1 += `<input class="form-control form-control-sm form-control-solid ajaxSelect"  data-key="${k}" name="${v.name}" data-url="${v.inputType.attributes.ajaxUrl}" value="${v.extend || ""}" onblur="setTimeout(()=>$(this).parent().find('.dy-select-result').hide(),200)"/>`;
                                                            str1 += '<div class="dy-select-result"></div>'
                                                            str1 += `</div>`;
                                                            break;
                                                        case "Number":
                                                            str1 += `<input type="number" class="form-control form-control-sm form-control-solid" name="${v.name}" value="${v.value || ""}" data-key="${k}" placeholder="请输入...">`;
                                                            break;
                                                        default:
                                                            str1 += `<input type="text" class="form-control form-control-sm form-control-solid" name="${v.name}" value="${v.value || ""}" data-key="${k}" placeholder="请输入...">`;
                                                            break;
                                                    }
                                                    return str1;
                                                }
                                            }
                                        }
                                    }
                                    $(this).closest('div').after(str);
                                    $(Selector.FLOW_DESIGN_DETAIL_BOX + ' .stepBody .form-control').off('change' + EVENT_KEY).on(
                                        'change' + EVENT_KEY,
                                        function () {
                                            const key = $(this).data('key');
                                            stepBody.inputs[key].value = $(this).val();
                                            //console.log("======", curNode);
                                        });
                                    let ajaxTimer;
                                    $(Selector.FLOW_DESIGN_DETAIL_BOX + ' .stepBody .ajaxSelect').off('change' + EVENT_KEY).off('keyup' + EVENT_KEY).on(
                                        'keyup' + EVENT_KEY,
                                        function () {
                                            const key = $(this).data('key'), value = $(this).val(), url = $(this).data('url'), $this = $(this);
                                            clearTimeout(ajaxTimer);
                                            ajaxTimer = setTimeout(() => {
                                                //$.ajax({
                                                //    async: true,
                                                //    type: "Post",
                                                //    contentType: "application/json; charset=UTF-8",
                                                //    dataType:"josn",
                                                //})
                                                $.vbAjax4({
                                                    url: abp.appUrl + url + `?keyword=${value}&take=10`,
                                                    success: (res) => {
                                                        console.log("========================>>>>>", res)
                                                        let str = "";
                                                        for (const k in res) {
                                                            if (Object.prototype.hasOwnProperty.call(res, k)) {
                                                                const v = res[k];
                                                                str += `<span data-value="${k}" data-name="${v}">${v}(${k})</span>`
                                                            }
                                                        }
                                                        if (!str) {
                                                            str = `<strong>没有查询到数据</strong>`
                                                        }
                                                        $this.parent().find('.dy-select-result').html(str).show();
                                                        $this.parent().find('.dy-select-result span').off('click' + EVENT_KEY).on('click' + EVENT_KEY, function () {
                                                            const name = $(this).data("name"),
                                                                val = $(this).data("value");
                                                            stepBody.inputs[key].value = val;
                                                            stepBody.inputs[key].extend = name;
                                                            $this.val(name);
                                                        })
                                                    }
                                                })
                                            }, 500);
                                            stepBody.inputs[key].value = value;
                                            stepBody.inputs[key].extend = value;
                                            console.log("======", curNode);
                                        });
                                }
                            }
                        } else {
                            data[name] = val;
                            _this.renderNode(data, true);
                        }
                        //console.log("======", curNode);
                    });

                $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.' + ClassName.DELETE).off('click' + EVENT_KEY).on('click' + EVENT_KEY, function () { _this.deleteNode(data) });
                if (data.stepBody && data.stepBody.name) {
                    $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.form-control[name="stepBody"]').val(data.stepBody.name).trigger('change')
                }
                function stepBodySelectStr() {
                    let str = `<option value="">请选择执行操作</option>`;
                    if (_config.stepBodies && _config.stepBodies.length) {
                        _config.stepBodies.forEach(v => { str += `<option value="${v.name}" $>${v.displayName}</option>`; });
                    }
                    return str;
                }
            }
            _proto.renderFLowConnectionDetail = function (data) {
                let _this = this, _config = _this._config;
                data.conditions = data.conditions || [];
                //console.log(data);
                let str = '';
                str += `<div class="${ClassName.TITLE}">连线详情</div>`;
                str += `<form class="${ClassName.FLOW_DESIGN_DETAIL_BOX}">
                          <div class="d-flex flex-column">
                            <label class="fs-6 fw-bolder mb-1">连线标题</label>
                            <input type="text" class="form-control form-control-sm form-control-solid" name="label" value="${data.label || ""}" placeholder="请输入连线标题...">
                            <div class="invalid-feedback"></div>
                          </div>
                          <div class="d-flex flex-column params">
                            <div class="label"><label class="fs-6 fw-bolder">条件</label><span class="fa fa-plus ${ClassName.ADD}-${ClassName.ITEM}" title="添加条件" data-name="style"></span></div>${conditionsStr()}
                            <div class="invalid-feedback"></div>
                          </div>
                          <div class="d-flex flex-column">
                            <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-danger btn-active-light-danger ${ClassName.DELETE}"><i class="far fa-trash-alt text-danger"></i>删除连线</button>
                          </div>
                        </form>`;
                function conditionsStr() {
                    let str = '';
                    if (data.conditions && data.conditions.length) {
                        data.conditions.forEach(v => { str += conditionStr(v); });
                    } else {
                        //str = conditionStr();
                    }
                    return str;
                }
                function conditionStr(v) {
                    let str =
                        `<div class="input-group input-group-sm ${ClassName.CONDITION}" >
                                    <select type="text" class="form-control form-control-sm form-select form-control-solid" name="field" style="width:30%">${inputSelectStr(v ? v.field : "")}</select>

                                    <select type="text" class="form-control form-control-sm form-select form-control-solid" name="operator" style="width:15%">
<option value="">请选择</option>
                                      <option value=">" ${v && v.operator == '>' ? 'selected' : ''}>大于</option>
                                      <option value=">=" ${v && v.operator == '>=' ? 'selected' : ''}>不小于</option>
                                      <option value="<" ${v && v.operator == '<' ? 'selected' : ''}>小于</option>
                                      <option value="<=" ${v && v.operator == '<=' ? 'selected' : ''}>不大于</option>
                                      <option value="!=" ${v && v.operator == '!=' ? 'selected' : ''}>不等于</option>
                                      <option value="==" ${v && v.operator == '==' ? 'selected' : ''}>等于</option>
                                    </select>
                                    <input type="text" class="form-control form-control-sm form-control-solid" name="value" value="${v ? v.value || "" : ""}">
                                    <button class="btn btn-danger btn-sm" type="button" onclick=""><i class="fas fa-minus-square"></i></button>
                                </div>`;
                    return str;
                }
                function inputSelectStr(field) {
                    let str = '<option value="">请选择</option> ';
                    const inputs = _this.filterDataInputs();
                    inputs.forEach(v => { str += ` <option value="${v.name}" ${v.name == field ? 'selected' : ''}>${v.name}</option>`; });
                    return str;
                }

                function bindChangeEvent() {
                    $(Selector.FLOW_DESIGN_DETAIL_BOX).find(Selector.CONDITION + ' .form-control').off('change' + EVENT_KEY).on('change' + EVENT_KEY, function () {
                        const $parent = $(this).closest(Selector.CONDITION),
                            val = $(this).val(),
                            name = $(this).attr('name');
                        const index = $(Selector.FLOW_DESIGN_DETAIL_BOX).find(Selector.CONDITION).index($parent);
                        try {
                            let condition = data.conditions[index];
                            condition[name] = val;
                        } catch (e) {
                            console.error(e);
                        }
                    });
                    $(Selector.FLOW_DESIGN_DETAIL_BOX).find(Selector.CONDITION + ` button`).off('click' + EVENT_KEY).on('click' + EVENT_KEY, function () {
                        const $parent = $(this).closest(Selector.CONDITION);
                        const index = $(Selector.FLOW_DESIGN_DETAIL_BOX).find(Selector.CONDITION).index($parent);
                        conditionNode.conditions.splice(index, 1);
                        $(this).closest(Selector.CONDITION).remove();
                    });
                }
                $(Selector.FLOW_DESIGN_NODE).removeClass(ClassName.ACTIVE);
                $(Selector.FLOW_DESIGN_PATH).removeClass(ClassName.ACTIVE);
                $(Selector.FLOW_DESIGN_PATH_HOVER).addClass(ClassName.ACTIVE);
                $(Selector.FLOW_DESIGN_DETAIL).html(str);
                //$(Selector.FLOW_DESIGN_DETAIL).find('select').select2();
                $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.form-control[name="label"]').off('change' + EVENT_KEY).on('change' + EVENT_KEY, function () {
                    data.label = $(this).val();
                    _this.revalidateConnection(data);
                });
                bindChangeEvent();
                $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.' + ClassName.DELETE).off('click' + EVENT_KEY).on('click' + EVENT_KEY, function () { _this.deleteConnection(data.label) });
                $(Selector.FLOW_DESIGN_DETAIL_BOX).find(Selector.ADD_ITEM).off("click" + EVENT_KEY).on("click" + EVENT_KEY, function () {
                    $(Selector.FLOW_DESIGN_DETAIL_BOX).find('.' + ClassName.DELETE).parent().before(conditionStr());
                    data.conditions.push({
                        field: "",
                        operator: "",
                        value: ""
                    });
                    bindChangeEvent();
                });
            }
            _proto.getStepBodies = function () {
                let _this = this, _config = _this._config;
                return _config.stepBodies;
            }
            _proto.setStepBodies = function (data, isCover) {
                let _this = this, _config = _this._config;
                isCover = isCover == undefined ? true : (isCover || false);
                if (isCover) {
                    _config.stepBodies = data;
                } else {
                    $.extend(true, _config.stepBodies || [], data || []);
                }
                return _config.stepBodies;
            }
            _proto.getInputDataByDom = function (that) {
                let _this = this, _config = _this._config;
                let $item = $(that).closest("." + ClassName.ITEM), $box = $(that).closest("." + ClassName.DY_FORM_DRAG_BOX);
                var index1 = $(Selector.DY_FORM_DRAG_BOX).index($box),
                    index2 = $box.find("." + ClassName.ITEM).index($item);
                try {
                    let data = _config.data.inputs[index1][index2];
                    return data;
                } catch (e) {
                    console.error(e);
                    return undefined;
                }
            }
            _proto.completeFlow = function () {
                let _this = this, _config = _this._config;
                //console.log(_config.data);
                //console.log(JSON.stringify(_config.data));
                if (_config.submit) {
                    _config.data.version = _config.data.version || 1;
                    _config.data.group = _config.data.group || "G1";
                    _config.data.color = _config.data.color || "red";
                    _config.submit.call(_this, _config.data);
                }
            }
            _proto.filterDataInputs = function () {
                let _this = this, _config = _this._config;
                let inputs = [];
                _config.data.inputs.forEach(v => {
                    if (v.length > 0) {
                        v.forEach(vv => {
                            if (vv.name) {
                                inputs.push(vv);
                            }
                        })
                    }
                });
                return inputs;
            }
            _proto.bindEvent = function () {
                let _this = this, _config = _this._config;
                _this.bindStepToolEvent();
                _this.bindDesignMoveEvent();
                _this.bindAddFormComponentEvent();
                _this.bindFormComponentDragEvent();
                _this.bindSourceNodeEvent();
                _this.bindIntanceEvent();
            }
            _proto.bindStepToolEvent = function () {
                let _this = this, _config = _this._config;
                $(Selector.STEP_TOOL_BTN_PREV).on('click' + EVENT_KEY, function () { toggleStep() });
                $(Selector.STEP_TOOL_BTN_NEXT).on('click' + EVENT_KEY, function () { toggleStep(true) });
                $(Selector.STEP_TOOL_BTN_COMPLETE).on('click' + EVENT_KEY, function () { _this.completeFlow() });
                $(Selector.BASE_FORM).find('.form-control').on('change' + EVENT_KEY,
                    function () {
                        let $this = $(this), name = $this.attr('name');
                        _config.data[name] = $this.val();
                    });
                function toggleStep(isNext) {
                    if (isNext) {
                        if (curStep == 0 && !$.formValidate($(Selector.BASE_FORM))) {
                            console.log(`STEP表单验证失败==>${curStep}`);
                            return;
                        }
                    }
                    var step = isNext ? curStep + 1 : curStep - 1;
                    if (step < 0 || step >= maxStep) {
                        console.log(`STEP超出范围[0-${maxStep}]==>${step}`);
                        return;
                    }
                    curStep = step;
                    if (isNext) {
                        $(Selector.STEP_TAB_ITEM_ACTIVE).removeClass(ClassName.ACTIVE).addClass(ClassName.FINISH);
                    } else {
                        $(Selector.STEP_TAB_ITEM_ACTIVE).removeClass(ClassName.ACTIVE);
                        $(Selector.STEP_TAB_ITEM + "_" + curStep).removeClass(ClassName.FINISH);
                    }
                    $(Selector.STEP_TAB_ITEM + "_" + curStep).addClass(ClassName.ACTIVE);

                    $(Selector.STEP_CONTENT_ITEM).removeClass(ClassName.SHOW);
                    $(Selector.STEP_CONTENT_ITEM + "_" + curStep).addClass(ClassName.SHOW);
                    $(Selector.STEP_TOOL_BTN_SHOW).removeClass(ClassName.SHOW);
                    switch (curStep) {
                        case 0:
                            $(Selector.STEP_TOOL_BTN_NEXT).addClass(ClassName.SHOW);
                            break;
                        case 1:
                            $(Selector.STEP_TOOL_BTN_PREV).addClass(ClassName.SHOW);
                            $(Selector.STEP_TOOL_BTN_NEXT).addClass(ClassName.SHOW);
                            //console.log("STEP_1", _config.data);

                            break;
                        case 2:
                            $(Selector.STEP_TOOL_BTN_PREV).addClass(ClassName.SHOW);
                            $(Selector.STEP_TOOL_BTN_COMPLETE).addClass(ClassName.SHOW);
                            _this.createFlow();
                            break;
                    }
                }
            }
            _proto.bindDesignMoveEvent = function () {
                const designMoveDrag = { moving: false, mouseStartPoint: [], distance: [], target: undefined };
                $(Selector.DESIGN_CONTAINER).on('mousedown' + EVENT_KEY, Selector.DESIGN_MOVE_COL, function (e) {
                    //webkit内核和火狐禁止文字被选中
                    $('body').addClass(ClassName.DRAG_SELECT);
                    //ie浏览器禁止文字选中
                    document.body.onselectstart = document.body.ondrag = function () {
                        return false;
                    };
                    designMoveDrag.moving = true;
                    designMoveDrag.mouseStartPoint = [e.clientX, e.pageY];
                    designMoveDrag.distance = [$(this).prev().width(), $(this).next().width()];
                    designMoveDrag.target = $(this);
                    //console.log(designMoveDrag);
                });
                $('body').on('mouseup' + EVENT_KEY, function () {
                    $('body').removeClass(ClassName.DRAG_SELECT);
                    document.body.onselectstart = document.body.ondrag = null;
                    designMoveDrag.moving = false;
                    designMoveDrag.mouseStartPoint = [];
                    designMoveDrag.distance = [];
                    designMoveDrag.target = undefined;
                    //console.log("===>", designMoveDrag);
                });
                $(Selector.DESIGN_CONTAINER).on('mousemove' + EVENT_KEY, function (e) {
                    if (designMoveDrag.moving) {
                        //console.log("======>", e.clientX, designMoveDrag);

                        let moveDistance = e.clientX - designMoveDrag.mouseStartPoint[0];
                        let d1 = designMoveDrag.distance[0] + moveDistance;
                        let d2 = designMoveDrag.distance[1] - moveDistance;
                        if (d1 < 50) {
                            d1 = 50;
                            d2 = designMoveDrag.distance[0] + designMoveDrag.distance[1] - 50;
                        } else if (d2 < 50) {
                            d2 = 50;
                            d1 = designMoveDrag.distance[0] + designMoveDrag.distance[1] - 50;
                        }
                        designMoveDrag.target.prev().width(d1);
                        designMoveDrag.target.next().width(d2);
                    }
                });
            }
            _proto.bindAddFormComponentEvent = function () {
                let _this = this, _config = _this._config;

                $(Selector.FORM_DESIGN_BTN_GROUP_ADD_BTN).on('click' + EVENT_KEY, function () {
                    const colCount = $(this).data('col');
                    _this.renderFormComponent(colCount, undefined, true);
                });
            }
            _proto.bindFormComponentDragEvent = function () {
                $(Selector.FORM_COMPONENT_ITEM).on("dragstart" + EVENT_KEY,
                    function (e) {
                        this.style.borderColor = '#2d8cf0';
                        this.style.borderStyle = 'solid';
                        this.style.fontWeight = '600';
                        const type = $(this).data('type');
                        e.originalEvent.dataTransfer.setData('type', type);
                    });
                $(Selector.FORM_COMPONENT_ITEM).on("dragend" + EVENT_KEY,
                    function (e) {
                        this.style.borderColor = '#dcdee2';
                        this.style.borderStyle = 'dashed';
                        this.style.fontWeight = '400';
                        e.originalEvent.dataTransfer.clearData();
                    });
            }
            _proto.bindDyItemDragEvent = function () {
                let _this = this, _config = _this._config;
                $(Selector.DY_FORM_DRAG_ITEM).off("dragover" + EVENT_KEY).on("dragover" + EVENT_KEY, function (e) {
                    e.preventDefault();
                    changeStyle(this);
                });
                $(Selector.DY_FORM_DRAG_ITEM).off("dragenter" + EVENT_KEY).on("dragenter" + EVENT_KEY, function (e) {
                    e.preventDefault();
                    changeStyle(this);
                });
                $(Selector.DY_FORM_DRAG_ITEM).off("dragleave" + EVENT_KEY).on("dragleave" + EVENT_KEY, function (e) {
                    e.preventDefault();
                    changeStyle(this, true);
                });
                $(Selector.DY_FORM_DRAG_ITEM).off("drop" + EVENT_KEY).on("drop" + EVENT_KEY, function (e) {
                    e.preventDefault();
                    changeStyle(this, true);
                    const type = e.originalEvent.dataTransfer.getData('type');
                    const input = JSON.parse(JSON.stringify(_config.formComponents.find(v => { return v.type == type })));
                    //console.log("=========>", type, input);
                    let data = _this.getInputDataByDom($(this));
                    if (data) {
                        data.name = '';
                        data.label = input.label;
                        data.type = input.type;
                        data.items = input.items || [];
                        data.styles = input.styles || [];
                        data.rules = [];
                    }
                    _this.renderInputDom(data, true);
                });

                function changeStyle(_this, isRecover) {
                    if (isRecover) {
                        _this.style.borderColor = '#ddd';
                        _this.style.borderStyle = 'dotted';
                        _this.style.borderWidth = '1px';
                    } else {
                        _this.style.borderColor = '#2d8cf0';
                        _this.style.borderStyle = 'solid';
                        _this.style.borderWidth = '2px';
                    }
                }
            }
            _proto.bindDyItemInputEvent = function () {
                let _this = this, _config = _this._config;
                $(Selector.DY_FORM_INPUT_BOX).off('click' + EVENT_KEY).on('click' + EVENT_KEY,
                    function () {
                        $(Selector.DY_FORM_INPUT_BOX).removeClass(ClassName.ACTIVE);
                        $(this).addClass(ClassName.ACTIVE);
                        let data = _this.getInputDataByDom($(this));
                        _this.renderInputParamsDetail(data);
                        //console.log("=========>", _config.data.inputs);
                    });
                $(Selector.DY_FORM_INPUT_BOX_DELETE).off('click' + EVENT_KEY).on('click' + EVENT_KEY,
                    function (e) {
                        e.preventDefault();
                        let data = _this.getInputDataByDom($(this));
                        if (data) {
                            data.id = '';
                            data.name = '';
                            data.label = '';
                            data.type = '';
                            data.minLength = undefined;
                            data.maxLength = undefined;
                            data.items = [];
                            data.styles = [];
                            data.rules = [];
                            $(this).closest("." + ClassName.ITEM).html(templates[0]);
                        }
                        //console.log("==============>", _config.data.inputs);
                    });
            }
            _proto.bindSourceNodeEvent = function () {
                let _this = this, _config = _this._config;
                $(Selector.FLOW_DESIGN_NODE_SOURCE_ITEM).off('dblclick' + EVENT_KEY)
                    .on('dblclick' + EVENT_KEY, function () {
                        let type = $(this).data('type');
                        let node = _this.createNode(type);
                        if (node) {
                            _config.data.nodes.push(node);
                            _this.renderNode(node);
                        }
                    });
            }
            _proto.bindIntanceEvent = function () {
                let _this = this, _config = _this._config;
                instance.bind('connection', function (info) { _this.addConnection(info) });
                instance.bind('click', function (connection) {
                    let source = _this.getNode(connection.sourceId);
                    conditionNode = source.nextNodes.find(v => v.nodeId == connection.targetId) || {
                        nodeId: connection.targetId,
                        label: "",
                        conditions: []
                    };
                    curConnection = connection;
                    //console.log(connection);
                    //console.log("======>", connection, conditionNode);
                    _this.renderFLowConnectionDetail(conditionNode);
                });
            }
            _proto.setZoom = function (zoom, transformOrigin, el) {
                transformOrigin = transformOrigin || [0.5, 0.5];
                el || instance.getContainer();
                var p = ["webkit", "moz", "ms", "o"],
                    s = "scale(" + zoom + ")",
                    oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

                for (var i = 0; i < p.length; i++) {
                    el.style[p[i] + "Transform"] = s;
                    el.style[p[i] + "TransformOrigin"] = oString;
                }

                el.style["transform"] = s;
                el.style["transformOrigin"] = oString;

                instance.setZoom(zoom);
            }
            //可以不渲染workflow就可以使用
            _proto.useDyForm = function (inputs, isDisabled, container) {
                let _this = this;
                if (!container) {
                    container = _this._element;
                }
                $(container).html("");
                _this.renderForm(inputs, false, container);
                if (isDisabled) {
                    $(container).find('input').prop("disabled", true);
                    $(container).find('select').prop("readonly", true);
                }
                $(container).find('select').select2();
                $(container).find('input[data-vb-date]').VbDate();

            }
            _proto.getDyFormData = function (inputs, container) {
                let _this = this;
                if (!container) {
                    container = _this._element;
                }
                let data = {};
                $(container).find(".form-control").each(function () {
                    const name = $(this).attr('name'), value = $(this).val();
                    data[name] = value;
                })
                $(container).find(".form-check-input[type='radio']:checked").each(function () {
                    const name = $(this).attr('name'), value = $(this).attr('value');
                    data[name] = value;
                })
                $(container).find(".form-check-input[type='checkbox']:checked").each(function () {
                    const name = $(this).attr('name'), value = $(this).attr('value');
                    if (!data[name] || !data[name].length) {
                        data[name] = [];
                    }
                    data[name].push(value);
                })
                //inputs.forEach(v => {
                //    v.forEach(vv => {
                //        vv.value = data[vv.name] || "";
                //        data[vv.name] = vv;
                //    })
                //})
                return data;
            }
            Workflow._jQueryInterface = function _jQueryInterface(option) {
                let value, args = Array.prototype.slice.call(arguments, 1);
                this.each(function () {
                    let data = $(this).data(DATA_KEY);
                    let _options = $.extend({}, Default, $(this).data(), typeof option === 'object' && option);
                    if ($.inArray(option, ALLOW_METHOD_2) >= 0) {
                        data = new Workflow(this)
                        value = data[option].apply(data, args);
                    } else if (!data) {
                        data = new Workflow(this, _options);
                        data.init();
                        $(this).data(DATA_KEY, data);
                    } else if (typeof option === 'string') {
                        if ($.inArray(option, ALLOW_METHOD) < 0) {
                            throw new Error("Unknown method: " + option);
                        }
                        value = data[option].apply(data, args);
                    }
                });
                return typeof value === 'undefined' ? this : value;
            };

            return Workflow;
        }();

        /**
         * jQuery API
         * ====================================================
         */
        $.fn[NAME] = Workflow._jQueryInterface;
        $.fn[NAME].Constructor = Workflow;
        $.fn[NAME].noConflict = function () {
            $.fn[NAME] = JQUERY_NO_CONFLICT;
            return Workflow._jQueryInterface;
        };

        return Workflow;
    }(jQuery);

    exports.VbWorkflow = VbWorkflow;

    Object.defineProperty(exports, '__esModule', { value: true });
})));