mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mesxc-lb #282

Manually merged
juzi merged 6 commits from projects/mesxc-lb into projects/mesxc-test 2024-03-27 09:18:06 +08:00
Conversation 0 Commits 6 Files Changed 209 +289 -27014
177 changed files with 289 additions and 27014 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit abfd448247 - Show all commits

4
.prettierrc
View File

@ -7,5 +7,7 @@
"vueIndentScriptAndStyle": false, "vueIndentScriptAndStyle": false,
"semi": true, "semi": true,
"singleQuote": true, "singleQuote": true,
"trailingComma": "es5" "trailingComma": "es5",
"jsxBracketSameLine": true,
"singleAttributePerLine": true
} }

9
src/api/bpm/activity.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
export function getActivityList(query) {
return request({
url: '/bpm/activity/list',
method: 'get',
params: query
})
}

24
src/api/bpm/definition.js
View File

@ -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'
})
}

52
src/api/bpm/form.js
View File

@ -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'
})
}

27
src/api/bpm/leave.js
View File

@ -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
})
}

58
src/api/bpm/model.js
View File

@ -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'
})
}

35
src/api/bpm/processInstance.js
View File

@ -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',
})
}

63
src/api/bpm/task.js
View File

@ -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',
})
}

25
src/api/bpm/taskAssignRule.js
View File

@ -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
})
}

52
src/api/bpm/userGroup.js
View File

@ -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'
})
}

20
src/api/infra/apiAccessLog.js
View File

@ -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'
})
}

28
src/api/infra/apiErrorLog.js
View File

@ -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'
})
}

90
src/api/infra/codegen.js
View File

@ -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'
})
}

62
src/api/infra/config.js
View File

@ -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'
})
}

43
src/api/infra/dataSourceConfig.js
View File

@ -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',
})
}

26
src/api/infra/dbDoc.js
View File

@ -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'
})
}

18
src/api/infra/file.js
View File

@ -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
})
}

59
src/api/infra/fileConfig.js
View File

@ -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'
})
}

82
src/api/infra/job.js
View File

@ -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'
})
}

28
src/api/infra/jobLog.js
View File

@ -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'
})
}

9
src/api/infra/redis.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 查询缓存详细
export function getCache() {
return request({
url: '/infra/redis/get-monitor-info',
method: 'get'
})
}

54
src/api/infra/testDemo.js
View File

@ -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'
})
}

54
src/api/mall/market/banner.js
View File

@ -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'
})
}

63
src/api/mall/product/brand.js
View File

@ -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'
})
}

44
src/api/mall/product/category.js
View File

@ -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
})
}

113
src/api/mall/product/property.js
View File

@ -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 {
}

9
src/api/mall/product/sku.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 获得商品 SKU 选项的列表
export function getSkuOptionList() {
return request({
url: '/product/sku/get-option-list',
method: 'get',
})
}

52
src/api/mall/product/spu.js
View File

@ -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',
})
}

18
src/api/mall/promotion/coupon.js
View File

@ -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
})
}

67
src/api/mall/promotion/couponTemplate.js
View File

@ -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'
})
}

52
src/api/mall/promotion/discountActivity.js
View File

@ -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
})
}

52
src/api/mall/promotion/rewardActivity.js
View File

@ -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
})
}

52
src/api/mall/promotion/seckillActivity.js
View File

@ -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
})
}

62
src/api/mall/promotion/seckillTime.js
View File

@ -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'
})
}

18
src/api/mall/trade/afterSale.js
View File

@ -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
})
}

18
src/api/mall/trade/order.js
View File

@ -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',
})
}

68
src/api/mp/account.js
View File

@ -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'
})
}

44
src/api/mp/autoReply.js
View File

@ -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
})
}

38
src/api/mp/draft.js
View File

@ -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',
})
}

26
src/api/mp/freePublish.js
View File

@ -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'
})
}

18
src/api/mp/material.js
View File

@ -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'
})
}

29
src/api/mp/menu.js
View File

@ -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',
})
}

19
src/api/mp/message.js
View File

@ -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
})
}

35
src/api/mp/mpuser.js
View File

@ -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'
})
}

37
src/api/mp/statistics.js
View File

@ -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
})
}

60
src/api/mp/tag.js
View File

@ -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'
})
}

78
src/api/pay/app.js
View File

@ -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'
})
}

