动态单据控件配置说明5.0

动态单据配置说明

版本	v1.5.0
日期	2020-09-26

一、创建元数据介绍

1、元数据创建

• 各业务文件配置命名建议

  业务名称 + bill + 表单页面
  
  例如资产调拨业务
  新建页面：transfer_bill_add
  详情页面：transfer_bill_show
  审批页面：transfer_bill_review
  

• 元数据主要元素构成

  • name 元数据查询标识
  • description 描述信息
  • type 类型 “gams2.bill.form” （固定）
  • formats 格式JSON
  • content 单据页面元素配置信息 (详细说明可查阅 第三章《元数据详细介绍》)
    • billdefine 配置单据定义
    • editable 配置字段是否可编辑状态
    • actions 页面所有需要执行的动作方法标识
    • page 页面元素布局和子控件配置信息

• 前端通过解析元数据content配置，包括元素控件布局和子控件配置所需要的参数，实现页面布局展示效果，并结合按钮动作等，实现业务数据操作和存储取值，完成整个业务单据流程。

元数据主结构示例：

{
   
	"name": "com.jiuqi.np.gams2.business.billform.dynamic_transfer.transfer_bill_add",
	"description": "没有描述",
	"title": "资产调拨申请",
	"type": "gams2.bill.form",
	"formats": "JSON",
	"content": {
   
		"billdefine": "com.jiuqi.np.gams2.business.bill.TransferBillDefine",
		"editable": [
			{
   
				"table": "gams_transfer",
				"field": "zongje",
				"expression": "gams_transfer.zongje>100.00"
			}
		],
		"actions": [
			{
   
				"name": "submitData",
				"execute": "saveAction",
				"param": {
   
					"viewName":"com.jiuqi.np.gams2.business.billform.detail",
                    "actionItems": "bill.save",
                    "startworkflow":true
				},
				"enable": "true"
			}
		],
		"page": {
   
			"layout": {
   },
			"slots": {
   
				"children": {
   
					"layout": {
   
						"padding": {
   
							"top": "65px",
							"bottom": "50px",
							"right": "15px",
							"left": "15px"
						}
					},
					"elements": [
						
					]
				}
			}
		}
	}
}

二、前端如何调用表单

1、功能树配置

• functional billForm 对应前端配置功能标识（固定）
• param 参数
  • 参数 name 配置元数据查询标识 - “com.jiuqi.np.gams2.business.billform.dynamic_transfer.transfer_bill_add”
  • 参数 type 配置， 新建为 init

{
   
    "functional": "billForm",   // 对应前端配置功能标识（固定）
    "comments": {
   
        "function": "AssetTransferList", // 查询列表标识
        "icon": null,
        "showSub": true,
        "title": "查询"
    },
    "param": {
   
        "name":"",     // 配置元数据查询标识
        "type":"init"  // 控件加载状态 新建为init
    },
    "name": "Transfer",
    "description": "部门间调拨申请",
    "title": "部门间调拨",    // 浏览器页签展示标题
    "nodeType": "FUNCTION",
    "privilegeResourceName": "ZICDB_OUT"
},

2、路由方式

（1）浏览

• 本页签内浏览路由

path:"/showBillForm/:formName/:id"

• 打开新页签浏览路由

path:'/newPage/showBillForm/:formName/:id'

参数说明：

formName：表单元数据标识
id: 数据ID

代码示例：

//路由跳转
this.$router.push({
   path:'/showBillForm/:formName/:id'})

//打开新页签
let routeData = this.$router.resolve({
   
    path: "/newPage/showBillForm/:formName/:id"
})
window.open(routeData.href, '_blank');

（2）编辑

• 本页签内浏览路由

path:"/editBillForm/:formName/:id"

• 打开新页签浏览路由

path:'/newPage/editBillForm/:formName/:id'

参数说明：

formName：表单元数据标识
id: 数据ID

代码示例：

//路由跳转
this.$router.push({
   path:'/editBillForm/:formName/:id'})
//打开新页签
let routeData = this.$router.resolve({
   
    path: "/newPage/editBillForm/:formName/:id"
})
window.open(routeData.href, '_blank');

