clunt
/
RuoYi-Cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

部门->机构 update by 程志远

This commit is contained in:
shadowunderthefoot 2022-10-25 11:20:32 +08:00
parent 93b3bc595d
commit 72c89c716d
234 changed files with 2096 additions and 25664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ruoyi-ui/src/api/demo/demo.js
View File

@ -1,54 +0,0 @@
import request from '@/utils/request'
// 查询测试单表列表
export function listDemo(query) {
return request({
url: '/demo/demo/list',
method: 'get',
params: query
})
}
// 自定义分页接口
export function pageDemo(query) {
return request({
url: '/demo/demo/page',
method: 'get',
params: query
})
}
// 查询测试单表详细
export function getDemo(id) {
return request({
url: '/demo/demo/' + id,
method: 'get'
})
}
// 新增测试单表
export function addDemo(data) {
return request({
url: '/demo/demo',
method: 'post',
data: data
})
}
// 修改测试单表
export function updateDemo(data) {
return request({
url: '/demo/demo',
method: 'put',
data: data
})
}
// 删除测试单表
export function delDemo(id) {
return request({
url: '/demo/demo/' + id,
method: 'delete'
})
}

44
ruoyi-ui/src/api/demo/leave.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询请假业务列表
export function listLeave(query) {
return request({
url: '/demo/leave/list',
method: 'get',
params: query
})
}
// 查询请假业务详细
export function getLeave(id) {
return request({
url: '/demo/leave/' + id,
method: 'get'
})
}
// 新增请假业务
export function addLeave(data) {
return request({
url: '/demo/leave',
method: 'post',
data: data
})
}
// 修改请假业务
export function updateLeave(data) {
return request({
url: '/demo/leave',
method: 'put',
data: data
})
}
// 删除请假业务
export function delLeave(id) {
return request({
url: '/demo/leave/' + id,
method: 'delete'
})
}

44
ruoyi-ui/src/api/demo/tree.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询测试树表列表
export function listTree(query) {
return request({
url: '/demo/tree/list',
method: 'get',
params: query
})
}
// 查询测试树表详细
export function getTree(id) {
return request({
url: '/demo/tree/' + id,
method: 'get'
})
}
// 新增测试树表
export function addTree(data) {
return request({
url: '/demo/tree',
method: 'post',
data: data
})
}
// 修改测试树表
export function updateTree(data) {
return request({
url: '/demo/tree',
method: 'put',
data: data
})
}
// 删除测试树表
export function delTree(id) {
return request({
url: '/demo/tree/' + id,
method: 'delete'
})
}

52
ruoyi-ui/src/api/system/dept.js
View File

@ -1,52 +0,0 @@
import request from '@/utils/request'
// 查询部门列表
export function listDept(query) {
return request({
url: '/system/dept/list',
method: 'get',
params: query
})
}
// 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId) {
return request({
url: '/system/dept/list/exclude/' + deptId,
method: 'get'
})
}
// 查询部门详细
export function getDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'get'
})
}
// 新增部门
export function addDept(data) {
return request({
url: '/system/dept',
method: 'post',
data: data
})
}
// 修改部门
export function updateDept(data) {
return request({
url: '/system/dept',
method: 'put',
data: data
})
}
// 删除部门
export function delDept(deptId) {
return request({
url: '/system/dept/' + deptId,
method: 'delete'
})
}

52
ruoyi-ui/src/api/system/org.js Normal file
View File

@ -0,0 +1,52 @@
import request from '@/utils/request'
// 查询机构列表
export function listSysOrg(query) {
return request({
url: '/system/org/list',
method: 'get',
params: query
})
}
// 查询机构列表（排除节点）
export function listSysOrgExcludeChild(orgId) {
return request({
url: '/system/org/list/exclude/' + orgId,
method: 'get'
})
}
// 查询机构详细
export function getSysOrg(orgId) {
return request({
url: '/system/org/' + orgId,
method: 'get'
})
}
// 新增机构
export function addSysOrg(data) {
return request({
url: '/system/org',
method: 'post',
data: data
})
}
// 修改机构
export function updateSysOrg(data) {
return request({
url: '/system/org',
method: 'put',
data: data
})
}
// 删除机构
export function delSysOrg(orgId) {
return request({
url: '/system/org/' + orgId,
method: 'delete'
})
}

238
ruoyi-ui/src/api/system/role.js
View File

@ -1,119 +1,119 @@
import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
method: 'get',
params: query
})
}
// 查询角色详细
export function getRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'get'
})
}
// 新增角色
export function addRole(data) {
return request({
url: '/system/role',
method: 'post',
data: data
})
}
// 修改角色
export function updateRole(data) {
return request({
url: '/system/role',
method: 'put',
data: data
})
}
// 角色数据权限
export function dataScope(data) {
return request({
url: '/system/role/dataScope',
method: 'put',
data: data
})
}
// 角色状态修改
export function changeRoleStatus(roleId, status) {
const data = {
roleId,
status
}
return request({
url: '/system/role/changeStatus',
method: 'put',
data: data
})
}
// 删除角色
export function delRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'delete'
})
}
// 查询角色已授权用户列表
export function allocatedUserList(query) {
return request({
url: '/system/role/authUser/allocatedList',
method: 'get',
params: query
})
}
// 查询角色未授权用户列表
export function unallocatedUserList(query) {
return request({
url: '/system/role/authUser/unallocatedList',
method: 'get',
params: query
})
}
// 取消用户授权角色
export function authUserCancel(data) {
return request({
url: '/system/role/authUser/cancel',
method: 'put',
data: data
})
}
// 批量取消用户授权角色
export function authUserCancelAll(data) {
return request({
url: '/system/role/authUser/cancelAll',
method: 'put',
params: data
})
}
// 授权用户选择
export function authUserSelectAll(data) {
return request({
url: '/system/role/authUser/selectAll',
method: 'put',
params: data
})
}
// 根据角色ID查询部门树结构
export function deptTreeSelect(roleId) {
return request({
url: '/system/role/deptTree/' + roleId,
method: 'get'
})
}
import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
return request({
url: '/system/role/list',
method: 'get',
params: query
})
}
// 查询角色详细
export function getRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'get'
})
}
// 新增角色
export function addRole(data) {
return request({
url: '/system/role',
method: 'post',
data: data
})
}
// 修改角色
export function updateRole(data) {
return request({
url: '/system/role',
method: 'put',
data: data
})
}
// 角色数据权限
export function dataScope(data) {
return request({
url: '/system/role/dataScope',
method: 'put',
data: data
})
}
// 角色状态修改
export function changeRoleStatus(roleId, status) {
const data = {
roleId,
status
}
return request({
url: '/system/role/changeStatus',
method: 'put',
data: data
})
}
// 删除角色
export function delRole(roleId) {
return request({
url: '/system/role/' + roleId,
method: 'delete'
})
}
// 查询角色已授权用户列表
export function allocatedUserList(query) {
return request({
url: '/system/role/authUser/allocatedList',
method: 'get',
params: query
})
}
// 查询角色未授权用户列表
export function unallocatedUserList(query) {
return request({
url: '/system/role/authUser/unallocatedList',
method: 'get',
params: query
})
}
// 取消用户授权角色
export function authUserCancel(data) {
return request({
url: '/system/role/authUser/cancel',
method: 'put',
data: data
})
}
// 批量取消用户授权角色
export function authUserCancelAll(data) {
return request({
url: '/system/role/authUser/cancelAll',
method: 'put',
params: data
})
}
// 授权用户选择
export function authUserSelectAll(data) {
return request({
url: '/system/role/authUser/selectAll',
method: 'put',
params: data
})
}
// 根据角色ID查询机构树结构
export function sysOrgTreeSelect(roleId) {
return request({
url: '/system/role/orgTree/' + roleId,
method: 'get'
})
}

6
ruoyi-ui/src/api/system/user.js
View File

