张旭
8 years ago
8 changed files with 507 additions and 7 deletions
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
###信息查询组件对应有三种接口： |
||||
1. 查询项列表（非必需） |
||||
2. 查询项配置 |
||||
3. 查询结果配置 |
||||
### 查询项列表 |
||||
> 查询项列表目的是将查询项目与项目编号关联起来，方便用户自行选择进入查询项。格式如下： |
||||
> 相关组件(butterfly\infoService\List.js) |
||||
> |
||||
[ |
||||
{ |
||||
"name":"ITMS", |
||||
"code":"IDM_APP_NETOP_ITMS", |
||||
"value":[ |
||||
{"name":"数据自助下发","code":"IDM_APP_NETOP_ITMS_DONE"}, |
||||
{"name":"用户设备绑定","code":"IDM_APP_NETOP_ITMS_BIND"}, |
||||
{"name":"用户设备解绑","code":"IDM_APP_NETOP_ITMS_RELEASE"}, |
||||
{"name":"终端重启","code":"IDM_APP_NETOP_ITMS_REBOOT"}, |
||||
{"name":"桥接和路由修改","code":"IDM_APP_NETOP_ITMS_BRIDGETOROUT"}, |
||||
... |
||||
] |
||||
}, |
||||
{ |
||||
"name":"固网3A", |
||||
"code":"IDM_APP_NETOP_AIOBS", |
||||
"value":[] |
||||
}, |
||||
{ |
||||
"name":"PON", |
||||
"code":"IDM_APP_NETOP_PON", |
||||
"value":[] |
||||
} |
||||
] |
||||
### 查询项配置 |
||||
> 查询项配置简单配置一些诸如标题，表单项，查询接口等信息。 其中表单格式见通用表单组件。 |
||||
> 根据该配置，界面会自动生成查询表单，用户点击查询时，会自动将表单内容提交到action所指向到的接口。然后根据返回内容进行下一步 |
||||
> 相关组件(butterfly\infoService\Detail.js) |
||||
> |
||||
{ |
||||
"title":"数据自助下发", |
||||
"ifCode":"itms_serviceDone", |
||||
"action":"/mop/proxyIda/ida30/xxxxx", |
||||
"operationType":"change",//查询类型。表示该次查询是查询/更改（search,change）。如果为change，在点击查询按钮时会要求确认 |
||||
"form":[] |
||||
} |
||||
### 查询结果配置 |
||||
>查询结果接口即是查询项配置中的action接口。 |
||||
>返回值有三种处理方式。 |
||||
1. 返回结果状态码不为200，将提示操作失败 |
||||
2. 返回结果状态码为200，但数据为空，将直接提示操作成功 |
||||
3. 返回结果有数据。此时需要指定用哪个组件来展示数据。这时根据不同业务将有不同变化。暂时只支持map这一种类型，调用了DetailView组件 |
||||
> |
||||
{ |
||||
map : [ |
||||
..... |
||||
] |
||||
} |
||||
@ -0,0 +1,58 @@
@@ -0,0 +1,58 @@
|
||||
### 调用 |
||||
> |
||||
<listview :source="getBillList" :page-size="8"></listview> |
||||
* source可以为一个url，或一个方法。如果是url，直接从该url请求数据。如果是一个方法，该方法接收一个param参数，包含页码等信息。方法必须返回一个promise对象，resolve一个指定格式的列表数据 |
||||
|
||||
### 工单列表组件的数据由三部分组成 |
||||
1. 查询表单 |
||||
2. 列表项 |
||||
3. 页码信息 |
||||
### 基础的数据格式如下： |
||||
> 工单列表页渲染组件(\resource\components\mobile\bill\ListView.js) |
||||
> |
||||
{ |
||||
"queryForm":[],//工单查询条件,详见[列表表单组件] |
||||
"resultList":[],//工单列表数据，详见列表项数据格式 |
||||
"totalCount":48,//工单总条目数 |
||||
"pageCount":3//工单总页数 |
||||
} |
||||
### 列表项数据格式如下： |
||||
> 列表项渲染组件（\resource\components\mobile\bill\ListItem.js） |
||||
> |
||||
{ |
||||
"title":"451000201815",//工单标题 |
||||
"subTitle":"",//工单副标题 |
||||
"icon":"resource/images/openBills/open_01.png",//工单显示图标 |
||||
"tags":[//工单的属性标记 type:normal,warn,error 分别为绿色，黄色，红色 value:true显示，false不显示 |
||||
{"name":"待回单","type":"normal","value":"true"}, |
||||
{"name":"催装0次","type":"warn","value":"false"} |
||||
], |
||||
"props":[//工单属性列表，icon样式见font-awesome |
||||
{"icon":"fa fa-home","value":"哈尔滨市香坊区鼎园明府小区2号楼2单元802室"} |
||||
], |
||||
"extend":[//工单扩展属性列表 |
||||
{"key":"上门","value":""}, |
||||
{"key":"预约","value":"2017-05-16 14:58:56"}, |
||||
{"key":"截至","value":"2017-05-17 23:59:59"} |
||||
], |
||||
"methods":{//工单操作，分三类：tel:拨打电话 map:打开地图定位 menu:打开菜单 |
||||
"tel":"18004667853",//电话号码 |
||||
"map":"xxxxxx",//客户地址 |
||||
"menu":"xxxxxx"//菜单项接口地址。 菜单配置 详见[工单菜单配置] |
||||
}, |
||||
"detail":"/openBill/detail?DispatchSn=xxxxxxxx&MainSn=xxxxxxxx",//工单详情地址 |
||||
"data":{//工单原始数据 |
||||
"DispatchSn":"xxxxxxxx", |
||||
"MainSn":"xxxxxxxx", |
||||
"ClogCode":"xxxxxxxx", |
||||
"NativeNetId":"xxxxxxxx", |
||||
"WorkType":"新装", |
||||
"WorkAction":"装", |
||||
"SpecialtyId":"xxxxxxxx", |
||||
"Contactor":"xxxxxxxx", |
||||
"ContactPhone":"xxxxxxxx", |
||||
"Applytime":"2017-05-15 09:34:18", |
||||
"ReqRepairTime":"2017-05-17 23:59:59", |
||||
"InstAddress":"xxxxxxxx" |
||||
} |
||||
} |
||||
@ -0,0 +1,79 @@
@@ -0,0 +1,79 @@
|
||||
# 分别对应列表操作项[common/bill/ListMethods]和详情操作项[common/bill/DetailMenu] |
||||
|
||||
> |
||||
[ |
||||
//flow属性代表在详情中渲染为一个大按钮 |
||||
//具有value属性，表示将执行该js方法 |
||||
//组件将向上冒泡一个通知 |
||||
//业务层需要监听该通知，然后自行触发该方法（方法需要自己实现） |
||||
{"name":"拍照","value":"ev_photo","flow":"","code":"IDE_APP_OPEN_PHOTO"}, |
||||
{"name":"材料使用","value":"ev_usecircsmate","flow":"","code":"IDE_APP_OPEN_USECIRCSMATE"}, |
||||
{"name":"回单","value":"ev_return","flow":"true","code":"IDE_APP_OPEN_RETURN"}, |
||||
//以下为自动处理的操作 |
||||
|
||||
//直接向接口提交数据即可完成的操作 |
||||
//action为submit |
||||
//paramter为一个逗号分隔的键名，组件自动获取到工单的相关键值，发送到指定接口 |
||||
{ |
||||
"paramter":"DispatchSn", |
||||
"name":"接单", |
||||
"action":"submit", |
||||
"flow":"true", |
||||
"code":"IDE_APP_OPEN_ACCEPT", |
||||
"url":"/mop/proxyIda/ida30/h5/app/AppPublicAction.do?method=service&ifCode=open_accept" |
||||
}, |
||||
//需要显示一个交互表单的操作 |
||||
//action为form |
||||
//url为获取form定义的接口名 |
||||
{ |
||||
"paramter":"DispatchSn", |
||||
"name":"挂起", |
||||
"action":"form", |
||||
"flow":"", |
||||
"code":"IDE_APP_OPEN_HANDUP", |
||||
"url":"/mop/proxyIda/ida30/h5/app/AppPublicAction.do?method=getFormDefine&formCode=open_hungUp_page" |
||||
} |
||||
] |
||||
|
||||
# 表单格式 |
||||
> |
||||
//title为交互窗显示的标题 |
||||
//action为form提交地址 |
||||
//form为通用表单格式 |
||||
//onSuccess定义表单提交后的后续动作 |
||||
//目前规定为4种: |
||||
//1.refreshList 刷新工单列表 在列表时直接刷新列表数据 在详情时返回 |
||||
//2.refreshBill 刷新工单数据（含菜单） |
||||
//3.refreshMenu 刷新菜单 |
||||
//4. "" nothing 什么都不干 |
||||
|
||||
//可以配置一个onSubmit属性，值为一个js方法。 |
||||
//在这种情况下表单将派发一个execute事件给业务组件。 |
||||
//此时业务组件需要实现此方法，获取的入参为表单值。 |
||||
//业务方法需要返回一个promise对象 |
||||
|
||||
//将通过一个commonMethod事件将动作向上冒泡，业务代码捕获到后自行处理 |
||||
{ |
||||
"title":"解挂", |
||||
"action":"/mop/proxyIda/ida30/h5/app/AppPublicAction.do?method=service&ifCode=open_unhangup&DispatchSn=20170501212484", |
||||
"onSuccess":"refreshBill", |
||||
"form":[] |
||||
} |
||||
|
||||
#业务页面处理后续动作的示例代码 |
||||
> |
||||
events : { |
||||
commonMethod : function(method,component,callback){ |
||||
if(method==="refreshList"){ |
||||
this.reload() |
||||
return callback() |
||||
} |
||||
if(method==="refreshBill"){ |
||||
return this.refreshBill(component).then(callback) |
||||
} |
||||
if(method==="refreshMenu"){ |
||||
return this.refreshMethods(component).then(callback) |
||||
} |
||||
return callback() |
||||
} |
||||
} |
||||
@ -0,0 +1,111 @@
@@ -0,0 +1,111 @@
|
||||
### 工单详情组件由一个tab和若干组件拼接而成 |
||||
|
||||
* pageList值为一个数组，category表示tab标题，content可由多个组件堆砌而成，type表示显示的组件类型，data为组件数据 |
||||
* data为工单原始数据 |
||||
* menuUrl为菜单接口url |
||||
* |
||||
> |
||||
{ |
||||
"pageList":[ |
||||
{ |
||||
"category":"工单信息", |
||||
//content内容调用了MultipleView,详细格式参考common.MultipleView.js |
||||
"content":[ |
||||
{ |
||||
"component":"detailview", |
||||
data":[xxxxx] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
"category":"用户资料", |
||||
"content":[] |
||||
}, |
||||
{ |
||||
"category":"线路信息", |
||||
"content":[] |
||||
}, |
||||
{ |
||||
"category":"处理步骤", |
||||
"content":[] |
||||
} |
||||
], |
||||
"data":{ |
||||
"DispatchSn":"20170501358807", |
||||
"MainSn":"2017051500000431", |
||||
"ClogCode":"451000201815", |
||||
... |
||||
}, |
||||
"menuUrl":"/ida30/h5/app/xxxxx" |
||||
} |
||||
|
||||
> 以下为旧版格式，目前仍然兼容 |
||||
* 目前可以在详情页作为tab展现的组件有DetailView，FlowView |
||||
> |
||||
{ |
||||
"pageList":[ |
||||
{ |
||||
"category":"工单信息", |
||||
"content":[ |
||||
{ |
||||
"type":"listView", |
||||
data":[ |
||||
{"name":"订单编号","value":"51000000000097365066","prop":""}, |
||||
{"name":"申请时间","value":"2017-5-15 9:34:18","prop":""}, |
||||
{"name":"产品名称","value":"智慧家庭"}, |
||||
{"name":"工单状态","value":"待回单","prop":""}, |
||||
{"name":"施工类型","value":"新装","prop":""}, |
||||
{"name":"施工动作","value":"装","prop":""}, |
||||
{"name":"局向","value":"香坊区","prop":""}, |
||||
{"name":"业务号码（障碍标识）","value":"451000201815","prop":""}, |
||||
{"name":"预约开始时间","value":"2017-5-17 17:00:00","prop":""}, |
||||
{"name":"预约结束时间","value":"2017-5-17 19:00:00","prop":""}, |
||||
{"name":"先装后付","value":"否","prop":""} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
"category":"用户资料", |
||||
"content":[ |
||||
{ |
||||
"type":"listView", |
||||
"data":[] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
"category":"线路信息", |
||||
"content":[ |
||||
{ |
||||
"type":"listView", |
||||
"data":[] |
||||
} |
||||
] |
||||
}, |
||||
{"category":"处理步骤", |
||||
"content":[ |
||||
{ |
||||
"type":"flowView", |
||||
"data":[ |
||||
{ |
||||
"actionType":"受理", |
||||
"operator":"SysPc", |
||||
"operatorGroup":"", |
||||
"dealInfo":"", |
||||
"operateEndtime":"05-15 09:34" |
||||
}, |
||||
.... |
||||
] |
||||
} |
||||
] |
||||
} |
||||
], |
||||
"data":{ |
||||
"DispatchSn":"20170501358807", |
||||
"MainSn":"2017051500000431", |
||||
"ClogCode":"451000201815", |
||||
... |
||||
}, |
||||
"menuUrl":"/ida30/h5/app/xxxxx" |
||||
} |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
> \resource\components\mobile\Panel.js |
||||
|
||||
* 一个基础的面板组件 |
||||
* 用于显示一些简单的提示信息 |
||||
* 根据状态不同，提示 成功，警告，失败，普通 等状态 |
||||
> |
||||
<panel type="success" text="You successfully read this important alert message."></panel> |
||||
<panel type="error" text="You successfully read this important alert message."></panel> |
||||
<panel type="warn" text="You successfully read this important alert message."></panel> |
||||
<panel type="info" text="You successfully read this important alert message."></panel> |
||||
<panel type="normal" text="You successfully read this important alert message."></panel> |
||||
@ -0,0 +1,28 @@
@@ -0,0 +1,28 @@
|
||||
> \resource\components\mobile\DetailView.js |
||||
|
||||
> |
||||
//展示一个名值对集合 |
||||
/* |
||||
集合成员： |
||||
{ |
||||
hideIfEmpty : true, //值为空时是否隐藏，默认不隐藏 |
||||
name : name, //名称 |
||||
value : value, //值 |
||||
prop : prop || "", //属性 |
||||
important表示值用红色加粗表示 |
||||
divider表示本行是一个分隔行，只显示名称 |
||||
map表示点击后用地图打开 |
||||
telephone表示点击后拨打电话 |
||||
url表示点击后打开一个新界面(本地路由) |
||||
dateLimit表示剩余时间 |
||||
portRate将一个以kb为单位的数字转为mb为单位的字符串 |
||||
colord表示着色，参数为颜色值 |
||||
boolean表示是一个是否值(是，否，Y，N) |
||||
html表示值是html |
||||
largeText表示大文本 |
||||
newValue表示是一个新旧值对比，新值在value里，旧值在extend里 |
||||
|
||||
extend : ""//扩展属性，视prop的值不同，格式不同 |
||||
} |
||||
*/ |
||||
> 如： {name:"红色",value:"我是红色字",prop:"colord",extend:"red"} |
||||
@ -0,0 +1,157 @@
@@ -0,0 +1,157 @@
|
||||
# 通用表单组件 |
||||
|
||||
> |
||||
将表单抽象为配置数据，再使用本组件进行还原 |
||||
用例：\resource\components\testCase\mobile\common.formComponents.Form.js |
||||
可使用 /test/common.FormComponents.Form 路由在项目中查看 |
||||
> 组件显示为三种样式 |
||||
* common/formComonents/Form //在模态窗使用 |
||||
* common/formComonents/FormInPage //在普通页面使用 |
||||
* common/formComonents/FormInGrid //在回单页面使用 |
||||
### 支持表单类型 |
||||
|
||||
* text |
||||
* password |
||||
* radio |
||||
* select |
||||
* checkbox |
||||
* textarea |
||||
* date |
||||
* datetime |
||||
* range |
||||
* tree |
||||
* scan |
||||
* photo |
||||
* locate |
||||
* custom |
||||
### 通用属性 |
||||
* label 表单项显示名称 |
||||
* value 表单项值 |
||||
* valid 表单项验证规则 |
||||
* show 表单项显示条件 |
||||
text,password,date,datetime,tree 具有的属性 |
||||
name,placeholder,maxlength,readonly,disabled |
||||
|
||||
|
||||
### date,datetime允许设置一个valueTemplate属性来格式化日期 |
||||
* 默认 date: yyyy-MM-dd |
||||
* 默认 dateTime : yyyy-MM-dd hh:mm:ss |
||||
|
||||
### select,radio,checkbox具有的属性 |
||||
* options: Array |
||||
* value : String |
||||
* label : String |
||||
* selected : Boolean |
||||
> 如果组件本身具有value，则抛弃option的selected属性 |
||||
* 支持异步获取options |
||||
* 当表单项本身没有配置options，且配置了config时触发异步加载options |
||||
> |
||||
{ |
||||
"name":"ChangeOper", |
||||
"label":"改派人员", |
||||
"type":"select", |
||||
"valid":"required", |
||||
"config":{ |
||||
"url":"/mop/xxxx/xxx?xxx=xxx", |
||||
"name":"UserName", |
||||
"value":"UserId" |
||||
} |
||||
} |
||||
|
||||
### tree具有的属性 |
||||
* root : 根节点ID |
||||
* url : 树url |
||||
* idKey : 主键字段名 |
||||
* pidKey : 父节点字段名 default:parentId |
||||
* valueKey : 供显示的名字 default:name |
||||
* isLeaf : 是否叶子节点判断 Function,入参节点数据，返回true false |
||||
* async : 是否异步树 |
||||
* 如果是异步树，控件会自动将idKey指定的值作为参数查询下级节点，不需要拼在url上 |
||||
* 如果确实需要默认查一个节点，请设置root属性的值 |
||||
> 例： |
||||
> |
||||
{ |
||||
"name":"ChangeOper", |
||||
"label":"转派人员", |
||||
"type":"tree", |
||||
"valid":"required", |
||||
//配置一个模板，提交的值为模板生成的数据.否则直接取idKey所表示的数据 |
||||
//是一句js表达式，可使用item对象访问当前节点数据 |
||||
"valueTemplate":"item.ParentOrgId+'#'+item.OrgId+'#'+item.OrgName", |
||||
"config":{ |
||||
"url":"/url/urlxxxx?ccc=bbb&orgid=长沙", |
||||
"idKey":"OrgId", |
||||
"pidKey":"ParentOrgId", |
||||
"valueKey":"OrgName", |
||||
"async":true, |
||||
"isLeaf":"item.OrgType==='USER'" |
||||
} |
||||
} |
||||
|
||||
# 表单的交互方法 |
||||
### 可向表单组件广播以下事件 |
||||
* getValue(callback) 返回表单数据,不验证 |
||||
* validate(callback,errorCallback) 验证表单，Promise方法，全部验证通过则resolve表单数据，否则reject错误 |
||||
* setAttr(name,attr,value) |
||||
> |
||||
name : 表单项name |
||||
attr : 表单项属性 |
||||
value : 表单项属性的值 |
||||
如 |
||||
this.$broadcast("username","value","sa") |
||||
除非很清楚自己在干什么，否则不要使用 |
||||
|
||||
### 可监听表单组件冒泡的事件 |
||||
* change(form) |
||||
> 当表单发生变化时冒泡该事件 |
||||
|
||||
* changeValue(name,oldValue,newValue) |
||||
> 当有表单项值发生改变时冒泡该事件。配合setAttr可实现表单项关联 |
||||
|
||||
# 自定义表单项 类型为custom |
||||
* 允许自行实现一个组件，作为表单项的选择窗口 |
||||
* 组件可以配置一些props获得当前表单的一些上下文信息 |
||||
* getFormValues:Function 返回当前表单的值 |
||||
* getConfig 返回当前表单项配置 |
||||
* getDialog 返回当前模态窗实例 |
||||
|
||||
* 如果配置了按钮（默认有按钮）,组件需要实现一个submit方法，返回一个promise，返回值是一个包含 name,value 字段的对象 |
||||
* 如果没有配置按钮，组件需要调模态窗的close方法，将返回值传入。如：this.getDialog().close({name:"1",value:"2"}) |
||||
|
||||
> |
||||
{ |
||||
"name" : "test", |
||||
"label" : "自定义表单项", |
||||
"type" : "custom", |
||||
"component" : "./../resource/components/testCase/mobile/ExampleFormMemberComponent" |
||||
}, |
||||
{ |
||||
"name" : "test1", |
||||
"label" : "选择地址", |
||||
"type" : "custom", |
||||
"component" : "./openBill/SelectResAddressForm",//自定义组件地址 |
||||
"config" : { |
||||
"showBtn" : false,//弹出窗是否显示提交按钮 |
||||
"btnText" : "确定选择",//弹出窗按钮文字 |
||||
"selectText" : "选择地址"//选择按钮文字 |
||||
}, |
||||
"data" : { |
||||
"SpecialtyId" : "11111111" |
||||
} |
||||
} |
||||
|
||||
### 表单验证属性规则： |
||||
* url |
||||
* base64 |
||||
* ip |
||||
* email |
||||
* numeric |
||||
* integer |
||||
* required |
||||
* regex(%5E((http%7Chttps%7Cftp%7Cvm)%3A%2F%2F)) //自定义正则 因正则特殊字符较多难以处理，需要先encodeURIComponent处理 |
||||
* range(7,8)//长度在7-8 |
||||
* async('/xxxx.do')//异步验证 |
||||
|
||||
>支持管道式组合验证 如 |
||||
>valid:"required|url|range(7,8)|async('/xxxx.do')" |
||||
|
||||
Loading…
Reference in new issue