3、直接引用组件

• 需要使用动态单据配置单独引入billfform.vue 文件，并注册使用，传入控件需要的参数即可

文件引入：
import billForm from "dynamic-form/form/billform.vue 的相对文件路径"

组件注册：
components：{
   
    billform
}
组件使用：
<billForm :type="'load'" :state="readOnly" :id="billId" :name="name" ></billForm>

4、参数说明

// billform 参数说明
新建：
<billForm :type="'init'" :name="name" ></billForm>

详情、审批：
<billForm :type="'load'" :state="readOnly" :id="billId" :name="name" ></billForm>

• type
  • init 类型，为新建页面
  • load 类型，为获取数据查看页面
• id 数据 ID
• state 判断页面是否只读（配置 readOnly 为只读, 配置edit为编辑 ）
• **name ** 对应元数据配置中的 name 元数据查询标识

三、元数据详细介绍

• name 元数据查询标识
• content 单据页面元素配置信息
• billdefine 配置单据定义
• editable 配置字段是否可编辑状态
• actions 页面所有需要执行的动作配置
• page 页面元素子控件配置信息

1、字段可编辑配置

"editable":[
    {
   
        "table": "gams_transfer",
        "field": "zongje",
        "expression": "gams_transfer.zongje>100.00"
    }
]

• table 表名
• field 监听的字段名
• expression 表达式: “gams_transfer.zongje>100.00” 例如主表zongje 字段大于100，可编辑

2、动作配置 actions

​ actions 配置的动作，主要由按钮执行动作标识，前端注册的动作标识，配置动作参数以及动作是否启用等配置组成，详细说明如下：

（1） 动作配置

"actions": [
    {
   
        "name": "openQuery",
        "execute": "openListAction",
        "param": {
   
            "routes": "AssetTransferList",
        },
        "enable": "true"
    }
]

• name 动作在本页面的名称，与按钮配置的action 对应
• execute 真正执行的前端动作
• param 参数
• enable 动作是否可用的校验表达式

（2）界面关联（以按钮为例）

{
   
    "type": "Button",
    "config": {
   
        "text": "打开查询",
        "size": "default",
        "type": "primary",
        "action": "openQuery" // 关联动作的name属性
    }
}

3、页面配置 page

​ page 为页面主要结构配置和子元素配置，结合布局控件（顺序布局、网格布局、Card容器等）和页面通用子元素控件，通过控制元素定位、内外边距以及宽高、边框、圆角、阴影等属性配置，实现页面设计效果。

​ 布局控件和单据控件使用可详见《控件配置说明API》

3.1 配置属性说明

• 元数据属性解释：
  • layout
    • 元素布局的layout 中 可配置外边距、宽高、吸附等 属性；
    • 卡槽布局的layout 中 可配置内边距属性。
  • slots 卡槽 ，布局控件的slots 卡槽布局layout支持内边距控制，在 卡槽内 elements 中配置子控件元素。
  • style 样式拓展：可配置边框、圆角、阴影等属性。
  • elements 配置子控件元素
    • title 控件名称
    • type 控件标识
    • layout 元素布局
    • **config ** 控件配置,（配置属性或配置控件）根据控件能力而定；（具体控件配置详见《控件配置说明API》）。
• 页面配置结构如下：

