Skip to content

phsl / admin

Go to a project
Commit 636e07fc by dlarmor
Options

Merge remote-tracking branch 'origin/dev' into dev 

# Conflicts:
#	src/views/infra/codegen/components/BasicInfoForm.vue
#	src/views/infra/codegen/components/ImportTable.vue
parents f3393586 72ddb0c0
Showing with 2534 additions and 1463 deletions
.gitignore
......@@ -6,3 +6,4 @@ dist-ssr
/dist*
*-lock.*
pnpm-debug
.idea
build/vite/index.ts
......@@ -15,7 +15,7 @@ import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export function createVitePlugins(VITE_APP_TITLE: string) {
export function createVitePlugins() {
const root = process.cwd()
// 路径查找
function pathResolve(dir: string) {
......@@ -95,8 +95,6 @@ export function createVitePlugins(VITE_APP_TITLE: string) {
ext: '.gz', // 生成的压缩包后缀
deleteOriginFile: false //压缩后是否删除源文件
}),
ViteEjsPlugin({
title: VITE_APP_TITLE
})
ViteEjsPlugin()
]
}
index.html
......@@ -13,7 +13,7 @@
name="description"
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
/>
<title><%= title %></title>
<title>%VITE_APP_TITLE%</title>
</head>
<body>
<div id="app">
......@@ -137,7 +137,7 @@
<div class="app-loading-wrap">
<div class="app-loading-title">
<img src="/logo.gif" class="app-loading-logo" alt="Logo" />
<div class="app-loading-title"><%= title %></div>
<div class="app-loading-title">%VITE_APP_TITLE%</div>
</div>
<div class="app-loading-item">
<div class="app-loading-outter"></div>
......
package.json
{
"name": "yudao-ui-admin-vue3",
"version": "1.7.1-snapshot.1941",
"version": "1.7.1-snapshot.1961",
"description": "基于vue3、vite4、element-plus、typesScript",
"author": "xingyu",
"private": false,
......@@ -35,6 +35,7 @@
"@zxcvbn-ts/core": "^2.2.1",
"animate.css": "^4.1.1",
"axios": "^1.3.4",
"benz-amr-recorder": "^1.1.5",
"bpmn-js-token-simulation": "^0.10.0",
"camunda-bpmn-moddle": "^7.0.1",
"cropperjs": "^1.5.13",
......@@ -43,7 +44,7 @@
"diagram-js": "^11.6.0",
"echarts": "^5.4.1",
"echarts-wordcloud": "^2.1.0",
"element-plus": "2.2.34",
"element-plus": "2.3.1",
"fast-xml-parser": "^4.1.3",
"highlight.js": "^11.7.0",
"intro.js": "^6.0.0",
......@@ -62,57 +63,57 @@
"vue-router": "^4.1.6",
"vue-types": "^5.0.2",
"vuedraggable": "^4.1.0",
"vxe-table": "^4.3.10",
"vxe-table": "^4.3.11",
"web-storage-cache": "^1.1.1",
"xe-utils": "^3.5.7",
"xml-js": "^1.6.11"
},
"devDependencies": {
"@commitlint/cli": "^17.4.4",
"@commitlint/cli": "^17.5.0",
"@commitlint/config-conventional": "^17.4.4",
"@iconify/json": "^2.2.31",
"@intlify/unplugin-vue-i18n": "^0.8.2",
"@iconify/json": "^2.2.38",
"@intlify/unplugin-vue-i18n": "^0.10.0",
"@purge-icons/generated": "^0.9.0",
"@types/intro.js": "^5.1.1",
"@types/lodash-es": "^4.17.6",
"@types/node": "^18.14.6",
"@types/lodash-es": "^4.17.7",
"@types/node": "^18.15.5",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"@vitejs/plugin-legacy": "^4.0.1",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"autoprefixer": "^10.4.13",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"@vitejs/plugin-legacy": "^4.0.2",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"autoprefixer": "^10.4.14",
"bpmn-js": "^8.9.0",
"bpmn-js-properties-panel": "^0.46.0",
"consola": "^2.15.3",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.7.0",
"eslint-define-config": "^1.15.0",
"eslint": "^8.36.0",
"eslint-config-prettier": "^8.8.0",
"eslint-define-config": "^1.17.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"lint-staged": "^13.1.2",
"lint-staged": "^13.2.0",
"postcss": "^8.4.21",
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.4",
"rimraf": "^4.3.1",
"rollup": "^3.18.0",
"sass": "^1.58.3",
"stylelint": "^15.2.0",
"prettier": "^2.8.6",
"rimraf": "^4.4.1",
"rollup": "^3.20.0",
"sass": "^1.59.3",
"stylelint": "^15.3.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended": "^10.0.1",
"stylelint-config-standard": "^30.0.1",
"stylelint-order": "^6.0.2",
"terser": "^5.16.5",
"typescript": "4.9.5",
"stylelint-config-recommended": "^11.0.0",
"stylelint-config-standard": "^31.0.0",
"stylelint-order": "^6.0.3",
"terser": "^5.16.6",
"typescript": "5.0.2",
"unplugin-auto-import": "^0.15.1",
"unplugin-element-plus": "^0.7.0",
"unplugin-vue-components": "^0.24.1",
"vite": "4.1.4",
"vite": "4.2.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-ejs": "^1.6.4",
"vite-plugin-eslint": "^1.8.1",
......@@ -125,7 +126,7 @@
"windicss": "^3.5.6"
},
"engines": {
"node": ">=16.0.0"
"node": ">=16.18.0"
},
"license": "MIT",
"repository": {
......
src/api/bpm/definition/index.ts
import request from '@/config/axios'
export const getProcessDefinitionBpmnXMLApi = async (id: number) => {
export const getProcessDefinitionBpmnXML = async (id: number) => {
return await request.get({
url: '/bpm/process-definition/get-bpmn-xml?id=' + id
})
}
export const getProcessDefinitionPageApi = async (params) => {
export const getProcessDefinitionPage = async (params) => {
return await request.get({
url: '/bpm/process-definition/page',
params
})
}
export const getProcessDefinitionListApi = async (params) => {
export const getProcessDefinitionList = async (params) => {
return await request.get({
url: '/bpm/process-definition/list',
params
......
src/api/bpm/form/index.ts
......@@ -11,7 +11,7 @@ export type FormVO = {
}
// 创建工作流的表单定义
export const createFormApi = async (data: FormVO) => {
export const createForm = async (data: FormVO) => {
return await request.post({
url: '/bpm/form/create',
data: data
......@@ -19,7 +19,7 @@ export const createFormApi = async (data: FormVO) => {
}
// 更新工作流的表单定义
export const updateFormApi = async (data: FormVO) => {
export const updateForm = async (data: FormVO) => {
return await request.put({
url: '/bpm/form/update',
data: data
......@@ -27,21 +27,21 @@ export const updateFormApi = async (data: FormVO) => {
}
// 删除工作流的表单定义
export const deleteFormApi = async (id: number) => {
export const deleteForm = async (id: number) => {
return await request.delete({
url: '/bpm/form/delete?id=' + id
})
}
// 获得工作流的表单定义
export const getFormApi = async (id: number) => {
export const getForm = async (id: number) => {
return await request.get({
url: '/bpm/form/get?id=' + id
})
}
// 获得工作流的表单定义分页
export const getFormPageApi = async (params) => {
export const getFormPage = async (params) => {
return await request.get({
url: '/bpm/form/page',
params
......@@ -49,7 +49,7 @@ export const getFormPageApi = async (params) => {
}
// 获得动态表单的精简列表
export const getSimpleFormsApi = async () => {
export const getSimpleFormList = async () => {
return await request.get({
url: '/bpm/form/list-all-simple'
})
......
src/api/bpm/model/index.ts
......@@ -25,20 +25,20 @@ export type ModelVO = {
bpmnXml: string
}
export const getModelPageApi = async (params) => {
export const getModelPage = async (params) => {
return await request.get({ url: '/bpm/model/page', params })
}
export const getModelApi = async (id: number) => {
export const getModel = async (id: number) => {
return await request.get({ url: '/bpm/model/get?id=' + id })
}
export const updateModelApi = async (data: ModelVO) => {
export const updateModel = async (data: ModelVO) => {
return await request.put({ url: '/bpm/model/update', data: data })
}
// 任务状态修改
export const updateModelStateApi = async (id: number, state: number) => {
export const updateModelState = async (id: number, state: number) => {
const data = {
id: id,
state: state
......@@ -46,14 +46,14 @@ export const updateModelStateApi = async (id: number, state: number) => {
return await request.put({ url: '/bpm/model/update-state', data: data })
}
export const createModelApi = async (data: ModelVO) => {
export const createModel = async (data: ModelVO) => {
return await request.post({ url: '/bpm/model/create', data: data })
}
export const deleteModelApi = async (id: number) => {
export const deleteModel = async (id: number) => {
return await request.delete({ url: '/bpm/model/delete?id=' + id })
}
export const deployModelApi = async (id: number) => {
export const deployModel = async (id: number) => {
return await request.post({ url: '/bpm/model/deploy?id=' + id })
}
src/api/bpm/userGroup/index.ts
......@@ -11,7 +11,7 @@ export type UserGroupVO = {
}
// 创建用户组
export const createUserGroupApi = async (data: UserGroupVO) => {
export const createUserGroup = async (data: UserGroupVO) => {
return await request.post({
url: '/bpm/user-group/create',
data: data
......@@ -19,7 +19,7 @@ export const createUserGroupApi = async (data: UserGroupVO) => {
}
// 更新用户组
export const updateUserGroupApi = async (data: UserGroupVO) => {
export const updateUserGroup = async (data: UserGroupVO) => {
return await request.put({
url: '/bpm/user-group/update',
data: data
......@@ -27,21 +27,21 @@ export const updateUserGroupApi = async (data: UserGroupVO) => {
}
// 删除用户组
export const deleteUserGroupApi = async (id: number) => {
export const deleteUserGroup = async (id: number) => {
return await request.delete({ url: '/bpm/user-group/delete?id=' + id })
}
// 获得用户组
export const getUserGroupApi = async (id: number) => {
export const getUserGroup = async (id: number) => {
return await request.get({ url: '/bpm/user-group/get?id=' + id })
}
// 获得用户组分页
export const getUserGroupPageApi = async (params) => {
export const getUserGroupPage = async (params) => {
return await request.get({ url: '/bpm/user-group/page', params })
}
// 获取用户组精简信息列表
export const listSimpleUserGroupsApi = async () => {
export const getSimpleUserGroupList = async (): Promise<UserGroupVO[]> => {
return await request.get({ url: '/bpm/user-group/list-all-simple' })
}
src/api/infra/apiAccessLog/index.ts
......@@ -19,32 +19,12 @@ export interface ApiAccessLogVO {
createTime: Date
}
export interface ApiAccessLogPageReqVO extends PageParam {
userId?: number
userType?: number
applicationName?: string
requestUrl?: string
beginTime?: Date[]
duration?: number
resultCode?: number
}
export interface ApiAccessLogExportReqVO {
userId?: number
userType?: number
applicationName?: string
requestUrl?: string
beginTime?: Date[]
duration?: number
resultCode?: number
}
// 查询列表API 访问日志
export const getApiAccessLogPageApi = (params: ApiAccessLogPageReqVO) => {
export const getApiAccessLogPage = (params: PageParam) => {
return request.get({ url: '/infra/api-access-log/page', params })
}
// 导出API 访问日志
export const exportApiAccessLogApi = (params: ApiAccessLogExportReqVO) => {
export const exportApiAccessLog = (params) => {
return request.download({ url: '/infra/api-access-log/export-excel', params })
}
src/api/infra/apiErrorLog/index.ts
......@@ -27,38 +27,20 @@ export interface ApiErrorLogVO {
createTime: Date
}
export interface ApiErrorLogPageReqVO extends PageParam {
userId?: number
userType?: number
applicationName?: string
requestUrl?: string
exceptionTime?: Date[]
processStatus: number
}
export interface ApiErrorLogExportReqVO {
userId?: number
userType?: number
applicationName?: string
requestUrl?: string
exceptionTime?: Date[]
processStatus: number
}
// 查询列表API 访问日志
export const getApiErrorLogPageApi = (params: ApiErrorLogPageReqVO) => {
export const getApiErrorLogPage = (params: PageParam) => {
return request.get({ url: '/infra/api-error-log/page', params })
}
// 更新 API 错误日志的处理状态
export const updateApiErrorLogPageApi = (id: number, processStatus: number) => {
export const updateApiErrorLogPage = (id: number, processStatus: number) => {
return request.put({
url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus
})
}
// 导出API 访问日志
export const exportApiErrorLogApi = (params: ApiErrorLogExportReqVO) => {
export const exportApiErrorLog = (params) => {
return request.download({
url: '/infra/api-error-log/export-excel',
params
......
src/api/mp/account/index.ts
import request from '@/config/axios'
export interface AccountVO {
id?: number
name: string
}
// 创建公众号账号
export const createAccount = async (data) => {
return await request.post({ url: '/mp/account/create', data })
......@@ -26,7 +31,7 @@ export const getAccountPage = async (query) => {
}
// 获取公众号账号精简信息列表
export const getSimpleAccounts = async () => {
export const getSimpleAccountList = async () => {
return request.get({ url: '/mp/account/list-all-simple' })
}
......
src/api/mp/message/index.ts
import request from '@/config/axios'
// 获得公众号消息分页
export const getMessagePage = (query) => {
export const getMessagePage = (query: PageParam) => {
return request.get({
url: '/mp/message/page',
params: query
......
src/api/mp/tag/index.ts
import request from '@/config/axios'
export interface TagVO {
id?: number
name: string
accountId: number
createTime: Date
}
// 创建公众号标签
export const createTag = (data) => {
export const createTag = (data: TagVO) => {
return request.post({
url: '/mp/tag/create',
data: data
......@@ -9,7 +16,7 @@ export const createTag = (data) => {
}
// 更新公众号标签
export const updateTag = (data) => {
export const updateTag = (data: TagVO) => {
return request.put({
url: '/mp/tag/update',
data: data
......@@ -17,21 +24,21 @@ export const updateTag = (data) => {
}
// 删除公众号标签
export const deleteTag = (id) => {
export const deleteTag = (id: number) => {
return request.delete({
url: '/mp/tag/delete?id=' + id
})
}
// 获得公众号标签
export const getTag = (id) => {
export const getTag = (id: number) => {
return request.get({
url: '/mp/tag/get?id=' + id
})
}
// 获得公众号标签分页
export const getTagPage = (query) => {
export const getTagPage = (query: PageParam) => {
return request.get({
url: '/mp/tag/page',
params: query
......@@ -39,14 +46,14 @@ export const getTagPage = (query) => {
}
// 获取公众号标签精简信息列表
export const getSimpleTags = () => {
export const getSimpleTagList = () => {
return request.get({
url: '/mp/tag/list-all-simple'
})
}
// 同步公众号标签
export const syncTag = (accountId) => {
export const syncTag = (accountId: number) => {
return request.post({
url: '/mp/tag/sync?accountId=' + accountId
})
......
src/api/system/dept/index.ts
......@@ -18,7 +18,7 @@ export interface DeptPageReqVO {
}
// 查询部门（精简)列表
export const listSimpleDeptApi = async () => {
export const getSimpleDeptList = async (): Promise<DeptVO[]> => {
return await request.get({ url: '/system/dept/list-all-simple' })
}
......
src/api/system/loginLog/index.ts
......@@ -13,18 +13,12 @@ export interface LoginLogVO {
createTime: Date
}
export interface LoginLogReqVO extends PageParam {
userIp?: string
username?: string
status?: boolean
createTime?: Date[]
}
// 查询登录日志列表
export const getLoginLogPageApi = (params: LoginLogReqVO) => {
export const getLoginLogPage = (params: PageParam) => {
return request.get({ url: '/system/login-log/page', params })
}
// 导出登录日志
export const exportLoginLogApi = (params: LoginLogReqVO) => {
export const exportLoginLog = (params) => {
return request.download({ url: '/system/login-log/export', params })
}
src/api/system/menu/index.ts
......@@ -18,18 +18,13 @@ export interface MenuVO {
createTime: Date
}
export interface MenuPageReqVO {
name?: string
status?: number
}
// 查询菜单（精简）列表
export const listSimpleMenusApi = () => {
export const getSimpleMenusList = () => {
return request.get({ url: '/system/menu/list-all-simple' })
}
// 查询菜单列表
export const getMenuListApi = (params: MenuPageReqVO) => {
export const getMenuList = (params) => {
return request.get({ url: '/system/menu/list', params })
}
......@@ -39,16 +34,16 @@ export const getMenuApi = (id: number) => {
}
// 新增菜单
export const createMenuApi = (data: MenuVO) => {
export const createMenu = (data: MenuVO) => {
return request.post({ url: '/system/menu/create', data })
}
// 修改菜单
export const updateMenuApi = (data: MenuVO) => {
export const updateMenu = (data: MenuVO) => {
return request.put({ url: '/system/menu/update', data })
}
// 删除菜单
export const deleteMenuApi = (id: number) => {
export const deleteMenu = (id: number) => {
return request.delete({ url: '/system/menu/delete?id=' + id })
}
src/api/system/post/index.ts
......@@ -10,49 +10,37 @@ export interface PostVO {
createTime?: Date
}
export interface PostPageReqVO extends PageParam {
code?: string
name?: string
status?: number
}
export interface PostExportReqVO {
code?: string
name?: string
status?: number
}
// 查询岗位列表
export const getPostPageApi = async (params: PostPageReqVO) => {
export const getPostPage = async (params: PageParam) => {
return await request.get({ url: '/system/post/page', params })
}
// 获取岗位精简信息列表
export const listSimplePostsApi = async () => {
export const getSimplePostList = async (): Promise<PostVO[]> => {
return await request.get({ url: '/system/post/list-all-simple' })
}
// 查询岗位详情
export const getPostApi = async (id: number) => {
export const getPost = async (id: number) => {
return await request.get({ url: '/system/post/get?id=' + id })
}
// 新增岗位
export const createPostApi = async (data: PostVO) => {
export const createPost = async (data: PostVO) => {
return await request.post({ url: '/system/post/create', data })
}
// 修改岗位
export const updatePostApi = async (data: PostVO) => {
export const updatePost = async (data: PostVO) => {
return await request.put({ url: '/system/post/update', data })
}
// 删除岗位
export const deletePostApi = async (id: number) => {
export const deletePost = async (id: number) => {
return await request.delete({ url: '/system/post/delete?id=' + id })
}
// 导出岗位
export const exportPostApi = async (params: PostExportReqVO) => {
export const exportPost = async (params) => {
return await request.download({ url: '/system/post/export', params })
}
src/api/system/role/index.ts
......@@ -28,7 +28,7 @@ export const getRolePageApi = async (params: RolePageReqVO) => {
}
// 查询角色（精简)列表
export const listSimpleRolesApi = async () => {
export const getSimpleRoleList = async (): Promise<RoleVO[]> => {
return await request.get({ url: '/system/role/list-all-simple' })
}
......
src/api/system/sensitiveWord/index.ts
import request from '@/config/axios'
import qs from 'qs'
export interface SensitiveWordVO {
id: number
......@@ -9,56 +10,49 @@ export interface SensitiveWordVO {
createTime: Date
}
export interface SensitiveWordPageReqVO extends PageParam {
name?: string
tag?: string
status?: number
createTime?: Date[]
}
export interface SensitiveWordExportReqVO {
name?: string
tag?: string
status?: number
createTime?: Date[]
export interface SensitiveWordTestReqVO {
text: string
tag: string[]
}
// 查询敏感词列表
export const getSensitiveWordPageApi = (params: SensitiveWordPageReqVO) => {
export const getSensitiveWordPage = (params: PageParam) => {
return request.get({ url: '/system/sensitive-word/page', params })
}
// 查询敏感词详情
export const getSensitiveWordApi = (id: number) => {
export const getSensitiveWord = (id: number) => {
return request.get({ url: '/system/sensitive-word/get?id=' + id })
}
// 新增敏感词
export const createSensitiveWordApi = (data: SensitiveWordVO) => {
export const createSensitiveWord = (data: SensitiveWordVO) => {
return request.post({ url: '/system/sensitive-word/create', data })
}
// 修改敏感词
export const updateSensitiveWordApi = (data: SensitiveWordVO) => {
export const updateSensitiveWord = (data: SensitiveWordVO) => {
return request.put({ url: '/system/sensitive-word/update', data })
}
// 删除敏感词
export const deleteSensitiveWordApi = (id: number) => {
export const deleteSensitiveWord = (id: number) => {
return request.delete({ url: '/system/sensitive-word/delete?id=' + id })
}
// 导出敏感词
export const exportSensitiveWordApi = (params: SensitiveWordExportReqVO) => {
export const exportSensitiveWord = (params) => {
return request.download({ url: '/system/sensitive-word/export-excel', params })
}
// 获取所有敏感词的标签数组
export const getSensitiveWordTagsApi = () => {
export const getSensitiveWordTagList = () => {
return request.get({ url: '/system/sensitive-word/get-tags' })
}
// 获得文本所包含的不合法的敏感词数组
export const validateTextApi = (id: number) => {
return request.get({ url: '/system/sensitive-word/validate-text?' + id })
export const validateText = (query: SensitiveWordTestReqVO) => {
return request.get({
url: '/system/sensitive-word/validate-text?' + qs.stringify(query, { arrayFormat: 'repeat' })
})
}
src/api/system/sms/smsChannel/index.ts
......@@ -12,39 +12,32 @@ export interface SmsChannelVO {
createTime: Date
}
export interface SmsChannelPageReqVO extends PageParam {
signature?: string
code?: string
status?: number
createTime?: Date[]
}
// 查询短信渠道列表
export const getSmsChannelPageApi = (params: SmsChannelPageReqVO) => {
export const getSmsChannelPage = (params: PageParam) => {
return request.get({ url: '/system/sms-channel/page', params })
}
// 获得短信渠道精简列表
export function getSimpleSmsChannels() {
export function getSimpleSmsChannelList() {
return request.get({ url: '/system/sms-channel/list-all-simple' })
}
// 查询短信渠道详情
export const getSmsChannelApi = (id: number) => {
export const getSmsChannel = (id: number) => {
return request.get({ url: '/system/sms-channel/get?id=' + id })
}
// 新增短信渠道
export const createSmsChannelApi = (data: SmsChannelVO) => {
export const createSmsChannel = (data: SmsChannelVO) => {
return request.post({ url: '/system/sms-channel/create', data })
}
// 修改短信渠道
export const updateSmsChannelApi = (data: SmsChannelVO) => {
export const updateSmsChannel = (data: SmsChannelVO) => {
return request.put({ url: '/system/sms-channel/update', data })
}
// 删除短信渠道
export const deleteSmsChannelApi = (id: number) => {
export const deleteSmsChannel = (id: number) => {
return request.delete({ url: '/system/sms-channel/delete?id=' + id })
}
src/api/system/sms/smsLog/index.ts
import request from '@/config/axios'
export interface SmsLogVO {
id: number
channelId: number
id: number | null
channelId: number | null
channelCode: string
templateId: number
templateId: number | null
templateCode: string
templateType: number
templateType: number | null
templateContent: string
templateParams: Map<string, object>
templateParams: Map<string, object> | null
apiTemplateId: string
mobile: string
userId: number
userType: number
sendStatus: number
sendTime: Date
sendCode: number
userId: number | null
userType: number | null
sendStatus: number | null
sendTime: Date | null
sendCode: number | null
sendMsg: string
apiSendCode: string
apiSendMsg: string
apiRequestId: string
apiSerialNo: string
receiveStatus: number
receiveTime: Date
receiveStatus: number | null
receiveTime: Date | null
apiReceiveCode: string
apiReceiveMsg: string
createTime: Date
}
export interface SmsLogPageReqVO extends PageParam {
channelId?: number
templateId?: number
mobile?: string
sendStatus?: number
sendTime?: Date[]
receiveStatus?: number
receiveTime?: Date[]
}
export interface SmsLogExportReqVO {
channelId?: number
templateId?: number
mobile?: string
sendStatus?: number
sendTime?: Date[]
receiveStatus?: number
receiveTime?: Date[]
createTime: Date | null
}
// 查询短信日志列表
export const getSmsLogPageApi = (params: SmsLogPageReqVO) => {
export const getSmsLogPage = (params: PageParam) => {
return request.get({ url: '/system/sms-log/page', params })
}
// 导出短信日志
export const exportSmsLogApi = (params: SmsLogExportReqVO) => {
export const exportSmsLog = (params) => {
return request.download({ url: '/system/sms-log/export-excel', params })
}
src/api/system/sms/smsTemplate/index.ts
import request from '@/config/axios'
export interface SmsTemplateVO {
id: number
type: number
id: number | null
type: number | null
status: number
code: string
name: string
content: string
remark: string
apiTemplateId: string
channelId: number
channelCode: string
params: string[]
createTime: Date
channelId: number | null
channelCode?: string
params?: string[]
createTime?: Date
}
export interface SendSmsReqVO {
......@@ -21,60 +21,40 @@ export interface SendSmsReqVO {
templateParams: Map<String, Object>
}
export interface SmsTemplatePageReqVO {
type?: number
status?: number
code?: string
content?: string
apiTemplateId?: string
channelId?: number
createTime?: Date[]
}
export interface SmsTemplateExportReqVO {
type?: number
status?: number
code?: string
content?: string
apiTemplateId?: string
channelId?: number
createTime?: Date[]
}
// 查询短信模板列表
export const getSmsTemplatePageApi = (params: SmsTemplatePageReqVO) => {
export const getSmsTemplatePage = (params: PageParam) => {
return request.get({ url: '/system/sms-template/page', params })
}
// 查询短信模板详情
export const getSmsTemplateApi = (id: number) => {
export const getSmsTemplate = (id: number) => {
return request.get({ url: '/system/sms-template/get?id=' + id })
}
// 新增短信模板
export const createSmsTemplateApi = (data: SmsTemplateVO) => {
export const createSmsTemplate = (data: SmsTemplateVO) => {
return request.post({ url: '/system/sms-template/create', data })
}
// 修改短信模板
export const updateSmsTemplateApi = (data: SmsTemplateVO) => {
export const updateSmsTemplate = (data: SmsTemplateVO) => {
return request.put({ url: '/system/sms-template/update', data })
}
// 删除短信模板
export const deleteSmsTemplateApi = (id: number) => {
export const deleteSmsTemplate = (id: number) => {
return request.delete({ url: '/system/sms-template/delete?id=' + id })
}
// 发送短信
export const sendSmsApi = (data: SendSmsReqVO) => {
return request.post({ url: '/system/sms-template/send-sms', data })
}
// 导出短信模板
export const exportPostApi = (params: SmsTemplateExportReqVO) => {
export const exportSmsTemplate = (params) => {
return request.download({
url: '/system/sms-template/export-excel',
params
})
}
// 发送短信
export const sendSms = (data: SendSmsReqVO) => {
return request.post({ url: '/system/sms-template/send-sms', data })
}
src/api/system/tenant/index.ts
......@@ -32,31 +32,31 @@ export interface TenantExportReqVO {
}
// 查询租户列表
export const getTenantPageApi = (params: TenantPageReqVO) => {
export const getTenantPage = (params: TenantPageReqVO) => {
return request.get({ url: '/system/tenant/page', params })
}
// 查询租户详情
export const getTenantApi = (id: number) => {
export const getTenant = (id: number) => {
return request.get({ url: '/system/tenant/get?id=' + id })
}
// 新增租户
export const createTenantApi = (data: TenantVO) => {
export const createTenant = (data: TenantVO) => {
return request.post({ url: '/system/tenant/create', data })
}
// 修改租户
export const updateTenantApi = (data: TenantVO) => {
export const updateTenant = (data: TenantVO) => {
return request.put({ url: '/system/tenant/update', data })
}
// 删除租户
export const deleteTenantApi = (id: number) => {
export const deleteTenant = (id: number) => {
return request.delete({ url: '/system/tenant/delete?id=' + id })
}
// 导出租户
export const exportTenantApi = (params: TenantExportReqVO) => {
export const exportTenant = (params: TenantExportReqVO) => {
return request.download({ url: '/system/tenant/export-excel', params })
}
src/api/system/user/index.ts
......@@ -86,6 +86,6 @@ export const updateUserStatusApi = (id: number, status: number) => {
}
// 获取用户精简信息列表
export const getListSimpleUsersApi = () => {
export const getSimpleUserList = (): Promise<UserVO[]> => {
return request.get({ url: '/system/user/list-all-simple' })
}
src/components/Descriptions/src/Descriptions.vue
......@@ -76,7 +76,7 @@ const toggleClick = () => {
v-if="title"
:class="[
`${prefixCls}-header`,
'h-50px flex justify-between items-center mb-10px border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
'h-50px flex justify-between items-center border-bottom-1 border-solid border-[var(--tags-view-border-color)] px-10px cursor-pointer dark:border-[var(--el-border-color)]'
]"
@click="toggleClick"
>
......
src/components/DictTag/src/DictTag.vue
......@@ -34,7 +34,7 @@ export default defineComponent({
return null
}
// 解决自定义字典标签值为零时标签不渲染的问题
if (props.value === undefined) {
if (props.value === undefined || props.value === null) {
return null
}
getDictObj(props.type, props.value.toString())
......
src/components/Editor/src/Editor.vue
......@@ -178,7 +178,7 @@ defineExpose({
</script>
<template>
<div class="border-1 border-solid border-[var(--tags-view-border-color)] z-3000">
<div class="border-1 border-solid border-[var(--tags-view-border-color)] z-99">
<!-- 工具栏 -->
<Toolbar
:editor="editorRef"
......
src/components/XTable/src/XTable.vue
......@@ -128,7 +128,7 @@ const getColumnsConfig = (options: XTableProps) => {
proxyForm = true
options.formConfig = {
enabled: true,
titleWidth: 180,
titleWidth: 110,
titleAlign: 'right',
items: allSchemas.searchSchema
}
......
src/layout/components/Breadcrumb/src/Breadcrumb.vue
......@@ -37,7 +37,7 @@ export default defineComponent({
})
const getBreadcrumb = () => {
const currentPath = currentRoute.value.path
const currentPath = currentRoute.value.matched.slice(-1)[0].path
levelList.value = filter<AppRouteRecordRaw>(unref(menuRouters), (node: AppRouteRecordRaw) => {
return node.path === currentPath
......@@ -47,7 +47,7 @@ export default defineComponent({
const renderBreadcrumb = () => {
const breadcrumbList = treeToList<AppRouteRecordRaw[]>(unref(levelList))
return breadcrumbList.map((v) => {
const disabled = v.redirect === 'noredirect'
const disabled = !v.redirect || v.redirect === 'noredirect'
const meta = v.meta as RouteMeta
return (
<ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
......
src/layout/components/Message/src/Message.vue
<script setup lang="ts">
import dayjs from 'dayjs'
import { parseTime } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message'
const { push } = useRouter()
......@@ -57,7 +57,7 @@ onMounted(() => {
{{ item.templateNickname }}：{{ item.templateContent }}
</span>
<span class="message-date">
{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
{{ parseTime(item.createTime) }}
</span>
</div>
</div>
......
src/layout/components/UserInfo/src/UserInfo.vue
......@@ -66,9 +66,9 @@ const toDocument = () => {
<Icon icon="ep:menu" />
<div @click="toDocument">{{ t('common.document') }}</div>
</ElDropdownItem>
<ElDropdownItem divided>
<ElDropdownItem divided @click="loginOut">
<Icon icon="ep:switch-button" />
<div @click="loginOut">{{ t('common.loginOut') }}</div>
<div>{{ t('common.loginOut') }}</div>
</ElDropdownItem>
</ElDropdownMenu>
</template>
......
src/router/modules/remaining.ts
......@@ -225,26 +225,26 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [
{
path: '/manager/form/edit',
component: () => import('@/views/bpm/form/formEditor.vue'),
component: () => import('@/views/bpm/form/editor/index.vue'),
name: 'bpmFormEditor',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '设计流程表单',
activeMenu: 'bpm/manager/form/formEditor'
activeMenu: '/bpm/manager/form'
}
},
{
path: '/manager/model/edit',
component: () => import('@/views/bpm/model/modelEditor.vue'),
component: () => import('@/views/bpm/model/editor/index.vue'),
name: 'modelEditor',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '设计流程',
activeMenu: 'bpm/manager/model/design'
activeMenu: '/bpm/manager/model'
}
},
{
......@@ -256,7 +256,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
hidden: true,
canTo: true,
title: '流程定义',
activeMenu: 'bpm/definition/index'
activeMenu: '/bpm/manager/model'
}
},
{
......
src/types/auto-components.d.ts
......@@ -23,8 +23,6 @@ declare module '@vue/runtime-core' {
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
......@@ -69,16 +67,12 @@ declare module '@vue/runtime-core' {
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTableV2: typeof import('element-plus/es')['ElTableV2']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree']
......@@ -106,6 +100,7 @@ declare module '@vue/runtime-core' {
ScriptTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue')['default']
Search: typeof import('./../components/Search/src/Search.vue')['default']
SignalAndMessage: typeof import('./../components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue')['default']
Src: typeof import('./../components/RightToolbar/src/index.vue')['default']
Sticky: typeof import('./../components/Sticky/src/Sticky.vue')['default']
Table: typeof import('./../components/Table/src/Table.vue')['default']
Tooltip: typeof import('./../components/Tooltip/src/Tooltip.vue')['default']
......
src/utils/dict.ts
......@@ -70,6 +70,23 @@ export const getDictObj = (dictType: string, value: any) => {
})
}
/**
* 获得字典数据的文本展示
*
* @param dictType 字典类型
* @param value 字典数据的值
*/
export const getDictLabel = (dictType: string, value: any) => {
const dictOptions: DictDataType[] = getDictOptions(dictType)
const dictLabel = ref('')
dictOptions.forEach((dict: DictDataType) => {
if (dict.value === value) {
dictLabel.value = dict.label
}
})
return dictLabel.value
}
export enum DICT_TYPE {
USER_TYPE = 'user_type',
COMMON_STATUS = 'common_status',
......@@ -123,5 +140,9 @@ export enum DICT_TYPE {
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
PAY_ORDER_REFUND_STATUS = 'pay_order_refund_status', // 商户支付订单退款状态
PAY_REFUND_ORDER_STATUS = 'pay_refund_order_status', // 退款订单状态
PAY_REFUND_ORDER_TYPE = 'pay_refund_order_type' // 退款订单类别
PAY_REFUND_ORDER_TYPE = 'pay_refund_order_type', // 退款订单类别
// ========== MP 模块 ==========
MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
MP_MESSAGE_TYPE = 'mp_message_type' // 消息类型
}
src/utils/formatTime.ts
......@@ -11,10 +11,65 @@ import dayjs from 'dayjs'
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
export function formatDate(date: Date, format: string): string {
export function formatDate(date: Date, format?: string): string {
// 日期不存在，则返回空
if (!date) {
return ''
}
// 日期存在，则进行格式化
if (format === undefined) {
format = 'YYYY-MM-DD HH:mm:ss'
}
return dayjs(date).format(format)
}
// TODO 芋艿：稍后去掉
// 日期格式化
export function parseTime(time: any, pattern?: string) {
if (arguments.length === 0 || !time) {
return null
}
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time
.replace(new RegExp(/-/gm), '/')
.replace('T', ' ')
.replace(new RegExp(/\.\d{3}/gm), '')
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
/**
* 获取当前日期是第几周
* @param dateTime 当前传入的日期值
......@@ -139,5 +194,5 @@ export const dateFormatter = (row, column, cellValue) => {
if (!cellValue) {
return
}
return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
return formatDate(cellValue)
}
src/views/Profile/components/ProfileUser.vue
......@@ -34,13 +34,13 @@
</li>
<li class="list-group-item">
<Icon icon="ep:calendar" class="mr-5px" />{{ t('profile.user.createTime') }}
<div class="pull-right">{{ dayjs(userInfo?.createTime).format('YYYY-MM-DD') }}</div>
<div class="pull-right">{{ parseTime(userInfo?.createTime) }}</div>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { parseTime } from '@/utils/formatTime'
import UserAvatar from './UserAvatar.vue'
import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
......
src/views/bpm/definition/definition.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
columns: [
{
title: '定义编号',
field: 'id',
table: {
width: 360
}
},
{
title: '定义名称',
field: 'name',
table: {
// width: 120,
slots: {
default: 'name_default'
}
}
},
{
title: '定义分类',
field: 'category',
// dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
// dictClass: 'number',
table: {
// width: 120,
slots: {
default: 'category_default'
}
}
},
{
title: '表单信息',
field: 'formId',
table: {
// width: 200,
slots: {
default: 'formId_default'
}
}
},
{
title: '流程版本',
field: 'version',
table: {
// width: 80,
slots: {
default: 'version_default'
}
}
},
{
title: '激活状态',
field: 'suspensionState',
table: {
// width: 80,
slots: {
default: 'suspensionState_default'
}
}
},
{
title: '部署时间',
field: 'deploymentTime',
isForm: false,
formatter: 'formatDate'
// table: {
// width: 180
// }
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/definition/index.vue
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 流程名称 -->
<template #name_default="{ row }">
<XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
</template>
<!-- 流程分类 -->
<template #category_default="{ row }">
<DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
</template>
<!-- 表单信息 -->
<template #formId_default="{ row }">
<XTextButton
v-if="row.formType === 10"
:title="row.formName"
@click="handleFormDetail(row)"
/>
<XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
</template>
<!-- 流程版本 -->
<template #version_default="{ row }">
<el-tag>v{{ row.version }}</el-tag>
</template>
<!-- 激活状态 -->
<template #suspensionState_default="{ row }">
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
</template>
<!-- 操作 -->
<template #actionbtns_default="{ row }">
<XTextButton
preIcon="ep:user"
title="分配规则"
v-hasPermi="['bpm:task-assign-rule:query']"
@click="handleAssignRule(row)"
/>
</template>
</XTable>
<!-- 表单详情的弹窗 -->
<XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
<form-create
:rule="formDetailPreview.rule"
:option="formDetailPreview.option"
v-if="formDetailVisible"
<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="200">
<template #default="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 #default="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 #default="scope">
<el-button
v-if="scope.row.formType === 10"
type="text"
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formName }}</span>
</el-button>
<el-button v-else type="text" @click="handleFormDetail(scope.row)">
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
<template #default="scope">
<el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
<el-tag type="warning" v-else>未部署</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="version" width="80">
<template #default="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"
:formatter="dateFormatter"
/>
</XModal>
<!-- 流程模型图的预览 -->
<XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
<my-process-viewer
key="designer"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
<el-table-column
label="定义描述"
align="center"
prop="description"
width="300"
show-overflow-tooltip
/>
</XModal>
<el-table-column label="操作" align="center" width="150" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="handleAssignRule(scope.row)"
v-hasPermi="['bpm:task-assign-rule:query']"
>
分配规则
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 弹窗：表单详情 -->
<Dialog title="表单详情" v-model="formDetailVisible" width="800">
<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
</Dialog>
<!-- 弹窗：流程模型图的预览 -->
<Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
<my-process-viewer
key="designer"
v-model="bpmnXML"
:value="bpmnXML"
v-bind="bpmnControlForm"
:prefix="bpmnControlForm.prefix"
/>
</Dialog>
</template>
<script setup lang="ts">
// 业务相关的 import
<script setup lang="ts" name="Form">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as DefinitionApi from '@/api/bpm/definition'
// import * as ModelApi from '@/api/bpm/model'
import { allSchemas } from './definition.data'
import { setConfAndFields2 } from '@/utils/formCreate'
import { DICT_TYPE } from '@/utils/dict'
const bpmnXML = ref(null)
const showBpmnOpen = ref(false)
const bpmnControlForm = ref({
prefix: 'flowable'
})
// const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const { push } = useRouter() // 路由
const { query } = useRoute() // 查询参数
// ========== 列表相关 ==========
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
key: query.key
})
const [registerTable] = useXTable({
allSchemas: allSchemas,
getListApi: DefinitionApi.getProcessDefinitionPageApi,
params: queryParams
})
// 流程表单的详情按钮操作
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await DefinitionApi.getProcessDefinitionPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 点击任务分配按钮 */
const handleAssignRule = (row) => {
push({
name: 'BpmTaskAssignRuleList',
query: {
modelId: row.id
}
})
}
/** 流程表单的详情按钮操作 */
const formDetailVisible = ref(false)
const formDetailPreview = ref({
rule: [],
......@@ -99,32 +145,25 @@ const handleFormDetail = async (row) => {
// 弹窗打开
formDetailVisible.value = true
} else {
await router.push({
await push({
path: row.formCustomCreatePath
})
}
}
// 流程图的详情按钮操作
const handleBpmnDetail = (row) => {
// TODO 芋艿：流程组件开发中
console.log(row)
DefinitionApi.getProcessDefinitionBpmnXMLApi(row).then((response) => {
console.log(response, 'response')
bpmnXML.value = response
// 弹窗打开
showBpmnOpen.value = true
})
// message.success('流程组件开发中，预计 2 月底完成')
/** 流程图的详情按钮操作 */
const bpmnDetailVisible = ref(false)
const bpmnXML = ref(null)
const bpmnControlForm = ref({
prefix: 'flowable'
})
const handleBpmnDetail = async (row) => {
bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
bpmnDetailVisible.value = true
}
// 点击任务分配按钮
const handleAssignRule = (row) => {
router.push({
name: 'BpmTaskAssignRuleList',
query: {
processDefinitionId: row.id
}
})
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/bpm/form/editor/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 表单设计器 -->
<fc-designer ref="designer" height="780px">
<template #handle>
<el-button round size="small" type="primary" @click="handleSave">
<Icon icon="ep:plus" class="mr-5px" /> 保存
</el-button>
</template>
</fc-designer>
</ContentWrap>
<!-- 表单保存的弹窗 -->
<Dialog title="保存表单" v-model="modelVisible" width="600">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form-item label="表单名" prop="name">
<el-input v-model="formData.name" placeholder="请输入表单名" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as FormApi from '@/api/bpm/form'
import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息
const { query } = useRoute() // 路由
const designer = ref() // 表单设计器
const modelVisible = ref(false) // 弹窗是否展示
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
const formData = ref({
name: '',
status: CommonStatusEnum.ENABLE,
remark: ''
})
const formRules = reactive({
name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 处理保存按钮 */
const handleSave = () => {
modelVisible.value = true
}
/** 提交表单 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as FormApi.FormVO
data.conf = encodeConf(designer) // 表单配置
data.fields = encodeFields(designer) // 表单字段
if (!data.id) {
await FormApi.createForm(data)
message.success(t('common.createSuccess'))
} else {
await FormApi.updateForm(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
} finally {
formLoading.value = false
}
}
/** 初始化 **/
onMounted(async () => {
// 场景一：新增表单
const id = query.id as unknown as number
if (!id) {
return
}
// 场景二：修改表单
const data = await FormApi.getForm(id)
formData.value = data
setConfAndFields(designer, data.conf, data.fields)
})
</script>
src/views/bpm/form/form.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '表单编号',
action: true,
columns: [
{
title: '表单名',
field: 'name',
isSearch: true
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number'
},
{
title: '备注',
field: 'remark'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/form/formEditor.vue deleted 100644 → 0
<template>
<ContentWrap>
<!-- 表单设计器 -->
<fc-designer ref="designer" height="780px">
<template #handle>
<XButton type="primary" title="生成JSON" @click="showJson" />
<XButton type="primary" title="生成Options" @click="showOption" />
<XButton type="primary" :title="t('action.save')" @click="handleSave" />
</template>
</fc-designer>
<Dialog :title="dialogTitle" v-model="dialogVisible1" maxHeight="600">
<div ref="editor" v-if="dialogVisible1">
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
<el-scrollbar height="580">
<pre>
{{ formValue }}
</pre>
</el-scrollbar>
</div>
</Dialog>
<!-- 表单保存的弹窗 -->
<XModal v-model="dialogVisible" title="保存表单">
<el-form ref="formRef" :model="formValues" :rules="formRules" label-width="80px">
<el-form-item label="表单名" prop="name">
<el-input v-model="formValues.name" placeholder="请输入表单名" />
</el-form-item>
<el-form-item label="开启状态" prop="status">
<el-radio-group v-model="formValues.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formValues.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<template #footer>
<!-- 按钮：保存 -->
<XButton
type="primary"
:title="t('action.save')"
:loading="dialogLoading"
@click="submitForm"
/>
<!-- 按钮：关闭 -->
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</ContentWrap>
</template>
<script setup lang="ts" name="BpmFormEditor">
import { FormInstance } from 'element-plus'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as FormApi from '@/api/bpm/form'
import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
import { useClipboard } from '@vueuse/core'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息
const { query } = useRoute() // 路由
const designer = ref() // 表单设计器
const type = ref(-1)
const formValue = ref('')
const dialogTitle = ref('')
const dialogVisible = ref(false) // 弹窗是否展示
const dialogVisible1 = ref(false) // 弹窗是否展示
const dialogLoading = ref(false) // 弹窗的加载中
const formRef = ref<FormInstance>()
const formRules = reactive({
name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
})
const formValues = ref({
name: '',
status: CommonStatusEnum.ENABLE,
remark: ''
})
// 处理保存按钮
const handleSave = () => {
dialogVisible.value = true
}
// 提交保存表单
const submitForm = async () => {
// 参数校验
const elForm = unref(formRef)
if (!elForm) return
const valid = await elForm.validate()
if (!valid) return
// 提交请求
dialogLoading.value = true
try {
const data = formValues.value as FormApi.FormVO
data.conf = encodeConf(designer) // 表单配置
data.fields = encodeFields(designer) // 表单字段
if (!data.id) {
await FormApi.createFormApi(data)
message.success(t('common.createSuccess'))
} else {
await FormApi.updateFormApi(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
} finally {
dialogLoading.value = false
}
}
const showJson = () => {
openModel('生成JSON')
type.value = 0
formValue.value = designer.value.getRule()
}
const showOption = () => {
openModel('生成Options')
type.value = 1
formValue.value = designer.value.getOption()
}
const openModel = (title: string) => {
dialogVisible1.value = true
dialogTitle.value = title
}
/** 复制 **/
const copy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text })
if (!isSupported) {
message.error(t('common.copyError'))
} else {
await copy()
if (unref(copied)) {
message.success(t('common.copySuccess'))
}
}
}
// ========== 初始化 ==========
onMounted(() => {
// 场景一：新增表单
const id = query.id as unknown as number
if (!id) {
return
}
// 场景二：修改表单
FormApi.getFormApi(id).then((data) => {
formValues.value = data
setConfAndFields(designer, data.conf, data.fields)
})
})
</script>
src/views/bpm/form/index.vue
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<!-- 操作：新增 -->
<template #toolbar_buttons>
<XButton
type="primary"
preIcon="ep:zoom-in"
:title="t('action.add')"
v-hasPermi="['system:post:create']"
@click="handleCreate()"
<content-wrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="表单名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入表单名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：修改 -->
<XTextButton
preIcon="ep:edit"
:title="t('action.edit')"
v-hasPermi="['bpm:form:update']"
@click="handleUpdate(row.id)"
/>
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['bpm:form:query']"
@click="handleDetail(row.id)"
/>
<!-- 操作：删除 -->
<XTextButton
preIcon="ep:delete"
:title="t('action.del')"
v-hasPermi="['bpm:form:delete']"
@click="deleteData(row.id)"
/>
</template>
</XTable>
<!-- 表单详情的弹窗 -->
<XModal v-model="detailOpen" width="800" title="表单详情">
<form-create :rule="detailPreview.rule" :option="detailPreview.option" v-if="detailOpen" />
</XModal>
</ContentWrap>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" @click="openForm()" v-hasPermi="['bpm:form:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<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 #default="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"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm(scope.row.id)"
v-hasPermi="['bpm:form:update']"
>
编辑
</el-button>
<el-button link @click="openDetail(scope.row.id)" v-hasPermi="['bpm:form:query']">
详情
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['bpm:form:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 表单详情的弹窗 -->
<Dialog title="表单详情" v-model="detailVisible" width="800">
<form-create :rule="detailData.rule" :option="detailData.option" />
</Dialog>
</template>
<script setup lang="ts" name="BpmForm">
// 业务相关的 import
<script setup lang="ts" name="Form">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as FormApi from '@/api/bpm/form'
import { allSchemas } from './form.data'
// 表单详情相关的变量和 import
import { setConfAndFields2 } from '@/utils/formCreate'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由
// 列表相关的变量
const [registerTable, { deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: FormApi.getFormPageApi,
deleteApi: FormApi.deleteFormApi
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null
})
const queryFormRef = ref() // 搜索的表单
// 新增操作
const handleCreate = () => {
push({
name: 'bpmFormEditor'
})
/** 查询参数列表 */
const getList = async () => {
loading.value = true
try {
const data = await FormApi.getFormPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
// 修改操作
const handleUpdate = async (rowId: number) => {
await push({
/** 添加/修改操作 */
const openForm = (id?: number) => {
push({
name: 'bpmFormEditor',
query: {
id: rowId
id
}
})
}
// 详情操作
const detailOpen = ref(false)
const detailPreview = ref({
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await FormApi.deleteForm(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 详情操作 */
const detailVisible = ref(false)
const detailData = ref({
rule: [],
option: {}
})
const handleDetail = async (rowId: number) => {
const openDetail = async (rowId: number) => {
// 设置表单
const data = await FormApi.getFormApi(rowId)
setConfAndFields2(detailPreview, data.conf, data.fields)
const data = await FormApi.getForm(rowId)
setConfAndFields2(detailData, data.conf, data.fields)
// 弹窗打开
detailOpen.value = true
detailVisible.value = true
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/bpm/group/UserGroupForm.vue 0 → 100644
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="组名" prop="name">
<el-input v-model="formData.name" placeholder="请输入组名" />
</el-form-item>
<el-form-item label="描述">
<el-input type="textarea" v-model="formData.name" placeholder="请输入描述" />
</el-form-item>
<el-form-item label="成员" prop="memberUserIds">
<el-select v-model="formData.memberUserIds" multiple placeholder="请选择成员">
<el-option
v-for="user in userList"
:key="user.id"
:label="user.nickname"
:value="user.id"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as UserGroupApi from '@/api/bpm/userGroup'
import * as UserApi from '@/api/system/user'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
description: undefined,
memberUserIds: undefined,
status: CommonStatusEnum.ENABLE
})
const formRules = reactive({
name: [{ required: true, message: '组名不能为空', trigger: 'blur' }],
description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
memberUserIds: [{ required: true, message: '成员不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const userList = ref([]) // 用户列表
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await UserGroupApi.getUserGroup(id)
} finally {
formLoading.value = false
}
}
// 加载用户列表
userList.value = await UserApi.getSimpleUserList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as UserGroupApi.UserGroupVO
if (formType.value === 'create') {
await UserGroupApi.createUserGroup(data)
message.success(t('common.createSuccess'))
} else {
await UserGroupApi.updateUserGroup(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
description: undefined,
memberUserIds: undefined,
status: CommonStatusEnum.ENABLE
}
formRef.value?.resetFields()
}
</script>
src/views/bpm/group/group.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
name: [required],
description: [required],
memberUserIds: [required],
status: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '编号',
action: true,
searchSpan: 8,
columns: [
{
title: '组名',
field: 'name',
isSearch: true
},
{
title: '成员',
field: 'memberUserIds',
table: {
slots: {
default: 'memberUserIds_default'
}
}
},
{
title: '描述',
field: 'description'
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
isForm: false,
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
},
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/model/ModelForm.vue 0 → 100644
<template>
<Dialog :title="modelTitle" v-model="modelVisible" width="600">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="110px"
v-loading="formLoading"
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="formData.key"
placeholder="请输入流标标识"
style="width: 330px"
:disabled="!!formData.id"
/>
<el-tooltip
v-if="!formData.id"
class="item"
effect="light"
content="新建后，流程标识不可修改！"
placement="top"
>
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
<el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
<i style="padding-left: 5px" class="el-icon-question"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入流程名称"
:disabled="!!formData.id"
clearable
/>
</el-form-item>
<el-form-item v-if="formData.id" label="流程分类" prop="category">
<el-select
v-model="formData.category"
placeholder="请选择流程分类"
clearable
style="width: 100%"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
: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="formData.description" clearable />
</el-form-item>
<div v-if="formData.id">
<el-form-item label="表单类型" prop="formType">
<el-radio-group v-model="formData.formType">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
<el-select v-model="formData.formId" clearable style="width: 100%">
<el-option
v-for="form in formList"
:key="form.id"
:label="form.name"
:value="form.id"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="formData.formType === 20"
label="表单提交路由"
prop="formCustomCreatePath"
>
<el-input
v-model="formData.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"></i>
</el-tooltip>
</el-form-item>
<el-form-item
v-if="formData.formType === 20"
label="表单查看路由"
prop="formCustomViewPath"
>
<el-input
v-model="formData.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"></i>
</el-tooltip>
</el-form-item>
</div>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { ElMessageBox } from 'element-plus'
import * as ModelApi from '@/api/bpm/model'
import * as FormApi from '@/api/bpm/form'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
formType: 10,
name: '',
category: undefined,
description: '',
formId: '',
formCustomCreatePath: '',
formCustomViewPath: ''
})
const formRules = reactive({
category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const formList = ref([]) // 流程表单的下拉框的数据
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ModelApi.getModel(id)
} finally {
formLoading.value = false
}
}
// 获得流程表单的下拉框的数据
formList.value = await FormApi.getSimpleFormList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ModelApi.ModelVO
if (formType.value === 'create') {
await ModelApi.createModel(data)
// 提示，引导用户做后续的操作
await ElMessageBox.alert(
'<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
'<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
'<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
'<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
'<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
'重要提示',
{
dangerouslyUseHTMLString: true,
type: 'success'
}
)
} else {
await ModelApi.updateModel(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
formType: 10,
name: '',
category: undefined,
description: '',
formId: '',
formCustomCreatePath: '',
formCustomViewPath: ''
}
formRef.value?.resetFields()
}
</script>
src/views/bpm/model/ModelImportForm.vue 0 → 100644
<template>
<Dialog title="导入流程" v-model="modelVisible" width="400">
<div>
<el-upload
ref="uploadRef"
:action="importUrl"
:headers="uploadHeaders"
:data="formData"
name="bpmnFile"
v-model:file-list="fileList"
:drag="true"
:auto-upload="false"
accept=".bpmn, .xml"
:limit="1"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
:on-error="submitFormError"
:disabled="formLoading"
>
<Icon class="el-icon--upload" icon="ep:upload-filled" />
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
<template #tip>
<div class="el-upload__tip" style="color: red">
提示：仅允许导入“bpm”或“xml”格式文件！
</div>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
<el-form-item label="流程标识" prop="key">
<el-input
v-model="formData.key"
placeholder="请输入流标标识"
style="width: 250px"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入流程名称" clearable />
</el-form-item>
<el-form-item label="流程描述" prop="description">
<el-input type="textarea" v-model="formData.description" clearable />
</el-form-item>
</el-form>
</div>
</template>
</el-upload>
</div>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getAccessToken, getTenantId } from '@/utils/auth'
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formData = ref({
key: '',
name: '',
description: ''
})
const formRules = reactive({
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const uploadRef = ref() // 上传 Ref
const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
/** 打开弹窗 */
const open = async () => {
modelVisible.value = true
resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 重置表单 */
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
formLoading.value = true
uploadRef.value!.submit()
}
/** 文件上传成功 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitFormSuccess = async (response: any): Promise<void> => {
if (response.code !== 0) {
message.error(response.msg)
formLoading.value = false
return
}
// 提示成功
message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
// 发送操作成功的事件
emit('success')
}
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('导入流程失败，请您重新上传！')
formLoading.value = false
}
/** 重置表单 */
const resetForm = () => {
// 重置上传状态和文件
formLoading.value = false
uploadRef.value?.clearFiles()
// 重置表单
formData.value = {
key: '',
name: '',
description: ''
}
formRef.value?.resetFields()
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
</script>
src/views/bpm/model/editor/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 流程设计器，负责绘制流程等 -->
<my-process-designer
key="designer"
v-if="xmlString !== undefined"
v-model="xmlString"
:value="xmlString"
v-bind="controlForm"
keyboard
ref="processDesigner"
@init-finished="initModeler"
:additionalModel="controlForm.additionalModel"
@save="save"
/>
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
<my-properties-panel
key="penal"
:bpmnModeler="modeler"
:prefix="controlForm.prefix"
class="process-panel"
:model="model"
/>
</ContentWrap>
</template>
<script setup lang="ts">
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
import * as ModelApi from '@/api/bpm/model'
const router = useRouter() // 路由
const { query } = useRoute() // 路由的查询
const message = useMessage() // 国际化
const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null) // BPMN Modeler
const controlForm = ref({
simulation: true,
labelEditing: false,
labelVisible: false,
prefix: 'flowable',
headerButtonSize: 'mini',
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
})
const model = ref<ModelApi.ModelVO>() // 流程模型的信息
/** 初始化 modeler */
const initModeler = (item) => {
setTimeout(() => {
modeler.value = item
}, 10)
}
/** 添加/修改模型 */
const save = async (bpmnXml) => {
const data = {
...model.value,
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
} as unknown as ModelApi.ModelVO
// 提交
if (data.id) {
await ModelApi.updateModel(data)
message.success('修改成功')
} else {
await ModelApi.createModel(data)
message.success('新增成功')
}
// 跳转回去
close()
}
/** 关闭按钮 */
const close = () => {
router.push({ path: '/bpm/manager/model' })
}
/** 初始化 */
onMounted(async () => {
const modelId = query.modelId as unknown as number
if (!modelId) {
message.error('缺少模型 modelId 编号')
return
}
// 查询模型
const data = await ModelApi.getModel(modelId)
xmlString.value = data.bpmnXml
model.value = {
...data,
bpmnXml: undefined // 清空 bpmnXml 属性
}
})
</script>
<style lang="scss">
.process-panel__container {
position: absolute;
right: 60px;
top: 90px;
}
</style>
src/views/bpm/model/model.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
key: [required],
name: [required],
category: [required],
formType: [required],
formId: [required],
formCustomCreatePath: [required],
formCustomViewPath: [required]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'key',
primaryType: null,
action: true,
actionWidth: '540px',
columns: [
{
title: '流程标识',
field: 'key',
isSearch: true,
table: {
width: 120
}
},
{
title: '流程名称',
field: 'name',
isSearch: true,
table: {
width: 120,
slots: {
default: 'name_default'
}
}
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number',
isSearch: true,
table: {
slots: {
default: 'category_default'
}
}
},
{
title: '表单信息',
field: 'formId',
table: {
width: 180,
slots: {
default: 'formId_default'
}
}
},
{
title: '最新部署的流程定义',
field: 'processDefinition',
isForm: false,
table: {
children: [
{
title: '流程版本',
field: 'version',
slots: {
default: 'version_default'
},
width: 80
},
{
title: '激活状态',
field: 'status',
slots: {
default: 'status_default'
},
width: 80
},
{
title: '部署时间',
field: 'processDefinition.deploymentTime',
formatter: 'formatDate',
width: 180
}
]
}
},
{
title: t('common.createTime'),
field: 'createTime',
isForm: false,
formatter: 'formatDate',
table: {
width: 180
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/model/modelEditor.vue deleted 100644 → 0
<template>
<div class="app-container">
<!-- 流程设计器，负责绘制流程等 -->
<!-- <myProcessDesigner -->
<my-process-designer
:key="`designer-${reloadIndex}`"
v-if="xmlString !== undefined"
v-model="xmlString"
:value="xmlString"
v-bind="controlForm"
keyboard
ref="processDesigner"
@init-finished="initModeler"
:additionalModel="controlForm.additionalModel"
@save="save"
/>
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
<!-- <MyProcessPalette -->
<my-properties-panel
:key="`penal-${reloadIndex}`"
:bpmnModeler="modeler"
:prefix="controlForm.prefix"
class="process-panel"
:model="model"
/>
</div>
</template>
<script setup lang="ts">
// 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 myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
const router = useRouter()
const message = useMessage()
// 自定义侧边栏
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null)
const reloadIndex = ref(0)
// const controlDrawerVisible = ref(false)
// const translationsSelf = translations
const controlForm = ref({
simulation: true,
labelEditing: false,
labelVisible: false,
prefix: 'flowable',
headerButtonSize: 'mini',
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
})
// const addis = ref({
// CustomContentPadProvider,
// CustomPaletteProvider
// })
// 流程模型的信息
const model = ref<ModelVO>()
onMounted(() => {
// 如果 modelId 非空，说明是修改流程模型
const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
console.log(modelId, 'modelId')
if (modelId) {
// let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
getModelApi(modelId as unknown as number).then((data) => {
console.log(data, 'response')
xmlString.value = data.bpmnXml
model.value = {
...data,
bpmnXml: undefined // 清空 bpmnXml 属性
}
// this.controlForm.processId = data.key
// xmlString.value =
// '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
// model.value = {
// key: 'flowable_01',
// name: 'flowable测试',
// description: 'ooxx',
// category: '1',
// formType: 10,
// formId: 11,
// formCustomCreatePath: null,
// formCustomViewPath: null,
// id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
// createTime: 1645978019795,
// bpmnXml: undefined // 清空 bpmnXml 属性
// }
// console.log(modeler.value, 'modeler11111111')
})
}
})
const initModeler = (item) => {
setTimeout(() => {
modeler.value = item
console.log(item, 'initModeler方法modeler')
console.log(modeler.value, 'initModeler方法modeler')
// controlForm.value.prefix = '2222'
}, 10)
}
const save = (bpmnXml) => {
const data: ModelVO = {
...(model.value ?? ({} as ModelVO)),
bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
}
console.log(data, 'data')
// 修改的提交
if (data.id) {
updateModelApi(data).then((response) => {
console.log(response, 'response')
message.success('修改成功')
// 跳转回去
close()
})
return
}
// 添加的提交
createModelApi(data).then((response) => {
console.log(response, 'response1')
message.success('保存成功')
// 跳转回去
close()
})
}
/** 关闭按钮 */
const close = () => {
router.push({ 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>
src/views/bpm/processInstance/create.vue
......@@ -72,7 +72,7 @@ const [registerTable] = useXTable({
params: {
suspensionState: 1
},
getListApi: DefinitionApi.getProcessDefinitionListApi,
getListApi: DefinitionApi.getProcessDefinitionList,
isList: true
})
......@@ -99,7 +99,7 @@ const handleSelect = async (row) => {
setConfAndFields2(detailForm, row.formConf, row.formFields)
// 加载流程图
DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
DefinitionApi.getProcessDefinitionBpmnXML(row.id).then((response) => {
bpmnXML.value = response
})
// 情况二：业务表单
......
src/views/bpm/processInstance/detail.vue
......@@ -112,13 +112,13 @@
</label>
<label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
<label style="color: #8a909c; font-weight: normal">
{{ dayjs(item?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
{{ 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">
{{ dayjs(item?.endTime).format('YYYY-MM-DD HH:mm:ss') }}
{{ parseTime(item?.endTime) }}
</label>
<label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
耗时：
......@@ -192,7 +192,7 @@
</ContentWrap>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { parseTime } from '@/utils/formatTime'
import * as UserApi from '@/api/system/user'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition'
......@@ -378,7 +378,7 @@ onMounted(() => {
// 加载详情
getDetail()
// 加载用户的列表
UserApi.getListSimpleUsersApi().then((data) => {
UserApi.getSimpleUserList().then((data) => {
userOptions.value.push(...data)
})
})
......@@ -411,7 +411,7 @@ const getDetail = () => {
}
// 加载流程图
DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id).then((data) => {
bpmnXML.value = data
})
......
src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue 0 → 100644
<template>
<Dialog title="修改任务规则" v-model="modelVisible" width="600">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form-item label="任务名称" prop="taskDefinitionName">
<el-input v-model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
</el-form-item>
<el-form-item label="任务标识" prop="taskDefinitionKey">
<el-input v-model="formData.taskDefinitionKey" placeholder="请输入任务标识" disabled />
</el-form-item>
<el-form-item label="规则类型" prop="type">
<el-select v-model="formData.type" clearable style="width: 100%">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
<el-select v-model="formData.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
label="指定部门"
prop="deptIds"
span="24"
v-if="formData.type === 20 || formData.type === 21"
>
<el-tree-select
ref="treeRef"
v-model="formData.deptIds"
node-key="id"
show-checkbox
:props="defaultProps"
:data="deptTreeOptions"
empty-text="加载中，请稍后"
multiple
/>
</el-form-item>
<el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
<el-select v-model="formData.postIds" multiple clearable style="width: 100%">
<el-option
v-for="item in postOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item
label="指定用户"
prop="userIds"
span="24"
v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
>
<el-select v-model="formData.userIds" multiple clearable style="width: 100%">
<el-option
v-for="item in userOptions"
:key="parseInt(item.id)"
:label="item.nickname"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="指定用户组" prop="userGroupIds" v-if="formData.type === 40">
<el-select v-model="formData.userGroupIds" multiple clearable style="width: 100%">
<el-option
v-for="item in userGroupOptions"
:key="parseInt(item.id)"
:label="item.name"
:value="parseInt(item.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="指定脚本" prop="scripts" v-if="formData.type === 50">
<el-select v-model="formData.scripts" multiple clearable style="width: 100%">
<el-option
v-for="dict in taskAssignScriptDictDatas"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form>
<!-- 操作按钮 -->
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { handleTree, defaultProps } from '@/utils/tree'
import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
import * as RoleApi from '@/api/system/role'
import * as DeptApi from '@/api/system/dept'
import * as PostApi from '@/api/system/post'
import * as UserApi from '@/api/system/user'
import * as UserGroupApi from '@/api/bpm/userGroup'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
type: Number(undefined),
modelId: '',
options: [],
roleIds: [],
deptIds: [],
postIds: [],
userIds: [],
userGroupIds: [],
scripts: []
})
const formRules = reactive({
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' }]
})
const formRef = ref() // 表单 Ref
const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
const deptTreeOptions = ref() // 部门树
const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
/** 打开弹窗 */
const open = async (modelId: string, row: TaskAssignRuleApi.TaskAssignVO) => {
// 1. 先重置表单
resetForm()
// 2. 再设置表单
formData.value = {
...row,
modelId: modelId,
options: [],
roleIds: [],
deptIds: [],
postIds: [],
userIds: [],
userGroupIds: [],
scripts: []
}
// 将 options 赋值到对应的 roleIds 等选项
if (row.type === 10) {
formData.value.roleIds.push(...row.options)
} else if (row.type === 20 || row.type === 21) {
formData.value.deptIds.push(...row.options)
} else if (row.type === 22) {
formData.value.postIds.push(...row.options)
} else if (row.type === 30 || row.type === 31 || row.type === 32) {
formData.value.userIds.push(...row.options)
} else if (row.type === 40) {
formData.value.userGroupIds.push(...row.options)
} else if (row.type === 50) {
formData.value.scripts.push(...row.options)
}
// 打开弹窗
modelVisible.value = true
// 获得角色列表
roleOptions.value = await RoleApi.getSimpleRoleList()
// 获得部门列表
deptOptions.value = await DeptApi.getSimpleDeptList()
deptTreeOptions.value = handleTree(deptOptions.value, 'id')
// 获得岗位列表
postOptions.value = await PostApi.getSimplePostList()
// 获得用户列表
userOptions.value = await UserApi.getSimpleUserList()
// 获得用户组列表
userGroupOptions.value = await UserGroupApi.getSimpleUserGroupList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 构建表单
const form = {
...formData.value,
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
// 提交请求
formLoading.value = true
try {
const data = form as unknown as TaskAssignRuleApi.TaskAssignVO
if (!data.id) {
await TaskAssignRuleApi.createTaskAssignRule(data)
message.success(t('common.createSuccess'))
} else {
await TaskAssignRuleApi.updateTaskAssignRule(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formRef.value?.resetFields()
}
</script>
src/views/bpm/taskAssignRule/taskAssignRule.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 表单校验
export const rules = reactive({
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' }]
})
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
actionWidth: '200px',
columns: [
{
title: '任务名',
field: 'taskDefinitionName'
},
{
title: '任务标识',
field: 'taskDefinitionKey'
},
{
title: '规则类型',
field: 'type',
dictType: DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE,
dictClass: 'number'
},
{
title: '规则范围',
field: 'options',
table: {
slots: {
default: 'options_default'
}
}
}
]
})
export const idShowActionClick = (modelId?: any) => {
if (modelId) {
return true
} else {
return false
}
}
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/infra/apiAccessLog/ApiAccessLogDetail.vue 0 → 100644
<template>
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
<el-descriptions border :column="1">
<el-descriptions-item label="日志主键" min-width="120">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="链路追踪">
{{ detailData.traceId }}
</el-descriptions-item>
<el-descriptions-item label="应用名">
{{ detailData.applicationName }}
</el-descriptions-item>
<el-descriptions-item label="用户信息">
{{ detailData.userId }}
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
</el-descriptions-item>
<el-descriptions-item label="用户 IP">
{{ detailData.userIp }}
</el-descriptions-item>
<el-descriptions-item label="用户 UA">
{{ detailData.userAgent }}
</el-descriptions-item>
<el-descriptions-item label="请求信息">
{{ detailData.requestMethod }} {{ detailData.requestUrl }}
</el-descriptions-item>
<el-descriptions-item label="请求参数">
{{ detailData.requestParams }}
</el-descriptions-item>
<el-descriptions-item label="请求时间">
{{ formatDate(detailData.beginTime) }} ~ {{ formatDate(detailData.endTime) }}
</el-descriptions-item>
<el-descriptions-item label="请求耗时">{{ detailData.duration }} ms</el-descriptions-item>
<el-descriptions-item label="操作结果">
<div v-if="detailData.resultCode === 0">正常</div>
<div v-else-if="detailData.resultCode > 0"
>失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}</div
>
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as ApiAccessLog from '@/api/infra/apiAccessLog'
const modelVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单地加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const open = async (data: ApiAccessLog.ApiAccessLogVO) => {
modelVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = data
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
src/views/infra/apiAccessLog/apiAccessLog.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '日志编号',
action: true,
actionWidth: '80px',
columns: [
{
title: '链路追踪',
field: 'traceId',
isTable: false
},
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '应用名',
field: 'applicationName',
isSearch: true
},
{
title: '请求方法名',
field: 'requestMethod'
},
{
title: '请求地址',
field: 'requestUrl',
isSearch: true
},
{
title: '请求时间',
field: 'beginTime',
formatter: 'formatDate',
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '执行时长',
field: 'duration',
table: {
slots: {
default: 'duration_default'
}
}
},
{
title: '操作结果',
field: 'resultCode',
isSearch: true,
table: {
slots: {
default: 'resultCode_default'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/infra/apiAccessLog/index.vue
<template>
<ContentWrap>
<!-- 列表 -->
<XTable @register="registerTable">
<template #duration_default="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
<template #resultCode_default="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
</template>
<template #actionbtns_default="{ row }">
<!-- 操作：详情 -->
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['infra:api-access-log:query']"
@click="handleDetail(row)"
<content-wrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="用户编号" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</template>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
<Descriptions :schema="allSchemas.detailSchema" :data="detailData">
<template #duration="{ row }">
<span>{{ row.duration + 'ms' }}</span>
</template>
<template #resultCode="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<XButton :title="t('dialog.close')" @click="dialogVisible = false" />
</template>
</XModal>
</el-form-item>
<el-form-item label="用户类型" prop="userType">
<el-select
v-model="queryParams.userType"
placeholder="请选择用户类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getDictOptions(DICT_TYPE.USER_TYPE)"
:key="parseInt(dict.value)"
:label="dict.label"
:value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
<el-form-item label="应用名" prop="applicationName">
<el-input
v-model="queryParams.applicationName"
placeholder="请输入应用名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="请求时间" prop="beginTime">
<el-date-picker
v-model="queryParams.beginTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="执行时长" prop="duration">
<el-input
v-model="queryParams.duration"
placeholder="请输入执行时长"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="结果码" prop="resultCode">
<el-input
v-model="queryParams.resultCode"
placeholder="请输入结果码"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['infra:api-error-log:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<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 #default="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" width="80" />
<el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
<el-table-column label="请求时间" align="center" prop="beginTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.beginTime) }}</span>
</template>
</el-table-column>
<el-table-column label="执行时长" align="center" prop="duration" width="180">
<template #default="scope">
<span>{{ scope.row.duration }} ms</span>
</template>
</el-table-column>
<el-table-column label="操作结果" align="center" prop="status">
<template #default="scope">
<span>{{
scope.row.resultCode === 0 ? '成功' : '失败(' + scope.row.resultMsg + ')'
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openDetail(scope.row)"
v-hasPermi="['infra:api-access-log:query']"
>
详细
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗：详情 -->
<ApiAccessLogDetail ref="detailRef" />
</template>
<script setup lang="ts" name="ApiAccessLog">
import { allSchemas } from './apiAccessLog.data'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import download from '@/utils/download'
import { formatDate } from '@/utils/formatTime'
import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
import ApiAccessLogDetail from './ApiAccessLogDetail.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable] = useXTable({
allSchemas: allSchemas,
topActionSlots: false,
getListApi: ApiAccessLogApi.getApiAccessLogPageApi
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: null,
userType: null,
applicationName: null,
requestUrl: null,
duration: null,
resultCode: null,
beginTime: []
})
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题
// 详情操作
const handleDetail = (row: ApiAccessLogApi.ApiAccessLogVO) => {
// 设置数据
detailData.value = row
dialogTitle.value = t('action.detail')
dialogVisible.value = true
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ApiAccessLogApi.getApiAccessLogPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 详情操作 */
const detailRef = ref()
const openDetail = (data: ApiAccessLogApi.ApiAccessLogVO) => {
detailRef.value.open(data)
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ApiAccessLogApi.exportApiAccessLog(queryParams)
download.excel(data, 'API 访问日志.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/infra/apiErrorLog/ApiErrorLogDetail.vue 0 → 100644
<template>
<Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500" width="800">
<el-descriptions border :column="1">
<el-descriptions-item label="日志主键" min-width="120">
{{ detailData.id }}
</el-descriptions-item>
<el-descriptions-item label="链路追踪">
{{ detailData.traceId }}
</el-descriptions-item>
<el-descriptions-item label="应用名">
{{ detailData.applicationName }}
</el-descriptions-item>
<el-descriptions-item label="用户编号">
{{ detailData.userId }}
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
</el-descriptions-item>
<el-descriptions-item label="用户 IP">
{{ detailData.userIp }}
</el-descriptions-item>
<el-descriptions-item label="用户 UA">
{{ detailData.userAgent }}
</el-descriptions-item>
<el-descriptions-item label="请求信息">
{{ detailData.requestMethod }} {{ detailData.requestUrl }}
</el-descriptions-item>
<el-descriptions-item label="请求参数">
{{ detailData.requestParams }}
</el-descriptions-item>
<el-descriptions-item label="异常时间">
{{ formatDate(detailData.exceptionTime) }}
</el-descriptions-item>
<el-descriptions-item label="异常名">
{{ detailData.exceptionName }}
</el-descriptions-item>
<el-descriptions-item label="异常堆栈" v-if="detailData.exceptionStackTrace">
<el-input
type="textarea"
:readonly="true"
:autosize="{ maxRows: 20 }"
v-model="detailData.exceptionStackTrace"
/>
</el-descriptions-item>
<el-descriptions-item label="处理状态">
<dict-tag
:type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
:value="detailData.processStatus"
/>
</el-descriptions-item>
<el-descriptions-item label="处理人" v-if="detailData.processUserId">
{{ detailData.processUserId }}
</el-descriptions-item>
<el-descriptions-item label="处理时间" v-if="detailData.processTime">
{{ formatDate(detailData.processTime) }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as ApiErrorLog from '@/api/infra/apiErrorLog'
const modelVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const open = async (data: ApiErrorLog.ApiErrorLogVO) => {
modelVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = data
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
src/views/infra/apiErrorLog/apiErrorLog.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '日志编号',
action: true,
actionWidth: '300',
columns: [
{
title: '链路追踪',
field: 'traceId',
isTable: false
},
{
title: '用户编号',
field: 'userId',
isSearch: true
},
{
title: '用户类型',
field: 'userType',
dictType: DICT_TYPE.USER_TYPE,
isSearch: true
},
{
title: '应用名',
field: 'applicationName',
isSearch: true
},
{
title: '请求方法名',
field: 'requestMethod'
},
{
title: '请求地址',
field: 'requestUrl',
isSearch: true
},
{
title: '异常发生时间',
field: 'exceptionTime',
formatter: 'formatDate',
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '异常名',
field: 'exceptionName'
},
{
title: '处理状态',
field: 'processStatus',
dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '处理人',
field: 'processUserId',
isTable: false
},
{
title: '处理时间',
field: 'processTime',
formatter: 'formatDate',
isTable: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/infra/build/index.vue
......@@ -3,77 +3,99 @@
<el-row>
<el-col>
<div class="mb-2 float-right">
<el-button size="small" @click="setJson"> 导入JSON</el-button>
<el-button size="small" @click="setOption"> 导入Options</el-button>
<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
<el-button size="small" type="success" @click="showOption">生成Options</el-button>
<el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
<el-button size="small" type="success" @click="showOption">生成O ptions</el-button>
<el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
<!-- <el-button size="small" @click="changeLocale">中英切换</el-button> -->
</div>
</el-col>
<!-- 表单设计器 -->
<el-col>
<fc-designer ref="designer" height="780px" />
</el-col>
</el-row>
<Dialog :title="dialogTitle" v-model="dialogVisible" maxHeight="600">
<div ref="editor" v-if="dialogVisible">
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
<el-scrollbar height="580">
<div v-highlight>
<code class="hljs">
{{ formValue }}
</code>
</div>
</el-scrollbar>
</div>
<span style="color: red" v-if="err">输入内容格式有误!</span>
</Dialog>
</ContentWrap>
<!-- 弹窗：表单预览 -->
<Dialog :title="dialogTitle" v-model="dialogVisible" max-height="600">
<div ref="editor" v-if="dialogVisible">
<el-button style="float: right" @click="copy(formData)">
{{ t('common.copy') }}
</el-button>
<el-scrollbar height="580">
<div v-highlight>
<code class="hljs">
{{ formData }}
</code>
</div>
</el-scrollbar>
</div>
</Dialog>
</template>
<script setup lang="ts" name="Build">
import formCreate from '@form-create/element-ui'
import { useClipboard } from '@vueuse/core'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息
const { t } = useI18n()
const message = useMessage()
const designer = ref()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const err = ref(false)
const type = ref(-1)
const formValue = ref('')
const designer = ref() // 表单设计器
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formType = ref(-1) // 表单的类型：0 - 生成 JSON；1 - 生成 Options；2 - 生成组件
const formData = ref('') // 表单数据
/** 打开弹窗 */
const openModel = (title: string) => {
dialogVisible.value = true
dialogTitle.value = title
}
const setJson = () => {
openModel('导入JSON--未实现')
}
const setOption = () => {
openModel('导入Options--未实现')
}
/** 生成 JSON */
const showJson = () => {
openModel('生成JSON')
type.value = 0
formValue.value = designer.value.getRule()
openModel('生成 JSON')
formType.value = 0
formData.value = designer.value.getRule()
}
/** 生成 Options */
const showOption = () => {
openModel('生成Options')
type.value = 1
formValue.value = designer.value.getOption()
openModel('生成 Options')
formType.value = 1
formData.value = designer.value.getOption()
}
/** 生成组件 */
const showTemplate = () => {
openModel('生成组件')
type.value = 2
formValue.value = makeTemplate()
formType.value = 2
formData.value = makeTemplate()
}
const makeTemplate = () => {
const rule = designer.value.getRule()
const opt = designer.value.getOption()
return `<template>
<form-create
v-model="fapi"
:rule="rule"
:option="option"
@submit="onSubmit"
></form-create>
</template>
<script setup lang=ts>
import formCreate from "@form-create/element-ui";
const faps = ref(null)
const rule = ref('')
const option = ref('')
const init = () => {
rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
option.value = formCreate.parseJson('${JSON.stringify(opt)}')
}
const onSubmit = (formData) => {
//todo 提交表单
}
init()
<\/script>`
}
// const changeLocale = () => {
// console.info('changeLocale')
// }
/** 复制 **/
const copy = async (text: string) => {
......@@ -87,31 +109,4 @@ const copy = async (text: string) => {
}
}
}
const makeTemplate = () => {
const rule = designer.value.getRule()
const opt = designer.value.getOption()
return `<template>
<form-create
v-model="fapi"
:rule="rule"
:option="option"
@submit="onSubmit"
></form-create>
</template>
<script setup lang=ts>
import formCreate from "@form-create/element-ui";
const faps = ref(null)
const rule = ref('')
const option = ref('')
const init = () => {
rule.value = formCreate.parseJson('${formCreate.toJson(rule).replaceAll('\\', '\\\\')}')
option.value = formCreate.parseJson('${JSON.stringify(opt)}')
}
const onSubmit = (formData) => {
//todo 提交表单
}
init()
<\/script>`
}
</script>
src/views/infra/config/form.vue
......@@ -35,10 +35,8 @@
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
......
src/views/infra/dataSourceConfig/form.vue
......@@ -21,10 +21,8 @@
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
......
src/views/infra/file/form.vue
......@@ -23,10 +23,8 @@
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
<el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
......
src/views/infra/fileConfig/form.vue
......@@ -93,10 +93,8 @@
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</div>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
......
src/views/infra/job/JobLog.vue
......@@ -12,11 +12,7 @@
/>
</template>
<template #beginTime_default="{ row }">
<span>{{
dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') +
' ~ ' +
dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
}}</span>
<span>{{ parseTime(row.beginTime) + ' ~ ' + parseTime(row.endTime) }}</span>
</template>
<template #duration_default="{ row }">
<span>{{ row.duration + ' 毫秒' }}</span>
......@@ -48,7 +44,7 @@
</XModal>
</template>
<script setup lang="ts" name="JobLog">
import dayjs from 'dayjs'
import { parseTime } from '@/utils/formatTime'
import * as JobLogApi from '@/api/infra/jobLog'
import { allSchemas } from './jobLog.data'
......
src/views/infra/webSocket/index.vue
......@@ -44,7 +44,7 @@
<li v-for="item in getList" class="mt-2" :key="item.time">
<div class="flex items-center">
<span class="mr-2 text-primary font-medium">收到消息:</span>
<span>{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
<span>{{ parseTime(item.time) }}</span>
</div>
<div>
{{ item.res }}
......@@ -56,7 +56,7 @@
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { parseTime } from '@/utils/formatTime'
import { useUserStore } from '@/store/modules/user'
import { useWebSocket } from '@vueuse/core'
......
src/views/mp/account/AccountForm.vue 0 → 100644
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="rules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="微信号" prop="account">
<template #label>
<span>
<el-tooltip
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 账号详情] 中能找到「微信号」"
placement="top"
>
<Icon icon="ep:question-filled" style="vertical-align: middle" />
</el-tooltip>
微信号
</span>
</template>
<el-input v-model="formData.account" placeholder="请输入微信号" />
</el-form-item>
<el-form-item label="appId" prop="appId">
<template #label>
<span>
<el-tooltip
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者ID(AppID)」"
placement="top"
>
<Icon icon="ep:question-filled" style="vertical-align: middle" />
</el-tooltip>
appId
</span>
</template>
<el-input v-model="formData.appId" placeholder="请输入公众号 appId" />
</el-form-item>
<el-form-item label="appSecret" prop="appSecret">
<template #label>
<span>
<el-tooltip
content="在微信公众平台（mp.weixin.qq.com）的菜单 [设置与开发 - 公众号设置 - 基本设置] 中能找到「开发者密码(AppSecret)」"
placement="top"
>
<Icon icon="ep:question-filled" style="vertical-align: middle" />
</el-tooltip>
appSecret
</span>
</template>
<el-input v-model="formData.appSecret" placeholder="请输入公众号 appSecret" />
</el-form-item>
<el-form-item label="token" prop="token">
<el-input v-model="formData.token" placeholder="请输入公众号token" />
</el-form-item>
<el-form-item label="消息加解密密钥" prop="aesKey">
<el-input v-model="formData.aesKey" placeholder="请输入消息加解密密钥" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as AccountApi from '@/api/mp/account'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: '',
account: '',
appId: '',
appSecret: '',
token: '',
aesKey: '',
remark: ''
})
const rules = reactive({
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
account: [{ required: true, message: '公众号账号不能为空', trigger: 'blur' }],
appId: [{ required: true, message: '公众号 appId 不能为空', trigger: 'blur' }],
appSecret: [{ required: true, message: '公众号密钥不能为空', trigger: 'blur' }],
token: [{ required: true, message: '公众号 token 不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await AccountApi.getAccount(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value
if (formType.value === 'create') {
await AccountApi.createAccount(data)
message.success(t('common.createSuccess'))
} else {
await AccountApi.updateAccount(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 表单重置 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
account: '',
appId: '',
appSecret: '',
token: '',
aesKey: '',
remark: ''
}
formRef.value?.resetFields()
}
</script>
src/views/mp/account/index.vue
<template>
<span>开发中</span>
<!-- 搜索工作栏 -->
<content-wrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['mp:account:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</content-wrap>
<!-- 列表 -->
<content-wrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="微信号" align="center" prop="account" width="180" />
<el-table-column label="appId" align="center" prop="appId" width="180" />
<el-table-column label="服务器地址(URL)" align="center" prop="appId" width="360">
<template #default="scope">
{{ 'http://服务端地址/mp/open/' + scope.row.appId }}
</template>
</el-table-column>
<el-table-column label="二维码" align="center" prop="qrCodeUrl">
<template #default="scope">
<img
v-if="scope.row.qrCodeUrl"
:src="scope.row.qrCodeUrl"
alt="二维码"
style="height: 100px; display: inline-block"
/>
<el-button
link
type="primary"
@click="handleGenerateQrCode(scope.row)"
v-hasPermi="['mp:account:qr-code']"
>
生成二维码
</el-button>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mp:account:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mp:account:delete']"
>
删除
</el-button>
<el-button
link
type="danger"
@click="handleCleanQuota(scope.row)"
v-hasPermi="['mp:account:clear-quota']"
>
清空 API 配额
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
<!-- 对话框(添加 / 修改) -->
<AccountForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="MpAccount">
import * as AccountApi from '@/api/mp/account'
import AccountForm from './AccountForm.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,
account: null,
appId: null
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
// 处理查询参数
let params = { ...queryParams }
// 执行查询
const data = await AccountApi.getAccountPage(params)
list.value = data.list
total.value = data.total
loading.value = false
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await AccountApi.deleteAccount(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 生成二维码的按钮操作 */
const handleGenerateQrCode = async (row) => {
try {
// 生成二维码的二次确认
await message.confirm('是否确认生成公众号账号编号为"' + row.name + '"的二维码?')
// 发起生成二维码
await AccountApi.generateAccountQrCode(row.id)
message.success('生成二维码成功')
// 刷新列表
await getList()
} catch {}
}
/** 清空二维码 API 配额的按钮操作 */
const handleCleanQuota = async (row) => {
try {
// 清空 API 配额的二次确认
await message.confirm('是否确认清空生成公众号账号编号为"' + row.name + '"的 API 配额?')
// 发起清空 API 配额
await AccountApi.clearAccountQuota(row.id)
message.success('清空 API 配额成功')
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/mp/components/wx-location/main.vue 0 → 100644
<!--
【微信消息 - 定位】
-->
<template>
<div>
<el-link
type="primary"
target="_blank"
:href="
'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
locationY +
'&pointy=' +
locationX +
'&name=' +
label +
'&ref=yudao'
"
>
<el-col>
<el-row>
<img
:src="
'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
locationX +
',' +
locationY +
'&key=' +
qqMapKey +
'&size=250*180'
"
/>
</el-row>
<el-row>
<el-icon><Location /></el-icon>
<Icon icon="ep:location" />
{{ label }}
</el-row>
</el-col>
</el-link>
</div>
</template>
<script setup lang="ts" name="WxLocation">
const props = defineProps({
locationX: {
required: true,
type: Number
},
locationY: {
required: true,
type: Number
},
label: {
// 地名
required: true,
type: String
},
qqMapKey: {
// QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
required: false,
type: String,
default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
}
})
defineExpose({
locationX: props.locationX,
locationY: props.locationY,
label: props.label,
qqMapKey: props.qqMapKey
})
</script>
src/views/mp/components/wx-msg/card.scss 0 → 100644
.avue-card{
&__item{
margin-bottom: 16px;
border: 1px solid #e8e8e8;
background-color: #fff;
box-sizing: border-box;
color: rgba(0,0,0,.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: "tnum";
cursor: pointer;
height:200px;
&:hover{
border-color: rgba(0,0,0,.09);
box-shadow: 0 2px 8px rgba(0,0,0,.09);
}
&--add{
border:1px dashed #000;
width: 100%;
color: rgba(0,0,0,.45);
background-color: #fff;
border-color: #d9d9d9;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
i{
margin-right: 10px;
}
&:hover{
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
}
}
&__body{
display: flex;
padding: 24px;
}
&__detail{
flex:1
}
&__avatar{
width: 48px;
height: 48px;
border-radius: 48px;
overflow: hidden;
margin-right: 12px;
img{
width: 100%;
height: 100%;
}
}
&__title{
color: rgba(0,0,0,.85);
margin-bottom: 12px;
font-size: 16px;
&:hover{
color:#1890ff;
}
}
&__info{
color: rgba(0,0,0,.45);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height: 64px;
}
&__menu{
display: flex;
justify-content:space-around;
height: 50px;
background: #f7f9fa;
color: rgba(0,0,0,.45);
text-align: center;
line-height: 50px;
&:hover{
color:#1890ff;
}
}
}
/** joolun 额外加的 */
.avue-comment__main {
flex: unset!important;
border-radius: 5px!important;
margin: 0 8px!important;
}
.avue-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
src/views/mp/components/wx-msg/comment.scss 0 → 100644
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment{
margin-bottom: 30px;
display: flex;
align-items: flex-start;
&--reverse{
flex-direction:row-reverse;
.avue-comment__main{
&:before,&:after{
left: auto;
right: -8px;
border-width: 8px 0 8px 8px;
}
&:before{
border-left-color: #dedede;
}
&:after{
border-left-color: #f8f8f8;
margin-right: 1px;
margin-left: auto;
}
}
}
&__avatar{
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid transparent;
box-sizing: border-box;
vertical-align: middle;
}
&__header{
padding: 5px 15px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
}
&__author{
font-weight: 700;
font-size: 14px;
color: #999;
}
&__main{
flex:1;
margin: 0 20px;
position: relative;
border: 1px solid #dedede;
border-radius: 2px;
&:before,&:after{
position: absolute;
top: 10px;
left: -8px;
right: 100%;
width: 0;
height: 0;
display: block;
content: " ";
border-color: transparent;
border-style: solid solid outset;
border-width: 8px 8px 8px 0;
pointer-events: none;
}
&:before {
border-right-color: #dedede;
z-index: 1;
}
&:after{
border-right-color: #f8f8f8;
margin-left: 1px;
z-index: 2;
}
}
&__body{
padding: 15px;
overflow: hidden;
background: #fff;
font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
font-size: 14px;
}
blockquote{
margin:0;
font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
padding: 1px 0 1px 15px;
border-left: 4px solid #ddd;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment