# 页面开发
# $
$是一个function,通过$方法可以获取执行组件的实例,进而对该组件进行相应的操作
$('table-1').getData()
$('table-1').setData([])
$('input-1').getValue()
$('input-1').setValue('hello world')
$('form-1').validate(valid => {
if (valid) {
// do something
}
})
# $vm
云智开发平台的全局api通过$vm访问,包含以下方法
# $emit
参数:
- {String} eventName
- {Any} eventData
用法: 触发当前页面实例上的事件。事件数据都会传给监听器回调
$vm.$emit('complete', {a: 1})
# $on
参数:
- {String} eventName
- {Function} callback
用法: 监听页面实例上的自定义事件。事件可以由 $vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
$vm.$on('complete', (data) => { console.log(data.a) })
# $once
参数:
- {String} eventName
- {Function} callback
用法: 监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。
$vm.$once('complete', (data) => { console.log(data.a) })
# $off
参数:
- {String} eventName
- {Function} callback
用法: 移除自定义事件监听器
$vm.$off('complete', eventCallback)
# $watch
参数:
- {String | Function} expOrFn
- {Function | Object} callback
- {Object} options
- {Boolean} deep
- {Boolean} immediate
返回值:{Function} unwatch
用法: 观察监听数据模型上的某个属性或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。
// 监听 var unwatch = $vm.$watch('a.b', (newValue, oldValue) => { // do something }) // 销毁监听器 unwatch()
# $nextTick
参数:
- {Function} callback
用法: 传入一个function,在下一次事件循环中会执行该function。如下场景,弹窗中有一个表格组件,打开一个弹窗,给表格设置数据。弹窗打开之后的下一个事件循环才可以获取到弹窗下的子组件的实例。
$('view-1').open() $vm.$nextTick(() => { var data = [{a: 1, b: 1}] $('table-1').setData(data) })
# $alert
参数:
- {String} message
用法:进行弹窗提示
$vm.$alert('操作成功')
# $message
- 参数:
- {String} type
- {String} Message
- 用法:信息浮层提示
$vm.$message({
type: 'error', // 提示级别:success || warning || error || info
message: '请求数据失败'
})
// 简化用法:
$vm.$message.success('操作成功')
$vm.$message.info('操作信息')
$vm.$message.warning('操作警告')
$vm.$message.error('操作失败')
# $notify
- 参数:
- {String} title
- {String} message
- {String} type
- 用法:悬浮出现在页面角落,显示全局的通知提醒消息。
$vm.$notify({
title: '成功',
message: '这是一条成功的提示消息',
type: 'success'
});
$vm.$notify({
title: '警告',
message: '这是一条警告的提示消息',
type: 'warning'
});
$vm.$notify.info({
title: '消息',
message: '这是一条消息的提示消息'
});
$vm.$notify.error({
title: '错误',
message: '这是一条错误的提示消息'
});
# $api
$api模块负责api调用,如在平台api中注册的数据服务、脚本服务、原生服务等,通过$api.call()可以自动获取可以调用的api列表。
# call
参数:
{String} apiCode(api编码)
{Object} params(参数)
{Function} successCallback(成功回调)
{Function} failCallback(失败回调)
用法: 调用服务的唯一入口,只需要指定apiCode函数将自动根据api的注册信息构造请求,用户无需关心请求url、method、content-type和如何组装参数。
var params = {
ldc_name: $vm.gatewayV2Test_logistics_centerSelect.request.ldc_name, //物流中心名称
}
var success = function (response) {
if (response.code === 200 ) {
$context.resolve(response.data)
}
}
$api.call('gatewayV2Test_logistics_centerSelect', params, success)
# $bpm
$bpm模块负责bpm流程的调用,包括userTask和serviceTask。
通过$bpm.start()可以自动获取流程定义key来发起流程。
通过$bpm.todoList()可以获取当前用户/当前租户的代办列表。
通过$bpm.next()可以对当前任务进行审核/驳回/指派等操作。
与服务开发的$bpm相比,页面开发的$bpm上的方法都为异步调用, 需要success和fail的callback函数。
# start
用于发起流程,支持批量发起,适用于userTask和serviceTask。
参数:
- {String} startId(流程启动ID)
- {List<Map<String,Objcet>>} params(参数)
- {Function} successCallback(成功回调)
- {Function} failCallback(失败回调)
用法:
发起流程,参数接收一个数组支持批量发起请求,数组中的每个对象至少需要一个参数bussinessKey(业务主键), bussinessKey会流程的整个生命周期中携带。
var params = [{
businessKey: 1, //业务主键
}]
var success = function (response) {
if (response.code === 200 ) {
$context.resolve(response.data)
}
}
var fail = function (response) {
console.error(response.messge)
}
$bpm.start('score_acc-1', params, success, fail)
# todoList
用于获取待办,适用于userTask。
参数:
- {Function} successCallback(成功回调)
- {Function} failCallback(失败回调)
响应:
- {Function} prodDefKey(流程定义Key)
- {Function} startId(流程启动Key)
- {Function} name(流程名)
- {Function} auditUrl(审核链接)
- {Function} listUrl()
- {Function} category()
- {Function} businessKey(业务主键)
- {Function} processInstanceId(流程实例ID)
- {Function} taskId(任务ID)
- {Function} toDoNumber(代办数量)
用法: 获取当前用户在当前租户下的代办列表
var success = function (response) {
if (response.Flag) {
$('table-1').setData(response.data)
}
}
var fail = function(err) {
console.log(err)
}
$bpm.todoList(success, fail)
# next
审核/驳回/指派,适用于userTask。
- 参数:
- {String} processInstanceId(流程实例ID)
- {String} auditorId(审核人ID)
- {Boolean} isApproved(是否通过)
- {String} approveAction()
- {List<>} taskIds(任务ID列表)
- {String} dataJsonStr(额外参数)
- {Function} success(成功回调)
- {Function} fail(失败回调)
- 用法: 完整版的调用ds方法。
$bpm.next({
processInstanceId: 'score_acc-1',
auditorId: 1,
isApproved: true,
approveAction: "1",
taskIds: [],
dataJsonStr: {}
}
success: (data) => {
console.log(data)
},
fail: (err) => {
console.log(err)
}
})
$print模块负责打印的调用,包括local(本地打印)和remote(远程打印)
# local
该方法用于调用本地打印机打印 首先您需要在打印开发页面创建打印模版,绑定数据方案、纸张、打印机等参数。 调用打印时需要模版内容,数据方案为模版提供数据,设定纸张和打印机。 由于模版和数据方案已经绑定,在调用$print.local()时您只需要指定模版和获取数据所需的参数
- 参数:
- {String} templateNo(模版编号)
- {Object} params(数据方案参数)
- {String?} printer(打印机)
- 用法:
var templateNo = 'PT_ZEUS_ISH'
var params = {
bill_no: 'ISH00001'
}
var printer = 'LENOVO'
//如果模版内配置了打印机可以使用模版默认的打印机 不传printer参数
$print.local(templateNo, params)
//如果需要制定打印机可以传printer参数,一个字符串,当前电脑连接的打印机名称
$print.local(templateNo, params, printer)
# remote
待实现...
# $file
$file模块负责文件相关操作,包括页面选取文件、上传文件、下载文件
# select
选取文件,调用该方法
# upload
参数:
{Object} requestOption
- {String} serviceName
- {Object} data
- {Function} success
- {Function} fail
- {String} method
- {String} baseUrl
用法: 上传文件方法
$http.upload({
// 上传服务路径 必传
serviceName: '/Invoke/upload',
// url传参 后台通过queryString获取 非必传
params: {},
// body传参 后台通过body获取 非必传
data: {},
// 请求成功后执行的回调函数
success: (data) => {
console.log(data)
},
// 请求失败后执行的回调函数
fail: (err) => {
console.log(err)
},
method: 'post',
// 服务根路径 默认/zuul 非必传
baseUrl: '/zuul'
})
# download
参数:
{Object} requestOption
- {String} serviceName
- {String} fileName
- {String} fileType
- {Object} data
- {Function} success
- {Function} fail
- {String} method
- {String} baseUrl
用法: 通过文件流的方式下载文件的方法,
$http.download({
// 上传服务路径 必传
serviceName: '/Invoke/download',
// 下载的文件命名
fileName: '文件名称',
// 文件格式 默认excel
fileType: 'application/vnd.ms-excel',
// url传参 后台通过queryString获取 非必传
params: {},
// body传参 后台通过body获取 非必传
data: {},
// 请求成功后执行的回调函数
success: (data) => {
console.log(data)
},
// 请求失败后执行的回调函数
fail: (err) => {
console.log(err)
},
method: 'post',
// 服务根路径 默认/zuul 非必传
baseUrl: '/zuul'
})
# $utils
$utils模块主要提供一些工具函数
# formatDate
参数:
{String} format
{Date | DateString | Time} format
用法: 日期格式格式化
日期格式规则:
格式 | 含义 | 备注 | 举例 |
---|---|---|---|
yyyy | 年 | 2017 | |
M | 月 | 不补0 | 1 |
MM | 月 | 01 | |
W | 周 | 不补0 | 1 |
WW | 周 | 01 | |
d | 日 | 不补0 | 1 |
dd | 日 | 01 | |
H | 时 | 24小时制 | 01 |
HH | 时 | 24小时制 | 01 |
h | 时 | 12小时制 | 01 |
hh | 时 | 12小时制 | 01 |
m | 分 | 01 | |
mm | 分 | 01 | |
s | 秒 | 01 | |
ss | 秒 | 01 | |
A | AM/PM | 上午/下午 | 01 |
a | am/pm | 上午/下午 | 01 |
var date = new Date()
$utils.formatDate('yyyy-MM-dd hh:mm:ss', date)
// 结果:2021-07-20 11:51:10
# clone
- 参数:
- {Any} arg
- 用法:浅拷贝
var a = {x: 1, y: 1}
$utils.clone(a)
// 结果: {x: 1, y: 1}
# deepClone
- 参数:
- {Any} arg
- 用法:深拷贝
var a = [{x: 1, y: 1}, {x: 2, y: 2}]
$utils.clone(a)
// 结果:[{x: 1, y: 1}, {x: 2, y: 2}]
# pick
- 参数:
- {Object} obj
- {Array} keys
- 用法:提取属性
var a = {x: 1, y: 2, z: 3}
$utils.pick(a, ['x', 'z'])
// 结果:{x: 1, z: 3}
# unpick
- 参数:
- {Object} obj
- {Array} keys
- 用法:反向提取属性
var a = {x: 1, y: 2, z: 3}
$utils.unpick(a, ['x', 'z'])
// 结果:{y: 2}
# find
- 参数:
- {Object} collection
- {Array} filterObj
- 用法:根据某个属性值从集合中查找对应的集合项
var a = [{x: 1, y:2}, {x:2, y: 3}]
$utils.find(a, {x: 1})
// 结果:{x: 1, y:2}
# findIndex
- 参数:
- {Object} collection
- {Array} filterObj
- 用法:根据某个属性值从集合中查找对应的集合项的索引
var a = [{x: 1, y:2}, {x:2, y: 3}]
$utils.findIndex(a, {x: 1})
// 结果:0
# listToTree
- 参数:
- {Array} array
- {String} key = 'id'
- {String} parentKey = 'parentId'
- 用法:将具有层级关联的数组处理成树形结构数据。
var a = [
{x: 1, y:2, id: 1, parentId: 0},
{x:2, y: 3, id: 2, parentId: 1}
]
$utils.listToTree(a)
// 结果: [
// {
// x: 1,
// y:2,
// id: 1,
// parentId: 0,
// children: [
// {
// x:2,
// y: 3,
// id: 2,
// parentId: 1
// }
// ]
// }
// ]
# merge
- 参数:
- {Object} obj1
- {Object} obj2
- 用法:合并两个对象,得到一个新的对象
var a = {x: 1, y: 1}
var b = {x: 2, z: 3}
$utils.merge(a, b)
// 结果:{x: 2, y: 1, z: 3}
# $common
# jump
参数:
- {Object} {path:'所属中心code/页面code'}
- {Object} 需要传入的参数
用法:用于页面跳转,将A页面数据带入B页面。
$common.jump({ path: 'CMP/cmp_recycle' }, { name: 'zs', id: '1' })
# getParentParmas
参数:
用法:获取跳转页面传入的参数。
$common.getParentParmas() // 结果:{ name: 'zs', id: '1' }
# confirm
参数:
- {String} 提示(左上角标题)
- {String} 内容(需要提示的文本内容)
- {String} 确定(放置在右边的确定按钮,不传默认显示确定)
- {String} 取消(放置在右边的取消按钮,不传默认显示取消)
用法:确认弹窗,用户选择确认执行某操作,用户选择取消进行另一种操作,一般用于流程控制。
$common.confirm("提示", "内容",'确定按钮','取消按钮').then(() => { // confirm action }).catch(err => { // cancle action })
# uuid
- 参数:
- 用法:获取一个32位uuid(不带'-')用于数据库主键
var uuid = $common.uuid()
// 结果:000003d6a642468a819de57b884fbc01
# getSeqNo
- 参数:
- {String} seqName
- 用法:传入一个seqName, 返回一个seqNo
var seqNo = $common.getSeqNo('SEQ_ENTRY_NO')
// 结果:IE00051
# mnemonic
- 参数:
- {String} name
- 用法:传入一个字符串(字母/数字/汉字), 返回一个英文首字母缩写作为助记码
var mnemonicCode = $common.mnemonic('九州云智')
// 结果:JZYZ
# customExport
- 参数:
- {Data} 当前需要导出的数据,数组类型
- {Faield} 当前导出数据对应的字段,对象类型,键为导出的字段field,值为导出表格数据的对应表头label
- {Options} 导出的文件名称,对象类型 (选填)
- 用法:通过$common.customExport(data, field, options)触发自定义数据的导出功能
// let options = {customizeFielName: true, fileName: '自定义表格名称'} // 选填
let data = [{ name: 'zs', age: '22' }, { name: 'ls', age: '23' }]
let field = { name: '姓名', age: '年龄' }
$common.customExport(options, data, field)
结果:
姓名 | 年龄 |
---|---|
zs | 22 |
ls | 23 |
# add
- 参数:
- {String} date
- 用法:传入数字(以逗号来分割), 返回计算相加的数字
let data = $common.add(1, 0.2,0.03)
// 结果:1.23
# sub
- 参数:
- {String} date
- 用法:传入数字(以逗号来分割), 返回计算相减的数字
let data = $common.sub(1, 0.2,0.03)
// 结果:0.797
# mul
- 参数:
- {String} date
- 用法:传入数字(以逗号来分割), 返回计算相乘的数字
let data = $common.mul(1, 2, 3)
// 结果: 6
# div
- 参数:
- {String} date
- 用法:传入数字(以逗号来分割), 返回计算相除的数字,scale规定小数点后多少位。
// $common.div(num1,num2,scale)
let data = $common.div(2, 3, 3)
// 结果: 0.667
# rem
- 参数:
- {String} date
- 用法:传入数字(以逗号来分割), 返回计算相除的数字,取余数。
// $common.div(num1,num2)
let data = $common.rem(2, 5)
// 结果:2
# round
- 参数:
- {String} date
- 用法:传入数字, 返回计算四舍五入后的数字,向上取整,scale规定小数点后多少位。
// $common.round(num,scale)
let data = $common.round(2.5555, 3)
// 结果: 2.556
# down
- 参数:
- {String} date
- 用法:传入数字, 返回计算规定后取整的数字,向下取整,scale规定小数点后多少位。
// $common.down(num,scale)
let data = $common.down(2.5555, 2)
// 结果: 2.55
# setCache
- 参数:
- {Object} obj1
- 用法:设置缓存
var key = 'shycier:test:1'
var value={
name:'shycier'
}
$common.setCache(key,JSON.stringify(value))
# getCache
- 参数:
- {Object} obj1
- 用法:设置缓存并设置过期时间
var ttl = 60
$common.setCache(key,JSON.stringify(value),ttl)
var cache = $common.getCache(key)
console.log(cache)
// 结果: shycier
# send
- 参数:
- {Object} obj1
- 用法:设置缓存并设置过期时间
var routingKey = 'top-test'
var message = {
name:'shycier'
}
$common.send(routingKey,message)
return cache
// 结果:
服务开发 →