按照ERP的特點，功能大致可以分爲三部分
1)模塊本身的功能，比如增、刪、改、查、導入、導出、日誌、附件等
2）模塊本身的狀態控制。比如一個模塊可能有草稿、審覈、拒絕、訂單4個狀態。每個狀態通過動作來轉換。草稿按審覈動作轉化爲審覈，審覈按激活動作轉化爲草稿，審覈按拒絕按鈕轉化爲拒絕，審覈按訂單動作轉化爲訂單。其中每個狀態可以定義哪些動作不能操作，哪些字段只讀，是否允許編輯從表。以上描述形成狀態機。
3）模塊之間的操作，主要體現在一個動作操作多個模塊，輸入的數據經過轉化、計算後生成其它模塊數據顯示到屏幕或直接增加或修改對應模塊庫表數據。
本文章描述狀態機的設計和預計的操作步驟。
期望結果：
1）用戶可以通過開發管理屏幕直接設計狀態、動作、狀態機圖。
2）在系統運行中，用戶可以查看一條記錄的狀態機，當前狀態用黃色表示。
設計：
在模型中已有動作和狀態，但兩個模塊之間沒有關聯。
在動作模塊中增加從狀態、到狀態，表示這個動作執行後會把從狀態改爲到狀態。
在開發管理中增加狀態機設計，打開後，把模型數據生成json格式的數據傳入到屏幕中，如果有狀態數據就生成狀態機圖，用戶可以拖動排列狀態位置，然後用json格式直接保存到模型，下次打開直接加載到屏幕中。
在常用動作中增加狀態機動作，執行後顯示當前狀態機
其中json格式如下:
[{
name: 'Draft', Description: '草稿',dx: 121,
dy: 108, actions: [{
name: 'Aduit', Description: '審覈', target: 'evaluation'
}]
},
{
name: 'evaluation', Description: '審覈', dx: 315,
dy: 123, actions: [
{ name: 'Draft', Description: '草稿', target: 'Draft' },
{ name: 'ClosedRejected', Description: '拒絕', target: 'ClosedRejected' },
{ name: 'ClosedOrdercreated', Description: '訂單',target: 'ClosedOrdercreated' } ,
]
},
{
name: 'ClosedOrdercreated', Description: '訂單', dx: 483,
dy: 175,
},
{
name: 'ClosedRejected',dx: 490,
dy: 72, Description: '拒絕',
},
];
圖形控制使用joint.js
轉換json到圖片代碼如下：
var testdata = [{
name: 'Draft', Description: '草稿',dx: 121,
dy: 108, actions: [{
name: 'Aduit', Description: '審覈', target: 'evaluation'
}]
},
{
name: 'evaluation', Description: '審覈', dx: 315,
dy: 123, actions: [
{ name: 'Draft', Description: '草稿', target: 'Draft' },
{ name: 'ClosedRejected', Description: '拒絕', target: 'ClosedRejected' },
{ name: 'ClosedOrdercreated', Description: '訂單',target: 'ClosedOrdercreated' } ,
]
},
{
name: 'ClosedOrdercreated', Description: '訂單', dx: 483,
dy: 175,
},
{
name: 'ClosedRejected',dx: 490,
dy: 72, Description: '拒絕',
},
];
console.log(testdata);
arrs = new Array();
var statushash = [];
var fsa = Joint.dia.fsa;
Joint.paper("myfsa", 2000, 200); /*(id or HTMLElement, width, height)*/
for (var i = 0; i < testdata.length; i++) {
var tempstatus = testdata[i];
var x = 120 * (i + 1);
var y=120;
if (tempstatus.dx) {
x = tempstatus.dx;
}
if (tempstatus.dy) {
y = tempstatus.dy;
}
var draw =fsa.State.create({ position: { x: x, y:y }, label: tempstatus.Description }) ;
arrs.push(draw);
statushash.push({name:tempstatus.name,draw:draw});
}
for (var i = 0; i < testdata.length; i++) {
var tempstatus = testdata[i];
if (tempstatus.actions) {
for (var j = 0; j < tempstatus.actions.length; j++) {
var action = tempstatus.actions[j];
var src, dest;
for (var k = 0; k < statushash.length; k++) {
if (statushash[k].name == tempstatus.name) {
src = statushash[k].draw;
}
if (statushash[k].name == action.target) {
dest = statushash[k].draw;
}
}
if (src && dest) {
src.joint(dest, (fsa.arrow.label = action.Description, fsa.arrow)).registerForever(arrs);
}
}
}
}
狀態機圖片見附件：