yiyun-components
v2.0.30
Published
## 基于库体积的考虑，请自行引入公共css文件（如项目中已有elementui的css文件可忽略） ```html <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"> ``` 或者使用本项目提供的css，路径为`cdn路径/yiyun-components/theme/index.css`
Downloads
177
Readme
公共选择组件的接口
基于库体积的考虑，请自行引入公共css文件（如项目中已有elementui的css文件可忽略）
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">或者使用本项目提供的css，路径为cdn路径/yiyun-components/theme/index.css
通过script方式引入（使用lib文件夹下的browser.js）
<script src="yiyun-components/lib/browser.js"></script>
// 全局变量为yiyunnpm安装
npm install yiyun-components
在项目中引入
// 全部引入
import yiyun from 'yiyun-components'
// 按需引入
import 组件名 from 'yiyun-components/lib/组件名'使用
选择设备：yiyun.selectEquipment()
单选：
var data = await yiyun.selectEquipment(true,'你的token',[不可选id列表],[已选择id列表])
....
或者：
yiyun.selectEquipment(true,'你的token',[不可选id列表],[已选择id列表]).then((data){
.....
})
data: {
id: '', // 设备id
code: '', // 设备标识
name: '', // 设备名称
modelId: '' // 设备型号id
modelName: '' // 设备型号名称
status: 0 // 设备状态：0.停用 1.启用
}
多选：
var data = await yiyun.selectEquipment(false,'你的token',[不可选id列表],[已选择id列表])
....
或者：
yiyun.selectEquipment(false,'你的token',[不可选id列表],[已选择id列表]).then((data){
.....
})
data: [{
id: '', // 设备id
code: '', // 设备标识
name: '', // 设备名称
modelId: '' // 设备型号id
modelName: '' // 设备型号名称
status: 0 // 设备状态：0.停用 1.启用
},{
id: '',
...
},...]接口参数
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | isOnly| bool |true表示单选，false表示多选（必传） | | | Authorization| string | token字符串（必传） | | | disable| array |禁用设备的id列表（可选） | | | selected| array |已选设备的id列表（可选） | |
返回结果
多选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Array[Object] |选择的设备对象数组 |
单选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Object |设备对象 |
设备对象的内容
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | id| String |设备id | | | code| String |设备标识 | | | name| String |设备名称 | | | modelId| String |设备型号id | | | modelName| String |设备型号名 | | | status| int |设备状态：0.停用 1.启用 | |
调用地图： yiyun.initMap()
var yiyunMap
try {
var res = await yiyun.initMap({
id: '4YcVwbubaA3', //地图的id
container: document.getElementById('map-container'), // 用于加载地图的dom节点
Authorization: '', // 平台token
onload: function (map) { // 地图加载的回调，返回YiyunMap实例
yiyunMap = map
}
beforeDraw: (cover) => {
if (cover.type === 'area') {
cover.setConfig({
strokeColor: '#000C25',
strokeWeight: 3,
fillColor: '#000C25',
fillOpacity: 0.3
})
} else if (cover.type === 'line') {
cover.setConfig({
strokeColor: '#000C25',
strokeWeight: 6,
strokeOpacity: 1,
showDir: true
})
} else if (cover.type === 'label') {
cover.setConfig({
fontSize: 14,
fontColor: '#000C25',
content: '标签内容',
fontAngle: 30
})
} else if (cover.type === 'icon') {
cover.setConfig({
icon: 'https://aaa.bbb.ccc/ddd.png'
})
} else if (cover.type === 'comp') {
cover.setConfig({
icon: 'https://aaa.bbb.ccc/ddd.png'
})
}
},
})
} catch (e) {
}
let line
yiyunMap.updateCover(
yiyunMap.covers.areas[0],
{
strokeColor: '#000C25',
strokeWeight: 3,
fillColor: '#000C25',
fillOpacity: 0.3
}
)
line = yiyunMap.drawPolyline({
path: [[121.622797,29.866232],[121.612501,29.883464],[121.653685,29.876544]],
strokeColor: '#3389FF',
strokeWeight: 6,
strokeOpacity: 1,
showDir: true
})
yiyunMap.clearMapItem(line)接口参数
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | id| String |地图的ID | 必填 | | container| dom |用于加载地图的dom节点 | 必填 | | Authorization| string |平台token | 必填 | | center| Array |地图中心点 | 选填 例：[lng,lat],默认为地图实例所设置的中心点 | | zoom| int |地图的缩放等级 | 选填 地图定点类型的缩放范围3-20，默认14；本地上传的图片类型的地图缩放范围为10-20 默认15 | | useOldSdk| bool |是否使用旧版高德地图Sdk | 选填 | | onload((map) => {})| func |地图加载后回调函数，返回YiyunMap实例 | 选填 | | beforeDraw((cover) => {})| function |覆盖物绘制前的回调，返回的cover为覆盖物对象 | 选填 可以在回调用中调用cover.setConfig(config)在覆盖物渲染之前修改渲染样式 | | afterDraw((cover) => {})| function |覆盖物绘制后的回调，返回的cover为覆盖物对象 | 选填 |
异常说明
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | code| String | 异常状态码 1001：dom节点不存在 1002：参数错误 1003：未找到对应的地图实例 1004：获取地图实例失败 | | msg| String |异常说明 |
YiyunMap实例说明
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | id| String |地图的ID | | | name| String |地图的名称 | | | covers| Object |地图覆盖物 | 查看说明 | | moveTo(obj)| function |移动地图中心点 | 接收cover，或者经纬度数组[lng,lat] | | zoomTo(int)| function |修改地图的zoom | 地图定点类型的缩放范围3-20，默认14；本地上传的图片类型的地图缩放范围为10-20 默认15 | | setTheme(string)| function |设置地图的风格 | 'normal'（标准）、'macaron'（马卡龙）、'graffiti'(涂鸦)、'whitesmoke'(远山黛)、'fresh'(草色青)、'darkblue'(极夜蓝)、'wine'(酱籽)、'dart'(幻影黑) | | updateCover(cover,config)| function |更新覆盖物在地图上的显示样式 | 接收cover以及覆盖物的渲染配置config | | drawPolyline(lineOption)| function |绘制路径,返回高德地图覆盖物实例 | lineOption说明：{path,strokeColor,strokeWeight,strokeOpacity,showDir} path: 经纬度点集合（[[lng,lat],[lng,lat],……]）其他查看覆盖物的渲染配置 | | clearMapItem(_mapItem)| function | 移除地图上的覆盖物 | 接收高德地图覆盖物实例（通过drawPolyline返回获取或者各类cover中的_mapItem） | | interact(obj)| function |覆盖物交互 | 接收cover | | getCenter()| function | 获取地图当前的中心点 | 返回{lng,lat} | | getZoom(digits)| function |获取地图当前的缩放等级 | digits (Number) zoom级别的小数位精度 默认为2 | | showCover(cover)| function | 显示某一覆盖物 | 接收cover | | hideCover(cover)| function |隐藏某一覆盖物 | 接收cover |
covers对象的说明
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | areas| Array | 区块覆盖物的数组 类型说明 | | | lines| Array |路径覆盖物的数组 类型说明 | | | points| Array |标记覆盖物的数组 类型说明 | | | labels| Array |标签覆盖物的数组 类型说明 | | | components| Array |组件覆盖物的数组 类型说明 | |
各类型cover的说明:
area:
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | id| String | 区块id | | fillColor| String |当前区块的颜色,使用16进制颜色代码赋值 | | name| String |区块名字 | | obj| Object |绑定的对象实例 查看说明 | | points| Object |区块的类型以及位置信息说明 | | type| String | cover的类型，值为"area"。该字段只在beforeDraw返回的cover对象中赋值 | | setConfig(config)| function | 设置覆盖物的渲染配置。该方法只在beforeDraw返回的cover对象中赋值。查看config配置参数| | _mapItem| AMap.Overlay | 高德地图覆盖物实例,该字段在afterDraw之后赋值 |
line:
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | id| String | 区块id | | fillColor| String |当前路径的颜色,使用16进制颜色代码赋值 | | name| String |路径名字 | | obj| Object |绑定的对象实例 查看说明 | | points| Object |路径位置信息说明 | | type| String | cover的类型，值为"line"。该字段只在beforeDraw返回的cover对象中赋值 | | setConfig(config)| function | 设置覆盖物的渲染配置。该方法只在beforeDraw返回的cover对象中赋值。查看config配置参数| | _mapItem| Overlay.Polyline | 高德地图覆盖物实例,该字段在afterDraw之后赋值 |
point:
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | id| String | 图标 | | icon| String | 图标的url | | name| String |图标名字 | | obj| Object |绑定的对象实例 查看说明 | | points| Object |图标的位置信息 | | type| String | cover的类型，值为"point"。该字段只在beforeDraw返回的cover对象中赋值 | | setConfig(config)| function | 设置覆盖物的渲染配置。该方法只在beforeDraw返回的cover对象中赋值。查看config配置参数| | _mapItem| AMap.Marker | 高德地图覆盖物实例,该字段在afterDraw之后赋值 |
label:
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | id| String | 标签id | | content| String |标签内容 | | fontColor| String |当前区块的颜色,使用16进制颜色代码赋值 | | fontSize| int | 字号 | | fontAngle| String | 标签旋转角度 | | points| Object |标签位置信息说明 | | type| String | cover的类型，值为"label"。该字段只在beforeDraw返回的cover对象中赋值 | | setConfig(config)| function | 设置覆盖物的渲染配置。该方法只在beforeDraw返回的cover对象中赋值。查看config配置参数| | _mapItem| AMap.Marker | 高德地图覆盖物实例,该字段在afterDraw之后赋值 |
component:
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | id| String | 组件id | | name| String |组件名字 | | points| Object |组件位置信息说明 | | comp| Object |组件的实例的详情 查看说明 | | type| String | cover的类型，值为"comp"。该字段只在beforeDraw返回的cover对象中赋值 | | setConfig(config)| function | 设置覆盖物的渲染配置。该方法只在beforeDraw返回的cover对象中赋值。查看config配置参数| | _mapItem| AMap.Marker | 高德地图覆盖物实例,该字段在afterDraw之后赋值 |
覆盖物的渲染配置（Config）的说明
| 参数名 | 参数类型 | 说明 | 其他 | | -------- | -------- | -------- | -------- | | strokeColor| String | 线条颜色,使用16进制颜色代码赋值 | 适用于area、line | | strokeWeight| int | 线条宽度 | 适用于area、line | | strokeOpacity| int | 线条透明度 | 适用于line | | fillColor| string |区块填充色 | 适用于area| | fillOpacity| int |区块填充色透明度 | 适用于area | | showDir| bool | 是否显示路径的白色箭头 | 适用于line | | fontSize| int | label的字体大小 | 适用于label | | fontColor| string | label的字体颜色,使用16进制颜色代码赋值 | 适用于label | | fontAngle| int | label的角度 | 适用于label | | content| string | label的内容 | 适用于label | | icon| string | 图标的地址或者base64 | 适用于point、comp |
绑定的对象实例(obj)的说明
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | objId| String | 对象id | | objAppId| String | 实例相关的app的id | | objAppName| String |实例相关的app的name | | objError| int | 对象的错误码 | | objExampleId| String |实例id | | objExampleName| String |实例名字 |
组件实例(comp)的说明
| 参数名 | 参数类型 | 说明 | | -------- | -------- | -------- | | compAppId| String | 组件相关的app的id | | compAppName| String |组件相关的app的name | | compError| int | 组件的错误码 | | compIcon| String |组件的图标地址 | | compId| String |组件Id | | objId| String | 对象id | | objAppId| String | 实例相关的app的id | | objAppName| String |实例相关的app的name | | objError| int | 对象的错误码 | | objExampleId| String |实例id | | objExampleName| String |实例名字 |
工厂模型公共选择： yiyun.nodeSelect()
树结构调用方式：
try {
let res = await yiyun.nodeSelect(
{
nodeId: "指定节点id",
Authorization: "token",
isOnly: false,
selectedNode: ["选中节点id", ...]
}
)
} catch (err) {
// 取消
}
....
或者：
yiyun.nodeSelect({
nodeId: "指定节点id",
Authorization: "token",
isOnly: false,
selectedNode: ["选中节点id", ...]
}).then((res) => {
// 确定
}).catch((err) => {
// 取消
})
列表结构调用方式：
try {
let res = await yiyun.nodeSelect(
{
type: "对应层级"
nodeId: "指定节点id",
Authorization: "token",
isOnly: false,
selectedNode: ["选中节点id", ...]
}
)
} catch (err) {
// 取消
}
....
或者：
yiyun.nodeSelect({
type: "对应层级"
nodeId: "指定节点id",
Authorization: "token",
isOnly: false,
selectedNode: ["选中节点id", ...]
}).then((res) => {
// 确定
}).catch((err) => {
// 取消
})
单选 res {}
多选 res [{},...]
{
id: '节点id',
name: '节点名称',
level: '节点等级',
pid: '父节点id',
isError: '节点数据是否无效',
createTime: '创建时间',
children: '子节点集合'
}接口参数
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | type| number | 可选，不传表示树结构，列表结构分别传：2（站点）、3（区域）、4（工作中心）、5（工作单元）| | | nodeId| String | 可选，指定节点id，默认为空 | | | Authorization| string | 必传，token | | | isOnly| bool | 可选，true单选，false多选，默认为false | | | selectedNode| array | 可选，需要选中节点的id数组 | | | level| number | 树结构时，传某个级别，返回小于等于该级别的数据 | |
返回结果
多选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Array[Object] |选择的节点对象数组 |
单选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Object |节点对象 |
组织架构公共选择： yiyun.organizationSelect()
组织架构单选：
yiyun.organizationSelect(
{
isOnly: true,
mode: '选择模式', // 包括人、岗位、部门
needMember: true,
isActiveMember: false,
needPost: true,
orgId: '',
authorization: '你的token',
disabled: ["禁用id",...],
selected: { id: "已选id", name: "已选名称" },
close: function () {
},
confirm: function (data) {
}
}
)
....
组织架构多选：
yiyun.organizationSelect(
{
isOnly: false,
mode: '选择模式', // 包括人、岗位、部门、人_岗位、人_部门
needMember: true,
isActiveMember: false,
needPost: true,
orgId: '',
authorization: '你的token',
disabled: ["禁用id",...],
selected: [{ id: "已选id", name: "已选名称" },...],
close: function () {
},
confirm: function (data) {
}
}
)
....
组织架构部门对应成员多选：
yiyun.organizationSelect({
isOnly: false,
mode: 'member',
orgId: '',
authorization: '你的token',
disabled: ["禁用id",...],
selected: [{ id: "已选id", name: "已选名称" },...],
deptId: '部门id', // 必须传对应部门id
state: 1,
close: function () {
},
confirm: function (data) {
}
})
....
组织架构部门对应成员单选：
yiyun.organizationSelect({
isOnly: true,
mode: 'member',
orgId: '',
authorization: '你的token',
disabled: ["禁用id",...],
selected: { id: "已选id", name: "已选名称" },
deptId: '部门id', // 必须传对应部门id
state: 1,
close: function () {
},
confirm: function (data) {
}
})
单选 res {}
多选 res [{},...]
人 {
id: '成员Id',
name: '成员名称',
headPortrait: '头像',
userId: '用户Id'
}
岗位 {
id: '岗位Id'
name: '岗位名称',
level: '岗位层级',
}
部门 {
id: '部门Id',
name: '部门名称',
code: '部门码',
parentId: '父部门Id',
}接口参数
| 参数名 | 参数类型 | 说明 | 其他| | -------- | -------- | -------- | -------- | | isOnly| bool | 可选，true表示单选，false表示多选，默认为多选| | | mode| string | 必传，包括人（member）、岗位（position）、部门（dept）、人-岗位（member_position）、人-部门(member&dept)~~（member_dept 不再维护）~~5种模式 | | | Authorization| string | 必传，token | | | orgId| string | 可选，需要查询的组织Id,空表示查询当前用户的企业，默认为空 | | | needMember| bool | 不传部门id时为必传，部门下是否需要带成员 | | | isActiveMember| bool | 不传部门id时为必传，是否只显示已经激活的成员 | | | needMember| bool | 不传部门id时为必传，部门下是否需要带岗位 | | | disabled| array | 可选，默认为空数组，数组中每一项为禁用id，当选择模式为'member&dept'时，传入{members:[{...}],depts:[{...}]},数组中对象内容为{ id: "禁用的id", name: "禁用的名称" } | | | selected| array或object | 可选，单选默认为{}，多选默认为[]，单选和多选的每一项格式为{ id: "已选id", name: "已选名称" } ，当选择模式为'member&dept'时，传入{members:[{...}],depts:[{...}]},数组中对象内容保持不变 | | | deptId| string | 选择部门对应的成员时传入 | | | state| int | 需要选部门下的成员时,-2.全部（默认） -1.已离职 0.未入职 1.在职 | | | maxValue| number | 需要选部门下的成员时,最多可选人数，不传表示全部 | | | message| string | 超过maxValue时，提示的字符串，不传提示默认 | | | appId| string | 应用授权权限模式时，必需传对应应用id | | | groupId| string | 传对应应用id时，必须传应用下的某个组id | | | close| func | 点取消按钮对应的回调 | | | confirm| func | 点确定按钮对应的回调，参数为选中的项 | |
返回结果
多选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Array[Object] |选择的节点对象数组 |
单选
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Object |节点对象 |
当选择模式为member&dept时
| 参数类型 | 说明 | 其他| | -------- | -------- | -------- | | Object |对象结构为{ members: [], depts: [] } |
组织架构Api接口：
let res = await yiyun.getOrganizationOfMember(
token, // token
orgId, // 需要查询的组织Id,空表示查询当前用户的企业
isActiveMember // 是否只显示已经激活的成员，true表示只显示已激活（已绑定），false表示显示全部
)
res = [
{
id: '部门id',
parentId: '父部门Id',
code: '部门码',
name: '部门名称',
createTime: '创建时间戳',
memberCount: '当前部门下的成员数量（包括下下级）',
type: '类型：member表示人，dept表示部门',
children: [...] // 包含子部门和部门下的人，以此类推
},
...
,
{
id: '成员Id',
name: '成员名称',
headPortrait: '头像',
userId: '用户Id',
type: '类型：member表示人，dept表示部门',
}
]
let res = await yiyun.getOrganizationOfPosition(
token, // token
orgId // 需要查询的组织Id,空表示查询当前用户的企业
)
res = [
{
id: '岗位Id',
name: '岗位名称',
level: '岗位层级',
createTime: '创建时间戳',
memberCount: '岗位上的人数',
depts: [ // 相关的岗位（根据成员的部门-岗位得到的）
{ id: '岗位Id', name: '岗位名称' },
...
]
},
...
]
let res = await yiyun.getOrganizationOfDept(
token, // token
orgId // 需要查询的组织Id,空表示查询当前用户的企业
)
res = [
{
id: '部门id',
parentId: '父部门Id',
code: '部门码',
name: '部门名称',
createTime: '创建时间戳',
memberCount: '当前部门下的成员数量（包括下下级）',
children: [...] // 包含子部门列表，子部门可能存在子部门，以此类推
},
...
]
let res = await yiyun.getOrganizationOfMemberPosition(
token, // token
orgId, // 需要查询的组织Id,空表示查询当前用户的企业
isActiveMember // 是否只显示已经激活的成员，true表示只显示已激活（已绑定），false表示显示全部
)
res = [
{
id: '部门id',
parentId: '父部门Id',
code: '部门码',
name: '部门名称',
createTime: '创建时间戳',
memberCount: '当前部门下的成员数量（包括下下级）',
type: 'dept',
children: [
...,
{
id: '岗位Id',
name: '岗位名称',
level: '岗位层级',
type: 'position'
}
...,
] // 包含子部门、部门下的人及部门下的岗位，以此类推
},
...
,
{
id: '成员Id',
name: '成员名称',
headPortrait: '头像',
userId: '用户Id',
type: 'member',
}
]
let res = await yiyun.getOrganizationOfMemberByDept(
token, // token
orgId, // 需要查询的组织Id,空表示查询当前用户的企业
deptId // 部门Id
)
res = [
{
id: '成员Id',
name: '成员名称',
headPortrait: '头像',
userId: '用户Id'
},
...
]审批流程设置组件 const { save } = yiyun.approvalFlowConfig(config)
1.10.0 新增
config插件调用参数
{
"authorization": 平台用户登入的Authorization
"appId": String appId,必填 应用id
"isAllowAll": Boolean 允许审批人员为全企业成员，false时，只有app权限人员出现在审批步骤中,默认false
"allowStepApvlType": Int32[] 允许的审批步骤中审批人类型 0 按人员 1按岗位 2 按部门岗位 8.直属上级 9.部门主管 10.连续多级主管,未设置默认[0,1,2,8,9,10]
"isAllowAddCC": Boolean 允许添加抄送人,默认false
"isAllowAddTransactor": Boolean 允许添加办理人,默认false
"isAllowSetIsAuto2": Boolean 是否允许设置自动跳过2（类型为1.按岗位、2.部门岗位 9.部门主管时：成员空自动跳过）,默认false,
"defaultIsAuto2": Boolean 自动跳过2的默认值,默认false,
"isAllowSetIsAuto3": Boolean 是否允许设置自动跳过3，审批人与发起人为同一人时的处理（类型 9.部门主管 10.连续多级部门主管）,默认false,
"defaultIsAuto3": Boolean 自动跳过3的默认值,默认false,
"isAllowSetMemberSignType": Boolean 是否允许设置会签、或签（类型0.按人员,1按岗位, 2 按部门岗位, 4.发起人自选, 5.审批人自选, 9.部门主管, 10.连续多级部门主管）,默认false,
"defaultMemberSignType": Int32 设置会签、或签的默认值 0.或签 1.会签,默认0,
"flowId":String 流程id（有值时，表示修改）,
"containerId": String 组件容器id,
"onSuccess": Function, 成功时回调, (flowId) => {}
}返回值
{
save: (beforeSave:Function,可选,方法参数为步骤列表,返回false或Promise.reject()可阻止保存) => {},保存流程，成功则调用配置中的onSuccess
}
插件内部逻辑与审批一样，根据插件调用参数显示/隐藏部分设置功能和设置默认值