@ -126,10 +126,10 @@ export function updateAuthRole(data) {
})
}
// 查询部门下拉树结构
export function deptTreeSelect() {
// 查询机构下拉树结构
export function sysOrgTreeSelect() {
return request({
url: '/system/user/deptTree',
url: '/system/user/orgTree',
method: 'get'
})
}

31
ruoyi-ui/src/api/workflow/actNodeAssginee.js
View File

@ -1,31 +0,0 @@
import request from "@/utils/request";
export function add(data) {
return request({
url: '/workflow/actNodeAssignee',
method: 'post',
data: data
})
}
export function del(id) {
return request({
url: '/workflow/actNodeAssignee/'+id,
method: 'delete'
})
}
export function getInfoSetting(processDefinitionId,nodeId) {
return request({
url: `/workflow/actNodeAssignee/${processDefinitionId}/${nodeId}`,
method: 'get'
})
}
export function copy(processDefinitionId,key) {
return request({
url: `/workflow/actNodeAssignee/copy/${processDefinitionId}/${key}`,
method: 'post'
})
}

44
ruoyi-ui/src/api/workflow/businessForm.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询业务表单列表
export function listBusinessForm(query) {
return request({
url: '/workflow/businessForm/list',
method: 'get',
params: query
})
}
// 查询业务表单详细
export function getBusinessForm(id) {
return request({
url: '/workflow/businessForm/' + id,
method: 'get'
})
}
// 新增业务表单
export function addBusinessForm(data) {
return request({
url: '/workflow/businessForm',
method: 'post',
data: data
})
}
// 修改业务表单
export function updateBusinessForm(data) {
return request({
url: '/workflow/businessForm',
method: 'put',
data: data
})
}
// 删除业务表单
export function delBusinessForm(id) {
return request({
url: '/workflow/businessForm/' + id,
method: 'delete'
})
}

44
ruoyi-ui/src/api/workflow/businessRule.js
View File

@ -1,44 +0,0 @@
import request from '@/utils/request'
// 查询业务规则列表
export function listBusinessRule(query) {
return request({
url: '/workflow/businessRule/list',
method: 'get',
params: query
})
}
// 查询业务规则详细
export function getBusinessRule(id) {
return request({
url: '/workflow/businessRule/' + id,
method: 'get'
})
}
// 新增业务规则
export function addbusinessRule(data) {
return request({
url: '/workflow/businessRule',
method: 'post',
data: data
})
}
// 修改业务规则
export function updateBusinessRule(data) {
return request({
url: '/workflow/businessRule',
method: 'put',
data: data
})
}
// 删除业务规则
export function delBusinessRule(id) {
return request({
url: '/workflow/businessRule/' + id,
method: 'delete'
})
}

90
ruoyi-ui/src/api/workflow/definition.js
View File

@ -1,90 +0,0 @@
import request from "@/utils/request";
/**
* 分页查询
* @param {条件} query
* @returns
*/
export function list(query) {
return request({
url: '/workflow/definition/list',
method: 'get',
params: query
})
}
/**
* 分页查询
* @param {条件} query
* @returns
*/
export function hisList(query) {
return request({
url: '/workflow/definition/hisList',
method: 'get',
params: query
})
}
/**
*
* @param {参数} data
* @returns
*/
export function updateProcDefState(data) {
return request({
url: '/workflow/definition/updateProcDefState',
method: 'put',
data: data
})
}
/**
* 按流程部署id删除
* @param {流程部署id} deploymentId
* @returns
*/
export function del(deploymentId,definitionId) {
return request({
url: `/workflow/definition/${deploymentId}/${definitionId}`,
method: 'delete'
})
}
/**
* 通过zip或xml部署流程定义
* @returns
*/
export function deployProcessFile(data) {
return request({
url: '/workflow/definition/deployByFile',
method: 'post',
data: data
})
}
/**
*
* @param {流程定义设置} definitionId
* @returns
*/
export function setting(definitionId) {
return request({
url: '/workflow/definition/setting/'+definitionId,
method: 'get'
})
}
/**
*
* @param {查看xml} definitionId
* @returns
*/
export function getXml(definitionId) {
return request({
url: '/workflow/definition/getXml/'+definitionId,
method: 'get'
})
}

62
ruoyi-ui/src/api/workflow/dynamicForm.js
View File

@ -1,62 +0,0 @@
import request from '@/utils/request'
// 查询流程单列表
export function listDynamicForm(query) {
return request({
url: '/workflow/dynamicForm/list',
method: 'get',
params: query
})
}
// 查询启用流程单列表
export function listDynamicFormEnable(query) {
return request({
url: '/workflow/dynamicForm/enableList',
method: 'get',
params: query
})
}
// 查询流程单详细
export function getDynamicForm(id) {
return request({
url: '/workflow/dynamicForm/' + id,
method: 'get'
})
}
// 新增流程单
export function addDynamicForm(data) {
return request({
url: '/workflow/dynamicForm',
method: 'post',
data: data
})
}
// 修改流程单
export function updateDynamicForm(data) {
return request({
url: '/workflow/dynamicForm',
method: 'put',
data: data
})
}
// 修改流程单
export function editForm(data) {
return request({
url: '/workflow/dynamicForm/editForm',
method: 'put',
data: data
})
}
// 删除流程单
export function delDynamicForm(id) {
return request({
url: '/workflow/dynamicForm/' + id,
method: 'delete'
})
}

68
ruoyi-ui/src/api/workflow/message.js
View File

@ -1,68 +0,0 @@
import request from '@/utils/request'
// 查询消息通知列表
export function listMessage(query) {
return request({
url: '/workflow/message/list',
method: 'get',
params: query
})
}
// 获取个人站内信
export function listWaitingMessage() {
return request({
url: '/workflow/message/waitingMessage',
method: 'get'
})
}
// 查询消息通知详细
export function getMessage(id) {
return request({
url: '/workflow/message/' + id,
method: 'get'
})
}
// 新增消息通知
export function addMessage(data) {
return request({
url: '/workflow/message',
method: 'post',
data: data
})
}
// 修改消息通知
export function updateMessage(data) {
return request({
url: '/workflow/message',
method: 'put',
data: data
})
}
// 删除消息通知
export function delMessage(id) {
return request({
url: '/workflow/message/' + id,
method: 'delete'
})
}
// 阅读消息
export function readMessage(id) {
return request({
url: '/workflow/message/readMessage/' + id,
method: 'get'
})
}
// 批量阅读消息
export function batchReadMessage(id) {
return request({
url: '/workflow/message/batchReadMessage',
method: 'get'
})
}

110
ruoyi-ui/src/api/workflow/model.js
View File

@ -1,110 +0,0 @@
import request from "@/utils/request";
/**
* 分页查询
* @param {条件} query
* @returns
*/
export function list(query) {
return request({
url: '/workflow/model/list',
method: 'get',
params: query
})
}
/**
* 新增模型定义
* @param {传输的数据}} data
* @returns
*/
export function add(data) {
return request({
url: '/workflow/model',
method: 'post',
data: data
})
}
/**
* 按id删除模型
* @param {模型id} id
* @returns
*/
export function del(id) {
return request({
url: '/workflow/model/' + id,
method: 'delete'
})
}
/**
* 流程部署
* @param {模型id} id
* @returns
*/
export function deploy(id) {
return request({
url: '/workflow/model/deploy/' + id,
method: 'post'
})
}
/**
* 将流程定义转换为模型
* @param {流程定义id} processDefinitionId
* @returns
*/
export function convertToModel(processDefinitionId) {
return request({
url: '/workflow/model/convertToModel/' + processDefinitionId,
method: 'put'
})
}
/**
* 查询模型xml
* @param {模型id} modelId
* @returns
*/
export function getEditorXml(modelId) {
return request({
url: `workflow/model/getInfo/${modelId}/xml`,
method: 'get'
})
}
/**
* 保存模型
* @param {参数} data
* @returns
*/
export function saveModelXml(data) {
return request({
url: `workflow/model`,
method: 'put',
data: data
})
}
export function getModelInfo(modelId) {
return request({
url: `model/${modelId}/json`,
method: 'get'
})
}
export function newModel(data) {
return request({
url: `model/newModel`,
method: 'post',
data: data
})
}
export function editModelInfo(modelId,data) {
return request({
url: `/model/${modelId}/save`,
method: 'put',
data: data
})
}

60
ruoyi-ui/src/api/workflow/processDefSetting.js
View File

@ -1,60 +0,0 @@
import request from '@/utils/request'
// 查询流程定义与单配置列表
export function listProcessDefSetting(query) {
return request({
url: '/workflow/processDefSetting/list',
method: 'get',
params: query
})
}
// 查询流程定义与单配置详细
export function getProcessDefSetting(id) {
return request({
url: '/workflow/processDefSetting/' + id,
method: 'get'
})
}
// 按流程定义id查询流程定义与单配置详细
export function getProcessDefSettingByDefId(id) {
return request({
url: '/workflow/processDefSetting/getProcessDefSettingByDefId/' + id,
method: 'get'
})
}
// 校验表单是否关联
export function checkProcessDefSetting(defId,param,businessType) {
return request({
url: `/workflow/processDefSetting/checkProcessDefSetting/${defId}/${param}/${businessType}` ,
method: 'get'
})
}
// 新增流程定义与单配置
export function addProcessDefSetting(data) {
return request({
url: '/workflow/processDefSetting',
method: 'post',
data: data
})
}
// 修改流程定义与单配置
export function updateProcessDefSetting(data) {
return request({
url: '/workflow/processDefSetting',
method: 'put',
data: data
})
}
// 删除流程定义与单配置
export function delProcessDefSetting(id) {
return request({
url: '/workflow/processDefSetting/' + id,
method: 'delete'
})
}

92
ruoyi-ui/src/api/workflow/processInst.js
View File

@ -1,92 +0,0 @@
import request from '@/utils/request'
export default {
// 提交申请 ，启动流程申请
startProcessApply(data) {
return request({
url: '/workflow/processInstance/startWorkFlow',
method: 'post',
data: data
})
},
// 通过流程实例id查询流程审批记录
getHistoryInfoList(processInstId) {
return request({
url: '/workflow/processInstance/getHistoryInfoList/'+processInstId,
method: 'get'
})
},
// 通过流程实例id获取历史流程图
getHistoryProcessImage(processInstId) {
return process.env.VUE_APP_BASE_API+`/workflow/processInstance/getHistoryProcessImage?processInstId=${processInstId}&t=` + Math.random()
},
// 通过业务id查询流程实例
getInfoByBusinessKey(businessKey) {
return request({
url: '/workflow/actBusiness/getInfoByBusinessKey/'+businessKey,
method: 'get'
})
},
// 查询正在运行的流程实例
getProcessInstRunningByPage(query) {
return request({
url: '/workflow/processInstance/getProcessInstRunningByPage',
method: 'get',
params: query
})
},
// 挂起或激活流程实例
state(data) {
return request({
url: '/workflow/processInstance/state',
method: 'put',
data: data
})
},
// 作废流程实例，不会删除历史记录
deleteRuntimeProcessInst(processInstId) {
return request({
url: '/workflow/processInstance/deleteRuntimeProcessInst/'+processInstId,
method: 'delete'
})
},
// 删除运行中的实例，删除历史记录,删除业务与流程关联信息
deleteRuntimeProcessAndHisInst(processInstId) {
return request({
url: '/workflow/processInstance/deleteRuntimeProcessAndHisInst/'+processInstId,
method: 'delete'
})
},
// 删除已完成的实例，删除历史记录,删除业务与流程关联信息
deleteFinishProcessAndHisInst(processInstId) {
return request({
url: '/workflow/processInstance/deleteFinishProcessAndHisInst/'+processInstId,
method: 'delete'
})
},
// 撤销申请
cancelProcessApply(processInstanceId) {
return request({
url: '/workflow/processInstance/cancelProcessApply/'+processInstanceId,
method: 'get'
})
},
// 查询已完成的流程实例
getProcessInstFinishByPage(query) {
return request({
url: '/workflow/processInstance/getProcessInstFinishByPage',
method: 'get',
params: query
})
}
}

151
ruoyi-ui/src/api/workflow/task.js
View File

@ -1,151 +0,0 @@
import request from '@/utils/request'
export default {
// 查询当前用户的待办任务
getTaskWaitByPage(query) {
return request({
url: '/workflow/task/getTaskWaitByPage',
method: 'get',
params: query
})
},
// 查询当前用户的已办任务
getTaskFinishByPage(query) {
return request({
url: '/workflow/task/getTaskFinishByPage',
method: 'get',
params: query
})
},
// 查询所有用户的待办任务
getAllTaskWaitByPage(query) {
return request({
url: '/workflow/task/getAllTaskWaitByPage',
method: 'get',
params: query
})
},
// 查询所有用户的已办任务
getAllTaskFinishByPage(query) {
return request({
url: '/workflow/task/getAllTaskFinishByPage',
method: 'get',
params: query
})
},
// 完成任务
completeTask(data) {
return request({
url: '/workflow/task/completeTask',
method: 'post',
data: data
})
},
// 获取目标节点（下一个节点）
getNextNodeInfo(data) {
return request({
url: '/workflow/task/getNextNodeInfo',
method: 'post',
data: data
})
},
// 获取历史任务节点，用于驳回功能
getBackNodes(processInstId) {
return request({
url: '/workflow/task/getBackNodes/'+processInstId,
method: 'get'
})
},
// 驳回审批
backProcess(data) {
return request({
url: '/workflow/task/backProcess',
method: 'post',
data: data
})
},
// 删除执行后的节点
deleteByNodeIds(data) {
return request({
url: '/workflow/task/deleteByNodeIds',
method: 'post',
data: data
})
},
// 签收任务
claim(taskId) {
return request({
url: '/workflow/task/claim/'+taskId,
method: 'post'
})
},
// 归还任务
returnTask(taskId) {
return request({
url: '/workflow/task/returnTask/'+taskId,
method: 'post'
})
},
// 委托任务
delegateTask(data) {
return request({
url: '/workflow/task/delegateTask',
method: 'post',
data: data
})
},
// 转办任务
transmitTask(data) {
return request({
url: '/workflow/task/transmitTask',
method: 'post',
data: data
})
},
// 会签任务加签
addMultiInstanceExecution(data) {
return request({
url: '/workflow/task/addMultiInstanceExecution',
method: 'post',
data: data
})
},
// 会签任务减签
deleteMultiInstanceExecution(data) {
return request({
url: '/workflow/task/deleteMultiInstanceExecution',
method: 'post',
data: data
})
},
// 会签任务减签
updateAssignee(data) {
return request({
url: '/workflow/task/updateAssignee',
method: 'post',
data: data
})
},
//查询流程变量
getProcessInstVariable(taskId) {
return request({
url: '/workflow/task/getProcessInstVariable/'+taskId,
method: 'get'
})
},
//修改审批意见
editComment(commentId,comment) {
return request({
url: `/workflow/task/editComment/${commentId}/${comment}`,
method: 'put'
})
}
}

18
ruoyi-ui/src/api/workflow/workflowUser.js
View File

@ -1,18 +0,0 @@
import request from '@/utils/request'
// 查询工作流接口用户
export function getWorkflowUserListByPage(data) {
return request({
url: '/workflow/user/getWorkflowUserListByPage',
method: 'post',
data: data
})
}
// 分页查询工作流选择加签人员
export function getWorkflowAddMultiListByPage(data) {
return request({
url: '/workflow/user/getWorkflowAddMultiListByPage',
method: 'post',
data: data
})
}

BIN
ruoyi-ui/src/assets/img/home/home_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 453 KiB

BIN
ruoyi-ui/src/assets/img/work/custInfo/module_header_left.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 458 B

BIN
ruoyi-ui/src/assets/img/work/custInfo/module_header_share.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverviewBground.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverviewBgroundSigle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverview_iconRisk1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 816 B

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverview_iconRisk2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 776 B

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverview_iconRisk3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 729 B

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverview_iconRisk4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 774 B

BIN
ruoyi-ui/src/assets/img/work/custInfo/riskOverview_sigh.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
ruoyi-ui/src/assets/img/work/custInfo/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/duty/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/loan/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/process/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/product/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/risk/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
ruoyi-ui/src/assets/img/work/touch/warning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

68
ruoyi-ui/src/components/Bpmn/package/BpmData.js
View File

@ -1,68 +0,0 @@
/**
* 存储流程设计相关参数
*/
export default class BpmData {
constructor() {
this.controls = [] // 设计器控件
this.init()
}
init() {
this.controls = [
{
action: 'create.start-event',
title: '开始'
},
{
action: 'create.intermediate-event',
title: '中间'
},
{
action: 'create.end-event',
title: '结束'
},
{
action: 'create.exclusive-gateway',
title: '网关'
},
{
action: 'create.task',
title: '任务'
},
{
action: 'create.user-task',
title: '用户任务'
},
{
action: 'create.user-sign-task',
title: '会签任务'
},
{
action: 'create.subprocess-expanded',
title: '子流程'
},
{
action: 'create.data-object',
title: '数据对象'
},
{
action: 'create.data-store',
title: '数据存储'
},
{
action: 'create.participant-expanded',
title: '扩展流程'
},
{
action: 'create.group',
title: '分组'
}
]
}
// 获取控件配置信息
getControl(action) {
const result = this.controls.filter(item => item.action === action)
return result[0] || {}
}
}

164
ruoyi-ui/src/components/Bpmn/package/PropertyPanel.vue
View File

@ -1,164 +0,0 @@
<template>
<div ref="propertyPanel" class="property-panel">
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
<component
:is="getComponent"
v-if="element"
:element="element"
:modeler="modeler"
:users="users"
:groups="groups"
:categorys="categorys"
/>
</div>
</template>
<script>
import taskPanel from './components/nodePanel/task.vue'
import startEndPanel from './components/nodePanel/startEnd.vue'
import processPanel from './components/nodePanel/process.vue'
import sequenceFlowPanel from './components/nodePanel/sequenceFlow.vue'
import gatewayPanel from './components/nodePanel/gateway.vue'
import { NodeName } from './lang/zh'
export default {
name: 'PropertyPanel',
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
},
categorys: {
type: Array,
required: true
},
modeler: {
type: Object,
required: true
}
},
data() {
return {
element: null,
form: {
id: '',
name: '',
color: null
},
roles: [
{ value: 'manager', label: '经理' },
{ value: 'personnel', label: '人事' },
{ value: 'charge', label: '主管' }
]
}
},
computed: {
getComponent() {
const type = this.element?.type
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
return 'startEndPanel'
}
if ([
'bpmn:UserTask',
'bpmn:Task',
'bpmn:SendTask',
'bpmn:ReceiveTask',
'bpmn:ManualTask',
'bpmn:BusinessRuleTask',
'bpmn:ServiceTask',
'bpmn:ScriptTask'
// 'bpmn:CallActivity',
// 'bpmn:SubProcess'
].includes(type)) {
return 'taskPanel'
}
if (type === 'bpmn:SequenceFlow') {
return 'sequenceFlowPanel'
}
if ([
'bpmn:InclusiveGateway',
'bpmn:ExclusiveGateway',
'bpmn:ParallelGateway',
'bpmn:EventBasedGateway'
].includes(type)) {
return 'gatewayPanel'
}
if (type === 'bpmn:Process') {
return 'processPanel'
}
return null
},
nodeName() {
if (this.element) {
const bizObj = this.element.businessObject
const type = bizObj?.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
return NodeName[type] || type
}
return ''
}
},
mounted() {
this.handleModeler()
},
methods: {
handleModeler() {
this.modeler.on('root.added', e => {
if (e.element.type === 'bpmn:Process') {
this.element = null
this.$nextTick().then(() => {
this.element = e.element
})
}
})
this.modeler.on('element.click', e => {
const { element } = e
console.log(element)
if (element.type === 'bpmn:Process') {
this.element = element
}
})
this.modeler.on('selection.changed', e => {
// hack 同类型面板不刷新
this.element = null
const element = e.newSelection[0]
if (element) {
this.$nextTick().then(() => {
this.element = element
})
}
})
}
}
}
</script>
<style lang="scss">
.property-panel {
padding: 20px 20px;
// reset element css
.el-form--label-top .el-form-item__label {
padding: 0;
}
.el-form-item {
margin-bottom: 6px;
}
.tab-table .el-form-item {
margin-bottom: 16px;
}
.node-name{
border-bottom: 1px solid #ccc;
padding: 0 0 10px 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #444;
}
}
</style>

20
ruoyi-ui/src/components/Bpmn/package/common/customTranslate.js
View File

@ -1,20 +0,0 @@
import translations from '../lang/zh'
export default function customTranslate(template, replacements) {
replacements = replacements || {}
// Translate
template = translations[template] || template
// Replace
return template.replace(/{([^}]+)}/g, function(_, key) {
var str = replacements[key]
if (
translations[replacements[key]] !== null &&
translations[replacements[key]] !== 'undefined'
) {
str = translations[replacements[key]]
}
return str || '{' + key + '}'
})
}

24
ruoyi-ui/src/components/Bpmn/package/common/mixinExecutionListener.js
View File

@ -1,24 +0,0 @@
import executionListenerDialog from '../components/nodePanel/property/executionListener'
export default {
components: {
executionListenerDialog
},
data() {
return {
executionListenerLength: 0,
dialogName: null
}
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
}
}
}

70
ruoyi-ui/src/components/Bpmn/package/common/mixinPanel.js
View File

@ -1,70 +0,0 @@
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
import showConfig from '../flowable/showConfig'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm },
props: {
modeler: {
type: Object,
required: true
},
element: {
type: Object,
required: true
},
categorys: {
type: Array,
default: () => []
}
},
watch: {
'formData.id': function(val) {
this.updateProperties({ id: val })
},
'formData.name': function(val) {
this.updateProperties({ name: val })
},
'formData.documentation': function(val) {
if (!val) {
this.updateProperties({ documentation: [] })
return
}
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val })
this.updateProperties({ documentation: [documentationElement] })
}
},
methods: {
updateProperties(properties) {
const modeling = this.modeler.get('modeling')
modeling.updateProperties(this.element, properties)
}
},
computed: {
elementType() {
const bizObj = this.element.businessObject
return bizObj.eventDefinitions
? bizObj.eventDefinitions[0].$type
: bizObj.$type
},
showConfig() {
return showConfig[this.elementType] || {}
}
}
}

22
ruoyi-ui/src/components/Bpmn/package/common/mixinXcrud.js
View File

@ -1,22 +0,0 @@
import xcrud from 'xcrud'
import golbalConfig from 'xcrud/package/common/config'
golbalConfig.set({
input: {
// size: 'mini'
},
select: {
// size: 'mini'
},
colorPicker: {
showAlpha: true
},
xform: {
form: {
labelWidth: 'auto'
// size: 'mini'
}
}
})
export default {
components: { xForm: xcrud.xForm }
}

53
ruoyi-ui/src/components/Bpmn/package/common/parseElement.js
View File

@ -1,53 +0,0 @@
export function commonParse(element) {
const result = {
...element.businessObject,
...element.businessObject.$attrs
}
return formatJsonKeyValue(result)
}
export function formatJsonKeyValue(result) {
// 移除flowable前缀，格式化数组
for (const key in result) {
if (key.indexOf('flowable:') === 0) {
const newKey = key.replace('flowable:', '')
result[newKey] = result[key]
delete result[key]
}
}
result = documentationParse(result)
return result
}
export function documentationParse(obj) {
if ('documentation' in obj) {
let str = ''
obj.documentation.forEach(item => {
str += item.text
})
obj.documentation = str
}
return obj
}
export function conditionExpressionParse(obj) {
if ('conditionExpression' in obj) {
obj.conditionExpression = obj.conditionExpression.body
}
return obj
}
export function userTaskParse(obj) {
for (const key in obj) {
if (key === 'candidateUsers') {
obj.userType = 'candidateUsers'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'candidateGroups') {
obj.userType = 'candidateGroups'
obj[key] = obj[key]?.split(',') || []
} else if (key === 'assignee') {
obj.userType = 'assignee'
}
}
return obj
}

