projects/mesxc-lb #283
@ -7,5 +7,7 @@
|
||||
"vueIndentScriptAndStyle": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
"trailingComma": "es5",
|
||||
"jsxBracketSameLine": true,
|
||||
"singleAttributePerLine": true
|
||||
}
|
||||
|
@ -1,9 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getActivityList(query) {
|
||||
return request({
|
||||
url: '/bpm/activity/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,24 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getProcessDefinitionPage(query) {
|
||||
return request({
|
||||
url: '/bpm/process-definition/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getProcessDefinitionList(query) {
|
||||
return request({
|
||||
url: '/bpm/process-definition/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getProcessDefinitionBpmnXML(id) {
|
||||
return request({
|
||||
url: '/bpm/process-definition/get-bpmn-xml?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建工作流的表单定义
|
||||
export function createForm(data) {
|
||||
return request({
|
||||
url: '/bpm/form/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新工作流的表单定义
|
||||
export function updateForm(data) {
|
||||
return request({
|
||||
url: '/bpm/form/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除工作流的表单定义
|
||||
export function deleteForm(id) {
|
||||
return request({
|
||||
url: '/bpm/form/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得工作流的表单定义
|
||||
export function getForm(id) {
|
||||
return request({
|
||||
url: '/bpm/form/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得工作流的表单定义分页
|
||||
export function getFormPage(query) {
|
||||
return request({
|
||||
url: '/bpm/form/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得动态表单的精简列表
|
||||
export function getSimpleForms() {
|
||||
return request({
|
||||
url: '/bpm/form/list-all-simple',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建请假申请
|
||||
export function createLeave(data) {
|
||||
return request({
|
||||
url: '/bpm/oa/leave/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得请假申请
|
||||
export function getLeave(id) {
|
||||
return request({
|
||||
url: '/bpm/oa/leave/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得请假申请分页
|
||||
export function getLeavePage(query) {
|
||||
return request({
|
||||
url: '/bpm/oa/leave/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,58 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getModelPage(query) {
|
||||
return request({
|
||||
url: '/bpm/model/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getModel(id) {
|
||||
return request({
|
||||
url: '/bpm/model/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function updateModel(data) {
|
||||
return request({
|
||||
url: '/bpm/model/update',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 任务状态修改
|
||||
export function updateModelState(id, state) {
|
||||
return request({
|
||||
url: '/bpm/model/update-state',
|
||||
method: 'put',
|
||||
data: {
|
||||
id,
|
||||
state
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function createModel(data) {
|
||||
return request({
|
||||
url: '/bpm/model/create',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteModel(id) {
|
||||
return request({
|
||||
url: '/bpm/model/delete?id=' + id,
|
||||
method: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
export function deployModel(id) {
|
||||
return request({
|
||||
url: '/bpm/model/deploy?id=' + id,
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
@ -1,35 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getMyProcessInstancePage(query) {
|
||||
return request({
|
||||
url: '/bpm/process-instance/my-page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function createProcessInstance(data) {
|
||||
return request({
|
||||
url: '/bpm/process-instance/create',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function cancelProcessInstance(id, reason) {
|
||||
return request({
|
||||
url: '/bpm/process-instance/cancel',
|
||||
method: 'DELETE',
|
||||
data: {
|
||||
id,
|
||||
reason
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getProcessInstance(id) {
|
||||
return request({
|
||||
url: '/bpm/process-instance/get?id=' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,63 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getTodoTaskPage(query) {
|
||||
return request({
|
||||
url: '/bpm/task/todo-page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getDoneTaskPage(query) {
|
||||
return request({
|
||||
url: '/bpm/task/done-page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function completeTask(data) {
|
||||
return request({
|
||||
url: '/bpm/task/complete',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function approveTask(data) {
|
||||
return request({
|
||||
url: '/bpm/task/approve',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function rejectTask(data) {
|
||||
return request({
|
||||
url: '/bpm/task/reject',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function backTask(data) {
|
||||
return request({
|
||||
url: '/bpm/task/back',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateTaskAssignee(data) {
|
||||
return request({
|
||||
url: '/bpm/task/update-assignee',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getTaskListByProcessInstanceId(processInstanceId) {
|
||||
return request({
|
||||
url: '/bpm/task/list-by-process-instance-id?processInstanceId=' + processInstanceId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,25 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getTaskAssignRuleList(query) {
|
||||
return request({
|
||||
url: '/bpm/task-assign-rule/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function createTaskAssignRule(data) {
|
||||
return request({
|
||||
url: '/bpm/task-assign-rule/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateTaskAssignRule(data) {
|
||||
return request({
|
||||
url: '/bpm/task-assign-rule/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建用户组
|
||||
export function createUserGroup(data) {
|
||||
return request({
|
||||
url: '/bpm/user-group/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新用户组
|
||||
export function updateUserGroup(data) {
|
||||
return request({
|
||||
url: '/bpm/user-group/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除用户组
|
||||
export function deleteUserGroup(id) {
|
||||
return request({
|
||||
url: '/bpm/user-group/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得用户组
|
||||
export function getUserGroup(id) {
|
||||
return request({
|
||||
url: '/bpm/user-group/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得用户组分页
|
||||
export function getUserGroupPage(query) {
|
||||
return request({
|
||||
url: '/bpm/user-group/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户组精简信息列表
|
||||
export function listSimpleUserGroups() {
|
||||
return request({
|
||||
url: '/bpm/user-group/list-all-simple',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,20 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得API 访问日志分页
|
||||
export function getApiAccessLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/api-access-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出API 访问日志 Excel
|
||||
export function exportApiAccessLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/api-access-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 更新 API 错误日志的处理状态
|
||||
export function updateApiErrorLogProcess(id, processStatus) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus,
|
||||
method: 'put',
|
||||
})
|
||||
}
|
||||
|
||||
// 获得API 错误日志分页
|
||||
export function getApiErrorLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出API 错误日志 Excel
|
||||
export function exportApiErrorLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,90 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得表定义分页
|
||||
export function getCodegenTablePage(query) {
|
||||
return request({
|
||||
url: '/infra/codegen/table/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得表和字段的明细
|
||||
export function getCodegenDetail(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/detail?tableId=' + tableId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 修改代码生成信息
|
||||
export function updateCodegen(data) {
|
||||
return request({
|
||||
url: '/infra/codegen/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 基于数据库的表结构,同步数据库的表和字段定义
|
||||
export function syncCodegenFromDB(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/sync-from-db?tableId=' + tableId,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 基于 SQL 建表语句,同步数据库的表和字段定义
|
||||
export function syncCodegenFromSQL(tableId, sql) {
|
||||
return request({
|
||||
url: '/infra/codegen/sync-from-sql?tableId=' + tableId,
|
||||
method: 'put',
|
||||
headers:{
|
||||
'Content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: 'tableId=' + tableId + "&sql=" + sql,
|
||||
})
|
||||
}
|
||||
|
||||
// 预览生成代码
|
||||
export function previewCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/preview?tableId=' + tableId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 下载生成代码
|
||||
export function downloadCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/download?tableId=' + tableId,
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得表定义分页
|
||||
export function getSchemaTableList(query) {
|
||||
return request({
|
||||
url: '/infra/codegen/db/table/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 基于数据库的表结构,创建代码生成器的表定义
|
||||
export function createCodegenList(data) {
|
||||
return request({
|
||||
url: '/infra/codegen/create-list',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除数据库的表和字段定义
|
||||
export function deleteCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/delete?tableId=' + tableId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
@ -1,62 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询参数列表
|
||||
export function listConfig(query) {
|
||||
return request({
|
||||
url: '/infra/config/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询参数详细
|
||||
export function getConfig(configId) {
|
||||
return request({
|
||||
url: '/infra/config/get?id=' + configId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据参数键名查询参数值
|
||||
export function getConfigKey(configKey) {
|
||||
return request({
|
||||
url: '/infra/config/get-value-by-key?key=' + configKey,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增参数配置
|
||||
export function addConfig(data) {
|
||||
return request({
|
||||
url: '/infra/config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改参数配置
|
||||
export function updateConfig(data) {
|
||||
return request({
|
||||
url: '/infra/config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除参数配置
|
||||
export function delConfig(configId) {
|
||||
return request({
|
||||
url: '/infra/config/delete?id=' + configId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出参数
|
||||
export function exportConfig(query) {
|
||||
return request({
|
||||
url: '/infra/config/export',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,43 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建数据源配置
|
||||
export function createDataSourceConfig(data) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新数据源配置
|
||||
export function updateDataSourceConfig(data) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除数据源配置
|
||||
export function deleteDataSourceConfig(id) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得数据源配置
|
||||
export function getDataSourceConfig(id) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得数据源配置列表
|
||||
export function getDataSourceConfigList() {
|
||||
return request({
|
||||
url: '/infra/data-source-config/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
// 导出参数
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function exportHtml() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-html',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function exportWord() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-word',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function exportMarkdown() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-markdown',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 删除文件
|
||||
export function deleteFile(id) {
|
||||
return request({
|
||||
url: '/infra/file/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件分页
|
||||
export function getFilePage(query) {
|
||||
return request({
|
||||
url: '/infra/file/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,59 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建文件配置
|
||||
export function createFileConfig(data) {
|
||||
return request({
|
||||
url: '/infra/file-config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新文件配置
|
||||
export function updateFileConfig(data) {
|
||||
return request({
|
||||
url: '/infra/file-config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新文件配置为主配置
|
||||
export function updateFileConfigMaster(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/update-master?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除文件配置
|
||||
export function deleteFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件配置
|
||||
export function getFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件配置分页
|
||||
export function getFileConfigPage(query) {
|
||||
return request({
|
||||
url: '/infra/file-config/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function testFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/test?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,82 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询定时任务调度列表
|
||||
export function listJob(query) {
|
||||
return request({
|
||||
url: '/infra/job/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询定时任务调度详细
|
||||
export function getJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/get?id=' + jobId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增定时任务调度
|
||||
export function addJob(data) {
|
||||
return request({
|
||||
url: '/infra/job/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改定时任务调度
|
||||
export function updateJob(data) {
|
||||
return request({
|
||||
url: '/infra/job/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除定时任务调度
|
||||
export function delJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/delete?id=' + jobId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出定时任务调度
|
||||
export function exportJob(query) {
|
||||
return request({
|
||||
url: '/infra/job/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 任务状态修改
|
||||
export function updateJobStatus(jobId, status) {
|
||||
return request({
|
||||
url: '/infra/job/update-status',
|
||||
method: 'put',
|
||||
headers:{
|
||||
'Content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: 'id=' + jobId + "&status=" + status,
|
||||
})
|
||||
}
|
||||
|
||||
// 定时任务立即执行一次
|
||||
export function runJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/trigger?id=' + jobId,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得定时任务的下 n 次执行时间
|
||||
export function getJobNextTimes(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/get_next_times?id=' + jobId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,28 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得定时任务
|
||||
export function getJobLog(id) {
|
||||
return request({
|
||||
url: '/infra/job-log/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得定时任务分页
|
||||
export function getJobLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/job-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出定时任务 Excel
|
||||
export function exportJobLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/job-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询缓存详细
|
||||
export function getCache() {
|
||||
return request({
|
||||
url: '/infra/redis/get-monitor-info',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,54 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建字典类型
|
||||
export function createTestDemo(data) {
|
||||
return request({
|
||||
url: '/infra/test-demo/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新字典类型
|
||||
export function updateTestDemo(data) {
|
||||
return request({
|
||||
url: '/infra/test-demo/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除字典类型
|
||||
export function deleteTestDemo(id) {
|
||||
return request({
|
||||
url: '/infra/test-demo/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得字典类型
|
||||
export function getTestDemo(id) {
|
||||
return request({
|
||||
url: '/infra/test-demo/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得字典类型分页
|
||||
export function getTestDemoPage(query) {
|
||||
return request({
|
||||
url: '/infra/test-demo/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出字典类型 Excel
|
||||
export function exportTestDemoExcel(query) {
|
||||
return request({
|
||||
url: '/infra/test-demo/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,54 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建Banner
|
||||
export function createBanner(data) {
|
||||
return request({
|
||||
url: '/market/banner/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新Banner
|
||||
export function updateBanner(data) {
|
||||
return request({
|
||||
url: '/market/banner/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除Banner
|
||||
export function deleteBanner(id) {
|
||||
return request({
|
||||
url: '/market/banner/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得Banner
|
||||
export function getBanner(id) {
|
||||
return request({
|
||||
url: '/market/banner/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得Banner分页
|
||||
export function getBannerPage(query) {
|
||||
return request({
|
||||
url: '/market/banner/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出Banner Excel
|
||||
export function exportBannerExcel(query) {
|
||||
return request({
|
||||
url: '/market/banner/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,63 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建品牌
|
||||
export function createBrand(data) {
|
||||
return request({
|
||||
url: '/product/brand/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新品牌
|
||||
export function updateBrand(data) {
|
||||
return request({
|
||||
url: '/product/brand/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除品牌
|
||||
export function deleteBrand(id) {
|
||||
return request({
|
||||
url: '/product/brand/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得品牌
|
||||
export function getBrand(id) {
|
||||
return request({
|
||||
url: '/product/brand/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得品牌list
|
||||
export function getBrandList() {
|
||||
return request({
|
||||
url: '/product/brand/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获得品牌分页
|
||||
export function getBrandPage(query) {
|
||||
return request({
|
||||
url: '/product/brand/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出品牌 Excel
|
||||
export function exportBrandExcel(query) {
|
||||
return request({
|
||||
url: '/product/brand/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,44 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建商品分类
|
||||
export function createProductCategory(data) {
|
||||
return request({
|
||||
url: '/product/category/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新商品分类
|
||||
export function updateProductCategory(data) {
|
||||
return request({
|
||||
url: '/product/category/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除商品分类
|
||||
export function deleteProductCategory(id) {
|
||||
return request({
|
||||
url: '/product/category/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品分类
|
||||
export function getProductCategory(id) {
|
||||
return request({
|
||||
url: '/product/category/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品分类列表
|
||||
export function getProductCategoryList(query) {
|
||||
return request({
|
||||
url: '/product/category/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,113 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// ------------------------ 属性项 -------------------
|
||||
|
||||
// 创建属性项
|
||||
export function createProperty(data) {
|
||||
return request({
|
||||
url: '/product/property/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新属性项
|
||||
export function updateProperty(data) {
|
||||
return request({
|
||||
url: '/product/property/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除属性项
|
||||
export function deleteProperty(id) {
|
||||
return request({
|
||||
url: '/product/property/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得属性项
|
||||
export function getProperty(id) {
|
||||
return request({
|
||||
url: '/product/property/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得属性项分页
|
||||
export function getPropertyPage(query) {
|
||||
return request({
|
||||
url: '/product/property/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得属性项列表
|
||||
export function getPropertyList(query) {
|
||||
return request({
|
||||
url: '/product/property/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得属性项列表
|
||||
export function getPropertyListAndValue(query) {
|
||||
return request({
|
||||
url: '/product/property/get-value-list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// ------------------------ 属性值 -------------------
|
||||
|
||||
// 获得属性值分页
|
||||
export function getPropertyValuePage(query) {
|
||||
return request({
|
||||
url: '/product/property/value/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得属性值
|
||||
export function getPropertyValue(id) {
|
||||
return request({
|
||||
url: '/product/property/value/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 创建属性值
|
||||
export function createPropertyValue(data) {
|
||||
return request({
|
||||
url: '/product/property/value/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新属性值
|
||||
export function updatePropertyValue(data) {
|
||||
return request({
|
||||
url: '/product/property/value/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除属性值
|
||||
export function deletePropertyValue(id) {
|
||||
return request({
|
||||
url: '/product/property/value/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export class exportPropertyExcel {
|
||||
}
|
@ -1,9 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得商品 SKU 选项的列表
|
||||
export function getSkuOptionList() {
|
||||
return request({
|
||||
url: '/product/sku/get-option-list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建商品 SPU
|
||||
export function createSpu(data) {
|
||||
return request({
|
||||
url: '/product/spu/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新商品 SPU
|
||||
export function updateSpu(data) {
|
||||
return request({
|
||||
url: '/product/spu/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除商品 SPU
|
||||
export function deleteSpu(id) {
|
||||
return request({
|
||||
url: '/product/spu/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品 SPU 详情
|
||||
export function getSpuDetail(id) {
|
||||
return request({
|
||||
url: '/product/spu/get-detail?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品 SPU 分页
|
||||
export function getSpuPage(query) {
|
||||
return request({
|
||||
url: '/product/spu/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得商品 SPU 精简列表
|
||||
export function getSpuSimpleList() {
|
||||
return request({
|
||||
url: '/product/spu/get-simple-list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 删除优惠劵
|
||||
export function deleteCoupon(id) {
|
||||
return request({
|
||||
url: '/promotion/coupon/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得优惠劵分页
|
||||
export function getCouponPage(query) {
|
||||
return request({
|
||||
url: '/promotion/coupon/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,67 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建优惠劵模板
|
||||
export function createCouponTemplate(data) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新优惠劵模板
|
||||
export function updateCouponTemplate(data) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新优惠劵模板的状态
|
||||
export function updateCouponTemplateStatus(id, status) {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/promotion/coupon-template/update-status',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除优惠劵模板
|
||||
export function deleteCouponTemplate(id) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得优惠劵模板
|
||||
export function getCouponTemplate(id) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得优惠劵模板分页
|
||||
export function getCouponTemplatePage(query) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出优惠劵模板 Excel
|
||||
export function exportCouponTemplateExcel(query) {
|
||||
return request({
|
||||
url: '/promotion/coupon-template/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建限时折扣活动
|
||||
export function createDiscountActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新限时折扣活动
|
||||
export function updateDiscountActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭限时折扣活动
|
||||
export function closeDiscountActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/close?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除限时折扣活动
|
||||
export function deleteDiscountActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得限时折扣活动
|
||||
export function getDiscountActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得限时折扣活动分页
|
||||
export function getDiscountActivityPage(query) {
|
||||
return request({
|
||||
url: '/promotion/discount-activity/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建满减送活动
|
||||
export function createRewardActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新满减送活动
|
||||
export function updateRewardActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭满减送活动
|
||||
export function closeRewardActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/close?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除满减送活动
|
||||
export function deleteRewardActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得满减送活动
|
||||
export function getRewardActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得满减送活动分页
|
||||
export function getRewardActivityPage(query) {
|
||||
return request({
|
||||
url: '/promotion/reward-activity/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,52 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建秒杀活动
|
||||
export function createSeckillActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新秒杀活动
|
||||
export function updateSeckillActivity(data) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭限时折扣活动
|
||||
export function closeSeckillActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/close?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除秒杀活动
|
||||
export function deleteSeckillActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得秒杀活动
|
||||
export function getSeckillActivity(id) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得秒杀活动分页
|
||||
export function getSeckillActivityPage(query) {
|
||||
return request({
|
||||
url: '/promotion/seckill-activity/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,62 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建秒杀时段
|
||||
export function createSeckillTime(data) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新秒杀时段
|
||||
export function updateSeckillTime(data) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除秒杀时段
|
||||
export function deleteSeckillTime(id) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得秒杀时段
|
||||
export function getSeckillTime(id) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得秒杀时段分页
|
||||
export function getSeckillTimePage(query) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取所有的秒杀时段
|
||||
export function getSeckillTimeList() {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出秒杀时段 Excel
|
||||
export function exportSeckillTimeExcel(query) {
|
||||
return request({
|
||||
url: '/promotion/seckill-time/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得交易售后
|
||||
export function getAfterSale(id) {
|
||||
return request({
|
||||
url: '/trade/after-sale/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得交易售后分页
|
||||
export function getAfterSalePage(query) {
|
||||
return request({
|
||||
url: '/trade/after-sale/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得交易订单分页
|
||||
export function getOrderPage(query) {
|
||||
return request({
|
||||
url: '/trade/order/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得交易订单详情
|
||||
export function getOrderDetail(id) {
|
||||
return request({
|
||||
url: '/trade/order/get-detail?id=' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
@ -1,68 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建公众号账号
|
||||
export function createAccount(data) {
|
||||
return request({
|
||||
url: '/mp/account/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新公众号账号
|
||||
export function updateAccount(data) {
|
||||
return request({
|
||||
url: '/mp/account/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号账号
|
||||
export function deleteAccount(id) {
|
||||
return request({
|
||||
url: '/mp/account/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号账号
|
||||
export function getAccount(id) {
|
||||
return request({
|
||||
url: '/mp/account/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号账号分页
|
||||
export function getAccountPage(query) {
|
||||
return request({
|
||||
url: '/mp/account/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取公众号账号精简信息列表
|
||||
export function getSimpleAccounts() {
|
||||
return request({
|
||||
url: '/mp/account/list-all-simple',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 生成公众号二维码
|
||||
export function generateAccountQrCode(id) {
|
||||
return request({
|
||||
url: '/mp/account/generate-qr-code?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 清空公众号 API 配额
|
||||
export function clearAccountQuota(id) {
|
||||
return request({
|
||||
url: '/mp/account/clear-quota?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
@ -1,44 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建公众号的自动回复
|
||||
export function createAutoReply(data) {
|
||||
return request({
|
||||
url: '/mp/auto-reply/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新公众号的自动回复
|
||||
export function updateAutoReply(data) {
|
||||
return request({
|
||||
url: '/mp/auto-reply/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号的自动回复
|
||||
export function deleteAutoReply(id) {
|
||||
return request({
|
||||
url: '/mp/auto-reply/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号的自动回复
|
||||
export function getAutoReply(id) {
|
||||
return request({
|
||||
url: '/mp/auto-reply/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号的自动回复分页
|
||||
export function getAutoReplyPage(query) {
|
||||
return request({
|
||||
url: '/mp/auto-reply/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,38 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得公众号草稿分页
|
||||
export function getDraftPage(query) {
|
||||
return request({
|
||||
url: '/mp/draft/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 创建公众号草稿
|
||||
export function createDraft(accountId, articles) {
|
||||
return request({
|
||||
url: '/mp/draft/create?accountId=' + accountId,
|
||||
method: 'post',
|
||||
data: {
|
||||
articles
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新公众号草稿
|
||||
export function updateDraft(accountId, mediaId, articles) {
|
||||
return request({
|
||||
url: '/mp/draft/update?accountId=' + accountId + '&mediaId=' + mediaId,
|
||||
method: 'put',
|
||||
data: articles
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号草稿
|
||||
export function deleteDraft(accountId, mediaId) {
|
||||
return request({
|
||||
url: '/mp/draft/delete?accountId=' + accountId + '&mediaId=' + mediaId,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得公众号素材分页
|
||||
export function getFreePublishPage(query) {
|
||||
return request({
|
||||
url: '/mp/free-publish/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号素材
|
||||
export function deleteFreePublish(accountId, articleId) {
|
||||
return request({
|
||||
url: '/mp/free-publish/delete?accountId=' + accountId + '&articleId=' + articleId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 发布公众号素材
|
||||
export function submitFreePublish(accountId, mediaId) {
|
||||
return request({
|
||||
url: '/mp/free-publish/submit?accountId=' + accountId + '&mediaId=' + mediaId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得公众号素材分页
|
||||
export function getMaterialPage(query) {
|
||||
return request({
|
||||
url: '/mp/material/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号永久素材
|
||||
export function deletePermanentMaterial(id) {
|
||||
return request({
|
||||
url: '/mp/material/delete-permanent?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
@ -1,29 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得公众号菜单列表
|
||||
export function getMenuList(accountId) {
|
||||
return request({
|
||||
url: '/mp/menu/list?accountId=' + accountId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 保存公众号菜单
|
||||
export function saveMenu(accountId, menus) {
|
||||
return request({
|
||||
url: '/mp/menu/save',
|
||||
method: 'post',
|
||||
data: {
|
||||
accountId,
|
||||
menus
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号菜单
|
||||
export function deleteMenu(accountId) {
|
||||
return request({
|
||||
url: '/mp/menu/delete?accountId=' + accountId,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
@ -1,19 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得公众号消息分页
|
||||
export function getMessagePage(query) {
|
||||
return request({
|
||||
url: '/mp/message/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 给粉丝发送消息
|
||||
export function sendMessage(data) {
|
||||
return request({
|
||||
url: '/mp/message/send',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
@ -1,35 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 更新公众号粉丝
|
||||
export function updateUser(data) {
|
||||
return request({
|
||||
url: '/mp/user/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号粉丝
|
||||
export function getUser(id) {
|
||||
return request({
|
||||
url: '/mp/user/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号粉丝分页
|
||||
export function getUserPage(query) {
|
||||
return request({
|
||||
url: '/mp/user/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 同步公众号粉丝
|
||||
export function syncUser(accountId) {
|
||||
return request({
|
||||
url: '/mp/user/sync?accountId=' + accountId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
@ -1,37 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取消息发送概况数据
|
||||
export function getUpstreamMessage(query) {
|
||||
return request({
|
||||
url: '/mp/statistics/upstream-message',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 用户增减数据
|
||||
export function getUserSummary(query) {
|
||||
return request({
|
||||
url: '/mp/statistics/user-summary',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得用户累计数据
|
||||
export function getUserCumulate(query) {
|
||||
return request({
|
||||
url: '/mp/statistics/user-cumulate',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得接口分析数据
|
||||
export function getInterfaceSummary(query) {
|
||||
return request({
|
||||
url: '/mp/statistics/interface-summary',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
@ -1,60 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建公众号标签
|
||||
export function createTag(data) {
|
||||
return request({
|
||||
url: '/mp/tag/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新公众号标签
|
||||
export function updateTag(data) {
|
||||
return request({
|
||||
url: '/mp/tag/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除公众号标签
|
||||
export function deleteTag(id) {
|
||||
return request({
|
||||
url: '/mp/tag/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号标签
|
||||
export function getTag(id) {
|
||||
return request({
|
||||
url: '/mp/tag/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得公众号标签分页
|
||||
export function getTagPage(query) {
|
||||
return request({
|
||||
url: '/mp/tag/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取公众号标签精简信息列表
|
||||
export function getSimpleTags() {
|
||||
return request({
|
||||
url: '/mp/tag/list-all-simple',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 同步公众号标签
|
||||
export function syncTag(accountId) {
|
||||
return request({
|
||||
url: '/mp/tag/sync?accountId=' + accountId,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
@ -1,78 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建支付应用信息
|
||||
export function createApp(data) {
|
||||
return request({
|
||||
url: '/pay/app/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新支付应用信息
|
||||
export function updateApp(data) {
|
||||
return request({
|
||||
url: '/pay/app/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 支付应用信息状态修改
|
||||
export function changeAppStatus(id, status) {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/pay/app/update-status',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除支付应用信息
|
||||
export function deleteApp(id) {
|
||||
return request({
|
||||
url: '/pay/app/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付应用信息
|
||||
export function getApp(id) {
|
||||
return request({
|
||||
url: '/pay/app/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付应用信息分页
|
||||
export function getAppPage(query) {
|
||||
return request({
|
||||
url: '/pay/app/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出支付应用信息 Excel
|
||||
export function exportAppExcel(query) {
|
||||
return request({
|
||||
url: '/pay/app/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据商ID称搜索应用列表
|
||||
export function getAppListByMerchantId(merchantId) {
|
||||
return request({
|
||||
url: '/pay/app/list-merchant-id',
|
||||
params:{
|
||||
merchantId:merchantId
|
||||
},
|
||||
method: 'get'
|
||||
})
|
||||
}
|
@ -1,71 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建支付渠道
|
||||
export function createChannel(data) {
|
||||
return request({
|
||||
url: '/pay/channel/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新支付渠道
|
||||
export function updateChannel(data) {
|
||||
return request({
|
||||
url: '/pay/channel/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除支付渠道
|
||||
export function deleteChannel(id) {
|
||||
return request({
|
||||
url: '/pay/channel/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付渠道
|
||||
// export function getChannel(id) {
|
||||
// return request({
|
||||
// url: '/pay/channel/get?id=' + id,
|
||||
// method: 'get'
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// 获得支付渠道分页
|
||||
export function getChannelPage(query) {
|
||||
return request({
|
||||
url: '/pay/channel/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出支付渠道Excel
|
||||
export function exportChannelExcel(query) {
|
||||
return request({
|
||||
url: '/pay/channel/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付渠道
|
||||
export function getChannel(merchantId,appId,code) {
|
||||
return request({
|
||||
url: '/pay/channel/get-channel',
|
||||
params:{
|
||||
merchantId:merchantId,
|
||||
appId:appId,
|
||||
code:code
|
||||
},
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
@ -1,35 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建示例订单
|
||||
export function createDemoOrder(data) {
|
||||
return request({
|
||||
url: '/pay/demo-order/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得示例订单
|
||||
export function getDemoOrder(id) {
|
||||
return request({
|
||||
url: '/pay/demo-order/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得示例订单分页
|
||||
export function getDemoOrderPage(query) {
|
||||
return request({
|
||||
url: '/pay/demo-order/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 退款示例订单
|
||||
export function refundDemoOrder(id) {
|
||||
return request({
|
||||
url: '/pay/demo-order/refund?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
@ -1,77 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建支付商户信息
|
||||
export function createMerchant(data) {
|
||||
return request({
|
||||
url: '/pay/merchant/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新支付商户信息
|
||||
export function updateMerchant(data) {
|
||||
return request({
|
||||
url: '/pay/merchant/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 支付商户状态修改
|
||||
export function changeMerchantStatus(id, status) {
|
||||
const data = {
|
||||
id,
|
||||
status
|
||||
}
|
||||
return request({
|
||||
url: '/pay/merchant/update-status',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除支付商户信息
|
||||
export function deleteMerchant(id) {
|
||||
return request({
|
||||
url: '/pay/merchant/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付商户信息
|
||||
export function getMerchant(id) {
|
||||
return request({
|
||||
url: '/pay/merchant/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 根据商户名称搜索商户列表
|
||||
export function getMerchantListByName(name) {
|
||||
return request({
|
||||
url: '/pay/merchant/list-by-name',
|
||||
params:{
|
||||
name:name
|
||||
},
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付商户信息分页
|
||||
export function getMerchantPage(query) {
|
||||
return request({
|
||||
url: '/pay/merchant/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出支付商户信息 Excel
|
||||
export function exportMerchantExcel(query) {
|
||||
return request({
|
||||
url: '/pay/merchant/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,53 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 删除支付订单
|
||||
export function deleteOrder(id) {
|
||||
return request({
|
||||
url: '/pay/order/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付订单
|
||||
export function getOrder(id) {
|
||||
return request({
|
||||
url: '/pay/order/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付订单的明细
|
||||
export function getOrderDetail(id) {
|
||||
return request({
|
||||
url: '/pay/order/get-detail?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 提交支付订单
|
||||
export function submitOrder(data) {
|
||||
return request({
|
||||
url: '/pay/order/submit',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得支付订单分页
|
||||
export function getOrderPage(query) {
|
||||
return request({
|
||||
url: '/pay/order/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出支付订单 Excel
|
||||
export function exportOrderExcel(query) {
|
||||
return request({
|
||||
url: '/pay/order/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
@ -1,54 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建退款订单
|
||||
export function createRefund(data) {
|
||||
return request({
|
||||
url: '/pay/refund/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新退款订单
|
||||
export function updateRefund(data) {
|
||||
return request({
|
||||
url: '/pay/refund/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除退款订单
|
||||
export function deleteRefund(id) {
|
||||
return request({
|
||||
url: '/pay/refund/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得退款订单
|
||||
export function getRefund(id) {
|
||||
return request({
|
||||
url: '/pay/refund/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得退款订单分页
|
||||
export function getRefundPage(query) {
|
||||
return request({
|
||||
url: '/pay/refund/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出退款订单 Excel
|
||||
export function exportRefundExcel(query) {
|
||||
return request({
|
||||
url: '/pay/refund/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
43
src/main.js
43
src/main.js
@ -9,13 +9,12 @@ import store from './store';
|
||||
import router from './router';
|
||||
import directive from './directive'; // directive
|
||||
import plugins from './plugins'; // plugins
|
||||
import { scrollBoard } from '@jiaminghi/data-view'
|
||||
import { scrollBoard } from '@jiaminghi/data-view';
|
||||
|
||||
import './assets/icons'; // icon
|
||||
import './permission'; // permission control
|
||||
// import './tongji' // 百度统计
|
||||
import { getDicts } from '@/api/system/dict/data';
|
||||
import { getConfigKey } from '@/api/infra/config';
|
||||
import {
|
||||
parseTime,
|
||||
resetForm,
|
||||
@ -40,7 +39,6 @@ import './theme/index.css'; // 自定义主题包 - code-brick-zj
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts;
|
||||
Vue.prototype.getConfigKey = getConfigKey;
|
||||
Vue.prototype.parseTime = parseTime;
|
||||
Vue.prototype.resetForm = resetForm;
|
||||
Vue.prototype.getDictDatas = getDictDatas;
|
||||
@ -50,16 +48,19 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
|
||||
Vue.prototype.handleTree = handleTree;
|
||||
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
|
||||
Vue.prototype.divide = divide;
|
||||
Vue.prototype.tableHeight = function(n) {
|
||||
return window.innerHeight - n
|
||||
}
|
||||
Vue.prototype.searchBarWidth = function(name, num) {
|
||||
if (document.getElementById(name) && document.getElementById(name).offsetWidth < num) {
|
||||
return true
|
||||
Vue.prototype.tableHeight = function (n) {
|
||||
return window.innerHeight - n;
|
||||
};
|
||||
Vue.prototype.searchBarWidth = function (name, num) {
|
||||
if (
|
||||
document.getElementById(name) &&
|
||||
document.getElementById(name).offsetWidth < num
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag);
|
||||
@ -72,25 +73,17 @@ import DocAlert from '@/components/DocAlert';
|
||||
// 头部标签插件
|
||||
import VueMeta from 'vue-meta';
|
||||
import CodeBrickZj from 'code-brick-zj';
|
||||
import { hiPrintPlugin,disAutoConnect } from 'vue-plugin-hiprint'
|
||||
import { hiPrintPlugin, disAutoConnect } from 'vue-plugin-hiprint';
|
||||
disAutoConnect();
|
||||
Vue.use(hiPrintPlugin)
|
||||
Vue.use(CodeBrickZj)
|
||||
Vue.use(hiPrintPlugin);
|
||||
Vue.use(CodeBrickZj);
|
||||
Vue.use(directive);
|
||||
Vue.use(plugins);
|
||||
Vue.use(VueMeta);
|
||||
Vue.use(scrollBoard)
|
||||
Vue.use(scrollBoard);
|
||||
// Vue.use(hljs.vuePlugin);
|
||||
import scroll from 'vue-seamless-scroll'
|
||||
Vue.use(scroll)
|
||||
// bpmnProcessDesigner 需要引入
|
||||
import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
|
||||
Vue.use(MyPD);
|
||||
import '@/components/bpmnProcessDesigner/package/theme/index.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';
|
||||
import scroll from 'vue-seamless-scroll';
|
||||
Vue.use(scroll);
|
||||
|
||||
// Form Generator 组件需要使用到 tinymce
|
||||
import Tinymce from '@/components/tinymce/index.vue';
|
||||
|
@ -1,9 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
import Layout from '@/layout';
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Router);
|
||||
|
||||
/**
|
||||
* Note: 路由配置项
|
||||
@ -28,263 +28,146 @@ Vue.use(Router)
|
||||
|
||||
// 公共路由
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/redirect/:path(.*)',
|
||||
component: (resolve) => require(['@/views/redirect'], resolve)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: (resolve) => require(['@/views/login'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/sso',
|
||||
component: (resolve) => require(['@/views/sso'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/social-login',
|
||||
component: (resolve) => require(['@/views/socialLogin'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: (resolve) => require(['@/views/error/404'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/401',
|
||||
component: (resolve) => require(['@/views/error/401'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/print-design',
|
||||
component: (resolve) => require(['@/views/print/design'], resolve),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/views/choicePart'),
|
||||
hidden: true,
|
||||
meta: { requireToken: true }
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Layout,
|
||||
// // redirect: 'core/base/factory',
|
||||
// // children: [{
|
||||
// // path: 'index',
|
||||
// // redirect: 'core/base/factory',
|
||||
// // component: (resolve) => require(['@/views/index'], resolve),
|
||||
// // name: '首页',
|
||||
// // meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
// // }
|
||||
// // ]
|
||||
// },
|
||||
{
|
||||
path: '/AGVBoard',
|
||||
name: 'AGVBoard',
|
||||
// component: Layout,
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/AGVBoard.vue')
|
||||
},
|
||||
{
|
||||
path: '/coldBoard',
|
||||
name: 'coldBoard',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue')
|
||||
},
|
||||
{
|
||||
path: '/processingBoard',
|
||||
name: 'processingBoard',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/processingBoard.vue')
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [{
|
||||
path: 'profile',
|
||||
component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
|
||||
name: 'Profile',
|
||||
meta: { title: '个人中心', icon: 'user' }
|
||||
}, {
|
||||
path: 'notify-message',
|
||||
component: (resolve) => require(['@/views/system/notify/my/index'], resolve),
|
||||
name: 'MyNotifyMessage',
|
||||
meta: { title: '我的站内信', icon: 'message' },
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/dict',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'type/data/:dictId(\\d+)',
|
||||
component: (resolve) => require(['@/views/system/dict/data'], resolve),
|
||||
name: 'SystemDictData',
|
||||
meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/job',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'log',
|
||||
component: (resolve) => require(['@/views/infra/job/log'], resolve),
|
||||
name: 'InfraJobLog',
|
||||
meta: { title: '调度日志', activeMenu: '/infra/job' }
|
||||
}
|
||||
]
|
||||
}, {
|
||||
path: '/codegen',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'edit/:tableId(\\d+)',
|
||||
component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
|
||||
name: 'InfraCodegenEditTable',
|
||||
meta: { title: '修改生成配置', activeMenu: '/infra/codegen' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/bpm',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [{
|
||||
path: 'oa/leave/create',
|
||||
component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
|
||||
name: 'BpmOALeaveCreate',
|
||||
meta: { title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave' }
|
||||
}, {
|
||||
path: 'oa/leave/detail',
|
||||
component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
|
||||
name: 'BpmOALeaveDetail',
|
||||
meta: { title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/bpm',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'manager/form/edit',
|
||||
component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
|
||||
name: 'BpmFormEditor',
|
||||
meta: { title: '流程表单-编辑', activeMenu: '/bpm/manager/form' }
|
||||
}, {
|
||||
path: 'manager/definition',
|
||||
component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
|
||||
name: 'BpmProcessDefinition',
|
||||
meta: { title: '流程定义', activeMenu: '/bpm/manager/model' }
|
||||
}, {
|
||||
path: 'manager/model/design',
|
||||
component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
|
||||
name: 'BpmModelEditor',
|
||||
meta: { title: '设计流程', activeMenu: '/bpm/manager/model' }
|
||||
}, {
|
||||
path: 'process-instance/create',
|
||||
component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
|
||||
name: 'BpmProcessInstanceCreate',
|
||||
meta: { title: '发起流程', activeMenu: '/bpm/task/my' }
|
||||
}, {
|
||||
path: 'process-instance/detail',
|
||||
component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
meta: { title: '流程详情', activeMenu: '/bpm/task/my' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/property',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'value/:propertyId(\\d+)',
|
||||
component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
|
||||
name: 'ProductPropertyValue',
|
||||
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/spu',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'edit/:spuId(\\d+)',
|
||||
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
||||
name: 'ProductSpuUpdate',
|
||||
meta: { title: '修改商品', activeMenu: '/product/spu' }
|
||||
},
|
||||
{
|
||||
path: 'add',
|
||||
component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
|
||||
name: 'ProductSpuCreate',
|
||||
meta: { title: '添加商品', activeMenu: '/product/spu' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/trade/order',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'detail',
|
||||
name: 'TradeOrderDetail',
|
||||
hidden: true,
|
||||
meta: { title: '订单详情' },
|
||||
component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pay',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [{
|
||||
path: 'order/submit',
|
||||
name: 'PayOrderSubmit',
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: '收银台',
|
||||
noCache: true
|
||||
},
|
||||
component: (resolve) => require(['@/views/pay/order/submit'], resolve)
|
||||
}]
|
||||
}
|
||||
]
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/redirect/:path(.*)',
|
||||
component: (resolve) => require(['@/views/redirect'], resolve),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: (resolve) => require(['@/views/login'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/sso',
|
||||
component: (resolve) => require(['@/views/sso'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/social-login',
|
||||
component: (resolve) => require(['@/views/socialLogin'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: (resolve) => require(['@/views/error/404'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/401',
|
||||
component: (resolve) => require(['@/views/error/401'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/print-design',
|
||||
component: (resolve) => require(['@/views/print/design'], resolve),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/views/choicePart'),
|
||||
hidden: true,
|
||||
meta: { requireToken: true },
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Layout,
|
||||
// // redirect: 'core/base/factory',
|
||||
// // children: [{
|
||||
// // path: 'index',
|
||||
// // redirect: 'core/base/factory',
|
||||
// // component: (resolve) => require(['@/views/index'], resolve),
|
||||
// // name: '首页',
|
||||
// // meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
// // }
|
||||
// // ]
|
||||
// },
|
||||
{
|
||||
path: '/AGVBoard',
|
||||
name: 'AGVBoard',
|
||||
// component: Layout,
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "about" */ '@/views/OperationalOverview/AGVBoard.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/coldBoard',
|
||||
name: 'coldBoard',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/processingBoard',
|
||||
name: 'processingBoard',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "about" */ '@/views/OperationalOverview/processingBoard.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
path: 'profile',
|
||||
component: (resolve) =>
|
||||
require(['@/views/system/user/profile/index'], resolve),
|
||||
name: 'Profile',
|
||||
meta: { title: '个人中心', icon: 'user' },
|
||||
},
|
||||
{
|
||||
path: 'notify-message',
|
||||
component: (resolve) =>
|
||||
require(['@/views/system/notify/my/index'], resolve),
|
||||
name: 'MyNotifyMessage',
|
||||
meta: { title: '我的站内信', icon: 'message' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/dict',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: 'type/data/:dictId(\\d+)',
|
||||
component: (resolve) => require(['@/views/system/dict/data'], resolve),
|
||||
name: 'SystemDictData',
|
||||
meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 防止连续点击多次路由报错
|
||||
let routerPush = Router.prototype.push;
|
||||
Router.prototype.push = function push(location) {
|
||||
return routerPush.call(this, location).catch(err => err)
|
||||
}
|
||||
return routerPush.call(this, location).catch((err) => err);
|
||||
};
|
||||
|
||||
export default new Router({
|
||||
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
|
||||
mode: 'hash', // 去掉url中的#
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes
|
||||
})
|
||||
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : '/',
|
||||
mode: 'hash', // 去掉url中的#
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRoutes,
|
||||
});
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="定义编号" align="center" prop="id" width="400" />
|
||||
<el-table-column label="定义名称" align="center" prop="name" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="定义分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
</el-button>
|
||||
<label v-else>暂无表单</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
||||
<el-tag size="medium" type="warning" v-else>未部署</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.deploymentTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="定义描述" align="center" prop="description" width="300" show-overflow-tooltip />
|
||||
<el-table-column label="操作" align="center" width="150" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:update']">分配规则</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 流程表单配置详情 -->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 流程模型图的预览 -->
|
||||
<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- ========== 流程任务分配规则 ========== -->
|
||||
<taskAssignRuleDialog ref="taskAssignRuleDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML, getProcessDefinitionPage} from "@/api/bpm/definition";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
|
||||
|
||||
export default {
|
||||
name: "BpmProcessDefinition",
|
||||
components: {
|
||||
Parser,
|
||||
taskAssignRuleDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
|
||||
// 流程表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
showBpmnOpen: false,
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const key = this.$route.query && this.$route.query.key
|
||||
if (key) {
|
||||
this.queryParams['key'] = key
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getProcessDefinitionPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 流程表单的详情按钮操作 */
|
||||
handleFormDetail(row) {
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
// 设置值
|
||||
this.detailForm = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields(row.formFields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
// 业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
}
|
||||
},
|
||||
/** 流程图的详情按钮操作 */
|
||||
handleBpmnDetail(row) {
|
||||
getProcessDefinitionBpmnXML(row.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
// 弹窗打开
|
||||
this.showBpmnOpen = true
|
||||
})
|
||||
},
|
||||
/** 处理任务分配规则列表的按钮操作 */
|
||||
handleAssignRule(row) {
|
||||
this.$refs['taskAssignRuleDialog'].initProcessDefinition(row.id);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
@ -1,567 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left-board">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo">流程表单</div>
|
||||
</div>
|
||||
<el-scrollbar class="left-scrollbar">
|
||||
<!-- 左边:表单项 -->
|
||||
<div class="components-list">
|
||||
<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="item.list"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
draggable=".components-item"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in item.list"
|
||||
:key="index"
|
||||
class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.__config__.tagIcon" />
|
||||
{{ element.__config__.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- 左边:动态表单 -->
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="表单名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入表单名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开启状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="center-board">
|
||||
<div class="action-bar">
|
||||
<el-button icon="el-icon-check" type="text" @click="save">保存</el-button>
|
||||
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
|
||||
<!-- 运行-->
|
||||
<!-- </el-button>-->
|
||||
<el-button icon="el-icon-view" type="text" @click="showJson">
|
||||
查看json
|
||||
</el-button>
|
||||
<!-- <el-button icon="el-icon-download" type="text" @click="download">-->
|
||||
<!-- 导出vue文件-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
|
||||
<!-- 复制代码-->
|
||||
<!-- </el-button>-->
|
||||
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 中间,表单项 -->
|
||||
<el-scrollbar class="center-scrollbar">
|
||||
<el-row class="center-board-row" :gutter="formConf.gutter">
|
||||
<el-form
|
||||
:size="formConf.size"
|
||||
:label-position="formConf.labelPosition"
|
||||
:disabled="formConf.disabled"
|
||||
:label-width="formConf.labelWidth + 'px'"
|
||||
>
|
||||
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
|
||||
<draggable-item
|
||||
v-for="(item, index) in drawingList"
|
||||
:key="item.renderKey"
|
||||
:drawing-list="drawingList"
|
||||
:current-item="item"
|
||||
:index="index"
|
||||
:active-id="activeId"
|
||||
:form-conf="formConf"
|
||||
@activeItem="activeFormItem"
|
||||
@copyItem="drawingItemCopy"
|
||||
@deleteItem="drawingItemDelete"
|
||||
/>
|
||||
</draggable>
|
||||
<div v-show="!drawingList.length" class="empty-info">
|
||||
从左侧拖入或点选组件进行表单设计
|
||||
</div>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右边:组件属性/表单属性 -->
|
||||
<right-panel
|
||||
:active-data="activeData"
|
||||
:form-conf="formConf"
|
||||
:show-field="!!drawingList.length"
|
||||
@tag-change="tagChange"
|
||||
@fetch-data="fetchData"
|
||||
/>
|
||||
|
||||
<!-- <form-drawer-->
|
||||
<!-- :visible.sync="drawerVisible"-->
|
||||
<!-- :form-data="formData"-->
|
||||
<!-- size="100%"-->
|
||||
<!-- :generate-conf="generateConf"-->
|
||||
<!-- />-->
|
||||
|
||||
<json-drawer
|
||||
size="60%"
|
||||
:visible.sync="jsonDrawerVisible"
|
||||
:json-str="JSON.stringify(formData)"
|
||||
@refresh="refreshJson"
|
||||
/>
|
||||
|
||||
<!-- <code-type-dialog-->
|
||||
<!-- :visible.sync="dialogVisible"-->
|
||||
<!-- title="选择生成类型"-->
|
||||
<!-- :show-file-name="showFileName"-->
|
||||
<!-- @confirm="generate"-->
|
||||
<!-- />-->
|
||||
|
||||
<!-- <input id="copyNode" type="hidden">-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
import { saveAs } from 'file-saver'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import render from '@/components/render/render'
|
||||
import FormDrawer from '@/views/infra/build/FormDrawer'
|
||||
import JsonDrawer from '@/views/infra/build/JsonDrawer'
|
||||
import RightPanel from '@/views/infra/build/RightPanel'
|
||||
import {
|
||||
inputComponents, selectComponents, layoutComponents, formConf
|
||||
} from '@/components/generator/config'
|
||||
import {beautifierConf, titleCase, deepClone, isObjectObject} from '@/utils'
|
||||
import {
|
||||
makeUpHtml, vueTemplate, vueScript, cssStyle
|
||||
} from '@/components/generator/html'
|
||||
import { makeUpJs } from '@/components/generator/js'
|
||||
import { makeUpCss } from '@/components/generator/css'
|
||||
import drawingDefalut from '@/components/generator/drawingDefalut'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from '@/views/infra/build/CodeTypeDialog'
|
||||
import DraggableItem from '@/views/infra/build/DraggableItem'
|
||||
import {
|
||||
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
|
||||
} from '@/utils/db'
|
||||
import loadBeautifier from '@/utils/loadBeautifier'
|
||||
import {CommonStatusEnum} from "@/utils/constants";
|
||||
import {createForm, getForm, updateForm} from "@/api/bpm/form";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
|
||||
let beautifier
|
||||
const emptyActiveData = { style: {}, autosize: {} }
|
||||
let oldActiveId
|
||||
let tempActiveData
|
||||
const drawingListInDB = getDrawingList()
|
||||
const formConfInDB = getFormConf()
|
||||
const idGlobal = getIdGlobal()
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
render,
|
||||
FormDrawer,
|
||||
JsonDrawer,
|
||||
RightPanel,
|
||||
CodeTypeDialog,
|
||||
DraggableItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
idGlobal,
|
||||
formConf,
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents,
|
||||
labelWidth: 100,
|
||||
// drawingList: drawingDefalut,
|
||||
drawingData: {}, // 生成后的表单数据
|
||||
activeId: drawingDefalut[0].__config__.formId,
|
||||
|
||||
drawingList: [], // 表单项的数组
|
||||
// activeId: undefined,
|
||||
// activeData: {},
|
||||
|
||||
drawerVisible: false,
|
||||
formData: {},
|
||||
dialogVisible: false,
|
||||
jsonDrawerVisible: false,
|
||||
generateConf: null,
|
||||
showFileName: false,
|
||||
activeData: drawingDefalut[0], // 右边编辑器激活的表单项
|
||||
saveDrawingListDebounce: debounce(340, saveDrawingList),
|
||||
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
|
||||
leftComponents: [
|
||||
{
|
||||
title: '输入型组件',
|
||||
list: inputComponents
|
||||
},
|
||||
{
|
||||
title: '选择型组件',
|
||||
list: selectComponents
|
||||
},
|
||||
{
|
||||
title: '布局型组件',
|
||||
list: layoutComponents
|
||||
}
|
||||
],
|
||||
|
||||
// 表单参数
|
||||
form: {
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "表单名不能为空", trigger: "blur" }],
|
||||
status: [{ required: true, message: "开启状态不能为空", trigger: "blur" }],
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'activeData.__config__.label': function (val, oldVal) {
|
||||
if (
|
||||
this.activeData.placeholder === undefined
|
||||
|| !this.activeData.__config__.tag
|
||||
|| oldActiveId !== this.activeId
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
|
||||
},
|
||||
activeId: {
|
||||
handler(val) {
|
||||
oldActiveId = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
drawingList: {
|
||||
handler(val) {
|
||||
this.saveDrawingListDebounce(val)
|
||||
if (val.length === 0) this.idGlobal = 100
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
idGlobal: {
|
||||
handler(val) {
|
||||
this.saveIdGlobalDebounce(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 【add by 芋道源码】不读缓存
|
||||
// if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
|
||||
// this.drawingList = drawingListInDB
|
||||
// } else {
|
||||
// this.drawingList = drawingDefalut
|
||||
// }
|
||||
// this.activeFormItem(this.drawingList[0])
|
||||
// if (formConfInDB) {
|
||||
// this.formConf = formConfInDB
|
||||
// }
|
||||
loadBeautifier(btf => {
|
||||
beautifier = btf
|
||||
})
|
||||
const clipboard = new ClipboardJS('#copyNode', {
|
||||
text: trigger => {
|
||||
const codeStr = this.generateCode()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板,可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return codeStr
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
created() {
|
||||
// 读取表单配置
|
||||
const formId = this.$route.query && this.$route.query.formId
|
||||
if (formId) {
|
||||
getForm(formId).then(response => {
|
||||
const data = response.data
|
||||
this.form = {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
status: data.status,
|
||||
remark: data.remark
|
||||
}
|
||||
this.formConf = JSON.parse(data.conf)
|
||||
this.drawingList = decodeFields(data.fields)
|
||||
// 设置激活的表单项
|
||||
this.activeData = this.drawingList[0]
|
||||
this.activeId = this.activeData.__config__.formId
|
||||
// 设置 idGlobal,避免重复
|
||||
this.idGlobal += this.drawingList.length
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setObjectValueReduce(obj, strKeys, data) {
|
||||
const arr = strKeys.split('.')
|
||||
arr.reduce((pre, item, i) => {
|
||||
if (arr.length === i + 1) {
|
||||
pre[item] = data
|
||||
} else if (!isObjectObject(pre[item])) {
|
||||
pre[item] = {}
|
||||
}
|
||||
return pre[item]
|
||||
}, obj)
|
||||
},
|
||||
setRespData(component, resp) {
|
||||
const { dataPath, renderKey, dataConsumer } = component.__config__
|
||||
if (!dataPath || !dataConsumer) return
|
||||
const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
|
||||
|
||||
// 将请求回来的数据,赋值到指定属性。
|
||||
// 以el-tabel为例,根据Element文档,应该将数据赋值给el-tabel的data属性,所以dataConsumer的值应为'data';
|
||||
// 此时赋值代码可写成 component[dataConsumer] = respData;
|
||||
// 但为支持更深层级的赋值(如:dataConsumer的值为'options.data'),使用setObjectValueReduce
|
||||
this.setObjectValueReduce(component, dataConsumer, respData)
|
||||
const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
|
||||
if (i > -1) this.$set(this.drawingList, i, component)
|
||||
},
|
||||
fetchData(component) {
|
||||
const { dataType, method, url } = component.__config__
|
||||
if (dataType === 'dynamic' && method && url) {
|
||||
this.setLoading(component, true)
|
||||
this.$axios({
|
||||
method,
|
||||
url
|
||||
}).then(resp => {
|
||||
this.setLoading(component, false)
|
||||
this.setRespData(component, resp.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
setLoading(component, val) {
|
||||
const { directives } = component
|
||||
if (Array.isArray(directives)) {
|
||||
const t = directives.find(d => d.name === 'loading')
|
||||
if (t) t.value = val
|
||||
}
|
||||
},
|
||||
activeFormItem(currentItem) {
|
||||
this.activeData = currentItem
|
||||
this.activeId = currentItem.__config__.formId
|
||||
},
|
||||
onEnd(obj) {
|
||||
if (obj.from !== obj.to) {
|
||||
this.fetchData(tempActiveData)
|
||||
this.activeData = tempActiveData
|
||||
this.activeId = this.idGlobal
|
||||
}
|
||||
},
|
||||
addComponent(item) {
|
||||
const clone = this.cloneComponent(item)
|
||||
this.fetchData(clone)
|
||||
this.drawingList.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
cloneComponent(origin) {
|
||||
const clone = deepClone(origin)
|
||||
const config = clone.__config__
|
||||
config.span = this.formConf.span // 生成代码时,会根据span做精简判断
|
||||
this.createIdAndKey(clone)
|
||||
clone.placeholder !== undefined && (clone.placeholder += config.label)
|
||||
tempActiveData = clone
|
||||
return tempActiveData
|
||||
},
|
||||
createIdAndKey(item) {
|
||||
const config = item.__config__
|
||||
config.formId = ++this.idGlobal
|
||||
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
|
||||
if (config.layout === 'colFormItem') {
|
||||
item.__vModel__ = `field${this.idGlobal}`
|
||||
} else if (config.layout === 'rowFormItem') {
|
||||
config.componentName = `row${this.idGlobal}`
|
||||
!Array.isArray(config.children) && (config.children = [])
|
||||
delete config.label // rowFormItem无需配置label属性
|
||||
}
|
||||
if (Array.isArray(config.children)) {
|
||||
config.children = config.children.map(childItem => this.createIdAndKey(childItem))
|
||||
}
|
||||
return item
|
||||
},
|
||||
// 获得表单数据
|
||||
AssembleFormData() {
|
||||
this.formData = {
|
||||
fields: deepClone(this.drawingList),
|
||||
...this.formConf
|
||||
}
|
||||
},
|
||||
save() {
|
||||
// this.AssembleFormData()
|
||||
// console.log(this.formData)
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const form = {
|
||||
conf: JSON.stringify(this.formConf), // 表单配置
|
||||
fields: this.encodeFields(), // 表单项的数组
|
||||
...this.form // 表单名等
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateForm(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.close()
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createForm(form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.close()
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$tab.closeOpenPage({ path: "/bpm/manager/form" });
|
||||
},
|
||||
encodeFields() {
|
||||
const fields = []
|
||||
this.drawingList.forEach(item => {
|
||||
fields.push(JSON.stringify(item))
|
||||
})
|
||||
return fields
|
||||
},
|
||||
generate(data) {
|
||||
const func = this[`exec${titleCase(this.operationType)}`]
|
||||
this.generateConf = data
|
||||
func && func(data)
|
||||
},
|
||||
execRun(data) {
|
||||
this.AssembleFormData()
|
||||
this.drawerVisible = true
|
||||
},
|
||||
execDownload(data) {
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, data.fileName)
|
||||
},
|
||||
execCopy(data) {
|
||||
document.getElementById('copyNode').click()
|
||||
},
|
||||
empty() {
|
||||
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
|
||||
() => {
|
||||
this.drawingList = []
|
||||
this.idGlobal = 100
|
||||
}
|
||||
)
|
||||
},
|
||||
drawingItemCopy(item, list) {
|
||||
let clone = deepClone(item)
|
||||
clone = this.createIdAndKey(clone)
|
||||
list.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
drawingItemDelete(index, list) {
|
||||
list.splice(index, 1)
|
||||
this.$nextTick(() => {
|
||||
const len = this.drawingList.length
|
||||
if (len) {
|
||||
this.activeFormItem(this.drawingList[len - 1])
|
||||
}
|
||||
})
|
||||
},
|
||||
generateCode() {
|
||||
const { type } = this.generateConf
|
||||
this.AssembleFormData()
|
||||
const script = vueScript(makeUpJs(this.formData, type))
|
||||
const html = vueTemplate(makeUpHtml(this.formData, type))
|
||||
const css = cssStyle(makeUpCss(this.formData))
|
||||
return beautifier.html(html + script + css, beautifierConf.html)
|
||||
},
|
||||
showJson() {
|
||||
this.AssembleFormData()
|
||||
this.jsonDrawerVisible = true
|
||||
},
|
||||
download() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = true
|
||||
this.operationType = 'download'
|
||||
},
|
||||
run() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'run'
|
||||
},
|
||||
copy() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'copy'
|
||||
},
|
||||
tagChange(newTag) {
|
||||
newTag = this.cloneComponent(newTag)
|
||||
const config = newTag.__config__
|
||||
newTag.__vModel__ = this.activeData.__vModel__
|
||||
config.formId = this.activeId
|
||||
config.span = this.activeData.__config__.span
|
||||
this.activeData.__config__.tag = config.tag
|
||||
this.activeData.__config__.tagIcon = config.tagIcon
|
||||
this.activeData.__config__.document = config.document
|
||||
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
|
||||
config.defaultValue = this.activeData.__config__.defaultValue
|
||||
}
|
||||
Object.keys(newTag).forEach(key => {
|
||||
if (this.activeData[key] !== undefined) {
|
||||
newTag[key] = this.activeData[key]
|
||||
}
|
||||
})
|
||||
this.activeData = newTag
|
||||
this.updateDrawingList(newTag, this.drawingList)
|
||||
},
|
||||
updateDrawingList(newTag, list) {
|
||||
const index = list.findIndex(item => item.__config__.formId === this.activeId)
|
||||
if (index > -1) {
|
||||
list.splice(index, 1, newTag)
|
||||
} else {
|
||||
list.forEach(item => {
|
||||
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshJson(data) {
|
||||
this.drawingList = deepClone(data.fields)
|
||||
delete data.fields
|
||||
this.formConf = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
@import '@/styles/home';
|
||||
</style>
|
@ -1,161 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="表单名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入表单名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:form:create']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" />
|
||||
<el-table-column label="表单名" align="center" prop="name" />
|
||||
<el-table-column label="开启状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:form:query']">详情</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:form:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:form:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!--表单配置详情-->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<div class="test-form">
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {deleteForm, getForm, getFormPage} from "@/api/bpm/form";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
|
||||
export default {
|
||||
name: "BpmForm",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 工作流的列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
},
|
||||
// 表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getFormPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
getForm(row.id).then(response => {
|
||||
// 设置值
|
||||
const data = response.data
|
||||
this.detailForm = {
|
||||
...JSON.parse(data.conf),
|
||||
fields: decodeFields(data.fields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
})
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push({
|
||||
name: "BpmFormEditor"
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.$router.push({
|
||||
name: "BpmFormEditor",
|
||||
query:{
|
||||
formId: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除工作表单的编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteForm(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,246 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="组名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入组名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:user-group:create']">新增</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" />
|
||||
<el-table-column label="组名" align="center" prop="name" />
|
||||
<el-table-column label="描述" align="center" prop="description" />
|
||||
<el-table-column label="成员" align="center">
|
||||
<template v-slot="scope">
|
||||
<span v-for="userId in scope.row.memberUserIds">
|
||||
{{ getUserNickname(userId) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:user-group:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:user-group:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="组名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入组名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="form.description" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="成员" prop="memberUserIds">
|
||||
<el-select v-model="form.memberUserIds" multiple placeholder="请选择成员">
|
||||
<el-option v-for="user in users" :key="parseInt(user.id)" :label="user.nickname" :value="parseInt(user.id)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createUserGroup, updateUserGroup, deleteUserGroup, getUserGroup, getUserGroupPage } from "@/api/bpm/userGroup";
|
||||
import {CommonStatusEnum} from "@/utils/constants";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: "BpmUserGroup",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户组列表
|
||||
list: [],
|
||||
// 用户列表
|
||||
users: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
status: null,
|
||||
createTime: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "组名不能为空", trigger: "blur" }],
|
||||
description: [{ required: true, message: "描述不能为空", trigger: "blur" }],
|
||||
memberUserIds: [{ required: true, message: "成员不能为空", trigger: "change" }],
|
||||
status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// 获得用户列表
|
||||
listSimpleUsers().then(response => {
|
||||
this.users = response.data;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getUserGroupPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
memberUserIds: [],
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加用户组";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id;
|
||||
getUserGroup(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改用户组";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateUserGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createUserGroup(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除用户组编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteUserGroup(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
getUserNickname(userId) {
|
||||
for (const user of this.users) {
|
||||
if (user.id === userId) {
|
||||
return user.nickname;
|
||||
}
|
||||
}
|
||||
return '未知(' + userId + ')';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,548 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="queryParams.key" placeholder="请输入流程标识" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable style="width: 240px;"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" placeholder="流程分类" clearable style="width: 240px">
|
||||
<el-option v-for="dict in categoryDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:model:create']">新建流程</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
|
||||
v-hasPermi="['bpm:model:import']">导入流程</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程标识" align="center" prop="key" />
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表单信息" align="center" prop="formType" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formName }}</span>
|
||||
</el-button>
|
||||
<el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)">
|
||||
<span>{{ scope.row.formCustomCreatePath }}</span>
|
||||
</el-button>
|
||||
<label v-else>暂无表单</label>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最新部署的流程定义" align="center">
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row.processDefinition">v{{ scope.row.processDefinition.version }}</el-tag>
|
||||
<el-tag size="medium" type="warning" v-else>未部署</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-switch v-if="scope.row.processDefinition" v-model="scope.row.processDefinition.suspensionState"
|
||||
:active-value="1" :inactive-value="2" @change="handleChangeState(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="450" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['bpm:model:update']">修改流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
|
||||
v-hasPermi="['bpm:model:update']">设计流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:query']">分配规则</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
|
||||
v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(scope.row)"
|
||||
v-hasPermi="['bpm:process-definition:query']">流程定义</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['bpm:model:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 流程表单配置详情 -->
|
||||
<el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 流程模型图的预览 -->
|
||||
<el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="!!form.id" />
|
||||
<el-tooltip v-if="!form.id" class="item" effect="light" content="新建后,流程标识不可修改!" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
<el-tooltip v-else class="item" effect="light" content="流程标识不可修改!" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入流程名称" :disabled="!!form.id" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.id" label="流程分类" prop="category">
|
||||
<el-select v-model="form.category" placeholder="请选择流程分类" clearable style="width: 100%">
|
||||
<el-option v-for="dict in categoryDictDatas" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程描述" prop="description">
|
||||
<el-input type="textarea" v-model="form.description" clearable />
|
||||
</el-form-item>
|
||||
<div v-if="form.id">
|
||||
<el-form-item label="表单类型" prop="formType">
|
||||
<el-radio-group v-model="form.formType">
|
||||
<el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
|
||||
{{dict.label}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 10" label="流程表单" prop="formId">
|
||||
<el-select v-model="form.formId" clearable style="width: 100%">
|
||||
<el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" >
|
||||
<el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
|
||||
<el-tooltip class="item" effect="light" content="自定义表单的提交路径,使用 Vue 的路由地址,例如说:bpm/oa/leave/create" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath">
|
||||
<el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
|
||||
<el-tooltip class="item" effect="light" content="自定义表单的查看路径,使用 Vue 的路由地址,例如说:bpm/oa/leave/view" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
|
||||
<el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
|
||||
:disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
|
||||
:auto-upload="false" name="bpmnFile" :data="upload.form" drag>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处,或
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“bpm”或“xml”格式文件!</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<el-form ref="uploadForm" size="mini" label-width="90px" :model="upload.form" :rules="upload.rules" @submit.native.prevent>
|
||||
<el-form-item label="流程标识" prop="key">
|
||||
<el-input v-model="upload.form.key" placeholder="请输入流标标识" style="width: 250px;" />
|
||||
<el-tooltip class="item" effect="light" content="新建后,流程标识不可修改!" placement="top">
|
||||
<i style="padding-left: 5px;" class="el-icon-question" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input v-model="upload.form.name" placeholder="请输入流程名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="流程描述" prop="description">
|
||||
<el-input type="textarea" v-model="upload.form.description" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="uploadClose">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- ========== 流程任务分配规则 ========== -->
|
||||
<taskAssignRuleDialog ref="taskAssignRuleDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deleteModel,
|
||||
deployModel,
|
||||
getModelPage,
|
||||
getModel,
|
||||
updateModelState,
|
||||
createModel,
|
||||
updateModel
|
||||
} from "@/api/bpm/model";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {getForm, getSimpleForms} from "@/api/bpm/form";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getBaseHeader} from "@/utils/request";
|
||||
import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
|
||||
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "BpmModel",
|
||||
components: {
|
||||
Parser,
|
||||
Treeselect,
|
||||
taskAssignRuleDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
showBpmnOpen: false,
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 流程表单详情
|
||||
detailOpen: false,
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// 流程表单
|
||||
title: "",
|
||||
open: false,
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
formId: [{ required: true, message: "业务表单不能为空", trigger: "blur" }],
|
||||
category: [{ required: true, message: "流程分类不能为空", trigger: "blur" }],
|
||||
formCustomCreatePath: [{ required: true, message: "表单提交路由不能为空", trigger: "blur" }],
|
||||
formCustomViewPath: [{ required: true, message: "表单查看路由不能为空", trigger: "blur" }],
|
||||
},
|
||||
|
||||
// 流程导入参数
|
||||
upload: {
|
||||
// 是否显示弹出层(用户导入)
|
||||
open: false,
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 设置上传的请求头部
|
||||
headers: getBaseHeader(),
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + '/admin-api' + "/bpm/model/import",
|
||||
// 表单
|
||||
form: {},
|
||||
// 校验规则
|
||||
rules: {
|
||||
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
|
||||
},
|
||||
},
|
||||
// 流程表单的下拉框的数据
|
||||
forms: [],
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
|
||||
taskAssignRuleDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// 获得流程表单的下拉框的数据
|
||||
getSimpleForms().then(response => {
|
||||
this.forms = response.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程模型列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getModelPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
category: undefined,
|
||||
formType: undefined,
|
||||
formId: undefined,
|
||||
formCustomCreatePath: undefined,
|
||||
formCustomViewPath: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.title = "新建模型";
|
||||
this.open = true;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
this.title = "修改模型";
|
||||
this.open = true;
|
||||
// 设置 form
|
||||
this.form = {
|
||||
...row
|
||||
};
|
||||
// 触发一次校验
|
||||
// this.$refs["form"].validate();
|
||||
},
|
||||
/** 设计按钮操作 */
|
||||
handleDesign(row) {
|
||||
this.$router.push({
|
||||
name: "BpmModelEditor",
|
||||
query:{
|
||||
modelId: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 更新
|
||||
if (this.form.id) {
|
||||
updateModel({
|
||||
...this.form,
|
||||
formId: this.form.formType === 10 ? this.form.formId : undefined,
|
||||
formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
|
||||
formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("修改模型成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 创建
|
||||
createModel(this.form).then(response => {
|
||||
this.open = false;
|
||||
this.getList();
|
||||
this.$alert('<strong>新建模型成功!</strong>后续需要执行如下 4 个步骤:' +
|
||||
'<div>1. 点击【修改流程】按钮,配置流程的分类、表单信息</div>' +
|
||||
'<div>2. 点击【设计流程】按钮,绘制流程图</div>' +
|
||||
'<div>3. 点击【分配规则】按钮,设置每个用户任务的审批人</div>' +
|
||||
'<div>4. 点击【发布流程】按钮,完成流程的最终发布</div>' +
|
||||
'另外,每次流程修改后,都需要点击【发布流程】按钮,才能正式生效!!!',
|
||||
'重要提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const that = this;
|
||||
this.$modal.confirm('是否删除该流程!!').then(function() {
|
||||
deleteModel(row.id).then(response => {
|
||||
that.getList();
|
||||
that.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 部署按钮操作 */
|
||||
handleDeploy(row) {
|
||||
const that = this;
|
||||
this.$modal.confirm('是否部署该流程!!').then(function() {
|
||||
deployModel(row.id).then(response => {
|
||||
that.getList();
|
||||
that.$modal.msgSuccess("部署成功");
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 流程表单的详情按钮操作 */
|
||||
handleFormDetail(row) {
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
getForm(row.formId).then(response => {
|
||||
// 设置值
|
||||
const data = response.data
|
||||
this.detailForm = {
|
||||
...JSON.parse(data.conf),
|
||||
fields: decodeFields(data.fields)
|
||||
}
|
||||
// 弹窗打开
|
||||
this.detailOpen = true
|
||||
})
|
||||
// 业务表单
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
}
|
||||
},
|
||||
/** 流程图的详情按钮操作 */
|
||||
handleBpmnDetail(row) {
|
||||
getModel(row.id).then(response => {
|
||||
this.bpmnXML = response.data.bpmnXml
|
||||
// 弹窗打开
|
||||
this.showBpmnOpen = true
|
||||
})
|
||||
},
|
||||
/** 跳转流程定义的列表 */
|
||||
handleDefinitionList(row) {
|
||||
this.$router.push({
|
||||
name: "BpmProcessDefinition",
|
||||
query:{
|
||||
key: row.key
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 更新状态操作 */
|
||||
handleChangeState(row) {
|
||||
const id = row.id;
|
||||
let state = row.processDefinition.suspensionState;
|
||||
let statusState = state === 1 ? '激活' : '挂起';
|
||||
this.$modal.confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?').then(function() {
|
||||
return updateModelState(id, state);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess(statusState + "成功");
|
||||
}).catch(() => {
|
||||
// 取消后,进行恢复按钮
|
||||
row.processDefinition.suspensionState = (state === 1 ? 2 : 1);
|
||||
});
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImport() {
|
||||
this.upload.open = true;
|
||||
},
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.$modal.msgError(response.msg)
|
||||
return;
|
||||
}
|
||||
// 重置表单
|
||||
this.uploadClose();
|
||||
// 提示,并刷新
|
||||
this.$modal.msgSuccess("导入流程成功!请点击【设计流程】按钮,进行编辑保存后,才可以进行【发布流程】");
|
||||
this.getList();
|
||||
},
|
||||
uploadClose() {
|
||||
// 关闭弹窗
|
||||
this.upload.open = false;
|
||||
// 重置上传状态和文件
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
// 重置表单
|
||||
this.upload.form = {};
|
||||
this.resetForm("uploadForm");
|
||||
},
|
||||
/** 提交上传文件 */
|
||||
submitFileForm() {
|
||||
this.$refs["uploadForm"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
this.$refs.upload.submit();
|
||||
})
|
||||
},
|
||||
/** 处理任务分配规则列表的按钮操作 */
|
||||
handleAssignRule(row) {
|
||||
this.$refs['taskAssignRuleDialog'].initModel(row.id);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
@ -1,170 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<!-- 流程设计器,负责绘制流程等 -->
|
||||
<my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
|
||||
keyboard ref="processDesigner" @init-finished="initModeler"
|
||||
@save="save"/>
|
||||
|
||||
<!-- 流程属性器,负责编辑每个流程节点的属性 -->
|
||||
<my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix" class="process-panel"
|
||||
:model="model" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import translations from "@/components/bpmnProcessDesigner/src/translations";
|
||||
// 自定义元素选中时的弹出菜单(修改 默认任务 为 用户任务)
|
||||
import CustomContentPadProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/content-pad";
|
||||
// 自定义左侧菜单(修改 默认任务 为 用户任务)
|
||||
import CustomPaletteProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/palette";
|
||||
// import xmlObj2json from "./utils/xml2json";
|
||||
import MyProcessPalette from "@/components/bpmnProcessDesigner/package/palette/ProcessPalette";
|
||||
import {createModel, getModel, updateModel} from "@/api/bpm/model";
|
||||
// 自定义侧边栏
|
||||
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
|
||||
|
||||
export default {
|
||||
name: "BpmModelEditor",
|
||||
components: { MyProcessPalette },
|
||||
data() {
|
||||
return {
|
||||
xmlString: undefined, // BPMN XML
|
||||
modeler: null,
|
||||
reloadIndex: 0,
|
||||
controlDrawerVisible: false,
|
||||
translationsSelf: translations,
|
||||
controlForm: {
|
||||
simulation: true,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: "flowable",
|
||||
headerButtonSize: "mini",
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
|
||||
},
|
||||
addis: {
|
||||
CustomContentPadProvider,
|
||||
CustomPaletteProvider
|
||||
},
|
||||
// 流程模型的信息
|
||||
model: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 如果 modelId 非空,说明是修改流程模型
|
||||
const modelId = this.$route.query && this.$route.query.modelId
|
||||
if (modelId) {
|
||||
getModel(modelId).then(response => {
|
||||
this.xmlString = response.data.bpmnXml
|
||||
this.model = {
|
||||
...response.data,
|
||||
bpmnXml: undefined, // 清空 bpmnXml 属性
|
||||
}
|
||||
// this.controlForm.processId = response.data.key
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initModeler(modeler) {
|
||||
setTimeout(() => {
|
||||
this.modeler = modeler;
|
||||
console.log(modeler);
|
||||
}, 10);
|
||||
},
|
||||
save(bpmnXml) {
|
||||
const data = {
|
||||
...this.model,
|
||||
bpmnXml: bpmnXml, // this.bpmnXml 只是初始化流程图,后续修改无法通过它获得
|
||||
}
|
||||
|
||||
// 修改的提交
|
||||
if (data.id) {
|
||||
updateModel(data).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
// 跳转回去
|
||||
this.close()
|
||||
})
|
||||
return
|
||||
}
|
||||
// 添加的提交
|
||||
createModel(data).then(response => {
|
||||
this.$modal.msgSuccess("保存成功")
|
||||
// 跳转回去
|
||||
this.close()
|
||||
})
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$tab.closeOpenPage({ path: "/bpm/manager/model" });
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
//body {
|
||||
// overflow: hidden;
|
||||
// margin: 0;
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
//.app {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
// display: inline-grid;
|
||||
// grid-template-columns: 100px auto max-content;
|
||||
//}
|
||||
.demo-control-bar {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
z-index: 1;
|
||||
.open-control-dialog {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
font-size: 32px;
|
||||
background: rgba(64, 158, 255, 1);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO 芋艿:去掉多余的 faq
|
||||
//.info-tip {
|
||||
// position: fixed;
|
||||
// top: 40px;
|
||||
// right: 500px;
|
||||
// z-index: 10;
|
||||
// color: #999999;
|
||||
//}
|
||||
|
||||
.control-form {
|
||||
.el-radio {
|
||||
width: 100%;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.element-overlays {
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 4px;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
.process-panel__container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 55px;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
</style>
|
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker clearable size="small" v-model="form.startTime" type="date" value-format="timestamp" placeholder="选择开始时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker clearable size="small" v-model="form.endTime" type="date" value-format="timestamp" placeholder="选择结束时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请假类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择">
|
||||
<el-option v-for="dict in typeDictData" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因" prop="reason">
|
||||
<el-col :span="10">
|
||||
<el-input type="textarea" :rows="3" v-model="form.reason" placeholder="请输入原因" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提 交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createLeave} from "@/api/bpm/leave"
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
export default {
|
||||
name: "BpmOALeaveCreate",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单参数
|
||||
form: {
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
type: undefined,
|
||||
reason: undefined,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
|
||||
endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
|
||||
type: [{ required: true, message: "请假类型不能为空", trigger: "change" }],
|
||||
reason: [{ required: true, message: "请假原因不能为空", trigger: "change" }],
|
||||
},
|
||||
|
||||
typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加的提交
|
||||
createLeave(this.form).then(response => {
|
||||
this.$modal.msgSuccess("发起成功");
|
||||
this.$tab.closeOpenPage({ path: "/bpm/oa/leave" });
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-form ref="form" :model="form" label-width="100px">
|
||||
<el-form-item label="开始时间:" prop="startTime"> {{parseTime(form.startTime, '{y}-{m}-{d}')}} </el-form-item>
|
||||
<el-form-item label="结束时间:" prop="endTime"> {{parseTime(form.endTime, '{y}-{m}-{d}')}} </el-form-item>
|
||||
<el-form-item label="请假类型:" prop="type">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因:" prop="reason"> {{ form.reason }}</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLeave} from "@/api/bpm/leave"
|
||||
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
|
||||
export default {
|
||||
name: "BpmOALeaveDetail",
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: [String, Number],
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
leaveId: undefined, // 请假编号
|
||||
// 表单参数
|
||||
form: {
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
type: undefined,
|
||||
reason: undefined,
|
||||
},
|
||||
|
||||
typeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.leaveId = this.id || this.$route.query.id;
|
||||
if (!this.leaveId) {
|
||||
this.$message.error('未传递 id 参数,无法查看 OA 请假信息');
|
||||
return;
|
||||
}
|
||||
this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
/** 获得请假信息 */
|
||||
getDetail() {
|
||||
getLeave(this.leaveId).then(response => {
|
||||
this.form = response.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,173 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="请假类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择请假类型" clearable>
|
||||
<el-option v-for="dict in leaveTypeDictData" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="结果" prop="result">
|
||||
<el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原因" prop="reason">
|
||||
<el-input v-model="queryParams.reason" placeholder="请输入原因" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini"
|
||||
v-hasPermi="['bpm:oa-leave:create']" @click="handleAdd">发起请假</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="申请编号" align="center" prop="id" />
|
||||
<el-table-column label="状态" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间" align="center" prop="startTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.startTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" align="center" prop="endTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请假类型" align="center" prop="type">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="scope.row.type"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原因" align="center" prop="reason" />
|
||||
<el-table-column label="申请时间" align="center" prop="applyTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleCancel(scope.row)"
|
||||
v-hasPermi="['bpm:oa-leave:create']" v-if="scope.row.result === 1">取消请假</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:oa-leave:query']">详情</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleProcessDetail(scope.row)">审批进度</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLeavePage } from "@/api/bpm/leave"
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
|
||||
import {cancelProcessInstance} from "@/api/bpm/processInstance";
|
||||
|
||||
export default {
|
||||
name: "BpmOALeave",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 请假申请列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
result: null,
|
||||
type: null,
|
||||
reason: null,
|
||||
createTime: []
|
||||
},
|
||||
|
||||
leaveTypeDictData: getDictDatas(DICT_TYPE.BPM_OA_LEAVE_TYPE),
|
||||
leaveResultData: getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getLeavePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.$router.push({ name: "BpmOALeaveCreate"});
|
||||
},
|
||||
/** 详情按钮操作 */
|
||||
handleDetail(row) {
|
||||
this.$router.push({ name: "BpmOALeaveDetail", query: { id: row.id}});
|
||||
},
|
||||
/** 查看审批进度的操作 */
|
||||
handleProcessDetail(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstanceId}});
|
||||
},
|
||||
/** 取消请假 */
|
||||
handleCancel(row) {
|
||||
const id = row.processInstanceId;
|
||||
this.$prompt('请输入取消原因?', "取消流程", {
|
||||
type: 'warning',
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空,且非空格
|
||||
inputErrorMessage: "取消原因不能为空",
|
||||
}).then(({ value }) => {
|
||||
return cancelProcessInstance(id, value);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("取消成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 第一步,通过流程定义的列表,选择对应的流程 -->
|
||||
<div v-if="!selectProcessInstance">
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="流程名称" align="center" prop="name" width="200">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleBpmnDetail(scope.row)">
|
||||
<span>{{ scope.row.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程分类" align="center" prop="category" width="100">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 第二步,填写表单,进行流程的提交 -->
|
||||
<div v-else>
|
||||
<el-card class="box-card" >
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
|
||||
<el-button style="float: right;" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6">
|
||||
<div>
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML, getProcessDefinitionList} from "@/api/bpm/definition";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {createProcessInstance} from "@/api/bpm/processInstance";
|
||||
|
||||
// 流程实例的发起
|
||||
export default {
|
||||
name: "ProcessInstanceCreate",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 表格数据
|
||||
list: [],
|
||||
|
||||
// 流程表单详情
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
|
||||
// 流程表单
|
||||
selectProcessInstance: undefined, // 选择的流程实例
|
||||
|
||||
// 数据字典
|
||||
categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getProcessDefinitionList({
|
||||
suspensionState: 1
|
||||
}).then(response => {
|
||||
this.list = response.data
|
||||
this.loading = false
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 处理选择流程的按钮操作 **/
|
||||
handleSelect(row) {
|
||||
// 设置选择的流程
|
||||
this.selectProcessInstance = row;
|
||||
|
||||
// 流程表单
|
||||
if (row.formId) {
|
||||
// 设置对应的表单
|
||||
this.detailForm = {
|
||||
...JSON.parse(row.formConf),
|
||||
fields: decodeFields(row.formFields)
|
||||
}
|
||||
|
||||
// 加载流程图
|
||||
getProcessDefinitionBpmnXML(row.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
})
|
||||
} else if (row.formCustomCreatePath) {
|
||||
this.$router.push({ path: row.formCustomCreatePath});
|
||||
// 这里暂时无需加载流程图,因为跳出到另外个 Tab;
|
||||
}
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm(params) {
|
||||
if (!params) {
|
||||
return;
|
||||
}
|
||||
// 设置表单禁用
|
||||
const conf = params.conf;
|
||||
conf.disabled = true; // 表单禁用
|
||||
conf.formBtns = false; // 按钮隐藏
|
||||
|
||||
// 提交表单,创建流程
|
||||
const variables = params.values;
|
||||
createProcessInstance({
|
||||
processDefinitionId: this.selectProcessInstance.id,
|
||||
variables: variables
|
||||
}).then(response => {
|
||||
this.$modal.msgSuccess("发起流程成功");
|
||||
// 关闭当前窗口
|
||||
this.$tab.closeOpenPage();
|
||||
this.$router.go(-1);
|
||||
}).catch(() => {
|
||||
conf.disabled = false; // 表单开启
|
||||
conf.formBtns = true; // 按钮展示
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 审批信息 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading" v-for="(item, index) in runningTasks" :key="index">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
|
||||
</div>
|
||||
<el-col :span="16" :offset="6" >
|
||||
<el-form :ref="'form' + index" :model="auditForms[index]" :rules="auditRule" label-width="100px">
|
||||
<el-form-item label="流程名" v-if="processInstance && processInstance.name">
|
||||
{{ processInstance.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
|
||||
{{ processInstance.startUser.nickname }}
|
||||
<el-tag type="info" size="mini">{{ processInstance.startUser.deptName }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="审批建议" prop="reason">
|
||||
<el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px;">
|
||||
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(item, true)">通过</el-button>
|
||||
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(item, false)">不通过</el-button>
|
||||
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleUpdateAssignee(item)">转办</el-button>
|
||||
<el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派</el-button>
|
||||
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBack(item)">退回</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<!-- 申请信息 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
|
||||
</div>
|
||||
<el-col v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 10"
|
||||
:span="16" :offset="6">
|
||||
<div >
|
||||
<parser :key="new Date().getTime()" :form-conf="detailForm" />
|
||||
</div>
|
||||
</el-col>
|
||||
<div v-if="this.processInstance.processDefinition && this.processInstance.processDefinition.formType === 20">
|
||||
<async-biz-form-component :id="this.processInstance.businessKey"></async-biz-form-component>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 审批记录 -->
|
||||
<el-card class="box-card" v-loading="tasksLoad">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">审批记录</span>
|
||||
</div>
|
||||
<el-col :span="16" :offset="4" >
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in tasks" :key="index"
|
||||
:icon="getTimelineItemIcon(item)" :type="getTimelineItemType(item)">
|
||||
<p style="font-weight: 700">任务:{{ item.name }}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
|
||||
审批人:{{ item.assigneeUser.nickname }}
|
||||
<el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
|
||||
</label>
|
||||
<label style="font-weight: normal" v-if="item.createTime">创建时间:</label>
|
||||
<label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
|
||||
<label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间:</label>
|
||||
<label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{ parseTime(item.endTime) }}</label>
|
||||
<label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时:</label>
|
||||
<label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal"> {{ getDateStar(item.durationInMillis) }} </label>
|
||||
<p v-if="item.reason">
|
||||
<el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
|
||||
</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
|
||||
<!-- 高亮流程图 -->
|
||||
<el-card class="box-card" v-loading="processInstanceLoading">
|
||||
<div slot="header" class="clearfix">
|
||||
<span class="el-icon-picture-outline">流程图</span>
|
||||
</div>
|
||||
<my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" :activityData="activityList"
|
||||
:processInstanceData="processInstance" :taskData="tasks" />
|
||||
</el-card>
|
||||
|
||||
<!-- 对话框(转派审批人) -->
|
||||
<el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
|
||||
<el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules" label-width="110px">
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
|
||||
<el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProcessDefinitionBpmnXML} from "@/api/bpm/definition";
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import store from "@/store";
|
||||
import {decodeFields} from "@/utils/formGenerator";
|
||||
import Parser from '@/components/parser/Parser'
|
||||
import {getProcessInstance} from "@/api/bpm/processInstance";
|
||||
import {approveTask, getTaskListByProcessInstanceId, rejectTask, updateTaskAssignee} from "@/api/bpm/task";
|
||||
import {getDate} from "@/utils/dateUtils";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
import {getActivityList} from "@/api/bpm/activity";
|
||||
import Vue from "vue";
|
||||
|
||||
// 流程实例的详情页,可用于审批
|
||||
export default {
|
||||
name: "ProcessInstanceDetail",
|
||||
components: {
|
||||
Parser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
processInstanceLoading: true,
|
||||
// 流程实例
|
||||
id: undefined, // 流程实例的编号
|
||||
processInstance: {},
|
||||
|
||||
// 流程表单详情
|
||||
detailForm: {
|
||||
fields: []
|
||||
},
|
||||
|
||||
// BPMN 数据
|
||||
bpmnXML: null,
|
||||
bpmnControlForm: {
|
||||
prefix: "flowable"
|
||||
},
|
||||
activityList: [],
|
||||
|
||||
// 审批记录
|
||||
tasksLoad: true,
|
||||
tasks: [],
|
||||
|
||||
// 审批表单
|
||||
runningTasks: [],
|
||||
auditForms: [],
|
||||
auditRule: {
|
||||
reason: [{ required: true, message: "审批建议不能为空", trigger: "blur" }],
|
||||
},
|
||||
|
||||
// 转派审批人
|
||||
userOptions: [],
|
||||
updateAssignee: {
|
||||
open: false,
|
||||
form: {
|
||||
assigneeUserId: undefined,
|
||||
},
|
||||
rules: {
|
||||
assigneeUserId: [{ required: true, message: "新审批人不能为空", trigger: "change" }],
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
if (!this.id) {
|
||||
this.$message.error('未传递 id 参数,无法查看流程信息');
|
||||
return;
|
||||
}
|
||||
this.getDetail();
|
||||
|
||||
// 获得用户列表
|
||||
this.userOptions = [];
|
||||
listSimpleUsers().then(response => {
|
||||
this.userOptions.push(...response.data);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 获得流程实例 */
|
||||
getDetail() {
|
||||
// 获得流程实例相关
|
||||
this.processInstanceLoading = true;
|
||||
getProcessInstance(this.id).then(response => {
|
||||
if (!response.data) {
|
||||
this.$message.error('查询不到流程信息!');
|
||||
return;
|
||||
}
|
||||
// 设置流程信息
|
||||
this.processInstance = response.data;
|
||||
|
||||
//将业务表单,注册为动态组件
|
||||
const path = this.processInstance.processDefinition.formCustomViewPath;
|
||||
Vue.component("async-biz-form-component", function(resolve) {
|
||||
require([`@/views${path}`], resolve);
|
||||
});
|
||||
|
||||
// 设置表单信息
|
||||
if (this.processInstance.processDefinition.formType === 10) {
|
||||
this.detailForm = {
|
||||
...JSON.parse(this.processInstance.processDefinition.formConf),
|
||||
disabled: true, // 表单禁用
|
||||
formBtns: false, // 按钮隐藏
|
||||
fields: decodeFields(this.processInstance.processDefinition.formFields)
|
||||
}
|
||||
// 设置表单的值
|
||||
this.detailForm.fields.forEach(item => {
|
||||
const val = this.processInstance.formVariables[item.__vModel__]
|
||||
if (val) {
|
||||
item.__config__.defaultValue = val
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 加载流程图
|
||||
getProcessDefinitionBpmnXML(this.processInstance.processDefinition.id).then(response => {
|
||||
this.bpmnXML = response.data
|
||||
});
|
||||
// 加载活动列表
|
||||
getActivityList({
|
||||
processInstanceId: this.processInstance.id
|
||||
}).then(response => {
|
||||
this.activityList = response.data;
|
||||
});
|
||||
|
||||
// 取消加载中
|
||||
this.processInstanceLoading = false;
|
||||
});
|
||||
|
||||
// 获得流程任务列表(审批记录)
|
||||
this.tasksLoad = true;
|
||||
this.runningTasks = [];
|
||||
this.auditForms = [];
|
||||
getTaskListByProcessInstanceId(this.id).then(response => {
|
||||
// 审批记录
|
||||
this.tasks = [];
|
||||
// 移除已取消的审批
|
||||
response.data.forEach(task => {
|
||||
if (task.result !== 4) {
|
||||
this.tasks.push(task);
|
||||
}
|
||||
});
|
||||
// 排序,将未完成的排在前面,已完成的排在后面;
|
||||
this.tasks.sort((a, b) => {
|
||||
// 有已完成的情况,按照完成时间倒序
|
||||
if (a.endTime && b.endTime) {
|
||||
return b.endTime - a.endTime;
|
||||
} else if (a.endTime) {
|
||||
return 1;
|
||||
} else if (b.endTime) {
|
||||
return -1;
|
||||
// 都是未完成,按照创建时间倒序
|
||||
} else {
|
||||
return b.createTime - a.createTime;
|
||||
}
|
||||
});
|
||||
|
||||
// 需要审核的记录
|
||||
const userId = store.getters.userId;
|
||||
this.tasks.forEach(task => {
|
||||
if (task.result !== 1) { // 只有待处理才需要
|
||||
return;
|
||||
}
|
||||
if (!task.assigneeUser || task.assigneeUser.id !== userId) { // 自己不是处理人
|
||||
return;
|
||||
}
|
||||
this.runningTasks.push({...task});
|
||||
this.auditForms.push({
|
||||
reason: ''
|
||||
})
|
||||
});
|
||||
|
||||
// 取消加载中
|
||||
this.tasksLoad = false;
|
||||
});
|
||||
},
|
||||
getDateStar(ms) {
|
||||
return getDate(ms);
|
||||
},
|
||||
getTimelineItemIcon(item) {
|
||||
if (item.result === 1) {
|
||||
return 'el-icon-time';
|
||||
}
|
||||
if (item.result === 2) {
|
||||
return 'el-icon-check';
|
||||
}
|
||||
if (item.result === 3) {
|
||||
return 'el-icon-close';
|
||||
}
|
||||
if (item.result === 4) {
|
||||
return 'el-icon-remove-outline';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
getTimelineItemType(item) {
|
||||
if (item.result === 1) {
|
||||
return 'primary';
|
||||
}
|
||||
if (item.result === 2) {
|
||||
return 'success';
|
||||
}
|
||||
if (item.result === 3) {
|
||||
return 'danger';
|
||||
}
|
||||
if (item.result === 4) {
|
||||
return 'info';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
/** 处理审批通过和不通过的操作 */
|
||||
handleAudit(task, pass) {
|
||||
const index = this.runningTasks.indexOf(task);
|
||||
this.$refs['form' + index][0].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const data = {
|
||||
id: task.id,
|
||||
reason: this.auditForms[index].reason
|
||||
}
|
||||
if (pass) {
|
||||
approveTask(data).then(response => {
|
||||
this.$modal.msgSuccess("审批通过成功!");
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
} else {
|
||||
rejectTask(data).then(response => {
|
||||
this.$modal.msgSuccess("审批不通过成功!");
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 处理转派审批人 */
|
||||
handleUpdateAssignee(task) {
|
||||
// 设置表单
|
||||
this.resetUpdateAssigneeForm();
|
||||
this.updateAssignee.form.id = task.id;
|
||||
// 设置为打开
|
||||
this.updateAssignee.open = true;
|
||||
},
|
||||
/** 提交转派审批人 */
|
||||
submitUpdateAssigneeForm() {
|
||||
this.$refs['updateAssigneeForm'].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
updateTaskAssignee(this.updateAssignee.form).then(response => {
|
||||
this.$modal.msgSuccess("转派任务成功!");
|
||||
this.updateAssignee.open = false;
|
||||
this.getDetail(); // 获得最新详情
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 取消转派审批人 */
|
||||
cancelUpdateAssigneeForm() {
|
||||
this.updateAssignee.open = false;
|
||||
this.resetUpdateAssigneeForm();
|
||||
},
|
||||
/** 重置转派审批人 */
|
||||
resetUpdateAssigneeForm() {
|
||||
this.updateAssignee.form = {
|
||||
id: undefined,
|
||||
assigneeUserId: undefined,
|
||||
};
|
||||
this.resetForm("updateAssigneeForm");
|
||||
},
|
||||
/** 处理审批退回的操作 */
|
||||
handleDelegate(task) {
|
||||
this.$modal.msgError("暂不支持【委派】功能,可以使用【转派】替代!");
|
||||
},
|
||||
/** 处理审批退回的操作 */
|
||||
handleBack(task) {
|
||||
this.$modal.msgError("暂不支持【退回】功能!");
|
||||
// 可参考 http://blog.wya1.com/article/636697030/details/7296
|
||||
// const data = {
|
||||
// id: task.id,
|
||||
// assigneeUserId: 1
|
||||
// }
|
||||
// backTask(data).then(response => {
|
||||
// this.$modal.msgSuccess("回退成功!");
|
||||
// this.getDetail(); // 获得最新详情
|
||||
// });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-process-designer {
|
||||
height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
@ -1,182 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属流程" prop="processDefinitionId">
|
||||
<el-input v-model="queryParams.processDefinitionId" placeholder="请输入流程定义的编号" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程分类" prop="category">
|
||||
<el-select v-model="queryParams.category" placeholder="请选择流程分类" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="提交时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果" prop="result">
|
||||
<el-select v-model="queryParams.result" placeholder="请选择流结果" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['bpm:process-instance:query']">发起流程</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="编号" align="center" prop="id" width="320" />
|
||||
<el-table-column label="流程名" align="center" prop="name" />
|
||||
<el-table-column label="流程分类" align="center" prop="category">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前审批任务" align="center" prop="tasks">
|
||||
<template v-slot="scope">
|
||||
<el-button v-for="task in scope.row.tasks" :key="task.id" type="text"">
|
||||
<span>{{ task.name }}</span>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结果" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提交时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="small" icon="el-icon-delete" v-if="scope.row.result === 1"
|
||||
v-hasPermi="['bpm:process-instance:cancel']" @click="handleCancel(scope.row)">取消</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
|
||||
v-hasPermi="['bpm:process-instance:query']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
|
||||
|
||||
export default {
|
||||
name: "BpmProcessInstance",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 工作流的流程实例的拓展列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
processDefinitionId: null,
|
||||
category: null,
|
||||
status: null,
|
||||
result: null,
|
||||
createTime: []
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getMyProcessInstancePage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 **/
|
||||
handleAdd() {
|
||||
this.$router.push({ name: "BpmProcessInstanceCreate"})
|
||||
},
|
||||
/** 取消按钮操作 */
|
||||
handleCancel(row) {
|
||||
const id = row.id;
|
||||
this.$prompt('请输入取消原因?', "取消流程", {
|
||||
type: 'warning',
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空,且非空格
|
||||
inputErrorMessage: "取消原因不能为空",
|
||||
}).then(({ value }) => {
|
||||
return cancelProcessInstance(id, value);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("取消成功");
|
||||
})
|
||||
},
|
||||
/** 处理详情按钮 */
|
||||
handleDetail(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务编号" align="center" prop="id" width="320" fixed />
|
||||
<el-table-column label="任务名称" align="center" prop="name" width="200" />
|
||||
<el-table-column label="所属流程" align="center" prop="processInstance.name" width="200" />
|
||||
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" width="120" />
|
||||
<el-table-column label="结果" align="center" prop="result">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="审批意见" align="center" prop="reason" width="200" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="审批时间" align="center" prop="endTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.endTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="耗时" align="center" prop="durationInMillis" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ getDateStar(scope.row.durationInMillis) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
|
||||
v-hasPermi="['bpm:task:query']">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDoneTaskPage} from '@/api/bpm/task'
|
||||
import {getDate} from "@/utils/dateUtils";
|
||||
|
||||
export default {
|
||||
name: "BpmDoneTask",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 已办任务列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
createTime: []
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getDoneTaskPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
getDateStar(ms) {
|
||||
return getDate(ms);
|
||||
},
|
||||
/** 处理审批按钮 */
|
||||
handleAudit(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="流程名" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入流程名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务编号" align="center" prop="id" width="320" />
|
||||
<el-table-column label="任务名称" align="center" prop="name" />
|
||||
<el-table-column label="所属流程" align="center" prop="processInstance.name" />
|
||||
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="version" width="80">
|
||||
<template v-slot="scope">
|
||||
<el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
||||
<el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleAudit(scope.row)"
|
||||
v-hasPermi="['bpm:task:update']">审批</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getTodoTaskPage} from '@/api/bpm/task'
|
||||
|
||||
export default {
|
||||
name: "BpmTodoTask",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 待办任务列表
|
||||
list: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
createTime: []
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 处理查询参数
|
||||
getTodoTaskPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 处理审批按钮 */
|
||||
handleAudit(row) {
|
||||
this.$router.push({ name: "BpmProcessInstanceDetail", query: { id: row.processInstance.id}});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,337 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 列表弹窗 -->
|
||||
<el-dialog title="任务分配规则" :visible.sync="visible" width="800px" append-to-body>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="任务名" align="center" prop="taskDefinitionName" width="120" fixed />
|
||||
<el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
|
||||
<el-table-column label="规则类型" align="center" prop="type" width="120">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规则范围" align="center" prop="options" width="440px">
|
||||
<template v-slot="scope">
|
||||
<el-tag size="medium" v-if="scope.row.options" :key="option" v-for="option in scope.row.options">
|
||||
{{ getAssignRuleOptionName(scope.row.type, option) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="modelId" label="操作" align="center" width="80" fixed="right">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
|
||||
v-hasPermi="['bpm:task-assign-rule:update']">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!-- 添加/修改弹窗 -->
|
||||
<el-dialog title="修改任务规则" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="taskAssignRuleForm" :model="form" :rules="rules" label-width="110px">
|
||||
<el-form-item label="任务名称" prop="taskDefinitionName">
|
||||
<el-input v-model="form.taskDefinitionName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务标识" prop="taskDefinitionKey">
|
||||
<el-input v-model="form.taskDefinitionKey" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则类型" prop="type">
|
||||
<el-select v-model="form.type" clearable style="width: 100%">
|
||||
<el-option v-for="dict in taskAssignRuleTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
|
||||
<el-select v-model="form.roleIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
|
||||
<treeselect v-model="form.deptIds" :options="deptTreeOptions" multiple flat :defaultExpandLevel="3"
|
||||
placeholder="请选择指定部门" :normalizer="normalizer"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 22" label="指定岗位" prop="postIds">
|
||||
<el-select v-model="form.postIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in postOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 30 || form.type === 31 || form.type === 32" label="指定用户" prop="userIds">
|
||||
<el-select v-model="form.userIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 40" label="指定用户组" prop="userGroupIds">
|
||||
<el-select v-model="form.userGroupIds" multiple clearable style="width: 100%">
|
||||
<el-option v-for="item in userGroupOptions" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
|
||||
<el-select v-model="form.scripts" multiple clearable style="width: 100%">
|
||||
<el-option v-for="dict in taskAssignScriptDictDatas" :key="parseInt(dict.value)"
|
||||
:label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
|
||||
<el-button @click="cancelAssignRuleForm">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
||||
import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
|
||||
import {listSimpleRoles} from "@/api/system/role";
|
||||
import {listSimpleDepts} from "@/api/system/dept";
|
||||
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {listSimplePosts} from "@/api/system/post";
|
||||
import {listSimpleUsers} from "@/api/system/user";
|
||||
import {listSimpleUserGroups} from "@/api/bpm/userGroup";
|
||||
|
||||
export default {
|
||||
name: "BpmTaskAssignRule",
|
||||
components: {
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 如下参数,可传递
|
||||
modelId: undefined, // 流程模型的编号。如果 modelId 非空,则用于流程模型的查看与配置
|
||||
processDefinitionId: undefined, // 流程定义的编号。如果 processDefinitionId 非空,则用于流程定义的查看,不支持配置
|
||||
visible: false,
|
||||
|
||||
// 任务分配规则表单
|
||||
row: undefined, // 选中的流程模型
|
||||
list: [], // 选中流程模型的任务分配规则们
|
||||
loading: false, // 加载中
|
||||
open: false, // 是否打开
|
||||
form: {}, // 表单
|
||||
rules: { // 表单校验规则
|
||||
type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
|
||||
roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
|
||||
deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
|
||||
postIds: [{required: true, message: "指定岗位不能为空", trigger: "change"}],
|
||||
userIds: [{required: true, message: "指定用户不能为空", trigger: "change"}],
|
||||
userGroupIds: [{required: true, message: "指定用户组不能为空", trigger: "change"}],
|
||||
scripts: [{required: true, message: "指定脚本不能为空", trigger: "change"}],
|
||||
},
|
||||
|
||||
// 各种下拉框
|
||||
roleOptions: [],
|
||||
deptOptions: [],
|
||||
deptTreeOptions: [],
|
||||
postOptions: [],
|
||||
userOptions: [],
|
||||
userGroupOptions: [],
|
||||
|
||||
// 数据字典
|
||||
modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
|
||||
taskAssignRuleTypeDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
|
||||
taskAssignScriptDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
initModel(modelId) {
|
||||
this.modelId = modelId;
|
||||
this.processDefinitionId = undefined;
|
||||
|
||||
// 初始化所有下拉框
|
||||
this.init0();
|
||||
},
|
||||
initProcessDefinition(processDefinitionId) {
|
||||
this.modelId = undefined;
|
||||
this.processDefinitionId = processDefinitionId;
|
||||
|
||||
// 初始化所有下拉框
|
||||
this.init0();
|
||||
},
|
||||
/** 初始化 */
|
||||
init0() {
|
||||
// 设置可见
|
||||
this.visible = true;
|
||||
// 获得列表
|
||||
this.getList();
|
||||
|
||||
// 获得角色列表
|
||||
this.roleOptions = [];
|
||||
listSimpleRoles().then(response => {
|
||||
this.roleOptions.push(...response.data);
|
||||
});
|
||||
// 获得部门列表
|
||||
this.deptOptions = [];
|
||||
this.deptTreeOptions = [];
|
||||
listSimpleDepts().then(response => {
|
||||
this.deptOptions.push(...response.data);
|
||||
this.deptTreeOptions.push(...this.handleTree(response.data, "id"));
|
||||
});
|
||||
// 获得岗位列表
|
||||
this.postOptions = [];
|
||||
listSimplePosts().then(response => {
|
||||
this.postOptions.push(...response.data);
|
||||
});
|
||||
// 获得用户列表
|
||||
this.userOptions = [];
|
||||
listSimpleUsers().then(response => {
|
||||
this.userOptions.push(...response.data);
|
||||
});
|
||||
// 获得用户组列表
|
||||
this.userGroupOptions = [];
|
||||
listSimpleUserGroups().then(response => {
|
||||
this.userGroupOptions.push(...response.data);
|
||||
});
|
||||
},
|
||||
/** 获得任务分配规则列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getTaskAssignRuleList({
|
||||
modelId: this.modelId,
|
||||
processDefinitionId: this.processDefinitionId,
|
||||
}).then(response => {
|
||||
this.loading = false;
|
||||
this.list = response.data;
|
||||
})
|
||||
},
|
||||
/** 处理修改任务分配规则的按钮操作 */
|
||||
handleUpdateTaskAssignRule(row) {
|
||||
// 先重置标识
|
||||
this.resetAssignRuleForm();
|
||||
// 设置表单
|
||||
this.form = {
|
||||
...row,
|
||||
options: [],
|
||||
roleIds: [],
|
||||
deptIds: [],
|
||||
postIds: [],
|
||||
userIds: [],
|
||||
userGroupIds: [],
|
||||
scripts: [],
|
||||
};
|
||||
// 将 options 赋值到对应的 roleIds 等选项
|
||||
if (row.type === 10) {
|
||||
this.form.roleIds.push(...row.options);
|
||||
} else if (row.type === 20 || row.type === 21) {
|
||||
this.form.deptIds.push(...row.options);
|
||||
} else if (row.type === 22) {
|
||||
this.form.postIds.push(...row.options);
|
||||
} else if (row.type === 30 || row.type === 31 || row.type === 32) {
|
||||
this.form.userIds.push(...row.options);
|
||||
} else if (row.type === 40) {
|
||||
this.form.userGroupIds.push(...row.options);
|
||||
} else if (row.type === 50) {
|
||||
this.form.scripts.push(...row.options);
|
||||
}
|
||||
this.open = true;
|
||||
},
|
||||
/** 提交任务分配规则的表单 */
|
||||
submitAssignRuleForm() {
|
||||
this.$refs["taskAssignRuleForm"].validate(valid => {
|
||||
if (valid) {
|
||||
// 构建表单
|
||||
let form = {
|
||||
...this.form,
|
||||
taskDefinitionName: undefined,
|
||||
};
|
||||
// 将 roleIds 等选项赋值到 options 中
|
||||
if (form.type === 10) {
|
||||
form.options = form.roleIds;
|
||||
} else if (form.type === 20 || form.type === 21) {
|
||||
form.options = form.deptIds;
|
||||
} else if (form.type === 22) {
|
||||
form.options = form.postIds;
|
||||
} else if (form.type === 30 || form.type === 31 || form.type === 32) {
|
||||
form.options = form.userIds;
|
||||
} else if (form.type === 40) {
|
||||
form.options = form.userGroupIds;
|
||||
} else if (form.type === 50) {
|
||||
form.options = form.scripts;
|
||||
}
|
||||
form.roleIds = undefined;
|
||||
form.deptIds = undefined;
|
||||
form.postIds = undefined;
|
||||
form.userIds = undefined;
|
||||
form.userGroupIds = undefined;
|
||||
form.scripts = undefined;
|
||||
// 新增
|
||||
if (!form.id) {
|
||||
form.modelId = this.modelId; // 模型编号
|
||||
createTaskAssignRule(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
// 修改
|
||||
} else {
|
||||
form.taskDefinitionKey = undefined; // 无法修改
|
||||
updateTaskAssignRule(form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 取消任务分配规则的表单 */
|
||||
cancelAssignRuleForm() {
|
||||
this.open = false;
|
||||
this.resetAssignRuleForm();
|
||||
},
|
||||
/** 表单重置 */
|
||||
resetAssignRuleForm() {
|
||||
this.form = {};
|
||||
this.resetForm("taskAssignRuleForm");
|
||||
},
|
||||
getAssignRuleOptionName(type, option) {
|
||||
if (type === 10) {
|
||||
for (const roleOption of this.roleOptions) {
|
||||
if (roleOption.id === option) {
|
||||
return roleOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 20 || type === 21) {
|
||||
for (const deptOption of this.deptOptions) {
|
||||
if (deptOption.id === option) {
|
||||
return deptOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 22) {
|
||||
for (const postOption of this.postOptions) {
|
||||
if (postOption.id === option) {
|
||||
return postOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 30 || type === 31 || type === 32) {
|
||||
for (const userOption of this.userOptions) {
|
||||
if (userOption.id === option) {
|
||||
return userOption.nickname;
|
||||
}
|
||||
}
|
||||
} else if (type === 40) {
|
||||
for (const userGroupOption of this.userGroupOptions) {
|
||||
if (userGroupOption.id === option) {
|
||||
return userGroupOption.name;
|
||||
}
|
||||
}
|
||||
} else if (type === 50) {
|
||||
option = option + ''; // 转换成 string
|
||||
for (const dictData of this.taskAssignScriptDictDatas) {
|
||||
if (dictData.value === option) {
|
||||
return dictData.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
return '未知(' + option + ')';
|
||||
},
|
||||
// 格式化部门的下拉框
|
||||
normalizer(node) {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,210 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="用户编号" prop="userId">
|
||||
<el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" prop="userType">
|
||||
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名" prop="applicationName">
|
||||
<el-input v-model="queryParams.applicationName" placeholder="请输入应用名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求地址" prop="requestUrl">
|
||||
<el-input v-model="queryParams.requestUrl" placeholder="请输入请求地址" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间" prop="beginTime">
|
||||
<el-date-picker v-model="queryParams.beginTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="执行时长" prop="duration">
|
||||
<el-input v-model="queryParams.duration" placeholder="请输入执行时长" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果码" prop="resultCode">
|
||||
<el-input v-model="queryParams.resultCode" placeholder="请输入结果码" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport"
|
||||
v-hasPermi="['infra:api-access-log:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="日志编号" align="center" prop="id" />
|
||||
<el-table-column label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column label="用户类型" align="center" prop="userType">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>
|
||||
</template>
|
||||
</el-table-column>>
|
||||
<el-table-column label="应用名" align="center" prop="applicationName" />
|
||||
<el-table-column label="请求方法名" align="center" prop="requestMethod" />
|
||||
<el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
|
||||
<el-table-column label="请求时间" align="center" prop="beginTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.beginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行时长" align="center" prop="startTime">
|
||||
<template v-slot="scope">
|
||||
<span>{{ scope.row.duration }} ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作结果" align="center" prop="status">
|
||||
<template v-slot="scope">
|
||||
<span>{{ scope.row.resultCode === 0 ? '成功' : '失败(' + scope.row.resultMsg + ')' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
|
||||
v-hasPermi="['infra:api-access-log:query']">详细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 查看明细 -->
|
||||
<el-dialog title="API 访问日志详细" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="日志主键:">{{ form.id }}</el-form-item>
|
||||
<el-form-item label="链路追踪:">{{ form.traceId }}</el-form-item>
|
||||
<el-form-item label="应用名:">{{ form.applicationName }}</el-form-item>
|
||||
<el-form-item label="用户信息:">
|
||||
{{ form.userId }} <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/> | {{ form.userIp }} | {{ form.userAgent}}
|
||||
</el-form-item>
|
||||
<el-form-item label="请求信息:">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
|
||||
<el-form-item label="请求参数:">{{ form.requestParams }}</el-form-item>
|
||||
<el-form-item label="开始时间:">
|
||||
{{ parseTime(form.beginTime) }} ~ {{ parseTime(form.endTime) }} | {{ form.duration }} ms
|
||||
</el-form-item>
|
||||
<el-form-item label="操作结果:">
|
||||
<div v-if="form.resultCode === 0">正常</div>
|
||||
<div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getApiAccessLogPage, exportApiAccessLogExcel } from "@/api/infra/apiAccessLog";
|
||||
|
||||
export default {
|
||||
name: "InfraApiAccessLog",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// API 访问日志列表
|
||||
list: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userId: null,
|
||||
userType: null,
|
||||
applicationName: null,
|
||||
requestUrl: null,
|
||||
duration: null,
|
||||
resultCode: null,
|
||||
beginTime: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getApiAccessLogPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 详细按钮操作 */
|
||||
handleView(row) {
|
||||
this.open = true;
|
||||
this.form = row;
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = {...this.queryParams};
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
// 执行导出
|
||||
this.$modal.confirm('是否确认导出所有API 访问日志数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportApiAccessLogExcel(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, 'API 访问日志.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,228 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="用户编号" prop="userId">
|
||||
<el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型" prop="userType">
|
||||
<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名" prop="applicationName">
|
||||
<el-input v-model="queryParams.applicationName" placeholder="请输入应用名" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求地址" prop="requestUrl">
|
||||
<el-input v-model="queryParams.requestUrl" placeholder="请输入请求地址" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="异常时间" prop="exceptionTime">
|
||||
<el-date-picker v-model="queryParams.exceptionTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处理状态" prop="processStatus">
|
||||
<el-select v-model="queryParams.processStatus" placeholder="请选择处理状态" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
|
||||
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['infra:api-error-log:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="日志编号" align="center" prop="id" />
|
||||
<el-table-column label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column label="用户类型" align="center" prop="userType">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>
|
||||
</template>
|
||||
</el-table-column>>
|
||||
<el-table-column label="应用名" align="center" prop="applicationName" />
|
||||
<el-table-column label="请求方法名" align="center" prop="requestMethod" />
|
||||
<el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
|
||||
<el-table-column label="异常发生时间" align="center" prop="exceptionTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.exceptionTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
|
||||
<el-table-column label="处理状态" align="center" prop="processStatus">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="scope.row.processStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
|
||||
v-hasPermi="['infra:api-access-log:query']">详细</el-button>
|
||||
<el-button type="text" size="mini" icon="el-icon-check"
|
||||
v-if="scope.row.processStatus === InfApiErrorLogProcessStatusEnum.INIT" v-hasPermi="['infra:api-error-log:update-status']"
|
||||
@click="handleProcessClick(scope.row, InfApiErrorLogProcessStatusEnum.DONE)">已处理</el-button>
|
||||
<el-button type="text" size="mini" icon="el-icon-check"
|
||||
v-if="scope.row.processStatus === InfApiErrorLogProcessStatusEnum.INIT" v-hasPermi="['infra:api-error-log:update-status']"
|
||||
@click="handleProcessClick(scope.row, InfApiErrorLogProcessStatusEnum.IGNORE)">已忽略</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"/>
|
||||
|
||||
<!-- 查看明细 -->
|
||||
<el-dialog title="API 异常日志详细" :visible.sync="open" width="1280px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="日志主键:">{{ form.id }}</el-form-item>
|
||||
<el-form-item label="链路追踪:">{{ form.traceId }}</el-form-item>
|
||||
<el-form-item label="应用名:">{{ form.applicationName }}</el-form-item>
|
||||
<el-form-item label="用户信息:">
|
||||
{{ form.userId }} <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType" /> | {{ form.userIp }} | {{ form.userAgent}}
|
||||
</el-form-item>
|
||||
<el-form-item label="请求信息:">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
|
||||
<el-form-item label="请求参数:">{{ form.requestParams }}</el-form-item>
|
||||
<el-form-item label="异常时间:">{{ parseTime(form.exceptionTime) }}</el-form-item>
|
||||
<el-form-item label="异常名">{{ form.exceptionName }}</el-form-item>
|
||||
<el-form-item label="异常名">
|
||||
<el-input type="textarea" :readonly="true" :autosize="{ maxRows: 20}" v-model="form.exceptionStackTrace"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理状态">
|
||||
<dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="form.processStatus" />
|
||||
</el-form-item>
|
||||
<el-form-item label="处理人">{{ form.processUserId }}</el-form-item>
|
||||
<el-form-item label="处理时间">{{ parseTime(form.processTime) }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateApiErrorLogProcess, getApiErrorLogPage, exportApiErrorLogExcel } from "@/api/infra/apiErrorLog";
|
||||
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: "InfraApiErrorLog",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// API 错误日志列表
|
||||
list: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userId: null,
|
||||
userType: null,
|
||||
applicationName: null,
|
||||
requestUrl: null,
|
||||
processStatus: null,
|
||||
exceptionTime: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 枚举
|
||||
InfApiErrorLogProcessStatusEnum: InfraApiErrorLogProcessStatusEnum,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getApiErrorLogPage(this.queryParams).then(response => {
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 详细按钮操作 */
|
||||
handleView(row) {
|
||||
this.open = true;
|
||||
this.form = row;
|
||||
},
|
||||
/** 处理已处理 / 已忽略的操作 **/
|
||||
handleProcessClick(row, processStatus) {
|
||||
const processStatusText = this.getDictDataLabel(this.DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS, processStatus)
|
||||
this.$modal.confirm('确认标记为' + processStatusText).then(() => {
|
||||
updateApiErrorLogProcess(row.id, processStatus).then(() => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.getList();
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// 处理查询参数
|
||||
let params = {...this.queryParams};
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
// 执行导出
|
||||
this.$modal.confirm('是否确认导出所有API 错误日志数据项?').then(() => {
|
||||
this.exportLoading = true;
|
||||
return exportApiErrorLogExcel(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, 'API 错误日志.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
// 取消开始的loading动画
|
||||
const preLoader = document.querySelector('#pre-loader')
|
||||
preLoader.style.display = 'none'
|
||||
|
||||
// fix: firefox 下 拖拽 会新打卡一个选项卡
|
||||
// https://github.com/JakHuang/form-generator/issues/15
|
||||
document.body.ondrop = event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-form
|
||||
ref="elForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="生成类型" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in typeOptions"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showFileName" label="文件名" prop="fileName">
|
||||
<el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<div slot="footer">
|
||||
<el-button @click="close">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handelConfirm">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: ['showFileName'],
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
fileName: undefined,
|
||||
type: 'file'
|
||||
},
|
||||
rules: {
|
||||
fileName: [{
|
||||
required: true,
|
||||
message: '请输入文件名',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '生成类型不能为空',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
typeOptions: [{
|
||||
label: '页面',
|
||||
value: 'file'
|
||||
}, {
|
||||
label: '弹窗',
|
||||
value: 'dialog'
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onOpen() {
|
||||
if (this.showFileName) {
|
||||
this.formData.fileName = `${+new Date()}.vue`
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
},
|
||||
close(e) {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
handelConfirm() {
|
||||
this.$refs.elForm.validate(valid => {
|
||||
if (!valid) return
|
||||
this.$emit('confirm', { ...this.formData })
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
@ -1,120 +0,0 @@
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import render from '@/components/render/render'
|
||||
|
||||
const components = {
|
||||
itemBtns(h, currentItem, index, list) {
|
||||
const { copyItem, deleteItem } = this.$listeners
|
||||
return [
|
||||
<span class="drawing-item-copy" title="复制" onClick={event => {
|
||||
copyItem(currentItem, list); event.stopPropagation()
|
||||
}}>
|
||||
<i class="el-icon-copy-document" />
|
||||
</span>,
|
||||
<span class="drawing-item-delete" title="删除" onClick={event => {
|
||||
deleteItem(index, list); event.stopPropagation()
|
||||
}}>
|
||||
<i class="el-icon-delete" />
|
||||
</span>
|
||||
]
|
||||
}
|
||||
}
|
||||
const layouts = {
|
||||
colFormItem(h, currentItem, index, list) {
|
||||
const { activeItem } = this.$listeners
|
||||
const config = currentItem.__config__
|
||||
const child = renderChildren.apply(this, arguments)
|
||||
let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
|
||||
if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
|
||||
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
|
||||
if (config.showLabel === false) labelWidth = '0'
|
||||
return (
|
||||
<el-col span={config.span} class={className}
|
||||
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
|
||||
<el-form-item label-width={labelWidth}
|
||||
label={config.showLabel ? config.label : ''} required={config.required}>
|
||||
<render key={config.renderKey} conf={currentItem} onInput={ event => {
|
||||
this.$set(config, 'defaultValue', event)
|
||||
}}>
|
||||
{child}
|
||||
</render>
|
||||
</el-form-item>
|
||||
{components.itemBtns.apply(this, arguments)}
|
||||
</el-col>
|
||||
)
|
||||
},
|
||||
rowFormItem(h, currentItem, index, list) {
|
||||
const { activeItem } = this.$listeners
|
||||
const config = currentItem.__config__
|
||||
const className = this.activeId === config.formId
|
||||
? 'drawing-row-item active-from-item'
|
||||
: 'drawing-row-item'
|
||||
let child = renderChildren.apply(this, arguments)
|
||||
if (currentItem.type === 'flex') {
|
||||
child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
|
||||
{child}
|
||||
</el-row>
|
||||
}
|
||||
return (
|
||||
<el-col span={config.span}>
|
||||
<el-row gutter={config.gutter} class={className}
|
||||
nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
|
||||
<span class="component-name">{config.componentName}</span>
|
||||
<draggable list={config.children || []} animation={340}
|
||||
group="componentsGroup" class="drag-wrapper">
|
||||
{child}
|
||||
</draggable>
|
||||
{components.itemBtns.apply(this, arguments)}
|
||||
</el-row>
|
||||
</el-col>
|
||||
)
|
||||
},
|
||||
raw(h, currentItem, index, list) {
|
||||
const config = currentItem.__config__
|
||||
const child = renderChildren.apply(this, arguments)
|
||||
return <render key={config.renderKey} conf={currentItem} onInput={ event => {
|
||||
this.$set(config, 'defaultValue', event)
|
||||
}}>
|
||||
{child}
|
||||
</render>
|
||||
}
|
||||
}
|
||||
|
||||
function renderChildren(h, currentItem, index, list) {
|
||||
const config = currentItem.__config__
|
||||
if (!Array.isArray(config.children)) return null
|
||||
return config.children.map((el, i) => {
|
||||
const layout = layouts[el.__config__.layout]
|
||||
if (layout) {
|
||||
return layout.call(this, h, el, i, config.children)
|
||||
}
|
||||
return layoutIsNotFound.call(this)
|
||||
})
|
||||
}
|
||||
|
||||
function layoutIsNotFound() {
|
||||
throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
render,
|
||||
draggable
|
||||
},
|
||||
props: [
|
||||
'currentItem',
|
||||
'index',
|
||||
'drawingList',
|
||||
'activeId',
|
||||
'formConf'
|
||||
],
|
||||
render(h) {
|
||||
const layout = layouts[this.currentItem.__config__.layout]
|
||||
|
||||
if (layout) {
|
||||
return layout.call(this, h, this.currentItem, this.index, this.drawingList)
|
||||
}
|
||||
return layoutIsNotFound.call(this)
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,331 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
|
||||
<div style="height:100%">
|
||||
<el-row style="height:100%;overflow:auto">
|
||||
<el-col :md="24" :lg="12" class="left-editor">
|
||||
<div class="setting" title="资源引用" @click="showResource">
|
||||
<el-badge :is-dot="!!resources.length" class="item">
|
||||
<i class="el-icon-setting" />
|
||||
</el-badge>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab" type="card" class="editor-tabs">
|
||||
<el-tab-pane name="html">
|
||||
<span slot="label">
|
||||
<i v-if="activeTab==='html'" class="el-icon-edit" />
|
||||
<i v-else class="el-icon-document" />
|
||||
template
|
||||
</span>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="js">
|
||||
<span slot="label">
|
||||
<i v-if="activeTab==='js'" class="el-icon-edit" />
|
||||
<i v-else class="el-icon-document" />
|
||||
script
|
||||
</span>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="css">
|
||||
<span slot="label">
|
||||
<i v-if="activeTab==='css'" class="el-icon-edit" />
|
||||
<i v-else class="el-icon-document" />
|
||||
css
|
||||
</span>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" />
|
||||
<div v-show="activeTab==='js'" id="editorJs" class="tab-editor" />
|
||||
<div v-show="activeTab==='css'" id="editorCss" class="tab-editor" />
|
||||
</el-col>
|
||||
<el-col :md="24" :lg="12" class="right-preview">
|
||||
<div class="action-bar" :style="{'text-align': 'left'}">
|
||||
<span class="bar-btn" @click="runCode">
|
||||
<i class="el-icon-refresh" />
|
||||
刷新
|
||||
</span>
|
||||
<span class="bar-btn" @click="exportFile">
|
||||
<i class="el-icon-download" />
|
||||
导出vue文件
|
||||
</span>
|
||||
<span ref="copyBtn" class="bar-btn copy-btn">
|
||||
<i class="el-icon-document-copy" />
|
||||
复制代码
|
||||
</span>
|
||||
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
|
||||
<i class="el-icon-circle-close" />
|
||||
关闭
|
||||
</span>
|
||||
</div>
|
||||
<iframe
|
||||
v-show="isIframeLoaded"
|
||||
ref="previewPage"
|
||||
class="result-wrapper"
|
||||
frameborder="0"
|
||||
src="preview.html"
|
||||
@load="iframeLoad"
|
||||
/>
|
||||
<div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<resource-dialog
|
||||
:visible.sync="resourceVisible"
|
||||
:origin-resource="resources"
|
||||
@save="setResource"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { parse } from '@babel/parser'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import { saveAs } from 'file-saver'
|
||||
import {
|
||||
makeUpHtml, vueTemplate, vueScript, cssStyle
|
||||
} from '@/components/generator/html'
|
||||
import { makeUpJs } from '@/components/generator/js'
|
||||
import { makeUpCss } from '@/components/generator/css'
|
||||
import { exportDefault, beautifierConf } from '@/utils'
|
||||
import ResourceDialog from './ResourceDialog'
|
||||
import loadMonaco from '@/utils/loadMonaco'
|
||||
import loadBeautifier from '@/utils/loadBeautifier'
|
||||
|
||||
const editorObj = {
|
||||
html: null,
|
||||
js: null,
|
||||
css: null
|
||||
}
|
||||
const mode = {
|
||||
html: 'html',
|
||||
js: 'javascript',
|
||||
css: 'css'
|
||||
}
|
||||
let beautifier
|
||||
let monaco
|
||||
|
||||
export default {
|
||||
components: { ResourceDialog },
|
||||
props: ['formData', 'generateConf'],
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'html',
|
||||
htmlCode: '',
|
||||
jsCode: '',
|
||||
cssCode: '',
|
||||
codeFrame: '',
|
||||
isIframeLoaded: false,
|
||||
isInitcode: false, // 保证open后两个异步只执行一次runcode
|
||||
isRefreshCode: false, // 每次打开都需要重新刷新代码
|
||||
resourceVisible: false,
|
||||
scripts: [],
|
||||
links: [],
|
||||
monaco: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resources() {
|
||||
return this.scripts.concat(this.links)
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keydown', this.preventDefaultSave)
|
||||
const clipboard = new ClipboardJS('.copy-btn', {
|
||||
text: trigger => {
|
||||
const codeStr = this.generateCode()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板,可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return codeStr
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keydown', this.preventDefaultSave)
|
||||
},
|
||||
methods: {
|
||||
preventDefaultSave(e) {
|
||||
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
}
|
||||
},
|
||||
onOpen() {
|
||||
const { type } = this.generateConf
|
||||
this.htmlCode = makeUpHtml(this.formData, type)
|
||||
this.jsCode = makeUpJs(this.formData, type)
|
||||
this.cssCode = makeUpCss(this.formData)
|
||||
|
||||
loadBeautifier(btf => {
|
||||
beautifier = btf
|
||||
this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
|
||||
this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
|
||||
this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)
|
||||
|
||||
loadMonaco(val => {
|
||||
monaco = val
|
||||
this.setEditorValue('editorHtml', 'html', this.htmlCode)
|
||||
this.setEditorValue('editorJs', 'js', this.jsCode)
|
||||
this.setEditorValue('editorCss', 'css', this.cssCode)
|
||||
if (!this.isInitcode) {
|
||||
this.isRefreshCode = true
|
||||
this.isIframeLoaded && (this.isInitcode = true) && this.runCode()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onClose() {
|
||||
this.isInitcode = false
|
||||
this.isRefreshCode = false
|
||||
},
|
||||
iframeLoad() {
|
||||
if (!this.isInitcode) {
|
||||
this.isIframeLoaded = true
|
||||
this.isRefreshCode && (this.isInitcode = true) && this.runCode()
|
||||
}
|
||||
},
|
||||
setEditorValue(id, type, codeStr) {
|
||||
if (editorObj[type]) {
|
||||
editorObj[type].setValue(codeStr)
|
||||
} else {
|
||||
editorObj[type] = monaco.editor.create(document.getElementById(id), {
|
||||
value: codeStr,
|
||||
theme: 'vs-dark',
|
||||
language: mode[type],
|
||||
automaticLayout: true
|
||||
})
|
||||
}
|
||||
// ctrl + s 刷新
|
||||
editorObj[type].onKeyDown(e => {
|
||||
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
|
||||
this.runCode()
|
||||
}
|
||||
})
|
||||
},
|
||||
runCode() {
|
||||
const jsCodeStr = editorObj.js.getValue()
|
||||
try {
|
||||
const ast = parse(jsCodeStr, { sourceType: 'module' })
|
||||
const astBody = ast.program.body
|
||||
if (astBody.length > 1) {
|
||||
this.$confirm(
|
||||
'js格式不能识别,仅支持修改export default的对象内容',
|
||||
'提示',
|
||||
{
|
||||
type: 'warning'
|
||||
}).catch(() => {});
|
||||
return
|
||||
}
|
||||
if (astBody[0].type === 'ExportDefaultDeclaration') {
|
||||
const postData = {
|
||||
type: 'refreshFrame',
|
||||
data: {
|
||||
generateConf: this.generateConf,
|
||||
html: editorObj.html.getValue(),
|
||||
js: jsCodeStr.replace(exportDefault, ''),
|
||||
css: editorObj.css.getValue(),
|
||||
scripts: this.scripts,
|
||||
links: this.links
|
||||
}
|
||||
}
|
||||
|
||||
this.$refs.previewPage.contentWindow.postMessage(
|
||||
postData,
|
||||
location.origin
|
||||
)
|
||||
} else {
|
||||
this.$message.error('请使用export default')
|
||||
}
|
||||
} catch (err) {
|
||||
this.$message.error(`js错误:${err}`)
|
||||
console.error(err)
|
||||
}
|
||||
},
|
||||
generateCode() {
|
||||
const html = vueTemplate(editorObj.html.getValue())
|
||||
const script = vueScript(editorObj.js.getValue())
|
||||
const css = cssStyle(editorObj.css.getValue())
|
||||
return beautifier.html(html + script + css, beautifierConf.html)
|
||||
},
|
||||
exportFile() {
|
||||
this.$prompt('文件名:', '导出文件', {
|
||||
inputValue: `${+new Date()}.vue`,
|
||||
closeOnClickModal: false,
|
||||
inputPlaceholder: '请输入文件名'
|
||||
}).then(({ value }) => {
|
||||
if (!value) value = `${+new Date()}.vue`
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, value)
|
||||
})
|
||||
},
|
||||
showResource() {
|
||||
this.resourceVisible = true
|
||||
},
|
||||
setResource(arr) {
|
||||
const scripts = []; const
|
||||
links = []
|
||||
if (Array.isArray(arr)) {
|
||||
arr.forEach(item => {
|
||||
if (item.endsWith('.css')) {
|
||||
links.push(item)
|
||||
} else {
|
||||
scripts.push(item)
|
||||
}
|
||||
})
|
||||
this.scripts = scripts
|
||||
this.links = links
|
||||
} else {
|
||||
this.scripts = []
|
||||
this.links = []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixin.scss';
|
||||
.tab-editor {
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.left-editor {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #1e1e1e;
|
||||
overflow: hidden;
|
||||
}
|
||||
.setting{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 3px;
|
||||
color: #a9f122;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.right-preview {
|
||||
height: 100%;
|
||||
.result-wrapper {
|
||||
height: calc(100vh - 33px);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@include action-bar;
|
||||
:deep(.el-drawer__header) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<div class="icon-dialog">
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
width="980px"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<div slot="title">
|
||||
选择图标
|
||||
<el-input
|
||||
v-model="key"
|
||||
size="mini"
|
||||
:style="{width: '260px'}"
|
||||
placeholder="请输入图标名称"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<ul class="icon-ul">
|
||||
<li
|
||||
v-for="icon in iconList"
|
||||
:key="icon"
|
||||
:class="active===icon?'active-item':''"
|
||||
@click="onSelect(icon)"
|
||||
>
|
||||
<i :class="icon" />
|
||||
<div>{{ icon }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iconList from '@/utils/icon.json'
|
||||
|
||||
const originList = iconList.map(name => `el-icon-${name}`)
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: ['current'],
|
||||
data() {
|
||||
return {
|
||||
iconList: originList,
|
||||
active: null,
|
||||
key: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
key(val) {
|
||||
if (val) {
|
||||
this.iconList = originList.filter(name => name.indexOf(val) > -1)
|
||||
} else {
|
||||
this.iconList = originList
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.active = this.current
|
||||
this.key = ''
|
||||
},
|
||||
onClose() {},
|
||||
onSelect(icon) {
|
||||
this.active = icon
|
||||
this.$emit('select', icon)
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
width: 16.66%;
|
||||
box-sizing: border-box;
|
||||
height: 108px;
|
||||
padding: 15px 6px 6px 6px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
&.active-item{
|
||||
background: #e1f3fb;
|
||||
color: #7a6df0
|
||||
}
|
||||
> i {
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-dialog {
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 4vh !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 92vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.el-dialog__header {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
margin: 0 20px 20px 20px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
|
||||
<div class="action-bar" :style="{'text-align': 'left'}">
|
||||
<span class="bar-btn" @click="refresh">
|
||||
<i class="el-icon-refresh" />
|
||||
刷新
|
||||
</span>
|
||||
<span ref="copyBtn" class="bar-btn copy-json-btn">
|
||||
<i class="el-icon-document-copy" />
|
||||
复制JSON
|
||||
</span>
|
||||
<span class="bar-btn" @click="exportJsonFile">
|
||||
<i class="el-icon-download" />
|
||||
导出JSON文件
|
||||
</span>
|
||||
<span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
|
||||
<i class="el-icon-circle-close" />
|
||||
关闭
|
||||
</span>
|
||||
</div>
|
||||
<div id="editorJson" class="json-editor" />
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { beautifierConf } from '@/utils'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import { saveAs } from 'file-saver'
|
||||
import loadMonaco from '@/utils/loadMonaco'
|
||||
import loadBeautifier from '@/utils/loadBeautifier'
|
||||
|
||||
let beautifier
|
||||
let monaco
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
jsonStr: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
window.addEventListener('keydown', this.preventDefaultSave)
|
||||
const clipboard = new ClipboardJS('.copy-json-btn', {
|
||||
text: trigger => {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板,可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return this.beautifierJson
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keydown', this.preventDefaultSave)
|
||||
},
|
||||
methods: {
|
||||
preventDefaultSave(e) {
|
||||
if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
}
|
||||
},
|
||||
onOpen() {
|
||||
loadBeautifier(btf => {
|
||||
beautifier = btf
|
||||
this.beautifierJson = beautifier.js(this.jsonStr, beautifierConf.js)
|
||||
|
||||
loadMonaco(val => {
|
||||
monaco = val
|
||||
this.setEditorValue('editorJson', this.beautifierJson)
|
||||
})
|
||||
})
|
||||
},
|
||||
onClose() {},
|
||||
setEditorValue(id, codeStr) {
|
||||
if (this.jsonEditor) {
|
||||
this.jsonEditor.setValue(codeStr)
|
||||
} else {
|
||||
this.jsonEditor = monaco.editor.create(document.getElementById(id), {
|
||||
value: codeStr,
|
||||
theme: 'vs-dark',
|
||||
language: 'json',
|
||||
automaticLayout: true
|
||||
})
|
||||
// ctrl + s 刷新
|
||||
this.jsonEditor.onKeyDown(e => {
|
||||
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
|
||||
this.refresh()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
exportJsonFile() {
|
||||
this.$prompt('文件名:', '导出文件', {
|
||||
inputValue: `${+new Date()}.json`,
|
||||
closeOnClickModal: false,
|
||||
inputPlaceholder: '请输入文件名'
|
||||
}).then(({ value }) => {
|
||||
if (!value) value = `${+new Date()}.json`
|
||||
const codeStr = this.jsonEditor.getValue()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, value)
|
||||
})
|
||||
},
|
||||
refresh() {
|
||||
try {
|
||||
this.$emit('refresh', JSON.parse(this.jsonEditor.getValue()))
|
||||
} catch (error) {
|
||||
this.$notify({
|
||||
title: '错误',
|
||||
message: 'JSON格式错误,请检查',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/mixin.scss';
|
||||
|
||||
:deep(.el-drawer__header) {
|
||||
display: none;
|
||||
}
|
||||
@include action-bar;
|
||||
|
||||
.json-editor{
|
||||
height: calc(100vh - 33px);
|
||||
}
|
||||
</style>
|
@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
title="外部资源引用"
|
||||
width="600px"
|
||||
:close-on-click-modal="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-input
|
||||
v-for="(item, index) in resources"
|
||||
:key="index"
|
||||
v-model="resources[index]"
|
||||
class="url-item"
|
||||
placeholder="请输入 css 或 js 资源路径"
|
||||
prefix-icon="el-icon-link"
|
||||
clearable
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-delete"
|
||||
@click="deleteOne(index)"
|
||||
/>
|
||||
</el-input>
|
||||
<el-button-group class="add-item">
|
||||
<el-button
|
||||
plain
|
||||
@click="addOne('https://lib.baomitu.com/jquery/1.8.3/jquery.min.js')"
|
||||
>
|
||||
jQuery1.8.3
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
@click="addOne('https://unpkg.com/http-vue-loader')"
|
||||
>
|
||||
http-vue-loader
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="el-icon-circle-plus-outline"
|
||||
plain
|
||||
@click="addOne('')"
|
||||
>
|
||||
添加其他
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<div slot="footer">
|
||||
<el-button @click="close">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handelConfirm"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepClone } from '@/utils'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
inheritAttrs: false,
|
||||
props: ['originResource'],
|
||||
data() {
|
||||
return {
|
||||
resources: null
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.resources = this.originResource.length ? deepClone(this.originResource) : ['']
|
||||
},
|
||||
onClose() {
|
||||
},
|
||||
close() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
handelConfirm() {
|
||||
const results = this.resources.filter(item => !!item) || []
|
||||
this.$emit('save', results)
|
||||
this.close()
|
||||
if (results.length) {
|
||||
this.resources = results
|
||||
}
|
||||
},
|
||||
deleteOne(index) {
|
||||
this.resources.splice(index, 1)
|
||||
},
|
||||
addOne(url) {
|
||||
if (this.resources.indexOf(url) > -1) {
|
||||
this.$message('资源已存在')
|
||||
} else {
|
||||
this.resources.push(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.add-item{
|
||||
margin-top: 8px;
|
||||
}
|
||||
.url-item{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
File diff suppressed because it is too large
Load Diff
@ -1,158 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-row :gutter="0">
|
||||
<el-form
|
||||
ref="elForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="选项名"
|
||||
prop="label"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.label"
|
||||
placeholder="请输入选项名"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="选项值"
|
||||
prop="value"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.value"
|
||||
placeholder="请输入选项值"
|
||||
clearable
|
||||
>
|
||||
<el-select
|
||||
slot="append"
|
||||
v-model="dataType"
|
||||
:style="{width: '100px'}"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dataTypeOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div slot="footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handelConfirm"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
<el-button @click="close">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { isNumberStr } from '@/utils'
|
||||
import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
|
||||
|
||||
const id = getTreeNodeId()
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
inheritAttrs: false,
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
id,
|
||||
formData: {
|
||||
label: undefined,
|
||||
value: undefined
|
||||
},
|
||||
rules: {
|
||||
label: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入选项名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
value: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入选项值',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
dataType: 'string',
|
||||
dataTypeOptions: [
|
||||
{
|
||||
label: '字符串',
|
||||
value: 'string'
|
||||
},
|
||||
{
|
||||
label: '数字',
|
||||
value: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'formData.value': function (val) {
|
||||
this.dataType = isNumberStr(val) ? 'number' : 'string'
|
||||
},
|
||||
id(val) {
|
||||
saveTreeNodeId(val)
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.formData = {
|
||||
label: undefined,
|
||||
value: undefined
|
||||
}
|
||||
},
|
||||
onClose() {},
|
||||
close() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
handelConfirm() {
|
||||
this.$refs.elForm.validate(valid => {
|
||||
if (!valid) return
|
||||
if (this.dataType === 'number') {
|
||||
this.formData.value = parseFloat(this.formData.value)
|
||||
}
|
||||
this.formData.id = this.id++
|
||||
this.$emit('commit', this.formData)
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
@ -1,470 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left-board">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo">
|
||||
<img :src="logo" alt="logo"> Form Generator
|
||||
<a class="github" href="https://github.com/JakHuang/form-generator" target="_blank">
|
||||
<img src="https://github.githubassets.com/pinned-octocat.svg" alt>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar class="left-scrollbar">
|
||||
<div class="components-list">
|
||||
<div v-for="(item, listIndex) in leftComponents" :key="listIndex">
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="item.list"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
draggable=".components-item"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in item.list"
|
||||
:key="index"
|
||||
class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.__config__.tagIcon" />
|
||||
{{ element.__config__.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="center-board">
|
||||
<div class="action-bar">
|
||||
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
|
||||
<!-- 运行-->
|
||||
<!-- </el-button>-->
|
||||
<el-button icon="el-icon-view" type="text" @click="showJson">
|
||||
查看json
|
||||
</el-button>
|
||||
<el-button icon="el-icon-download" type="text" @click="download">
|
||||
导出vue文件
|
||||
</el-button>
|
||||
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
|
||||
复制代码
|
||||
</el-button>
|
||||
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
<el-scrollbar class="center-scrollbar">
|
||||
<el-row class="center-board-row" :gutter="formConf.gutter">
|
||||
<el-form
|
||||
:size="formConf.size"
|
||||
:label-position="formConf.labelPosition"
|
||||
:disabled="formConf.disabled"
|
||||
:label-width="formConf.labelWidth + 'px'"
|
||||
>
|
||||
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
|
||||
<draggable-item
|
||||
v-for="(item, index) in drawingList"
|
||||
:key="item.renderKey"
|
||||
:drawing-list="drawingList"
|
||||
:current-item="item"
|
||||
:index="index"
|
||||
:active-id="activeId"
|
||||
:form-conf="formConf"
|
||||
@activeItem="activeFormItem"
|
||||
@copyItem="drawingItemCopy"
|
||||
@deleteItem="drawingItemDelete"
|
||||
/>
|
||||
</draggable>
|
||||
<div v-show="!drawingList.length" class="empty-info">
|
||||
从左侧拖入或点选组件进行表单设计
|
||||
</div>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<right-panel
|
||||
:active-data="activeData"
|
||||
:form-conf="formConf"
|
||||
:show-field="!!drawingList.length"
|
||||
@tag-change="tagChange"
|
||||
@fetch-data="fetchData"
|
||||
/>
|
||||
|
||||
<form-drawer
|
||||
:visible.sync="drawerVisible"
|
||||
:form-data="formData"
|
||||
size="100%"
|
||||
:generate-conf="generateConf"
|
||||
/>
|
||||
<json-drawer
|
||||
size="60%"
|
||||
:visible.sync="jsonDrawerVisible"
|
||||
:json-str="JSON.stringify(formData)"
|
||||
@refresh="refreshJson"
|
||||
/>
|
||||
<code-type-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="选择生成类型"
|
||||
:show-file-name="showFileName"
|
||||
@confirm="generate"
|
||||
/>
|
||||
<input id="copyNode" type="hidden">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
import { saveAs } from 'file-saver'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import render from '@/components/render/render'
|
||||
import FormDrawer from './FormDrawer'
|
||||
import JsonDrawer from './JsonDrawer'
|
||||
import RightPanel from './RightPanel'
|
||||
import {
|
||||
inputComponents, selectComponents, layoutComponents, formConf
|
||||
} from '@/components/generator/config'
|
||||
import {
|
||||
beautifierConf, titleCase, deepClone
|
||||
} from '@/utils'
|
||||
import {
|
||||
makeUpHtml, vueTemplate, vueScript, cssStyle
|
||||
} from '@/components/generator/html'
|
||||
import { makeUpJs } from '@/components/generator/js'
|
||||
import { makeUpCss } from '@/components/generator/css'
|
||||
import drawingDefalut from '@/components/generator/drawingDefalut'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from './CodeTypeDialog'
|
||||
import DraggableItem from './DraggableItem'
|
||||
import {
|
||||
getDrawingList, saveDrawingList, getIdGlobal, saveIdGlobal, getFormConf
|
||||
} from '@/utils/db'
|
||||
import loadBeautifier from '@/utils/loadBeautifier'
|
||||
|
||||
let beautifier
|
||||
const emptyActiveData = { style: {}, autosize: {} }
|
||||
let oldActiveId
|
||||
let tempActiveData
|
||||
const drawingListInDB = getDrawingList()
|
||||
const formConfInDB = getFormConf()
|
||||
const idGlobal = getIdGlobal()
|
||||
|
||||
export default {
|
||||
name: "InfraBuild",
|
||||
components: {
|
||||
draggable,
|
||||
render,
|
||||
FormDrawer,
|
||||
JsonDrawer,
|
||||
RightPanel,
|
||||
CodeTypeDialog,
|
||||
DraggableItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
idGlobal,
|
||||
formConf,
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents,
|
||||
labelWidth: 100,
|
||||
drawingList: drawingDefalut,
|
||||
drawingData: {},
|
||||
activeId: drawingDefalut[0].formId,
|
||||
drawerVisible: false,
|
||||
formData: {},
|
||||
dialogVisible: false,
|
||||
jsonDrawerVisible: false,
|
||||
generateConf: null,
|
||||
showFileName: false,
|
||||
activeData: drawingDefalut[0],
|
||||
saveDrawingListDebounce: debounce(340, saveDrawingList),
|
||||
saveIdGlobalDebounce: debounce(340, saveIdGlobal),
|
||||
leftComponents: [
|
||||
{
|
||||
title: '输入型组件',
|
||||
list: inputComponents
|
||||
},
|
||||
{
|
||||
title: '选择型组件',
|
||||
list: selectComponents
|
||||
},
|
||||
{
|
||||
title: '布局型组件',
|
||||
list: layoutComponents
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'activeData.__config__.label': function (val, oldVal) {
|
||||
if (
|
||||
this.activeData.placeholder === undefined
|
||||
|| !this.activeData.__config__.tag
|
||||
|| oldActiveId !== this.activeId
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
|
||||
},
|
||||
activeId: {
|
||||
handler(val) {
|
||||
oldActiveId = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
drawingList: {
|
||||
handler(val) {
|
||||
this.saveDrawingListDebounce(val)
|
||||
if (val.length === 0) this.idGlobal = 100
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
idGlobal: {
|
||||
handler(val) {
|
||||
this.saveIdGlobalDebounce(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (Array.isArray(drawingListInDB) && drawingListInDB.length > 0) {
|
||||
this.drawingList = drawingListInDB
|
||||
} else {
|
||||
this.drawingList = drawingDefalut
|
||||
}
|
||||
this.activeFormItem(this.drawingList[0])
|
||||
if (formConfInDB) {
|
||||
this.formConf = formConfInDB
|
||||
}
|
||||
loadBeautifier(btf => {
|
||||
beautifier = btf
|
||||
})
|
||||
const clipboard = new ClipboardJS('#copyNode', {
|
||||
text: trigger => {
|
||||
const codeStr = this.generateCode()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板,可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return codeStr
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
setObjectValueReduce(obj, strKeys, data) {
|
||||
const arr = strKeys.split('.')
|
||||
arr.reduce((pre, item, i) => {
|
||||
if (arr.length === i + 1) {
|
||||
pre[item] = data
|
||||
} else if (pre[item]===undefined) {
|
||||
pre[item] = {}
|
||||
}
|
||||
return pre[item]
|
||||
}, obj)
|
||||
},
|
||||
setRespData(component, resp) {
|
||||
const { dataPath, renderKey, dataConsumer } = component.__config__
|
||||
if (!dataPath || !dataConsumer) return
|
||||
const respData = dataPath.split('.').reduce((pre, item) => pre[item], resp)
|
||||
|
||||
// 将请求回来的数据,赋值到指定属性。
|
||||
// 以el-tabel为例,根据Element文档,应该将数据赋值给el-tabel的data属性,所以dataConsumer的值应为'data';
|
||||
// 此时赋值代码可写成 component[dataConsumer] = respData;
|
||||
// 但为支持更深层级的赋值(如:dataConsumer的值为'options.data'),使用setObjectValueReduce
|
||||
this.setObjectValueReduce(component, dataConsumer, respData)
|
||||
const i = this.drawingList.findIndex(item => item.__config__.renderKey === renderKey)
|
||||
if (i > -1) this.$set(this.drawingList, i, component)
|
||||
},
|
||||
fetchData(component) {
|
||||
const { dataType, method, url } = component.__config__
|
||||
if (dataType === 'dynamic' && method && url) {
|
||||
this.setLoading(component, true)
|
||||
this.$axios({
|
||||
method,
|
||||
url
|
||||
}).then(resp => {
|
||||
this.setLoading(component, false)
|
||||
this.setRespData(component, resp)
|
||||
})
|
||||
}
|
||||
},
|
||||
setLoading(component, val) {
|
||||
const { directives } = component
|
||||
if (Array.isArray(directives)) {
|
||||
const t = directives.find(d => d.name === 'loading')
|
||||
if (t) t.value = val
|
||||
}
|
||||
},
|
||||
activeFormItem(currentItem) {
|
||||
this.activeData = currentItem
|
||||
this.activeId = currentItem.__config__.formId
|
||||
},
|
||||
onEnd(obj) {
|
||||
if (obj.from !== obj.to) {
|
||||
this.fetchData(tempActiveData)
|
||||
this.activeData = tempActiveData
|
||||
this.activeId = this.idGlobal
|
||||
}
|
||||
},
|
||||
addComponent(item) {
|
||||
const clone = this.cloneComponent(item)
|
||||
this.fetchData(clone)
|
||||
this.drawingList.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
cloneComponent(origin) {
|
||||
const clone = deepClone(origin)
|
||||
const config = clone.__config__
|
||||
config.span = this.formConf.span // 生成代码时,会根据span做精简判断
|
||||
this.createIdAndKey(clone)
|
||||
clone.placeholder !== undefined && (clone.placeholder += config.label)
|
||||
tempActiveData = clone
|
||||
return tempActiveData
|
||||
},
|
||||
createIdAndKey(item) {
|
||||
const config = item.__config__
|
||||
config.formId = ++this.idGlobal
|
||||
config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
|
||||
if (config.layout === 'colFormItem') {
|
||||
item.__vModel__ = `field${this.idGlobal}`
|
||||
} else if (config.layout === 'rowFormItem') {
|
||||
config.componentName = `row${this.idGlobal}`
|
||||
!Array.isArray(config.children) && (config.children = [])
|
||||
delete config.label // rowFormItem无需配置label属性
|
||||
}
|
||||
if (Array.isArray(config.children)) {
|
||||
config.children = config.children.map(childItem => this.createIdAndKey(childItem))
|
||||
}
|
||||
return item
|
||||
},
|
||||
AssembleFormData() {
|
||||
this.formData = {
|
||||
fields: deepClone(this.drawingList),
|
||||
...this.formConf
|
||||
}
|
||||
},
|
||||
generate(data) {
|
||||
const func = this[`exec${titleCase(this.operationType)}`]
|
||||
this.generateConf = data
|
||||
func && func(data)
|
||||
},
|
||||
execRun(data) {
|
||||
this.AssembleFormData()
|
||||
this.drawerVisible = true
|
||||
},
|
||||
execDownload(data) {
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, data.fileName)
|
||||
},
|
||||
execCopy(data) {
|
||||
document.getElementById('copyNode').click()
|
||||
},
|
||||
empty() {
|
||||
this.$confirm('确定要清空所有组件吗?', '提示', { type: 'warning' }).then(
|
||||
() => {
|
||||
this.drawingList = []
|
||||
this.idGlobal = 100
|
||||
}).catch(() => {});
|
||||
},
|
||||
drawingItemCopy(item, list) {
|
||||
let clone = deepClone(item)
|
||||
clone = this.createIdAndKey(clone)
|
||||
list.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
drawingItemDelete(index, list) {
|
||||
list.splice(index, 1)
|
||||
this.$nextTick(() => {
|
||||
const len = this.drawingList.length
|
||||
if (len) {
|
||||
this.activeFormItem(this.drawingList[len - 1])
|
||||
}
|
||||
})
|
||||
},
|
||||
generateCode() {
|
||||
const { type } = this.generateConf
|
||||
this.AssembleFormData()
|
||||
const script = vueScript(makeUpJs(this.formData, type))
|
||||
const html = vueTemplate(makeUpHtml(this.formData, type))
|
||||
const css = cssStyle(makeUpCss(this.formData))
|
||||
return beautifier.html(html + script + css, beautifierConf.html)
|
||||
},
|
||||
showJson() {
|
||||
this.AssembleFormData()
|
||||
this.jsonDrawerVisible = true
|
||||
},
|
||||
download() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = true
|
||||
this.operationType = 'download'
|
||||
},
|
||||
run() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'run'
|
||||
},
|
||||
copy() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'copy'
|
||||
},
|
||||
tagChange(newTag) {
|
||||
newTag = this.cloneComponent(newTag)
|
||||
const config = newTag.__config__
|
||||
newTag.__vModel__ = this.activeData.__vModel__
|
||||
config.formId = this.activeId
|
||||
config.span = this.activeData.__config__.span
|
||||
this.activeData.__config__.tag = config.tag
|
||||
this.activeData.__config__.tagIcon = config.tagIcon
|
||||
this.activeData.__config__.document = config.document
|
||||
if (typeof this.activeData.__config__.defaultValue === typeof config.defaultValue) {
|
||||
config.defaultValue = this.activeData.__config__.defaultValue
|
||||
}
|
||||
Object.keys(newTag).forEach(key => {
|
||||
if (this.activeData[key] !== undefined) {
|
||||
newTag[key] = this.activeData[key]
|
||||
}
|
||||
})
|
||||
this.activeData = newTag
|
||||
this.updateDrawingList(newTag, this.drawingList)
|
||||
},
|
||||
updateDrawingList(newTag, list) {
|
||||
const index = list.findIndex(item => item.__config__.formId === this.activeId)
|
||||
if (index > -1) {
|
||||
list.splice(index, 1, newTag)
|
||||
} else {
|
||||
list.forEach(item => {
|
||||
if (Array.isArray(item.__config__.children)) this.updateDrawingList(newTag, item.__config__.children)
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshJson(data) {
|
||||
this.drawingList = deepClone(data.fields)
|
||||
delete data.fields
|
||||
this.formConf = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
@import '@/styles/home';
|
||||
</style>
|
@ -1,19 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from '@/router'
|
||||
import '@/styles/index.scss'
|
||||
import '@/assets/icons'
|
||||
import axios from 'axios'
|
||||
import Tinymce from '@/components/tinymce/index.vue'
|
||||
|
||||
Vue.component('tinymce', Tinymce)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$axios = axios
|
||||
|
||||
// add by 芋道源码:引用自 https://github.com/JakHuang/form-generator/tree/dev/src/views/index
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input placeholder="请输入仓库名称" v-model="info.tableName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input placeholder="请输入" v-model="info.tableComment" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="className">
|
||||
<span slot="label">
|
||||
实体类名称
|
||||
<el-tooltip content="默认去除表名的前缀。如果存在重复,则需要手动添加前缀,避免 MyBatis 报 Alias 重复的问题。" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input placeholder="请输入" v-model="info.className" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作者" prop="author">
|
||||
<el-input placeholder="请输入" v-model="info.author" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "BasicInfoForm",
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
tableName: [
|
||||
{ required: true, message: "请输入表名称", trigger: "blur" }
|
||||
],
|
||||
tableComment: [
|
||||
{ required: true, message: "请输入表描述", trigger: "blur" }
|
||||
],
|
||||
className: [
|
||||
{ required: true, message: "请输入实体类名称", trigger: "blur" }
|
||||
],
|
||||
author: [
|
||||
{ required: true, message: "请输入作者", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,235 +0,0 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<basic-info-form ref="basicInfo" :info="table" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="cloum">
|
||||
<el-table ref="dragTable" :data="columns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column
|
||||
label="字段列名"
|
||||
prop="columnName"
|
||||
min-width="10%"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="字段描述" min-width="10%">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.columnComment"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="物理类型"
|
||||
prop="dataType"
|
||||
min-width="10%"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="Java类型" min-width="11%">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.javaType">
|
||||
<el-option label="Long" value="Long" />
|
||||
<el-option label="String" value="String" />
|
||||
<el-option label="Integer" value="Integer" />
|
||||
<el-option label="Double" value="Double" />
|
||||
<el-option label="BigDecimal" value="BigDecimal" />
|
||||
<el-option label="LocalDateTime" value="LocalDateTime" />
|
||||
<el-option label="Boolean" value="Boolean" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="java属性" min-width="10%">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.javaField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="插入" min-width="4%">
|
||||
<template v-slot="scope">
|
||||
<el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编辑" min-width="4%">
|
||||
<template v-slot="scope">
|
||||
<el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" min-width="4%">
|
||||
<template v-slot="scope">
|
||||
<el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperationResult"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" min-width="4%">
|
||||
<template v-slot="scope">
|
||||
<el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" min-width="10%">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.listOperationCondition">
|
||||
<el-option label="=" value="=" />
|
||||
<el-option label="!=" value="!=" />
|
||||
<el-option label=">" value=">" />
|
||||
<el-option label=">=" value=">=" />
|
||||
<el-option label="<" value="<>" />
|
||||
<el-option label="<=" value="<=" />
|
||||
<el-option label="LIKE" value="LIKE" />
|
||||
<el-option label="BETWEEN" value="BETWEEN" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="允许空" min-width="5%">
|
||||
<template v-slot="scope">
|
||||
<el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示类型" min-width="12%">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.htmlType">
|
||||
<el-option label="文本框" value="input" />
|
||||
<el-option label="文本域" value="textarea" />
|
||||
<el-option label="下拉框" value="select" />
|
||||
<el-option label="单选框" value="radio" />
|
||||
<el-option label="复选框" value="checkbox" />
|
||||
<el-option label="日期控件" value="datetime" />
|
||||
<el-option label="图片上传" value="imageUpload" />
|
||||
<el-option label="文件上传" value="fileUpload" />
|
||||
<el-option label="富文本控件" value="editor" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型" min-width="12%">
|
||||
<template v-slot="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in dictOptions"
|
||||
:key="dict.id"
|
||||
:label="dict.name"
|
||||
:value="dict.type"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="示例" min-width="10%">
|
||||
<template v-slot="scope">
|
||||
<el-input v-model="scope.row.example"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="生成信息" name="genInfo">
|
||||
<gen-info-form ref="genInfo" :info="table" :tables="tables" :menus="menus"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
|
||||
<el-button type="primary" @click="submitForm()">提交</el-button>
|
||||
<el-button @click="close()">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import { getCodegenDetail, updateCodegen } from "@/api/infra/codegen";
|
||||
import { listAllSimple as listAllSimpleDictType } from "@/api/system/dict/type";
|
||||
import { listSimpleMenus } from "@/api/system/menu";
|
||||
import basicInfoForm from "./basicInfoForm";
|
||||
import genInfoForm from "./genInfoForm";
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
name: "GenEdit",
|
||||
components: {
|
||||
basicInfoForm,
|
||||
genInfoForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 选中选项卡的 name
|
||||
activeName: "cloum",
|
||||
// 表格的高度
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表信息
|
||||
tables: [],
|
||||
// 表列信息
|
||||
columns: [],
|
||||
// 字典信息
|
||||
dictOptions: [],
|
||||
// 菜单信息
|
||||
menus: [],
|
||||
// 表详细信息
|
||||
table: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const tableId = this.$route.params && this.$route.params.tableId;
|
||||
if (tableId) {
|
||||
// 获取表详细信息
|
||||
getCodegenDetail(tableId).then(res => {
|
||||
this.table = res.data.table;
|
||||
this.columns = res.data.columns;
|
||||
});
|
||||
/** 查询字典下拉列表 */
|
||||
listAllSimpleDictType().then(response => {
|
||||
this.dictOptions = response.data;
|
||||
});
|
||||
/** 查询菜单下拉列表 */
|
||||
listSimpleMenus().then(response => {
|
||||
this.menus = [];
|
||||
this.menus.push(...this.handleTree(response.data, "id"));
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
|
||||
const genForm = this.$refs.genInfo.$refs.genInfoForm;
|
||||
Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
|
||||
const validateResult = res.every(item => !!item);
|
||||
if (validateResult) {
|
||||
const genTable = {};
|
||||
genTable.table = Object.assign({}, basicForm.model, genForm.model);
|
||||
genTable.columns = this.columns;
|
||||
genTable.params = {
|
||||
treeCode: genTable.treeCode,
|
||||
treeName: genTable.treeName,
|
||||
treeParentCode: genTable.treeParentCode,
|
||||
parentMenuId: genTable.parentMenuId
|
||||
};
|
||||
updateCodegen(genTable).then(res => {
|
||||
this.$modal.msgSuccess("修改成功!");
|
||||
this.close();
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError("表单校验未通过,请重新检查提交内容");
|
||||
}
|
||||
});
|
||||
},
|
||||
getFormPromise(form) {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$tab.closeOpenPage({
|
||||
path: "/infra/codegen",
|
||||
query: { t: Date.now(), pageNum: this.$route.query.pageNum } }
|
||||
);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
|
||||
const sortable = Sortable.create(el, {
|
||||
handle: ".allowDrag",
|
||||
onEnd: evt => {
|
||||
const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
|
||||
this.columns.splice(evt.newIndex, 0, targetRow);
|
||||
for (let index in this.columns) {
|
||||
this.columns[index].sort = parseInt(index) + 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,339 +0,0 @@
|
||||
<template>
|
||||
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="templateType">
|
||||
<span slot="label">生成模板</span>
|
||||
<el-select v-model="info.templateType" @change="tplSelectChange">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
|
||||
:key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="templateType">
|
||||
<span slot="label">前端类型</span>
|
||||
<el-select v-model="info.frontType">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
|
||||
:key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="scene">
|
||||
<span slot="label">生成场景</span>
|
||||
<el-select v-model="info.scene">
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CODEGEN_SCENE)"
|
||||
:key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
上级菜单
|
||||
<el-tooltip content="分配到指定菜单下,例如 系统管理" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<treeselect :append-to-body="true" v-model="info.parentMenuId" :options="menus"
|
||||
:normalizer="normalizer" :show-count="true" placeholder="请选择系统菜单" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item prop="packageName">-->
|
||||
<!-- <span slot="label">-->
|
||||
<!-- 生成包路径-->
|
||||
<!-- <el-tooltip content="生成在哪个java包下,例如 com.ruoyi.system" placement="top">-->
|
||||
<!-- <i class="el-icon-question"></i>-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-input v-model="info.packageName" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="moduleName">
|
||||
<span slot="label">
|
||||
模块名
|
||||
<el-tooltip content="模块名,即一级目录,例如 system、infra、tool 等等" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.moduleName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="businessName">
|
||||
<span slot="label">
|
||||
业务名
|
||||
<el-tooltip content="业务名,即二级目录,例如 user、permission、dict 等等" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.businessName" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item prop="businessPackage">-->
|
||||
<!-- <span slot="label">-->
|
||||
<!-- 业务包-->
|
||||
<!-- <el-tooltip content="业务包,自定义二级目录。例如说,我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
|
||||
<!-- <i class="el-icon-question"></i>-->
|
||||
<!-- </el-tooltip>-->
|
||||
<!-- </span>-->
|
||||
<!-- <el-input v-model="info.businessPackage" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="className">
|
||||
<span slot="label">
|
||||
类名称
|
||||
<el-tooltip content="类名称(首字母大写),例如SysUser、SysMenu、SysDictData 等等" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.className" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="classComment">
|
||||
<span slot="label">
|
||||
类描述
|
||||
<el-tooltip content="用作类描述,例如 用户" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.classComment" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-if="info.genType === '1'">
|
||||
<el-form-item prop="genPath">
|
||||
<span slot="label">
|
||||
自定义路径
|
||||
<el-tooltip content="填写磁盘绝对路径,若不填写,则生成到当前Web项目下" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.genPath">
|
||||
<el-dropdown slot="append">
|
||||
<el-button type="primary">
|
||||
最近路径快速选择
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-show="info.tplCategory === 'tree'">
|
||||
<h4 class="form-header">其他信息</h4>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树编码字段
|
||||
<el-tooltip content="树显示的编码字段名, 如:dept_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeCode" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + ':' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树父编码字段
|
||||
<el-tooltip content="树显示的父编码字段名, 如:parent_Id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeParentCode" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + ':' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树名称字段
|
||||
<el-tooltip content="树节点的显示名称字段名, 如:dept_name" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeName" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + ':' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-show="info.tplCategory === 'sub'">
|
||||
<h4 class="form-header">关联信息</h4>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
关联子表的表名
|
||||
<el-tooltip content="关联子表的表名, 如:sys_user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
|
||||
<el-option
|
||||
v-for="(table, index) in tables"
|
||||
:key="index"
|
||||
:label="table.tableName + ':' + table.tableComment"
|
||||
:value="table.tableName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
子表关联的外键名
|
||||
<el-tooltip content="子表关联的外键名, 如:user_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.subTableFkName" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in subColumns"
|
||||
:key="index"
|
||||
:label="column.columnName + ':' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "BasicInfoForm",
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
tables: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
subColumns: [],
|
||||
rules: {
|
||||
templateType: [
|
||||
{ required: true, message: "请选择生成模板", trigger: "blur" }
|
||||
],
|
||||
scene: [
|
||||
{ required: true, message: "请选择生成场景", trigger: "blur" }
|
||||
],
|
||||
frontType: [
|
||||
{ required: true, message: "请选择前端类型", trigger: "blur" }
|
||||
],
|
||||
// packageName: [
|
||||
// { required: true, message: "请输入生成包路径", trigger: "blur" }
|
||||
// ],
|
||||
moduleName: [
|
||||
{ required: true, message: "请输入生成模块名", trigger: "blur" }
|
||||
],
|
||||
businessName: [
|
||||
{ required: true, message: "请输入生成业务名", trigger: "blur" }
|
||||
],
|
||||
businessPackage: [
|
||||
{ required: true, message: "请输入生成业务包", trigger: "blur" }
|
||||
],
|
||||
className: [
|
||||
{ required: true, message: "请输入生成类名称", trigger: "blur" }
|
||||
],
|
||||
classComment: [
|
||||
{ required: true, message: "请输入生成类描述", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
watch: {
|
||||
'info.subTableName': function(val) {
|
||||
this.setSubTableColumns(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 选择子表名触发 */
|
||||
subSelectChange(value) {
|
||||
this.info.subTableFkName = '';
|
||||
},
|
||||
/** 选择生成模板触发 */
|
||||
tplSelectChange(value) {
|
||||
if (value !== 1) {
|
||||
// TODO 芋艿:暂时不考虑支持树形结构
|
||||
this.$modal.msgError('暂时不考虑支持【树形】和【主子表】的代码生成。原因是:导致 vm 模板过于复杂,不利于胖友二次开发');
|
||||
return false;
|
||||
}
|
||||
if(value !== 'sub') {
|
||||
this.info.subTableName = '';
|
||||
this.info.subTableFkName = '';
|
||||
}
|
||||
},
|
||||
/** 设置关联外键 */
|
||||
setSubTableColumns(value) {
|
||||
for (let item in this.tables) {
|
||||
const name = this.tables[item].tableName;
|
||||
if (value === name) {
|
||||
this.subColumns = this.tables[item].columns;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<!-- 导入表 -->
|
||||
<el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
|
||||
<el-form-item label="数据源" prop="dataSourceConfigId">
|
||||
<el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
|
||||
<el-option v-for="config in dataSourceConfigs"
|
||||
:key="config.id" :label="config.name" :value="config.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入表名称" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="comment">
|
||||
<el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable @keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table v-loading="loading" @row-click="clickRow" ref="table" :data="dbTableList"
|
||||
@selection-change="handleSelectionChange" height="260px">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
|
||||
</el-table>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleImportTable">确 定</el-button>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSchemaTableList, createCodegenList } from "@/api/infra/codegen";
|
||||
import {getDataSourceConfigList} from "@/api/infra/dataSourceConfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 遮罩层
|
||||
visible: false,
|
||||
// 选中数组值
|
||||
tables: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表数据
|
||||
dbTableList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
dataSourceConfigId: undefined,
|
||||
name: undefined,
|
||||
comment: undefined,
|
||||
},
|
||||
// 数据源列表
|
||||
dataSourceConfigs: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 显示弹框
|
||||
show() {
|
||||
this.visible = true;
|
||||
// 加载数据源
|
||||
getDataSourceConfigList().then(response => {
|
||||
this.dataSourceConfigs = response.data;
|
||||
this.queryParams.dataSourceConfigId = this.dataSourceConfigs[0].id;
|
||||
// 加载表列表
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
clickRow(row) {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.tables = selection.map(item => item.name);
|
||||
},
|
||||
// 查询表数据
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getSchemaTableList(this.queryParams).then(res => {
|
||||
this.dbTableList = res.data;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.dataSourceConfigId = this.dataSourceConfigs[0].id;
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImportTable() {
|
||||
createCodegenList({
|
||||
dataSourceConfigId: this.queryParams.dataSourceConfigId,
|
||||
tableNames: this.tables
|
||||
}).then(res => {
|
||||
this.$modal.msgSuccess("导入成功");
|
||||
this.visible = false;
|
||||
this.$emit("ok");
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,317 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="代码生成" url="https://doc.iocoder.cn/new-feature/" />
|
||||
<doc-alert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
|
||||
<!-- 操作工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作工作栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="el-icon-upload" size="mini" @click="openImportTable"
|
||||
v-hasPermi="['infra:codegen:create']">导入</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="tableList">
|
||||
<el-table-column label="数据源" align="center" :formatter="dataSourceConfigNameFormat"/>
|
||||
<el-table-column label="表名称" align="center" prop="tableName" width="200"/>
|
||||
<el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120"/>
|
||||
<el-table-column label="实体" align="center" prop="className" width="200"/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="300px" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" size="small" icon="el-icon-view" @click="handlePreview(scope.row)" v-hasPermi="['infra:codegen:preview']">预览</el-button>
|
||||
<el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)" v-hasPermi="['infra:codegen:update']">编辑</el-button>
|
||||
<el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['infra:codegen:delete']">删除</el-button>
|
||||
<el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['infra:codegen:update']">同步</el-button>
|
||||
<el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)" v-hasPermi="['infra:codegen:download']">生成代码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/>
|
||||
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog :title="preview.title" :visible.sync="preview.open" width="90%" top="5vh" append-to-body class="scrollbar">
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<el-tree :data="preview.fileTree" :expand-on-click-node="false" default-expand-all highlight-current
|
||||
@node-click="handleNodeClick"/>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-tabs v-model="preview.activeName">
|
||||
<el-tab-pane v-for="item in preview.data" :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
|
||||
:name="item.filePath" :key="item.filePath">
|
||||
<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="item.code" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
|
||||
<pre><code class="hljs" v-html="highlightedCode(item)"></code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 基于 DB 导入 -->
|
||||
<import-table ref="import" @ok="handleQuery" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodegenTablePage, previewCodegen, downloadCodegen, deleteCodegen,
|
||||
syncCodegenFromDB } from "@/api/infra/codegen";
|
||||
|
||||
import importTable from "./importTable";
|
||||
// 代码高亮插件
|
||||
import hljs from "highlight.js/lib/highlight";
|
||||
import "highlight.js/styles/github-gist.css";
|
||||
import {getDataSourceConfigList} from "@/api/infra/dataSourceConfig";
|
||||
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
|
||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
|
||||
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
|
||||
hljs.registerLanguage("typescript", require("highlight.js/lib/languages/typescript"));
|
||||
export default {
|
||||
name: "InfraCodegen",
|
||||
components: { importTable },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 唯一标识符
|
||||
uniqueId: "",
|
||||
// 选中表数组
|
||||
tableNames: [],
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表数据
|
||||
tableList: [],
|
||||
// 日期范围
|
||||
dateRange: "",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined,
|
||||
createTime: []
|
||||
},
|
||||
// 预览参数
|
||||
preview: {
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
fileTree: [],
|
||||
data: {},
|
||||
activeName: "",
|
||||
},
|
||||
// 数据源列表
|
||||
dataSourceConfigs: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
// 加载数据源
|
||||
getDataSourceConfigList().then(response => {
|
||||
this.dataSourceConfigs = response.data;
|
||||
});
|
||||
},
|
||||
activated() {
|
||||
const time = this.$route.query.t;
|
||||
if (time != null && time !== this.uniqueId) {
|
||||
this.uniqueId = time;
|
||||
this.resetQuery();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询表集合 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getCodegenTablePage(this.queryParams).then(response => {
|
||||
this.tableList = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 生成代码操作 */
|
||||
handleGenTable(row) {
|
||||
downloadCodegen(row.id).then(response => {
|
||||
this.$download.zip(response, 'codegen-' + row.tableName + '.zip');
|
||||
})
|
||||
},
|
||||
/** 同步数据库操作 */
|
||||
handleSynchDb(row) {
|
||||
// 基于 DB 同步
|
||||
const tableName = row.tableName;
|
||||
this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗?').then(function() {
|
||||
return syncCodegenFromDB(row.id);
|
||||
}).then(() => {
|
||||
this.$modal.msgSuccess("同步成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 打开导入表弹窗 */
|
||||
openImportTable() {
|
||||
this.$refs.import.show();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 预览按钮 */
|
||||
handlePreview(row) {
|
||||
previewCodegen(row.id).then(response => {
|
||||
this.preview.data = response.data;
|
||||
let files = this.handleFiles(response.data);
|
||||
this.preview.fileTree = this.handleTree(files, "id", "parentId", "children",
|
||||
"/"); // "/" 为根节点
|
||||
// console.log(this.preview.fileTree)
|
||||
this.preview.activeName = response.data[0].filePath;
|
||||
this.preview.open = true;
|
||||
});
|
||||
},
|
||||
/** 高亮显示 */
|
||||
highlightedCode(item) {
|
||||
// const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
|
||||
// var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
|
||||
const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1)
|
||||
const result = hljs.highlight(language, item.code || "", true);
|
||||
return result.value || ' ';
|
||||
},
|
||||
/** 复制代码成功 */
|
||||
clipboardSuccess() {
|
||||
this.$modal.msgSuccess("复制成功");
|
||||
},
|
||||
/** 生成 files 目录 **/
|
||||
handleFiles(datas) {
|
||||
let exists = {}; // key:file 的 id;value:true
|
||||
let files = [];
|
||||
// 遍历每个元素
|
||||
for (const data of datas) {
|
||||
let paths = data.filePath.split('/');
|
||||
let fullPath = ''; // 从头开始的路径,用于生成 id
|
||||
// 特殊处理 java 文件
|
||||
if (paths[paths.length - 1].indexOf('.java') >= 0) {
|
||||
let newPaths = [];
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
let path = paths[i];
|
||||
if (path !== 'java') {
|
||||
newPaths.push(path);
|
||||
continue;
|
||||
}
|
||||
newPaths.push(path);
|
||||
// 特殊处理中间的 package,进行合并
|
||||
let tmp = undefined;
|
||||
while (i < paths.length) {
|
||||
path = paths[i + 1];
|
||||
if (path === 'controller'
|
||||
|| path === 'convert'
|
||||
|| path === 'dal'
|
||||
|| path === 'enums'
|
||||
|| path === 'service'
|
||||
|| path === 'vo' // 下面三个,主要是兜底。可能考虑到有人改了包结构
|
||||
|| path === 'mysql'
|
||||
|| path === 'dataobject') {
|
||||
break;
|
||||
}
|
||||
tmp = tmp ? tmp + '.' + path : path;
|
||||
i++;
|
||||
}
|
||||
if (tmp) {
|
||||
newPaths.push(tmp);
|
||||
}
|
||||
}
|
||||
paths = newPaths;
|
||||
}
|
||||
// 遍历每个 path, 拼接成树
|
||||
for (let i = 0; i < paths.length; i++) {
|
||||
// 已经添加到 files 中,则跳过
|
||||
let oldFullPath = fullPath;
|
||||
// 下面的 replaceAll 的原因,是因为上面包处理了,导致和 tabs 不匹配,所以 replaceAll 下
|
||||
fullPath = fullPath.length === 0 ? paths[i] : fullPath.replaceAll('.', '/') + '/' + paths[i];
|
||||
if (exists[fullPath]) {
|
||||
continue;
|
||||
}
|
||||
// 添加到 files 中
|
||||
exists[fullPath] = true;
|
||||
files.push({
|
||||
id: fullPath,
|
||||
label: paths[i],
|
||||
parentId: oldFullPath || '/' // "/" 为根节点
|
||||
});
|
||||
}
|
||||
}
|
||||
return files;
|
||||
},
|
||||
/** 节点单击事件 **/
|
||||
handleNodeClick(data, node) {
|
||||
if (node && !node.isLeaf) {
|
||||
return false;
|
||||
}
|
||||
// 判断,如果非子节点,不允许选中
|
||||
this.preview.activeName = data.id;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleEditTable(row) {
|
||||
const tableId = row.id;
|
||||
const tableName = row.tableName || this.tableNames[0];
|
||||
const params = { pageNum: this.queryParams.pageNum };
|
||||
this.$tab.openPage("修改[" + tableName + "]生成配置", '/codegen/edit/' + tableId, params);
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const tableIds = row.id;
|
||||
this.$modal.confirm('是否确认删除表名称为"' + row.tableName + '"的数据项?').then(function() {
|
||||
return deleteCodegen(tableIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 数据源配置的名字
|
||||
dataSourceConfigNameFormat(row, column) {
|
||||
for (const config of this.dataSourceConfigs) {
|
||||
if (row.dataSourceConfigId === config.id) {
|
||||
return config.name;
|
||||
}
|
||||
}
|
||||
return '未知【' + row.leaderUserId + '】';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,262 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="配置中心" url="https://doc.iocoder.cn/config-center/" />
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="参数名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入参数名称" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="key">
|
||||
<el-input v-model="queryParams.key" placeholder="请输入参数键名" clearable style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="系统内置" clearable>
|
||||
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_CONFIG_TYPE)" :key="parseInt(dict.value)"
|
||||
:label="dict.label" :value="parseInt(dict.value)"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['infra:config:create']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
|
||||
v-hasPermi="['infra:config:export']">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="configList">
|
||||
<el-table-column label="参数主键" align="center" prop="id" />
|
||||
<el-table-column label="参数分类" align="center" prop="category" />
|
||||
<el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键值" align="center" prop="value" />
|
||||
<el-table-column label="系统内置" align="center" prop="type">
|
||||
<template v-slot="scope">
|
||||
<dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否可见" align="center" prop="visible">
|
||||
<template v-slot="scope">
|
||||
<span>{{ scope.row.visible ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['infra:config:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['infra:config:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"/>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="参数分类" prop="category">
|
||||
<el-input v-model="form.category" placeholder="请输入参数分类" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="key">
|
||||
<el-input v-model="form.key" placeholder="请输入参数键名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键值" prop="value">
|
||||
<el-input v-model="form.value" placeholder="请输入参数键值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可见" prop="type">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio :key="true" :label="true">是</el-radio>
|
||||
<el-radio :key="false" :label="false">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, exportConfig } from "@/api/infra/config";
|
||||
|
||||
export default {
|
||||
name: "InfraConfig",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 导出遮罩层
|
||||
exportLoading: false,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 参数表格数据
|
||||
configList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 类型数据字典
|
||||
typeOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
key: undefined,
|
||||
type: undefined,
|
||||
createTime: []
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
category: [
|
||||
{ required: true, message: "参数分类不能为空", trigger: "blur" }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "参数名称不能为空", trigger: "blur" }
|
||||
],
|
||||
key: [
|
||||
{ required: true, message: "参数键名不能为空", trigger: "blur" }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: "参数键值不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询参数列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listConfig(this.queryParams).then(response => {
|
||||
this.configList = response.data.list;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
key: undefined,
|
||||
value: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加参数";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getConfig(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改参数";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id !== undefined) {
|
||||
updateConfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addConfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除参数编号为"' + ids + '"的数据项?').then(function() {
|
||||
return delConfig(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.$modal.confirm('是否确认导出所有参数数据项?').then(() => {
|
||||
// 处理查询参数
|
||||
let params = {...this.queryParams};
|
||||
params.pageNo = undefined;
|
||||
params.pageSize = undefined;
|
||||
this.exportLoading = true;
|
||||
return exportConfig(params);
|
||||
}).then(response => {
|
||||
this.$download.excel(response, '参数配置.xls');
|
||||
this.exportLoading = false;
|
||||
}).catch(() => {});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,166 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 操作工具栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
|
||||
v-hasPermi="['infra:data-source-config:create']">新增</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="主键编号" align="center" prop="id" />
|
||||
<el-table-column label="数据源名称" align="center" prop="name" />
|
||||
<el-table-column label="数据源连接" align="center" prop="url" />
|
||||
<el-table-column label="用户名" align="center" prop="username" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template v-slot="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template v-slot="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['infra:data-source-config:update']">修改</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['infra:data-source-config:delete']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="数据源名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入参数名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据源连接" prop="url">
|
||||
<el-input v-model="form.url" placeholder="请输入数据源连接" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入密码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createDataSourceConfig, updateDataSourceConfig, deleteDataSourceConfig, getDataSourceConfig, getDataSourceConfigList } from "@/api/infra/dataSourceConfig";
|
||||
|
||||
export default {
|
||||
name: "InfraDataSourceConfig",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 数据源配置列表
|
||||
list: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "数据源名称不能为空", trigger: "blur" }],
|
||||
url: [{ required: true, message: "数据源连接不能为空", trigger: "blur" }],
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
// 执行查询
|
||||
getDataSourceConfigList().then(response => {
|
||||
this.list = response.data;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 取消按钮 */
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 表单重置 */
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
url: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加数据源配置";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id;
|
||||
getDataSourceConfig(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改数据源配置";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 修改的提交
|
||||
if (this.form.id != null) {
|
||||
updateDataSourceConfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 添加的提交
|
||||
createDataSourceConfig(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const id = row.id;
|
||||
this.$modal.confirm('是否确认删除数据源配置编号为"' + id + '"的数据项?').then(function() {
|
||||
return deleteDataSourceConfig(id);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<doc-alert title="数据库文档" url="https://doc.iocoder.cn/db-doc/" />
|
||||
<!-- 操作工作栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleExportHtml">导出 HTML</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleExportWord">导出 Word</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleExportMarkdown">导出 Markdown</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 展示文档 -->
|
||||
<div v-loading="loading" :style="'height:'+ height">
|
||||
<i-frame :src="src" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { exportHtml, exportWord, exportMarkdown} from "@/api/infra/dbDoc";
|
||||
import iFrame from "@/components/iFrame/index";
|
||||
|
||||
export default {
|
||||
name: "InfraDBDoc",
|
||||
components: { iFrame },
|
||||
data() {
|
||||
return {
|
||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
||||
loading: true,
|
||||
src: "undefined",
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 230);
|
||||
const that = this;
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 94.5 + "px;";
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 加载 Html,进行预览
|
||||
exportHtml().then(response => {
|
||||
let blob = new Blob([response], {type : 'text/html'});
|
||||
this.src = window.URL.createObjectURL(blob);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 处理导出 HTML */
|
||||
handleExportHtml() {
|
||||
exportHtml().then(response => {
|
||||
this.$download.html(response, '数据库文档.html');
|
||||
})
|
||||
},
|
||||
/** 处理导出 Word */
|
||||
handleExportWord() {
|
||||
exportWord().then(response => {
|
||||
this.$download.word(response, '数据库文档.doc');
|
||||
})
|
||||
},
|
||||
/** 处理导出 Markdown */
|
||||
handleExportMarkdown() {
|
||||
exportMarkdown().then(response => {
|
||||
this.$download.markdown(response, '数据库文档.md');
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user