"page": {
   
	"layout":{
    		// 元素布局，支持外边距、宽高和吸附等（根据控件能力而定）
   		"margin":0
    },
	"slots": {
   					 // 卡槽
		"children": {
      		 // 控件支持的卡槽
            "layout": {
   	 		 // 卡槽布局，目前支持内边距
                "padding": {
    	 // 容器内边距控制
                    "top": "65px",
                    "bottom": "50px",
                    "right": "15px",
                    "left": "15px"
                }
            },
            "elements": [	// 配置子控件元素
                {
   							//（定位栏控件为例）
                    "name": "PositionBarControl",
                    "title": "定位栏控件",
                    "type": "PositionBarControl", // 控件标识
                    "layout": {
   			    // 元素布局
                        "width": "100%",
                        "height": "50px",   // 定位栏高度配置
                        "adsorption": true, // 是否开启吸附
                        "margin": {
   			// 吸附定位配置
                            "top": "0px",
                            "left": "0px"
                        }
                    },
                    "style":{
   				// 配置边框、圆角等属性
                        "border":{
    			// 使用定位栏控件需要单独配置上下边框
                            "bottom":"1px solid #EAEAEA"
                        }
                    },
                    "config": {
   				// 控件配置
                        "title": "顶部定位栏标题",
                        "elements": [       // 定位栏控件支持配置按钮控件
                            {
   
                                "type": "Button",   // 控件标识
                                "config": {
   
                                    "text": "打开资产列表", // 按钮文字
                                    "size": "default",	  // 按钮尺寸
                                    "type": "primary",	  // 按钮类型
                                    "action": "openQuery" // 关联动作的name属性
                                }
                            }
                        ]
                    }
                }
            ]
        }
	}
}

3.2 布局支持能力

布局默认支撑 :所有布局控件的布局和卡槽布局都支持以下能力

• 布局

  • 外边框：margin，配置方式有以下几种方式

  方式1："margin":"0px"
  方式2："margin":"0px 0px 0px 0px "
  方式3：
  "margin":｛
      "top":"0px",
      "bottom":"0px",
      "left":"0px",
      "right":"0px"
  ｝
  

  • 宽高：配置方式如下：

  "width":"100px",
  "height":"100px"
  

• 卡槽布局

  • 内边距 ： padding 配置方式有以下几种方式

  方式1："padding":"0px"
  方式2："padding":"0px 0px 0px 0px "
  方式3：
  "padding":｛
      "top":"0px",
      "bottom":"0px",
      "left":"0px",
      "right":"0px"
  ｝
  

• 样式拓展 ：边框、圆角、阴影

  // 边框配置
  "style":{
       				// 配置边框属性，支持上下左右边框配置
      "border":{
        			// 使用定位栏控件需要单独配置上下边框
          "bottom":"1px solid #EAEAEA"
      }
  }
  // 圆角、阴影配置
  "style":{
       				
      "border-radius": "4px", // 圆角属性
      "box-shadow":""		    // 阴影属性
  }
  

3.3 配置注意事项

• elements 内配置布局控件和单据控件标识，通过层层解析布局控件和单据控件的 elements 配置的控件标识渲染界面元素

• 布局配置结构主要分为： 顶部控件定位、底部控件定位、控件顺序排列以及左右结构网格布局，通过这些配置组合展现页面元素。

• 在elements 先配置定位（顶部、底部）控件，按顺序从上到下配置页面元素,主表、子表、左右结构主表浏览、子表、审批轨迹等控件。

• 在控件卡槽内配置相应的按钮操作及动作标识，实现数据操作和页面跳转等基础操作。

• 控件定位采用吸附配置（可以将子控件吸附在上下左右的边框位置 ）

  • 目前 定位栏控件PositionBarControl 和 审批控件ApprovalControl 控件采用吸附配置。
  • 当元素布局的layout中配置 adsorption 吸附时，margin的配置为 吸附定位位置配置。

四、按钮动作扩展

1、动作扩展方法

• 动态单据业务中执行的动作，相应的动作处理逻辑在前端注册使用（建议）

  • 在dynamic_form 动态单据actions 文件夹中配置，
  • 在mcon.js中billAction 注册并使用。

  // mcon.js 文件
  // 引入动作js文件
  import selectAction from  './actions/selectAction.js';
  import saveAction from './actions/saveAction.js';
  
  // 动态单据的动作在billAction中注册动作标识
  billAction:{
       
      selectAction,
      saveAction
  }
  

• 注册动作标识建议，标识后缀名统一为Action

• 其他业务引用动态单据，可单独在业务模块中配置动作并注册使用。

2、动作参数说明

• bill 这里是指bill.js , 可直接调用其中的方法
• param 此参数为后端配置动作的参数

3、代码示例

• 需要引入其他组件支持的动作扩展：以saveAction.js 为例