24
ruoyi-ui/src/components/Bpmn/package/components/custom/customContextPad.vue
View File

@ -1,24 +0,0 @@
export default class CustomContextPad {
constructor(config, contextPad, create, elementFactory, injector, translate) {
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
if (config.autoPlace !== false) {
this.autoPlace = injector.get('autoPlace', false);
}
contextPad.registerProvider(this); // 定义这是一个contextPad
}
getContextPadEntries(element) {}
}
CustomContextPad.$inject = [
'config',
'contextPad',
'create',
'elementFactory',
'injector',
'translate'
];

81
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/gateway.vue
View File

@ -1,81 +0,0 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否'
}
]
}
}
},
watch: {
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': val })
}
},
created() {
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>

113
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/process.vue
View File

@ -1,113 +0,0 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #signal>
<el-badge :value="signalLength">
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<signalDialog
v-if="dialogName === 'signalDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import signalDialog from './property/signal'
import { commonParse } from '../../common/parseElement'
export default {
components: {
signalDialog
},
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
signalLength: 0,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'select',
name: 'processCategory',
label: '流程分类',
dic: { data: _this.categorys, label: 'name', value: 'id' }
},
{
xType: 'input',
name: 'id',
label: '流程标识key',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '流程名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'signal',
label: '信号定义'
}
]
}
}
},
watch: {
'formData.processCategory': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:processCategory': val })
}
},
created() {
this.formData = commonParse(this.element)
},
methods: {
computedSignalLength() {
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
},
finishSignal() {
if (this.dialogName === 'signalDialog') {
this.computedSignalLength()
}
this.dialogName = ''
}
}
}
</script>
<style>
</style>

195
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/property/executionListener.vue
View File

@ -1,195 +0,0 @@
<template>
<div>
<el-dialog
title="执行监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
append-to-body
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
executionListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '执行监听器',
name: 'executionListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'start', value: 'start' },
{ label: 'end', value: 'end' },
{ label: 'take', value: 'take' }
]
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
],
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
`
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.executionListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:ExecutionListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.executionListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.executionListener[this.nowIndex]
cache.params = param
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.executionListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
this.formData.executionListener.forEach(item => {
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
executionListener['event'] = item.event
executionListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
executionListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(executionListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

97
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/property/listenerParam.vue
View File

@ -1,97 +0,0 @@
<template>
<div>
<el-dialog
title="监听器参数"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close', formData.paramList)"
append-to-body
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinXcrud from '../../../common/mixinXcrud'
export default {
mixins: [mixinXcrud],
props: {
value: {
type: Array,
default: () => []
}
},
data() {
return {
dialogVisible: true,
formData: {
paramList: this.value
}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '监听器参数',
name: 'paramList',
column: [
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '字符串', value: 'stringValue' },
{ label: '表达式', value: 'expression' }
]
},
{
label: '名称',
name: 'name',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '值',
name: 'value',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
methods: {
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

118
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/property/multiInstance.vue
View File

@ -1,118 +0,0 @@
<template>
<div>
<el-dialog
title="多实例配置"
:visible.sync="dialogVisible"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
class="muti-instance"
@closed="$emit('close')"
append-to-body
>
<el-alert
type="info"
:closable="false"
show-icon
style="margin-bottom: 20px"
>
<template #title>
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
nrOfInstances：实例总数。<br>
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
nrOfCompletedInstances：已完成的实例数量。<br>
loopCounter：给定实例在for-each循环中的index。<br>
</template>
</el-alert>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import { formatJsonKeyValue } from '../../../common/parseElement'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'collection',
label: '集合',
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
},
{
xType: 'input',
name: 'elementVariable',
label: '元素变量',
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
},
{
xType: 'radio',
name: 'isSequential',
label: '执行方式',
dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
},
{
xType: 'input',
name: 'completionCondition',
label: '完成条件',
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
}
],
operate: [
{ text: '确定', show: true, click: _this.save },
{ text: '清空', show: true, click: () => { _this.formData = {} } }
]
}
}
},
mounted() {
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
cache.completionCondition = cache.completionCondition?.body
this.formData = formatJsonKeyValue(cache)
},
methods: {
updateElement() {
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
if (!loopCharacteristics) {
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
}
loopCharacteristics['isSequential'] = this.formData.isSequential
loopCharacteristics['collection'] = this.formData.collection
loopCharacteristics['elementVariable'] = this.formData.elementVariable
if (this.formData.completionCondition) {
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
loopCharacteristics['completionCondition'] = completionCondition
}
this.updateProperties({ loopCharacteristics: loopCharacteristics })
} else {
delete this.element.businessObject.loopCharacteristics
}
},
save() {
this.updateElement()
this.dialogVisible = false
}
}
}
</script>
<style>
.muti-instance .el-form-item {
margin-bottom: 22px;
}
</style>

125
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/property/signal.vue
View File

@ -1,125 +0,0 @@
<template>
<div>
<el-dialog
title="信号定义"
:visible.sync="dialogVisible"
width="700px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
append-to-body
>
<x-form ref="xForm" v-model="formData" :config="formConfig" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
export default {
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
formData: {
signal: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '信号定义',
name: 'signal',
column: [
{
label: 'scope',
name: 'scope',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '全局', value: 'start' },
{ label: '流程实例', value: 'end' }
]
},
{
label: 'id',
name: 'id',
width: 200,
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
xType: 'input'
},
{
label: '名称',
name: 'name',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
}
]
}
]
}
]
}
}
},
mounted() {
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
// let type
// if ('class' in item.$attrs) type = 'class'
// if ('expression' in item.$attrs) type = 'expression'
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression'
// return {
// event: item.$attrs.event,
// type: type,
// className: item.$attrs[type]
// }
// }) ?? []
},
methods: {
updateElement() {
if (this.formData.signal?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:signal')
}
const length = extensionElements.get('values').length
for (let i = 0; i < length; i++) {
// 清除旧值
extensionElements.get('values').pop()
}
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

197
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/property/taskListener.vue
View File

@ -1,197 +0,0 @@
<template>
<div>
<el-dialog
title="任务监听器"
:visible.sync="dialogVisible"
width="900px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@closed="$emit('close')"
append-to-body
>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #params="scope">
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
</el-badge>
</template>
</x-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
</span>
</el-dialog>
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
</div>
</template>
<script>
import mixinPanel from '../../../common/mixinPanel'
import listenerParam from './listenerParam'
export default {
components: { listenerParam },
mixins: [mixinPanel],
data() {
return {
dialogVisible: true,
showParamDialog: false,
nowIndex: null,
formData: {
taskListener: []
}
}
},
computed: {
formConfig() {
// const _this = this
return {
inline: false,
item: [
{
xType: 'tabs',
tabs: [
{
label: '任务监听器',
name: 'taskListener',
column: [
{
label: '事件',
name: 'event',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: 'create', value: 'create' },
{ label: 'assignment', value: 'assignment' },
{ label: 'complete', value: 'complete' },
{ label: 'delete', value: 'delete' }
],
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
`
},
{
label: '类型',
name: 'type',
width: 180,
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
xType: 'select',
dic: [
{ label: '类', value: 'class' },
{ label: '表达式', value: 'expression' },
{ label: '委托表达式', value: 'delegateExpression' }
]
},
{
label: 'java 类名',
name: 'className',
xType: 'input',
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
},
{
xType: 'slot',
label: '参数',
width: 120,
slot: true,
name: 'params'
}
]
}
]
}
]
}
}
},
mounted() {
this.formData.taskListener = this.element.businessObject.extensionElements?.values
.filter(item => item.$type === 'flowable:TaskListener')
.map(item => {
let type
if ('class' in item) type = 'class'
if ('expression' in item) type = 'expression'
if ('delegateExpression' in item) type = 'delegateExpression'
return {
event: item.event,
type: type,
className: item[type],
params: item.fields?.map(field => {
let fieldType
if ('stringValue' in field) fieldType = 'stringValue'
if ('expression' in field) fieldType = 'expression'
return {
name: field.name,
type: fieldType,
value: field[fieldType]
}
}) ?? []
}
}) ?? []
},
methods: {
configParam(index) {
this.nowIndex = index
const nowObj = this.formData.taskListener[index]
if (!nowObj.params) {
nowObj.params = []
}
this.showParamDialog = true
},
finishConfigParam(param) {
this.showParamDialog = false
// hack 数量不更新问题
const cache = this.formData.taskListener[this.nowIndex]
cache.params = param
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
this.nowIndex = null
},
updateElement() {
if (this.formData.taskListener?.length) {
let extensionElements = this.element.businessObject.get('extensionElements')
if (!extensionElements) {
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
this.formData.taskListener.forEach(item => {
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
taskListener['event'] = item.event
taskListener[item.type] = item.className
if (item.params && item.params.length) {
item.params.forEach(field => {
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
fieldElement['name'] = field.name
fieldElement[field.type] = field.value
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
// fieldElement[field.type] = valueElement
taskListener.get('fields').push(fieldElement)
})
}
extensionElements.get('values').push(taskListener)
})
this.updateProperties({ extensionElements: extensionElements })
} else {
const extensionElements = this.element.businessObject[`extensionElements`]
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
}
}
},
closeDialog() {
this.$refs.xForm.validate().then(() => {
this.updateElement()
this.dialogVisible = false
}).catch(e => console.error(e))
}
}
}
</script>
<style>
.flow-containers .el-badge__content.is-fixed {
top: 18px;
}
</style>

92
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/sequenceFlow.vue
View File

@ -1,92 +0,0 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'conditionExpression',
label: '跳转条件'
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式'
}
]
}
}
},
watch: {
'formData.conditionExpression': function(val) {
if (val) {
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
this.updateProperties({ conditionExpression: newCondition })
} else {
this.updateProperties({ conditionExpression: null })
}
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
}
},
created() {
let cache = commonParse(this.element)
cache = conditionExpressionParse(cache)
this.formData = cache
}
}
</script>
<style></style>

91
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/startEnd.vue
View File

@ -1,91 +0,0 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse } from '../../common/parseElement'
export default {
mixins: [mixinPanel, mixinExecutionListener],
data() {
return {
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'input',
name: 'initiator',
label: '发起人',
show: !!_this.showConfig.initiator
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
}
]
}
}
},
watch: {
'formData.initiator': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:initiator': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
}
},
created() {
this.formData = commonParse(this.element)
}
}
</script>
<style>
</style>

376
ruoyi-ui/src/components/Bpmn/package/components/nodePanel/task.vue
View File

@ -1,376 +0,0 @@
<template>
<div>
<x-form ref="xForm" v-model="formData" :config="formConfig">
<template #executionListener>
<el-badge :value="executionListenerLength">
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #taskListener>
<el-badge :value="taskListenerLength">
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
</el-badge>
</template>
<template #multiInstance>
<el-badge :is-dot="hasMultiInstance">
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
</el-badge>
</template>
</x-form>
<executionListenerDialog
v-if="dialogName === 'executionListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishExecutionListener"
/>
<taskListenerDialog
v-if="dialogName === 'taskListenerDialog'"
:element="element"
:modeler="modeler"
@close="finishTaskListener"
/>
<multiInstanceDialog
v-if="dialogName === 'multiInstanceDialog'"
:element="element"
:modeler="modeler"
@close="finishMultiInstance"
/>
</div>
</template>
<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import { commonParse, userTaskParse } from '../../common/parseElement'
export default {
components: {
executionListenerDialog,
taskListenerDialog,
multiInstanceDialog
},
mixins: [mixinPanel],
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
}
},
data() {
return {
userTypeOption: [
{ label: '指定人员', value: 'assignee' }//,
// { label: '候选人员', value: 'candidateUsers' },
// { label: '候选组', value: 'candidateGroups' }
],
dialogName: '',
executionListenerLength: 0,
taskListenerLength: 0,
hasMultiInstance: false,
formData: {}
}
},
computed: {
formConfig() {
const _this = this
return {
inline: false,
item: [
{
xType: 'input',
name: 'id',
label: '节点 id',
rules: [{ required: true, message: 'Id 不能为空' }]
},
{
xType: 'input',
name: 'name',
label: '节点名称'
},
{
xType: 'input',
name: 'documentation',
label: '节点描述'
},
{
xType: 'slot',
name: 'executionListener',
label: '执行监听器'
},
{
xType: 'slot',
name: 'taskListener',
label: '任务监听器',
show: !!_this.showConfig.taskListener
},
{
xType: 'select',
name: 'userType',
label: '人员类型',
dic: _this.userTypeOption,
show: !!_this.showConfig.userType
},
{
xType: 'select',
name: 'assignee',
label: '指定人员',
allowCreate: true,
filterable: true,
clearable: true,
dic: { data: _this.users, label: 'name', value: 'id' },
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
},
{
xType: 'select',
name: 'candidateUsers',
label: '候选人员',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.users, label: 'name', value: 'id' },
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
},
{
xType: 'select',
name: 'candidateGroups',
label: '候选组',
multiple: true,
allowCreate: true,
filterable: true,
dic: { data: _this.groups, label: 'name', value: 'id' },
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
},
{
xType: 'slot',
name: 'multiInstance',
label: '多实例'
},
{
xType: 'switch',
name: 'async',
label: '异步',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.async
},
{
xType: 'input',
name: 'priority',
label: '优先级',
show: !!_this.showConfig.priority
},
{
xType: 'input',
name: 'formKey',
label: '表单标识key',
show: !!_this.showConfig.formKey
},
{
xType: 'input',
name: 'skipExpression',
label: '跳过表达式',
show: !!_this.showConfig.skipExpression
},
{
xType: 'switch',
name: 'isForCompensation',
label: '是否为补偿',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.isForCompensation
},
{
xType: 'switch',
name: 'triggerable',
label: '服务任务可触发',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.triggerable
},
{
xType: 'switch',
name: 'autoStoreVariables',
label: '自动存储变量',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.autoStoreVariables
},
{
xType: 'input',
name: 'ruleVariablesInput',
label: '输入变量',
show: !!_this.showConfig.ruleVariablesInput
},
{
xType: 'input',
name: 'rules',
label: '规则',
show: !!_this.showConfig.rules
},
{
xType: 'input',
name: 'resultVariable',
label: '结果变量',
show: !!_this.showConfig.resultVariable
},
{
xType: 'switch',
name: 'exclude',
label: '排除',
activeText: '是',
inactiveText: '否',
show: !!_this.showConfig.exclude
},
{
xType: 'input',
name: 'class',
label: '类',
show: !!_this.showConfig.class
},
{
xType: 'datePicker',
type: 'datetime',
name: 'dueDate',
label: '到期时间',
show: !!_this.showConfig.dueDate
}
]
}
}
},
watch: {
'formData.userType': function(val, oldVal) {
if (oldVal) {
const types = ['assignee', 'candidateUsers', 'candidateGroups']
types.forEach(type => {
delete this.element.businessObject.$attrs[`flowable:${type}`]
delete this.formData[type]
})
}
},
'formData.assignee': function(val) {
if (this.formData.userType !== 'assignee') {
delete this.element.businessObject.$attrs[`flowable:assignee`]
return
}
this.updateProperties({ 'flowable:assignee': val })
},
'formData.candidateUsers': function(val) {
if (this.formData.userType !== 'candidateUsers') {
delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
return
}
this.updateProperties({ 'flowable:candidateUsers': val?.join(',') })
},
'formData.candidateGroups': function(val) {
if (this.formData.userType !== 'candidateGroups') {
delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
return
}
this.updateProperties({ 'flowable:candidateGroups': val?.join(',') })
},
'formData.async': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:async': true })
},
'formData.dueDate': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:dueDate': val })
},
'formData.formKey': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:formKey': val })
},
'formData.priority': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:priority': val })
},
'formData.skipExpression': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:skipExpression': val })
},
'formData.isForCompensation': function(val) {
if (val === '') val = null
this.updateProperties({ 'isForCompensation': val })
},
'formData.triggerable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:triggerable': val })
},
'formData.class': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:class': val })
},
'formData.autoStoreVariables': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:autoStoreVariables': val })
},
'formData.exclude': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:exclude': val })
},
'formData.ruleVariablesInput': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:ruleVariablesInput': val })
},
'formData.rules': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:rules': val })
},
'formData.resultVariable': function(val) {
if (val === '') val = null
this.updateProperties({ 'flowable:resultVariable': val })
}
},
created() {
let cache = commonParse(this.element)
cache = userTaskParse(cache)
this.formData = cache
this.computedExecutionListenerLength()
this.computedTaskListenerLength()
this.computedHasMultiInstance()
},
methods: {
computedExecutionListenerLength() {
this.executionListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
},
computedTaskListenerLength() {
this.taskListenerLength = this.element.businessObject.extensionElements?.values
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
},
computedHasMultiInstance() {
if (this.element.businessObject.loopCharacteristics) {
this.hasMultiInstance = true
} else {
this.hasMultiInstance = false
}
},
finishExecutionListener() {
if (this.dialogName === 'executionListenerDialog') {
this.computedExecutionListenerLength()
}
this.dialogName = ''
},
finishTaskListener() {
if (this.dialogName === 'taskListenerDialog') {
this.computedTaskListenerLength()
}
this.dialogName = ''
},
finishMultiInstance() {
if (this.dialogName === 'multiInstanceDialog') {
this.computedHasMultiInstance()
}
this.dialogName = ''
}
}
}
</script>
<style></style>

