diff --git a/README.md b/README.md index cd3887b..74ffd44 100644 --- a/README.md +++ b/README.md @@ -21,16 +21,16 @@ > 前端项目分为通用资源(resource),业务内容(butterfly),大厅应用(shell),大厅管理平台(michael)四个并列文件夹 ### 业务抽象组件 -* [工单列表组件](https://github.com/the8th/vue-ccssoft/wiki/%E5%B7%A5%E5%8D%95%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6) -* [工单详情组件](https://github.com/the8th/vue-ccssoft/wiki/%E5%B7%A5%E5%8D%95%E8%AF%A6%E6%83%85%E7%BB%84%E4%BB%B6) -* [工单操作组件](https://github.com/the8th/vue-ccssoft/wiki/%E5%B7%A5%E5%8D%95%E6%93%8D%E4%BD%9C%E7%BB%84%E4%BB%B6) -* [信息查询组件](https://github.com/the8th/vue-ccssoft/wiki/%E4%BF%A1%E6%81%AF%E6%9F%A5%E8%AF%A2%E7%BB%84%E4%BB%B6) +* [工单列表组件](工单列表组件.md) +* [工单详情组件](工单详情组件.md) +* [工单操作组件](工单操作组件.md) +* [信息查询组件](信息查询组件.md) ### 基础组件 -* [通用表单组件](https://github.com/the8th/vue-ccssoft/wiki/%E9%80%9A%E7%94%A8%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6) -* [通用信息提示组件](https://github.com/the8th/vue-ccssoft/wiki/%E9%80%9A%E7%94%A8%E4%BF%A1%E6%81%AF%E6%8F%90%E7%A4%BA%E7%BB%84%E4%BB%B6) -* [通用名值对串显示组件](https://github.com/the8th/vue-ccssoft/wiki/%E9%80%9A%E7%94%A8%E5%90%8D%E5%80%BC%E5%AF%B9%E4%B8%B2%E6%98%BE%E7%A4%BA%E7%BB%84%E4%BB%B6) +* [通用表单组件](通用表单组件.md) +* [通用信息提示组件](通用信息提示组件.md) +* [通用名值对串显示组件](通用名值对串显示组件.md) * 其他组件 * 工具函数 diff --git a/信息查询组件.md b/信息查询组件.md new file mode 100644 index 0000000..0ff664e --- /dev/null +++ b/信息查询组件.md @@ -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 : [ + ..... + ] + } diff --git a/工单列表组件.md b/工单列表组件.md new file mode 100644 index 0000000..93eb397 --- /dev/null +++ b/工单列表组件.md @@ -0,0 +1,58 @@ +### 调用 +> + +* 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" + } + } \ No newline at end of file diff --git a/工单操作组件.md b/工单操作组件.md new file mode 100644 index 0000000..e1e2bd3 --- /dev/null +++ b/工单操作组件.md @@ -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() + } + } \ No newline at end of file diff --git a/工单详情组件.md b/工单详情组件.md new file mode 100644 index 0000000..9d32108 --- /dev/null +++ b/工单详情组件.md @@ -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" + } \ No newline at end of file diff --git a/通用信息提示组件.md b/通用信息提示组件.md new file mode 100644 index 0000000..e1a44bd --- /dev/null +++ b/通用信息提示组件.md @@ -0,0 +1,11 @@ +> \resource\components\mobile\Panel.js + +* 一个基础的面板组件 +* 用于显示一些简单的提示信息 +* 根据状态不同，提示 成功，警告，失败，普通 等状态 +> + + + + + diff --git a/通用名值对串显示组件.md b/通用名值对串显示组件.md new file mode 100644 index 0000000..272e950 --- /dev/null +++ b/通用名值对串显示组件.md @@ -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"} \ No newline at end of file diff --git a/通用表单组件.md b/通用表单组件.md new file mode 100644 index 0000000..205e44c --- /dev/null +++ b/通用表单组件.md @@ -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')" +