表單運行態接口(舊) · CAP開發文檔

## 介紹 ~~~ A.使用說明此規范用于第三方對表單進行定制化開發滿足標準開發未滿足的需求 B.版本支持文檔默認是v7.0sp2開始支持，新增內容會備注開始支持版本號，刪除內容會備注頂用版本號 ~~~ ## 提供的API載體（window.thirdPartyFormAPI）該全局對象是第三方事件處理的載體，主要包括事件池和功能api兩部分。 ### 1 表單事件池操作 ~~~ 可用作注冊事件和觸發事件 ~~~ | 屬性 | 說明 | 參數 | | --- | --- | --- | | registerEvent | 注冊事件 | key:事件名稱，fn：回調函數 | | triggerEvent | 觸發事件 | key:事件名稱，params：回調參數 | 注：事件觸發是做擴展用，第三方可在事件池中自定義事件并自己觸發事件，但是表單內部提供的監聽等不需要第三方去觸發 * 事件池注冊示例： ~~~javascript // 注冊事件 window.thirdPartyFormAPI.registerEvent('key', function(params){ // params 接收參數 }); // 觸發事件 window.thirdPartyFormAPI.triggerEvent('key', params); ~~~ #### 1.1 表單中控件失去焦點后觸發事件（afterFormFieldChange） ~~~ 第三方開發要注冊此方法 ~~~ ~~~javascript // 注冊事件 window.thirdPartyFormAPI.registerEvent('afterFormFieldChange', function(params){ ...//params是當前失去焦點的控件的數據 //如果需要獲取主表或明細表數據可用功能api中的getFormData獲取 }); // params 是一個對象（當前變化控件數據） ~~~ ![](https://img.kancloud.cn/75/ba/75baff09ca6ab4068152b75db89dfadc_352x566.png) ~~~javascript /** * 說明：這是獲取的前端控件數據對象（Object），是具體每個字段的說明 * * */ { attachmentInfo : 附件信息（里面包含附件列表和基礎附件信息） attrs : 視圖里面的簡單控件信息 auth: 權限 (‘edit’ : 編輯，’hide’: 隱藏) ctrlType : 視圖里面的控件狀態（這個，自定義控件的是"suiCustomControl"） customFieldInfo ：自定義控件的信息，里面包含pc，移動的js信息和入口方法信息，路徑信息。 digitNum : 小數位長度 display : 控件名 enums : 控件的枚舉列表 extra ：設計器給控件設置的樣式信息 fieldLength ：控件內字符的限制長度 fieldType ：字段類型 formType ：控件所在的表的類型 formatType ：數據格式 id ：字段名 inputType ：控件類型（標準控件判斷） isInCalculate ：是否計算（1為計算） isInCondition ：是否是條件字段 isNotNull ：必填校驗（1為必填） isCustomFiled : 是否是自定義控件（1是自定義控件） placeHolder ：提示語言 radioAlignType ： relation : 關聯信息（控件公用的基礎信息） relationData : 當前控件的關聯數據 showValue ：顯示值 value : 計算值 type : 類型 valueId : 值 } ~~~ #### 1.2 表單中控件雙擊后觸發事件（formFieldDbclick） ~~~ 第三方開發要注冊此方法 ~~~ ~~~javascript // 注冊事件 window.thirdPartyFormAPI.registerEvent('formFieldDbclick', function(params){ ...//params是當前失去焦點的控件的數據 //如果需要獲取主表或明細表數據可用功能api中的getFormData獲取 }); ~~~ #### 1.3 表單中控件右鍵后觸發事件（formFieldContextmenu） ~~~ 第三方開發要注冊此方法 ~~~ ~~~javascript /** * 參數：params => (Object) 失去焦點的控件數據 * */ // 注冊事件 window.thirdPartyFormAPI.registerEvent('formFieldContextmenu', function(params){ ...//params是當前失去焦點的控件的數據 //如果需要獲取主表或明細表數據可用功能api中的getFormData獲取 }); ~~~ * 注意：標準接口代碼中不會去阻止瀏覽器右鍵默認事件，如果希望阻止瀏覽器右鍵默認彈出框可以用該接口返回參數中的event完成，如下 ~~~javascript /** * 參數：params => (Object) 右鍵的控件數據 * */ window.thirdPartyFormAPI.registerEvent('formFieldContextmenu', function(params){ if (params.event) { params.event.preventDefault(); } }); ~~~ ### 2 表單提供的功能api 可以操作表單內部回填等功能，事件觸發為同步。 | 屬性 | 說明 | 參數 | 詳細介紹 | | --- | --- | --- | --- | | getFormData | 獲取表單數據 | fn：回調函數(可不傳，為可選參數) | 2.1 | | backfillFormControlData | 回填數據 | data | 2.2 | | backfillFormAttachment | 回填附件，圖片 | data | 2.3 | | changeFormFieldAuth | 改變控件權限 | params | 2.4 | | getChooseFormsonRecord | 獲取頁面內明細表選中行 | 無參數 | 2.5 | | insertFormsonRecords | 新增明細行 | params | 2.6 | | copyFormsonRecods | 復制明細行 | params | 2.7 | | deleteFormsonRecods | 刪除明細行 | params | 2.8 | #### 2.1 getFormData(fn) ~~~javascript /** * 說明：獲取當前表單的數據 * 參數：result => (Object) * { * formData : {}， // 表單數據 * formmains ：{}， // 主表數據 * formsons : {} // 明細表數據 * } * * */ // 直接返回值 window.thirdPartyFormAPI.getFormData(); // 傳入回調方法，值進入回調方法 window.thirdPartyFormAPI.getFormData(function(result) { // result 是返回的數據 }); ~~~ ![](http://mall.seeyon.com/help/Public/dev/static/img/thirdgetform.4d065d5.png "獲取表單數據") #### 2.2 backfillFormControlData(data) ~~~javascript /** * 示例： * 說明：此接口是用于自定義控件回填表單其他控件數據 * 參數：data -> (Object || Array) 組織的回填的數據 * Object格式 : * { * tableName : (表名), * tableCategory : (表類型(formmain || formson)), * updateData : { * filedName(表單對應控件名) ：{} (回填控件的數據對象) * }, * updateRecordId : (更新對應的數據行Id,主表控件沒有，明細表控件有) * } * Array格式： * [ * { * tableName : (表名), * tableCategory : (表類型(formmain || formson)), * updateData : { * filedName(表單對應控件名) ：{} (回填控件的數據對象) * }, * updateRecordId : (更新對應的數據行Id,主表控件沒有，明細表控件有) * } * ] * 注意： * 1.回填是根據后端控件值格式 * 2.回填輸的數據對象里面有三個值很特殊：從入口方法獲取的前端控件對象里面三個屬性名是showValue, value, valueId.對應的回填對象里面格屬性名是showValue，showValue2, value (非常重要) * 3. 2里面獲取的前端控件數據對象里面的屬性名和回填控件的數據對象屬性名 showValue = showValue, value = showValue2, valueId = value （非常重要） * */ window.thirdPartyFormAPI.backfillFormControlData(data); ~~~ #### 2.3 backfillFormAttachment(data) ~~~javascript /** * 示例： * 說明：此接口用于回填表單里面控件的附件 * 參數：data -> (Object || Array) 組織的回填附件數據 * Object格式： * { * tableName : (表名), * tableCategory : (表類型), * updateRecordId : (更新對應的數據行Id,主表控件沒有，明細表控件有), * handlerMode : (操作類型值：添加add和刪除delete), * fieldName : (表單回填的對應控件名), * addAttchmentData : [{}], // 回填控件的附件信息列表，附件信息對象需要經過后端對應的格式生成 * deleteAttachmentData ：[] // 回填控件附件列表中要刪除的對應Id數組 * } * Array格式： * [ * { * tableName : (表名), * tableCategory : (表類型), * updateRecordId : (更新對應的數據行Id,主表控件沒有，明細表控件有), * handlerMode : (操作類型值：添加add和刪除delete), * fieldName : (表單回填的對應控件名), * addAttchmentData : [{}], // 回填控件的附件信息列表，附件信息對象需要經過后端對應的格式生成 * deleteAttachmentData ：[] // 回填控件附件列表中要刪除的對應Id數組 * } * ] * 注意： * 1.handlerMode屬性有兩個值必填其一 * 2.handlerMode屬性為‘add’ => 只會去讀取addAttchmentData屬性列表，所以必填 * 3.handlerMode屬性為‘delete’ => 只會去讀取deleteAttachmentData屬性數組，所以必填 * * * */ window.thirdPartyFormAPI.backfillFormAttachment(data); ~~~ #### 2.4 changeFormFieldAuth(params) ~~~javascript /** * 說明：更新表單控件的權限 * 參數：params => (Object) * { * formType : 'formmain', // 'formmain','formson' * tableName : 'formmain_5614', * fieldID : 'field0001', * recordId : '', // 明細表用，主表傳空 * auth : 'hide' // 'edit','browse','hide' * } * * */ // 更新權限 window.thirdPartyFormAPI.changeFormFieldAuth(params) ~~~ #### 2.5 getChooseFormsonRecord(); （v7.0sp2 1130版本新增） ~~~javascript /** * 說明：獲取明細表選中行 * 返回結果： { * (明細表front表名) ：(當前明細表選中行的索引)， * (明細表表名) : { * index : (當前明細表選中行的索引), * recordId : (當前明細表選中行的recordId) * }, * newChooseTableName : {} // 最近一次操作明細表選中行的信息對象 * } * * */ let indexObj = window.thirdPartyFormAPI.getChooseFormsonRecord(); ~~~ #### 2.6 insertFormsonRecords（params）（v7.0sp2 1130版本新增） ~~~javascript /** * 說明：js新增明細行 * 參數： params => (Object) * { * tableName : (明細表表名), // 必填 * isFormRecords ：（是否在明細表中選中行后面插入）// true, false 兩個值。必填 * chooseRecords ： { // 指定明細行后面插入 * tableName (修改的明細表表名) ：index (明細表索引行 Number類型) * }, * callbackFn : (Function) 操作成功后回調 * } * 注意： * isFormRecords 為true的時候chooseRecords就不生效 * * */ window.thirdPartyFormAPI.insertFormsonRecords(params); ~~~ #### 2.7 copyFormsonRecods（params）（v7.0sp2 1130版本新增） ~~~javascript /** * 說明：js復制明細行 * 參數： params => (Object) * { * tableName : (明細表表名), // 必填 * isFormRecords ：（是否在明細表中選中行后面插入復制）// true, false 兩個值。必填 * chooseRecords ： { // 指定明細行后面插入復制 * tableName (修改的明細表表名) ：index (明細表索引行 Number類型) * }, * callbackFn : (Function) 操作成功后回調 * } * 注意： * isFormRecords 為true的時候chooseRecords就不生效 * isFormRecords 為true 或者chooseRecords 其一必須滿足 * * */ window.thirdPartyFormAPI.copyFormsonRecods(params); ~~~ #### 2.8 deleteFormsonRecods（params）（v7.0sp2 1130版本新增） ~~~javascript /** * 說明：js刪除明細行 * 參數： params => (Object) * { * tableName : (明細表表名), // 必填 * isFormRecords ：（是否在明細表中選中行刪除）// true, false 兩個值。必填 * chooseRecords ： { // 指定明細行刪除 * tableName (修改的明細表表名) ：index (明細表索引行 Number類型) * }, * callbackFn : (Function) 操作成功后回調 * } * 注意： * isFormRecords 為true的時候chooseRecords就不生效 * isFormRecords 為true 或者chooseRecords 其一必須滿足 * * */ window.thirdPartyFormAPI.copyFormsonRecods(params); ~~~