1194
ruoyi-ui/src/components/Bpmn/package/flowable/flowable.json
View File

File diff suppressed because it is too large Load Diff

24
ruoyi-ui/src/components/Bpmn/package/flowable/init.js
View File

@ -1,24 +0,0 @@
function randomStr() {
return Math.random().toString(36).slice(-8)
}
export default function() {
return `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
<process id="process_${randomStr()}" name="name_${randomStr()}">
<startEvent id="startNode1" name="开始" />
</process>
<bpmndi:BPMNDiagram id="BPMNDiagram_flow">
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
<omgdc:Bounds x="240" y="200" width="30" height="30" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="242" y="237" width="23" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>
`
}

51
ruoyi-ui/src/components/Bpmn/package/flowable/showConfig.js
View File

@ -1,51 +0,0 @@
export default {
'bpmn:EndEvent': {},
'bpmn:StartEvent': {
initiator: true,
formKey: true
},
'bpmn:UserTask': {
userType: true,
assignee: true,
candidateUsers: true,
candidateGroups: true,
async: true,
priority: true,
formKey: true,
skipExpression: true,
dueDate: true,
taskListener: true
},
'bpmn:ServiceTask': {
async: true,
skipExpression: true,
isForCompensation: true,
triggerable: true,
class: true
},
'bpmn:ScriptTask': {
async: true,
isForCompensation: true,
autoStoreVariables: true
},
'bpmn:ManualTask': {
async: true,
isForCompensation: true
},
'bpmn:ReceiveTask': {
async: true,
isForCompensation: true
},
'bpmn:SendTask': {
async: true,
isForCompensation: true
},
'bpmn:BusinessRuleTask': {
async: true,
isForCompensation: true,
ruleVariablesInput: true,
rules: true,
resultVariable: true,
exclude: true
}
}

5
ruoyi-ui/src/components/Bpmn/package/index.js
View File

@ -1,5 +0,0 @@
import workflowBpmnModeler from './index.vue'
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
export default workflowBpmnModeler

422
ruoyi-ui/src/components/Bpmn/package/index.vue
View File