import confirmTip from '../components-control/confirm-tip.vue';  // 引入组件
export default {
   
    execute: function (bill, param) {
   
        if(bill){
   
            let component = null;
	        let name = window.$hideContain.addComponent(confirmTip,{
   },function(c){
   
                component = c;
                c.bill = bill;
                c.param = param;
                c.getConfirmInfomation();
	            c.$nextTick(function(){
   
	                component.addListener({
   		// 监听销毁组件
	                    close:function(){
   
                            window.$hideContain.remove(name);
	                    }
	                });
				});
	        });

        }else{
   
            alert('缺少参数');
        }
    }   
}

• 直接调用bill处理参数的动作扩展: 以deleteTableAction.js 为例

export default {
   
    execute: function (bill, param) {
   
        if(bill){
   
            bill.deleteSubData(param.param.tableName,bill.getCurrentIndex());
        }else{
   
            alert('缺少参数');
        }
    }   
}

五、单据控件扩展

1、控件扩展方法

• 前端动态单据控件扩展及注册位置（建议）

  • 在dynamic_form 动态单据control文件夹中配置控件，
  • 在mcon.js中 billControl 注册并使用。

  // mcon.js 文件
  // 引入动态单据控件文件
  var PositionBarControl = () => import('./control/PositionBar.vue');
  var ApprovalControl = () => import('./control/ApprovalControl.vue');
  
  // 动态单据控件在billControl中注册控件标识
   billControl:{
       
       PositionBarControl:PositionBarControl,
       ApprovalControl:ApprovalControl
   }
  

• 注册单据控件标识建议，标识后缀名统一为Control

2、参数说明及注意事项

• 单据控件引入已有全局控件，建议使用以下方式引入控件文件并注册使用
• 单据控件内必须接收 define 和 context 参数

<template>
<div>
  <Business :billDefine="billdefine"></Business>
</div>
</template>
<script>
import Business from "../../../components/collapse/BusinessInstructions.vue" // 引入组件
export default {
    
  name:'Business',
  data() {
    
    return {
    };
  },
  components:{
    
    Business 		 // 注册组件
  },
  props: {
    
    define: {
           // define  为元数据控件配置参数
         type: Object,
         required: true,
     	 default:function() {
    
          	return {
    }
      	 }
    },
    context: {
         //  context  可获取单据上下文数据信息
        type: Object,
        required: false,
        default:function() {
    
           return {
    }
       }
    }
  }
};
</script>

六、按钮动作API

1、目前已支持动作

• 暂存操作 tempAction
• 保存操作 saveAction
• 选择资产 selectAction
• 导出按钮 exportAction
• 打开列表 openListAction
• 子表删除 deleteTableAction
• 推送财务按钮 tuiScwAction
• 审批按钮 businessApproval
• 卡片详情按钮 showDyCardAction
• 单据保存再编辑按钮 againEditByDynamicForm
• 添加资产/逐条完善按钮 addAssetsAction

2、动作配置说明

2.1 暂存操作

• 控件描述及支持特性

  • name 按钮名字 必须和配置的按钮action对应的value
  • execute 所需执行的事件 “tempAction”
  • actionItems action执行的动作 与单据定义中action对应的value一致
  • enable 按钮是否可用 true 永久可用 ，可配置公式

  例如 :

  gams_transfer.zongsl<100.00
  在总数量小于100时按钮可点击
  

• 控件配置

{
   
    "name": "submitData",
    "execute": "tempAction",
    "param": {
   
        "actionItems": "bill.quickSave"
    },
    "enable": "gams_transfer.zongsl<100.00"
}

2.2 保存操作

