流程图

"id":"name_D5DomWym","name":"name","x":127,"y":98,"width":100,"height":40,"desc":"椭圆形","__shape":"Ellipse"},{"id":"name1_mCa9tl5g","name":"name1","x":185,"y":210,"width":100,"height":40,"desc":"长方形","__shape":"Rect"}]' // } }, } }, methods: { testfn(){ this.$refs.flow.$refs.flow.contentGroup.dirty(); }, afteraddnode(){ }, validatenum(flow,option,validate,add){ }, nodeclick(flow,node,element){ } }, created() { this.deptStore = this.$dsContainer.createDataSet({modelFile:"eap5csxm.pro/229CeShi.dir/CeShi.moduledir/dataset.datadir/w_wangbinbinShuJuJi.bizstore|YNecPqLp.BizEntity~_extFile"}); this.deptStore.load(); } }; '>
工艺流程图

![](/media/202404/2024-04-29_171927_991204.png)

```javascript
<template>
    <div>
        
        <hi-table :model="deptStore.data" ref="DtTable_To5GfF23"  v-bind="tableOption" 
:data-source="deptStore" ></hi-table>
        <hi-processflow ref="flow" :dataSource="deptStore" v-bind="option" @afteraddnode="afteraddnode" @nodeclick="nodeclick" @validatenum="validatenum" :model="deptStore.curRecord"></hi-processflow>
    </div>
</template>

},
    {
        label: "nameField",
        name: "nameField",
    },
    {
        label: "descField",
        name: "descField",
    },
    {
        label: "shapeField",
        name: "shapeField",
    },
    {
        label: "countField",
        name: "countField",
    },
    {
        label: "svgPathField",
        name: "svgPathField",
        element: "HiTextarea",
        props: Object.assign({ popup: true },
            {
            }
        ),

},
    {
        label: "widthField",
        name: "widthField",

props: {},

},
    {
        label: "heightField",
        name: "heightField",

props: {},

},
    {
        label: "colorField",
        name: "colorField",

props: {},

},
    {
        label: "jsonField",
        name: "jsonField",
        element: "HiTextarea",
        props: Object.assign({ popup: true },

{
            }
        ),

},
    ]
},
              option:{
                  groupField:"groupField",
                  nameField:"nameField",
                  descField:"descField",
                  shapeField:"shapeField",
                  svgPathField:"svgPathField",
                  widthField:"widthField",
                  heightField:"heightField",
                  jsonField:"jsonField",
                  colorField:"colorField",
                  jsonField:"jsonField",
                  countField:"countField",
                  editable:true,
                //   model:{
                //     jsonField:'[{"id":"name_D5DomWym","name":"name","x":127,"y":98,"width":100,"height":40,"desc":"椭圆形","__shape":"Ellipse"},{"id":"name1_mCa9tl5g","name":"name1","x":185,"y":210,"width":100,"height":40,"desc":"长方形","__shape":"Rect"}]'
                //   }
              },
              
            }
        },
        methods: {
            testfn(){
                this.$refs.flow.$refs.flow.contentGroup.dirty();
            },
            afteraddnode(){
                
            },
            validatenum(flow,option,validate,add){
            },
            nodeclick(flow,node,element){
            }
        },
        created() {
            this.deptStore = this.$dsContainer.createDataSet({modelFile:"eap5csxm.pro/229CeShi.dir/CeShi.moduledir/dataset.datadir/w_wangbinbinShuJuJi.bizstore|YNecPqLp.BizEntity~_extFile"});
            this.deptStore.load();
        }
    };
</script>
```

### Attributes

| 参数           | 说明        | 类型     | 可选值 | 默认值 |
|--------------|-----------|--------|-----|-----|
| source       | 数据集       | Object | —   | —   |
| groupField   | 分组字段      | String | —   | —   |
| nameField    | 名称字段      | String | —   | —   |
| descField    | 描述字段      | String | —   | —   |
| shapeField   | 类型字段      | String | —   | —   |
| svgPathField | svgPath字段 | String | —   | —   |
| widthField   | 宽度字段      | String | —   | —   |
| heightField  | 高度字段      | String | —   | —   |
| colorField   | 颜色字段      | String | —   | —   |
| countField   | 数量字段      | String | —   | —   |