71
src/api/pay/channel.js
View File

@ -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'
})
}

35
src/api/pay/demo.js
View File

@ -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'
})
}

77
src/api/pay/merchant.js
View File

@ -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'
})
}

53
src/api/pay/order.js
View File

@ -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'
})
}

54
src/api/pay/refund.js
View File

@ -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
View File

@ -9,13 +9,12 @@ import store from './store';
import router from './router'; import router from './router';
import directive from './directive'; // directive import directive from './directive'; // directive
import plugins from './plugins'; // plugins import plugins from './plugins'; // plugins
import { scrollBoard } from '@jiaminghi/data-view' import { scrollBoard } from '@jiaminghi/data-view';
import './assets/icons'; // icon import './assets/icons'; // icon
import './permission'; // permission control import './permission'; // permission control
// import './tongji' // 百度统计 // import './tongji' // 百度统计
import { getDicts } from '@/api/system/dict/data'; import { getDicts } from '@/api/system/dict/data';
import { getConfigKey } from '@/api/infra/config';
import { import {
parseTime, parseTime,
resetForm, resetForm,
@ -40,7 +39,6 @@ import './theme/index.css'; // 自定义主题包 - code-brick-zj
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts; Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime; Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm; Vue.prototype.resetForm = resetForm;
Vue.prototype.getDictDatas = getDictDatas; Vue.prototype.getDictDatas = getDictDatas;
@ -50,16 +48,19 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
Vue.prototype.handleTree = handleTree; Vue.prototype.handleTree = handleTree;
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime; Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
Vue.prototype.divide = divide; Vue.prototype.divide = divide;
Vue.prototype.tableHeight = function(n) { Vue.prototype.tableHeight = function (n) {
return window.innerHeight - n return window.innerHeight - n;
} };
Vue.prototype.searchBarWidth = function(name, num) { Vue.prototype.searchBarWidth = function (name, num) {
if (document.getElementById(name) && document.getElementById(name).offsetWidth < num) { if (
return true document.getElementById(name) &&
document.getElementById(name).offsetWidth < num
) {
return true;
} else { } else {
return false return false;
} }
} };
// 全局组件挂载 // 全局组件挂载
Vue.component('DictTag', DictTag); Vue.component('DictTag', DictTag);
@ -72,25 +73,17 @@ import DocAlert from '@/components/DocAlert';
// 头部标签插件 // 头部标签插件
import VueMeta from 'vue-meta'; import VueMeta from 'vue-meta';
import CodeBrickZj from 'code-brick-zj'; import CodeBrickZj from 'code-brick-zj';
import { hiPrintPlugin,disAutoConnect } from 'vue-plugin-hiprint' import { hiPrintPlugin, disAutoConnect } from 'vue-plugin-hiprint';
disAutoConnect(); disAutoConnect();
Vue.use(hiPrintPlugin) Vue.use(hiPrintPlugin);
Vue.use(CodeBrickZj) Vue.use(CodeBrickZj);
Vue.use(directive); Vue.use(directive);
Vue.use(plugins); Vue.use(plugins);
Vue.use(VueMeta); Vue.use(VueMeta);
Vue.use(scrollBoard) Vue.use(scrollBoard);
// Vue.use(hljs.vuePlugin); // Vue.use(hljs.vuePlugin);
import scroll from 'vue-seamless-scroll' import scroll from 'vue-seamless-scroll';
Vue.use(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';
// Form Generator 组件需要使用到 tinymce // Form Generator 组件需要使用到 tinymce
import Tinymce from '@/components/tinymce/index.vue'; import Tinymce from '@/components/tinymce/index.vue';

399
src/router/index.js
View File

@ -1,9 +1,9 @@
import Vue from 'vue' import Vue from 'vue';
import Router from 'vue-router' import Router from 'vue-router';
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout';
Vue.use(Router) Vue.use(Router);
/** /**
* Note: 路由配置项 * Note: 路由配置项
@ -28,263 +28,146 @@ Vue.use(Router)
// 公共路由 // 公共路由
export const constantRoutes = [ export const constantRoutes = [
{ {
path: '/redirect', path: '/redirect',
component: Layout, component: Layout,
hidden: true, hidden: true,
children: [ children: [
{ {
path: '/redirect/:path(.*)', path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve) component: (resolve) => require(['@/views/redirect'], resolve),
} },
] ],
}, },
{ {
path: '/login', path: '/login',
component: (resolve) => require(['@/views/login'], resolve), component: (resolve) => require(['@/views/login'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/sso', path: '/sso',
component: (resolve) => require(['@/views/sso'], resolve), component: (resolve) => require(['@/views/sso'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/social-login', path: '/social-login',
component: (resolve) => require(['@/views/socialLogin'], resolve), component: (resolve) => require(['@/views/socialLogin'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/404', path: '/404',
component: (resolve) => require(['@/views/error/404'], resolve), component: (resolve) => require(['@/views/error/404'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/401', path: '/401',
component: (resolve) => require(['@/views/error/401'], resolve), component: (resolve) => require(['@/views/error/401'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/print-design', path: '/print-design',
component: (resolve) => require(['@/views/print/design'], resolve), component: (resolve) => require(['@/views/print/design'], resolve),
hidden: true hidden: true,
}, },
{ {
path: '/', path: '/',
component: () => import('@/views/choicePart'), component: () => import('@/views/choicePart'),
hidden: true, hidden: true,
meta: { requireToken: true } meta: { requireToken: true },
}, },
// { // {
// path: '/', // path: '/',
// component: Layout, // component: Layout,
// // redirect: 'core/base/factory', // // redirect: 'core/base/factory',
// // children: [{ // // children: [{
// // path: 'index', // // path: 'index',
// // redirect: 'core/base/factory', // // redirect: 'core/base/factory',
// // component: (resolve) => require(['@/views/index'], resolve), // // component: (resolve) => require(['@/views/index'], resolve),
// // name: '首页', // // name: '首页',
// // meta: { title: '首页', icon: 'dashboard', affix: true } // // meta: { title: '首页', icon: 'dashboard', affix: true }
// // } // // }
// // ] // // ]
// }, // },
{ {
path: '/AGVBoard', path: '/AGVBoard',
name: 'AGVBoard', name: 'AGVBoard',
// component: Layout, // component: Layout,
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/AGVBoard.vue') 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 path: '/coldBoard',
// which is lazy-loaded when the route is visited. name: 'coldBoard',
component: () => import(/* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue') // route level code-splitting
}, // this generates a separate chunk (about.[hash].js) for this route
{ // which is lazy-loaded when the route is visited.
path: '/processingBoard', component: () =>
name: 'processingBoard', import(
// route level code-splitting /* webpackChunkName: "about" */ '@/views/OperationalOverview/coldBoard.vue'
// 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: '/processingBoard',
{ name: 'processingBoard',
path: '/user', // route level code-splitting
component: Layout, // this generates a separate chunk (about.[hash].js) for this route
hidden: true, // which is lazy-loaded when the route is visited.
redirect: 'noredirect', component: () =>
children: [{ import(
path: 'profile', /* webpackChunkName: "about" */ '@/views/OperationalOverview/processingBoard.vue'
component: (resolve) => require(['@/views/system/user/profile/index'], resolve), ),
name: 'Profile', },
meta: { title: '个人中心', icon: 'user' } {
}, { path: '/user',
path: 'notify-message', component: Layout,
component: (resolve) => require(['@/views/system/notify/my/index'], resolve), hidden: true,
name: 'MyNotifyMessage', redirect: 'noredirect',
meta: { title: '我的站内信', icon: 'message' }, children: [
}] {
}, path: 'profile',
{ component: (resolve) =>
path: '/dict', require(['@/views/system/user/profile/index'], resolve),
component: Layout, name: 'Profile',
hidden: true, meta: { title: '个人中心', icon: 'user' },
children: [{ },
path: 'type/data/:dictId(\\d+)', {
component: (resolve) => require(['@/views/system/dict/data'], resolve), path: 'notify-message',
name: 'SystemDictData', component: (resolve) =>
meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' } require(['@/views/system/notify/my/index'], resolve),
} name: 'MyNotifyMessage',
] meta: { title: '我的站内信', icon: 'message' },
}, },
{ ],
path: '/job', },
component: Layout, {
hidden: true, path: '/dict',
children: [{ component: Layout,
path: 'log', hidden: true,
component: (resolve) => require(['@/views/infra/job/log'], resolve), children: [
name: 'InfraJobLog', {
meta: { title: '调度日志', activeMenu: '/infra/job' } path: 'type/data/:dictId(\\d+)',
} component: (resolve) => require(['@/views/system/dict/data'], resolve),
] name: 'SystemDictData',
}, { meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' },
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)
}]
}
]
// 防止连续点击多次路由报错 // 防止连续点击多次路由报错
let routerPush = Router.prototype.push; let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) { 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({ export default new Router({
base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/", base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : '/',
mode: 'hash', // 去掉url中的# mode: 'hash', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes routes: constantRoutes,
}) });

0
src/views/specialEquipment/check/iconfont/demo.css → src/styles/iconfont/demo.css
View File

0
src/views/specialEquipment/check/iconfont/iconfont.css → src/styles/iconfont/iconfont.css
View File

0
src/views/specialEquipment/check/iconfont/iconfont.eot → src/styles/iconfont/iconfont.eot
View File

0
src/views/specialEquipment/check/iconfont/iconfont.js → src/styles/iconfont/iconfont.js
View File

0
src/views/specialEquipment/check/iconfont/iconfont.json → src/styles/iconfont/iconfont.json
View File

0
src/views/specialEquipment/check/iconfont/iconfont.svg → src/styles/iconfont/iconfont.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

0
src/views/specialEquipment/check/iconfont/iconfont.ttf → src/styles/iconfont/iconfont.ttf
View File

0
src/views/specialEquipment/check/iconfont/iconfont.woff → src/styles/iconfont/iconfont.woff
View File

0
src/views/specialEquipment/check/iconfont/iconfont.woff2 → src/styles/iconfont/iconfont.woff2
View File

174
src/views/bpm/definition/index.vue
View File

@ -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>

567
src/views/bpm/form/formEditor.vue
View File

@ -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>

161
src/views/bpm/form/index.vue
View File

@ -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>

246
src/views/bpm/group/index.vue
View File

@ -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>

548
src/views/bpm/model/index.vue
View File

@ -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>

170
src/views/bpm/model/modelEditor.vue
View File

@ -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>

75
src/views/bpm/oa/leave/create.vue
View File

@ -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>

59
src/views/bpm/oa/leave/detail.vue
View File

@ -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>

173
src/views/bpm/oa/leave/index.vue
View File

@ -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>

168
src/views/bpm/processInstance/create.vue
View File

@ -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>

400
src/views/bpm/processInstance/detail.vue
View File

@ -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>

182
src/views/bpm/processInstance/index.vue
View File

@ -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>

120
src/views/bpm/task/done/index.vue
View File

@ -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>

107
src/views/bpm/task/todo/index.vue
View File

@ -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>

337
src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue
View File

@ -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>

210
src/views/infra/apiAccessLog/index.vue
View File

@ -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>

228
src/views/infra/apiErrorLog/index.vue
View File

@ -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>

22
src/views/infra/build/App.vue
View File

@ -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>

110
src/views/infra/build/CodeTypeDialog.vue
View File

@ -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>

120
src/views/infra/build/DraggableItem.vue
View File

@ -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>

331
src/views/infra/build/FormDrawer.vue
View File

@ -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>

123
src/views/infra/build/IconsDialog.vue
View File

@ -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>

144
src/views/infra/build/JsonDrawer.vue
View File

@ -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>

0
src/views/infra/build/README.md
View File

116
src/views/infra/build/ResourceDialog.vue
View File

@ -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>

1050
src/views/infra/build/RightPanel.vue
View File

File diff suppressed because it is too large Load Diff

158
src/views/infra/build/TreeNodeDialog.vue
View File

@ -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>

470
src/views/infra/build/index.vue
View File

@ -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>

19
src/views/infra/build/main.js
View File

@ -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')

67
src/views/infra/codegen/basicInfoForm.vue
View File

@ -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>

235
src/views/infra/codegen/editTable.vue
View File

@ -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>

339
src/views/infra/codegen/genInfoForm.vue
View File

@ -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>

114
src/views/infra/codegen/importTable.vue
View File

@ -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>

317
src/views/infra/codegen/index.vue
View File

@ -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 || '&nbsp;';
},
/** 复制代码成功 */
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>

262
src/views/infra/config/index.vue
View File

@ -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>

166
src/views/infra/dataSourceConfig/index.vue
View File

@ -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>

70
src/views/infra/dbDoc/index.vue
View File

@ -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