@ -1,422 +0,0 @@
<template>
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }">
<el-container style="height: 100%">
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;">
<div style="display: flex; padding: 10px 0px; justify-content: space-between;">
<div>
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;">
<el-tooltip effect="dark" content="加载xml" placement="bottom">
<el-button size="mini" icon="el-icon-folder-opened" />
</el-tooltip>
</el-upload>
<el-tooltip effect="dark" content="新建" placement="bottom">
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" />
</el-tooltip>
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" />
</el-tooltip>
<el-tooltip effect="dark" content="放大" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" />
</el-tooltip>
<el-tooltip effect="dark" content="缩小" placement="bottom">
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" />
</el-tooltip>
<el-tooltip effect="dark" content="后退" placement="bottom">
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" />
</el-tooltip>
<el-tooltip effect="dark" content="前进" placement="bottom">
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" />
</el-tooltip>
</div>
<div>
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
<el-button size="mini" type="primary" @click="save">保存模型</el-button>
</div>
</div>
</el-header>
<el-container style="align-items: stretch">
<el-main style="padding: 0;">
<div ref="canvas" class="canvas" />
</el-main>
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" />
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
// 汉化
import customTranslate from './common/customTranslate'
import Modeler from 'bpmn-js/lib/Modeler'
import panel from './PropertyPanel'
import BpmData from './BpmData'
import getInitStr from './flowable/init'
// 引入flowable的节点文件
import flowableModdle from './flowable/flowable.json'
export default {
name: 'WorkflowBpmnModeler',
components: {
panel
},
props: {
xml: {
type: String,
default: ''
},
users: {
type: Array,
default: () => []
},
groups: {
type: Array,
default: () => []
},
categorys: {
type: Array,
default: () => []
},
isView: {
type: Boolean,
default: false
}
},
data() {
return {
modeler: null,
taskList: [],
zoom: 1
}
},
watch: {
xml: function(val) {
if (val) {
this.createNewDiagram(val)
}
}
},
mounted() {
// 生成实例
this.modeler = new Modeler({
container: this.$refs.canvas,
additionalModules: [
{
translate: ['value', customTranslate]
}
],
moddleExtensions: {
flowable: flowableModdle
}
})
// 新增流程定义
if (!this.xml) {
this.newDiagram()
} else {
this.createNewDiagram(this.xml)
}
},
methods: {
newDiagram() {
this.createNewDiagram(getInitStr())
},
// 让图能自适应屏幕
fitViewport() {
this.zoom = this.modeler.get('canvas').zoom('fit-viewport')
const bbox = document.querySelector('.flow-containers .viewport').getBBox()
const currentViewbox = this.modeler.get('canvas').viewbox()
const elementMid = {
x: bbox.x + bbox.width / 2 - 65,
y: bbox.y + bbox.height / 2
}
this.modeler.get('canvas').viewbox({
x: elementMid.x - currentViewbox.width / 2,
y: elementMid.y - currentViewbox.height / 2,
width: currentViewbox.width,
height: currentViewbox.height
})
this.zoom = bbox.width / currentViewbox.width * 1.8
},
// 放大缩小
zoomViewport(zoomIn = true) {
this.zoom = this.modeler.get('canvas').zoom()
this.zoom += (zoomIn ? 0.1 : -0.1)
this.modeler.get('canvas').zoom(this.zoom)
},
async createNewDiagram(data) {
// 将字符串转换成图显示出来
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '&lt;![CDATA[$1]]&gt;')
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) {
return str.replace(/</g, '&lt;')
})
try {
await this.modeler.importXML(data)
this.adjustPalette()
this.fitViewport()
// this.fillColor()
} catch (err) {
console.error(err.message, err.warnings)
}
},
// 调整左侧工具栏排版
adjustPalette() {
try {
// 获取 bpmn 设计器实例
const canvas = this.$refs.canvas
const djsPalette = canvas.children[0].children[1].children[4]
const djsPalStyle = {
width: '130px',
padding: '5px',
background: 'white',
left: '20px',
borderRadius: 0
}
for (var key in djsPalStyle) {
djsPalette.style[key] = djsPalStyle[key]
}
const palette = djsPalette.children[0]
const allGroups = palette.children
allGroups[0].style['display'] = 'none'
// 修改控件样式
for (var gKey in allGroups) {
const group = allGroups[gKey]
for (var cKey in group.children) {
const control = group.children[cKey]
const controlStyle = {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
width: '100%',
padding: '5px'
}
if (
control.className &&
control.dataset &&
control.className.indexOf('entry') !== -1
) {
const controlProps = new BpmData().getControl(
control.dataset.action
)
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
controlProps['title']
}</div>`
for (var csKey in controlStyle) {
control.style[csKey] = controlStyle[csKey]
}
}
}
}
} catch (e) {
console.log(e)
}
},
fillColor() {
const canvas = this.modeler.get('canvas')
this.modeler._definitions.rootElements[0].flowElements.forEach(n => {
if (n.$type === 'bpmn:UserTask') {
const completeTask = this.taskList.find(m => m.key === n.id) || { completed: true }
const todoTask = this.taskList.find(m => !m.completed)
const endTask = this.taskList[this.taskList.length - 1]
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
// canvas.addMarker(nn.id, 'highlight');
canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo')
} else if (nn.targetRef.$type === 'bpmn:EndEvent') {
if (!todoTask && endTask.key === n.id) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(nn.targetRef.id, 'highlight')
}
if (!completeTask.completed) {
canvas.addMarker(nn.id, 'highlight-todo')
canvas.addMarker(nn.targetRef.id, 'highlight-todo')
}
}
})
}
} else if (n.$type === 'bpmn:ExclusiveGateway') {
n.outgoing.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
if (n.$type === 'bpmn:StartEvent') {
n.outgoing.forEach(nn => {
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(n.id, 'highlight')
return
}
})
}
})
},
// 对外 api
getProcess() {
const element = this.getProcessElement()
return {
id: element.id,
name: element.name,
category: element.$attrs['flowable:processCategory']
}
},
getProcessElement() {
const rootElements = this.modeler.getDefinitions().rootElements
for (let i = 0; i < rootElements.length; i++) {
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i]
}
},
async saveXML(download = false) {
try {
const { xml } = await this.modeler.saveXML({ format: true })
if (download) {
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml')
}
return xml
} catch (err) {
console.log(err)
}
},
async saveImg(type = 'svg', download = false) {
try {
const { svg } = await this.modeler.saveSVG({ format: true })
if (download) {
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml')
}
return svg
} catch (err) {
console.log(err)
}
},
async save() {
const process = this.getProcess()
const xml = await this.saveXML()
const svg = await this.saveImg()
const result = { process, xml, svg }
this.$emit('save', result)
window.parent.postMessage(result, '*')
},
openBpmn(file) {
const reader = new FileReader()
reader.readAsText(file, 'utf-8')
reader.onload = () => {
this.createNewDiagram(reader.result)
}
return false
},
downloadFile(filename, data, type) {
var a = document.createElement('a')
var url = window.URL.createObjectURL(new Blob([data], { type: type }))
a.href = url
a.download = filename
a.click()
window.URL.revokeObjectURL(url)
}
}
}
</script>
<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.view-mode {
.el-header, .el-aside, .djs-palette, .bjs-powered-by {
display: none;
}
.el-loading-mask {
background-color: initial;
}
.el-loading-spinner {
display: none;
}
}
.flow-containers {
// background-color: #ffffff;
width: 100%;
height: 100%;
.canvas {
width: 100%;
height: 100%;
}
.panel {
position: absolute;
right: 0;
top: 50px;
width: 300px;
}
.load {
margin-right: 10px;
}
.el-form-item__label{
font-size: 13px;
}
.djs-palette{
left: 0px!important;
top: 0px;
border-top: none;
}
.djs-container svg {
min-height: 650px;
}
// .highlight.djs-shape .djs-visual > :nth-child(1) {
// fill: green !important;
// stroke: green !important;
// fill-opacity: 0.2 !important;
// }
// .highlight.djs-shape .djs-visual > :nth-child(2) {
// fill: green !important;
// }
// .highlight.djs-shape .djs-visual > path {
// fill: green !important;
// fill-opacity: 0.2 !important;
// stroke: green !important;
// }
// .highlight.djs-connection > .djs-visual > path {
// stroke: green !important;
// }
// // .djs-connection > .djs-visual > path {
// // stroke: orange !important;
// // stroke-dasharray: 4px !important;
// // fill-opacity: 0.2 !important;
// // }
// // .djs-shape .djs-visual > :nth-child(1) {
// // fill: orange !important;
// // stroke: orange !important;
// // stroke-dasharray: 4px !important;
// // fill-opacity: 0.2 !important;
// // }
// .highlight-todo.djs-connection > .djs-visual > path {
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
// .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
// fill: orange !important;
// stroke: orange !important;
// stroke-dasharray: 4px !important;
// fill-opacity: 0.2 !important;
// }
// .overlays-div {
// font-size: 10px;
// color: red;
// width: 100px;
// top: -20px !important;
// }
}
</style>

227
ruoyi-ui/src/components/Bpmn/package/lang/zh.js
View File

@ -1,227 +0,0 @@
export default {
// Labels
'Activate the global connect tool': '激活全局连接工具',
'Append {type}': '添加 {type}',
'Add Lane above': '在上面添加道',
'Divide into two Lanes': '分割成两个道',
'Divide into three Lanes': '分割成三个道',
'Add Lane below': '在下面添加道',
'Append compensation activity': '追加补偿活动',
'Change type': '修改类型',
'Connect using Association': '使用关联连接',
'Connect using Sequence/MessageFlow or Association': '使用顺序/消息流或者关联连接',
'Connect using DataInputAssociation': '使用数据输入关联连接',
'Remove': '移除',
'Activate the hand tool': '激活抓手工具',
'Activate the lasso tool': '激活套索工具',
'Activate the create/remove space tool': '激活创建/删除空间工具',
'Create expanded SubProcess': '创建扩展子过程',
'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
'Create Pool/Participant': '创建池/参与者',
'Parallel Multi Instance': '并行多重事件',
'Sequential Multi Instance': '时序多重事件',
'DataObjectReference': '数据对象参考',
'DataStoreReference': '数据存储参考',
'Loop': '循环',
'Ad-hoc': '即席',
'Create {type}': '创建 {type}',
'Task': '任务',
'Send Task': '发送任务',
'Receive Task': '接收任务',
'User Task': '用户任务',
'Manual Task': '手工任务',
'Business Rule Task': '业务规则任务',
'Service Task': '服务任务',
'Script Task': '脚本任务',
'Call Activity': '调用活动',
'Sub Process (collapsed)': '子流程（折叠的）',
'Sub Process (expanded)': '子流程（展开的）',
'Start Event': '开始事件',
'StartEvent': '开始事件',
'Intermediate Throw Event': '中间事件',
'End Event': '结束事件',
'EndEvent': '结束事件',
'Create Gateway': '创建网关',
'Create Intermediate/Boundary Event': '创建中间/边界事件',
'Message Start Event': '消息开始事件',
'Timer Start Event': '定时开始事件',
'Conditional Start Event': '条件开始事件',
'Signal Start Event': '信号开始事件',
'Error Start Event': '错误开始事件',
'Escalation Start Event': '升级开始事件',
'Compensation Start Event': '补偿开始事件',
'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
'Message Intermediate Catch Event': '消息中间捕获事件',
'Message Intermediate Throw Event': '消息中间抛出事件',
'Timer Intermediate Catch Event': '定时中间捕获事件',
'Escalation Intermediate Throw Event': '升级中间抛出事件',
'Conditional Intermediate Catch Event': '条件中间捕获事件',
'Link Intermediate Catch Event': '链接中间捕获事件',
'Link Intermediate Throw Event': '链接中间抛出事件',
'Compensation Intermediate Throw Event': '补偿中间抛出事件',
'Signal Intermediate Catch Event': '信号中间捕获事件',
'Signal Intermediate Throw Event': '信号中间抛出事件',
'Message End Event': '消息结束事件',
'Escalation End Event': '定时结束事件',
'Error End Event': '错误结束事件',
'Cancel End Event': '取消结束事件',
'Compensation End Event': '补偿结束事件',
'Signal End Event': '信号结束事件',
'Terminate End Event': '终止结束事件',
'Message Boundary Event': '消息边界事件',
'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
'Timer Boundary Event': '定时边界事件',
'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
'Escalation Boundary Event': '升级边界事件',
'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
'Conditional Boundary Event': '条件边界事件',
'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
'Error Boundary Event': '错误边界事件',
'Cancel Boundary Event': '取消边界事件',
'Signal Boundary Event': '信号边界事件',
'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
'Compensation Boundary Event': '补偿边界事件',
'Exclusive Gateway': '互斥网关',
'Parallel Gateway': '并行网关',
'Inclusive Gateway': '相容网关',
'Complex Gateway': '复杂网关',
'Event based Gateway': '事件网关',
'Transaction': '转运',
'Sub Process': '子流程',
'Event Sub Process': '事件子流程',
'Collapsed Pool': '折叠池',
'Expanded Pool': '展开池',
// Errors
'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
'no shape type specified': '没有指定的形状类型',
'flow elements must be children of pools/participants': '流元素必须是池/参与者的子类',
'out of bounds release': 'out of bounds release',
'more than {count} child lanes': '子道大于{count} ',
'element required': '元素不能为空',
'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
'no diagram to display': '没有可展示的流程图',
'no process or collaboration to display': '没有可展示的流程/协作',
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未绘制',
'already rendered {element}': '{element} 已被渲染',
'failed to import {element}': '导入{element}失败',
// 属性面板的参数
'Id': '标识',
'Name': '名称',
'General': '常规',
'Details': '详情',
'Message Name': '消息名称',
'Message': '消息',
'Initiator': '创建者',
'Asynchronous Continuations': '持续异步',
'Asynchronous Before': '异步前',
'Asynchronous After': '异步后',
'Job Configuration': '工作配置',
'Exclusive': '排除',
'Job Priority': '工作优先级',
'Retry Time Cycle': '重试时间周期',
'Documentation': '文档',
'Element Documentation': '元素文档',
'History Configuration': '历史配置',
'History Time To Live': '历史的生存时间',
'Forms': '表单',
'Form Key': '表单key',
'Form Fields': '表单字段',
'Business Key': '业务key',
'Form Field': '表单字段',
'ID': '编号',
'Type': '类型',
'Label': '名称',
'Default Value': '默认值',
'Validation': '校验',
'Add Constraint': '添加约束',
'Config': '配置',
'Properties': '属性',
'Add Property': '添加属性',
'Value': '值',
'Listeners': '监听器',
'Execution Listener': '执行监听',
'Event Type': '事件类型',
'Listener Type': '监听器类型',
'Java Class': 'Java类',
'Expression': '表达式',
'Must provide a value': '必须提供一个值',
'Delegate Expression': '代理表达式',
'Script': '脚本',
'Script Format': '脚本格式',
'Script Type': '脚本类型',
'Inline Script': '内联脚本',
'External Script': '外部脚本',
'Resource': '资源',
'Field Injection': '字段注入',
'Extensions': '扩展',
'Input/Output': '输入/输出',
'Input Parameters': '输入参数',
'Output Parameters': '输出参数',
'Parameters': '参数',
'Output Parameter': '输出参数',
'Timer Definition Type': '定时器定义类型',
'Timer Definition': '定时器定义',
'Date': '日期',
'Duration': '持续',
'Cycle': '循环',
'Signal': '信号',
'Signal Name': '信号名称',
'Escalation': '升级',
'Error': '错误',
'Link Name': '链接名称',
'Condition': '条件名称',
'Variable Name': '变量名称',
'Variable Event': '变量事件',
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
'Wait for Completion': '等待完成',
'Activity Ref': '活动参考',
'Version Tag': '版本标签',
'Executable': '可执行文件',
'External Task Configuration': '扩展任务配置',
'Task Priority': '任务优先级',
'External': '外部',
'Connector': '连接器',
'Must configure Connector': '必须配置连接器',
'Connector Id': '连接器编号',
'Implementation': '实现方式',
'Field Injections': '字段注入',
'Fields': '字段',
'Result Variable': '结果变量',
'Topic': '主题',
'Configure Connector': '配置连接器',
'Input Parameter': '输入参数',
'Assignee': '代理人',
'Candidate Users': '候选用户',
'Candidate Groups': '候选组',
'Due Date': '到期时间',
'Follow Up Date': '跟踪日期',
'Priority': '优先级',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'Variables': '变量'
}
export const NodeName = {
'bpmn:Process': '流程',
'bpmn:StartEvent': '开始事件',
'bpmn:IntermediateThrowEvent': '中间事件',
'bpmn:Task': '任务',
'bpmn:SendTask': '发送任务',
'bpmn:ReceiveTask': '接收任务',
'bpmn:UserTask': '用户任务',
'bpmn:ManualTask': '手工任务',
'bpmn:BusinessRuleTask': '业务规则任务',
'bpmn:ServiceTask': '服务任务',
'bpmn:ScriptTask': '脚本任务',
'bpmn:EndEvent': '结束事件',
'bpmn:SequenceFlow': '流程线',
'bpmn:ExclusiveGateway': '互斥网关',
'bpmn:ParallelGateway': '并行网关',
'bpmn:InclusiveGateway': '相容网关',
'bpmn:ComplexGateway': '复杂网关',
'bpmn:EventBasedGateway': '事件网关'
}

76
ruoyi-ui/src/components/FormDesigner/configPanel.vue
View File

@ -1,76 +0,0 @@
<template>
<div class="right-board">
<el-tabs v-model="currentTab" class="center-tabs">
<el-tab-pane label="属性配置" name="field" />
</el-tabs>
<div class="field-box">
<el-scrollbar class="right-scrollbar">
<el-form size="small" label-width="100px" >
<div v-for="(item,index) in cmps" :key="index">
<component v-if="item.name === activeItem.compType" :getFormId="getFormId" :props="activeItem" :is="item.content"></component>
</div>
</el-form>
</el-scrollbar>
</div>
</div>
</template>
<script>
import reg from "./custom/register";
export default {
name:'configPanel',
data() {
return {
currentTab: 'field',
cmps:reg,
formIdArray:[]
}
},
props:{
activeItem: {
type: Object,
default:function(){
return {}
}
},
itemList: {
type: Array,
default:function(){
return []
}
}
},
created() {
this.cmps.forEach(c => {
c.content = require(`./custom/configs/${c.name}`).default;
});
},
methods:{
getFormId(itemId){
this.formIdArray = [];
Array.from(this.itemList,(item)=>{
if(item.compType === 'row'){
Array.from(item.columns,(column)=>{
Array.from(column.list,(col)=>{
if(col._id !== itemId){
this.formIdArray.push(col.id);
}
})
})
}else{
if(item._id !== itemId){
this.formIdArray.push(item.id);
}
}
})
return this.formIdArray;
}
}
}
</script>
<style scoped>
.field-box >>> .el-scrollbar__wrap{
overflow-x: hidden;
}
</style>

74
ruoyi-ui/src/components/FormDesigner/custom/configs/Switch.vue
View File

@ -1,74 +0,0 @@
<template>
<div v-show="props.compType === 'Switch'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="开启时颜色">
<el-color-picker v-model="props['active-color']"></el-color-picker>
</el-form-item>
<el-form-item label="关闭时颜色">
<el-color-picker v-model="props['inactive-color']"></el-color-picker>
</el-form-item>
<el-form-item label="开启时值">
<el-input class="input" v-model="props['active-value']"></el-input>
</el-form-item>
<el-form-item label="关闭时值">
<el-input class="input" v-model="props['inactive-value']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-switch v-model="props.value"></el-switch>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1';
},
handlerChangeDisStatus(val){
this.props.readOnly = !val;
},
handlerChangeReadStatus(val){
this.props.disabled = !val;
}
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

72
ruoyi-ui/src/components/FormDesigner/custom/configs/alert.vue
View File

@ -1,72 +0,0 @@
<template>
<div v-show="props.compType === 'alert'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.title"></el-input>
</el-form-item>
<el-form-item label="类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="error" value="error"/>
<el-option label="info" value="info"/>
</el-select>
</el-form-item>
<el-form-item label="辅助文字">
<el-input class="input" v-model="props.description"></el-input>
</el-form-item>
<el-form-item label="关闭">
<el-switch v-model="props.closable"></el-switch>
</el-form-item>
<el-form-item label="居中">
<el-switch v-model="props.center"></el-switch>
</el-form-item>
<el-form-item label="关闭按钮自定义文本">
<el-input class="input" v-model="props['close-text']"/>
</el-form-item>
<el-form-item label="显示图标">
<el-switch v-model="props['show-icon']"></el-switch>
</el-form-item>
<el-form-item label="主题">
<el-radio-group v-model="props.effect">
<el-radio-button label="light">light</el-radio-button>
<el-radio-button label="dark">dark</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
data(){
return {
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
}
},
mounted(){
}
}
</script>

81
ruoyi-ui/src/components/FormDesigner/custom/configs/barCode.vue
View File

@ -1,81 +0,0 @@
<template>
<div v-show="props.compType === 'barCode'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="占用列数" v-show="props.span">
<el-input-number v-model="props.span" :min="1" :max="24"></el-input-number>
</el-form-item>
<el-form-item label="条码值">
<el-input v-model="props.value"></el-input>
</el-form-item>
<el-form-item label="条码颜色" v-show="props.lineColor">
<el-color-picker v-model="props.lineColor" @change="handlerChangeBarCode"/>
</el-form-item>
<el-form-item label="背景颜色" v-show="props.background">
<el-color-picker v-model="props.background" @change="handlerChangeBackground"/>
</el-form-item>
<!--暂不启用-->
<!-- <el-form-item label="条码宽度">
<el-input-number v-model="props.width" :min="1" :max="10" :step="1"></el-input-number>
</el-form-item> -->
<el-form-item label="条码高度">
<el-input-number v-model="props.height" :min="10" :max="100" :step="1"></el-input-number>
</el-form-item>
<el-form-item label="显示值">
<el-switch v-model="props.displayValue"></el-switch>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
data(){
return {
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerChangeBarCode(val){
if(val == null){
this.props.lineColor = '#000';
}
},
handlerChangeBackground(val){
if(val == null){
this.props.background = '#fff';
}
}
},
mounted(){
}
}
</script>

93
ruoyi-ui/src/components/FormDesigner/custom/configs/button.vue
View File

@ -1,93 +0,0 @@
<template>
<div v-show="props.compType === 'button'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="按钮文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="占用列数" v-show="props.span">
<el-input-number v-model="props.span" :min="1" :max="24"></el-input-number>
</el-form-item>
<el-form-item label="按钮类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="primary" value="primary"/>
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="danger" value="danger"/>
<el-option label="info" value="info"/>
<el-option label="text" value="text"/>
</el-select>
</el-form-item>
<el-form-item label="按钮大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">大</el-radio-button>
<el-radio-button label="small">中</el-radio-button>
<el-radio-button label="mini">小</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="简单样式">
<el-switch v-model="props.plain"></el-switch>
</el-form-item>
<el-form-item label="圆角">
<el-switch v-model="props.round"></el-switch>
</el-form-item>
<el-form-item label="圆形">
<el-switch v-model="props.circle"></el-switch>
</el-form-item>
<el-form-item label="图标">
<el-input placeholder="请选择图标" readonly v-model="props.icon">
<template slot="append" >
<i class="el-icon-picture" style="cursor: pointer;" @click="handlerSelectIcon"/>
</template>
</el-input>
</el-form-item>
<icon-dialog v-model="props.icon" :visible.sync="iconDialogVisible"/>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"buttonConfig",
props:{
props:{}
},
data(){
return {
iconDialogVisible:false
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerSelectIcon(){
this.iconDialogVisible = true;
}
},
mounted(){
}
}
</script>

192
ruoyi-ui/src/components/FormDesigner/custom/configs/cascader.vue
View File

@ -1,192 +0,0 @@
<template>
<div v-show="props.compType === 'cascader'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<el-form-item label="宽度">
<el-input-number v-model="props.width" :min="0" :max="100"/>%
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" ></el-switch>
</el-form-item>
<el-form-item label="完整路径">
<el-switch v-model="props.props['show-all-levels']" ></el-switch>
</el-form-item>
<el-form-item label="分隔符">
<el-input v-model="props.props.separator" ></el-input>
</el-form-item>
<el-form-item label="搜索">
<el-switch v-model="props.props.filterable" ></el-switch>
</el-form-item>
<el-form-item label="展开方式">
<el-radio-group v-model="props.props.props.expandTrigger">
<el-radio-button label="click">点击</el-radio-button>
<el-radio-button label="hover">悬停</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.props.props.multiple"></el-switch>
</el-form-item>
<el-form-item label="任一级可选">
<el-switch v-model="props.props.props.checkStrictly"></el-switch>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="props.dataType ==='dynamic'">
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="显示标识">
<el-input v-model="props.props.props.label"></el-input>
</el-form-item>
<el-form-item label="值标识">
<el-input v-model="props.props.props.value"></el-input>
</el-form-item>
<el-form-item label="下级标识">
<el-input v-model="props.props.props.children"></el-input>
</el-form-item>
</div>
<div v-show="props.dataType ==='static'">
<el-form-item label="静态数据">
<el-button icon="el-icon-edit-outline" circle @click="handlerStaticData"></el-button>
</el-form-item>
<el-form-item label="省市区">
<el-checkbox v-model="props['china-area-data']" @change="handlerSetAreaData"/>
</el-form-item>
</div>
<!-- <el-form-item label="URL">
<el-input v-model="props.action"></el-input>
</el-form-item> -->
<el-dialog :visible.sync="staticDataVisible" width="70%"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
:center="true"
top="20px"
>
<codemirror v-model="staticOptions" :options="codeMirror"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlerSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {changeId} from '../mixin'
//引入 省市区 数据
import {areaData} from '../../utils/chinaAreaData';
import {codemirror} from 'vue-codemirror';
// 核心样式
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript'
const options = {
tabSize: 2, // 缩进格式
theme: 'dracula', // 主题，对应主题库 JS 需要提前引入
lineNumbers: true, // 显示行号
line: true,
styleActiveLine: true, // 高亮选中行
hintOptions: {
completeSingle: true // 当匹配只有一项的时候是否自动补全
}
}
/**
* input的配置项
*/
export default {
name:"cascaderConfig",
props:['props'],
components:{
codemirror
},
mixins:[changeId],
data(){
return {
staticDataVisible:false,
codeMirror:options,
staticOptions:'',
tempOptions:[]
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerStaticData(){
this.staticOptions = JSON.stringify(this.props.options,null,4);
this.staticDataVisible = true;
},
handlerSave(){
this.props.options = JSON.parse(this.staticOptions);
this.staticDataVisible = false;
},
handlerChangeDataType(value){
if(value === 'static'){
this.props.options = [];
this.props.options = this.tempOptions;
}else{
this.tempOptions = this.props.options;
this.props.options = [];
}
},
handlerSetAreaData(val){
if(val){
const areaoptions = areaData();
this.tempOptions = this.props.options;
this.props.options = areaoptions;
}else{
this.props.options = this.tempOptions;
}
}
},
mounted(){
},
watch:{
}
}
</script>
<style scoped>
</style>

203
ruoyi-ui/src/components/FormDesigner/custom/configs/checkbox.vue
View File

@ -1,203 +0,0 @@
<template>
<div v-show="props.compType === 'checkbox'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="垂直">
<el-switch v-model="props.vertical"></el-switch>
</el-form-item>
<el-form-item label="最小数量">
<el-input-number v-model="props.min" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="最大数量">
<el-input-number v-model="props.max" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="选项样式">
<el-radio-group v-model="props.optionType">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="button">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="显示边框">
<el-switch v-model="props.border"></el-switch>
</el-form-item>
<el-form-item label="选项尺寸" v-show="props.border||props.optionType ==='button'">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus('disabled')"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input"
:value="setDefaultValue(props.value)"
placeholder="请输入默认值"
@input="onDefaultValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show='props.dataType ==="static"'>
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div v-for="(item, index) in props.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div class="close-btn select-line-icon" @click="props.options.splice(index, 1)">
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show='props.dataType ==="dynamic"'>
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import {changeId} from '../mixin'
import draggable from "vuedraggable";
import { isNumberStr } from '../../utils/index'
/**
* input的配置项
*/
let vm = {
name:"checkboxConfig",
props:['props','getFormId'],
components:{
draggable
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = !val
},
handlerChangeReadStatus(val){
this.props.disabled = !val
},
setDefaultValue(val) {
if (Array.isArray(val)) {
return val.join(',')
}
if (['string', 'number'].indexOf(val) > -1) {
return val
}
if (typeof val === 'boolean') {
return `${val}`
}
return val
},
onDefaultValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
'value',
str.split(',').map(val => (isNumberStr(val) ? +val : val))
)
} else if (['true', 'false'].indexOf(str) > -1) {
// 布尔
this.$set(this.props, 'value', JSON.parse(str))
} else {
// 字符串和数字
this.$set(
this.props,
'value',
isNumberStr(str) ? +str : str
)
}
},
setOptionValue(item,val){
item.value = isNumberStr(val) ? +val : val
},
addSelectItem(){
this.props.options.push({
label: '',
value: ''
})
},
multipleChange(val){
// this.$set(this.props, 'value', val ? [] : '')
},
handlerChangeDataType(value){
if(value === 'static'){
this.props.options = [];
this.props.options = this.tempOptions;
}else{
this.tempOptions = this.props.options;
this.props.options = [];
}
}
},
mounted(){
},
watch: {
}
}
export default vm;
</script>
<style lang="scss" scoped>
.input{
width:75%
}
</style>

91
ruoyi-ui/src/components/FormDesigner/custom/configs/colorPicker.vue
View File

@ -1,91 +0,0 @@
<template>
<div v-show="props.compType === 'colorPicker'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="透明">
<el-switch v-model="props['show-alpha']"></el-switch>
</el-form-item>
<el-form-item label="默认颜色">
<el-color-picker v-model="props.value" />
</el-form-item>
<el-form-item label="大小">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">常规</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="预定义颜色">
<div class="select-item" v-for="(item,index) in props.predefine" :key="item">
<span class="el-color-picker__color"><!--style="background-color: rgb(64, 158, 255);"-->
<span class="el-color-picker__color-inner" :style="{'background-color':item}">
</span>
</span>
<div class="close-btn select-line-icon">
<i class="el-icon-remove-outline" @click="handlerRemoveColor(index)"/>
</div>
</div>
<br/>
<el-color-picker v-model="color" @change="handlerAddPreColor"></el-color-picker>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"buttonConfig",
props:{
props:{}
},
mixins:[changeId],
data(){
return {
color:'#409EFF',
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerAddPreColor(val){
console.log(val);
this.props.predefine.push(val);
console.log(this.props.predefine);
},
handlerRemoveColor(index){
this.props.predefine.splice(index,1);
}
},
mounted(){
}
}
</script>
<style scoped>
.el-color-picker__color{
position: relative;
display: block;
box-sizing: border-box;
border: 1px solid #999;
border-radius: 2px;
width:100px;
height:30px;
float:left;
margin-right:2px;
}
</style>

127
ruoyi-ui/src/components/FormDesigner/custom/configs/date.vue
View File

@ -1,127 +0,0 @@
<template>
<div v-show="props.compType === 'date'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="时间类型">
<el-select class="input" v-model="props.type" @change="handlerFormatChange">
<el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间格式">
<el-input class="input" :value="props.format" @change="handlerChangeValueFormat"/>
</el-form-item>
<el-form-item label="清空">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="分隔符" v-show="props.type === 'monthrange'||props.type === 'daterange'||props.type === 'datetimerange'">
<el-input v-model="props['range-separator']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-date-picker class="input" v-model="props.value" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"/>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
const dateType =[
{
label: '日(date)',
value: 'date'
},
{
label: '周(week)',
value: 'week'
},
{
label: '月(month)',
value: 'month'
},
{
label: '年(year)',
value: 'year'
},
{
label: '日期时间(datetime)',
value: 'datetime'
},
{
label: '月份范围',
value: 'monthrange'
},
{
label: '日期范围',
value: 'daterange'
},
{
label: '日期时间范围',
value: 'datetimerange'
}
];
const dateTimeFormat = {
date: 'yyyy-MM-dd',
week: 'yyyy 第 WW 周',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
daterange: 'yyyy-MM-dd',
monthrange: 'yyyy-MM',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
}
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
dateTypeOptions:dateType
}
},
methods:{
handlerFormatChange(val){
this.props.format = dateTimeFormat[val];
this.props['value-format'] = dateTimeFormat[val];
},
handlerChangeValueFormat(val){
this.props['value-format'] = val;
}
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

172
ruoyi-ui/src/components/FormDesigner/custom/configs/dialogList.vue
View File

@ -1,172 +0,0 @@
<template>
<div v-show="props.compType === 'dialogList'" class="dialogList">
<el-collapse v-model="activePanel" accordion>
<el-collapse-item title="基础设置" name="1">
<el-form-item label="ID" >
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题" >
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格" >
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="禁用" >
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值" >
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
<el-form-item label="请求地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="标题">
<el-input v-model="props.title"></el-input>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.multi"></el-switch>
</el-form-item>
<el-form-item label="显示序号">
<el-switch v-model="props.showIndex"></el-switch>
</el-form-item>
<el-form-item label="表格高度">
<el-input-number v-model="props.height" :step="10" :max="1500" :min="100"></el-input-number>
</el-form-item>
<el-form-item label="字段值">
<el-input v-model="props.dval"></el-input>
</el-form-item>
<el-form-item label="字段名称">
<el-input v-model="props.dlabel"></el-input>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="字段配置" name="2">
<el-table
:data="colOptions"
@row-dblclick="handlerDeleteRow"
>
<el-table-column property="label" label="字段" align="center" />
<el-table-column property="property" label="属性" align="center" />
<el-table-column property="width" label="宽度" align="center" width="70" />
<el-table-column label="显示">
</el-table-column>
</el-table>
<br/>
<el-alert title="字段和属性不能为空,请检查" v-show="alertShow" type="error" :closable="false"/>
<el-alert title="属性已存在请检查" v-show="propertyExistShow" type="error" :closable="false"/>
<br>
<el-form-item label="字段" label-width="60px">
<el-input v-model="dLabel" />
</el-form-item>
<el-form-item label="属性" label-width="60px">
<el-input v-model="dProperty"/>
</el-form-item>
<el-form-item label="宽度" label-width="60px">
<el-input-number v-model="dWidth" />
</el-form-item>
<el-form-item label="显示" label-width="60px">
<el-switch v-model="dShow" />
</el-form-item>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addColItem"
>
添加选项
</el-button>
</div>
</el-collapse-item>
<el-collapse-item title="数值联动" name="3">
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
/**
* text的配置项
*/
export default {
name:"textConfig",
props:{
props:{}
},
data(){
return {
activePanel:'1',
colOptions:[],
dLabel:'',
dProperty:'',
dWidth:150,
dShow:true,
alertShow:false,
propertyExistShow:false,
}
},
methods:{
addColItem(){
if(this.dLabel!==''&&this.dProperty!==''){
const existOptions = this.colOptions.find(item=>item.property === this.dProperty);
if( typeof existOptions === 'undefined'){
this.alertShow = false;
this.propertyExistShow = false;
const obj = {};
obj.index = this.colOptions.length;
obj.show = this.dShow;
obj.label = this.dLabel;
obj.property = this.dProperty;
obj.width = this.dWidth;
this.colOptions.push(obj);
this.resetFields();
}else{
this.propertyExistShow = true;
}
}else{
this.alertShow = true;
}
},
resetFields(){
this.dLabel = '';
this.dProperty = '';
this.dWidth = 150;
this.dShow = true;
},
handlerDeleteRow(row){
let index = this.colOptions.findIndex(item=>item.property==row.property);
this.colOptions.splice(index,1);
}
},
mounted() {
this.$nextTick(()=> {
this.colOptions = this.colOptions.concat(JSON.parse(this.props.colConf));
})
},
watch:{
'colOptions'(newVal){
this.props.colConf = JSON.stringify(newVal);
}
}
}
</script>
<style scoped>
.dialogList >>> .el-collapse-item__header{
background-color: #f4f6fc;
padding-left:10px;
}
.dialogList >>> .el-collapse-item__header{
height:35px;
}
</style>

39
ruoyi-ui/src/components/FormDesigner/custom/configs/divider.vue
View File

@ -1,39 +0,0 @@
<template>
<div v-show="props.compType === 'divider'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="文字大小">
<el-radio-group v-model="props['content-position']">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="center">中</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
</el-radio-group>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"dividerConfig",
props:{
props:{}
},
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>

44
ruoyi-ui/src/components/FormDesigner/custom/configs/dynamicTable.vue
View File

@ -1,44 +0,0 @@
<template>
<div v-show="props.compType === 'dynamicTable'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示新增按钮" label-width="120px">
<el-switch v-model="props.buttonAdd"></el-switch>
</el-form-item>
<el-form-item label="显示删除按钮" label-width="120px">
<el-switch v-model="props.buttonDel"></el-switch>
</el-form-item>
<el-form-item label="显示行号" label-width="120px">
<el-switch v-model="props.showIndex"></el-switch>
</el-form-item>
<el-form-item label="多选" label-width="120px">
<el-switch v-model="props.multiCheck"></el-switch>
</el-form-item>
<el-form-item label="合计行" label-width="120px">
<el-switch v-model="props['show-summary']"></el-switch>
</el-form-item>
<el-form-item label="合计文本" label-width="120px">
<el-input v-model="props['sum-text']"></el-input>
</el-form-item>
<el-form-item label="单位文本" label-width="120px">
<el-input v-model="props['summary-text']"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"dynamicTableConfig",
props:['props','getFormId'],
mixins:[changeId],
data(){
return {
}
},
methods:{
}
}
</script>

47
ruoyi-ui/src/components/FormDesigner/custom/configs/editor.vue
View File

@ -1,47 +0,0 @@
<template>
<div v-show="props.compType === 'editor'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerShowLabel"></el-switch>
</el-form-item>
<el-form-item label="标签文字" v-show="props.showLabel">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="标签长度" v-show="props.showLabel">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="验证最大字数">
<el-switch v-model="props.validateMaxText"></el-switch>
</el-form-item>
<el-form-item label="最大字数">
<el-input-number v-model="props.max" :min="100" ></el-input-number>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"editorConfig",
props:{
props:{}
},
mixins:[changeId],
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
}
}
}
</script>

54
ruoyi-ui/src/components/FormDesigner/custom/configs/html.vue
View File

@ -1,54 +0,0 @@
<!--废弃-->
<template>
<div v-show="props.compType === 'html'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID" labelWidth="40px">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文本" labelWidth="40px">
<!-- <el-input type="textarea" class="input" v-model="props.text" rows="12"></el-input> -->
<el-button icon="el-icon-edit-outline" circle @click="handlerEditMore"></el-button>
</el-form-item>
<el-dialog :visible.sync="editTextVisible" width="70%"
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
:center="true"
top="20px"
>
<fancy-editor v-model="props.text"/>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlerSave">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
/**
* text的配置项
*/
export default{
name:"htmlConfig",
props:{
props:{}
},
data(){
return {
editTextVisible:false
}
},
methods:{
handlerEditMore(){
this.editTextVisible = true;
},
handlerSave(){
this.editTextVisible = false;
}
}
}
</script>

174
ruoyi-ui/src/components/FormDesigner/custom/configs/input.vue
View File

@ -1,174 +0,0 @@
<template>
<div v-show="props.compType === 'input'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<!-- <el-form-item label="宽度">-->
<!-- <el-input-number v-model="props.width" :min="1" :max="100"/>%-->
<!-- </el-form-item>-->
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="前置图标">
<el-input placeholder="请选择图标" readonly v-model="props['prefix-icon']">
<template slot="append" >
<i class="el-icon-picture" style="cursor: pointer;" @click="handlerPrefixSelectIcon"/>
</template>
</el-input>
</el-form-item>
<el-form-item label="后置图标">
<el-input placeholder="请选择图标" readonly v-model="props['suffix-icon']">
<template slot="append" >
<i class="el-icon-picture" style="cursor: pointer;" @click="handlerSuffixSelectIcon"/>
</template>
</el-input>
</el-form-item>
<el-form-item label="前缀">
<el-input v-model="props.prepend">
</el-input>
</el-form-item>
<el-form-item label="后缀">
<el-input v-model="props.append">
</el-input>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
<el-divider>校验</el-divider>
<el-form-item label="验证类型">
<el-select v-model="props.rulesType" @change="handlerChangeRulesType">
<el-option label="无" value="default"/>
<el-option label="电话" value="phone"/>
<el-option label="邮箱" value="email"/>
<el-option label="纯数字" value="number"/>
<el-option label="身份证" value="idcard"/>
</el-select>
</el-form-item>
<div v-for="(item, index) in props.rules" :key="index" class="rule-item">
<el-input v-model="item.rule" placeholder="正则" size="small" />
<p/>
<el-input v-model="item.msg" placeholder="自定义提示" size="small" />
<div class="close-btn select-line-icon" @click="props.rules.splice(index, 1)">
<i class="el-icon-remove-outline close-icon" />
</div>
</div>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addRuleItem"
>
添加选项
</el-button>
</div>
<icon-dialog v-model="props['suffix-icon']" :visible.sync="iconDialogVisible_suffix"/>
<icon-dialog v-model="props['prefix-icon']" :visible.sync="iconDialogVisible_prefix"/>
</div>
</template>
<script>
import {changeId} from '../mixin'
import iconDialog from '../../iconDialog';
const defaultRules={
'phone':{'rule':'0?(13|14|15|17|18|19)[0-9]{9}','msg':'您输入的电话号码不符合规则'},
'email':{'rule':'\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}','msg':'您输入的邮件地址不符合规则'},
'number':{'rule':'^[0-9]*$','msg':'您输入的内容不符合纯数字规则'},
'idcard':{'rule':'\\d{17}[\\d|x]|\\d{15}','msg':'您输入的身份证号码不符合规则'}
}
/**
* input的配置项
*/
export default {
name:"inputConfig",
props:['props','getFormId'],
components:{
iconDialog
},
mixins:[changeId],
data(){
return {
val:'',
iconDialogVisible_suffix:false,
iconDialogVisible_prefix:false
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerSuffixSelectIcon(){
this.iconDialogVisible_suffix = true;
},
handlerPrefixSelectIcon(){
this.iconDialogVisible_prefix = true;
},
addRuleItem(){
this.props.rules.push({
rule: '',
msg: ''
})
},
handlerChangeRulesType(val){
const obj = defaultRules[val];
this.props.rules.push({
rule: obj.rule,
msg: obj.msg
})
}
},
mounted(){
},
watch:{
}
}
</script>
<style scoped>
.input{
width:75%
}
.rule-item{
padding-top: 5px;
padding-bottom: 5px;
}
.close-btn{
text-align: center;
}
.close-icon:hover{
cursor: pointer;
}
.close-btn >>> .el-icon-remove-outline{
color:"red"
}
</style>

83
ruoyi-ui/src/components/FormDesigner/custom/configs/inputNumber.vue
View File

@ -1,83 +0,0 @@
<template>
<div v-show="props.compType === 'inputNumber'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="最小值">
<el-input-number v-model="props.min"></el-input-number>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max"></el-input-number>
</el-form-item>
<el-form-item label="步长">
<el-input-number v-model="props.step"></el-input-number>
</el-form-item>
<el-form-item label="精度">
<el-input-number v-model="props.precision" :min="0" :max="10"></el-input-number>
</el-form-item>
<el-form-item label="按钮位置">
<el-radio-group v-model="props['controls-position']">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="right">右侧</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus('disabled')"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = val?false:true
},
handlerChangeReadStatus(val){
this.props.disabled = val?false:true
},
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

68
ruoyi-ui/src/components/FormDesigner/custom/configs/link.vue
View File

@ -1,68 +0,0 @@
<template>
<div v-show="props.compType === 'link'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="链接文字">
<el-input class="input" v-model="props.text"></el-input>
</el-form-item>
<el-form-item label="类型" >
<el-select v-model="props.type" placeholder="请选择">
<el-option label="primary" value="primary"/>
<el-option label="success" value="success"/>
<el-option label="warning" value="warning"/>
<el-option label="danger" value="danger"/>
<el-option label="info" value="info"/>
</el-select>
</el-form-item>
<el-form-item label="url">
<el-input class="input" v-model="props.href"></el-input>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="新窗口">
<el-switch v-model="isNewWindow" @change="handlerChangeTargetValue"></el-switch>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"buttonConfig",
props:{
props:{}
},
components:{
},
mixins:[changeId],
data(){
return {
isNewWindow:true
}
},
methods:{
handlerShowLabel(val){
if(val){
this.props.labelWidth = 80;
}else{
this.props.labelWidth = 0;
}
},
handlerChangeTargetValue(val){
if(val){
this.props.target = '_blank';
}else{
this.props.target = '_self';
}
}
},
mounted(){
}
}
</script>

198
ruoyi-ui/src/components/FormDesigner/custom/configs/radio.vue
View File

@ -1,198 +0,0 @@
<template>
<div v-show="props.compType === 'radio'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="垂直">
<el-switch v-model="props.vertical"></el-switch>
</el-form-item>
<el-form-item label="选项样式">
<el-radio-group v-model="props.optionType">
<el-radio-button label="default">默认</el-radio-button>
<el-radio-button label="button">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="显示边框">
<el-switch v-model="props.border"></el-switch>
</el-form-item>
<el-form-item label="大小" v-show="props.border||props.optionType ==='button'">
<el-radio-group v-model="props.size">
<el-radio-button label="medium">正常</el-radio-button>
<el-radio-button label="small">略小</el-radio-button>
<el-radio-button label="mini">迷你</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus('disabled')"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input"
:value="setDefaultValue(props.value)"
placeholder="请输入默认值"
@input="onDefaultValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show='props.dataType ==="static"'>
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div v-for="(item, index) in props.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div class="close-btn select-line-icon" @click="props.options.splice(index, 1)">
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show='props.dataType ==="dynamic"'>
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import {changeId} from '../mixin'
import draggable from "vuedraggable";
import { isNumberStr } from '../../utils/index'
/**
* input的配置项
*/
let vm = {
name:"inputConfig",
props:['props','getFormId'],
components:{
draggable
},
mixins:[changeId],
data(){
return {
val:123
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = !val
},
handlerChangeReadStatus(val){
this.props.disabled = !val
},
setDefaultValue(val) {
if (Array.isArray(val)) {
return val.join(',')
}
if (['string', 'number'].indexOf(val) > -1) {
return val
}
if (typeof val === 'boolean') {
return `${val}`
}
return val
},
onDefaultValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
'value',
str.split(',').map(val => (isNumberStr(val) ? +val : val))
)
} else if (['true', 'false'].indexOf(str) > -1) {
// 布尔
this.$set(this.props, 'value', JSON.parse(str))
} else {
// 字符串和数字
this.$set(
this.props,
'value',
isNumberStr(str) ? +str : str
)
}
},
setOptionValue(item,val){
item.value = isNumberStr(val) ? +val : val
},
addSelectItem(){
this.props.options.push({
label: '',
value: ''
})
},
multipleChange(val){
// this.$set(this.props, 'value', val ? [] : '')
},
handlerChangeDataType(value){
if(value === 'static'){
this.props.options = [];
this.props.options = this.tempOptions;
}else{
this.tempOptions = this.props.options;
this.props.options = [];
}
}
},
mounted(){
},
watch: {
}
}
export default vm;
</script>
<style lang="scss" scoped>
.input{
width:75%
}
</style>

68
ruoyi-ui/src/components/FormDesigner/custom/configs/rate.vue
View File

@ -1,68 +0,0 @@
<template>
<div v-show="props.compType === 'rate'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="允许半选">
<el-switch v-model="props['allow-half']"></el-switch>
</el-form-item>
<el-form-item label="显示分数">
<el-switch v-model="props['show-score']"></el-switch>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max"></el-input-number>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"rate",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

55
ruoyi-ui/src/components/FormDesigner/custom/configs/row.vue
View File

@ -1,55 +0,0 @@
<!--后期支持flex布局-->
<template>
<div v-show="props.compType === 'row'">
<el-form-item label="栅格间隔">
<el-input-number size="small" v-model="props.gutter" :min="0" :max="100"/>
</el-form-item>
<el-divider>列配置项</el-divider>
<div v-for="(item, index) in props.columns" :key="index" class="select-item">
<div class="select-line-icon">
<i class="el-icon-s-operation" />
</div>
<el-input-number
size="normal"
v-model="item.span"
:min="1" :max="24"
/>
<div class="close-btn select-line-icon" @click="props.columns.splice(index,1)">
<i class="el-icon-remove-outline" />
</div>
</div>
<div style="margin-left: 30px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="handlerAddCol"
>
添加选项
</el-button>
</div>
</div>
</template>
<script>
export default {
name:"rowConfig",
props:['props','getFormId'],
data(){
return {
}
},
methods:{
handlerAddCol(){
const colIndex = this.props.columns+1;
this.props.columns.push({
index:colIndex,
span:12,
list:[]
})
},
},
mounted(){
}
}
</script>

179
ruoyi-ui/src/components/FormDesigner/custom/configs/select.vue
View File

@ -1,179 +0,0 @@
<template>
<div v-show="props.compType === 'select'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清除">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="多选">
<el-switch v-model="props.multiple" @change="multipleChange"></el-switch>
</el-form-item>
<el-form-item label="折叠" v-show="props.multiple">
<el-switch v-model="props['collapse-tags']" ></el-switch>
</el-form-item>
<el-form-item label="搜索">
<el-switch v-model="props.filterable"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input"
:value="setValue(props.value)"
placeholder="请输入默认值"
@input="onValueInput"
/>
</el-form-item>
<el-form-item label="数据类型">
<el-radio-group v-model="props.dataType" @change="handlerChangeDataType">
<el-radio-button label="static">静态数据</el-radio-button>
<el-radio-button label="dynamic">动态数据</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show='props.dataType ==="static"'>
<el-divider>选项</el-divider>
<draggable :list="props.options" handle=".option-drag">
<div v-for="(item, index) in props.options" :key="index" class="select-item">
<div class="select-line-icon option-drag">
<i class="el-icon-s-operation" />
</div>
<el-input v-model="item.label" placeholder="选项名" size="small" />
<el-input
placeholder="选项值"
size="small"
:value="item.value"
@input="setOptionValue(item, $event)"
/>
<div class="close-btn select-line-icon" @click="props.options.splice(index, 1)">
<i class="el-icon-remove-outline" />
</div>
</div>
</draggable>
<div style="margin-left: 20px;">
<el-button
style="padding-bottom: 0"
icon="el-icon-circle-plus-outline"
type="text"
@click="addSelectItem"
>
添加选项
</el-button>
</div>
</div>
<div v-show='props.dataType ==="dynamic"'>
<el-form-item label="地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
import {changeId} from '../mixin'
import draggable from "vuedraggable";
import { isNumberStr } from '../../utils/index'
export default {
name:"inputConfig",
props:['props','getFormId'],
components:{
draggable
},
mixins:[changeId],
data(){
return {
tempOptions:[]
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
setValue(val) {
if (Array.isArray(val)) {
return val.join(',')
}
if (['string', 'number'].indexOf(val) > -1) {
return val
}
if (typeof val === 'boolean') {
return `${val}`
}
return val
},
onValueInput(str) {
if (Array.isArray(this.props.value)) {
// 数组
this.$set(
this.props,
'value',
str.split(',').map(val => (isNumberStr(val) ? +val : val))
)
} else if (['true', 'false'].indexOf(str) > -1) {
// 布尔
this.$set(this.props, 'value', JSON.parse(str))
} else {
// 字符串和数字
this.$set(
this.props,
'value',
isNumberStr(str) ? +str : str
)
}
},
setOptionValue(item,val){
item.value = isNumberStr(val) ? +val : val
},
addSelectItem(){
this.props.options.push({
label: '',
value: ''
})
},
multipleChange(val){
this.$set(this.props, 'value', val ? [] : '')
},
handlerChangeDataType(value){
if(value === 'static'){
this.props.options = [];
this.props.options = this.tempOptions;
}else{
this.tempOptions = this.props.options;
this.props.options = [];
}
}
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
.input{
width:75%
}
</style>

78
ruoyi-ui/src/components/FormDesigner/custom/configs/slider.vue
View File

@ -1,78 +0,0 @@
<template>
<div v-show="props.compType === 'slider'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="最小值">
<el-input-number v-model="props.min" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="最大值">
<el-input-number v-model="props.max" placeholder="字符长度"/>
</el-form-item>
<el-form-item label="步长">
<el-input-number v-model="props.step"></el-input-number>
</el-form-item>
<el-form-item label="范围选择">
<el-switch v-model="props.range"></el-switch>
</el-form-item>
<el-form-item label="显示断点">
<el-switch v-model="props['show-stops']"></el-switch>
</el-form-item>
<el-form-item label="显示提示消息">
<el-switch v-model="props['show-tooltip']"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

40
ruoyi-ui/src/components/FormDesigner/custom/configs/table.vue
View File

@ -1,40 +0,0 @@
<template>
<div v-show="props.compType === 'table'">
<el-form-item label="ID" >
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="单元格样式">
<el-input class="input" v-model="props.tdStyle"></el-input>
</el-form-item>
<el-form-item label="表格宽度">
<el-inputNumber class="input" :min="0" :max="500" v-model="props.width"></el-inputNumber>
</el-form-item>
<el-form-item label="行高">
<el-inputNumber class="input" :min="0" :max="1500" :step="5" v-model="props.height"></el-inputNumber>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
/**
* input的配置项
*/
export default {
name:"inputConfig",
props:['props','getFormId'],
components:{
},
mixins:[changeId],
data(){
return {
}
},
methods:{
}
}
</script>
<style scoped>
</style>

28
ruoyi-ui/src/components/FormDesigner/custom/configs/tdItem.vue
View File

@ -1,28 +0,0 @@
<template>
<div v-show="props.compType === 'tdItem'">
<el-form-item label="单元格背景">
<el-color-picker v-model="props.style.background" :predefine="predefineColors"/>
</el-form-item>
<el-form-item label="表格宽度(%)">
<el-inputNumber class="input" :min="0" :max="100" v-model="props.style.width"/>
</el-form-item>
</div>
</template>
<script>
/**
* input的配置项
*/
export default {
name:"tdItemConfig",
props:['props'],
data(){
return {
predefineColors: [
'#F6F6F6'
]
}
},
methods:{
}
}
</script>

51
ruoyi-ui/src/components/FormDesigner/custom/configs/text.vue
View File

@ -1,51 +0,0 @@
<template>
<div v-show="props.compType === 'text'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID" labelWidth="40px">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="文本" labelWidth="40px">
<el-input type="textarea" class="input" v-model="props.text" rows="12" ></el-input>
</el-form-item>
<el-form-item label="颜色" labelWidth="40px">
<el-color-picker v-model="props.color" />
</el-form-item>
<el-form-item label="布局" labelWidth="40px">
<el-radio-group v-model="props.align">
<el-radio-button label="left">左</el-radio-button>
<el-radio-button label="center">中</el-radio-button>
<el-radio-button label="right">右</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="大小" labelWidth="40px">
<el-input-number v-model="props.size" :min="10" :max="50" @change="handlerChangeSize"></el-input-number>
</el-form-item>
<el-form-item label="加粗" labelWidth="40px">
<el-input-number v-model="props.bold" :min="100" :max="800" :step="100" @change="handlerChangeBold"></el-input-number>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"textConfig",
props:['props'],
data(){
return{
}
},
mixins:[changeId],
methods:{
handlerChangeSize(val){
this.props.size = val+'';
},
handlerChangeBold(val){
this.props.bold = val+'';
}
}
}
</script>

83
ruoyi-ui/src/components/FormDesigner/custom/configs/textarea.vue
View File

@ -1,83 +0,0 @@
<template>
<div v-show="props.compType === 'textarea'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="输入框行数">
<el-input-number v-model="props.rows" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="长度限制">
<el-input-number v-model="props.maxlength" placeholder="字符长度"/>
</el-form-item>
<el-form-item label="输入统计">
<el-switch v-model="props['show-word-limit']"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled" @change="handlerChangeDisStatus"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly" @change="handlerChangeReadStatus"></el-switch>
</el-form-item>
<el-form-item label="默认值">
<el-input class="input" v-model="props.value"></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"inputConfig",
props:['props','getFormId'],
components: {
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
},
handlerChangeDisStatus(val){
this.props.readOnly = !val
},
handlerChangeReadStatus(val){
this.props.disabled = !val
}
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

74
ruoyi-ui/src/components/FormDesigner/custom/configs/time.vue
View File

@ -1,74 +0,0 @@
<template>
<div v-show="props.compType === 'time'">
<!-- <el-form-item label="字段名">
<el-input class="input" v-model="props"></el-input>
</el-form-item> -->
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId"></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel"></el-switch>
</el-form-item>
<el-form-item label="显示标签">
<el-input class="input" v-model="props.placeholder"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="清空">
<el-switch v-model="props.clearable"></el-switch>
</el-form-item>
<el-form-item label="只读">
<el-switch v-model="props.readonly"></el-switch>
</el-form-item>
<el-form-item label="禁用">
<el-switch v-model="props.disabled"></el-switch>
</el-form-item>
<el-form-item label="范围选择">
<el-switch v-model="props['is-range']"></el-switch>
</el-form-item>
<el-form-item label="分隔符" v-show="props['is-range']">
<el-input v-model="props['range-separator']"></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-time-picker class="input" v-model="props.value" placeholder="选择默认时间"/>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"timeConfig",
components: {
},
mixins:[changeId],
props:['props','getFormId'],
data(){
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

95
ruoyi-ui/src/components/FormDesigner/custom/configs/upload.vue
View File

@ -1,95 +0,0 @@
<template>
<div v-show="props.compType === 'upload'">
<el-form-item label="ID">
<el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
<el-input class="input" v-model="props.id" @change="handlerChangeId" ></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="标题">
<el-input class="input" v-model="props.label"></el-input>
</el-form-item>
<el-form-item label="栅格">
<el-input-number v-model="props.span" :min="1" :max="24"/>
</el-form-item>
<el-form-item label="宽度%">
<el-input-number v-model="props.width" :min="1" :max="100"/>
</el-form-item>
<el-form-item label="提示符">
<el-input class="input" v-model="props.placeholder" placeholder="请输入提示符"/>
</el-form-item>
<!-- <el-form-item label="表单栅格">
<el-slider class="input" v-model="props.span" :max="24" :min="1" :marks="{12:''}"></el-slider>
</el-form-item> -->
<el-form-item label="栅格间隔">
<el-input-number v-model="props.gutter" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="标签宽度">
<el-input-number v-model="props.labelWidth" :min="1" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="显示标签">
<el-switch v-model="props.showLabel" @change="handlerChangeLabel"></el-switch>
</el-form-item>
<el-form-item label="请求地址">
<el-input v-model="props.action"></el-input>
</el-form-item>
<el-form-item label="大小(MB)">
<el-input-number v-model="props.fileSize" :min="1" :max="10000" :step="10"/>
</el-form-item>
<el-form-item label="允许文件类型">
<el-input v-model="props.accept"></el-input>
</el-form-item>
<el-form-item label="必填">
<el-switch v-model="props.required"></el-switch>
</el-form-item>
<el-form-item label="多文件上传">
<el-switch v-model="props.multiple"></el-switch>
</el-form-item>
<el-form-item label="显示文件列表">
<el-switch v-model="props['show-file-list']"></el-switch>
</el-form-item>
<el-form-item label="显示类型">
<el-radio-group v-model="props['list-type']" >
<el-radio-button label="text">普通</el-radio-button>
<!-- <el-radio-button label="picture">照片</el-radio-button> -->
<el-radio-button label="picture-card">照片</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="按钮文字">
<el-input v-model="props.buttonText"></el-input>
</el-form-item>
<el-form-item label="显示提示">
<el-switch v-model="props.showTip"></el-switch>
</el-form-item>
<el-form-item label="提示内容" v-show="props.showTip">
<el-input v-model="props.tips" ></el-input>
</el-form-item>
</div>
</template>
<script>
import {changeId} from '../mixin'
export default {
name:"uploadConfig",
props:['props'],
components:{
},
mixins:[changeId],
data(){
return {
}
},
methods:{
handlerChangeLabel(val){
this.props.labelWidth = val?'80':'1'
}
},
mounted(){
},
watch:{
}
}
</script>
<style scoped>
.input{
width:75%
}
</style>

52
ruoyi-ui/src/components/FormDesigner/custom/formConf.js
View File

@ -1,52 +0,0 @@
/**
* 表单配置
*/
const formConf = {
version:'1.10',
formRef: 'elForm',
formModel: 'form',
rules: 'rules',
size: 'medium',
labelPosition: 'right',
labelWidth: 80,
formRules: 'rules',
gutter: 15,
disabled: false,
dynamicTableAllowed:true
};
export default formConf;
//动态表单允许放入的组件
export const dynamicTableAllowedItems = [
'input',
'select',
'radio',
'checkbox',
'Switch',
'inputNumber',
'textarea',
'slider',
'rate',
'date',
'time'
];
//row允许放入的items
export const rowAllowedItems = [
'input',
'input',
'select',
'radio',
'checkbox',
'Switch',
'inputNumber',
'textarea',
'slider',
'rate',
'date',
'time'
]
//table允许放入的items
export const tableAllowedItems = [
'row','dynamicTable'
]

106
ruoyi-ui/src/components/FormDesigner/custom/formDraw.js
View File

@ -1,106 +0,0 @@
//初始化data里面的数据（1、默认为空，2、之前存在的数据。。）
let itemDatas = {}
export function datas(){
itemDatas = {};
let self = this;
this.itemList.forEach(val => {
if(val.layout === 'rowItem'){ //row布局
dataResolveRowItem(val); //解析row布局
}else if(val.layout === 'dynamicItem'){ //动态表单布局
let obj =dataResolveDynamicItem(val);
let array = [];
array.push(obj);
itemDatas[val.id] = array;
}else if(val.layout === 'tableItem'){ //表格布局
dataResolveTableItem(val);
}else{ //表单
dataResolveColItem(val);
}
})
Object.keys(itemDatas).forEach(key =>{
this.$set(this.form, key, itemDatas[key]);
})
}
function dataResolveRowItem(val){
const columns = val.columns;
columns.forEach(v =>{
v.list.forEach(item =>{
if(item.layout==='dynamicItem'){
let obj =dataResolveDynamicItem(item);
let array = [];
array.push(obj);
itemDatas[item.id] = array;
}else{
dataResolveColItem(item);
}
})
})
}
function dataResolveDynamicItem(val){
const columns = val.columns;
let obj ={};
columns.forEach(v =>{
const key = v.id;
obj[key] = v.value;
})
return obj;
}
/*
遍历表格实现组件渲染
*/
function dataResolveTableItem(val){
val.layoutArray.map((tr)=>{
tr.map((td)=>{
td.columns.map(item=>dataResolveColItem(item));
})
})
}
function dataResolveColItem(val){
itemDatas[val.id] = val.value;
}
export function fillDatas(jsonValue){
const self = this;
Object.keys(jsonValue).forEach(key =>{
if(typeof(self.form[key]) === 'string'||typeof(self.form[key]) === 'number'){
self.$set(self.form, key,jsonValue[key]);
}else if(self.form[key] instanceof Array){//有可能是多选或者是明细表
//判断是否数组中为对象
if(jsonValue[key].length>0){
const firsValue = jsonValue[key][0];//获取第一个对象判断是什么类型
if(typeof(firsValue) === 'string'||typeof(firsValue) === 'number'){
self.$set(self.form, key,jsonValue[key]);
}else{ //明细表数组
const arrayData = jsonValue[key];
//self.form[key] = [];
arrayData.forEach((v,index)=>{
const newV = JSON.parse(JSON.stringify(v));
self.$set(self.form[key],index,newV);
})
}
}
}
})
//console.log(this.form);
}
export function addRow(element){
let obj =dataResolveDynamicItem(element);
this.form[element.id].push(obj);
}
export function deleteRow(scope,element){
this.form[element.id].splice(scope.$index,1);
}
export function batchDeleteRow(indexs,element){
for(let i =0;i<indexs.length;i++){
const index = indexs[i];
this.form[element.id].splice(index,1);
}
}

34
ruoyi-ui/src/components/FormDesigner/custom/itemList.js
View File

@ -1,34 +0,0 @@
import {input} from "./items/input";
import {select} from "./items/select";
import {radio} from "./items/radio";
import {checkbox} from "./items/checkbox";
import {Switch} from "./items/Switch";
import {inputNumber} from "./items/inputNumber";
import {textarea} from "./items/textarea";
import {slider} from "./items/slider";
import {rate} from "./items/rate";
import {date} from "./items/date";
import {time} from "./items/time";
import {editor} from "./items/editor";
import {colorPicker} from "./items/colorPicker";
import {cascader} from "./items/cascader";
import {upload} from "./items/upload";
import {dialogList} from "./items/dialogList";
import {dynamicTable} from "./items/dynamicTable";
import {button} from "./items/button";
import {divider} from "./items/divider";
import {row} from "./items/row";
import {table} from "./items/table";
import {alert} from "./items/alert";
import {link} from "./items/link";
import {text} from "./items/text";
import {barCode} from "./items/barCode";
export const formItems = [
input,select,radio,checkbox,Switch,inputNumber,textarea,slider
,rate,date,time,editor,colorPicker,cascader,upload,dialogList,barCode,dynamicTable
];
export const assistFormItems = [button,divider,alert,link,text];
export const layoutFormItems = [row,table];

32
ruoyi-ui/src/components/FormDesigner/custom/items/Switch.js
View File

@ -1,32 +0,0 @@
/**
* 开关，switch是js关键字，所以s大写，避过
*/
export let Switch = {
id:'',
_id:'',
compType: 'Switch',
ele: 'el-switch',
//控件名称(左侧显示)
compName:'开关',
label: '开关',
//图标
compIcon:'switch',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
//栅格间隔
gutter:15,
labelWidth: '80',
value: false,
rules:[],
span: 24,
disabled: false,
required: false,
'active-color': '#409EFF',
'inactive-color': '#DCDFE6',
'active-value': 'true',
'inactive-value': 'false'
}

36
ruoyi-ui/src/components/FormDesigner/custom/items/alert.js
View File

@ -1,36 +0,0 @@
/**
* 警告
*/
export let alert = {
id:'',
_id:'',
compType: 'alert',
ele: 'el-alert',
compName:'警告',
compIcon:'alert',
//展示表单的模式
viewType:'component',
config: true,
form:false, //是否表单组件
// 控件左侧label内容
showLabel:false,
labelWidth: '0',
span:24,
//标题
title:'alert',
//主题
type:'success',
//辅助文字
description:'form-designer',
//是否可关闭
closable:true,
//是否居中
center:false,
//关闭的按钮
'close-text':'',
//是否显示图标
'show-icon':false,
//主题 light/dark
effect:'light'
}

30
ruoyi-ui/src/components/FormDesigner/custom/items/barCode.js
View File

@ -1,30 +0,0 @@
/**
* 警告
*/
export let barCode = {
id:'',
_id:'',
compType: 'barCode',
ele: 'fancy-bar-code',
compName:'条码',
compIcon:'barcode',
//展示表单的模式
viewType:'component',
config: true,
form:true, //是否表单组件
// 控件左侧label内容
showLabel:false,
labelWidth: '0',
label:'条形码',
span:24,
value:'formDesigner',
format:'CODE128',
lineColor:'#000',
background:'#fff',
width:5,
height:30,
fontSize:12,
displayValue:true
}

42
ruoyi-ui/src/components/FormDesigner/custom/items/button.js
View File

@ -1,42 +0,0 @@
/**
* 单行&多行输入框
*/
export let button = {
id:'',
_id:'',
compType: 'button',
ele: 'el-button',
//控件名称(左侧显示)
compName:'按钮',
//图标
compIcon:'button',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:false,
label: '单行文本',
labelWidth: 0,
//是否可以禁用
disabled:false,
//大小，medium / small / mini
size:'medium',
//primary / success / warning / danger / info / text
type:'primary',
span:24,
text:'按钮',
//简单
plain:false,
//圆角
round:false,
//圆形
circle:false,
//加载中
loading:false,
//禁用
disabled:false,
//图标
icon:'',
}

73
ruoyi-ui/src/components/FormDesigner/custom/items/cascader.js
View File

@ -1,73 +0,0 @@
/**
* 级联选择器
*/
export let cascader = {
id:'',
_id:'',
compType: 'cascader',
ele: 'el-cascader',
//控件名称(左侧显示)
compName:'级联选择器',
//图标
compIcon:'cascader',
//展示表单的模式
viewType:'component',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '级联选择',
labelWidth: '80',
placeholder: '请选择',
//栅格间隔
gutter:15,
//默认栅格
span:24,
value: [],
//大小
size:"medium",
//禁用
disabled:false,
//数据类型 static，dynamic
dataType:'static',
'china-area-data':false,
//请求地址
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/cascaderOptions',
props:{
//清空
clearable:true,
//分隔符
separator:"/",
//显示完整路径
'show-all-levels':false,
filterable:false,
props: {
//触发方式,hover
expandTrigger:'click',
//多选
multiple:false,
//可选任一级
checkStrictly:false,
label: 'label',
value: 'value',
children: 'children'
}
},
options:[
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}]
}]
}
]
}

62
ruoyi-ui/src/components/FormDesigner/custom/items/checkbox.js
View File

@ -1,62 +0,0 @@
// export default (_self, h) => {
// return [
// h("Input", {})
// ];
// };
export let checkbox = {
id:'',
_id:'',
compType: 'checkbox',
//控件名称
compName:'复选框',
//element标签
ele: 'el-checkbox-group',
//图标
compIcon:'checkbox',
//展示表单的模式
viewType:'component',
// 是否可配置
config: true,
// 控件左侧label内容
label: '复选框',
placeholder: '请选择',
// 最大长度
maxLength: 50,
//表单栅格
span:24,
//栅格间隔
gutter:'15',
//标签宽度
labelWidth:80,
//显示标签
showLabel:true,
//必填
required:false,
//禁用
disabled:false,
//是否有边框
border:false,
//选项是否垂直
vertical:false,
//选项大小
size:'medium',
//是否是按钮
optionType:'default',
//选项列表
options:[{
label: '选项一',
value: 1
}, {
label: '选项二',
value: 2
}],
//数据类型 static，dynamic
dataType:'static',
//默认渲染的数据
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/options',
value: [],
rules:[],
// 验证错误提示信息
ruleError: '该字段不能为空'
}

37
ruoyi-ui/src/components/FormDesigner/custom/items/colorPicker.js
View File

@ -1,37 +0,0 @@
/**
* 单行&多行输入框
*/
export let colorPicker = {
id:'',
_id:'',
compType: 'colorPicker',
ele: 'el-color-picker',
//控件名称(左侧显示)
compName:'颜色选择器',
//图标
compIcon:'colorpicker',
//展示表单的模式
viewType:'component',
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:false,
label: '单行文本',
labelWidth: 0,
//是否可以禁用
disabled:false,
//大小，medium / small / mini
size:'medium',
//primary / success / warning / danger / info / text
type:'primary',
span:24,
//选择透明度
'show-alpha':false,
//格式
'color-format':'hex',
//预定义颜色
predefine:[],
value:'#409EFF'
}

44
ruoyi-ui/src/components/FormDesigner/custom/items/date.js
View File

@ -1,44 +0,0 @@
/**
* 单行&多行输入框
*/
export let date = {
id:'',
_id:'',
compType: 'date',
ele: 'el-date-picker',
//控件名称(左侧显示)
compName:'日期',
//图标
compIcon:'date',
//展示表单的模式
viewType:'text',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '日期',
labelWidth: '80',
placeholder: '请选择',
// 是否必填
required: false,
// 最大长度
maxLength: 50,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//是否可清空
clearable:true,
disabled:false,
readonly:false,
value: '',
rules:[],
//时间类型
type:'date',
format:'yyyy-MM-dd',
'value-format':'yyyy-MM-dd',
'range-separator':'-',
'start-placeholder':'开始日期',
'end-placeholder':'结束日期'
}

50
ruoyi-ui/src/components/FormDesigner/custom/items/dialogList.js
View File

@ -1,50 +0,0 @@
/**
* dialogList
*/
export let dialogList = {
id:'',
_id:'',
compType: 'dialogList',
ele: 'fancy-dialog-list',
//控件名称(左侧显示)
compName:'选择列表',
//图标
compIcon:'dialog',
//展示表单的模式
viewType:'component',
// 是否可配置
//暂时默认为true，无法更改，后期考虑某些时候无法配置
config: true,
// 控件左侧label内容
showLabel:true,
label: '选择列表',
labelWidth: '80',
showLabel: true,
labelWidth: 80,
// 是否必填
required: false,
//栅格间隔
gutter:15,
//默认栅格
span:24,
//禁用
disabled:false,
//标题
title:'请选择',
//多选
multi:false,
//显示序号
showIndex:false,
//请求地址
action:'https://www.fastmock.site/mock/51715c0157535b99010bde55f2df33c8/formDesigner/api/dialogListData',
//字段配置
colConf:'[{"index":0,"label":"姓名","property":"name","width":"250","show":true},{"index":1,"label":"日期","property":"date","width":"150","show":true},{"index":2,"label":"地址","property":"address","width":"","show":true}]',
// //值
dval:'id',
//字段
dlabel:'name',
height:500,
value: ''
}

21
ruoyi-ui/src/components/FormDesigner/custom/items/divider.js
View File

@ -1,21 +0,0 @@
/**
* 分割线
*/
export let divider = {
id:'',
_id:'',
compType: 'divider',
ele: 'el-divider',
compName:'分割线',
compIcon:'divider',
//展示表单的模式
viewType:'component',
config: true,
form:false,
//内容坐标 left|center|right
'content-position':'left',
text:'',
// 控件左侧label内容
showLabel:false,
labelWidth: '0'
}

Some files were not shown because too many files have changed in this diff Show More