• 控件描述及支持特性

  • name 按钮名字 必须和配置的按钮action对应的value
  • execute 所需执行的事件 “saveAction”,
  • viewName 配置对应元数据查询标识
  • actionItems action执行的动作 与单据定义中action对应的value一致
  • startworkflow 是否需要前端调用工作流
  • enable 按钮是否可用 true 永久可用 ，可配置公式
  • checkJizrq :是否校验记账日期 默认不校验
  • checkUrl :校验 接口
  • checkTable 操作的子表名称
  • checkId 卡片id映射的字段
  • checkBusiness 根据业务校验
  • noCheckCardDepressPeriod 不需要检验折旧（默认校验）
  • noCheckSubTable 没有字表需要配置的参数
  • checkFileGroup 校验附报材料
  • checkAttachment 校验附报材料 （采购版，有附报材料上传的组件再配置,不要瞎配置）
  • saveAttachment 保存附报材料 （采购版，有附报材料上传的组件再配置,不要瞎配置）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RILYqkTG-1602296166503)(动态单据控件配置说明3.0.assets/附报保存采购版.png)]

• showConfirmTipInfo 保存信息提示框参数
  • confirmTitle 提示信息标题
  • infoList 需要真是出来的信息
    • key 字段 名称
    • title 标题
    • valueFormat 数据格式 支持千分位（Thousands）
    • col 信息展示长度 （12/24）
    • type 主子表类型 默认主表
    • precision 小数精确度

例如 :

  gams_transfer.zongsl<100.00
  在总数量小于100时按钮可点击

• 控件配置

{
   
    "name": "submitData",
    "execute": "saveAction",
    "param": {
   
        "viewName":"com.jiuqi.np.gams2.business.billform.detail",
        "checkAttachment":["caigAttachment"],
        "saveAttachment":["caigAttachment"],
        "addListener":true,
        "actionItems": "bill.save",
        "startworkflow": true,
        "checkJizrq" :true,
        "checkUrl": "/construction/compareJizrq",
        "checkTable":["detailList"],
	    "checkId":"cardobjectid",
        "noCheckSubTable":true,
        "showConfirmTipInfo":{
   
            
        }
    },
    "enable": "gams_transfer.zongsl<100.00"
}

2.3 选择资产卡片

• 控件描述及支持特性

  • name 按钮名字 必须和配置的按钮action对应的value

  • execute 所需执行的事件 selectAction

  • tableName 操作的子表名称

  • customReqUrl:自定义请求

  • selectionDefineKey 单据定义中selectionDefine中的key

  • enable 按钮是否可用 true 永久可用 ，可配置公式

  • noAssignDataField不需要赋值的字段

  • fields 字段不一致 前面是子表里的字段 后面是 卡片组件里的字段

  • formulaKey 公式执行的key 需要进入页面就执行按钮公式需要配置

  • description 当按钮不可点击时的提示信息

  • noSubTableField 子表中没有的字段但是要显示出来

  • saveCardAll 存储所选择资产或者卡片的所有数据

  • customSelectData 自定义选择资产后的js js在mcon.js里的actions里注册即可

  • tableView :选择后的数据展示在不可编辑表格里

  • key 主子表的逻辑字段名称

  • value 保存数据的字段

  • conditions 选择资产过滤条件

  • noValue 值不存在的 例如财务入账日期不存在的不可以选择

  • fixedValue 特定值的例如价值类型为名义金额的卡片不可选择

  • getCardDepressData 获取卡片最新折旧信息

    "getCardDepressData":[
        {
           
            "targetField":"需要赋值的字段",
            "dataField":"值字段"
        }
    ],
    

  例如 :

  gams_transfer.zongsl<100.00
  在总数量小于100时按钮可点击

• 控件配置

{
   
    "name": "selectCard",
    "execute": "selectAction",
    "param": {
   
        "tableName": "detailList",
        "selectionDefineKey": "transfer",
        "noAssignDataField":["jiaz"],
        "field": {
   
                "billcode": "zicbh",
                "shiybm": "shiybm_old",
                "shiyr": "shiyr_old",
                "cunfdd": "cunfdd_old",
                "objectid": "cardobjectid",
                "id": "cardid"
            },
        "formulaKey":"gams_transfer.yuany",
		"description":"请先填写调拨原因再选择资产",
        "noSubTableField":{
   
			"yujsmzl":{
   "value":"","readOnly":true}
		},
        "saveCardAll":{
   
         	"detailList":"cardInfo"
        },
        "conditions": {